From 0688ef09b7e809cbc27633930112a37c1b2e89e2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:40:37 +0100 Subject: [PATCH] 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