Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

storybook webpack builder to use swc instead of babel #22075

Merged
merged 16 commits into from
May 23, 2023
Merged

storybook webpack builder to use swc instead of babel #22075

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
1c54cc2
give webpack users the option of not using babel
ndelangen Apr 13, 2023
7a7086c
setup proper default settings
ndelangen Apr 13, 2023
701f659
Merge branch 'next' into norbert/other-secret-project
ndelangen Apr 13, 2023
4c37e79
rename file
ndelangen Apr 13, 2023
b357f1e
add warning
ndelangen Apr 13, 2023
1f3dc18
add an sandbox testing this feature
ndelangen Apr 13, 2023
5549c49
Merge branch 'next' into norbert/other-secret-project
ndelangen Apr 17, 2023
c6acb92
Merge branch 'next' into norbert/other-secret-project
ndelangen Apr 28, 2023
f7e739d
Merge branch 'next' into norbert/other-secret-project
ndelangen May 1, 2023
fc9fbb9
Merge branch 'next' into norbert/other-secret-project
ndelangen May 1, 2023
fbc394a
Merge branch 'next' into norbert/other-secret-project
ndelangen May 16, 2023
77732f3
linting
ndelangen May 16, 2023
0be4e71
cleanup
ndelangen May 19, 2023
423df2e
Merge branch 'next' into norbert/other-secret-project
ndelangen May 19, 2023
6ac6dd4
Merge branch 'next' into norbert/other-secret-project
ndelangen May 22, 2023
07cd086
Merge branch 'next' into norbert/other-secret-project
ndelangen May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions code/lib/builder-webpack5/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
"@storybook/router": "7.1.0-alpha.3",
"@storybook/store": "7.1.0-alpha.3",
"@storybook/theming": "7.1.0-alpha.3",
"@swc/core": "^1.3.49",
valentinpalkovic marked this conversation as resolved.
Show resolved Hide resolved
"@types/node": "^16.0.0",
"@types/semver": "^7.3.4",
"babel-loader": "^9.0.0",
Expand All @@ -92,6 +93,7 @@
"process": "^0.11.10",
"semver": "^7.3.7",
"style-loader": "^3.3.1",
"swc-loader": "^0.2.3",
"terser-webpack-plugin": "^5.3.1",
"ts-dedent": "^2.0.0",
"util": "^0.12.4",
Expand Down
16 changes: 0 additions & 16 deletions code/lib/builder-webpack5/src/preview/babel-loader-preview.ts
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
import { toRequireContextString, toImportFn } from '@storybook/core-webpack';
import { dedent } from 'ts-dedent';
import type { BuilderOptions, TypescriptOptions } from '../types';
import { createBabelLoader } from './babel-loader-preview';
import { createBabelLoader, createSWCLoader } from './loaders';

const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));

Expand Down Expand Up @@ -296,7 +296,9 @@ export default async (
fullySpecified: false,
},
},
createBabelLoader(babelOptions, typescriptOptions),
builderOptions.useSWC
? createSWCLoader({})
ndelangen marked this conversation as resolved.
Show resolved Hide resolved
: createBabelLoader(babelOptions, typescriptOptions),
{
test: /\.md$/,
type: 'asset/source',
Expand Down
43 changes: 43 additions & 0 deletions code/lib/builder-webpack5/src/preview/loaders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { getProjectRoot } from '@storybook/core-common';
import type { Options } from '@swc/core';
import type { TypescriptOptions } from '../types';

export const createBabelLoader = (options: any, typescriptOptions: TypescriptOptions) => {
return {
test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
use: [
{
loader: require.resolve('babel-loader'),
options,
},
],
include: [getProjectRoot()],
exclude: /node_modules/,
};
};

export const createSWCLoader = (options: any) => {
const config: Options = {
jsc: {
parser: {
syntax: 'typescript',
tsx: true,
dynamicImport: true,
},
},
};
return {
test: /\.(mjs|cjs|tsx?|jsx?)$/,
use: [
{
loader: require.resolve('swc-loader'),
options: {
...config,
...options,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way to merge the options will haunt us later. If options specify jsc, they will completely override the default jsc options from the config above. We need to merge them more intelligently. Or not support custom options at all.

Copy link
Member Author

@ndelangen ndelangen Apr 13, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless we explicitly choose to not let users do that.

Similar to babel config, it should actually really come from swc's config file.

Or not support custom options at all.

Yes that exactly. I'm leaning towards that.

But considering 1 or the biggest use-cases of this feature will be "I don't know how to setup babel at all in my monorepo" + "storybook is so slow (due to babel being used)", having a tiny default setup seems sane.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I think the solution here is to remove the possibility for createSWCLoader to take in any options at all.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

},
},
],
include: [getProjectRoot()],
exclude: /node_modules/,
};
};
1 change: 1 addition & 0 deletions code/lib/builder-webpack5/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack'

export type BuilderOptions = {
fsCache?: boolean;
useSWC?: boolean;
lazyCompilation?: boolean;
};

Expand Down
126 changes: 126 additions & 0 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5759,6 +5759,7 @@ __metadata:
"@storybook/router": 7.1.0-alpha.3
"@storybook/store": 7.1.0-alpha.3
"@storybook/theming": 7.1.0-alpha.3
"@swc/core": ^1.3.49
"@types/node": ^16.0.0
"@types/pretty-hrtime": ^1.0.0
"@types/semver": ^7.3.4
Expand All @@ -5781,6 +5782,7 @@ __metadata:
semver: ^7.3.7
slash: ^5.0.0
style-loader: ^3.3.1
swc-loader: ^0.2.3
terser-webpack-plugin: ^5.3.1
ts-dedent: ^2.0.0
typescript: ~4.9.3
Expand Down Expand Up @@ -7620,69 +7622,139 @@ __metadata:
languageName: node
linkType: hard

"@swc/core-darwin-arm64@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-darwin-arm64@npm:1.3.49"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard

"@swc/core-darwin-x64@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-darwin-x64@npm:1.3.44"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard

"@swc/core-darwin-x64@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-darwin-x64@npm:1.3.49"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard

"@swc/core-linux-arm-gnueabihf@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.44"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard

"@swc/core-linux-arm-gnueabihf@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.49"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard

"@swc/core-linux-arm64-gnu@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-linux-arm64-gnu@npm:1.3.44"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard

"@swc/core-linux-arm64-gnu@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-linux-arm64-gnu@npm:1.3.49"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard

"@swc/core-linux-arm64-musl@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-linux-arm64-musl@npm:1.3.44"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard

"@swc/core-linux-arm64-musl@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-linux-arm64-musl@npm:1.3.49"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard

"@swc/core-linux-x64-gnu@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-linux-x64-gnu@npm:1.3.44"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard

"@swc/core-linux-x64-gnu@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-linux-x64-gnu@npm:1.3.49"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard

"@swc/core-linux-x64-musl@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-linux-x64-musl@npm:1.3.44"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard

"@swc/core-linux-x64-musl@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-linux-x64-musl@npm:1.3.49"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard

"@swc/core-win32-arm64-msvc@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-win32-arm64-msvc@npm:1.3.44"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard

"@swc/core-win32-arm64-msvc@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-win32-arm64-msvc@npm:1.3.49"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard

"@swc/core-win32-ia32-msvc@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-win32-ia32-msvc@npm:1.3.44"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard

"@swc/core-win32-ia32-msvc@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-win32-ia32-msvc@npm:1.3.49"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard

"@swc/core-win32-x64-msvc@npm:1.3.44":
version: 1.3.44
resolution: "@swc/core-win32-x64-msvc@npm:1.3.44"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard

"@swc/core-win32-x64-msvc@npm:1.3.49":
version: 1.3.49
resolution: "@swc/core-win32-x64-msvc@npm:1.3.49"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard

"@swc/core@npm:^1.3.23":
version: 1.3.44
resolution: "@swc/core@npm:1.3.44"
Expand Down Expand Up @@ -7722,6 +7794,50 @@ __metadata:
languageName: node
linkType: hard

"@swc/core@npm:^1.3.49":
version: 1.3.49
resolution: "@swc/core@npm:1.3.49"
dependencies:
"@swc/core-darwin-arm64": 1.3.49
"@swc/core-darwin-x64": 1.3.49
"@swc/core-linux-arm-gnueabihf": 1.3.49
"@swc/core-linux-arm64-gnu": 1.3.49
"@swc/core-linux-arm64-musl": 1.3.49
"@swc/core-linux-x64-gnu": 1.3.49
"@swc/core-linux-x64-musl": 1.3.49
"@swc/core-win32-arm64-msvc": 1.3.49
"@swc/core-win32-ia32-msvc": 1.3.49
"@swc/core-win32-x64-msvc": 1.3.49
peerDependencies:
"@swc/helpers": ^0.5.0
dependenciesMeta:
"@swc/core-darwin-arm64":
optional: true
"@swc/core-darwin-x64":
optional: true
"@swc/core-linux-arm-gnueabihf":
optional: true
"@swc/core-linux-arm64-gnu":
optional: true
"@swc/core-linux-arm64-musl":
optional: true
"@swc/core-linux-x64-gnu":
optional: true
"@swc/core-linux-x64-musl":
optional: true
"@swc/core-win32-arm64-msvc":
optional: true
"@swc/core-win32-ia32-msvc":
optional: true
"@swc/core-win32-x64-msvc":
optional: true
peerDependenciesMeta:
"@swc/helpers":
optional: true
checksum: 3a8463047fb79a4bc5987cd24f935e19e59dfe967648c6abbc0b61f9197b76109de832fb03e5e6452459f9e2165b565f86dbc9ecd9506f58bd4befff8e0ddc47
languageName: node
linkType: hard

"@swc/helpers@npm:0.4.14":
version: 0.4.14
resolution: "@swc/helpers@npm:0.4.14"
Expand Down Expand Up @@ -28161,6 +28277,16 @@ __metadata:
languageName: node
linkType: hard

"swc-loader@npm:^0.2.3":
version: 0.2.3
resolution: "swc-loader@npm:0.2.3"
peerDependencies:
"@swc/core": ^1.2.147
webpack: ">=2"
checksum: cb3f9b116fbd292b881e804a4fe66cd6d543a7de2572f5a68e067e4780ee2d59a8da87a90736ba6e8e286e4368c98214ae3486b1b872080292814e5d3062f09c
languageName: node
linkType: hard

"symbol-observable@npm:4.0.0":
version: 4.0.0
resolution: "symbol-observable@npm:4.0.0"
Expand Down