From 61d535f5ec32659f39dc673d9df1992b0f0d7949 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Jul 2021 11:46:13 +0200 Subject: [PATCH 1/7] edit docs to tel users the custom babel config should be in the storybook config directory --- docs/configure/babel.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/configure/babel.md b/docs/configure/babel.md index 7e3b2dd07926..5ce91fabaab5 100644 --- a/docs/configure/babel.md +++ b/docs/configure/babel.md @@ -18,9 +18,7 @@ Check out our [source](https://github.com/storybookjs/storybook/blob/next/lib/co ### Custom config file -If your project has a `.babelrc` file, we'll use that instead of the default config file. - -You can also place a `.storybook/.babelrc` file to use a special configuration for Storybook only. +If your project has a `.storybook/.babelrc` file, we'll use that instead of the default config file. ### Custom configuration From 5c24415caa6869bddf8622cf09cd39da387913ac Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Jul 2021 12:03:54 +0200 Subject: [PATCH 2/7] add support for babel config file exporting a function --- .../src/utils/load-custom-babel-config.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/lib/core-common/src/utils/load-custom-babel-config.ts b/lib/core-common/src/utils/load-custom-babel-config.ts index 7b1faaf8c997..3d6371aad00d 100644 --- a/lib/core-common/src/utils/load-custom-babel-config.ts +++ b/lib/core-common/src/utils/load-custom-babel-config.ts @@ -48,10 +48,16 @@ function loadFromPath(babelConfigPath: string): TransformOptions { throw error.js; } + if (config instanceof Function) { + config = config(); + } + config = { ...config, babelrc: false }; } - if (!config) return null; + if (!config) { + return null; + } // Remove react-hmre preset. // It causes issues with react-storybook. @@ -69,10 +75,10 @@ function loadFromPath(babelConfigPath: string): TransformOptions { return config; } -export const loadCustomBabelConfig = async function ( +export const loadCustomBabelConfig = async ( configDir: string, getDefaultConfig: () => TransformOptions -) { +) => { // Between versions 5.1.0 - 5.1.9 this loaded babel.config.js from the project // root, which was an unintentional breaking change. We can add back project support // in 6.0. From 977f0fe805cdad7401fc6ed43de06df1cc9bc65e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Jul 2021 14:10:38 +0200 Subject: [PATCH 3/7] add support for babel.config.ts --- lib/core-common/src/utils/load-custom-babel-config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/core-common/src/utils/load-custom-babel-config.ts b/lib/core-common/src/utils/load-custom-babel-config.ts index 3d6371aad00d..367e6145080f 100644 --- a/lib/core-common/src/utils/load-custom-babel-config.ts +++ b/lib/core-common/src/utils/load-custom-babel-config.ts @@ -87,6 +87,7 @@ export const loadCustomBabelConfig = async ( loadFromPath(path.resolve(configDir, '.babelrc.json')) || loadFromPath(path.resolve(configDir, '.babelrc.js')) || loadFromPath(path.resolve(configDir, 'babel.config.json')) || + loadFromPath(path.resolve(configDir, 'babel.config.ts')) || loadFromPath(path.resolve(configDir, 'babel.config.js')); if (babelConfig) { From 0f3a37dcb0282a5a47d4cc4d1f9040da803f7673 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Jul 2021 17:26:13 +0200 Subject: [PATCH 4/7] simplify load-custom-babel-config to not do any if|or. just returns what it got from the file, if no file return null perform or operation in the common-preset, determines the default babel config object --- lib/core-common/src/utils/load-custom-babel-config.ts | 7 ++----- lib/core-server/src/presets/common-preset.ts | 10 +++++----- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/lib/core-common/src/utils/load-custom-babel-config.ts b/lib/core-common/src/utils/load-custom-babel-config.ts index 367e6145080f..dc654f87391a 100644 --- a/lib/core-common/src/utils/load-custom-babel-config.ts +++ b/lib/core-common/src/utils/load-custom-babel-config.ts @@ -75,10 +75,7 @@ function loadFromPath(babelConfigPath: string): TransformOptions { return config; } -export const loadCustomBabelConfig = async ( - configDir: string, - getDefaultConfig: () => TransformOptions -) => { +export const loadCustomBabelConfig = async (configDir: string) => { // Between versions 5.1.0 - 5.1.9 this loaded babel.config.js from the project // root, which was an unintentional breaking change. We can add back project support // in 6.0. @@ -99,5 +96,5 @@ export const loadCustomBabelConfig = async ( return babelConfig; } - return getDefaultConfig(); + return null; }; diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts index 4382b106b6a0..3ce87b3f2993 100644 --- a/lib/core-server/src/presets/common-preset.ts +++ b/lib/core-server/src/presets/common-preset.ts @@ -4,7 +4,7 @@ import { getManagerMainTemplate, getPreviewMainTemplate, loadCustomBabelConfig, - babelConfig, + babelConfig as getDefaultBabelConfig, loadEnvs, Options, } from '@storybook/core-common'; @@ -12,10 +12,10 @@ import { export const babel = async (_: unknown, options: Options) => { const { configDir, presets } = options; - return loadCustomBabelConfig( - configDir, - () => presets.apply('babelDefault', babelConfig(), options) as any - ); + const babelConfigFromFile = await loadCustomBabelConfig(configDir); + const defaultBabelConfig = await getDefaultBabelConfig(); + + return presets.apply('babelDefault', babelConfigFromFile || defaultBabelConfig, options); }; export const logLevel = (previous: any, options: Options) => previous || options.loglevel || 'info'; From 094fc124ef24720c0adc1ff6a71a30986f5f25b7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 21 Jul 2021 14:43:54 +0200 Subject: [PATCH 5/7] do not load babel config files from upward directories by default --- lib/core-common/src/utils/babel.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/core-common/src/utils/babel.ts b/lib/core-common/src/utils/babel.ts index c7af63107681..08f24bf5d11c 100644 --- a/lib/core-common/src/utils/babel.ts +++ b/lib/core-common/src/utils/babel.ts @@ -50,6 +50,8 @@ const presets = [ export const babelConfig: () => TransformOptions = () => { return { sourceType: 'unambiguous', + babelrc: false, + configFile: false, presets: [...presets], plugins: [...plugins], }; From 07576b4e67688de392a7063705abbba53f9e853f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 21 Jul 2021 14:44:17 +0200 Subject: [PATCH 6/7] improve support for babel config files written in typescript --- lib/core-common/src/utils/load-custom-babel-config.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/core-common/src/utils/load-custom-babel-config.ts b/lib/core-common/src/utils/load-custom-babel-config.ts index dc654f87391a..021c66ade0bc 100644 --- a/lib/core-common/src/utils/load-custom-babel-config.ts +++ b/lib/core-common/src/utils/load-custom-babel-config.ts @@ -4,6 +4,7 @@ import JSON5 from 'json5'; import { logger } from '@storybook/node-logger'; import { TransformOptions } from '@babel/core'; +import { serverRequire } from '..'; function removeReactHmre(presets: TransformOptions['presets']) { const index = presets.indexOf('react-hmre'); @@ -25,7 +26,7 @@ function loadFromPath(babelConfigPath: string): TransformOptions { try { // eslint-disable-next-line global-require, import/no-dynamic-require - config = require(babelConfigPath); + config = serverRequire(babelConfigPath); logger.info('=> Loading custom babel config as JS'); } catch (e) { error.js = e; @@ -52,7 +53,7 @@ function loadFromPath(babelConfigPath: string): TransformOptions { config = config(); } - config = { ...config, babelrc: false }; + config = { ...config, babelrc: false, configFile: false }; } if (!config) { From a5a58a60eec153eb2a5eabda349109a593a1b7d4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 21 Jul 2021 14:59:10 +0200 Subject: [PATCH 7/7] fix tests --- lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev | 2 ++ .../src/__snapshots__/html-kitchen-sink_preview-prod | 2 ++ lib/core-server/src/__snapshots__/vue-3-cli_preview-dev | 2 ++ lib/core-server/src/__snapshots__/vue-3-cli_preview-prod | 2 ++ .../src/__snapshots__/web-components-kitchen-sink_preview-dev | 2 ++ .../src/__snapshots__/web-components-kitchen-sink_preview-prod | 2 ++ 6 files changed, 12 insertions(+) diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev index bb3c1788f909..81d799318c10 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev @@ -46,7 +46,9 @@ Object { Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", "options": Object { + "babelrc": false, "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, "plugins": Array [ "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod index 180e5a491147..075f6284941d 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod @@ -45,7 +45,9 @@ Object { Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", "options": Object { + "babelrc": false, "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, "plugins": Array [ "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev index 69659043a13f..e687896fb01d 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev @@ -46,7 +46,9 @@ Object { Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", "options": Object { + "babelrc": false, "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, "plugins": Array [ "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod index e49eaefc4796..cc48f45c7956 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod @@ -45,7 +45,9 @@ Object { Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", "options": Object { + "babelrc": false, "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, "plugins": Array [ "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev index 421493594480..490e6f674b4d 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev @@ -46,7 +46,9 @@ Object { Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", "options": Object { + "babelrc": false, "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, "plugins": Array [ "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod index 90e1cb50794b..d690dfe86ef3 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod @@ -45,7 +45,9 @@ Object { Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", "options": Object { + "babelrc": false, "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, "plugins": Array [ "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",