From 0688ef09b7e809cbc27633930112a37c1b2e89e2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:40:37 +0100 Subject: [PATCH 01/52] Remove Babel from webpack5 builder --- MIGRATION.md | 5 + RESOLUTIONS.md | 6 +- code/addons/docs/README.md | 14 - code/builders/builder-webpack5/package.json | 4 - .../src/preview/iframe-webpack.config.ts | 19 +- .../builder-webpack5/src/preview/loaders.ts | 57 --- code/frameworks/angular/package.json | 1 - code/frameworks/angular/src/preset.ts | 1 - code/frameworks/ember/package.json | 3 - code/frameworks/ember/src/preset.ts | 6 +- .../server/framework-preset-babel-ember.ts | 54 --- code/frameworks/html-webpack5/package.json | 3 - code/frameworks/nextjs/src/swc/loader.ts | 8 - code/frameworks/preact-webpack5/package.json | 1 - code/frameworks/react-webpack5/package.json | 4 - code/frameworks/svelte-webpack5/package.json | 1 - code/frameworks/vue3-webpack5/package.json | 2 - code/frameworks/vue3-webpack5/src/preset.ts | 1 - .../web-components-webpack5/package.json | 2 - .../web-components-webpack5/src/preset.ts | 4 - .../web-components-webpack5/src/types.ts | 2 +- code/lib/cli/.babelrc.json | 21 - code/lib/cli/package.json | 2 - code/lib/cli/src/automigrate/fixes/index.ts | 4 +- .../automigrate/fixes/missing-babelrc.test.ts | 136 ------ .../src/automigrate/fixes/missing-babelrc.ts | 90 ---- code/lib/cli/src/babel-config.ts | 108 ----- code/lib/cli/src/generate.ts | 5 - code/lib/cli/src/generators/EMBER/index.ts | 6 - .../cli/src/generators/REACT_SCRIPTS/index.ts | 1 - code/lib/cli/src/generators/baseGenerator.ts | 46 +- code/lib/cli/src/generators/types.ts | 1 - code/lib/cli/src/repro-generators/configs.ts | 269 ----------- code/lib/cli/src/repro-generators/scripts.ts | 329 ------------- code/lib/cli/src/utils.ts | 1 - code/lib/cli/src/versions.ts | 1 - .../core-events/src/errors/server-errors.ts | 17 - code/lib/docs-tools/package.json | 2 - code/lib/types/package.json | 1 - code/lib/types/src/modules/core-common.ts | 17 +- code/package.json | 10 - code/presets/create-react-app/src/index.ts | 9 +- code/presets/html-webpack/package.json | 3 - .../src/framework-preset-react-docs.ts | 5 - .../src/loaders/react-docgen-loader.ts | 9 +- code/presets/svelte-webpack/package.json | 1 - .../src/framework-preset-svelte.ts | 10 +- code/presets/vue3-webpack/package.json | 2 - code/presets/web-components-webpack/README.md | 6 - .../web-components-webpack/package.json | 83 ---- code/presets/web-components-webpack/preset.js | 1 - .../web-components-webpack/project.json | 6 - .../web-components-webpack/src/index.ts | 50 -- .../web-components-webpack/src/types.ts | 1 - .../web-components-webpack/tsconfig.json | 7 - code/renderers/html/package.json | 3 - code/renderers/react/package.json | 1 - code/yarn.lock | 440 ++++-------------- docs/api/main-config-framework.md | 17 - docs/api/main-config-typescript.md | 19 - docs/configure/compilers.md | 85 +--- docs/configure/typescript.md | 2 +- docs/contribute/framework.md | 1 - docs/faq.md | 8 - ...g-framework-options-builder-use-swc.js.mdx | 16 - ...g-framework-options-builder-use-swc.ts.mdx | 20 - .../main-config-swc-jsx-transform.js.mdx | 9 - .../main-config-swc-jsx-transform.ts.mdx | 8 - docs/snippets/common/main-config-swc.js.mdx | 9 - docs/snippets/common/main-config-swc.ts.mdx | 8 - .../main-config-typescript-skip-babel.ts.mdx | 16 - ...torybook-addons-preset-babelDefault.js.mdx | 13 - ...torybook-addons-preset-babelDefault.ts.mdx | 15 - ...orybook-babel-configuration-example.ts.mdx | 2 - .../common/storybook-cli-babelrc-file.npm.mdx | 3 - .../storybook-cli-babelrc-file.pnpm.mdx | 3 - .../storybook-cli-babelrc-file.yarn.mdx | 3 - ...ybook-coverage-addon-config-options.js.mdx | 1 - ...ybook-coverage-addon-config-options.ts.mdx | 16 +- ...-main-fix-imports-autodocs-monorepo.js.mdx | 1 - ...-main-fix-imports-autodocs-monorepo.ts.mdx | 1 - docs/writing-tests/test-coverage.md | 27 +- scripts/verdaccio.yaml | 4 - 83 files changed, 123 insertions(+), 2086 deletions(-) delete mode 100644 code/builders/builder-webpack5/src/preview/loaders.ts delete mode 100644 code/frameworks/ember/src/server/framework-preset-babel-ember.ts delete mode 100644 code/lib/cli/.babelrc.json delete mode 100644 code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts delete mode 100644 code/lib/cli/src/automigrate/fixes/missing-babelrc.ts delete mode 100644 code/lib/cli/src/babel-config.ts delete mode 100644 code/lib/cli/src/repro-generators/configs.ts delete mode 100644 code/lib/cli/src/repro-generators/scripts.ts delete mode 100644 code/presets/web-components-webpack/README.md delete mode 100644 code/presets/web-components-webpack/package.json delete mode 100644 code/presets/web-components-webpack/preset.js delete mode 100644 code/presets/web-components-webpack/project.json delete mode 100644 code/presets/web-components-webpack/src/index.ts delete mode 100644 code/presets/web-components-webpack/src/types.ts delete mode 100644 code/presets/web-components-webpack/tsconfig.json delete mode 100644 docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx delete mode 100644 docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx delete mode 100644 docs/snippets/common/main-config-typescript-skip-babel.ts.mdx delete mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx delete mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx delete mode 100644 docs/snippets/common/storybook-cli-babelrc-file.npm.mdx delete mode 100644 docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx delete mode 100644 docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx diff --git a/MIGRATION.md b/MIGRATION.md index c69c72a1fc66..453e8f67bdf0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,7 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [typescript.skipBabel removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) @@ -382,6 +383,10 @@ To summarize: ### Core changes +#### typescript.skipBabel removed + +We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. + #### Dropping support for Node.js 16 In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above. diff --git a/RESOLUTIONS.md b/RESOLUTIONS.md index 88adfad30fa0..4e2a64960edd 100644 --- a/RESOLUTIONS.md +++ b/RESOLUTIONS.md @@ -8,8 +8,4 @@ svelte-check@3.4.6 (bug: 3.5.x): Type issues ## code/ui/components/package.json -overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230 - -## code/package.json - -@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462 +overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230 \ No newline at end of file diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9a9a3debad2a..379b23f2d8a1 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -110,20 +110,6 @@ export default { }; ``` -If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to -configure Jest to transform MDX stories into something Storyshots can understand: - -Add the following to your Jest configuration: - -```json -{ - "transform": { - "^.+\\.[tj]sx?$": "babel-jest", - "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx" - } -} -``` - ### Be sure to check framework specific installation needs - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here) diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index e38893b42bcd..e36fefc63ba8 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -63,7 +63,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", @@ -72,10 +71,8 @@ "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", - "@swc/core": "^1.3.82", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", - "babel-loader": "^9.0.0", "browser-assert": "^1.2.1", "case-sensitive-paths-webpack-plugin": "^2.4.0", "constants-browserify": "^1.0.0", @@ -90,7 +87,6 @@ "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", "url": "^0.11.0", diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index ac573827715a..c9bd220b544c 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -20,7 +20,6 @@ import { import { type BuilderOptions } from '@storybook/core-webpack'; import { dedent } from 'ts-dedent'; import type { TypescriptOptions } from '../types'; -import { createBabelLoader, createSWCLoader } from './loaders'; import { getVirtualModules } from './virtual-module-mapping'; const getAbsolutePath = (input: I): I => @@ -106,8 +105,7 @@ export default async ( const builderOptions = await getBuilderOptions(options); - const shouldCheckTs = - typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler; + const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipCompiler; const tsCheckOptions = typescriptOptions.checkOptions || {}; const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {}; @@ -235,9 +233,6 @@ export default async ( fullySpecified: false, }, }, - builderOptions.useSWC - ? await createSWCLoader(Object.keys(virtualModuleMapping), options) - : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)), { test: /\.md$/, type: 'asset/source', @@ -273,7 +268,6 @@ export default async ( ...(isProd ? { minimize: true, - // eslint-disable-next-line no-nested-ternary minimizer: options.build?.test?.esbuildMinify ? [ new TerserWebpackPlugin({ @@ -285,17 +279,6 @@ export default async ( }, }), ] - : builderOptions.useSWC - ? [ - new TerserWebpackPlugin({ - minify: TerserWebpackPlugin.swcMinify, - terserOptions: { - sourceMap: !options.build?.test?.disableSourcemaps, - mangle: false, - keep_fnames: true, - }, - }), - ] : [ new TerserWebpackPlugin({ parallel: true, diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts deleted file mode 100644 index 868d35ba394c..000000000000 --- a/code/builders/builder-webpack5/src/preview/loaders.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { getProjectRoot } from '@storybook/core-common'; -import type { Options as SwcOptions } from '@swc/core'; -import { dedent } from 'ts-dedent'; -import { logger } from '@storybook/node-logger'; -import type { Options } from '@storybook/types'; -import type { TypescriptOptions } from '../types'; - -export const createBabelLoader = async ( - options: Options & { typescriptOptions: TypescriptOptions }, - typescriptOptions: TypescriptOptions, - excludes: string[] = [] -) => { - logger.info(dedent`Using Babel compiler`); - const babelOptions = await options.presets.apply('babel', {}, options); - return { - test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/, - use: [ - { - loader: require.resolve('babel-loader'), - options: babelOptions, - }, - ], - include: [getProjectRoot()], - exclude: [/node_modules/, ...excludes], - }; -}; - -export const createSWCLoader = async (excludes: string[] = [], options: Options) => { - logger.info(dedent`Using SWC compiler`); - - const swc = await options.presets.apply('swc', {}, options); - const typescriptOptions = await options.presets.apply<{ skipCompiler?: boolean }>( - 'typescript', - {}, - options - ); - - const config: SwcOptions = { - ...swc, - jsc: { - ...(swc.jsc ?? {}), - parser: { - ...(swc.jsc?.parser ?? {}), - syntax: 'typescript', - tsx: true, - dynamicImport: true, - }, - }, - }; - return { - test: typescriptOptions.skipCompiler ? /\.(mjs|cjs|jsx?)$/ : /\.(mjs|cjs|tsx?|jsx?)$/, - loader: require.resolve('swc-loader'), - options: config, - include: [getProjectRoot()], - exclude: [/node_modules/, ...excludes], - }; -}; diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index ef030dd8bf55..58961f1839b7 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -99,7 +99,6 @@ "@angular/forms": ">=15.0.0 < 18.0.0", "@angular/platform-browser": ">=15.0.0 < 18.0.0", "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0", - "@babel/core": "*", "rxjs": "^6.0.0 || ^7.4.0", "typescript": "^4.0.0 || ^5.0.0", "zone.js": ">= 0.11.1 < 1.0.0" diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index 3d433ba2b841..da3bb0192f0d 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/code/frameworks/angular/src/preset.ts @@ -37,7 +37,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => { return { ...config, - skipBabel: true, skipCompiler: true, }; }; diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index c843c7712cde..f8b74eceeb04 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -46,9 +46,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", - "babel-plugin-ember-modules-api-polyfill": "^3.5.0", - "babel-plugin-htmlbars-inline-precompile": "^5.3.1", "ember-source": "~3.28.1 || ^4.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 998edbfa7405..1638022a7856 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -1,15 +1,19 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; +import { findDistFile } from './util'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons'> = [ - require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs'), ]; +export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { + return [...entry, findDistFile(__dirname, 'client/preview/config')]; +}; + export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { const framework = await options.presets.apply('framework'); diff --git a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts deleted file mode 100644 index cdb83bf6dbfa..000000000000 --- a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { precompile } from 'ember-source/dist/ember-template-compiler'; -import type { PresetProperty } from '@storybook/types'; -import { findDistFile } from '../util'; - -let emberOptions: any; - -function precompileWithPlugins(string: string, options: any) { - const precompileOptions: any = options; - if (emberOptions && emberOptions.polyfills) { - precompileOptions.plugins = { ast: emberOptions.polyfills }; - } - - return precompile(string, precompileOptions); -} - -export const babel: PresetProperty<'babel'> = (config, options) => { - if (options && options.presetsList) { - options.presetsList.forEach((e: any, index: number) => { - if (e.preset && e.preset.emberOptions) { - emberOptions = e.preset.emberOptions; - if (options.presetsList) { - // eslint-disable-next-line no-param-reassign - delete options.presetsList[index].preset.emberOptions; - } - } - }); - } - - const babelConfigPlugins = config?.plugins || []; - - const extraPlugins = [ - [ - require.resolve('babel-plugin-htmlbars-inline-precompile'), - { - precompile: precompileWithPlugins, - modules: { - 'ember-cli-htmlbars': 'hbs', - 'ember-cli-htmlbars-inline-precompile': 'default', - 'htmlbars-inline-precompile': 'default', - }, - }, - ], - [require.resolve('babel-plugin-ember-modules-api-polyfill')], - ]; - - return { - ...config, - plugins: [...babelConfigPlugins, ...extraPlugins], - }; -}; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - return [...entry, findDistFile(__dirname, 'client/preview/config')]; -}; diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 825bccbf896d..89ebaafbc3e7 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -57,9 +57,6 @@ "devDependencies": { "typescript": "^5.3.2" }, - "peerDependencies": { - "@babel/core": "*" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 352d3796d549..1925c2b49171 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -4,9 +4,6 @@ import type { Options, Preset } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; import type { RuleSetRule } from 'webpack'; -import semver from 'semver'; -import { NextjsSWCNotSupportedError } from '@storybook/core-events/server-errors'; -import { getNextjsVersion } from '../utils'; const applyFastRefresh = async (options: Options) => { const isDevelopment = options.configType === 'DEVELOPMENT'; @@ -21,11 +18,6 @@ export const configureSWCLoader = async ( nextConfig: NextConfig ) => { const isDevelopment = options.configType !== 'PRODUCTION'; - const version = getNextjsVersion(); - - if (semver.lt(version, '14.0.0')) { - throw new NextjsSWCNotSupportedError(); - } const dir = getProjectRoot(); diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 7b49a2845fad..ba090ae61be2 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -58,7 +58,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "preact": "^8.0.0||^10.0.0" }, "engines": { diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index c63b840d6071..fe2ac68fbe3d 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -53,15 +53,11 @@ "@types/node": "^18.0.0" }, "peerDependencies": { - "@babel/core": "^7.22.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "typescript": "*" }, "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, "typescript": { "optional": true } diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 7c5441c1989f..87b9aedf5a93 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -58,7 +58,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "svelte": "^4.0.0 || ^5.0.0-next.16", "svelte-loader": "*" }, diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index d588c430fe39..f0e3fab5d068 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -59,9 +59,7 @@ "vue": "3.0.0" }, "peerDependencies": { - "@babel/core": "*", "@vue/compiler-sfc": "^3.0.0", - "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index b06e70968cdb..1a46a7574516 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/code/frameworks/vue3-webpack5/src/preset.ts @@ -24,6 +24,5 @@ export const core: PresetProperty<'core'> = async (config, options) => { export const typescript: PresetProperty<'typescript'> = async (config) => ({ ...config, - skipBabel: true, skipCompiler: true, }); diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 9e7ff1aca558..a4fe5fa8589e 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -50,10 +50,8 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/preset-env": "^7.23.2", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", - "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/web-components": "workspace:*", "@types/node": "^18.0.0" }, diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts index f746c12a788a..c613796aa3d0 100644 --- a/code/frameworks/web-components-webpack5/src/preset.ts +++ b/code/frameworks/web-components-webpack5/src/preset.ts @@ -4,10 +4,6 @@ import type { PresetProperty } from '@storybook/types'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; -export const addons: PresetProperty<'addons'> = [ - getAbsolutePath('@storybook/preset-web-components-webpack'), -]; - export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); diff --git a/code/frameworks/web-components-webpack5/src/types.ts b/code/frameworks/web-components-webpack5/src/types.ts index c6924040d025..01442d08f08a 100644 --- a/code/frameworks/web-components-webpack5/src/types.ts +++ b/code/frameworks/web-components-webpack5/src/types.ts @@ -1,7 +1,7 @@ import type { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsWebComponents, -} from '@storybook/preset-web-components-webpack'; +} from '@storybook/types'; import type { BuilderOptions, StorybookConfigWebpack, diff --git a/code/lib/cli/.babelrc.json b/code/lib/cli/.babelrc.json deleted file mode 100644 index 89a2815442ec..000000000000 --- a/code/lib/cli/.babelrc.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "node": 10 - }, - "useBuiltIns": "usage", - "corejs": "3" - } - ] - ], - "ignore": [ - "./src/rendererAssets", - "./src/generators/**/template", - "./src/generators/**/template-csf", - "./src/generators/**/template-csf-ts", - "./src/generators/**/template-mdx" - ] -} diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index bfaba5b57ace..c495fbebff32 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -56,8 +56,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "workspace:*", diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index bd33074805d8..9b5cc6fa3d69 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -13,7 +13,6 @@ import { removedGlobalClientAPIs } from './remove-global-client-apis'; import { mdx1to2 } from './mdx-1-to-2'; import { autodocsTrue } from './autodocs-true'; import { nodeJsRequirement } from './nodejs-requirement'; -import { missingBabelRc } from './missing-babelrc'; import { angularBuilders } from './angular-builders'; import { incompatibleAddons } from './incompatible-addons'; import { angularBuildersMultiproject } from './angular-builders-multiproject'; @@ -37,11 +36,10 @@ export const allFixes: Fix[] = [ mdx1to2, mdxgfm, autodocsTrue, - missingBabelRc, angularBuildersMultiproject, angularBuilders, wrapRequire, reactDocgen, ]; -export const initFixes: Fix[] = [missingBabelRc, eslintPlugin]; +export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts deleted file mode 100644 index 5363a77cd035..000000000000 --- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts +++ /dev/null @@ -1,136 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -import { describe, afterEach, it, expect, vi } from 'vitest'; - -import type { StorybookConfig } from '@storybook/types'; -import * as fsExtra from 'fs-extra'; -import { missingBabelRc } from './missing-babelrc'; -import type { JsPackageManager } from '../../js-package-manager'; - -vi.mock('fs-extra', async () => import('../../../../../__mocks__/fs-extra')); - -const babelContent = JSON.stringify({ - sourceType: 'unambiguous', - presets: [ - [ - '@babel/preset-env', - { - targets: { chrome: 100, safari: 15, firefox: 91 }, - }, - ], - '@babel/preset-typescript', - '@babel/preset-react', - ], - plugins: [], -}); - -const check = async ({ - packageManager = { - retrievePackageJson: () => ({}), - }, - main: mainConfig = {}, - storybookVersion = '7.0.0', - extraFiles, -}: { - packageManager?: any; - main?: Partial & Record; - storybookVersion?: string; - extraFiles?: Record; -}) => { - if (extraFiles) { - vi.mocked(fsExtra as any).__setMockFiles( - extraFiles - ); - } - - return missingBabelRc.check({ - packageManager, - mainConfig: mainConfig as any, - storybookVersion, - }); -}; - -const packageManager = { - retrievePackageJson: () => - Promise.resolve({ - devDependencies: {}, - dependencies: {}, - }), -} as Partial; - -const packageManagerWithBabelField = { - retrievePackageJson: () => - Promise.resolve({ - devDependencies: {}, - dependencies: {}, - babel: babelContent, - }), -} as Partial; - -describe('missing-babelrc fix', () => { - afterEach(() => { - vi.restoreAllMocks(); - }); - - it('skips when storybook version < 7.0.0', async () => { - await expect(check({ storybookVersion: '6.3.2', main: {} })).resolves.toBeNull(); - }); - - it('skips when babelrc config is present', async () => { - // different babel extensions - await expect( - check({ - packageManager, - extraFiles: { '.babelrc': babelContent }, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - await expect( - check({ - packageManager, - extraFiles: { '.babelrc.json': babelContent }, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - await expect( - check({ - packageManager, - extraFiles: { 'babel.config.json': babelContent }, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - - await expect( - check({ - packageManager: packageManagerWithBabelField, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - }); - - it('skips when using a framework that provides babel config', async () => { - await expect( - check({ main: { framework: '@storybook/nextjs' }, packageManager }) - ).resolves.toBeNull(); - }); - - it('skips when using CRA preset', async () => { - await expect( - check({ - main: { framework: '@storybook/react', addons: ['@storybook/preset-create-react-app'] }, - packageManager, - }) - ).resolves.toBeNull(); - }); - - // eslint-disable-next-line jest/no-disabled-tests - it.skip('prompts when babelrc file is missing and framework does not provide babel config', async () => { - await expect( - check({ - packageManager, - main: { framework: '@storybook/react-webpack5' }, - }) - ).resolves.toEqual({ - needsBabelRc: true, - }); - }); -}); diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts deleted file mode 100644 index 9d12ec658b1f..000000000000 --- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts +++ /dev/null @@ -1,90 +0,0 @@ -import chalk from 'chalk'; -import dedent from 'ts-dedent'; -import semver from 'semver'; -import { loadPartialConfigAsync } from '@babel/core'; -import type { Fix } from '../types'; -import { generateStorybookBabelConfigInCWD } from '../../babel-config'; -import { getFrameworkPackageName } from '../helpers/mainConfigFile'; - -interface MissingBabelRcOptions { - needsBabelRc: boolean; -} - -const logger = console; - -const frameworksThatNeedBabelConfig = [ - '@storybook/react-webpack5', - '@storybook/vue3-webpack5', - '@storybook/html-webpack5', - '@storybook/web-components-webpack5', -]; - -export const missingBabelRc: Fix = { - id: 'missing-babelrc', - - async check({ packageManager, mainConfig, storybookVersion }) { - const packageJson = await packageManager.retrievePackageJson(); - - if (!semver.gte(storybookVersion, '7.0.0')) { - return null; - } - - const { addons } = mainConfig; - - const hasCraPreset = - addons && - addons.find((addon) => - typeof addon === 'string' - ? addon.endsWith('@storybook/preset-create-react-app') - : addon.name.endsWith('@storybook/preset-create-react-app') - ); - - const frameworkPackageName = getFrameworkPackageName(mainConfig); - - if ( - frameworkPackageName && - frameworksThatNeedBabelConfig.includes(frameworkPackageName) && - !hasCraPreset - ) { - const config = await loadPartialConfigAsync({ - babelrc: true, - filename: '__fake__.js', // somehow needed to detect .babelrc.* files - }); - - if (!config?.config && !config?.babelrc && !packageJson.babel) { - return { needsBabelRc: true }; - } - } - - return null; - }, - prompt() { - return dedent` - We detected that your project does not have a babel configuration (.babelrc, babel.config.js, etc.). - - In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses ${chalk.bold( - "your project's babel configuration" - )}, with small, incremental updates from Storybook addons. - - If your project does not have a babel configuration file, we can generate one that's equivalent to the 6.x defaults for you. Keep in mind that this can affect your project if it uses babel, and you may need to make additional changes based on your projects needs. - - We can create a ${chalk.blue( - '.babelrc.json' - )} file with some basic configuration and add any necessary package devDependencies. - - ${chalk.bold( - 'Note:' - )} After installing the necessary presets, if it does not work in a monorepo, see the babel documentation for reference: - ${chalk.yellow('https://babeljs.io/docs')} - - Please see the migration guide for more information: - ${chalk.yellow( - 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively' - )} - `; - }, - async run() { - logger.info(); - await generateStorybookBabelConfigInCWD(); - }, -}; diff --git a/code/lib/cli/src/babel-config.ts b/code/lib/cli/src/babel-config.ts deleted file mode 100644 index e24442b4e365..000000000000 --- a/code/lib/cli/src/babel-config.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { writeFile, pathExists } from 'fs-extra'; -import { logger } from '@storybook/node-logger'; -import path from 'path'; -import prompts from 'prompts'; -import { JsPackageManagerFactory } from './js-package-manager'; - -export const generateStorybookBabelConfigInCWD = async () => { - const target = process.cwd(); - return generateStorybookBabelConfig({ target }); -}; - -export const getBabelPresets = ({ typescript, jsx }: { typescript: boolean; jsx: boolean }) => { - const dependencies = ['@babel/preset-env']; - - if (typescript) { - dependencies.push('@babel/preset-typescript'); - } - - if (jsx) { - dependencies.push('@babel/preset-react'); - } - - return dependencies; -}; - -export const writeBabelConfigFile = async ({ - location, - typescript, - jsx, -}: { - location?: string; - typescript: boolean; - jsx: boolean; -}) => { - const fileLocation = location || path.join(process.cwd(), '.babelrc.json'); - - const presets: (string | [string, any])[] = [ - ['@babel/preset-env', { targets: { chrome: 100, safari: 15, firefox: 91 } }], - ]; - - if (typescript) { - presets.push('@babel/preset-typescript'); - } - - if (jsx) { - presets.push('@babel/preset-react'); - } - - const contents = JSON.stringify( - { - sourceType: 'unambiguous', - presets, - plugins: [], - }, - null, - 2 - ); - - await writeFile(fileLocation, contents); -}; - -export const generateStorybookBabelConfig = async ({ target }: { target: string }) => { - logger.info(`Generating the Storybook default babel config at ${target}`); - - const fileName = '.babelrc.json'; - const location = path.join(target, fileName); - - const exists = await pathExists(location); - - if (exists) { - const { overwrite } = await prompts({ - type: 'confirm', - initial: false, - name: 'overwrite', - message: `${fileName} already exists. Would you like overwrite it?`, - }); - - if (overwrite === false) { - logger.warn(`Cancelled, babel config file was NOT written to file-system.`); - return; - } - } - - const { typescript, jsx } = await prompts([ - { - type: 'confirm', - initial: false, - name: 'typescript', - message: `Do you want to add the TypeScript preset?`, - }, - { - type: 'confirm', - initial: false, - name: 'jsx', - message: `Do you want to add the React preset?`, - }, - ]); - - const dependencies = getBabelPresets({ typescript, jsx }); - - logger.info(`Writing file to ${location}`); - await writeBabelConfigFile({ location, typescript, jsx }); - - const packageManager = JsPackageManagerFactory.getPackageManager(); - - logger.info(`Installing dependencies (${dependencies.join(', ')})`); - await packageManager.addDependencies({ installAsDevDependencies: true }, dependencies); -}; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index c964767da543..410bb4446968 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -16,7 +16,6 @@ import { upgrade, type UpgradeOptions } from './upgrade'; import { sandbox } from './sandbox'; import { link } from './link'; import { automigrate } from './automigrate'; -import { generateStorybookBabelConfigInCWD } from './babel-config'; import { dev } from './dev'; import { build } from './build'; import { parseList, getEnvConfig } from './utils'; @@ -69,10 +68,6 @@ command('add ') .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications') .action((addonName: string, options: any) => add(addonName, options)); -command('babelrc') - .description('generate the default storybook babel config into your current working directory') - .action(() => generateStorybookBabelConfigInCWD()); - command('upgrade') .description('Upgrade your Storybook packages to the latest') .option( diff --git a/code/lib/cli/src/generators/EMBER/index.ts b/code/lib/cli/src/generators/EMBER/index.ts index 98c041c952f7..6b148964773d 100644 --- a/code/lib/cli/src/generators/EMBER/index.ts +++ b/code/lib/cli/src/generators/EMBER/index.ts @@ -9,12 +9,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'ember', { - extraPackages: [ - // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember - 'babel-plugin-ember-modules-api-polyfill', - // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember - 'babel-plugin-htmlbars-inline-precompile', - ], staticDir: 'dist', }, 'ember' diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts index 2177a9d5090e..627753ca96ee 100644 --- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -63,7 +63,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { extraAddons, extraPackages, staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined, - skipBabel: true, extraMain, } ); diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 70daf5764dd7..0897ece904f1 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -5,12 +5,11 @@ import ora from 'ora'; import invariant from 'tiny-invariant'; import type { NpmOptions } from '../NpmOptions'; import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; -import { SupportedLanguage, externalFrameworks, CoreBuilder } from '../project_types'; +import { SupportedLanguage, externalFrameworks } from '../project_types'; import { copyTemplateFiles } from '../helpers'; import { configureMain, configurePreview } from './configure'; import type { JsPackageManager } from '../js-package-manager'; import { getPackageDetails } from '../js-package-manager'; -import { getBabelPresets, writeBabelConfigFile } from '../babel-config'; import packageVersions from '../versions'; import type { FrameworkOptions, GeneratorOptions } from './types'; import { @@ -29,7 +28,6 @@ const defaultOptions: FrameworkOptions = { addScripts: true, addMainFile: true, addComponents: true, - skipBabel: false, useSWC: () => false, extraMain: undefined, framework: undefined, @@ -229,17 +227,8 @@ export async function baseGenerator( ...options, }; - let { skipBabel } = { - ...defaultOptions, - ...options, - }; - const swc = useSWC ? useSWC({ builder }) : false; - if (swc) { - skipBabel = true; - } - const extraAddonsToInstall = typeof extraAddonPackages === 'function' ? await extraAddonPackages({ @@ -275,8 +264,6 @@ export async function baseGenerator( } } - const files = await fse.readdir(process.cwd()); - const packageJson = await packageManager.retrievePackageJson(); const installedDependencies = new Set( Object.keys({ ...packageJson.dependencies, ...packageJson.devDependencies }) @@ -324,37 +311,6 @@ export async function baseGenerator( const depsToInstall = [...versionedPackages]; - // Add basic babel config for a select few frameworks that need it, if they do not have a babel config file already - if (builder !== CoreBuilder.Vite && !skipBabel) { - const frameworksThatNeedBabelConfig = [ - '@storybook/react-webpack5', - '@storybook/vue3-webpack5', - '@storybook/html-webpack5', - '@storybook/web-components-webpack5', - ]; - const needsBabelConfig = frameworkPackages.find((pkg) => - frameworksThatNeedBabelConfig.includes(pkg) - ); - const hasNoBabelFile = !files.some( - (fname) => fname.startsWith('.babel') || fname.startsWith('babel') - ); - - if (hasNoBabelFile && needsBabelConfig) { - const isTypescript = language !== SupportedLanguage.JAVASCRIPT; - const isReact = rendererId === 'react'; - depsToInstall.push( - ...getBabelPresets({ - typescript: isTypescript, - jsx: isReact, - }) - ); - await writeBabelConfigFile({ - typescript: isTypescript, - jsx: isReact, - }); - } - } - try { if (process.env.CI !== 'true') { const { hasEslint, isStorybookPluginInstalled, eslintConfigFile } = await extractEslintInfo( diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 2f97a34df126..f779ffd2b9cb 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -23,7 +23,6 @@ export interface FrameworkOptions { addScripts?: boolean; addMainFile?: boolean; addComponents?: boolean; - skipBabel?: boolean; useSWC?: ({ builder }: { builder: Builder }) => boolean; extraMain?: any; extensions?: string[]; diff --git a/code/lib/cli/src/repro-generators/configs.ts b/code/lib/cli/src/repro-generators/configs.ts deleted file mode 100644 index b95e65a18a87..000000000000 --- a/code/lib/cli/src/repro-generators/configs.ts +++ /dev/null @@ -1,269 +0,0 @@ -/* eslint-disable @typescript-eslint/naming-convention */ -import type { StorybookConfig } from '@storybook/types'; -import type { SupportedRenderers } from '../project_types'; - -export interface Parameters { - renderer: SupportedRenderers; - /** E2E configuration name */ - name: string; - /** framework version */ - version: string; - /** CLI to bootstrap the project */ - generator: string; - /** Use storybook framework detection */ - autoDetect?: boolean; - /** Dependencies to add before building Storybook */ - additionalDeps?: string[]; - /** Files to add before installing Storybook */ - additionalFiles?: { - path: string; - contents: string; - }[]; - /** Add typescript dependency and creates a tsconfig.json file */ - typescript?: boolean; - /** Merge configurations to main.js before running the tests */ - mainOverrides?: Partial & Record; - /** Environment variables to inject while running generator */ - envs?: Record; -} - -const fromDeps = (...args: string[]): string => - [ - 'mkdir {{appName}}', - 'cd {{appName}}', - // Create `yarn.lock` to force Yarn to consider adding deps in this directory - // and not look for a yarn workspace in parent directory - 'touch yarn.lock', - 'yarn init --yes', - args.length && `yarn add ${args.join(' ')}`, - ] - .filter(Boolean) - .join(' && '); - -// #region React -export const cra: Parameters = { - renderer: 'react', - name: 'cra', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npx -p create-react-app@{{version}} create-react-app {{appName}}', - 'cd {{appName}}', - 'echo "FAST_REFRESH=true" > .env', - 'echo "SKIP_PREFLIGHT_CHECK=true" > .env', - ].join(' && '), - envs: { npm_config_user_agent: 'npm' }, -}; - -export const cra_typescript: Parameters = { - renderer: 'react', - name: 'cra_typescript', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript', - ].join(' && '), - envs: { npm_config_user_agent: 'npm' }, -}; - -export const react: Parameters = { - renderer: 'react', - name: 'react', - version: 'latest', - generator: fromDeps('react', 'react-dom', '@babel/preset-react'), - additionalDeps: ['prop-types'], - additionalFiles: [{ path: '.babelrc', contents: '{ "presets": ["@babel/preset-react"] }' }], -}; - -export const react_legacy_root_api: Parameters = { - renderer: 'react', - name: 'react_legacy_root_api', - version: 'latest', - generator: fromDeps('react', 'react-dom'), - additionalDeps: ['prop-types', '@babel/preset-react'], - additionalFiles: [{ path: '.babelrc', contents: '{ "presets": ["@babel/preset-react"] }' }], - mainOverrides: { - reactOptions: { - legacyRootApi: true, - }, - }, -}; - -export const react_typescript: Parameters = { - renderer: 'react', - name: 'react_typescript', - version: 'latest', - generator: fromDeps('react', 'react-dom'), - typescript: true, - additionalDeps: ['@babel/preset-react', '@babel/preset-typescript'], - additionalFiles: [ - { - path: '.babelrc', - contents: '{ "presets": ["@babel/preset-react", "@babel/preset-typescript"] }', - }, - ], -}; - -export const nextjs: Parameters = { - renderer: 'react', - name: 'nextjs', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npm_config_user_agent=npm npx -p create-next-app@{{version}} create-next-app {{appName}}', - 'cd {{appName}}', - ].join(' && '), -}; - -export const nextjs_typescript: Parameters = { - renderer: 'react', - name: 'nextjs_typescript', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npm_config_user_agent=npm npx -p create-next-app@{{version}} create-next-app {{appName}} --typescript', - 'cd {{appName}}', - ].join(' && '), -}; - -// export const vite_react: Parameters = { -// renderer: 'react', -// name: 'vite_react', -// version: 'latest', -// generator: 'npx -p create-vite@{{version}} create-vite {{appName}} --template react-ts', -// }; - -export const react_in_yarn_workspace: Parameters = { - renderer: 'react', - name: 'react_in_yarn_workspace', - version: 'latest', - generator: [ - 'mkdir {{appName}}', - 'cd {{appName}}', - 'echo "{ \\"name\\": \\"workspace-root\\", \\"private\\": true, \\"workspaces\\": [] }" > package.json', - 'touch yarn.lock', - `yarn add react react-dom`, - ].join(' && '), -}; - -// #endregion - -// #region Angular -const baseAngular: Parameters = { - renderer: 'angular', - name: 'angular', - version: 'latest', - generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`, -}; - -export const angular12: Parameters = { - ...baseAngular, - name: 'angular12', - version: 'v12-lts', -}; - -export const angular130: Parameters = { - ...baseAngular, - name: 'angular130', - version: '13.0.x', -}; - -export const angular13: Parameters = { - ...baseAngular, - name: 'angular13', - version: '13.1.x', -}; - -export const angular: Parameters = baseAngular; -// #endregion - -// #region web components -export const web_components: Parameters = { - renderer: 'web-components', - name: 'web_components', - version: '2', - generator: fromDeps('lit-element'), -}; - -export const web_components_typescript: Parameters = { - ...web_components, - name: 'web_components_typescript', - typescript: true, - additionalDeps: ['@babel/preset-typescript'], - additionalFiles: [ - { - path: '.babelrc', - contents: '{ "presets": ["@babel/preset-typescript"] }', - }, - ], -}; - -export const web_components_lit2: Parameters = { - ...web_components, - version: 'next', - name: 'web_components_lit2', - generator: fromDeps('lit'), - typescript: true, - additionalDeps: ['@babel/preset-typescript'], - additionalFiles: [ - { - path: '.babelrc', - contents: '{ "presets": ["@babel/preset-typescript"] }', - }, - ], -}; - -// #endregion - -// #region vue - -export const vue3: Parameters = { - renderer: 'vue3', - name: 'vue3', - version: 'next', - // Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here - generator: [ - // Force npm otherwise we have a mess between Yarn 1 and Yarn 2 - `npx -p @vue/cli@^4 vue create {{appName}} --preset=__default_vue_3__ --packageManager=npm --no-git --force`, - ].join(' && '), -}; - -// #endregion - -export const html: Parameters = { - renderer: 'html', - name: 'html', - version: 'latest', - generator: fromDeps(), - autoDetect: false, -}; - -export const preact: Parameters = { - renderer: 'preact', - name: 'preact', - version: 'latest', - generator: - 'npx preact-cli@{{version}} create preactjs-templates/default {{appName}} --install=false --git=false', -}; - -export const preact_vite: Parameters = { - renderer: 'preact', - name: 'preact', - version: 'latest', - generator: 'yarn create vite@{{version}} {{appName}} --template preact', -}; - -export const svelte: Parameters = { - renderer: 'svelte', - name: 'svelte', - version: 'latest', - generator: 'npx giget github:sveltejs/template#master {{appName}}', -}; - -export const svelteKit: Parameters = { - renderer: 'svelte', - name: 'svelteKit', - version: 'latest', - generator: - 'yarn create svelte-with-args --name={{appName}} --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest --no-svelte5', -}; diff --git a/code/lib/cli/src/repro-generators/scripts.ts b/code/lib/cli/src/repro-generators/scripts.ts deleted file mode 100644 index 17241f4b037f..000000000000 --- a/code/lib/cli/src/repro-generators/scripts.ts +++ /dev/null @@ -1,329 +0,0 @@ -import path from 'path'; -import { readJSON, writeJSON, outputFile, remove } from 'fs-extra'; -import chalk from 'chalk'; -import { command } from 'execa'; -import type spawn from 'cross-spawn'; -import { spawn as spawnAsync } from 'cross-spawn'; -import { cra, cra_typescript } from './configs'; -import storybookVersions from '../versions'; - -const logger = console; - -export interface Parameters { - /** E2E configuration name */ - name: string; - /** framework version */ - version: string; - /** CLI to bootstrap the project */ - generator: string; - /** Use storybook framework detection */ - autoDetect?: boolean; - /** Pre-build hook */ - preBuildCommand?: string; - /** When cli complains when folder already exists */ - ensureDir?: boolean; - /** Dependencies to add before building Storybook */ - additionalDeps?: string[]; - /** Files to add before installing Storybook */ - additionalFiles?: { - path: string; - contents: string; - }[]; - /** Add typescript dependency and creates a tsconfig.json file */ - typescript?: boolean; - /** Environment variables to inject while running generator */ - envs?: Record; -} - -interface Configuration { - e2e: boolean; - pnp: boolean; - local: boolean; - registry?: string; -} - -type ExecOptions = globalThis.Parameters[2]; - -export interface Options extends Parameters { - appName: string; - creationPath: string; - cwd: string; - e2e: boolean; - pnp: boolean; -} - -export const exec = async ( - // eslint-disable-next-line @typescript-eslint/no-shadow - command: string, - options: ExecOptions = {}, - { - startMessage, - errorMessage, - dryRun, - }: { startMessage?: string; errorMessage?: string; dryRun?: boolean } = {} -) => { - if (startMessage) logger.info(startMessage); - - if (dryRun) { - logger.info(`\n> ${command}\n`); - return undefined; - } - - logger.debug(command); - return new Promise((resolve, reject) => { - const child = spawnAsync(command, { - ...options, - shell: true, - stdio: 'pipe', - }); - - child.stderr.pipe(process.stdout); - child.stdout.pipe(process.stdout); - - child.on('exit', (code) => { - if (code === 0) { - resolve(undefined); - } else { - logger.error(chalk.red(`An error occurred while executing: \`${command}\``)); - logger.info(errorMessage); - reject(new Error(`command exited with code: ${code}: `)); - } - }); - }); -}; - -const addPackageResolutions = async ({ cwd }: Options) => { - logger.info(`๐Ÿ”ข Adding package resolutions:`); - const packageJsonPath = path.join(cwd, 'package.json'); - const packageJson = await readJSON(packageJsonPath); - packageJson.resolutions = storybookVersions; - await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); -}; - -const addLocalPackageResolutions = async ({ cwd }: Options) => { - logger.info(`๐Ÿ”ข Adding package resolutions:`); - const packageJsonPath = path.join(cwd, 'package.json'); - const packageJson = await readJSON(packageJsonPath); - const workspaceDir = path.join(__dirname, '..', '..', '..', '..', '..'); - const { stdout } = await command('yarn workspaces list --json', { - cwd: workspaceDir, - cleanup: true, - }); - - const workspaces = JSON.parse(`[${stdout.split('\n').join(',')}]`); - - packageJson.resolutions = Object.keys(storybookVersions).reduce((acc, key) => { - return { - ...acc, - [key]: path.join(workspaceDir, workspaces.find((item: any) => item.name === key).location), - }; - }, {}); - await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); -}; - -const installYarn2 = async ({ cwd, pnp, name }: Options) => { - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = [ - `yarn set version berry`, - `yarn config set enableGlobalCache true`, - `yarn config set checksumBehavior ignore`, - `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`, - ]; - - // FIXME: Some dependencies used by CRA aren't listed in its package.json - // Next line is a hack to remove as soon as CRA will have added these missing deps - // for details see https://github.com/facebook/create-react-app/pull/11751 - if ([cra.name, cra_typescript.name].includes(name)) { - command.push( - `yarn config set packageExtensions --json '{ "babel-preset-react-app@10.0.x": { "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.16.0" } } }'` - ); - } - - await exec( - command.join(' && '), - { cwd }, - { startMessage: `๐Ÿงถ Installing Yarn 2`, errorMessage: `๐Ÿšจ Installing Yarn 2 failed` } - ); -}; - -const configureYarn2ForE2E = async ({ cwd }: Options) => { - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = [ - // โš ๏ธ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml) - `yarn config set npmRegistryServer http://localhost:6001/`, - // Some required magic to be able to fetch deps from local registry - `yarn config set unsafeHttpWhitelist --json '["localhost"]'`, - // Disable fallback mode to make sure everything is required correctly - `yarn config set pnpFallbackMode none`, - // We need to be able to update lockfile when bootstrapping the examples - `yarn config set enableImmutableInstalls false`, - // Discard all YN0013 - FETCH_NOT_CACHED messages - `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`, - ].join(' && '); - - await exec( - command, - { cwd }, - { startMessage: `๐ŸŽ› Configuring Yarn 2`, errorMessage: `๐Ÿšจ Configuring Yarn 2 failed` } - ); -}; - -const generate = async ({ cwd, name, appName, version, generator, envs }: Options) => { - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = generator.replace(/{{appName}}/g, appName).replace(/{{version}}/g, version); - - await exec( - command, - { cwd, env: { ...process.env, ...envs } }, - { - startMessage: `๐Ÿ— Bootstrapping ${name} project (this might take a few minutes)`, - errorMessage: `๐Ÿšจ Bootstrapping ${name} failed`, - } - ); -}; - -const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => { - logger.info(`โคต๏ธ Adding required files`); - - await Promise.all( - (additionalFiles ?? []).map(async (file) => { - await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'utf-8' }); - }) - ); -}; - -const initStorybook = async ({ cwd, autoDetect = true, name, e2e, pnp }: Options) => { - const flags = ['--yes']; - - if (!autoDetect) { - flags.push(`--type ${name}`); - } - if (e2e) { - flags.push('--linkable'); - } - if (pnp) { - flags.push('--use-pnp'); - } - - // This is bundled into a single javascript file. - const sbCLICommand = `node ${__filename}`; - - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = `${sbCLICommand} init ${flags.join(' ')}`; - - await exec( - command, - { cwd }, - { - startMessage: `๐ŸŽจ Initializing Storybook with @storybook/cli`, - errorMessage: `๐Ÿšจ Storybook initialization failed`, - } - ); -}; - -const addRequiredDeps = async ({ cwd, additionalDeps }: Options) => { - // Remove any lockfile generated without Yarn 2 - await Promise.all([ - remove(path.join(cwd, 'package-lock.json')), - remove(path.join(cwd, 'yarn.lock')), - ]); - - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = - additionalDeps && additionalDeps.length > 0 - ? `yarn add -D ${additionalDeps.join(' ')}` - : `yarn install`; - - await exec( - command, - { cwd }, - { - startMessage: `๐ŸŒ Adding needed deps & installing all deps`, - errorMessage: `๐Ÿšจ Dependencies installation failed`, - } - ); -}; - -const addTypescript = async ({ cwd }: Options) => { - logger.info(`๐Ÿ‘ฎ Adding typescript and tsconfig.json`); - try { - await exec(`yarn add -D typescript@latest`, { cwd }); - const tsConfig = { - compilerOptions: { - baseUrl: '.', - esModuleInterop: true, - jsx: 'preserve', - skipLibCheck: true, - strict: true, - }, - include: ['src/*'], - }; - const tsConfigJsonPath = path.resolve(cwd, 'tsconfig.json'); - await writeJSON(tsConfigJsonPath, tsConfig, { encoding: 'utf8', spaces: 2 }); - } catch (e) { - logger.error(`๐Ÿšจ Creating tsconfig.json failed`); - throw e; - } -}; - -const doTask = async ( - task: (options: Options) => Promise, - options: Options, - condition = true -) => { - if (condition) { - await task(options); - logger.log(); - } -}; - -const registryUrlNPM = (url: string) => { - const args = ['config', 'set', 'registry', url]; - return exec(`npm ${args.join(' ')}`, { cwd: path.join(process.cwd(), '..') }); -}; - -const registryUrlYarn = (url: string) => { - const args = ['config', 'set', 'npmRegistryServer', url]; - return exec(`yarn ${args.join(' ')}`, { cwd: path.join(__dirname, '..') }); -}; - -export const createAndInit = async ( - cwd: string, - { name, version, ...rest }: Parameters, - { e2e, pnp, local, registry }: Configuration -) => { - const options: Options = { - name, - version, - appName: path.basename(cwd), - creationPath: path.join(cwd, '..'), - cwd, - e2e, - pnp, - ...rest, - }; - - logger.log(); - logger.info(`๐Ÿƒ Starting for ${name} ${version}`); - logger.log(); - - await doTask(generate, { ...options, cwd: options.creationPath }); - await doTask(addAdditionalFiles, { ...options, cwd }, !!options.additionalFiles); - if (e2e) { - await doTask(addPackageResolutions, options); - } - if (local) { - await doTask(addLocalPackageResolutions, options); - } - await doTask(installYarn2, options); - if (e2e) { - await doTask(configureYarn2ForE2E, options, e2e); - } - await doTask(addTypescript, options, !!options.typescript); - await doTask(addRequiredDeps, options); - if (registry) { - await registryUrlNPM(registry); - await registryUrlYarn(registry); - } - await doTask(initStorybook, options); -}; diff --git a/code/lib/cli/src/utils.ts b/code/lib/cli/src/utils.ts index fcd861860992..67e76e8ddb08 100644 --- a/code/lib/cli/src/utils.ts +++ b/code/lib/cli/src/utils.ts @@ -106,7 +106,6 @@ const PACKAGES_EXCLUDED_FROM_CORE = [ '@storybook/addon-designs', '@storybook/addon-styling', '@storybook/addon-styling-webpack', - '@storybook/babel-plugin-require-context-hook', '@storybook/bench', '@storybook/builder-vite', '@storybook/csf', diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 25a82dcb02a4..5724d482d071 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -53,7 +53,6 @@ export default { '@storybook/preset-server-webpack': '8.0.0-alpha.5', '@storybook/preset-svelte-webpack': '8.0.0-alpha.5', '@storybook/preset-vue3-webpack': '8.0.0-alpha.5', - '@storybook/preset-web-components-webpack': '8.0.0-alpha.5', '@storybook/preview': '8.0.0-alpha.5', '@storybook/preview-api': '8.0.0-alpha.5', '@storybook/react': '8.0.0-alpha.5', diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index bacdd7d6055e..e00a7faa8e83 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -369,23 +369,6 @@ export class GoogleFontsLoadingError extends StorybookError { } } -export class NextjsSWCNotSupportedError extends StorybookError { - readonly category = Category.FRAMEWORK_NEXTJS; - - readonly code = 3; - - public readonly documentation = - 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#manual-migration'; - - template() { - return dedent` - You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. - SWC is only supported in Next.js 14.0.0 and higher. Please go to your .storybook/main. file - and remove the { framework: { options: { builder: { useSWC: true } } } } option or upgrade to Next.js v14 or later. - `; - } -} - export class NoMatchingExportError extends StorybookError { readonly category = Category.CORE_SERVER; diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index d5745cdaadc0..8bc90fac3e44 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -53,8 +53,6 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@babel/core": "^7.23.2", - "babel-plugin-react-docgen": "4.2.1", "require-from-string": "^2.0.2", "typescript": "^5.3.2" }, diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 8eba56ce78bc..e501e7ec645c 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -45,7 +45,6 @@ }, "dependencies": { "@storybook/channels": "workspace:*", - "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "file-system-cache": "2.3.0" }, diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8f848909d8ed..8f5a49efdfd1 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -2,7 +2,6 @@ import type { FileSystemCache } from 'file-system-cache'; import type { Options as SWCOptions } from '@swc/core'; import type { Options as TelejsonOptions } from 'telejson'; -import type { TransformOptions as BabelOptions } from '@babel/core'; import type { Router } from 'express'; import type { Server } from 'http'; import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest'; @@ -71,7 +70,6 @@ export interface Presets { args?: Options ): Promise; apply(extension: 'framework', config?: {}, args?: any): Promise; - apply(extension: 'babel', config?: {}, args?: any): Promise; apply(extension: 'swc', config?: {}, args?: any): Promise; apply(extension: 'entries', config?: [], args?: any): Promise; apply(extension: 'stories', config?: [], args?: any): Promise; @@ -249,16 +247,9 @@ export interface TypescriptOptions { * @default `false` */ check: boolean; - /** - * Disable parsing typescript files through babel. - * - * @default `false` - * @deprecated use `skipCompiler` instead - */ - skipBabel: boolean; /** - * Disable parsing typescript files through compiler. + * Disable parsing TypeScript files through compiler. * * @default `false` */ @@ -414,13 +405,15 @@ export interface StorybookConfigRaw { refs?: CoreCommon_StorybookRefs; - babel?: BabelOptions; + // We cannot use a particular Babel type here because we need to support a variety of versions + babel?: any; swc?: SWCOptions; env?: Record; - babelDefault?: BabelOptions; + // We cannot use a particular Babel type here because we need to support a variety of versions + babelDefault?: any; config?: Entry[]; diff --git a/code/package.json b/code/package.json index 6c3ff4745889..c4e268558c93 100644 --- a/code/package.json +++ b/code/package.json @@ -76,7 +76,6 @@ "defaults" ], "resolutions": { - "@babel/core": "^7.23.2", "@playwright/test": "1.36.0", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", @@ -90,11 +89,6 @@ "type-fest": "~2.19" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-env": "^7.23.2", - "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", - "@babel/runtime": "^7.23.2", "@nx/workspace": "17.0.2", "@playwright/test": "1.36.0", "@storybook/addon-a11y": "workspace:*", @@ -114,7 +108,6 @@ "@storybook/addon-toolbars": "workspace:*", "@storybook/addon-viewport": "workspace:*", "@storybook/angular": "workspace:*", - "@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/bench": "next", "@storybook/blocks": "workspace:*", "@storybook/builder-manager": "workspace:*", @@ -156,7 +149,6 @@ "@storybook/preset-server-webpack": "workspace:*", "@storybook/preset-svelte-webpack": "workspace:*", "@storybook/preset-vue3-webpack": "workspace:*", - "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", @@ -197,8 +189,6 @@ "@typescript-eslint/parser": "^5.45.0", "@vitejs/plugin-react": "^3.0.1", "@vitest/coverage-v8": "^1.0.1", - "babel-eslint": "^10.1.0", - "babel-loader": "^9.1.2", "chromatic": "7.1.0", "concurrently": "^5.3.0", "cross-env": "^7.0.3", diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index e47c824426ce..a5e16a31ecb4 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -38,12 +38,6 @@ const core = (existing: { disableWebpackDefaults: boolean }) => ({ disableWebpackDefaults: true, }); -// Don't use Storybook's default Babel config. -const babelDefault = (): Record => ({ - presets: [], - plugins: [], -}); - // Update the core Webpack config. const webpack = async ( webpackConfig: Configuration = {}, @@ -156,6 +150,5 @@ const webpack = async ( // we do not care of the typings exported from this package const exportedCore = core as any; const exportedWebpack = webpack as any; -const exportedBabelDefault = babelDefault as any; -export { exportedCore as core, exportedWebpack as webpack, exportedBabelDefault as babelDefault }; +export { exportedCore as core, exportedWebpack as webpack }; diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index ec63833fe6f7..c026e36c0f90 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -57,9 +57,6 @@ "devDependencies": { "typescript": "^5.3.2" }, - "peerDependencies": { - "@babel/core": "*" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index ae26133dc838..20f252b8eebf 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -20,7 +20,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( } if (reactDocgen !== 'react-docgen-typescript') { - const babelOptions = await options.presets.apply('babel', {}); return { ...config, module: { @@ -34,7 +33,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' ), options: { - babelOptions, debug, }, exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, @@ -46,8 +44,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin'); - const babelOptions = await options.presets.apply('babel', {}); - return { ...config, module: { @@ -61,7 +57,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' ), options: { - babelOptions, debug, }, exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts index 9f3ff5278b9e..fd22ca12bf5d 100644 --- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts +++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts @@ -10,7 +10,6 @@ import MagicString from 'magic-string'; import type { LoaderContext } from 'webpack'; import type { Handler, NodePath, babelTypes as t, Documentation } from 'react-docgen'; import { logger } from '@storybook/node-logger'; -import type { TransformOptions } from '@babel/core'; const { getNameOrValue, isReactForwardRefCall } = utils; @@ -59,15 +58,13 @@ const defaultImporter = docgenImporters.fsImporter; const handlers = [...defaultHandlers, actualNameHandler]; export default async function reactDocgenLoader( - this: LoaderContext<{ babelOptions: TransformOptions; debug: boolean }>, + this: LoaderContext<{ debug: boolean }>, source: string ) { const callback = this.async(); // get options const options = this.getOptions() || {}; - const { babelOptions = {}, debug = false } = options; - - const { plugins, presets } = babelOptions; + const { debug = false } = options; try { const docgenResults = parse(source, { @@ -78,8 +75,6 @@ export default async function reactDocgenLoader( babelOptions: { babelrc: false, configFile: false, - plugins, - presets, }, }) as DocObj[]; diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index f8ad27912e63..c94eb80b65f6 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -75,7 +75,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "svelte": "^4.0.0 || ^5.0.0-next.16", "svelte-loader": "*" }, diff --git a/code/presets/svelte-webpack/src/framework-preset-svelte.ts b/code/presets/svelte-webpack/src/framework-preset-svelte.ts index 89b2c24f81eb..457abb86a02e 100644 --- a/code/presets/svelte-webpack/src/framework-preset-svelte.ts +++ b/code/presets/svelte-webpack/src/framework-preset-svelte.ts @@ -1,4 +1,4 @@ -import type { Preset, PresetProperty } from '@storybook/types'; +import type { Preset } from '@storybook/types'; import type { StorybookConfig, SvelteOptions } from './types'; export const webpack: StorybookConfig['webpack'] = async (config, { presets }) => { @@ -28,11 +28,3 @@ export const webpack: StorybookConfig['webpack'] = async (config, { presets }) = }, }; }; - -export const babelDefault: PresetProperty<'babelDefault'> = (config) => { - return { - ...config, - presets: [...(config?.presets || [])], - plugins: [...(config?.plugins || [])], - }; -}; diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index c5e9d67c2087..2ffd7e561a18 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -74,9 +74,7 @@ "vue": "^3.2.33" }, "peerDependencies": { - "@babel/core": "*", "@vue/compiler-sfc": "^3.0.0", - "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/presets/web-components-webpack/README.md b/code/presets/web-components-webpack/README.md deleted file mode 100644 index b3d65a886224..000000000000 --- a/code/presets/web-components-webpack/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Storybook Webpack preset for Web components - -This package is a [preset](https://storybook.js.org/docs/web-components/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Web components. -It's an internal package that's not intended to be used directly by users. - -- More info on [Storybook for Web components](https://storybook.js.org/docs/web-components/get-started) diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json deleted file mode 100644 index 43e7f784170b..000000000000 --- a/code/presets/web-components-webpack/package.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "name": "@storybook/preset-web-components-webpack", - "version": "8.0.0-alpha.5", - "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", - "keywords": [ - "lit", - "lit-html", - "storybook", - "web-components" - ], - "homepage": "https://github.com/storybookjs/storybook/tree/next/code/presets/web-components-webpack", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "code/presets/web-components-webpack" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "license": "MIT", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" - }, - "./preset": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" - }, - "./package.json": "./package.json" - }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts", - "!src/**/*" - ], - "scripts": { - "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", - "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" - }, - "dependencies": { - "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-import-meta": "^7.10.4", - "@babel/preset-env": "^7.23.2", - "@storybook/core-webpack": "workspace:*", - "@types/node": "^18.0.0", - "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", - "babel-plugin-bundled-import-meta": "^0.3.1" - }, - "devDependencies": { - "lit": "2.3.1", - "typescript": "^5.3.2" - }, - "peerDependencies": { - "lit": "^2.0.0 || ^3.0.0" - }, - "engines": { - "node": ">=18.0.0" - }, - "publishConfig": { - "access": "public" - }, - "bundler": { - "entries": [ - "./src/index.ts" - ], - "platform": "node" - }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" -} diff --git a/code/presets/web-components-webpack/preset.js b/code/presets/web-components-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/web-components-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/web-components-webpack/project.json b/code/presets/web-components-webpack/project.json deleted file mode 100644 index ed7c04dfe11c..000000000000 --- a/code/presets/web-components-webpack/project.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "@storybook/preset-web-components-webpack", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "implicitDependencies": [], - "type": "library" -} diff --git a/code/presets/web-components-webpack/src/index.ts b/code/presets/web-components-webpack/src/index.ts deleted file mode 100644 index 73ed84497514..000000000000 --- a/code/presets/web-components-webpack/src/index.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { StorybookConfig } from './types'; - -export * from './types'; - -export const webpack: StorybookConfig['webpack'] = (config) => { - const rules = [ - ...(config.module?.rules || []), - { - test: [ - new RegExp(`src(.*)\\.js$`), - new RegExp(`packages(\\/|\\\\)*(\\/|\\\\)src(\\/|\\\\)(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)lit\\/(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)lit-html(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)lit-element(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)@open-wc(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)@polymer(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)@vaadin(.*)\\.js$`), - ], - use: { - loader: require.resolve('babel-loader'), - options: { - compact: false, - presets: [ - [ - require.resolve('@babel/preset-env'), - { - useBuiltIns: 'entry', - corejs: 3, - targets: { chrome: '100', esmodules: true }, - }, - ], - ], - plugins: [ - require.resolve('@babel/plugin-syntax-dynamic-import'), - require.resolve('@babel/plugin-syntax-import-meta'), - // webpack does not support import.meta.url yet, so we rewrite them in babel - [require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }], - ], - }, - }, - }, - ]; - - // eslint-disable-next-line no-param-reassign - config.module = config.module || {}; - // eslint-disable-next-line no-param-reassign - config.module.rules = rules; - - return config; -}; diff --git a/code/presets/web-components-webpack/src/types.ts b/code/presets/web-components-webpack/src/types.ts deleted file mode 100644 index 7b5a8352a9e1..000000000000 --- a/code/presets/web-components-webpack/src/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { BuilderResult, TypescriptOptions, StorybookConfig } from '@storybook/core-webpack'; diff --git a/code/presets/web-components-webpack/tsconfig.json b/code/presets/web-components-webpack/tsconfig.json deleted file mode 100644 index a4429176e35f..000000000000 --- a/code/presets/web-components-webpack/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, - "include": ["src/**/*"] -} diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 9fecf06b8fea..8053c52671ff 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -56,9 +56,6 @@ "devDependencies": { "typescript": "^5.3.2" }, - "peerDependencies": { - "@babel/core": "*" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index b49b1b48d39d..08b885f3fecb 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -69,7 +69,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@babel/core": "^7.23.2", "@storybook/test": "workspace:*", "@types/util-deprecate": "^1.0.0", "expect-type": "^0.15.0", diff --git a/code/yarn.lock b/code/yarn.lock index 6fe3d551d312..44862e0b196e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -375,7 +375,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.13": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5": version: 7.23.5 resolution: "@babel/code-frame@npm:7.23.5" dependencies: @@ -392,7 +392,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.23.2": +"@babel/core@npm:7.23.2, @babel/core@npm:^7.23.2": version: 7.23.2 resolution: "@babel/core@npm:7.23.2" dependencies: @@ -415,7 +415,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:7.23.0, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2": +"@babel/core@npm:7.23.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": + version: 7.23.6 + resolution: "@babel/core@npm:7.23.6" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.23.6" + "@babel/parser": "npm:^7.23.6" + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: a02bae7d916029b70706dc301535e1b31e5d216f55d4ee6f64a15825c6b69ee2c14c52a213d1497ec414e925ed4e9d897d41fb0d75df9fea28ed2c0008790e31 + languageName: node + linkType: hard + +"@babel/generator@npm:7.23.0, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2": version: 7.23.0 resolution: "@babel/generator@npm:7.23.0" dependencies: @@ -427,6 +450,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/generator@npm:7.23.6" + dependencies: + "@babel/types": "npm:^7.23.6" + "@jridgewell/gen-mapping": "npm:^0.3.2" + "@jridgewell/trace-mapping": "npm:^0.3.17" + jsesc: "npm:^2.5.1" + checksum: 53540e905cd10db05d9aee0a5304e36927f455ce66f95d1253bb8a179f286b88fa7062ea0db354c566fe27f8bb96567566084ffd259f8feaae1de5eccc8afbda + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.22.5, @babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -676,6 +711,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/helpers@npm:7.23.6" + dependencies: + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + checksum: df1cf6607676ad36f52f652ec03536f2732d70aef5e76dba5c964e34d49f3c2d3dcf9fb3740db359f53071d74b64606a833d5ba156f79f437f71bfe06e2e7e19 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -687,7 +733,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.9.6": +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": version: 7.23.6 resolution: "@babel/parser@npm:7.23.6" bin: @@ -929,7 +975,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.2.0, @babel/plugin-syntax-import-meta@npm:^7.8.3": +"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3": version: 7.10.4 resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4" dependencies: @@ -2145,7 +2191,7 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15, @babel/template@npm:^7.7.0": +"@babel/template@npm:^7.22.15": version: 7.22.15 resolution: "@babel/template@npm:7.22.15" dependencies: @@ -2156,7 +2202,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0": +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" dependencies: @@ -2174,7 +2220,25 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/traverse@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/traverse@npm:7.23.6" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d + languageName: node + linkType: hard + +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" dependencies: @@ -3243,7 +3307,7 @@ __metadata: languageName: node linkType: hard -"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3": +"@istanbuljs/schema@npm:^0.1.2": version: 0.1.3 resolution: "@istanbuljs/schema@npm:0.1.3" checksum: 61c5286771676c9ca3eb2bd8a7310a9c063fb6e0e9712225c8471c582d157392c88f5353581c8c9adbe0dff98892317d2fdfc56c3499aa42e0194405206a963a @@ -5049,7 +5113,6 @@ __metadata: "@angular/forms": ">=15.0.0 < 18.0.0" "@angular/platform-browser": ">=15.0.0 < 18.0.0" "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0" - "@babel/core": "*" rxjs: ^6.0.0 || ^7.4.0 typescript: ^4.0.0 || ^5.0.0 zone.js: ">= 0.11.1 < 1.0.0" @@ -5059,13 +5122,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/babel-plugin-require-context-hook@npm:1.0.1": - version: 1.0.1 - resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" - checksum: 3baca2838cd0a9901fb8019736e61de45b82f9f52afb279c3df73cd8d0fe42b0f0742e21556e7ebce71838afccdb95324153e425a337e617975812fe461eefc0 - languageName: node - linkType: hard - "@storybook/bench@npm:next": version: 1.0.0-next.6 resolution: "@storybook/bench@npm:1.0.0-next.6" @@ -5195,7 +5251,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5" dependencies: - "@babel/core": "npm:^7.23.2" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -5204,14 +5259,12 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" - "@swc/core": "npm:^1.3.82" "@types/node": "npm:^18.0.0" "@types/pretty-hrtime": "npm:^1.0.0" "@types/semver": "npm:^7.3.4" "@types/terser-webpack-plugin": "npm:^5.2.0" "@types/webpack-hot-middleware": "npm:^2.25.6" "@types/webpack-virtual-modules": "npm:^0.1.1" - babel-loader: "npm:^9.0.0" browser-assert: "npm:^1.2.1" case-sensitive-paths-webpack-plugin: "npm:^2.4.0" constants-browserify: "npm:^1.0.0" @@ -5228,7 +5281,6 @@ __metadata: semver: "npm:^7.3.7" slash: "npm:^5.0.0" style-loader: "npm:^3.3.1" - swc-loader: "npm:^0.2.3" terser-webpack-plugin: "npm:^5.3.1" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -5263,8 +5315,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" @@ -5604,13 +5654,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/core": "npm:^7.23.2" + "@babel/core": "npm:7.23.6" "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" assert: "npm:^2.1.0" - babel-plugin-react-docgen: "npm:4.2.1" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" require-from-string: "npm:^2.0.2" @@ -5633,9 +5682,6 @@ __metadata: ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" - babel-plugin-ember-modules-api-polyfill: ^3.5.0 - babel-plugin-htmlbars-inline-precompile: ^5.3.1 ember-source: ~3.28.1 || ^4.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -5692,8 +5738,6 @@ __metadata: "@storybook/preset-html-webpack": "workspace:*" "@types/node": "npm:^18.0.0" typescript: "npm:^5.3.2" - peerDependencies: - "@babel/core": "*" languageName: unknown linkType: soft @@ -5707,8 +5751,6 @@ __metadata: "@storybook/types": "workspace:*" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" - peerDependencies: - "@babel/core": "*" languageName: unknown linkType: soft @@ -5965,7 +6007,6 @@ __metadata: preact: "npm:^10.5.13" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" preact: ^8.0.0||^10.0.0 languageName: unknown linkType: soft @@ -5993,14 +6034,12 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@storybook/types": "workspace:*" - "@types/babel__core": "npm:^7.1.7" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" pnp-webpack-plugin: "npm:^1.7.0" semver: "npm:^7.3.5" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" react-scripts: ">=5.0.0" languageName: unknown linkType: soft @@ -6014,8 +6053,6 @@ __metadata: html-loader: "npm:^3.1.0" typescript: "npm:^5.3.2" webpack: "npm:5" - peerDependencies: - "@babel/core": "*" languageName: unknown linkType: soft @@ -6023,14 +6060,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack" dependencies: - "@babel/plugin-transform-react-jsx": "npm:^7.22.15" - "@babel/preset-typescript": "npm:^7.23.2" "@storybook/core-webpack": "workspace:*" "@types/node": "npm:^18.0.0" preact: "npm:^10.5.13" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" preact: ^8.0.0||^10.0.0 languageName: unknown linkType: soft @@ -6039,8 +6073,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" dependencies: - "@babel/preset-flow": "npm:^7.22.15" - "@babel/preset-react": "npm:^7.22.15" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6049,7 +6081,6 @@ __metadata: "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" - babel-plugin-add-react-displayname: "npm:^0.0.5" fs-extra: "npm:^11.1.0" magic-string: "npm:^0.30.5" react-docgen: "npm:^7.0.0" @@ -6058,12 +6089,9 @@ __metadata: typescript: "npm:^5.3.2" webpack: "npm:5" peerDependencies: - "@babel/core": ^7.22.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: - "@babel/core": - optional: true typescript: optional: true languageName: unknown @@ -6099,7 +6127,6 @@ __metadata: ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" svelte: ^4.0.0 || ^5.0.0-next.16 svelte-loader: "*" languageName: unknown @@ -6121,31 +6148,11 @@ __metadata: vue-loader: "npm:^16.0.0" webpack: "npm:5" peerDependencies: - "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 - babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 vue: ^3.0.0 languageName: unknown linkType: soft -"@storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack": - version: 0.0.0-use.local - resolution: "@storybook/preset-web-components-webpack@workspace:presets/web-components-webpack" - dependencies: - "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" - "@babel/plugin-syntax-import-meta": "npm:^7.10.4" - "@babel/preset-env": "npm:^7.23.2" - "@storybook/core-webpack": "workspace:*" - "@types/node": "npm:^18.0.0" - babel-loader: "npm:^7.0.0 || ^8.0.0 || ^9.0.0" - babel-plugin-bundled-import-meta: "npm:^0.3.1" - lit: "npm:2.3.1" - typescript: "npm:^5.3.2" - peerDependencies: - lit: ^2.0.0 || ^3.0.0 - languageName: unknown - linkType: soft - "@storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" @@ -6245,13 +6252,10 @@ __metadata: "@storybook/react": "workspace:*" "@types/node": "npm:^18.0.0" peerDependencies: - "@babel/core": ^7.22.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 typescript: "*" peerDependenciesMeta: - "@babel/core": - optional: true typescript: optional: true languageName: unknown @@ -6261,7 +6265,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" dependencies: - "@babel/core": "npm:^7.23.2" "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -6300,11 +6303,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/preset-react": "npm:^7.22.15" - "@babel/preset-typescript": "npm:^7.23.2" - "@babel/runtime": "npm:^7.23.2" "@chromaui/addon-visual-tests": "npm:^0.0.124" "@nx/workspace": "npm:17.0.2" "@playwright/test": "npm:1.36.0" @@ -6325,7 +6323,6 @@ __metadata: "@storybook/addon-toolbars": "workspace:*" "@storybook/addon-viewport": "workspace:*" "@storybook/angular": "workspace:*" - "@storybook/babel-plugin-require-context-hook": "npm:1.0.1" "@storybook/bench": "npm:next" "@storybook/blocks": "workspace:*" "@storybook/builder-manager": "workspace:*" @@ -6367,7 +6364,6 @@ __metadata: "@storybook/preset-server-webpack": "workspace:*" "@storybook/preset-svelte-webpack": "workspace:*" "@storybook/preset-vue3-webpack": "workspace:*" - "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" @@ -6408,8 +6404,6 @@ __metadata: "@typescript-eslint/parser": "npm:^5.45.0" "@vitejs/plugin-react": "npm:^3.0.1" "@vitest/coverage-v8": "npm:^1.0.1" - babel-eslint: "npm:^10.1.0" - babel-loader: "npm:^9.1.2" chromatic: "npm:7.1.0" concurrently: "npm:^5.3.0" cross-env: "npm:^7.0.3" @@ -6563,7 +6557,6 @@ __metadata: svelte-loader: "npm:^3.1.9" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" svelte: ^4.0.0 || ^5.0.0-next.16 svelte-loader: "*" languageName: unknown @@ -6706,7 +6699,6 @@ __metadata: dependencies: "@storybook/channels": "workspace:*" "@storybook/csf": "npm:^0.1.2" - "@types/babel__core": "npm:^7.0.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" @@ -6746,9 +6738,7 @@ __metadata: typescript: "npm:^5.3.2" vue: "npm:3.0.0" peerDependencies: - "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 - babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 vue: ^3.0.0 languageName: unknown linkType: soft @@ -6796,10 +6786,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5" dependencies: - "@babel/preset-env": "npm:^7.23.2" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" - "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/web-components": "workspace:*" "@types/node": "npm:^18.0.0" lit: "npm:2.3.1" @@ -6901,13 +6889,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-darwin-arm64@npm:1.3.100" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - "@swc/core-darwin-arm64@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-darwin-arm64@npm:1.3.82" @@ -6915,13 +6896,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-darwin-x64@npm:1.3.100" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - "@swc/core-darwin-x64@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-darwin-x64@npm:1.3.82" @@ -6936,13 +6910,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.100" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - "@swc/core-linux-arm64-gnu@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-arm64-gnu@npm:1.3.82" @@ -6950,13 +6917,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.100" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - "@swc/core-linux-arm64-musl@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-arm64-musl@npm:1.3.82" @@ -6964,13 +6924,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.100" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - "@swc/core-linux-x64-gnu@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-x64-gnu@npm:1.3.82" @@ -6978,13 +6931,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-x64-musl@npm:1.3.100" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - "@swc/core-linux-x64-musl@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-x64-musl@npm:1.3.82" @@ -6992,13 +6938,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.100" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - "@swc/core-win32-arm64-msvc@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-win32-arm64-msvc@npm:1.3.82" @@ -7006,13 +6945,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.100" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - "@swc/core-win32-ia32-msvc@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-win32-ia32-msvc@npm:1.3.82" @@ -7020,13 +6952,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.100" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - "@swc/core-win32-x64-msvc@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-win32-x64-msvc@npm:1.3.82" @@ -7079,56 +7004,6 @@ __metadata: languageName: node linkType: hard -"@swc/core@npm:^1.3.82": - version: 1.3.100 - resolution: "@swc/core@npm:1.3.100" - dependencies: - "@swc/core-darwin-arm64": "npm:1.3.100" - "@swc/core-darwin-x64": "npm:1.3.100" - "@swc/core-linux-arm64-gnu": "npm:1.3.100" - "@swc/core-linux-arm64-musl": "npm:1.3.100" - "@swc/core-linux-x64-gnu": "npm:1.3.100" - "@swc/core-linux-x64-musl": "npm:1.3.100" - "@swc/core-win32-arm64-msvc": "npm:1.3.100" - "@swc/core-win32-ia32-msvc": "npm:1.3.100" - "@swc/core-win32-x64-msvc": "npm:1.3.100" - "@swc/counter": "npm:^0.1.1" - "@swc/types": "npm:^0.1.5" - peerDependencies: - "@swc/helpers": ^0.5.0 - dependenciesMeta: - "@swc/core-darwin-arm64": - optional: true - "@swc/core-darwin-x64": - 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: d6e873a7c627765991b18bd8d1b0ce1f1d9cf08c451fe78dbbf28dda14d4301cec2689f6bd85e604847d4a20226fd79c272796fef4f28feaca81a20c0f62e8e9 - languageName: node - linkType: hard - -"@swc/counter@npm:^0.1.1": - version: 0.1.2 - resolution: "@swc/counter@npm:0.1.2" - checksum: 18be012107d4ba1f79776c48d83391ca2159103d7d31a59ff52fcc8024db51b71c5f46714a9fb73981739bc8a38dc6f385a046b71cc08f6043f3c47f5c409eab - languageName: node - linkType: hard - "@swc/helpers@npm:0.5.2": version: 0.5.2 resolution: "@swc/helpers@npm:0.5.2" @@ -7138,7 +7013,7 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.4, @swc/types@npm:^0.1.5": +"@swc/types@npm:^0.1.4": version: 0.1.5 resolution: "@swc/types@npm:0.1.5" checksum: b35f93fe896a2240f6f10544e408f9648c2bd4bcff9bd8d022d9a6942d31cf859f86119fb0bbb04a12eefa1f6a6745ffc7d18f3a490d76d7b6a074a7c9608144 @@ -7336,7 +7211,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7, @types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.7, @types/babel__core@npm:^7.18.0": +"@types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -9833,7 +9708,7 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.14.2, ast-types@npm:^0.14.1, ast-types@npm:^0.14.2": +"ast-types@npm:0.14.2, ast-types@npm:^0.14.1": version: 0.14.2 resolution: "ast-types@npm:0.14.2" dependencies: @@ -10019,23 +9894,7 @@ __metadata: languageName: node linkType: hard -"babel-eslint@npm:^10.1.0": - version: 10.1.0 - resolution: "babel-eslint@npm:10.1.0" - dependencies: - "@babel/code-frame": "npm:^7.0.0" - "@babel/parser": "npm:^7.7.0" - "@babel/traverse": "npm:^7.7.0" - "@babel/types": "npm:^7.7.0" - eslint-visitor-keys: "npm:^1.0.0" - resolve: "npm:^1.12.0" - peerDependencies: - eslint: ">= 4.12.1" - checksum: a1596111871ce3615410a2ffb87ab8383b35a8c8e1942b47130cb12bca2578c8eb9d8e56c3c84f44d7abe716684f6794f2e6c1e5b4e6d09f171ae51670be44b9 - languageName: node - linkType: hard - -"babel-loader@npm:9.1.3, babel-loader@npm:^7.0.0 || ^8.0.0 || ^9.0.0, babel-loader@npm:^9.0.0, babel-loader@npm:^9.1.2": +"babel-loader@npm:9.1.3": version: 9.1.3 resolution: "babel-loader@npm:9.1.3" dependencies: @@ -10048,25 +9907,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-add-react-displayname@npm:^0.0.5": - version: 0.0.5 - resolution: "babel-plugin-add-react-displayname@npm:0.0.5" - checksum: 96b363d613e3d25e55606546874f3ab34b45088ac5143a64e417976f1eb29ed3e4df90400daa5edb2026d6088ed172f7af469d89838aac4bc810ede377b63c63 - languageName: node - linkType: hard - -"babel-plugin-bundled-import-meta@npm:^0.3.1": - version: 0.3.2 - resolution: "babel-plugin-bundled-import-meta@npm:0.3.2" - dependencies: - "@babel/plugin-syntax-import-meta": "npm:^7.2.0" - "@babel/template": "npm:^7.7.0" - peerDependencies: - "@babel/core": ^7.7.0 - checksum: 506faae34ff19b75d8bf5291b141af2e083932cdf2a8b4334582da9b26a2750a9d5c0656c1d6da15a4e51894abdbf407c18d10b9d1a596b688771d334105ac0c - languageName: node - linkType: hard - "babel-plugin-debug-macros@npm:^0.3.4": version: 0.3.4 resolution: "babel-plugin-debug-macros@npm:0.3.4" @@ -10179,17 +10019,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-react-docgen@npm:4.2.1": - version: 4.2.1 - resolution: "babel-plugin-react-docgen@npm:4.2.1" - dependencies: - ast-types: "npm:^0.14.2" - lodash: "npm:^4.17.15" - react-docgen: "npm:^5.0.0" - checksum: 9f7af20e6ebd794beae14aa1ffe4f1c1c5855821a5a9f205099602c89b557e33b9cb3dc3fe0b3a2f2ca35007c6ab45f52da9695a681d8495ad0f5494ef78ec34 - languageName: node - linkType: hard - "babel-plugin-transform-hook-names@npm:^1.0.2": version: 1.0.2 resolution: "babel-plugin-transform-hook-names@npm:1.0.2" @@ -11005,28 +10834,6 @@ __metadata: languageName: node linkType: hard -"c8@npm:^7.6.0": - version: 7.14.0 - resolution: "c8@npm:7.14.0" - dependencies: - "@bcoe/v8-coverage": "npm:^0.2.3" - "@istanbuljs/schema": "npm:^0.1.3" - find-up: "npm:^5.0.0" - foreground-child: "npm:^2.0.0" - istanbul-lib-coverage: "npm:^3.2.0" - istanbul-lib-report: "npm:^3.0.0" - istanbul-reports: "npm:^3.1.4" - rimraf: "npm:^3.0.2" - test-exclude: "npm:^6.0.0" - v8-to-istanbul: "npm:^9.0.0" - yargs: "npm:^16.2.0" - yargs-parser: "npm:^20.2.9" - bin: - c8: bin/c8.js - checksum: 8946f55f2dcc85bf146f429a3deeede78502da245e515a2d181342475d8d8698b4055ec1d9b887ab8e1615f49c1a2af4d63557e68b2005844572fb785991e148 - languageName: node - linkType: hard - "cac@npm:^6.7.14": version: 6.7.14 resolution: "cac@npm:6.7.14" @@ -11787,7 +11594,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^2.18.0, commander@npm:^2.19.0, commander@npm:^2.2.0, commander@npm:^2.20.0": +"commander@npm:^2.18.0, commander@npm:^2.2.0, commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" checksum: 74c781a5248c2402a0a3e966a0a2bba3c054aad144f5c023364be83265e796b20565aa9feff624132ff629aa64e16999fa40a743c10c12f7c61e96a794b99288 @@ -12505,7 +12312,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": +"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": version: 4.3.4 resolution: "debug@npm:4.3.4" dependencies: @@ -14271,13 +14078,6 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^1.0.0": - version: 1.3.0 - resolution: "eslint-visitor-keys@npm:1.3.0" - checksum: 10c91fdbbe36810dd4308e57f9a8bc7177188b2a70247e54e3af1fa05ebc66414ae6fd4ce3c6c6821591f43a556e9037bc6b071122e099b5f8b7d2f76df553e3 - languageName: node - linkType: hard - "eslint-visitor-keys@npm:^3.1.0, eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" @@ -14413,17 +14213,6 @@ __metadata: languageName: node linkType: hard -"estree-to-babel@npm:^3.1.0": - version: 3.2.1 - resolution: "estree-to-babel@npm:3.2.1" - dependencies: - "@babel/traverse": "npm:^7.1.6" - "@babel/types": "npm:^7.2.0" - c8: "npm:^7.6.0" - checksum: c7949b141f569528b2608ab715d593a04f7e2e529df04e0b595d0a7dea819b410e71d1f04716e43ac1480942afc5701cb5151ad2906ee8402969651a389881bb - languageName: node - linkType: hard - "estree-util-is-identifier-name@npm:^2.0.0": version: 2.1.0 resolution: "estree-util-is-identifier-name@npm:2.1.0" @@ -15264,16 +15053,6 @@ __metadata: languageName: node linkType: hard -"foreground-child@npm:^2.0.0": - version: 2.0.0 - resolution: "foreground-child@npm:2.0.0" - dependencies: - cross-spawn: "npm:^7.0.0" - signal-exit: "npm:^3.0.2" - checksum: 6719982783a448162f9a01500757fb2053bc5dcd4d67c7cd30739b38ccc01b39f84e408c30989d1d8774519c021c0498e2450ab127690fb09d7f2568fd94ffcc - languageName: node - linkType: hard - "foreground-child@npm:^3.1.0": version: 3.1.1 resolution: "foreground-child@npm:3.1.1" @@ -17859,7 +17638,7 @@ __metadata: languageName: node linkType: hard -"istanbul-reports@npm:^3.1.4, istanbul-reports@npm:^3.1.6": +"istanbul-reports@npm:^3.1.6": version: 3.1.6 resolution: "istanbul-reports@npm:3.1.6" dependencies: @@ -20877,7 +20656,7 @@ __metadata: languageName: node linkType: hard -"neo-async@npm:^2.5.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2": +"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2": version: 2.6.2 resolution: "neo-async@npm:2.6.2" checksum: c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d @@ -21009,7 +20788,7 @@ __metadata: languageName: node linkType: hard -"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17": +"node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" dependencies: @@ -23493,26 +23272,6 @@ __metadata: languageName: node linkType: hard -"react-docgen@npm:^5.0.0": - version: 5.4.3 - resolution: "react-docgen@npm:5.4.3" - dependencies: - "@babel/core": "npm:^7.7.5" - "@babel/generator": "npm:^7.12.11" - "@babel/runtime": "npm:^7.7.6" - ast-types: "npm:^0.14.2" - commander: "npm:^2.19.0" - doctrine: "npm:^3.0.0" - estree-to-babel: "npm:^3.1.0" - neo-async: "npm:^2.6.1" - node-dir: "npm:^0.1.10" - strip-indent: "npm:^3.0.0" - bin: - react-docgen: bin/react-docgen.js - checksum: c920e9611e08317f8fdae707114cf02baaa18e2f1bd23ed18f57e66b9e1042e51dc98cc9de828b03d018ccc4e26300c9a6c4f74e862fc94dc64029267c801a01 - languageName: node - linkType: hard - "react-docgen@npm:^7.0.0": version: 7.0.1 resolution: "react-docgen@npm:7.0.1" @@ -24648,7 +24407,7 @@ __metadata: languageName: node linkType: hard -"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.4.0": +"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.4.0": version: 1.22.8 resolution: "resolve@npm:1.22.8" dependencies: @@ -24674,7 +24433,7 @@ __metadata: languageName: node linkType: hard -"resolve@patch:resolve@npm%3A1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin, resolve@patch:resolve@npm%3A^1.12.0#optional!builtin, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin": +"resolve@patch:resolve@npm%3A1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin": version: 1.22.8 resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin::version=1.22.8&hash=c3c19d" dependencies: @@ -26707,16 +26466,6 @@ __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" @@ -28209,7 +27958,7 @@ __metadata: languageName: node linkType: hard -"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.2.0": +"v8-to-istanbul@npm:^9.2.0": version: 9.2.0 resolution: "v8-to-istanbul@npm:9.2.0" dependencies: @@ -29559,7 +29308,7 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.9": +"yargs-parser@npm:^20.2.2": version: 20.2.9 resolution: "yargs-parser@npm:20.2.9" checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72 @@ -29633,21 +29382,6 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^16.2.0": - version: 16.2.0 - resolution: "yargs@npm:16.2.0" - dependencies: - cliui: "npm:^7.0.2" - escalade: "npm:^3.1.1" - get-caller-file: "npm:^2.0.5" - require-directory: "npm:^2.1.1" - string-width: "npm:^4.2.0" - y18n: "npm:^5.0.5" - yargs-parser: "npm:^20.2.2" - checksum: b1dbfefa679848442454b60053a6c95d62f2d2e21dd28def92b647587f415969173c6e99a0f3bab4f1b67ee8283bf735ebe3544013f09491186ba9e8a9a2b651 - languageName: node - linkType: hard - "yn@npm:3.1.1": version: 3.1.1 resolution: "yn@npm:3.1.1" diff --git a/docs/api/main-config-framework.md b/docs/api/main-config-framework.md index ce256574b75c..8da82854d24f 100644 --- a/docs/api/main-config-framework.md +++ b/docs/api/main-config-framework.md @@ -38,20 +38,3 @@ While many options are specific to a framework, there are some options that are Type: `Record` Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md). - -#### `options.builder.useSWC` - -For frameworks made with [Webpack](../builders/webpack.md) builder, except Angular. Enabling this option allows you to use the [SWC](https://swc.rs/) compiler instead of [Babel](../configure/compilers.md#babel). - -When Storybook loads, it will update Webpack's configuration including the required loaders (e.g., [`TerserPlugin`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`babel-loader`](https://webpack.js.org/loaders/babel-loader/)) with SWC equivalents (e.g., [`swc-loader`](https://swc.rs/docs/usage/swc-loader)) for bundling and minification. - - - - - - diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index b8a4761ba5da..ae25c4fb308a 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -12,7 +12,6 @@ Type: checkOptions?: CheckOptions; reactDocgen?: 'react-docgen' | 'react-docgen-typescript' | false; reactDocgenTypescriptOptions?: ReactDocgenTypescriptOptions; - skipBabel?: boolean; } ``` @@ -87,24 +86,6 @@ Only available for React Storybook projects. Options to pass to react-docgen-typ -## `skipBabel` - -Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead. - -Type: `boolean` - -Disable parsing of TypeScript files through Babel. - - - - - - - ## `skipCompiler` Type: `boolean` diff --git a/docs/configure/compilers.md b/docs/configure/compilers.md index 96d9cb75f64a..803237b8b725 100644 --- a/docs/configure/compilers.md +++ b/docs/configure/compilers.md @@ -42,90 +42,7 @@ By default, Babel provides an opinionated [configuration](https://babeljs.io/doc - **Project-wide configuration**: Babel will look for a `babel.config.js` or equivalent file in the root of your project and use it to configure your project's Babel setup. - **File-relative configuration**: Babel will look for a `.babelrc.json` or equivalent file, introspecting the project structure until it finds a configuration file. This will allow you to configure Babel individually for multiple aspects of your project. -Storybook relies on an agnostic approach to configuring Babel, enabling you to provide the necessary configuration for your project, and it will use it. Based on the supported frameworks, builders, and addons, it may include minor adjustments to ensure compatibility with Storybook's features. If you need to provide a custom configuration, you can generate a `.babelrc.json` file by running the following command: - - - - - - - -When the command runs, it will prompt you to install additional packages and generate a `.babelrc.json` file in the current working directory of your project and apply it, assuming that you're using the default configuration and co-locating your Storybook stories in the current working directory of your project. - -
-Example Babel configuration - -```json -{ - "sourceType": "unambiguous", - "presets": [ - [ - "@babel/preset-env", - { - "shippedProposals": true, - "loose": true - } - ], - "@babel/preset-typescript" - ], - "plugins": [ - "@babel/plugin-transform-shorthand-properties", - "@babel/plugin-transform-block-scoping", - [ - "@babel/plugin-proposal-decorators", - { - "legacy": true - } - ], - [ - "@babel/plugin-proposal-class-properties", - { - "loose": true - } - ], - [ - "@babel/plugin-proposal-private-methods", - { - "loose": true - } - ], - "@babel/plugin-proposal-export-default-from", - "@babel/plugin-syntax-dynamic-import", - [ - "@babel/plugin-proposal-object-rest-spread", - { - "loose": true, - "useBuiltIns": true - } - ], - "@babel/plugin-transform-classes", - "@babel/plugin-transform-arrow-functions", - "@babel/plugin-transform-parameters", - "@babel/plugin-transform-destructuring", - "@babel/plugin-transform-spread", - "@babel/plugin-transform-for-of", - "babel-plugin-macros", - "@babel/plugin-proposal-optional-chaining", - "@babel/plugin-proposal-nullish-coalescing-operator", - [ - "babel-plugin-polyfill-corejs3", - { - "method": "usage-global", - "absoluteImports": "core-js", - "version": "3.18.3" - } - ] - ] -} -``` - -
+Storybook relies on an agnostic approach to configuring Babel, enabling you to provide the necessary configuration for your project, and it will use it. Based on the supported frameworks, builders, and addons, it may include minor adjustments to ensure compatibility with Storybook's features. diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md index b9aba6763119..eb789ed833e7 100644 --- a/docs/configure/typescript.md +++ b/docs/configure/typescript.md @@ -28,7 +28,7 @@ See the Vite builder [TypeScript documentation](https://github.com/storybookjs/b ### Extending the default configuration -Out of the box, Storybook is built to work with a wide range of third-party libraries, enabling you to safely access and document metadata (e.g., props, inputs) from your components without any additional configuration. It relies on [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) for TypeScript support and optionally [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/v4.1.6/README.md#options) for type checking. Since Storybook supports multiple frameworks, it also includes a set of third-party packages to support each framework (e.g., `ts-loader` and `ngx-template-loader` for Angular, `react-docgen-typescript-plugin` for React). If you need to customize the default configuration for a specific use case scenario, refer to the [`config.typescript` API reference](../api/main-config-typescript.md). +Out of the box, Storybook is built to work with a wide range of third-party libraries, enabling you to safely access and document metadata (e.g., props, inputs) from your components without any additional configuration. Since Storybook supports multiple frameworks, it also includes a set of third-party packages to support each framework (e.g., `ts-loader` and `ngx-template-loader` for Angular, `react-docgen-typescript-plugin` for React). If you need to customize the default configuration for a specific use case scenario, refer to the [`config.typescript` API reference](../api/main-config-typescript.md). The above example extends the baseline configuration to remove existing props from third-party libraries. Useful if you want to document only your components. However, if you need to include them, you can do so by adjusting your configuration as follows: diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md index 27fdf03b70af..023a787adc8a 100644 --- a/docs/contribute/framework.md +++ b/docs/contribute/framework.md @@ -100,7 +100,6 @@ Because a framework is a node package, it must contain a `package.json` file. He "": "^x.x.x" }, "peerDependencies": { - "@babel/core": "^x.x.x", "@storybook/addon-actions": "^7.0.0", "": "^x.x.x || ^x.x.x", "": "^x.x.x || ^x.x.x", diff --git a/docs/faq.md b/docs/faq.md index 580501e8ecd3..cb0742563f0b 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -8,7 +8,6 @@ Here are some answers to frequently asked questions. If you have a question, you - [How can I opt-out of Angular Ivy?](#how-can-i-opt-out-of-angular-ivy) - [How can I opt-out of Angular ngcc?](#how-can-i-opt-out-of-angular-ngcc) - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories) -- [I see `ReferenceError: React is not defined` when using Storybook with Next.js](#i-see-referenceerror-react-is-not-defined-when-using-storybook-with-nextjs) - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs) - [How do I fix module resolution in special environments?](#how-do-i-fix-module-resolution-in-special-environments) - [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook) @@ -97,13 +96,6 @@ If you're using [`Yarn`](https://yarnpkg.com/) as a package manager, you'll need -## I see `ReferenceError: React is not defined` when using Storybook with Next.js - -Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by: - -1. Adding `import React from 'react'` to your component files. -2. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require) - ## How do I setup Storybook to share Webpack configuration with Next.js? You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example: diff --git a/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx deleted file mode 100644 index 74835b3d835a..000000000000 --- a/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5) - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], -}; -``` diff --git a/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx deleted file mode 100644 index 103f6eb07fcc..000000000000 --- a/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], -}; - -export default config; -``` diff --git a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx index 4dca99f347d9..61d6fa4243c5 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx @@ -2,15 +2,6 @@ // .storybook/main.js export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => ({ jsc: { transform: { diff --git a/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx b/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx index aadc09cd4a2e..248049e88e61 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx @@ -5,14 +5,6 @@ import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => ({ jsc: { transform: { diff --git a/docs/snippets/common/main-config-swc.js.mdx b/docs/snippets/common/main-config-swc.js.mdx index 8fb0cc73115a..dbc9de018d7c 100644 --- a/docs/snippets/common/main-config-swc.js.mdx +++ b/docs/snippets/common/main-config-swc.js.mdx @@ -2,15 +2,6 @@ // .storybook/main.js export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => { return { ...config, diff --git a/docs/snippets/common/main-config-swc.ts.mdx b/docs/snippets/common/main-config-swc.ts.mdx index 90dc8d50f163..a8a3ebaf56ec 100644 --- a/docs/snippets/common/main-config-swc.ts.mdx +++ b/docs/snippets/common/main-config-swc.ts.mdx @@ -5,14 +5,6 @@ import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => { return { ...config, diff --git a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx b/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx deleted file mode 100644 index c0c39d39a12d..000000000000 --- a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - skipBabel: true, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx deleted file mode 100644 index eb831ba140d8..000000000000 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// example-addon/src/babel/babelDefault.js - -export function babelDefault(config) { - return { - ...config, - plugins: [ - ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], - }; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx deleted file mode 100644 index 85f9b7e01c74..000000000000 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// example-addon/src/babel/babelDefault.ts - -import { TransformOptions } from '@babel/core'; - -export function babelDefault(config: TransformOptions) { - return { - ...config, - plugins: [ - ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], - }; -} -``` diff --git a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx index 5e74dccae3fc..d598e43197d2 100644 --- a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx +++ b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx @@ -3,9 +3,7 @@ import { TransformOptions } from '@babel/core'; export function babelDefault(config: TransformOptions) { return { - ...config, plugins: [ - ...config.plugins, [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], ], }; diff --git a/docs/snippets/common/storybook-cli-babelrc-file.npm.mdx b/docs/snippets/common/storybook-cli-babelrc-file.npm.mdx deleted file mode 100644 index 883425742e66..000000000000 --- a/docs/snippets/common/storybook-cli-babelrc-file.npm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npx storybook@latest babelrc -``` diff --git a/docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx b/docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx deleted file mode 100644 index 4f7d8b720d1f..000000000000 --- a/docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest babelrc -``` diff --git a/docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx b/docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx deleted file mode 100644 index 1bec8fcdd103..000000000000 --- a/docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -yarn dlx storybook@latest babelrc -``` diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx index de4f2e5d4f8d..aa5b784e31a6 100644 --- a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx +++ b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx @@ -11,7 +11,6 @@ export default { istanbul: { include: ['**/stories/**'], exclude: ['**/exampleDirectory/**'], - excludeNodeModules: true, }, }, }, diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx index 2bf04e8d7ade..71f5946e1da0 100644 --- a/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx +++ b/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx @@ -4,15 +4,16 @@ // For Vite support add the following import // import type { AddonOptionsVite } from '@storybook/addon-coverage'; -import type { AddonOptionsBabel } from '@storybook/addon-coverage'; +import type { AddonOptionsWebpack } from '@storybook/addon-coverage'; // Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5) import type { StorybookConfig } from '@storybook/your-framework'; -const coverageConfig: AddonOptionsBabel = { - include: ['**/stories/**'], - exclude: ['**/exampleDirectory/**'], - excludeNodeModules: true, +const coverageConfig: AddonOptionsWebpack = { + istanbul: { + include: ['**/stories/**'], + exclude: ['**/exampleDirectory/**'], + } }; const config: StorybookConfig = { @@ -21,10 +22,7 @@ const config: StorybookConfig = { // Other Storybook addons { name: '@storybook/addon-coverage', - options: { - istanbul: { - ...coverageConfig, - }, + options: coverageConfig, }, }, ], diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx index 0011fc2f7377..02b1a55356a7 100644 --- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx +++ b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx @@ -8,7 +8,6 @@ export default { typescript: { // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs. reactDocgen: 'react-docgen', - skipBabel: true, check: false, }, }; diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx index 45ed76c75eb9..775d8341be77 100644 --- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx +++ b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx @@ -10,7 +10,6 @@ const config: StorybookConfig = { typescript: { // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs. reactDocgen: 'react-docgen', - skipBabel: true, check: false, }, }; diff --git a/docs/writing-tests/test-coverage.md b/docs/writing-tests/test-coverage.md index cf635c22a4f4..038e0d56eee9 100644 --- a/docs/writing-tests/test-coverage.md +++ b/docs/writing-tests/test-coverage.md @@ -82,7 +82,7 @@ Finally, open a new terminal window and run the test-runner with: ### Configure -By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@storybook/addon-coverage) offers zero-config support for Storybook and instruments your code via [`babel-plugin-istanbul`](https://github.com/istanbuljs/babel-plugin-istanbul) for [Babel](https://babeljs.io/), or [`vite-plugin-istanbul`](https://github.com/iFaxity/vite-plugin-istanbul) for [Vite](https://vitejs.dev/). However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to the addon. Listed below are the available options and examples of how to use them. +By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@storybook/addon-coverage) offers zero-config support for Storybook and instruments your code via [`istanbul-lib-instrument`](https://www.npmjs.com/package/istanbul-lib-instrument) for [Webpack](https://webpack.js.org/), or [`vite-plugin-istanbul`](https://github.com/iFaxity/vite-plugin-istanbul) for [Vite](https://vitejs.dev/). However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to the addon. Listed below are the available options and examples of how to use them. @@ -95,28 +95,7 @@ By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@s -| Option | Description | Plugin | -| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `cwd` | Defines the current working directory
`options: { istanbul: { cwd: process.cwd(),}}` | Babel, Vite | -| `include` | Select the files to collect coverage
`options: { istanbul: { include: ['**/stories/**'],}}` | Babel, Vite | -| `exclude` | Select the files to exclude from coverage
`options: { istanbul: { exclude: ['**/stories/**'],}}` | Babel, Vite | -| `extension` | Sets additional file extensions for coverage
`options: { istanbul: { extension: ['.js', '.cjs', '.mjs'],}}` | Babel, Vite | -| `nycrcPath` | Defines the relative path for the existing nyc configuration file
`options: { istanbul: { nycrcPath: '../nyc.config.js',}}` | Babel, Vite | -| `excludeNodeModules` | Disables `node_modules` directory introspection
`options: { istanbul: { excludeNodeModules:false,}}` | Babel | -| `ignoreClassMethods` | Configures a set of method names to ignore from being collected
`options: { istanbul: { ignoreClassMethods: ['example', 'myMethod'],}}` | Babel | -| `useInlineSourceMaps` | Enables coverage collection on source maps
`options: { istanbul: { useInlineSourceMaps: false,}}` | Babel | -| `inputSourceMap` | Sets the value to store the source map.
Useful for instrumenting code programmatically
`options: { istanbul: { inputSourceMap: sourceMap,}}` | Babel | -| `onCover` | Hook to monitor coverage collection for all tests
`options: { istanbul: { onCover: (fileName, fileCoverage) => {},}}` | Babel | -| `requireEnv` | Overrides the `VITE_COVERAGE` environment variable's value by granting access to the `env` variables
`options: { istanbul: { requireEnv: true,}}` | Vite | -| `cypress` | Replaces the `VITE_COVERAGE` environment variable with `CYPRESS_COVERAGE`.
Requires Cypress
`options: { istanbul: { cypress: true,}}` | Vite | -| `checkProd` | Configures the plugin to skip instrumentation in production environments
`options: { istanbul: { checkProd: true,}}` | Vite | -| `forceBuildInstrument` | Configures the plugin to add instrumentation in build mode
`options: { istanbul: { forceBuildInstrument: true,}}` | Vite | - - - -Including the `nycrcPath` option enables use of an existing `nyc` configuration file with additional options like [coverage thresholds](https://github.com/istanbuljs/nyc#coverage-thresholds). For more information, refer to the [`nyc` documentation](https://github.com/istanbuljs/nyc#common-configuration-options). - - +Available options for Webpack or Vite can be looked up in the [@storybook/addon-coverage documentation](https://github.com/storybookjs/addon-coverage). ## What about other coverage reporting tools? @@ -168,7 +147,7 @@ If you generated a production build optimized for performance with the [`--test` ### The coverage addon doesn't support instrumented code -As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage) is based on Babel and Vite plugins for code instrumentation, frameworks that don't rely upon these libraries (e.g., Angular configured with Webpack), will require additional configuration to enable code instrumentation. In that case, you can refer to the following [repository](https://github.com/yannbf/storybook-coverage-recipes) for more information. +As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage) is based on Webpack5 loaders and Vite plugins for code instrumentation, frameworks that don't rely upon these libraries (e.g., Angular configured with Webpack), will require additional configuration to enable code instrumentation. In that case, you can refer to the following [repository](https://github.com/yannbf/storybook-coverage-recipes) for more information. #### Learn about other UI tests diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index e0139f305f0b..40580391a6e1 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -107,10 +107,6 @@ packages: access: $all publish: $all proxy: npmjs - '@storybook/babel-plugin-require-context-hook': - access: $all - publish: $all - proxy: npmjs '@storybook/semver': # TODO: remove this when new versions of all dependents have been published and updated. It is not used anymore but still referenced in the latest packages access: $all From cf05ed161046baa51e453670183f42f01f623b8e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:52:26 +0100 Subject: [PATCH 02/52] Remove babel cache preset from core-server --- code/lib/core-server/package.json | 6 ------ code/lib/core-server/src/build-dev.ts | 6 +----- code/lib/core-server/src/build-static.ts | 6 +----- .../lib/core-server/src/presets/babel-cache-preset.ts | 11 ----------- 4 files changed, 2 insertions(+), 27 deletions(-) delete mode 100644 code/lib/core-server/src/presets/babel-cache-preset.ts diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index b12fe37ae249..c7cee6550cf5 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -26,11 +26,6 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./dist/presets/babel-cache-preset": { - "types": "./dist/presets/babel-cache-preset.d.ts", - "node": "./dist/presets/babel-cache-preset.js", - "require": "./dist/presets/babel-cache-preset.js" - }, "./dist/presets/common-preset": { "types": "./dist/presets/common-preset.d.ts", "node": "./dist/presets/common-preset.js", @@ -119,7 +114,6 @@ "bundler": { "entries": [ "./src/index.ts", - "./src/presets/babel-cache-preset.ts", "./src/presets/common-preset.ts", "./src/presets/common-override-preset.ts" ], diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 88c3ab483f06..ea5397f313ea 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -153,12 +153,8 @@ export async function buildDevStandalone( ...(previewBuilder.corePresets || []), ...(resolvedRenderer ? [resolvedRenderer] : []), ...corePresets, - require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'), - ], - overridePresets: [ - ...(previewBuilder.overridePresets || []), - require.resolve('@storybook/core-server/dist/presets/common-override-preset'), ], + overridePresets: [...(previewBuilder.overridePresets || [])], ...options, }); diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 683da79eb0f1..bd75d0bf3242 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -84,12 +84,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption ...(previewBuilder.corePresets || []), ...(resolvedRenderer ? [resolvedRenderer] : []), ...corePresets, - require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'), - ], - overridePresets: [ - ...(previewBuilder.overridePresets || []), - require.resolve('@storybook/core-server/dist/presets/common-override-preset'), ], + overridePresets: [...(previewBuilder.overridePresets || [])], ...options, build, }); diff --git a/code/lib/core-server/src/presets/babel-cache-preset.ts b/code/lib/core-server/src/presets/babel-cache-preset.ts deleted file mode 100644 index 4a381daa921e..000000000000 --- a/code/lib/core-server/src/presets/babel-cache-preset.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { resolvePathInStorybookCache } from '@storybook/core-common'; - -// FIXME: babelConfig is maybe a TransformOptions? -const extend = (babelConfig: any) => ({ - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables a cache directory for faster-rebuilds - cacheDirectory: resolvePathInStorybookCache('babel'), - ...babelConfig, -}); - -export const babel = extend; From 89ec937f811a8c777a32b5afd3fac6eda1d90b2f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:53:57 +0100 Subject: [PATCH 03/52] Remove internal swc-webpack template --- code/lib/cli/src/sandbox-templates.ts | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index b6a8ce9aa4ad..aae5a867c5a0 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -483,25 +483,6 @@ const baseTemplates = { * They will be hidden by default in the Storybook status page. */ const internalTemplates = { - 'internal/swc-webpack': { - ...baseTemplates['react-webpack/18-ts'], - name: 'SWC (react-webpack/18-ts)', - isInternal: true, - inDevelopment: true, - modifications: { - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, - }, - }, - }, - }, - skipTasks: ['bench'], - }, 'internal/react16-webpack': { name: 'React 16 (Webpack | TypeScript)', script: From badd68352a08794be3239580850002c367db676b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 14:06:10 +0100 Subject: [PATCH 04/52] Adjust CLI Init to install appropriate Webpack5 compiler --- code/builders/builder-webpack5/src/types.ts | 1 - code/frameworks/nextjs/README.md | 6 ------ code/lib/cli/src/generators/ANGULAR/index.ts | 1 + code/lib/cli/src/generators/HTML/index.ts | 2 +- code/lib/cli/src/generators/NEXTJS/index.ts | 1 + code/lib/cli/src/generators/PREACT/index.ts | 2 +- code/lib/cli/src/generators/REACT/index.ts | 2 +- .../cli/src/generators/REACT_SCRIPTS/index.ts | 2 +- code/lib/cli/src/generators/SERVER/index.ts | 2 +- code/lib/cli/src/generators/VUE3/index.ts | 2 +- .../cli/src/generators/WEB-COMPONENTS/index.ts | 2 +- .../cli/src/generators/WEBPACK_REACT/index.ts | 2 +- code/lib/cli/src/generators/baseGenerator.ts | 17 +++++------------ code/lib/cli/src/generators/types.ts | 2 +- code/lib/core-webpack/src/types.ts | 1 - 15 files changed, 16 insertions(+), 29 deletions(-) diff --git a/code/builders/builder-webpack5/src/types.ts b/code/builders/builder-webpack5/src/types.ts index 93b2c3ad9caf..6e55f145ca22 100644 --- a/code/builders/builder-webpack5/src/types.ts +++ b/code/builders/builder-webpack5/src/types.ts @@ -37,7 +37,6 @@ export interface StorybookConfigWebpack extends Pick= 14.0.0 - useSWC: true, - }, - }, }, }; ``` diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 4a368e8d0af3..27b10dfcc2ca 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -71,6 +71,7 @@ const generator: Generator<{ projectName: string }> = async ( addScripts: false, componentsDestinationPath: root ? `${root}/src/stories` : undefined, storybookConfigFolder: storybookFolder, + webpackCompiler: () => undefined, }, 'angular' ); diff --git a/code/lib/cli/src/generators/HTML/index.ts b/code/lib/cli/src/generators/HTML/index.ts index c4e0af830fbd..87ee978b0865 100755 --- a/code/lib/cli/src/generators/HTML/index.ts +++ b/code/lib/cli/src/generators/HTML/index.ts @@ -4,7 +4,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'html', { - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/NEXTJS/index.ts b/code/lib/cli/src/generators/NEXTJS/index.ts index 2588b387312a..f060f6b97837 100644 --- a/code/lib/cli/src/generators/NEXTJS/index.ts +++ b/code/lib/cli/src/generators/NEXTJS/index.ts @@ -10,6 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'react', { extraAddons: ['@storybook/addon-onboarding'], + webpackCompiler: ({ builder }) => undefined, }, 'nextjs' ); diff --git a/code/lib/cli/src/generators/PREACT/index.ts b/code/lib/cli/src/generators/PREACT/index.ts index 6bbab88e16a3..74549fc5e26b 100644 --- a/code/lib/cli/src/generators/PREACT/index.ts +++ b/code/lib/cli/src/generators/PREACT/index.ts @@ -4,7 +4,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'preact', { - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/REACT/index.ts b/code/lib/cli/src/generators/REACT/index.ts index 046860356c56..e19a55ce1adc 100644 --- a/code/lib/cli/src/generators/REACT/index.ts +++ b/code/lib/cli/src/generators/REACT/index.ts @@ -10,7 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraPackages, - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), extraAddons: ['@storybook/addon-onboarding'], }); }; diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts index 627753ca96ee..048fca45d327 100644 --- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -59,7 +59,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'react', { - useSWC: () => true, + webpackCompiler: () => undefined, extraAddons, extraPackages, staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined, diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index 7ced80f7441c..1e7cdb0c6ad2 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/code/lib/cli/src/generators/SERVER/index.ts @@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'server', { - useSWC: () => true, + webpackCompiler: () => 'swc', extensions: ['json', 'yaml', 'yml'], } ); diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/cli/src/generators/VUE3/index.ts index ec20a5b946a1..75a632b4072a 100644 --- a/code/lib/cli/src/generators/VUE3/index.ts +++ b/code/lib/cli/src/generators/VUE3/index.ts @@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0'] : []; }, - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts index bf5ceee43c15..a4424ecb2757 100755 --- a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts +++ b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts @@ -5,7 +5,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { return baseGenerator(packageManager, npmOptions, options, 'web-components', { extraPackages: ['lit'], - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts b/code/lib/cli/src/generators/WEBPACK_REACT/index.ts index 94e8babee466..d894be17b34e 100644 --- a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts +++ b/code/lib/cli/src/generators/WEBPACK_REACT/index.ts @@ -5,7 +5,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraAddons: ['@storybook/addon-onboarding'], - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 0897ece904f1..62ed99c5c3ca 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -28,7 +28,7 @@ const defaultOptions: FrameworkOptions = { addScripts: true, addMainFile: true, addComponents: true, - useSWC: () => false, + webpackCompiler: () => undefined, extraMain: undefined, framework: undefined, extensions: undefined, @@ -221,13 +221,13 @@ export async function baseGenerator( extensions, storybookConfigFolder, componentsDestinationPath, - useSWC, + webpackCompiler, } = { ...defaultOptions, ...options, }; - const swc = useSWC ? useSWC({ builder }) : false; + const compiler = webpackCompiler ? webpackCompiler({ builder }) : undefined; const extraAddonsToInstall = typeof extraAddonPackages === 'function' @@ -241,6 +241,7 @@ export async function baseGenerator( const addons = [ '@storybook/addon-links', '@storybook/addon-essentials', + ...(compiler ? [`@storybook/addon-webpack5-compiler-${compiler}`] : []), ...stripVersions(extraAddonsToInstall || []), ].filter(Boolean); @@ -364,15 +365,7 @@ export async function baseGenerator( await configureMain({ framework: { name: frameworkInclude, - options: swc - ? { - ...(options.framework ?? {}), - builder: { - ...(options.framework?.builder ?? {}), - useSWC: true, - }, - } - : options.framework || {}, + options: options.framework || {}, }, prefixes, storybookConfigFolder, diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index f779ffd2b9cb..589c1299a545 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -23,7 +23,7 @@ export interface FrameworkOptions { addScripts?: boolean; addMainFile?: boolean; addComponents?: boolean; - useSWC?: ({ builder }: { builder: Builder }) => boolean; + webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined; extraMain?: any; extensions?: string[]; framework?: Record; diff --git a/code/lib/core-webpack/src/types.ts b/code/lib/core-webpack/src/types.ts index aecd1ccc62e3..01a68acfa950 100644 --- a/code/lib/core-webpack/src/types.ts +++ b/code/lib/core-webpack/src/types.ts @@ -24,7 +24,6 @@ export interface WebpackConfiguration { export type BuilderOptions = { fsCache?: boolean; - useSWC?: boolean; lazyCompilation?: boolean; }; From d88b38811772badadff8c6b4c1b8f43747da6d89 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 14:45:59 +0100 Subject: [PATCH 05/52] Do not apply default babel plugins for preact --- code/presets/preact-webpack/package.json | 3 --- code/presets/preact-webpack/src/index.ts | 27 ------------------------ 2 files changed, 30 deletions(-) diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index e430127e413c..4892d8a6fae1 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -49,8 +49,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", "@storybook/core-webpack": "workspace:*", "@types/node": "^18.0.0" }, @@ -59,7 +57,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "preact": "^8.0.0||^10.0.0" }, "engines": { diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts index 807098909d49..74240af2255c 100644 --- a/code/presets/preact-webpack/src/index.ts +++ b/code/presets/preact-webpack/src/index.ts @@ -1,5 +1,4 @@ import { dirname, join } from 'path'; -import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; export * from './types'; @@ -7,32 +6,6 @@ export * from './types'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; -export const babel: PresetProperty<'babel'> = (config) => { - return { - ...config, - plugins: [ - [ - require.resolve('@babel/plugin-transform-react-jsx'), - { importSource: 'preact', runtime: 'automatic' }, - ], - ...(config?.plugins || []).filter((p) => { - const name = Array.isArray(p) ? p[0] : p; - if (typeof name === 'string') { - return !name.includes('plugin-transform-react-jsx'); - } - return true; - }), - ], - overrides: [ - // Transforms to apply only to first-party code: - { - exclude: '**/node_modules/**', - presets: [require.resolve('@babel/preset-typescript')], - }, - ], - }; -}; - export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => { return { ...config, From 2cfff035a90eaf9a52941bfd8c48c9fb5db52ada Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 14:47:52 +0100 Subject: [PATCH 06/52] Remove Preact 8 support --- code/frameworks/preact-webpack5/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index ba090ae61be2..bc0831fa9dd2 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -58,7 +58,7 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "preact": "^8.0.0||^10.0.0" + "preact": ">=10.0.0" }, "engines": { "node": ">=18.0.0" From a3d0330ddd20e9afec30ce44b1d7a88a280b209a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 15:19:20 +0100 Subject: [PATCH 07/52] Remove fast-refresh --- code/frameworks/nextjs/src/swc/loader.ts | 11 +- .../automigrate/fixes/new-frameworks.test.ts | 9 +- .../core-server/src/__for-testing__/main.ts | 1 - .../telemetry/src/storybook-metadata.test.ts | 12 +- code/presets/react-webpack/package.json | 14 --- .../src/framework-preset-react.test.ts | 102 ---------------- .../src/framework-preset-react.ts | 109 ------------------ code/presets/react-webpack/src/index.ts | 1 - code/presets/react-webpack/src/types.ts | 1 - docs/configure/frameworks.md | 1 - docs/faq.md | 31 ----- 11 files changed, 9 insertions(+), 283 deletions(-) delete mode 100644 code/presets/react-webpack/src/framework-preset-react.test.ts delete mode 100644 code/presets/react-webpack/src/framework-preset-react.ts diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 1925c2b49171..2d25ce1be28f 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -1,17 +1,10 @@ import { getProjectRoot } from '@storybook/core-common'; import { getVirtualModules } from '@storybook/builder-webpack5'; -import type { Options, Preset } from '@storybook/types'; +import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; import type { RuleSetRule } from 'webpack'; -const applyFastRefresh = async (options: Options) => { - const isDevelopment = options.configType === 'DEVELOPMENT'; - const framework = await options.presets.apply('framework'); - const reactOptions = typeof framework === 'object' ? framework.options : {}; - return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true'); -}; - export const configureSWCLoader = async ( baseConfig: any, options: Options, @@ -42,7 +35,7 @@ export const configureSWCLoader = async ( rootDir: dir, pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, - hasReactRefresh: await applyFastRefresh(options), + hasReactRefresh: false, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts index ab1a50315ea1..de0a7d41aea9 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts @@ -138,9 +138,6 @@ describe('new-frameworks fix', () => { }, }, }, - reactOptions: { - fastRefresh: true, - }, }, }) ).resolves.toEqual( @@ -149,9 +146,6 @@ describe('new-frameworks fix', () => { frameworkPackage: '@storybook/react-webpack5', dependenciesToAdd: ['@storybook/react-webpack5'], dependenciesToRemove: ['@storybook/builder-webpack5', '@storybook/manager-webpack5'], - frameworkOptions: { - fastRefresh: true, - }, builderConfig: { name: 'webpack5', options: { @@ -517,7 +511,7 @@ describe('new-frameworks fix', () => { checkNewFrameworks({ packageManager, main: { - framework: { name: '@storybook/react-webpack5', options: { fastRefresh: true } }, + framework: { name: '@storybook/react-webpack5' }, addons: [ { name: 'storybook-addon-next', @@ -541,7 +535,6 @@ describe('new-frameworks fix', () => { dependenciesToRemove: ['@storybook/react-webpack5', 'storybook-addon-next'], addonsToRemove: ['storybook-addon-next'], frameworkOptions: { - fastRefresh: true, nextConfigPath: '../next.config.js', }, builderInfo: { diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts index 988f5ba319fd..ab4ba5c316e7 100644 --- a/code/lib/core-server/src/__for-testing__/main.ts +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -35,7 +35,6 @@ const config: StorybookConfig = { framework: { name: '@storybook/react-webpack5', options: { - fastRefresh: true, strictMode: true, }, }, diff --git a/code/lib/telemetry/src/storybook-metadata.test.ts b/code/lib/telemetry/src/storybook-metadata.test.ts index b04081a7e581..b440f634007d 100644 --- a/code/lib/telemetry/src/storybook-metadata.test.ts +++ b/code/lib/telemetry/src/storybook-metadata.test.ts @@ -129,7 +129,7 @@ describe('storybook-metadata', () => { framework: { name: '/Users/foo/storybook/.yarn/__virtual__/@storybook-react-vite-virtual-769c990b9/0/cache/@storybook-react-vite-npm-7.1.0-alpha.38-512b-a23.zip/node_modules/@storybook/react-vite', options: { - fastRefresh: false, + strictMode: false, }, }, }, @@ -137,7 +137,7 @@ describe('storybook-metadata', () => { expect(unixResult.framework).toEqual({ name: '@storybook/react-vite', - options: { fastRefresh: false }, + options: { strictMode: false }, }); const windowsResult = await computeStorybookMetadata({ @@ -147,7 +147,7 @@ describe('storybook-metadata', () => { framework: { name: 'C:\\Users\\foo\\storybook\\.yarn\\__virtual__\\@storybook-react-vite-virtual-769c990b9\\0\\cache\\@storybook-react-vite-npm-7.1.0-alpha.38-512b-a23.zip\\node_modules\\@storybook\\react-vite', options: { - fastRefresh: false, + strictMode: false, }, }, }, @@ -155,7 +155,7 @@ describe('storybook-metadata', () => { expect(windowsResult.framework).toEqual({ name: '@storybook/react-vite', - options: { fastRefresh: false }, + options: { strictMode: false }, }); }); @@ -235,7 +235,7 @@ describe('storybook-metadata', () => { framework: { name: '@storybook/react-vite', options: { - fastRefresh: false, + strictMode: false, }, }, }, @@ -243,7 +243,7 @@ describe('storybook-metadata', () => { expect(reactResult.framework).toEqual({ name: '@storybook/react-vite', - options: { fastRefresh: false }, + options: { strictMode: false }, }); const angularResult = await computeStorybookMetadata({ diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 42457e27d994..eab6e3eb3475 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -42,11 +42,6 @@ "require": "./dist/framework-preset-react-docs.js", "import": "./dist/framework-preset-react-docs.mjs" }, - "./dist/framework-preset-react": { - "types": "./dist/framework-preset-react.d.ts", - "require": "./dist/framework-preset-react.js", - "import": "./dist/framework-preset-react.mjs" - }, "./dist/loaders/react-docgen-loader": { "types": "./dist/loaders/react-docgen-loader.d.ts", "require": "./dist/loaders/react-docgen-loader.js", @@ -69,9 +64,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/preset-flow": "^7.22.15", - "@babel/preset-react": "^7.22.15", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/node-logger": "workspace:*", @@ -79,11 +71,9 @@ "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", - "babel-plugin-add-react-displayname": "^0.0.5", "fs-extra": "^11.1.0", "magic-string": "^0.30.5", "react-docgen": "^7.0.0", - "react-refresh": "^0.14.0", "semver": "^7.3.7", "webpack": "5" }, @@ -91,14 +81,10 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "^7.22.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, "typescript": { "optional": true } diff --git a/code/presets/react-webpack/src/framework-preset-react.test.ts b/code/presets/react-webpack/src/framework-preset-react.test.ts deleted file mode 100644 index 3e555a7673b1..000000000000 --- a/code/presets/react-webpack/src/framework-preset-react.test.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { describe, it, expect, vi } from 'vitest'; -import type { Configuration } from 'webpack'; -import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; -import type { Options } from '@storybook/core-webpack'; -import * as preset from './framework-preset-react'; - -const mockApply = vi.fn(); -vi.mock('@pmmmwh/react-refresh-webpack-plugin', () => { - return vi.fn().mockImplementation(() => { - return { apply: mockApply }; - }); -}); - -describe('framework-preset-react', () => { - const reactRefreshPath = require.resolve('react-refresh/babel'); - const webpackConfigMock: Configuration = { - plugins: [], - module: { - rules: [], - }, - }; - const babelConfigMock = {}; - - const storybookOptions: Partial = { - configType: 'DEVELOPMENT', - presets: { - // @ts-expect-error (Converted from ts-ignore) - apply: async () => ({ - name: '@storybook/react', - options: { - fastRefresh: true, - }, - }), - }, - presetsList: [], - }; - - const storybookOptionsDisabledRefresh: Partial = { - configType: 'DEVELOPMENT', - presets: { - // @ts-expect-error (Converted from ts-ignore) - apply: async () => ({ - name: '@storybook/react', - options: { - fastRefresh: false, - }, - }), - }, - }; - - describe('babel', () => { - it('should return a config with fast refresh plugin when fast refresh is enabled', async () => { - const config = await preset.babel?.(babelConfigMock, storybookOptions as Options); - - expect(config?.plugins).toEqual([[reactRefreshPath, {}, 'storybook-react-refresh']]); - }); - - it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => { - const config = await preset.babel?.( - babelConfigMock, - storybookOptionsDisabledRefresh as Options - ); - - expect(config).toEqual(babelConfigMock); - }); - - it('should return unchanged config without fast refresh plugin when mode is not development', async () => { - const config = await preset.babel?.(babelConfigMock, { - ...storybookOptions, - configType: 'PRODUCTION', - } as Options); - - expect(config).toEqual(babelConfigMock); - }); - }); - - describe('webpackFinal', () => { - it('should return a config with fast refresh plugin when fast refresh is enabled', async () => { - const config = await preset.webpackFinal?.(webpackConfigMock, storybookOptions as Options); - - expect(config?.plugins).toEqual([new ReactRefreshWebpackPlugin()]); - }); - - it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => { - const config = await preset.webpackFinal?.( - webpackConfigMock, - storybookOptionsDisabledRefresh as Options - ); - - expect(config).toEqual(webpackConfigMock); - }); - - it('should return unchanged config without fast refresh plugin when mode is not development', async () => { - const config = await preset.webpackFinal?.(webpackConfigMock, { - ...storybookOptions, - configType: 'PRODUCTION', - } as Options); - - expect(config).toEqual(webpackConfigMock); - }); - }); -}); diff --git a/code/presets/react-webpack/src/framework-preset-react.ts b/code/presets/react-webpack/src/framework-preset-react.ts deleted file mode 100644 index a3a1d273189c..000000000000 --- a/code/presets/react-webpack/src/framework-preset-react.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { dirname, join } from 'path'; -import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; - -import { logger } from '@storybook/node-logger'; - -import type { Options, Preset } from '@storybook/core-webpack'; -import type { PresetProperty, PresetPropertyFn } from 'lib/types/dist'; -import type { StorybookConfig, ReactOptions } from './types'; - -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - -const applyFastRefresh = async (options: Options) => { - const isDevelopment = options.configType === 'DEVELOPMENT'; - const framework = await options.presets.apply('framework'); - const reactOptions = (typeof framework === 'object' ? framework.options : {}) as ReactOptions; - return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true'); -}; - -export const babel: PresetPropertyFn<'babel'> = async (config, options) => { - if (!(await applyFastRefresh(options))) return config; - - return { - ...config, - plugins: [ - [require.resolve('react-refresh/babel'), {}, 'storybook-react-refresh'], - ...(config?.plugins || []), - ], - }; -}; -const storybookReactDirName = getAbsolutePath('@storybook/preset-react-webpack'); -// TODO: improve node_modules detection -const context = storybookReactDirName.includes('node_modules') - ? join(storybookReactDirName, '../../') // Real life case, already in node_modules - : join(storybookReactDirName, '../../node_modules'); // SB Monorepo - -const hasJsxRuntime = () => { - try { - require.resolve('react/jsx-runtime', { paths: [context] }); - return true; - } catch (e) { - return false; - } -}; - -export const babelDefault: PresetPropertyFn<'babelDefault'> = async (config) => { - const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {}; - return { - ...config, - presets: [ - ...(config?.presets || []), - [require.resolve('@babel/preset-react'), presetReactOptions], - ], - plugins: [...(config?.plugins || []), require.resolve('babel-plugin-add-react-displayname')], - }; -}; - -export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, options) => { - if (!(await applyFastRefresh(options))) return config; - - // matches the name of the plugin in CRA. - const hasReactRefresh = !!config.plugins?.find( - (p) => p.constructor.name === 'ReactRefreshPlugin' - ); - - if (hasReactRefresh) { - logger.warn("=> React refresh is already set. You don't need to set the option"); - return config; - } - - logger.info('=> Using React fast refresh'); - - return { - ...config, - plugins: [ - ...(config.plugins || []), - - // Storybook uses webpack-hot-middleware https://github.com/storybookjs/storybook/issues/14114 - new ReactRefreshWebpackPlugin({ - overlay: { - sockIntegration: 'whm', - }, - }), - ], - }; -}; - -export const swc: PresetProperty<'swc'> = async (config, options) => { - const isDevelopment = options.configType !== 'PRODUCTION'; - - if (!(await applyFastRefresh(options))) { - return config; - } - - return { - ...config, - jsc: { - ...(config?.jsc ?? {}), - transform: { - ...(config?.jsc?.transform ?? {}), - react: { - ...(config?.jsc?.transform?.react ?? {}), - development: isDevelopment, - refresh: isDevelopment, - }, - }, - }, - }; -}; diff --git a/code/presets/react-webpack/src/index.ts b/code/presets/react-webpack/src/index.ts index 22ce14617df4..690e247c5774 100644 --- a/code/presets/react-webpack/src/index.ts +++ b/code/presets/react-webpack/src/index.ts @@ -3,7 +3,6 @@ import type { PresetProperty } from '@storybook/types'; export * from './types'; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/preset-react-webpack/dist/framework-preset-react'), require.resolve('@storybook/preset-react-webpack/dist/framework-preset-cra'), require.resolve('@storybook/preset-react-webpack/dist/framework-preset-react-docs'), ]; diff --git a/code/presets/react-webpack/src/types.ts b/code/presets/react-webpack/src/types.ts index 9301264955e8..22cccf97501f 100644 --- a/code/presets/react-webpack/src/types.ts +++ b/code/presets/react-webpack/src/types.ts @@ -8,7 +8,6 @@ import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/r export type { BuilderResult } from '@storybook/core-webpack'; export interface ReactOptions { - fastRefresh?: boolean; strictMode?: boolean; /** * Use React's legacy root API to mount components diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md index 8efe4b5dac8c..6c38d3f7abc3 100644 --- a/docs/configure/frameworks.md +++ b/docs/configure/frameworks.md @@ -40,7 +40,6 @@ Every modern web application has unique requirements and relies on various tools | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `nextConfigPath` | Sets the default path for the NextJS configuration file
`framework: { name: '@storybook/nextjs', options: { nextConfigPath: '../next.config.js'} }` | NextJS | | `builder` | Configures [Webpack 5](../builders/webpack.md) builder options for NextJS
`core: { builder: { name:'webpack5', options: { lazyCompilation: true} }}` | NextJS | -| `fastRefresh` | Enables [fast refresh mode](https://www.npmjs.com/package/react-refresh) for React
`framework: { name: '@storybook/react-webpack5', options: { fastRefresh: false } }` | React | | `strictMode` | Enables React's [strict mode](https://reactjs.org/docs/strict-mode.html)
`framework: { name: '@storybook/react-webpack5', options: { strictMode: false } }` | React | | `legacyRootApi` | Requires React 18. Toggles support for React's [legacy root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
`framework: { name: '@storybook/react-webpack5', options: { legacyRootApi: true } }` | React | | `enableIvy` | Enabled by default with Angular 9+. Replaces the default compiler with the [Ivy compiler](https://docs.angular.lat/guide/ivy)
`framework: { name: '@storybook/angular', options: { enableIvy: true } }` | Angular | diff --git a/docs/faq.md b/docs/faq.md index cb0742563f0b..55840449c2fa 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -10,7 +10,6 @@ Here are some answers to frequently asked questions. If you have a question, you - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories) - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs) - [How do I fix module resolution in special environments?](#how-do-i-fix-module-resolution-in-special-environments) -- [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook) - [How do I setup the new React Context Root API with Storybook?](#how-do-i-setup-the-new-react-context-root-api-with-storybook) - [Why is there no addons channel?](#why-is-there-no-addons-channel) - [Why aren't Controls visible in the Canvas panel but visible in Docs?](#why-arent-controls-visible-in-the-canvas-panel-but-visible-in-docs) @@ -133,36 +132,6 @@ To fix this, you can wrap the package name inside your Storybook configuration f -## How do I setup React Fast Refresh with Storybook? - -Fast refresh is an opt-in feature that can be used in Storybook React. -There are two ways that you can enable it, go ahead and pick one: - -- You can set a `FAST_REFRESH` environment variable in your `.env` file: - -``` -FAST_REFRESH=true -``` - -- Or you can set the following properties in your `.storybook/main.js` files: - -```js -export default { - framework: { - name: '@storybook/react-webpack5', - options: { - fastRefresh: true, - }, - }, -}; -``` - - - -Fast Refresh only works in development mode with React 16.10 or higher. - - - ## How do I setup the new React Context Root API with Storybook? If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used. From ce4f3090f220df835f06c7e0accdb2c2cdc2225f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 15:21:09 +0100 Subject: [PATCH 08/52] Remove deprecated code --- code/presets/create-react-app/package.json | 6 +----- code/presets/create-react-app/src/index.ts | 18 +----------------- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 13411ebf33a6..73510cad1cce 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -50,12 +50,9 @@ }, "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", - "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@storybook/types": "workspace:*", - "@types/babel__core": "^7.1.7", "@types/semver": "^7.3.4", - "pnp-webpack-plugin": "^1.7.0", - "semver": "^7.3.5" + "pnp-webpack-plugin": "^1.7.0" }, "devDependencies": { "@storybook/node-logger": "workspace:*", @@ -63,7 +60,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "react-scripts": ">=5.0.0" }, "publishConfig": { diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index a5e16a31ecb4..48bde3883620 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -1,10 +1,8 @@ /* eslint-disable import/no-extraneous-dependencies */ import { join, relative, dirname } from 'path'; import type { Configuration, RuleSetRule, WebpackPluginInstance } from 'webpack'; -import semver from 'semver'; import { logger } from '@storybook/node-logger'; import PnpWebpackPlugin from 'pnp-webpack-plugin'; -import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; import { mergePlugins } from './helpers/mergePlugins'; import { getReactScriptsPath } from './helpers/getReactScriptsPath'; import { processCraConfig } from './helpers/processCraConfig'; @@ -89,19 +87,6 @@ const webpack = async ( logger.info(`=> Modifying Create React App rules.`); const craRules = await processCraConfig(craWebpackConfig, options); - // NOTE: These are set by default in Storybook 6. - const isStorybook6 = semver.gte(options.packageJson.version || '', '6.0.0'); - const { - typescriptOptions = { - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: {}, - }, - } = options; - const tsDocgenPlugin = - !isStorybook6 && typescriptOptions.reactDocgen === 'react-docgen-typescript' - ? [new ReactDocgenTypescriptPlugin(typescriptOptions.reactDocgenTypescriptOptions)] - : []; - // NOTE: This is code replicated from // https://github.com/storybookjs/storybook/blob/89830ad76384faeaeb0c19df3cb44232cdde261b/builders/builder-webpack5/src/preview/base-webpack.config.ts#L45-L53 // as we are not applying SB's default webpack config here. @@ -130,8 +115,7 @@ const webpack = async ( // when there are duplicates between SB and CRA plugins: mergePlugins( ...((webpackConfig.plugins ?? []) as WebpackPluginInstance[]), - ...((craWebpackConfig.plugins ?? []) as WebpackPluginInstance[]), - ...tsDocgenPlugin + ...((craWebpackConfig.plugins ?? []) as WebpackPluginInstance[]) ), resolve: { ...webpackConfig.resolve, From 83a025427fdb2648a68916f0e846977d4354e59d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 16:08:03 +0100 Subject: [PATCH 09/52] Update lock file --- code/yarn.lock | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 44862e0b196e..7d9bc145eec7 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -415,7 +415,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.23.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": version: 7.23.6 resolution: "@babel/core@npm:7.23.6" dependencies: @@ -4148,7 +4148,7 @@ __metadata: languageName: node linkType: hard -"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1, @pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": +"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1": version: 0.5.11 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11" dependencies: @@ -5654,7 +5654,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/core": "npm:7.23.6" "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -6007,7 +6006,7 @@ __metadata: preact: "npm:^10.5.13" typescript: "npm:^5.3.2" peerDependencies: - preact: ^8.0.0||^10.0.0 + preact: ">=10.0.0" languageName: unknown linkType: soft @@ -6032,12 +6031,10 @@ __metadata: dependencies: "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.1" "@storybook/node-logger": "workspace:*" - "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" pnp-webpack-plugin: "npm:^1.7.0" - semver: "npm:^7.3.5" typescript: "npm:^5.3.2" peerDependencies: react-scripts: ">=5.0.0" @@ -6073,7 +6070,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" dependencies: - "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/node-logger": "workspace:*" @@ -6084,7 +6080,6 @@ __metadata: fs-extra: "npm:^11.1.0" magic-string: "npm:^0.30.5" react-docgen: "npm:^7.0.0" - react-refresh: "npm:^0.14.0" semver: "npm:^7.3.7" typescript: "npm:^5.3.2" webpack: "npm:5" From 5023619d9618de540c483fc47bf46f96b9c27922 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 10:32:04 +0100 Subject: [PATCH 10/52] Add custom babel-loader to Next.js --- code/frameworks/nextjs/package.json | 1 + code/frameworks/nextjs/src/babel/loader.ts | 24 ++++++++++++++++++++++ code/frameworks/nextjs/src/preset.ts | 19 ++++++++++------- code/frameworks/nextjs/src/swc/loader.ts | 7 +------ code/yarn.lock | 3 ++- 5 files changed, 40 insertions(+), 14 deletions(-) create mode 100644 code/frameworks/nextjs/src/babel/loader.ts diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index ed10bbe5c119..4b2a7b826abf 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -99,6 +99,7 @@ "@storybook/react": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", + "babel-loader": "^9.1.3", "css-loader": "^6.7.3", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts new file mode 100644 index 000000000000..bed72b3dea46 --- /dev/null +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -0,0 +1,24 @@ +import { getProjectRoot } from '@storybook/core-common'; +import { getVirtualModules } from '@storybook/builder-webpack5'; +import type { Options } from '@storybook/types'; + +export const configureBabelLoader = async (baseConfig: any, options: Options) => { + const { virtualModules } = await getVirtualModules(options); + + const babelOptions = await options.presets.apply('babel', {}, options); + const typescriptOptions = await options.presets.apply('typescript', {}, options); + + baseConfig.module.rules = [ + { + test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: babelOptions, + }, + ], + include: [getProjectRoot()], + exclude: [/node_modules/, ...Object.keys(virtualModules)], + }, + ]; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 5ee5e2e319a5..116627b1cf34 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -4,6 +4,7 @@ import type { PresetProperty } from '@storybook/types'; import type { ConfigItem, PluginItem } from '@babel/core'; import { loadPartialConfig } from '@babel/core'; import { getProjectRoot } from '@storybook/core-common'; +import fs from 'fs'; import { configureConfig } from './config/webpack'; import { configureCss } from './css/webpack'; import { configureImports } from './imports/webpack'; @@ -17,6 +18,7 @@ import { configureNextFont } from './font/webpack/configureNextFont'; import nextBabelPreset from './babel/preset'; import { configureNodePolyfills } from './nodePolyfills/webpack'; import { configureSWCLoader } from './swc/loader'; +import { configureBabelLoader } from './babel/loader'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -78,9 +80,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( return result; }; -// Not even sb init - automigrate - running dev -// You're using a version of Nextjs prior to v10, which is unsupported by this framework. - export const babel: PresetProperty<'babel'> = async (baseConfig) => { const configPartial = loadPartialConfig({ ...baseConfig, @@ -141,14 +140,19 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( 'frameworkOptions' ); - const { options: { nextConfigPath, builder } = {} } = frameworkOptions; + const { options: { nextConfigPath } = {} } = frameworkOptions; const nextConfig = await configureConfig({ baseConfig, nextConfigPath, configDir: options.configDir, }); - configureNextFont(baseConfig, builder?.useSWC); + const babelRCPath = join(getProjectRoot(), '.babelrc'); + const hasBabelConfig = fs.existsSync(babelRCPath); + + const useSWC = nextConfig.experimental?.forceSwcTransforms ?? hasBabelConfig; + + configureNextFont(baseConfig, useSWC); configureRuntimeNextjsVersionResolution(baseConfig); configureImports({ baseConfig, configDir: options.configDir }); configureCss(baseConfig, nextConfig); @@ -160,9 +164,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureRSC(baseConfig); } - // TODO: In Storybook 8.0, we have to check whether the babel-compiler addon is used. Otherwise, swc should be used. - if (builder?.useSWC) { + if (useSWC) { await configureSWCLoader(baseConfig, options, nextConfig); + } else { + await configureBabelLoader(baseConfig, options); } return baseConfig; diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 2d25ce1be28f..cfc6c322380b 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -3,7 +3,6 @@ import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; -import type { RuleSetRule } from 'webpack'; export const configureSWCLoader = async ( baseConfig: any, @@ -17,12 +16,8 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); baseConfig.module.rules = [ - // TODO: Remove filtering in Storybook 8.0 - ...baseConfig.module.rules.filter((r: RuleSetRule) => { - return !r.loader?.includes('swc-loader'); - }), { - test: /\.(m?(j|t)sx?)$/, + test: /\.((c|m)?(j|t)sx?)$/, include: [getProjectRoot()], exclude: [/(node_modules)/, ...Object.keys(virtualModules)], enforce: 'post', diff --git a/code/yarn.lock b/code/yarn.lock index 7d9bc145eec7..a2b59c2f0dba 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5931,6 +5931,7 @@ __metadata: "@types/loader-utils": "npm:^2.0.5" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" + babel-loader: "npm:^9.1.3" css-loader: "npm:^6.7.3" find-up: "npm:^5.0.0" fs-extra: "npm:^11.1.0" @@ -9889,7 +9890,7 @@ __metadata: languageName: node linkType: hard -"babel-loader@npm:9.1.3": +"babel-loader@npm:9.1.3, babel-loader@npm:^9.1.3": version: 9.1.3 resolution: "babel-loader@npm:9.1.3" dependencies: From 75a093716067a5262126f7646976f5affd9a7538 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 11:36:48 +0100 Subject: [PATCH 11/52] Readd babel-plugin-react-docgen for testing purposes --- code/lib/docs-tools/package.json | 1 + code/renderers/react/package.json | 2 + code/yarn.lock | 157 ++++++++++++++++++++++++------ 3 files changed, 131 insertions(+), 29 deletions(-) diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 8bc90fac3e44..0a0f9d0bd87b 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -53,6 +53,7 @@ "lodash": "^4.17.21" }, "devDependencies": { + "babel-plugin-react-docgen": "4.2.1", "require-from-string": "^2.0.2", "typescript": "^5.3.2" }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 08b885f3fecb..47ce3d563aa3 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -70,7 +70,9 @@ }, "devDependencies": { "@storybook/test": "workspace:*", + "@types/babel-plugin-react-docgen": "^4", "@types/util-deprecate": "^1.0.0", + "babel-plugin-react-docgen": "^4.2.1", "expect-type": "^0.15.0", "require-from-string": "^2.0.2" }, diff --git a/code/yarn.lock b/code/yarn.lock index a2b59c2f0dba..acc4ba37c9ed 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -415,7 +415,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.23.6 resolution: "@babel/core@npm:7.23.6" dependencies: @@ -450,7 +450,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.6": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -2202,43 +2202,43 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": - version: 7.23.2 - resolution: "@babel/traverse@npm:7.23.2" +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/traverse@npm:7.23.6" dependencies: - "@babel/code-frame": "npm:^7.22.13" - "@babel/generator": "npm:^7.23.0" + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" - debug: "npm:^4.1.0" + "@babel/parser": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff + checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d languageName: node linkType: hard -"@babel/traverse@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/traverse@npm:7.23.6" +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": + version: 7.23.2 + resolution: "@babel/traverse@npm:7.23.2" dependencies: - "@babel/code-frame": "npm:^7.23.5" - "@babel/generator": "npm:^7.23.6" + "@babel/code-frame": "npm:^7.22.13" + "@babel/generator": "npm:^7.23.0" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.6" - "@babel/types": "npm:^7.23.6" - debug: "npm:^4.3.1" + "@babel/parser": "npm:^7.23.0" + "@babel/types": "npm:^7.23.0" + debug: "npm:^4.1.0" globals: "npm:^11.1.0" - checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d + checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" dependencies: @@ -3307,7 +3307,7 @@ __metadata: languageName: node linkType: hard -"@istanbuljs/schema@npm:^0.1.2": +"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3": version: 0.1.3 resolution: "@istanbuljs/schema@npm:0.1.3" checksum: 61c5286771676c9ca3eb2bd8a7310a9c063fb6e0e9712225c8471c582d157392c88f5353581c8c9adbe0dff98892317d2fdfc56c3499aa42e0194405206a963a @@ -5659,6 +5659,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" assert: "npm:^2.1.0" + babel-plugin-react-docgen: "npm:4.2.1" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" require-from-string: "npm:^2.0.2" @@ -6268,6 +6269,7 @@ __metadata: "@storybook/react-dom-shim": "workspace:*" "@storybook/test": "workspace:*" "@storybook/types": "workspace:*" + "@types/babel-plugin-react-docgen": "npm:^4" "@types/escodegen": "npm:^0.0.6" "@types/estree": "npm:^0.0.51" "@types/node": "npm:^18.0.0" @@ -6275,6 +6277,7 @@ __metadata: acorn: "npm:^7.4.1" acorn-jsx: "npm:^5.3.1" acorn-walk: "npm:^7.2.0" + babel-plugin-react-docgen: "npm:^4.2.1" escodegen: "npm:^2.1.0" expect-type: "npm:^0.15.0" html-tags: "npm:^3.1.0" @@ -7207,6 +7210,13 @@ __metadata: languageName: node linkType: hard +"@types/babel-plugin-react-docgen@npm:^4": + version: 4.2.3 + resolution: "@types/babel-plugin-react-docgen@npm:4.2.3" + checksum: 4f18ab888a5268076e1b09345b39cf6b378cf780e38dadad554101782bb365018f6f630acd6fc2990f35131490d3e1bdea338447d2dc6e991e97442420e767ce + languageName: node + linkType: hard + "@types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" @@ -9704,7 +9714,7 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.14.2, ast-types@npm:^0.14.1": +"ast-types@npm:0.14.2, ast-types@npm:^0.14.1, ast-types@npm:^0.14.2": version: 0.14.2 resolution: "ast-types@npm:0.14.2" dependencies: @@ -10015,6 +10025,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-react-docgen@npm:4.2.1, babel-plugin-react-docgen@npm:^4.2.1": + version: 4.2.1 + resolution: "babel-plugin-react-docgen@npm:4.2.1" + dependencies: + ast-types: "npm:^0.14.2" + lodash: "npm:^4.17.15" + react-docgen: "npm:^5.0.0" + checksum: 9f7af20e6ebd794beae14aa1ffe4f1c1c5855821a5a9f205099602c89b557e33b9cb3dc3fe0b3a2f2ca35007c6ab45f52da9695a681d8495ad0f5494ef78ec34 + languageName: node + linkType: hard + "babel-plugin-transform-hook-names@npm:^1.0.2": version: 1.0.2 resolution: "babel-plugin-transform-hook-names@npm:1.0.2" @@ -10830,6 +10851,28 @@ __metadata: languageName: node linkType: hard +"c8@npm:^7.6.0": + version: 7.14.0 + resolution: "c8@npm:7.14.0" + dependencies: + "@bcoe/v8-coverage": "npm:^0.2.3" + "@istanbuljs/schema": "npm:^0.1.3" + find-up: "npm:^5.0.0" + foreground-child: "npm:^2.0.0" + istanbul-lib-coverage: "npm:^3.2.0" + istanbul-lib-report: "npm:^3.0.0" + istanbul-reports: "npm:^3.1.4" + rimraf: "npm:^3.0.2" + test-exclude: "npm:^6.0.0" + v8-to-istanbul: "npm:^9.0.0" + yargs: "npm:^16.2.0" + yargs-parser: "npm:^20.2.9" + bin: + c8: bin/c8.js + checksum: 8946f55f2dcc85bf146f429a3deeede78502da245e515a2d181342475d8d8698b4055ec1d9b887ab8e1615f49c1a2af4d63557e68b2005844572fb785991e148 + languageName: node + linkType: hard + "cac@npm:^6.7.14": version: 6.7.14 resolution: "cac@npm:6.7.14" @@ -11590,7 +11633,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^2.18.0, commander@npm:^2.2.0, commander@npm:^2.20.0": +"commander@npm:^2.18.0, commander@npm:^2.19.0, commander@npm:^2.2.0, commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" checksum: 74c781a5248c2402a0a3e966a0a2bba3c054aad144f5c023364be83265e796b20565aa9feff624132ff629aa64e16999fa40a743c10c12f7c61e96a794b99288 @@ -14209,6 +14252,17 @@ __metadata: languageName: node linkType: hard +"estree-to-babel@npm:^3.1.0": + version: 3.2.1 + resolution: "estree-to-babel@npm:3.2.1" + dependencies: + "@babel/traverse": "npm:^7.1.6" + "@babel/types": "npm:^7.2.0" + c8: "npm:^7.6.0" + checksum: c7949b141f569528b2608ab715d593a04f7e2e529df04e0b595d0a7dea819b410e71d1f04716e43ac1480942afc5701cb5151ad2906ee8402969651a389881bb + languageName: node + linkType: hard + "estree-util-is-identifier-name@npm:^2.0.0": version: 2.1.0 resolution: "estree-util-is-identifier-name@npm:2.1.0" @@ -15049,6 +15103,16 @@ __metadata: languageName: node linkType: hard +"foreground-child@npm:^2.0.0": + version: 2.0.0 + resolution: "foreground-child@npm:2.0.0" + dependencies: + cross-spawn: "npm:^7.0.0" + signal-exit: "npm:^3.0.2" + checksum: 6719982783a448162f9a01500757fb2053bc5dcd4d67c7cd30739b38ccc01b39f84e408c30989d1d8774519c021c0498e2450ab127690fb09d7f2568fd94ffcc + languageName: node + linkType: hard + "foreground-child@npm:^3.1.0": version: 3.1.1 resolution: "foreground-child@npm:3.1.1" @@ -17634,7 +17698,7 @@ __metadata: languageName: node linkType: hard -"istanbul-reports@npm:^3.1.6": +"istanbul-reports@npm:^3.1.4, istanbul-reports@npm:^3.1.6": version: 3.1.6 resolution: "istanbul-reports@npm:3.1.6" dependencies: @@ -20652,7 +20716,7 @@ __metadata: languageName: node linkType: hard -"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2": +"neo-async@npm:^2.5.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2": version: 2.6.2 resolution: "neo-async@npm:2.6.2" checksum: c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d @@ -20784,7 +20848,7 @@ __metadata: languageName: node linkType: hard -"node-dir@npm:^0.1.17": +"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" dependencies: @@ -23268,6 +23332,26 @@ __metadata: languageName: node linkType: hard +"react-docgen@npm:^5.0.0": + version: 5.4.3 + resolution: "react-docgen@npm:5.4.3" + dependencies: + "@babel/core": "npm:^7.7.5" + "@babel/generator": "npm:^7.12.11" + "@babel/runtime": "npm:^7.7.6" + ast-types: "npm:^0.14.2" + commander: "npm:^2.19.0" + doctrine: "npm:^3.0.0" + estree-to-babel: "npm:^3.1.0" + neo-async: "npm:^2.6.1" + node-dir: "npm:^0.1.10" + strip-indent: "npm:^3.0.0" + bin: + react-docgen: bin/react-docgen.js + checksum: c920e9611e08317f8fdae707114cf02baaa18e2f1bd23ed18f57e66b9e1042e51dc98cc9de828b03d018ccc4e26300c9a6c4f74e862fc94dc64029267c801a01 + languageName: node + linkType: hard + "react-docgen@npm:^7.0.0": version: 7.0.1 resolution: "react-docgen@npm:7.0.1" @@ -27954,7 +28038,7 @@ __metadata: languageName: node linkType: hard -"v8-to-istanbul@npm:^9.2.0": +"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.2.0": version: 9.2.0 resolution: "v8-to-istanbul@npm:9.2.0" dependencies: @@ -29304,7 +29388,7 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^20.2.2": +"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.9": version: 20.2.9 resolution: "yargs-parser@npm:20.2.9" checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72 @@ -29378,6 +29462,21 @@ __metadata: languageName: node linkType: hard +"yargs@npm:^16.2.0": + version: 16.2.0 + resolution: "yargs@npm:16.2.0" + dependencies: + cliui: "npm:^7.0.2" + escalade: "npm:^3.1.1" + get-caller-file: "npm:^2.0.5" + require-directory: "npm:^2.1.1" + string-width: "npm:^4.2.0" + y18n: "npm:^5.0.5" + yargs-parser: "npm:^20.2.2" + checksum: b1dbfefa679848442454b60053a6c95d62f2d2e21dd28def92b647587f415969173c6e99a0f3bab4f1b67ee8283bf735ebe3544013f09491186ba9e8a9a2b651 + languageName: node + linkType: hard + "yn@npm:3.1.1": version: 3.1.1 resolution: "yn@npm:3.1.1" From c1d748ae4c2cca49463d620b6fadff97c2da01de Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 11:40:27 +0100 Subject: [PATCH 12/52] Only use swc mode in Next.js for version gte 14 --- code/frameworks/nextjs/src/preset.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 116627b1cf34..fe2b2040aae8 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -5,13 +5,14 @@ import type { ConfigItem, PluginItem } from '@babel/core'; import { loadPartialConfig } from '@babel/core'; import { getProjectRoot } from '@storybook/core-common'; import fs from 'fs'; +import semver from 'semver'; import { configureConfig } from './config/webpack'; import { configureCss } from './css/webpack'; import { configureImports } from './imports/webpack'; import { configureStyledJsx } from './styledJsx/webpack'; import { configureImages } from './images/webpack'; import { configureRSC } from './rsc/webpack'; -import { configureRuntimeNextjsVersionResolution } from './utils'; +import { configureRuntimeNextjsVersionResolution, getNextjsVersion } from './utils'; import type { FrameworkOptions, StorybookConfig } from './types'; import TransformFontImports from './font/babel'; import { configureNextFont } from './font/webpack/configureNextFont'; @@ -149,8 +150,11 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const babelRCPath = join(getProjectRoot(), '.babelrc'); const hasBabelConfig = fs.existsSync(babelRCPath); + const nextjsVersion = getNextjsVersion(); - const useSWC = nextConfig.experimental?.forceSwcTransforms ?? hasBabelConfig; + const isNext14orNewer = semver.gte(nextjsVersion, '14.0.0'); + const useSWC = + isNext14orNewer && (nextConfig.experimental?.forceSwcTransforms ?? !hasBabelConfig); configureNextFont(baseConfig, useSWC); configureRuntimeNextjsVersionResolution(baseConfig); From df14928923e1d04973997b94a93c9adf1109159b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 12:48:48 +0100 Subject: [PATCH 13/52] Readd webpack module.rules to babel and swc loader configuration --- code/frameworks/nextjs/src/babel/loader.ts | 1 + code/frameworks/nextjs/src/swc/loader.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts index bed72b3dea46..90d383ea332c 100644 --- a/code/frameworks/nextjs/src/babel/loader.ts +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -9,6 +9,7 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) => const typescriptOptions = await options.presets.apply('typescript', {}, options); baseConfig.module.rules = [ + ...baseConfig.module.rules, { test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, use: [ diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index cfc6c322380b..de7e476ca401 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -16,6 +16,7 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); baseConfig.module.rules = [ + ...baseConfig.module.rules, { test: /\.((c|m)?(j|t)sx?)$/, include: [getProjectRoot()], From f164cd159acd718be211c06366308c673df3e16f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 12:56:44 +0100 Subject: [PATCH 14/52] Fix build step --- code/frameworks/nextjs/package.json | 1 + code/frameworks/nextjs/src/preset.ts | 4 ++-- code/presets/preact-webpack/src/index.ts | 1 + code/presets/react-webpack/package.json | 1 - code/yarn.lock | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4b2a7b826abf..7a7b443fc162 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -97,6 +97,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/types": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.1.3", diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index fe2b2040aae8..cce426e8b1e4 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -1,7 +1,7 @@ // https://storybook.js.org/docs/react/addons/writing-presets import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; -import type { ConfigItem, PluginItem } from '@babel/core'; +import type { ConfigItem, PluginItem, TransformOptions } from '@babel/core'; import { loadPartialConfig } from '@babel/core'; import { getProjectRoot } from '@storybook/core-common'; import fs from 'fs'; @@ -81,7 +81,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( return result; }; -export const babel: PresetProperty<'babel'> = async (baseConfig) => { +export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOptions) => { const configPartial = loadPartialConfig({ ...baseConfig, filename: `${getProjectRoot()}/__fake__.js`, diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts index 74240af2255c..ad2b259fd6ad 100644 --- a/code/presets/preact-webpack/src/index.ts +++ b/code/presets/preact-webpack/src/index.ts @@ -1,4 +1,5 @@ import { dirname, join } from 'path'; +import type { PresetProperty } from 'lib/types/dist'; import type { StorybookConfig } from './types'; export * from './types'; diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index eab6e3eb3475..b80bb48d3416 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -100,7 +100,6 @@ "./src/index.ts", "./src/framework-preset-cra.ts", "./src/framework-preset-react-docs.ts", - "./src/framework-preset-react.ts", "./src/loaders/react-docgen-loader.ts" ], "platform": "node" diff --git a/code/yarn.lock b/code/yarn.lock index acc4ba37c9ed..7b74a1f9ce4d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5926,6 +5926,7 @@ __metadata: "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/types": "workspace:*" "@types/babel__core": "npm:^7" "@types/babel__plugin-transform-runtime": "npm:^7" "@types/babel__preset-env": "npm:^7" From ec5c571432e2eff595d1a013cb47f9b8c6837d7d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 14:30:03 +0100 Subject: [PATCH 15/52] Implement fast refresh for Next.js --- code/frameworks/nextjs/package.json | 3 +++ code/frameworks/nextjs/src/babel/preset.ts | 1 + .../nextjs/src/fastRefresh/webpack.ts | 13 +++++++++++++ code/frameworks/nextjs/src/preset.ts | 6 ++++++ code/frameworks/nextjs/src/swc/loader.ts | 2 +- code/yarn.lock | 17 +++++++++++++++-- 6 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 code/frameworks/nextjs/src/fastRefresh/webpack.ts diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7a7b443fc162..bd7cce325470 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -89,6 +89,7 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.2", "@babel/runtime": "^7.23.2", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", @@ -110,6 +111,7 @@ "pnp-webpack-plugin": "^1.7.0", "postcss": "^8.4.21", "postcss-loader": "^7.0.2", + "react-refresh": "^0.14.0", "resolve-url-loader": "^5.0.0", "sass-loader": "^12.4.0", "semver": "^7.3.5", @@ -126,6 +128,7 @@ "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", "@types/loader-utils": "^2.0.5", + "@types/react-refresh": "^0", "next": "^14.0.2", "typescript": "^5.3.2", "webpack": "^5.65.0" diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts index 46dddd1d1659..c21e7e281caf 100644 --- a/code/frameworks/nextjs/src/babel/preset.ts +++ b/code/frameworks/nextjs/src/babel/preset.ts @@ -120,6 +120,7 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset => ], ], plugins: [ + isDevelopment && require.resolve('react-refresh/babel'), !useJsxRuntime && [ require('./plugins/jsx-pragma'), { diff --git a/code/frameworks/nextjs/src/fastRefresh/webpack.ts b/code/frameworks/nextjs/src/fastRefresh/webpack.ts new file mode 100644 index 000000000000..83e91518383d --- /dev/null +++ b/code/frameworks/nextjs/src/fastRefresh/webpack.ts @@ -0,0 +1,13 @@ +import type { Configuration as WebpackConfig } from 'webpack'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; + +export const configureFastRefresh = (baseConfig: WebpackConfig): void => { + baseConfig.plugins = [ + ...(baseConfig.plugins ?? []), + new ReactRefreshWebpackPlugin({ + overlay: { + sockIntegration: 'whm', + }, + }), + ]; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index cce426e8b1e4..da332d81e4ef 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -20,6 +20,7 @@ import nextBabelPreset from './babel/preset'; import { configureNodePolyfills } from './nodePolyfills/webpack'; import { configureSWCLoader } from './swc/loader'; import { configureBabelLoader } from './babel/loader'; +import { configureFastRefresh } from './fastRefresh/webpack'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -151,6 +152,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const babelRCPath = join(getProjectRoot(), '.babelrc'); const hasBabelConfig = fs.existsSync(babelRCPath); const nextjsVersion = getNextjsVersion(); + const isDevelopment = options.configType !== 'PRODUCTION'; const isNext14orNewer = semver.gte(nextjsVersion, '14.0.0'); const useSWC = @@ -164,6 +166,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); + if (isDevelopment) { + configureFastRefresh(baseConfig); + } + if (options.features?.experimentalNextRSC) { configureRSC(baseConfig); } diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index de7e476ca401..255305d0b713 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -31,7 +31,7 @@ export const configureSWCLoader = async ( rootDir: dir, pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, - hasReactRefresh: false, + hasReactRefresh: isDevelopment, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/yarn.lock b/code/yarn.lock index 7b74a1f9ce4d..c5ba2b8e9500 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4148,7 +4148,7 @@ __metadata: languageName: node linkType: hard -"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1": +"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1, @pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": version: 0.5.11 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11" dependencies: @@ -5918,6 +5918,7 @@ __metadata: "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" + "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" @@ -5932,6 +5933,7 @@ __metadata: "@types/babel__preset-env": "npm:^7" "@types/loader-utils": "npm:^2.0.5" "@types/node": "npm:^18.0.0" + "@types/react-refresh": "npm:^0" "@types/semver": "npm:^7.3.4" babel-loader: "npm:^9.1.3" css-loader: "npm:^6.7.3" @@ -5944,6 +5946,7 @@ __metadata: pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" postcss-loader: "npm:^7.0.2" + react-refresh: "npm:^0.14.0" resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" @@ -7218,7 +7221,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": +"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -7932,6 +7935,16 @@ __metadata: languageName: node linkType: hard +"@types/react-refresh@npm:^0": + version: 0.14.5 + resolution: "@types/react-refresh@npm:0.14.5" + dependencies: + "@types/babel__core": "npm:*" + csstype: "npm:^3.0.2" + checksum: 7fc9e1a2b5bc096ba2259b5df9dc036b330d1791bb9fc27b6426db7f2c86be42449713e09f0244d82ecdf596c45bead8feccac032ef0efe4853cb2086ee1ffbe + languageName: node + linkType: hard + "@types/react-syntax-highlighter@npm:11.0.5": version: 11.0.5 resolution: "@types/react-syntax-highlighter@npm:11.0.5" From b03d4830c3d8dffcbdbce60a559a22acb1338447 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 12:48:56 +0100 Subject: [PATCH 16/52] Add custom babel-loader to Ember.js --- code/frameworks/ember/package.json | 9 +- code/frameworks/ember/src/preset.ts | 32 +- .../server/framework-preset-babel-ember.ts | 55 ++++ code/yarn.lock | 296 ++++++++++-------- 4 files changed, 257 insertions(+), 135 deletions(-) create mode 100644 code/frameworks/ember/src/server/framework-preset-babel-ember.ts diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index f8b74eceeb04..4c80543bd856 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -32,23 +32,26 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { + "@babel/core": "^7.23.7", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", + "babel-loader": "9.1.3", + "babel-plugin-ember-modules-api-polyfill": "^3.5.0", + "babel-plugin-htmlbars-inline-precompile": "^5.3.1", "find-up": "^5.0.0", "ts-dedent": "^2.0.0" }, "devDependencies": { + "@types/babel__preset-env": "^7", "ember-source": "~3.28.1", "typescript": "^5.3.2" }, "peerDependencies": { - "ember-source": "~3.28.1 || ^4.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "ember-source": "~3.28.1 || ^4.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 1638022a7856..00b3d2bd1564 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -1,17 +1,43 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; +import { getVirtualModules } from '@storybook/builder-webpack5'; +import { getProjectRoot } from '@storybook/core-common'; import type { StorybookConfig } from './types'; -import { findDistFile } from './util'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons'> = [ + require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs'), ]; -export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - return [...entry, findDistFile(__dirname, 'client/preview/config')]; +export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => { + const { virtualModules } = await getVirtualModules(options); + + const babelOptions = await options.presets.apply('babel', {}, options); + const typescriptOptions = await options.presets.apply('typescript', {}, options); + + return { + ...baseConfig, + module: { + ...baseConfig.module, + rules: [ + ...(baseConfig.module?.rules ?? []), + { + test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: babelOptions, + }, + ], + include: [getProjectRoot()], + exclude: [/node_modules/, ...Object.keys(virtualModules)], + }, + ], + }, + }; }; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { diff --git a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts new file mode 100644 index 000000000000..da5a524cc796 --- /dev/null +++ b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts @@ -0,0 +1,55 @@ +import { precompile } from 'ember-source/dist/ember-template-compiler'; +import type { PresetProperty, PresetPropertyFn } from '@storybook/types'; +import type { TransformOptions } from '@babel/core'; +import { findDistFile } from '../util'; + +let emberOptions: any; + +function precompileWithPlugins(string: string, options: any) { + const precompileOptions: any = options; + if (emberOptions && emberOptions.polyfills) { + precompileOptions.plugins = { ast: emberOptions.polyfills }; + } + + return precompile(string, precompileOptions); +} + +export const babel: PresetPropertyFn<'babel'> = (config: TransformOptions, options) => { + if (options && options.presetsList) { + options.presetsList.forEach((e: any, index: number) => { + if (e.preset && e.preset.emberOptions) { + emberOptions = e.preset.emberOptions; + if (options.presetsList) { + // eslint-disable-next-line no-param-reassign + delete options.presetsList[index].preset.emberOptions; + } + } + }); + } + + const babelConfigPlugins = config?.plugins || []; + + const extraPlugins = [ + [ + require.resolve('babel-plugin-htmlbars-inline-precompile'), + { + precompile: precompileWithPlugins, + modules: { + 'ember-cli-htmlbars': 'hbs', + 'ember-cli-htmlbars-inline-precompile': 'default', + 'htmlbars-inline-precompile': 'default', + }, + }, + ], + [require.resolve('babel-plugin-ember-modules-api-polyfill')], + ]; + + return { + ...config, + plugins: [...babelConfigPlugins, ...extraPlugins], + }; +}; + +export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { + return [...entry, findDistFile(__dirname, 'client/preview/config')]; +}; diff --git a/code/yarn.lock b/code/yarn.lock index c5ba2b8e9500..c29697995fbe 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -392,7 +392,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.23.2, @babel/core@npm:^7.23.2": +"@babel/core@npm:7.23.2": version: 7.23.2 resolution: "@babel/core@npm:7.23.2" dependencies: @@ -415,30 +415,30 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": - version: 7.23.6 - resolution: "@babel/core@npm:7.23.6" +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.7, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": + version: 7.23.7 + resolution: "@babel/core@npm:7.23.7" dependencies: "@ampproject/remapping": "npm:^2.2.0" "@babel/code-frame": "npm:^7.23.5" "@babel/generator": "npm:^7.23.6" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helpers": "npm:^7.23.6" + "@babel/helpers": "npm:^7.23.7" "@babel/parser": "npm:^7.23.6" "@babel/template": "npm:^7.22.15" - "@babel/traverse": "npm:^7.23.6" + "@babel/traverse": "npm:^7.23.7" "@babel/types": "npm:^7.23.6" convert-source-map: "npm:^2.0.0" debug: "npm:^4.1.0" gensync: "npm:^1.0.0-beta.2" json5: "npm:^2.2.3" semver: "npm:^6.3.1" - checksum: a02bae7d916029b70706dc301535e1b31e5d216f55d4ee6f64a15825c6b69ee2c14c52a213d1497ec414e925ed4e9d897d41fb0d75df9fea28ed2c0008790e31 + checksum: 38c9934973d384ed83369712978453eac91dc3f22167404dbdb272b64f602e74728a6f37012c53ee57e521b8ae2da60097f050497d9b6a212d28b59cdfb2cd1d languageName: node linkType: hard -"@babel/generator@npm:7.23.0, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2": +"@babel/generator@npm:7.23.0": version: 7.23.0 resolution: "@babel/generator@npm:7.23.0" dependencies: @@ -450,7 +450,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.6": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -493,9 +493,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/helper-create-class-features-plugin@npm:7.23.5" +"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6, @babel/helper-create-class-features-plugin@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/helper-create-class-features-plugin@npm:7.23.7" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-environment-visitor": "npm:^7.22.20" @@ -508,7 +508,7 @@ __metadata: semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0 - checksum: a29bd03725630dcf2f094b7e3fe45c63984e63a5d092ceffec2da9d95c108afcc073863d6e9c0fb944d07f3cde5ebac4bba833473ca96af5e949f7d471154901 + checksum: f594e99f97211bda5530756712751c1c4ce6063bb376f1f38cc540309a086bd0f4b62aff969ddb29e7310e936c2d3745934a2b292c4710be8112e57fbe3f3381 languageName: node linkType: hard @@ -525,9 +525,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.4.3": - version: 0.4.3 - resolution: "@babel/helper-define-polyfill-provider@npm:0.4.3" +"@babel/helper-define-polyfill-provider@npm:^0.4.3, @babel/helper-define-polyfill-provider@npm:^0.4.4": + version: 0.4.4 + resolution: "@babel/helper-define-polyfill-provider@npm:0.4.4" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -536,7 +536,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 0007035157e0d32ee9cb4ca319b89d6f3705523383efe52a59eb3d4dfa2ed08c5147e49c10a6e6d69c15221d89c76c8e5875475d6710fb44a5c37b8e69388e40 + checksum: 60126f5f719b9e2114df62e3bf3ac0797b71d8dc733db60192eb169b004fde72ee309fa5848c5fdfe98b8e8863c46f55e16da5aa8a4e420b4d2670cd0c5dd708 languageName: node linkType: hard @@ -700,25 +700,14 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.23.2": - version: 7.23.2 - resolution: "@babel/helpers@npm:7.23.2" +"@babel/helpers@npm:^7.23.2, @babel/helpers@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/helpers@npm:7.23.7" dependencies: "@babel/template": "npm:^7.22.15" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - checksum: 3a6a939c5277a27486e7c626812f0643b35d1c053ac2eb66911f5ae6c0a4e4bcdd40750eba36b766b0ee8a753484287f50ae56232a5f8f2947116723e44b9e35 - languageName: node - linkType: hard - -"@babel/helpers@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/helpers@npm:7.23.6" - dependencies: - "@babel/template": "npm:^7.22.15" - "@babel/traverse": "npm:^7.23.6" + "@babel/traverse": "npm:^7.23.7" "@babel/types": "npm:^7.23.6" - checksum: df1cf6607676ad36f52f652ec03536f2732d70aef5e76dba5c964e34d49f3c2d3dcf9fb3740db359f53071d74b64606a833d5ba156f79f437f71bfe06e2e7e19 + checksum: f74a61ad28a1bc1fdd9133ad571c07787b66d6db017c707b87c203b0cd06879cea8b33e9c6a8585765a4949efa5df3cc9e19b710fe867f11be38ee29fd4a0488 languageName: node linkType: hard @@ -766,15 +755,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.3" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0 - checksum: 0f43b74741d50e637ba4dcef2786621126fe4da6ccf4ee2e94423ee23f6a04ecd91d458e59764c43e4968be139e5197ee43be8a2fea2c09f0b202a3391e548cc + checksum: 355746e21ad7f43e4f4daef54cfe2ef461ecd19446b2afedd53c39df1bf9aa2eeeeaabee2279b1321de89a97c9360e4f76e9ba950fee50ff1676c25f6929d625 languageName: node linkType: hard @@ -791,17 +780,15 @@ __metadata: linkType: hard "@babel/plugin-proposal-decorators@npm:^7.13.5": - version: 7.23.0 - resolution: "@babel/plugin-proposal-decorators@npm:7.23.0" + version: 7.23.7 + resolution: "@babel/plugin-proposal-decorators@npm:7.23.7" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" + "@babel/helper-create-class-features-plugin": "npm:^7.23.7" "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/plugin-syntax-decorators": "npm:^7.22.10" + "@babel/plugin-syntax-decorators": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 983e7113f9ca3b2ae632869f71accec48cb652d68840697c3977071d44879657ca6b4427ed02e76e448e385d0feca9bd3d40edfaf1530c6c6c25fe8b97d46689 + checksum: 49457b186d3ac5130ed27bc3af1fcfbca495d6e68ad9e800cd0cfefc0720158563db170ca5c99f03cfe12ff2affc088eeaba7d766b2d9c0538e2a85e21e557ed languageName: node linkType: hard @@ -909,14 +896,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-decorators@npm:^7.22.10": - version: 7.22.10 - resolution: "@babel/plugin-syntax-decorators@npm:7.22.10" +"@babel/plugin-syntax-decorators@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-syntax-decorators@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: cf606ef13ed98b3adf560ede27a873c0ab37e884c762a6f15493c881f5a78b67f24dcdd5c70e8cd8f39dbe4b23475cb98619729812f29feb2dcc241130195e7c + checksum: 86299c050b0a5b6565d6b9e3529f2d6dca4780215ab88050bdd0ae9a576868a17f9cd1e140857089cc5d06bdfeb89f0711285f99481b82316896a552a62e449f languageName: node linkType: hard @@ -942,14 +929,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-flow@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-syntax-flow@npm:7.22.5" +"@babel/plugin-syntax-flow@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-syntax-flow@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 07afc7df02141597968532bfbfa3f6c0ad21a2bdd885d0e5e035dcf60fdf35f0995631c9750b464e1a6f2feea14160a82787f914e88e8f7115dc99f09853e43e + checksum: 8a5e1e8b6a3728a2c8fe6d70c09a43642e737d9c0485e1b041cd3a6021ef05376ec3c9137be3b118c622ba09b5770d26fdc525473f8d06d4ab9e46de2783dd0a languageName: node linkType: hard @@ -1144,9 +1131,9 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.2, @babel/plugin-transform-async-generator-functions@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.4" +"@babel/plugin-transform-async-generator-functions@npm:^7.23.2, @babel/plugin-transform-async-generator-functions@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.7" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -1154,7 +1141,7 @@ __metadata: "@babel/plugin-syntax-async-generators": "npm:^7.8.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: f2eef4de609975a3f7da7832576b5ffc93e43c80f87e1a99e886b0f8591096cfc4c37e2d5f52fdeaa2a9c09a25a59f3e621159abaca75d3193922a5c0e4cbe0c + checksum: 63d314edc9fbeaf2700745ca0e19bf9840e87f2d7d1f6c5638e06d2aec3e7418d0d7493ed09087e2fe369cc15e9d96c113fb2cd367cb5e3ff922e3712c27b7d4 languageName: node linkType: hard @@ -1332,15 +1319,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-flow-strip-types@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-flow-strip-types@npm:7.22.5" +"@babel/plugin-transform-flow-strip-types@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-transform-flow-strip-types@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/plugin-syntax-flow": "npm:^7.22.5" + "@babel/plugin-syntax-flow": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 5949a8e5214e3fc65d31dab0551423cea9d9eef35faa5d0004707ba7347baf96166aa400907ce7498f754db4e1e9d039ca434a508546b0dc9fdae9a42e814c1a + checksum: 9ab627f9668fc1f95564b26bffd6706f86205960d9ccc168236752fbef65dbe10aa0ce74faae12f48bb3b72ec7f38ef2a78b4874c222c1e85754e981639f3b33 languageName: node linkType: hard @@ -1514,13 +1501,13 @@ __metadata: linkType: hard "@babel/plugin-transform-object-assign@npm:^7.8.3": - version: 7.22.5 - resolution: "@babel/plugin-transform-object-assign@npm:7.22.5" + version: 7.23.3 + resolution: "@babel/plugin-transform-object-assign@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: c80ca956ccc45c68a6f35e8aea80e08c0a653e4baf243727d4258f242d312d71be20e3fad35a1f2cd9d58b30dcbb5cdf5f8d6c6614a3f8c6079d90f9b1dadee6 + checksum: 44467e8bd8eaae3fe54834dac9d1647d2b2598529a90722281832f6905d485c05e37b5fbd6fd7660c5d2e32e6f005824cda8a9321ddac2e2d619536fafc9783c languageName: node linkType: hard @@ -1647,24 +1634,24 @@ __metadata: linkType: hard "@babel/plugin-transform-react-jsx-self@npm:^7.18.6": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-self@npm:7.22.5" + version: 7.23.3 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 263091bdede1f448cb2c59b84eb69972c15d3f022c929a75337bd20d8b65551ac38cd26dad1946eaa93289643506b10ddaea3445a28cb8fca5a773a22a0df90b + checksum: 6b586508fc58998483d4ee93a7e784c4f4d2350e2633739cf1990b7ad172e13906f72382fdaf7f07b4e3c7e7555342634d392bdeb1a079bb64762c6368ca9a32 languageName: node linkType: hard "@babel/plugin-transform-react-jsx-source@npm:^7.19.6": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5" + version: 7.23.3 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: defc9debb76b4295e3617ef7795a0533dbbecef6f51bf5ba4bfc162df892a84fd39e14d5f1b9a5aad7b09b97074fef4c6756f9d2036eef5a9874acabe198f75a + checksum: a3aad7cf738e9bfaddc26cdbb83bb9684c2e689d26fb0793d772af0c8da0cd25bb02523d192fbc6946c32143e56b472c1d33fa82466b3f2d3346e1ce8fe83cf6 languageName: node linkType: hard @@ -1735,18 +1722,18 @@ __metadata: linkType: hard "@babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.23.2": - version: 7.23.6 - resolution: "@babel/plugin-transform-runtime@npm:7.23.6" + version: 7.23.7 + resolution: "@babel/plugin-transform-runtime@npm:7.23.7" dependencies: "@babel/helper-module-imports": "npm:^7.22.15" "@babel/helper-plugin-utils": "npm:^7.22.5" - babel-plugin-polyfill-corejs2: "npm:^0.4.6" - babel-plugin-polyfill-corejs3: "npm:^0.8.5" - babel-plugin-polyfill-regenerator: "npm:^0.5.3" + babel-plugin-polyfill-corejs2: "npm:^0.4.7" + babel-plugin-polyfill-corejs3: "npm:^0.8.7" + babel-plugin-polyfill-regenerator: "npm:^0.5.4" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 94a7ee92f073df53fd8bebf9ed391a95553716077da1c6c3a57f10f042358c938495d55e6b09b4b50544c01f03560c4770c17698e1c24817a15d3668e8231249 + checksum: 0d5038462a5762c3a88d820785f685ce1b659075527a3ad538647fd9ce486052777d5aea3d62e626639d60441a04dd0ded2ed32c86b92cf8afbdbd3d54460c13 languageName: node linkType: hard @@ -1807,16 +1794,16 @@ __metadata: linkType: hard "@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.23.3": - version: 7.23.5 - resolution: "@babel/plugin-transform-typescript@npm:7.23.5" + version: 7.23.6 + resolution: "@babel/plugin-transform-typescript@npm:7.23.6" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.23.5" + "@babel/helper-create-class-features-plugin": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.22.5" "@babel/plugin-syntax-typescript": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 75d6689bfdf4c9462b5fb21107c295717c9bedffe5eae8b22b0a65c9603660683d55e020df83825de13792358043bd939f48efc2b3a293b5210a608076c94934 + checksum: e08f7a981fe157e32031070b92cd77030018b002d063e4be3711ffb7ec04539478b240d8967a4748abb56eccc0ba376f094f30711ef6a028b2a89d15d6ddc01f languageName: node linkType: hard @@ -1968,8 +1955,8 @@ __metadata: linkType: hard "@babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.23.2": - version: 7.23.6 - resolution: "@babel/preset-env@npm:7.23.6" + version: 7.23.7 + resolution: "@babel/preset-env@npm:7.23.7" dependencies: "@babel/compat-data": "npm:^7.23.5" "@babel/helper-compilation-targets": "npm:^7.23.6" @@ -1977,7 +1964,7 @@ __metadata: "@babel/helper-validator-option": "npm:^7.23.5" "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3" "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.3" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7" "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" "@babel/plugin-syntax-class-properties": "npm:^7.12.13" @@ -1998,7 +1985,7 @@ __metadata: "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" "@babel/plugin-transform-arrow-functions": "npm:^7.23.3" - "@babel/plugin-transform-async-generator-functions": "npm:^7.23.4" + "@babel/plugin-transform-async-generator-functions": "npm:^7.23.7" "@babel/plugin-transform-async-to-generator": "npm:^7.23.3" "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3" "@babel/plugin-transform-block-scoping": "npm:^7.23.4" @@ -2046,27 +2033,27 @@ __metadata: "@babel/plugin-transform-unicode-regex": "npm:^7.23.3" "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3" "@babel/preset-modules": "npm:0.1.6-no-external-plugins" - babel-plugin-polyfill-corejs2: "npm:^0.4.6" - babel-plugin-polyfill-corejs3: "npm:^0.8.5" - babel-plugin-polyfill-regenerator: "npm:^0.5.3" + babel-plugin-polyfill-corejs2: "npm:^0.4.7" + babel-plugin-polyfill-corejs3: "npm:^0.8.7" + babel-plugin-polyfill-regenerator: "npm:^0.5.4" core-js-compat: "npm:^3.31.0" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 5b24d179af52f082d04b9b98cc4777e37bf31a97cef5a91d8917e996dbd75f2f743c88c40f80744cb8529355bb674619d150c0260c32d834aa4067e21d0c8962 + checksum: ac9def873cec52ee02a550bde6e22eced16d1ae331bb8ebc82c03e4c91c12ac17e3e4027647e61612937bcc25ac46e71370aaf99dc2e85dbd11f7777ffeed54e languageName: node linkType: hard "@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/preset-flow@npm:7.22.15" + version: 7.23.3 + resolution: "@babel/preset-flow@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" "@babel/helper-validator-option": "npm:^7.22.15" - "@babel/plugin-transform-flow-strip-types": "npm:^7.22.5" + "@babel/plugin-transform-flow-strip-types": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 7eef0c84ec1889d6c4f7a67d7d1a81703420eed123a8c23f25af148eead77907f0bd701f3e729fdb37d3ddb2a373bf43938b36a9ba17f546111ddb9521466b92 + checksum: 1cf109925791f2af679f03289848d27596b4f27cb0ad4ee74a8dd4c1cbecc119bdef3b45cbbe12489bc9bdf61163f94c1c0bf6013cc58c325f1cc99edc01bda9 languageName: node linkType: hard @@ -2115,17 +2102,17 @@ __metadata: linkType: hard "@babel/register@npm:^7.13.16, @babel/register@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/register@npm:7.22.15" + version: 7.23.7 + resolution: "@babel/register@npm:7.23.7" dependencies: clone-deep: "npm:^4.0.1" find-cache-dir: "npm:^2.0.0" make-dir: "npm:^2.1.0" - pirates: "npm:^4.0.5" + pirates: "npm:^4.0.6" source-map-support: "npm:^0.5.16" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 895cc773c3b3eae909478ea2a9735ef6edd634b04b4aaaad2ce576fd591c2b3c70ff8c90423e769a291bee072186e7e4801480c1907e31ba3053c6cdba5571cb + checksum: b2466e41a4394e725b57e139ba45c3f61b88546d3cb443e84ce46cb34071b60c6cdb706a14c58a1443db530691a54f51da1f0c97f6c1aecbb838a2fb7eb5dbb9 languageName: node linkType: hard @@ -2137,12 +2124,12 @@ __metadata: linkType: hard "@babel/runtime-corejs3@npm:^7.10.2": - version: 7.23.1 - resolution: "@babel/runtime-corejs3@npm:7.23.1" + version: 7.23.7 + resolution: "@babel/runtime-corejs3@npm:7.23.7" dependencies: core-js-pure: "npm:^3.30.2" regenerator-runtime: "npm:^0.14.0" - checksum: 6e2c2b11779ff56c88b1f3a8742498640f7271ad4fcf9cfd24052bbb236a5e7c4c7c8d81cda751da3b4effa678736303deb78441c5752e63bfb90d6453fd870f + checksum: 7230942b6dadddd68334283068f360323c6df205542811bd7e37384ebfc0b5dcc266470db99e5905a8c6e3bb9898f7f066dde145b33b560acd271118ed9b41b2 languageName: node linkType: hard @@ -2174,11 +2161,11 @@ __metadata: linkType: hard "@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.23.6 - resolution: "@babel/runtime@npm:7.23.6" + version: 7.23.7 + resolution: "@babel/runtime@npm:7.23.7" dependencies: regenerator-runtime: "npm:^0.14.0" - checksum: d886954e985ef8e421222f7a2848884d96a752e0020d3078b920dd104e672fdf23bcc6f51a44313a048796319f1ac9d09c2c88ec8cbb4e1f09174bcd3335b9ff + checksum: 3e304133ee55b0750e03e53cb4efb47fb2bdcdb5795f85bbffa10595196c34b9be60eb65bd6d833c87f49fc827f0365f86f95f51d85b188004d3128bb5129c93 languageName: node linkType: hard @@ -2202,9 +2189,9 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/traverse@npm:7.23.6" +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.7, @babel/traverse@npm:^7.4.5": + version: 7.23.7 + resolution: "@babel/traverse@npm:7.23.7" dependencies: "@babel/code-frame": "npm:^7.23.5" "@babel/generator": "npm:^7.23.6" @@ -2216,25 +2203,7 @@ __metadata: "@babel/types": "npm:^7.23.6" debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d - languageName: node - linkType: hard - -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": - version: 7.23.2 - resolution: "@babel/traverse@npm:7.23.2" - dependencies: - "@babel/code-frame": "npm:^7.22.13" - "@babel/generator": "npm:^7.23.0" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-hoist-variables": "npm:^7.22.5" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" - debug: "npm:^4.1.0" - globals: "npm:^11.1.0" - checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff + checksum: e32fceb4249beec2bde83968ddffe17444221c1ee5cd18c543a2feaf94e3ca83f2a4dfbc2dcca87cf226e0105973e0fe3717063a21e982a9de9945615ab3f3f5 languageName: node linkType: hard @@ -5671,20 +5640,23 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ember@workspace:frameworks/ember" dependencies: + "@babel/core": "npm:^7.23.7" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" + "@types/babel__preset-env": "npm:^7" + babel-loader: "npm:9.1.3" + babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" + babel-plugin-htmlbars-inline-precompile: "npm:^5.3.1" ember-source: "npm:~3.28.1" find-up: "npm:^5.0.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: ember-source: ~3.28.1 || ^4.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -9966,6 +9938,19 @@ __metadata: languageName: node linkType: hard +"babel-plugin-htmlbars-inline-precompile@npm:^5.3.1": + version: 5.3.1 + resolution: "babel-plugin-htmlbars-inline-precompile@npm:5.3.1" + dependencies: + babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" + line-column: "npm:^1.0.2" + magic-string: "npm:^0.25.7" + parse-static-imports: "npm:^1.1.0" + string.prototype.matchall: "npm:^4.0.5" + checksum: 8a93893d22f5dc6cb8c271c228311b3cb60b01df247f592e0d88df88b690114f7193fc2175c72de3ad3898a81a53dc0c407c6f059801315dea912e5628c9a5fa + languageName: node + linkType: hard + "babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" @@ -10016,6 +10001,19 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs2@npm:^0.4.7": + version: 0.4.7 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.7" + dependencies: + "@babel/compat-data": "npm:^7.22.6" + "@babel/helper-define-polyfill-provider": "npm:^0.4.4" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: f80f7284ec72c63e7dd751e0bdf25e9978df195a79e0887470603bfdea13ee518d62573cf360bb1bc01b80819e54915dd5edce9cff14c52d0af5f984aa3d36a3 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs3@npm:^0.8.5": version: 0.8.6 resolution: "babel-plugin-polyfill-corejs3@npm:0.8.6" @@ -10028,6 +10026,18 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs3@npm:^0.8.7": + version: 0.8.7 + resolution: "babel-plugin-polyfill-corejs3@npm:0.8.7" + dependencies: + "@babel/helper-define-polyfill-provider": "npm:^0.4.4" + core-js-compat: "npm:^3.33.1" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 094e40f4ab9f131408202063964d63740609fd4fdb70a5b6332b371761921b540ffbcee7a434c0199b8317dfb2ba4675eef674867215fd3b85e24054607c1501 + languageName: node + linkType: hard + "babel-plugin-polyfill-regenerator@npm:^0.5.3": version: 0.5.3 resolution: "babel-plugin-polyfill-regenerator@npm:0.5.3" @@ -10039,6 +10049,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-regenerator@npm:^0.5.4": + version: 0.5.4 + resolution: "babel-plugin-polyfill-regenerator@npm:0.5.4" + dependencies: + "@babel/helper-define-polyfill-provider": "npm:^0.4.4" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 0b903f5fe2f8c487b4260935dfe60bd9a95bcaee7ae63958f063045093b16d4e8288c232199d411261300aa21f6b106a3cb83c42cc996de013b337f5825a79fe + languageName: node + linkType: hard + "babel-plugin-react-docgen@npm:4.2.1, babel-plugin-react-docgen@npm:^4.2.1": version: 4.2.1 resolution: "babel-plugin-react-docgen@npm:4.2.1" @@ -17619,7 +17640,7 @@ __metadata: languageName: node linkType: hard -"isarray@npm:1.0.0, isarray@npm:~1.0.0": +"isarray@npm:1.0.0, isarray@npm:^1.0.0, isarray@npm:~1.0.0": version: 1.0.0 resolution: "isarray@npm:1.0.0" checksum: 18b5be6669be53425f0b84098732670ed4e727e3af33bc7f948aac01782110eb9a18b3b329c5323bcdd3acdaae547ee077d3951317e7f133bff7105264b3003d @@ -18643,6 +18664,16 @@ __metadata: languageName: node linkType: hard +"line-column@npm:^1.0.2": + version: 1.0.2 + resolution: "line-column@npm:1.0.2" + dependencies: + isarray: "npm:^1.0.0" + isobject: "npm:^2.0.0" + checksum: 75aa918a9791362a3369c7222689350dc6df5b040314525ba79c3682f1386e13a3ceddd6b2584b8cb5c3ab3a5b3c50c940a182772dbb6361303bf6ef65fc2d64 + languageName: node + linkType: hard + "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -22008,6 +22039,13 @@ __metadata: languageName: node linkType: hard +"parse-static-imports@npm:^1.1.0": + version: 1.1.0 + resolution: "parse-static-imports@npm:1.1.0" + checksum: 24a210b3ed4fc8ab4d79a807956484a60f97cd0e8174d4c2c88c034fdba65d87ce62ec293aadee46e07d476959610a905a2b80d60b343fd525e057479cabfbbe + languageName: node + linkType: hard + "parse5-html-rewriting-stream@npm:7.0.0": version: 7.0.0 resolution: "parse5-html-rewriting-stream@npm:7.0.0" @@ -22324,7 +22362,7 @@ __metadata: languageName: node linkType: hard -"pirates@npm:^4.0.4, pirates@npm:^4.0.5": +"pirates@npm:^4.0.4, pirates@npm:^4.0.6": version: 4.0.6 resolution: "pirates@npm:4.0.6" checksum: 00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36 @@ -26098,7 +26136,7 @@ __metadata: languageName: node linkType: hard -"string.prototype.matchall@npm:^4.0.8": +"string.prototype.matchall@npm:^4.0.5, string.prototype.matchall@npm:^4.0.8": version: 4.0.10 resolution: "string.prototype.matchall@npm:4.0.10" dependencies: From 1f8db9e7767fdf1a23e4584e8eb1853c371a48a8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 12:59:49 +0100 Subject: [PATCH 17/52] Remove @swc/core package --- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 1 - code/lib/types/src/modules/core-common.ts | 6 +++--- code/package.json | 1 - 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index c9bd220b544c..97cde4815b6b 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -8,7 +8,6 @@ import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import type { TransformOptions as EsbuildOptions } from 'esbuild'; -import type { JsMinifyOptions as SwcOptions } from '@swc/core'; import type { Options } from '@storybook/types'; import { globalsNameReferenceMap } from '@storybook/preview/globals'; import { diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8f5a49efdfd1..6b436be70b51 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { FileSystemCache } from 'file-system-cache'; -import type { Options as SWCOptions } from '@swc/core'; import type { Options as TelejsonOptions } from 'telejson'; import type { Router } from 'express'; import type { Server } from 'http'; @@ -70,7 +69,8 @@ export interface Presets { args?: Options ): Promise; apply(extension: 'framework', config?: {}, args?: any): Promise; - apply(extension: 'swc', config?: {}, args?: any): Promise; + apply(extension: 'babel', config?: {}, args?: any): Promise; + apply(extension: 'swc', config?: {}, args?: any): Promise; apply(extension: 'entries', config?: [], args?: any): Promise; apply(extension: 'stories', config?: [], args?: any): Promise; apply(extension: 'managerEntries', config: [], args?: any): Promise; @@ -408,7 +408,7 @@ export interface StorybookConfigRaw { // We cannot use a particular Babel type here because we need to support a variety of versions babel?: any; - swc?: SWCOptions; + swc?: any; env?: Record; diff --git a/code/package.json b/code/package.json index c4e268558c93..a142204640ec 100644 --- a/code/package.json +++ b/code/package.json @@ -170,7 +170,6 @@ "@storybook/web-components": "workspace:*", "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", - "@swc/core": "1.3.82", "@testing-library/dom": "^7.29.4", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", From 9ed26ab696c220b14b9f64f6e7de33a4bc505d7e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 20:47:18 +0100 Subject: [PATCH 18/52] Add Migration note to Next.js SWC mode --- MIGRATION.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 453e8f67bdf0..5a0cc2285d0c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -17,6 +17,7 @@ - [Framework-specific changes](#framework-specific-changes) - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) + - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -495,6 +496,13 @@ Starting in 8.0, we drop support for Angular < 15 Starting in 8.0, we drop support for Next.js < 13.5. +#### Next.js Automatic SWC mode detection + +Similar to how Next.js detects if SWC should be used, Storybook will follow more or less the same rules: + +- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. +- Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated From 105e3ff2b75d6b228976dd4b50a1941ba7b0add1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:02:43 +0100 Subject: [PATCH 19/52] Add Migration note for Preact --- MIGRATION.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 5a0cc2285d0c..b0f8b79e52d6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -18,6 +18,7 @@ - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) + - [Preact: No longer adds default babel plugins](#preact-no-longer-adds-default-babel-plugins) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -503,6 +504,54 @@ Similar to how Next.js detects if SWC should be used, Storybook will follow more - If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. +#### Preact: No longer adds default babel plugins + +Until now, Storybook added a set of default babel plugins to the babel config for Preact projects which uses Webpack. + +We have configured the runtime automatic import plugin to automatically import `h` from `preact` when needed. This is no longer the case in Storybook 8.0. If you want to use the runtime automatic import plugin to skip unnecessary preact imports, you will need to add it to your babel config yourself. The same applies if you want to use TypeScript with Preact. + +```js +.babelrc + +{ + "plugins": [ + [ + // Add this to automatically import `h` from `preact` when needed + "@babel/plugin-transform-react-jsx", { + "importSource": "preact", + "runtime": "automatic" + } + ], + // Add this if you want to use TypeScript with Preact + "@babel/preset-typescript" + ], +} +``` + +If you want to configure the plugins only for Storybook, you can add the same setting to your `.storybook/main.js` file. + +```js +const config = { + ... + babel: async (options) => { + options.plugins.push( + [ + "@babel/plugin-transform-react-jsx", { + "importSource": "preact", + "runtime": "automatic" + } + ], + "@babel/preset-typescript" + ) + return options; + }, +} + +export default config +``` + +We are doing this to apply the same babel config as you have defined in your project. This streamlines the experience of using Storybook with Preact. Additionally, we are not vendor-locked to a specific Babel version anymore, which means that you can upgrade Babel without breaking your Storybook. + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated From da46a9e1755ca0a9cdb6319d625e325b350d86ea Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:04:23 +0100 Subject: [PATCH 20/52] Add Migration note to drop support for Preact < 10 --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index b0f8b79e52d6..082922622bda 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -18,6 +18,7 @@ - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) + - [Preact: Dropping support for Preact \< 10](#preact-dropping-support-for-preact--10) - [Preact: No longer adds default babel plugins](#preact-no-longer-adds-default-babel-plugins) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) @@ -504,6 +505,10 @@ Similar to how Next.js detects if SWC should be used, Storybook will follow more - If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. +#### Preact: Dropping support for Preact \< 10 + +Starting in 8.0, we drop support for Preact < 10. + #### Preact: No longer adds default babel plugins Until now, Storybook added a set of default babel plugins to the babel config for Preact projects which uses Webpack. From 068cdf1ca6494070d0ccf54028f6562a23f38ef0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:17:29 +0100 Subject: [PATCH 21/52] Add note to addon authors for optional babel usage --- docs/addons/writing-presets.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md index 658efea74cf9..6d815fe00d71 100644 --- a/docs/addons/writing-presets.md +++ b/docs/addons/writing-presets.md @@ -56,6 +56,8 @@ To customize Storybook's Babel configuration and add support for additional feat +Please keep in mind that the babel configurations are only applied if the users Storybook Framework uses Babel. If the framework uses another transpiler, like SWC or esbuild, the babel configuration will be ignored. + ### Builders By default, Storybook provides support for the leading industry builders, including [Webpack](../builders/webpack.md) and [Vite](../builders/vite.md). If you need additional features for any of these builders, you can use APIs to extend the builder configuration based on your specific needs. From 56ff8b2c3add6b0b3ed30d48061098cb348b7f0d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:19:42 +0100 Subject: [PATCH 22/52] Readd deleted snippets --- .../storybook-addons-preset-babelDefault.js.mdx | 14 ++++++++++++++ .../storybook-addons-preset-babelDefault.ts.mdx | 15 +++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx create mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx new file mode 100644 index 000000000000..0677a8775a97 --- /dev/null +++ b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx @@ -0,0 +1,14 @@ + +```js +// example-addon/src/babel/babelDefault.js + +export function babelDefault(config) { + return { + ...config, + plugins: [ + ...config.plugins, + [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], + ], + }; +} +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx new file mode 100644 index 000000000000..81306146a38d --- /dev/null +++ b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx @@ -0,0 +1,15 @@ +```ts +// example-addon/src/babel/babelDefault.ts + +import { TransformOptions } from '@babel/core'; + +export function babelDefault(config: TransformOptions) { + return { + ...config, + plugins: [ + ...config.plugins, + [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], + ], + }; +} +``` \ No newline at end of file From bb9370c50085e88a9b1f1ac26194df1d9617d49b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:44:17 +0100 Subject: [PATCH 23/52] Add Migration note for removing fastRefresh option --- MIGRATION.md | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 082922622bda..c7de11eda55a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,7 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [framework.options.fastRefresh for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - [typescript.skipBabel removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) @@ -386,6 +387,67 @@ To summarize: ### Core changes +#### framework.options.fastRefresh for Webpack5-based projects removed + +In Storybook 8.0.0, we have removed the `framework.options.fastRefresh` option. + +The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck in the future, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. + +Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Webpack 5 and Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. + +We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs, if it is not already configured or if your fast-refresh configuration is not automatically picked up by Storybook: + +`package.json`: + +```diff +{ + "devDependencies": { ++ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", ++ "react-refresh": "^0.14.0", + } +} +``` + +`babel.config.js` (optionally, add it to `.storybook/main.js`): + +```diff ++const isProdBuild = process.env.NODE_ENV === 'production'; + +module.exports = (api) => { + return { + plugins: [ ++ !isProdBuild && 'react-refresh/babel', + ].filter(Boolean), + }; +}; +``` + +`.storybook/main.js`: + +```diff ++import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"; ++const isProdBuild = process.env.NODE_ENV === 'production'; +const config = { + webpackFinal: (config) => { ++ config.plugins = [ ++ !isProdBuild && new ReactRefreshWebpackPlugin({ ++ overlay: { ++ sockIntegration: 'whm', ++ }, ++ }), ++ ...config.plugins, ++ ].filter(Boolean); + return config; + }, +}; + +export default config; +``` + +This approach aligns with our philosophy of transparency and puts users in control of their Webpack and Babel configurations. + +We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are taking a step closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. + #### typescript.skipBabel removed We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. From 6808657ff96291c1163fa30ed0af4063aac7d65e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 2 Jan 2024 11:05:03 +0100 Subject: [PATCH 24/52] Add cache directory to babel-loaders --- code/frameworks/ember/src/preset.ts | 7 +++++-- code/frameworks/nextjs/src/babel/loader.ts | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 00b3d2bd1564..9de2b1ab35c0 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -1,7 +1,7 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import { getVirtualModules } from '@storybook/builder-webpack5'; -import { getProjectRoot } from '@storybook/core-common'; +import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common'; import type { StorybookConfig } from './types'; const getAbsolutePath = (input: I): I => @@ -29,7 +29,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, use: [ { loader: require.resolve('babel-loader'), - options: babelOptions, + options: { + cacheDirectory: resolvePathInStorybookCache('babel'), + ...babelOptions, + }, }, ], include: [getProjectRoot()], diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts index 90d383ea332c..25ff56890588 100644 --- a/code/frameworks/nextjs/src/babel/loader.ts +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -1,4 +1,4 @@ -import { getProjectRoot } from '@storybook/core-common'; +import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common'; import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; @@ -15,7 +15,10 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) => use: [ { loader: require.resolve('babel-loader'), - options: babelOptions, + options: { + cacheDirectory: resolvePathInStorybookCache('babel'), + ...babelOptions, + }, }, ], include: [getProjectRoot()], From 6c5b0b8562042f267acd6fed71a9c38e16972f49 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 2 Jan 2024 11:23:11 +0100 Subject: [PATCH 25/52] Add migration note for babel/swc removal --- MIGRATION.md | 48 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index c7de11eda55a..4702469c6a93 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,8 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [framework.options.builder.useSWC for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) + - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) - [framework.options.fastRefresh for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - [typescript.skipBabel removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -387,13 +389,55 @@ To summarize: ### Core changes +#### framework.options.builder.useSWC for Webpack5-based projects removed + +In Storybook 8.0.0, we have removed the `framework.options.builder.useSWC` option. The `@storybook/builder-webpack5` package is now compiler-agnostic and does not depend on Babel or SWC. + +If you want to use SWC, you can install and add the following addon to your Storybook configuration: + +```sh +npm install --save-dev @storybook/addon-webpack-compiler-swc +``` + +`.storybook/main.js`: + +```js +const config = { + addons: ["@storybook/addon-webpack-compiler-swc"] +}; + +export default config; +``` + +The goal is to make @storybook/builder-webpack5 more leightweight and flexible. We are not locked into a specific compiler or compiler version anymore. This allows us to support Babel 7/8, SWC and other compilers at the same time. + +#### Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5` + +In Storybook 8.0.0, we have removed the `@storybook/builder-webpack5` package's dependency on Babel. This means that Babel is not preconfigured in `@storybook/builder-webpack5`. If you want to use Babel, you can install and add the following addon to your Storybook configuration: + +```sh +npm install --save-dev @storybook/addon-webpack-compiler-babel +``` + +`.storybook/main.js`: + +```js +const config = { + addons: ["@storybook/addon-webpack-compiler-babel"] +}; + +export default config; +``` + +We are doing this to make Storybook more flexible and to allow users to use a variety of compilers like SWC, Babel or even pure TypeScript. + #### framework.options.fastRefresh for Webpack5-based projects removed In Storybook 8.0.0, we have removed the `framework.options.fastRefresh` option. The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck in the future, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. -Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Webpack 5 and Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. +Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs, if it is not already configured or if your fast-refresh configuration is not automatically picked up by Storybook: @@ -448,6 +492,8 @@ This approach aligns with our philosophy of transparency and puts users in contr We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are taking a step closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. +You don't have to add fast refresh to `@storybook/nextjs`, since it is already configured there as a default to match the same experience as `next dev`. + #### typescript.skipBabel removed We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. From c82e2152c10d66a7e99dda4b031377313ccaea57 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 2 Jan 2024 12:37:21 +0100 Subject: [PATCH 26/52] Upgrade yarn.lock --- code/yarn.lock | 123 ------------------------------------------------- 1 file changed, 123 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index c29697995fbe..9ac57d8c7dcb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6360,7 +6360,6 @@ __metadata: "@storybook/web-components": "workspace:*" "@storybook/web-components-vite": "workspace:*" "@storybook/web-components-webpack5": "workspace:*" - "@swc/core": "npm:1.3.82" "@testing-library/dom": "npm:^7.29.4" "@testing-library/jest-dom": "npm:^6.1.4" "@testing-library/react": "npm:^14.0.0" @@ -6864,121 +6863,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-darwin-arm64@npm:1.3.82" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - -"@swc/core-darwin-x64@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-darwin-x64@npm:1.3.82" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - -"@swc/core-linux-arm-gnueabihf@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.82" - conditions: os=linux & cpu=arm - languageName: node - linkType: hard - -"@swc/core-linux-arm64-gnu@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.82" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - -"@swc/core-linux-arm64-musl@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.82" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - -"@swc/core-linux-x64-gnu@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.82" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - -"@swc/core-linux-x64-musl@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-x64-musl@npm:1.3.82" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - -"@swc/core-win32-arm64-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.82" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - -"@swc/core-win32-ia32-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.82" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@swc/core-win32-x64-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.82" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - -"@swc/core@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core@npm:1.3.82" - dependencies: - "@swc/core-darwin-arm64": "npm:1.3.82" - "@swc/core-darwin-x64": "npm:1.3.82" - "@swc/core-linux-arm-gnueabihf": "npm:1.3.82" - "@swc/core-linux-arm64-gnu": "npm:1.3.82" - "@swc/core-linux-arm64-musl": "npm:1.3.82" - "@swc/core-linux-x64-gnu": "npm:1.3.82" - "@swc/core-linux-x64-musl": "npm:1.3.82" - "@swc/core-win32-arm64-msvc": "npm:1.3.82" - "@swc/core-win32-ia32-msvc": "npm:1.3.82" - "@swc/core-win32-x64-msvc": "npm:1.3.82" - "@swc/types": "npm:^0.1.4" - 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: cee1f56e969074fe9e23fe51348d7da0c921949f5845e57030824d0e32d09fcefc647371c982e82836cc72c27c5fc5370c6aaff4f8f1c527d1c39c5ab6203e17 - languageName: node - linkType: hard - "@swc/helpers@npm:0.5.2": version: 0.5.2 resolution: "@swc/helpers@npm:0.5.2" @@ -6988,13 +6872,6 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.4": - version: 0.1.5 - resolution: "@swc/types@npm:0.1.5" - checksum: b35f93fe896a2240f6f10544e408f9648c2bd4bcff9bd8d022d9a6942d31cf859f86119fb0bbb04a12eefa1f6a6745ffc7d18f3a490d76d7b6a074a7c9608144 - languageName: node - linkType: hard - "@szmarczak/http-timer@npm:^4.0.5": version: 4.0.6 resolution: "@szmarczak/http-timer@npm:4.0.6" From b8db53974c758a5c9c76e19a6548c7923b6d1f3e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 3 Jan 2024 15:35:14 +0100 Subject: [PATCH 27/52] Add migration note for web-component projects --- MIGRATION.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index dc7a34c00ed8..bbc4138a052e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -26,6 +26,7 @@ - [Require Angular 15 and up](#require-angular-15-and-up) - [Svelte](#svelte) - [Require Svelte 4 and up](#require-svelte-4-and-up) + - [Web Components](#web-components) - [Deprecations which are now removed](#deprecations-which-are-now-removed) - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) @@ -641,6 +642,17 @@ Starting in 8.0, Storybook requires Angular 15 and up. Starting in 8.0, Storybook requires Svelte 4 and up. +#### Web Components + +Starting in 8.0, Storybook doesn't apply any default babel plugins to Web Components projects. Storybook will pick up the babel configuration you have in place. Before Storybook 8.0, Storybook has added the following babel presets and plugins: + +- `@babel/preset-env` + +The following list of plugins are not necessary anymore, since they are included in `@babel/preset-env`: + +- `@babel/plugin-syntax-dynamic-import` +- `@babel/plugin-syntax-import-meta` + ### Deprecations which are now removed #### --use-npm flag in storybook CLI From 0c78429bc19c9bb1a66e7a4aacb85aa708d863a2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 08:45:36 +0100 Subject: [PATCH 28/52] Add more details to SWC configuration option in TypeScript --- docs/snippets/common/main-config-swc.ts.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/snippets/common/main-config-swc.ts.mdx b/docs/snippets/common/main-config-swc.ts.mdx index a8a3ebaf56ec..56d2899fef1d 100644 --- a/docs/snippets/common/main-config-swc.ts.mdx +++ b/docs/snippets/common/main-config-swc.ts.mdx @@ -1,11 +1,12 @@ ```ts // .storybook/main.ts +import type { Options } from "@swc/core"; // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5) import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { - swc: (config, options) => { + swc: (config: Options, options): Options => { return { ...config, // Apply your custom SWC configuration From 0e638f63dc7a7b6bcefc1772ae992cae01f8559a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 09:04:34 +0100 Subject: [PATCH 29/52] Avoid implicit any in preact-webpack --- code/presets/preact-webpack/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts index ad2b259fd6ad..272987338308 100644 --- a/code/presets/preact-webpack/src/index.ts +++ b/code/presets/preact-webpack/src/index.ts @@ -23,7 +23,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => { }; }; -export const swc: PresetProperty<'swc'> = (config) => { +export const swc: PresetProperty<'swc'> = (config: any): any => { const isDevelopment = process.env.NODE_ENV !== 'production'; return { From e2d9306a42a7795c9b25c1a68b042f829b6daf0b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 09:12:10 +0100 Subject: [PATCH 30/52] Restructure dependencies in ember package.json --- code/frameworks/ember/package.json | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 9142ebd1ce1c..c161335c8ec5 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -32,7 +32,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@babel/core": "^7.23.7", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/docs-tools": "workspace:*", @@ -40,8 +39,6 @@ "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", "babel-loader": "9.1.3", - "babel-plugin-ember-modules-api-polyfill": "^3.5.0", - "babel-plugin-htmlbars-inline-precompile": "^5.3.1", "find-up": "^5.0.0", "ts-dedent": "^2.0.0" }, @@ -51,7 +48,12 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "ember-source": "~3.28.1 || ^4.0.0" + "@babel/core": "*", + "babel-plugin-ember-modules-api-polyfill": "^3.5.0", + "babel-plugin-htmlbars-inline-precompile": "^5.3.1", + "ember-source": "~3.28.1 || ^4.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "engines": { "node": ">=18.0.0" From 2b606ebab54f64f117d81baf874d5b20d1561ac1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 09:20:59 +0100 Subject: [PATCH 31/52] Add migration note for sb babelrc removal --- MIGRATION.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index c698517bf1f8..3bfbb6544768 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -22,6 +22,7 @@ - [Icons is deprecated](#icons-is-deprecated) - [Removed postinstall](#removed-postinstall) - [Removed stories.json](#removed-storiesjson) + - [Removed `sb babelrc` command](#removed-sb-babelrc-command) - [Framework-specific changes](#framework-specific-changes) - [React](#react) - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) @@ -652,6 +653,12 @@ In addition to the built storybook, `storybook build` generates two files, `inde In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91 +#### Removed `sb babelrc` command + +The `sb babelrc` command was used to generate a `.babelrc` file for Storybook. This command is now removed. + +When you are using Webpack5, Storybook from 8.0 onwards is compiler-agnostic and does not depend on Babel or SWC. Creating a default babelrc file is also pretty tricky, since it depends on your project setup. We recommend that you create a `.babelrc` file yourself and configure it according to your project setup. + ### Framework-specific changes #### React From 3854cc26385f58ceae34ed7d4b6bb3813f7bba6a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 09:29:22 +0100 Subject: [PATCH 32/52] Beautify Migration.md --- MIGRATION.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 3bfbb6544768..d61a247fed7b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -9,7 +9,7 @@ - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support) - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block) - [Core changes](#core-changes) - - [framework.options.builder.useSWC for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) + - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) - [framework.options.fastRefresh for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - [typescript.skipBabel removed](#typescriptskipbabel-removed) @@ -460,7 +460,7 @@ Referencing stories by `id`, `name` or `story` in the Story block is not possibl ### Core changes -#### framework.options.builder.useSWC for Webpack5-based projects removed +#### `framework.options.builder.useSWC` for Webpack5-based projects removed In Storybook 8.0.0, we have removed the `framework.options.builder.useSWC` option. The `@storybook/builder-webpack5` package is now compiler-agnostic and does not depend on Babel or SWC. From 30ac388ba9873caa393224ff19c3c01bbbadfa5a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 09:31:04 +0100 Subject: [PATCH 33/52] Beautify Migration.md --- MIGRATION.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index d61a247fed7b..567aeaa52e3d 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -11,8 +11,8 @@ - [Core changes](#core-changes) - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) - - [framework.options.fastRefresh for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - - [typescript.skipBabel removed](#typescriptskipbabel-removed) + - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) + - [`typescript.skipBabel` removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) @@ -502,7 +502,7 @@ export default config; We are doing this to make Storybook more flexible and to allow users to use a variety of compilers like SWC, Babel or even pure TypeScript. -#### framework.options.fastRefresh for Webpack5-based projects removed +#### `framework.options.fastRefresh` for Webpack5-based projects removed In Storybook 8.0.0, we have removed the `framework.options.fastRefresh` option. @@ -565,7 +565,7 @@ We are committed to minimizing magic behind the scenes. By removing `framework.o You don't have to add fast refresh to `@storybook/nextjs`, since it is already configured there as a default to match the same experience as `next dev`. -#### typescript.skipBabel removed +#### `typescript.skipBabel` removed We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. From 88c212a27fc316960ef7d43bc6f02aa86d515420 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 09:35:33 +0100 Subject: [PATCH 34/52] Update lock file --- code/yarn.lock | 66 ++++++++------------------------------------------ 1 file changed, 10 insertions(+), 56 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 3b96d41ccbde..7c5bbdec9dbd 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -392,7 +392,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.23.2, @babel/core@npm:^7.23.2": +"@babel/core@npm:7.23.2": version: 7.23.2 resolution: "@babel/core@npm:7.23.2" dependencies: @@ -415,7 +415,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.7, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.23.7 resolution: "@babel/core@npm:7.23.7" dependencies: @@ -2189,25 +2189,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": - version: 7.23.2 - resolution: "@babel/traverse@npm:7.23.2" - dependencies: - "@babel/code-frame": "npm:^7.22.13" - "@babel/generator": "npm:^7.23.0" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-hoist-variables": "npm:^7.22.5" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" - debug: "npm:^4.1.0" - globals: "npm:^11.1.0" - checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff - languageName: node - linkType: hard - -"@babel/traverse@npm:^7.23.7": +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.7, @babel/traverse@npm:^7.4.5": version: 7.23.7 resolution: "@babel/traverse@npm:7.23.7" dependencies: @@ -5623,7 +5605,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ember@workspace:frameworks/ember" dependencies: - "@babel/core": "npm:^7.23.7" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -5632,14 +5613,17 @@ __metadata: "@storybook/types": "workspace:*" "@types/babel__preset-env": "npm:^7" babel-loader: "npm:9.1.3" - babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" - babel-plugin-htmlbars-inline-precompile: "npm:^5.3.1" ember-source: "npm:~3.28.1" find-up: "npm:^5.0.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: + "@babel/core": "*" + babel-plugin-ember-modules-api-polyfill: ^3.5.0 + babel-plugin-htmlbars-inline-precompile: ^5.3.1 ember-source: ~3.28.1 || ^4.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -9818,19 +9802,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-htmlbars-inline-precompile@npm:^5.3.1": - version: 5.3.1 - resolution: "babel-plugin-htmlbars-inline-precompile@npm:5.3.1" - dependencies: - babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" - line-column: "npm:^1.0.2" - magic-string: "npm:^0.25.7" - parse-static-imports: "npm:^1.1.0" - string.prototype.matchall: "npm:^4.0.5" - checksum: 8a93893d22f5dc6cb8c271c228311b3cb60b01df247f592e0d88df88b690114f7193fc2175c72de3ad3898a81a53dc0c407c6f059801315dea912e5628c9a5fa - languageName: node - linkType: hard - "babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" @@ -17653,7 +17624,7 @@ __metadata: languageName: node linkType: hard -"isarray@npm:1.0.0, isarray@npm:^1.0.0, isarray@npm:~1.0.0": +"isarray@npm:1.0.0, isarray@npm:~1.0.0": version: 1.0.0 resolution: "isarray@npm:1.0.0" checksum: 18b5be6669be53425f0b84098732670ed4e727e3af33bc7f948aac01782110eb9a18b3b329c5323bcdd3acdaae547ee077d3951317e7f133bff7105264b3003d @@ -18670,16 +18641,6 @@ __metadata: languageName: node linkType: hard -"line-column@npm:^1.0.2": - version: 1.0.2 - resolution: "line-column@npm:1.0.2" - dependencies: - isarray: "npm:^1.0.0" - isobject: "npm:^2.0.0" - checksum: 75aa918a9791362a3369c7222689350dc6df5b040314525ba79c3682f1386e13a3ceddd6b2584b8cb5c3ab3a5b3c50c940a182772dbb6361303bf6ef65fc2d64 - languageName: node - linkType: hard - "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -22529,13 +22490,6 @@ __metadata: languageName: node linkType: hard -"parse-static-imports@npm:^1.1.0": - version: 1.1.0 - resolution: "parse-static-imports@npm:1.1.0" - checksum: 24a210b3ed4fc8ab4d79a807956484a60f97cd0e8174d4c2c88c034fdba65d87ce62ec293aadee46e07d476959610a905a2b80d60b343fd525e057479cabfbbe - languageName: node - linkType: hard - "parse5-html-rewriting-stream@npm:7.0.0": version: 7.0.0 resolution: "parse5-html-rewriting-stream@npm:7.0.0" @@ -26675,7 +26629,7 @@ __metadata: languageName: node linkType: hard -"string.prototype.matchall@npm:^4.0.5, string.prototype.matchall@npm:^4.0.8": +"string.prototype.matchall@npm:^4.0.8": version: 4.0.10 resolution: "string.prototype.matchall@npm:4.0.10" dependencies: From ccbb6e427cc34b8b17f900ada30bf02fcf9ac7e4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 10:00:28 +0100 Subject: [PATCH 35/52] Update snapshot --- .../8428-js-static-prop-types/docgen.snapshot | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot index 0b0fdf252418..25027c025e27 100644 --- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot @@ -1,6 +1,6 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } -function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); } +function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/no-unused-prop-types */ /* eslint-disable react/require-default-props */ import React from 'react'; From b8d09692675fb7e376c9575010370ad020d4ead6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 10:09:22 +0100 Subject: [PATCH 36/52] Format docs --- docs/snippets/common/main-config-swc.ts.mdx | 2 +- .../common/storybook-addons-preset-babelDefault.js.mdx | 3 +-- .../common/storybook-addons-preset-babelDefault.ts.mdx | 2 +- .../common/storybook-babel-configuration-example.ts.mdx | 4 +--- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/snippets/common/main-config-swc.ts.mdx b/docs/snippets/common/main-config-swc.ts.mdx index 56d2899fef1d..a299764deda9 100644 --- a/docs/snippets/common/main-config-swc.ts.mdx +++ b/docs/snippets/common/main-config-swc.ts.mdx @@ -1,7 +1,7 @@ ```ts // .storybook/main.ts -import type { Options } from "@swc/core"; +import type { Options } from '@swc/core'; // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5) import type { StorybookConfig } from '@storybook/your-framework'; diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx index 0677a8775a97..eb831ba140d8 100644 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx +++ b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx @@ -1,4 +1,3 @@ - ```js // example-addon/src/babel/babelDefault.js @@ -11,4 +10,4 @@ export function babelDefault(config) { ], }; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx index 81306146a38d..85f9b7e01c74 100644 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx +++ b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx @@ -12,4 +12,4 @@ export function babelDefault(config: TransformOptions) { ], }; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx index d598e43197d2..97ac9cef1919 100644 --- a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx +++ b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx @@ -3,9 +3,7 @@ import { TransformOptions } from '@babel/core'; export function babelDefault(config: TransformOptions) { return { - plugins: [ - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], + plugins: [[require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset']], }; } ``` From 2a830335f96f97b3dc52ecab27532a388be03749 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 10:17:41 +0100 Subject: [PATCH 37/52] Add missing semver dep to cra preset --- code/presets/create-react-app/package.json | 5 +++-- code/yarn.lock | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index d9d113857b8a..81a8120b5081 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -51,8 +51,9 @@ "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", "@storybook/types": "workspace:*", - "@types/semver": "^7.3.4", - "pnp-webpack-plugin": "^1.7.0" + "@types/semver": "^7.5.6", + "pnp-webpack-plugin": "^1.7.0", + "semver": "^7.5.4" }, "devDependencies": { "@storybook/node-logger": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 7c5bbdec9dbd..fc82fabc3b00 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5970,8 +5970,9 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" - "@types/semver": "npm:^7.3.4" + "@types/semver": "npm:^7.5.6" pnp-webpack-plugin: "npm:^1.7.0" + semver: "npm:^7.5.4" typescript: "npm:^5.3.2" peerDependencies: react-scripts: ">=5.0.0" @@ -7808,7 +7809,7 @@ __metadata: languageName: node linkType: hard -"@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4": +"@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4, @types/semver@npm:^7.5.6": version: 7.5.6 resolution: "@types/semver@npm:7.5.6" checksum: 196dc32db5f68cbcde2e6a42bb4aa5cbb100fa2b7bd9c8c82faaaf3e03fbe063e205dbb4f03c7cdf53da2edb70a0d34c9f2e601b54281b377eb8dc1743226acd From 33f6196b63b4c7a4c381740922c10054df128f3f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 10:46:12 +0100 Subject: [PATCH 38/52] Add compiler addon to package.json --- code/lib/cli/src/generators/baseGenerator.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index b7089456e3ac..902aa7078342 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -248,6 +248,7 @@ export async function baseGenerator( '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/blocks', + ...(compiler ? [`@storybook/addon-webpack5-compiler-${compiler}`] : []), ...(extraAddonsToInstall || []), ].filter(Boolean); From 7b18c3a22fae9614f7c6ed17d71fb014166f2116 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 11:03:28 +0100 Subject: [PATCH 39/52] Add Compiler addons to verdaccio config --- scripts/verdaccio.yaml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index 29050b1d7051..4ac7b5b61050 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -112,6 +112,14 @@ packages: access: $all publish: $all proxy: npmjs + '@storybook/addon-webpack5-compiler-swc': + access: $all + publish: $all + proxy: npmjs + '@storybook/addon-webpack5-compiler-babel': + access: $all + publish: $all + proxy: npmjs # storybook packages are NOT proxied to global registry # allowing us to republish any version during tests From 75087a277cd5eb0f38f6a7dc1b50814d965f4cba Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 12:33:37 +0100 Subject: [PATCH 40/52] Fix overridePresets loading in build-dev/static --- code/lib/core-server/src/build-dev.ts | 5 ++++- code/lib/core-server/src/build-static.ts | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index ea5397f313ea..d8d6ecb73b7a 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -154,7 +154,10 @@ export async function buildDevStandalone( ...(resolvedRenderer ? [resolvedRenderer] : []), ...corePresets, ], - overridePresets: [...(previewBuilder.overridePresets || [])], + overridePresets: [ + ...(previewBuilder.overridePresets || []), + require.resolve('@storybook/core-server/dist/presets/common-override-preset'), + ], ...options, }); diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index bd75d0bf3242..ed4d2cd2572d 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -85,7 +85,10 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption ...(resolvedRenderer ? [resolvedRenderer] : []), ...corePresets, ], - overridePresets: [...(previewBuilder.overridePresets || [])], + overridePresets: [ + ...(previewBuilder.overridePresets || []), + require.resolve('@storybook/core-server/dist/presets/common-override-preset'), + ], ...options, build, }); From 66a2a6986acc32c5469ca6239a704ff424920c60 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 13:21:53 +0100 Subject: [PATCH 41/52] Set enforce: pre to react docgen loader --- code/presets/react-webpack/src/framework-preset-react-docs.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index 20f252b8eebf..0fe4cba34a46 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -28,6 +28,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( ...(config.module?.rules ?? []), { test: /\.(cjs|mjs|tsx?|jsx?)$/, + enforce: 'pre', loader: requirer( require.resolve, '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' @@ -52,6 +53,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( ...(config.module?.rules ?? []), { test: /\.(cjs|mjs|jsx?)$/, + enforce: 'pre', loader: requirer( require.resolve, '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' From bb7452d68cdffa7ea245245e3fd171ad21f6319b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 5 Jan 2024 15:52:05 +0100 Subject: [PATCH 42/52] Setup a babel webpack5 react sandbox --- code/lib/cli/src/sandbox-templates.ts | 21 +++++++++++++++++++++ scripts/tasks/sandbox-parts.ts | 5 +++++ 2 files changed, 26 insertions(+) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index aae5a867c5a0..02f0f92ae67b 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -74,6 +74,7 @@ export type Template = { testBuild?: boolean; disableDocs?: boolean; extraDependencies?: string[]; + editAddons?: (addons: string[]) => string[]; }; /** * Flag to indicate that this template is a secondary template, which is used mainly to test rather specific features. @@ -483,6 +484,25 @@ const baseTemplates = { * They will be hidden by default in the Storybook status page. */ const internalTemplates = { + 'internal/react18-webpack-babel': { + name: 'React with Babel Latest (Webpack | TypeScript)', + script: 'yarn create webpack5-react {{beforeDir}}', + expected: { + framework: '@storybook/react-webpack5', + renderer: '@storybook/react', + builder: '@storybook/builder-webpack5', + }, + modifications: { + extraDependencies: ['@storybook/addon-webpack5-compiler-babel'], + editAddons: (addons) => + [...addons, '@storybook/addon-webpack5-compiler-babel'].filter( + (a) => a !== '@storybook/addon-webpack5-compiler-swc' + ), + }, + isInternal: true, + inDevelopment: true, + skipTasks: ['e2e-tests-dev', 'bench'], + }, 'internal/react16-webpack': { name: 'React 16 (Webpack | TypeScript)', script: @@ -616,6 +636,7 @@ export const daily: TemplateKey[] = [ 'preact-vite/default-js', 'html-vite/default-js', 'internal/react16-webpack', + 'internal/react18-webpack-babel', ]; export const templatesByCadence = { normal, merged, daily }; diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 9a6354d05c62..575d58bfb08b 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -521,6 +521,11 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl features: { ...templateConfig.features, }, + ...(template.modifications?.editAddons + ? { + addons: template.modifications?.editAddons(mainConfig.getFieldValue(['addons']) || []), + } + : {}), core: { ...templateConfig.core, // We don't want to show the "What's new" notifications in the sandbox as it can affect E2E tests From c017e0d052210cf50e50e6370acc7f911fdff5ee Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 Jan 2024 10:06:39 +0100 Subject: [PATCH 43/52] Add requested documentation changes --- MIGRATION.md | 75 ++++++------------- docs/addons/writing-presets.md | 4 +- .../main-config-swc-jsx-transform.js.mdx | 4 + docs/writing-tests/test-coverage.md | 46 +++++++++++- 4 files changed, 76 insertions(+), 53 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 567aeaa52e3d..b7191f31a6e5 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -35,7 +35,7 @@ - [Require Svelte 4 and up](#require-svelte-4-and-up) - [Preact](#preact) - [Require Preact 10 and up](#require-preact-10-and-up) - - [No longer adds default babel plugins](#no-longer-adds-default-babel-plugins) + - [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins) - [Web Components](#web-components) - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) - [Deprecations which are now removed](#deprecations-which-are-now-removed) @@ -462,55 +462,35 @@ Referencing stories by `id`, `name` or `story` in the Story block is not possibl #### `framework.options.builder.useSWC` for Webpack5-based projects removed -In Storybook 8.0.0, we have removed the `framework.options.builder.useSWC` option. The `@storybook/builder-webpack5` package is now compiler-agnostic and does not depend on Babel or SWC. +In Storybook 8.0, we have removed the `framework.options.builder.useSWC` option. The `@storybook/builder-webpack5` package is now compiler-agnostic and does not depend on Babel or SWC. -If you want to use SWC, you can install and add the following addon to your Storybook configuration: +If you want to use SWC, you can add the necessary addon: ```sh -npm install --save-dev @storybook/addon-webpack-compiler-swc +npx storybook@latest add @storybook/addon-webpack-compiler-swc ``` -`.storybook/main.js`: - -```js -const config = { - addons: ["@storybook/addon-webpack-compiler-swc"] -}; - -export default config; -``` - -The goal is to make @storybook/builder-webpack5 more leightweight and flexible. We are not locked into a specific compiler or compiler version anymore. This allows us to support Babel 7/8, SWC and other compilers at the same time. +The goal is to make @storybook/builder-webpack5 lighter and more flexible. We are not locked into a specific compiler or compiler version anymore. This allows us to support Babel 7/8, SWC, and other compilers simultaneously. #### Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5` -In Storybook 8.0.0, we have removed the `@storybook/builder-webpack5` package's dependency on Babel. This means that Babel is not preconfigured in `@storybook/builder-webpack5`. If you want to use Babel, you can install and add the following addon to your Storybook configuration: +In Storybook 8.0, we have removed the `@storybook/builder-webpack5` package's dependency on Babel. This means that Babel is not preconfigured in `@storybook/builder-webpack5`. If you want to use Babel, you can add the necessary addon: ```sh -npm install --save-dev @storybook/addon-webpack-compiler-babel -``` - -`.storybook/main.js`: - -```js -const config = { - addons: ["@storybook/addon-webpack-compiler-babel"] -}; - -export default config; +npx storybook@latest add @storybook/addon-webpack-compiler-swc ``` We are doing this to make Storybook more flexible and to allow users to use a variety of compilers like SWC, Babel or even pure TypeScript. #### `framework.options.fastRefresh` for Webpack5-based projects removed -In Storybook 8.0.0, we have removed the `framework.options.fastRefresh` option. +In Storybook 8.0, we have removed the `framework.options.fastRefresh` option. -The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck in the future, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. +The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. -We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs, if it is not already configured or if your fast-refresh configuration is not automatically picked up by Storybook: +We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs if it is not already configured or if Storybook does not automatically pick up your fast-refresh configuration: `package.json`: @@ -561,13 +541,13 @@ export default config; This approach aligns with our philosophy of transparency and puts users in control of their Webpack and Babel configurations. -We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are taking a step closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. +We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are moving closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. -You don't have to add fast refresh to `@storybook/nextjs`, since it is already configured there as a default to match the same experience as `next dev`. +You don't have to add fast refresh to `@storybook/nextjs` since it is already configured there as a default to match the same experience as `next dev`. #### `typescript.skipBabel` removed -We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. +We have removed the `typescript.skipBabel` option in Storybook 8.0. Please use `typescript.skipCompiler` instead. #### Dropping support for Node.js 16 @@ -657,7 +637,9 @@ In the meantime if you have code that relies on `stories.json`, you can find cod The `sb babelrc` command was used to generate a `.babelrc` file for Storybook. This command is now removed. -When you are using Webpack5, Storybook from 8.0 onwards is compiler-agnostic and does not depend on Babel or SWC. Creating a default babelrc file is also pretty tricky, since it depends on your project setup. We recommend that you create a `.babelrc` file yourself and configure it according to your project setup. +From version 8.0 onwards, Storybook is compiler-agnostic and does not depend on Babel or SWC if you use Webpack 5. This move was made to make Storybook more flexible and allow users to configure their own Babel setup according to their project needs and setup, leading to removing the `sb babelrc` command from Storybook. However, if you need to include a custom Babel configuration, we encourage you to create a `.babelrc` file yourself and configure it according to your project setup. + +The reasoning behind is to condense and provide some clarity to what's happened to both the command and what's shifted with the upcoming release. ### Framework-specific changes @@ -710,11 +692,9 @@ Starting in 8.0, Storybook requires Svelte 4 and up. Starting in 8.0, Storybook requires Preact 10 and up. -##### No longer adds default babel plugins - -Until now, Storybook added a set of default babel plugins to the babel config for Preact projects which uses Webpack. +##### No longer adds default Babel plugins -We have configured the runtime automatic import plugin to automatically import `h` from `preact` when needed. This is no longer the case in Storybook 8.0. If you want to use the runtime automatic import plugin to skip unnecessary preact imports, you will need to add it to your babel config yourself. The same applies if you want to use TypeScript with Preact. +Until now, Storybook provided a set of default Babel plugins that were applied to Preact projects using Webpack, including the runtime automatic import plugin to allow Preact's h pragma to render JSX. However, this is no longer the case in Storybook 8.0. If you want to use this plugin, or if you're going to use TypeScript with Preact, you will need to add it to your Babel config. ```js .babelrc @@ -756,20 +736,13 @@ const config = { export default config ``` -We are doing this to apply the same babel config as you have defined in your project. This streamlines the experience of using Storybook with Preact. Additionally, we are not vendor-locked to a specific Babel version anymore, which means that you can upgrade Babel without breaking your Storybook. +We are doing this to apply the same configuration you defined in your project. This streamlines the experience of using Storybook with Preact. Additionally, we are not vendor-locked to a specific Babel version anymore, which means that you can upgrade Babel without breaking your Storybook. #### Web Components ##### Dropping default babel plugins in Webpack5-based projects -Starting in 8.0, Storybook doesn't apply any default babel plugins to Web Components projects. Storybook will pick up the babel configuration you have in place. Before Storybook 8.0, Storybook has added the following babel presets and plugins: - -- `@babel/preset-env` - -The following list of plugins are not necessary anymore, since they are included in `@babel/preset-env`: - -- `@babel/plugin-syntax-dynamic-import` -- `@babel/plugin-syntax-import-meta` +Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web Component projects by default. This is no longer the case, as any Web Components project will use the configuration you've included. Additionally, if you're using either the `@babel/plugin-syntax-dynamic-import` or `@babel/plugin-syntax-import-meta` plugins, you no longer have to include them as they are now part of the @babel/preset-env preset. ### Deprecations which are now removed @@ -878,7 +851,7 @@ To summarize: #### typescript.skipBabel deprecated -We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. +We will remove the `typescript.skipBabel` option in Storybook 8.0. Please use `typescript.skipCompiler` instead. #### Primary doc block accepts of prop @@ -911,7 +884,7 @@ These changes should not be breaking for your users, unless you support Storyboo #### `storyStoreV6` and `storiesOf` is deprecated -`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0. +`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0. If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience. In many cases you can get started with the migration by using two migration scripts: @@ -931,7 +904,7 @@ Alternatively you can build your own `storiesOf` implementation by leveraging th #### `storyIndexers` is replaced with `experimental_indexers` -Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0. +Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0. The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter. @@ -995,7 +968,7 @@ addons.register('my-addon', () => { }); ``` -The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0.0. Please use `addons.add()` instead. +The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0. Please use `addons.add()` instead. The `render` method can now be a `React.FunctionComponent` (without the `children` prop). Storybook will now render it, rather than calling it as a function. diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md index 6d815fe00d71..4c7ae3be3843 100644 --- a/docs/addons/writing-presets.md +++ b/docs/addons/writing-presets.md @@ -56,7 +56,9 @@ To customize Storybook's Babel configuration and add support for additional feat -Please keep in mind that the babel configurations are only applied if the users Storybook Framework uses Babel. If the framework uses another transpiler, like SWC or esbuild, the babel configuration will be ignored. + +The Babel configuration is only applied to frameworks that use Babel internally. If you enable it for a framework that uses a different compiler, like [SWC](https://swc.rs/) or [esbuild](https://esbuild.github.io/), it will be ignored. + ### Builders diff --git a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx index 61d6fa4243c5..82358dfcab13 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx @@ -2,6 +2,10 @@ // .storybook/main.js export default { + framework: { + name: '@storybook/your-framework', + options: {}, + }, swc: (config, options) => ({ jsc: { transform: { diff --git a/docs/writing-tests/test-coverage.md b/docs/writing-tests/test-coverage.md index 038e0d56eee9..453ef66f7f68 100644 --- a/docs/writing-tests/test-coverage.md +++ b/docs/writing-tests/test-coverage.md @@ -95,7 +95,51 @@ By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@s -Available options for Webpack or Vite can be looked up in the [@storybook/addon-coverage documentation](https://github.com/storybookjs/addon-coverage). +**The available options if your project uses Webpack5 are as follows:** + +| Option name | Description | Type | Default | +| ---------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------- | +| `cwd` | Set the working directory | `String` | `process.cwd()` | +| `nycrcPath` | Path to specific nyc config to use instead of automatically searching for a nycconfig. | `string` | - | +| `include` | Glob pattern to include files. It has precedence over the include definition from your nyc config | `Array` | - | +| `exclude` | Glob pattern to exclude files. It has precedence over the exclude definition from your nyc config | `Array` | `defaultExclude` in https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts | +| `extension` | List of supported extensions. It has precedence over the extension definition from your nyc config | `Array` | `['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]` | +| `coverageVariable` | The global variable name that Istanbul will use to store coverage results. | `string` | - | +| `preserveComments` | Indicates whether comments in the code should be preserved during the instrumentation process. | `boolean` | `true` | +| `compact` | Controls whether the output of instrumented code is compacted. Useful for debugging when set to `false`. | `boolean` | `false` | +| `esModules` | Determines whether the code to be instrumented uses ES Module syntax. | `boolean` | `true` | +| `autoWrap` | When set to `true`, wraps program code in a function to enable top-level return statements. | `boolean` | `true` | +| `produceSourceMap` | If `true`, instructs Istanbul to produce a source map for the instrumented code. | `boolean` | `true` | +| `sourceMapUrlCallback` | A callback function that gets invoked with the filename and the source map URL when a source map is generated. | `function` | - | +| `debug` | Enables the debug mode, providing additional logging information during the instrumentation process. | `boolean` | - | + +> **Note:** +> If you're using TypeScript, you can import the type for the options like so: +> +> ```ts +> import type { AddonOptionsWebpack } from '@storybook/addon-coverage'; +> ``` + +**The available options if your project uses Vite are as follows:** + +| Option name | Description | Type | Default | +| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------------------------------------------------------------------------------- | +| `cwd` | Set the working directory | `String` | `process.cwd()` | +| `include` | See [here](https://github.com/istanbuljs/nyc#selecting-files-for-coverage) for more info | `Array` or `string` | `['**']` | +| `exclude` | See [here](https://github.com/istanbuljs/nyc#selecting-files-for-coverage) for more info | `Array` or `string` | [list](https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts) | +| `extension` | List of extensions that nyc should attempt to handle in addition to `.js` | `Array` or `string` | `['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]` | +| `requireEnv ` | Optional boolean to require the environment variable (defaults to VITE_COVERAGE) to equal true in order to instrument the code. Otherwise it will instrument even if env variable is not set. However if requireEnv is not set the instrumentation will stop if the environment variable is equal to false. | `boolean` | `-` | +| `cypress ` | Optional boolean to change the environment variable to CYPRESS_COVERAGE instead of VITE_COVERAGE. For ease of use with `@cypress/code-coverage` coverage | `boolean` | `-` | +| `checkProd ` | Optional boolean to enforce the plugin to skip instrumentation for production environments. Looks at Vite's isProduction key from the ResolvedConfig. | `boolean` | `-` | +| `forceBuildInstrument ` | Optional boolean to enforce the plugin to add instrumentation in build mode. | `boolean` | `false` | +| `nycrcPath ` | Path to specific nyc config to use instead of automatically searching for a nycconfig. This parameter is just passed down to @istanbuljs/load-nyc-config. | `string` | `-` | + +> **Note:** +> If you're using TypeScript, you can import the type for the options like so: +> +> ```ts +> import type { AddonOptionsVite } from '@storybook/addon-coverage'; +> ``` ## What about other coverage reporting tools? From d343aef0fc416101f32b2fab4ce336a4d3ba4dcb Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 Jan 2024 10:28:18 +0100 Subject: [PATCH 44/52] Prettify docs --- docs/snippets/common/main-config-swc-jsx-transform.js.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx index 82358dfcab13..bbb7434a7b2f 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx @@ -2,9 +2,9 @@ // .storybook/main.js export default { - framework: { - name: '@storybook/your-framework', - options: {}, + framework: { + name: '@storybook/your-framework', + options: {}, }, swc: (config, options) => ({ jsc: { From 9796ff8653bdaae5d5d616725aecf5f11686b2a0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 09:31:47 +0100 Subject: [PATCH 45/52] Update docs --- docs/snippets/common/main-config-swc-jsx-transform.ts.mdx | 4 ++++ docs/snippets/common/main-config-swc.js.mdx | 4 ++++ docs/snippets/common/main-config-swc.ts.mdx | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx b/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx index 248049e88e61..33b88f2863ec 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx @@ -5,6 +5,10 @@ import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { + framework: { + name: '@storybook/your-framework', + options: {}, + }, swc: (config, options) => ({ jsc: { transform: { diff --git a/docs/snippets/common/main-config-swc.js.mdx b/docs/snippets/common/main-config-swc.js.mdx index dbc9de018d7c..a3823dadd2be 100644 --- a/docs/snippets/common/main-config-swc.js.mdx +++ b/docs/snippets/common/main-config-swc.js.mdx @@ -2,6 +2,10 @@ // .storybook/main.js export default { + framework: { + name: '@storybook/your-framework', + options: {}, + }, swc: (config, options) => { return { ...config, diff --git a/docs/snippets/common/main-config-swc.ts.mdx b/docs/snippets/common/main-config-swc.ts.mdx index a299764deda9..3cfe3d0bc1e2 100644 --- a/docs/snippets/common/main-config-swc.ts.mdx +++ b/docs/snippets/common/main-config-swc.ts.mdx @@ -6,6 +6,10 @@ import type { Options } from '@swc/core'; import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { + framework: { + name: '@storybook/your-framework', + options: {}, + }, swc: (config: Options, options): Options => { return { ...config, From 27935a5a1682631b73de6bce71c6a855b850c894 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:31:59 +0100 Subject: [PATCH 46/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 80b9a9bf1166..0796d0c0d387 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -496,7 +496,7 @@ In Storybook 8.0, we have removed the `framework.options.fastRefresh` option. The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. -Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. +Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a sub-optimal development experience. We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs if it is not already configured or if Storybook does not automatically pick up your fast-refresh configuration: From d19f82ef3ac45242d8e6a7c1e0374280c7f10857 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:32:09 +0100 Subject: [PATCH 47/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 0796d0c0d387..bde5e2019779 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -498,7 +498,7 @@ The fast-refresh implementation currently relies on the `react-refresh/babel` pa Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a sub-optimal development experience. -We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs if it is not already configured or if Storybook does not automatically pick up your fast-refresh configuration: +We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. The following configuration will configure fast-refresh if Storybook does not automatically pick up your fast-refresh configuration: `package.json`: From 6c6946ecde1cd22ec85febff8c1c765e09834f9c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:32:26 +0100 Subject: [PATCH 48/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index bde5e2019779..77aa9a0d2ec8 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -649,7 +649,7 @@ In the meantime if you have code that relies on `stories.json`, you can find cod The `sb babelrc` command was used to generate a `.babelrc` file for Storybook. This command is now removed. -From version 8.0 onwards, Storybook is compiler-agnostic and does not depend on Babel or SWC if you use Webpack 5. This move was made to make Storybook more flexible and allow users to configure their own Babel setup according to their project needs and setup, leading to removing the `sb babelrc` command from Storybook. However, if you need to include a custom Babel configuration, we encourage you to create a `.babelrc` file yourself and configure it according to your project setup. +From version 8.0 onwards, Storybook is compiler-agnostic and does not depend on Babel or SWC if you use Webpack 5. This move was made to make Storybook more flexible and allow users to configure their own Babel setup according to their project needs and setup. If you need a custom Babel configuration, you can create a `.babelrc` file yourself and configure it according to your project setup. The reasoning behind is to condense and provide some clarity to what's happened to both the command and what's shifted with the upcoming release. From 5b9fc336ecf34b34080c1aefc8e0e9bfea189bd0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:32:33 +0100 Subject: [PATCH 49/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 77aa9a0d2ec8..1e7f1e351a52 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -754,7 +754,7 @@ We are doing this to apply the same configuration you defined in your project. T ##### Dropping default babel plugins in Webpack5-based projects -Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web Component projects by default. This is no longer the case, as any Web Components project will use the configuration you've included. Additionally, if you're using either the `@babel/plugin-syntax-dynamic-import` or `@babel/plugin-syntax-import-meta` plugins, you no longer have to include them as they are now part of the @babel/preset-env preset. +Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web Component projects by default. This is no longer the case, as any Web Components project will use the configuration you've included. Additionally, if you're using either the `@babel/plugin-syntax-dynamic-import` or `@babel/plugin-syntax-import-meta` plugins, you no longer have to include them as they are now part of `@babel/preset-env`. ### Deprecations which are now removed From 8aff1dddb0f283d744aac54d3f1bf1dabf043b85 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:35:07 +0100 Subject: [PATCH 50/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index fd5e8b01942d..14c8b3bf4819 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -715,7 +715,7 @@ Starting in 8.0, Storybook requires Preact 10 and up. ##### No longer adds default Babel plugins -Until now, Storybook provided a set of default Babel plugins that were applied to Preact projects using Webpack, including the runtime automatic import plugin to allow Preact's h pragma to render JSX. However, this is no longer the case in Storybook 8.0. If you want to use this plugin, or if you're going to use TypeScript with Preact, you will need to add it to your Babel config. +Until now, Storybook provided a set of default Babel plugins that were applied to Preact projects using Webpack, including the runtime automatic import plugin to allow Preact's `h` pragma to render JSX. However, this is no longer the case in Storybook 8.0. If you want to use this plugin, or if you're going to use TypeScript with Preact, you will need to add it to your Babel config. ```js .babelrc From bd4aa2c8e6a85726f020b7bc792b26ec4c4b053a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:35:15 +0100 Subject: [PATCH 51/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 14c8b3bf4819..2604e41639b6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -558,7 +558,7 @@ export default config; This approach aligns with our philosophy of transparency and puts users in control of their Webpack and Babel configurations. -We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are moving closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. +We want to minimize magic behind the scenes. By removing `framework.options.fastRefresh`, we are reducing unnecessary configuration. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. You don't have to add fast refresh to `@storybook/nextjs` since it is already configured there as a default to match the same experience as `next dev`. From 618d45c67e17cca6352a9d896d49247cd02cbad8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Jan 2024 13:35:21 +0100 Subject: [PATCH 52/52] Update MIGRATION.md Co-authored-by: Michael Shilman --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 2604e41639b6..99c1b5fdffc3 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -503,7 +503,7 @@ We are doing this to make Storybook more flexible and to allow users to use a va In Storybook 8.0, we have removed the `framework.options.fastRefresh` option. -The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. +The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it locks users into a specific Babel version. This could become a problem when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a sub-optimal development experience.