From 534e49cfd0ba4c8bb778249638b92c6f49e70ef7 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 30 Oct 2023 16:47:24 +1100 Subject: [PATCH 001/265] Initial run-through deleting all ssv6 code --- .../builder-vite/src/codegen-entries.ts | 48 - .../builder-vite/src/codegen-iframe-script.ts | 116 -- .../src/codegen-importfn-script.ts | 2 +- .../src/plugins/code-generator-plugin.ts | 17 +- .../src/preview/iframe-webpack.config.ts | 77 +- .../templates/virtualModuleEntry.template.js | 65 - .../templates/virtualModuleStory.template.js | 3 - .../core-server/src/__for-testing__/main.ts | 3 - code/lib/core-server/src/build-static.ts | 13 +- code/lib/core-server/src/dev-server.ts | 7 - .../core-server/src/presets/common-preset.ts | 1 - .../src/utils/StoryIndexGenerator.ts | 15 +- .../utils/__tests__/index-extraction.test.ts | 1 - .../src/utils/getStoryIndexGenerator.ts | 9 +- .../src/utils/stories-json.test.ts | 175 -- code/lib/csf-tools/src/CsfFile.ts | 4 +- code/lib/manager-api/src/modules/stories.ts | 6 +- .../lib/manager-api/src/tests/stories.test.ts | 1 - code/lib/preview-api/README-preview-web.md | 20 - code/lib/preview-api/src/client-api.ts | 4 - code/lib/preview-api/src/core-client.ts | 4 - code/lib/preview-api/src/index.ts | 18 - .../src/modules/client-api/ClientApi.test.ts | 55 - .../src/modules/client-api/ClientApi.ts | 375 ----- .../modules/client-api/StoryStoreFacade.ts | 256 --- .../src/modules/client-api/index.ts | 16 - .../src/modules/client-api/queryparams.ts | 17 - .../modules/core-client/executeLoadable.ts | 110 -- .../src/modules/core-client/index.ts | 5 - .../src/modules/core-client/start.test.ts | 1436 ----------------- .../src/modules/core-client/start.ts | 176 -- .../src/modules/preview-web/Preview.tsx | 14 +- .../PreviewWeb.integration.test.ts | 4 +- .../modules/preview-web/PreviewWeb.test.ts | 4 - .../preview-web/PreviewWithSelection.tsx | 30 +- code/lib/preview/README.md | 20 - code/lib/types/src/modules/core-common.ts | 10 - .../src/components/preview/Preview.tsx | 2 +- code/ui/manager/src/runtime.ts | 2 +- docs/api/main-config-features.md | 64 +- docs/api/main-config-stories.md | 2 +- docs/builders/webpack.md | 1 - 42 files changed, 49 insertions(+), 3159 deletions(-) delete mode 100644 code/builders/builder-vite/src/codegen-entries.ts delete mode 100644 code/builders/builder-vite/src/codegen-iframe-script.ts delete mode 100644 code/builders/builder-webpack5/templates/virtualModuleEntry.template.js delete mode 100644 code/builders/builder-webpack5/templates/virtualModuleStory.template.js delete mode 100644 code/lib/preview-api/src/client-api.ts delete mode 100644 code/lib/preview-api/src/core-client.ts delete mode 100644 code/lib/preview-api/src/modules/client-api/ClientApi.test.ts delete mode 100644 code/lib/preview-api/src/modules/client-api/ClientApi.ts delete mode 100644 code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts delete mode 100644 code/lib/preview-api/src/modules/client-api/index.ts delete mode 100644 code/lib/preview-api/src/modules/client-api/queryparams.ts delete mode 100644 code/lib/preview-api/src/modules/core-client/executeLoadable.ts delete mode 100644 code/lib/preview-api/src/modules/core-client/index.ts delete mode 100644 code/lib/preview-api/src/modules/core-client/start.test.ts delete mode 100644 code/lib/preview-api/src/modules/core-client/start.ts diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts deleted file mode 100644 index 44c3163b1def..000000000000 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { loadPreviewOrConfigFile } from '@storybook/core-common'; -import type { Options } from '@storybook/types'; -import slash from 'slash'; -import { listStories } from './list-stories'; - -const absoluteFilesToImport = async ( - files: string[], - name: string, - normalizePath: (id: string) => string -) => - files - .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`) - .join('\n'); - -export async function generateVirtualStoryEntryCode(options: Options) { - const { normalizePath } = await import('vite'); - const storyEntries = await listStories(options); - const resolveMap = storyEntries.reduce>( - (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), - {} - ); - const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); - - return ` - ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)} - - function loadable(key) { - return {${modules}}[key]; - } - - Object.assign(loadable, { - keys: () => (${JSON.stringify(Object.keys(resolveMap))}), - resolve: (key) => (${JSON.stringify(resolveMap)}[key]) - }); - - export function configStories(configure) { - configure(loadable, { hot: import.meta.hot }, false); - } - `.trim(); -} - -export async function generatePreviewEntryCode({ configDir }: Options) { - const previewFile = loadPreviewOrConfigFile({ configDir }); - if (!previewFile) return ''; - - return `import * as preview from '${slash(previewFile)}'; - export default preview;`; -} diff --git a/code/builders/builder-vite/src/codegen-iframe-script.ts b/code/builders/builder-vite/src/codegen-iframe-script.ts deleted file mode 100644 index 94400f57a017..000000000000 --- a/code/builders/builder-vite/src/codegen-iframe-script.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { getRendererName } from '@storybook/core-common'; -import type { Options, PreviewAnnotation } from '@storybook/types'; -import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names'; -import { processPreviewAnnotation } from './utils/process-preview-annotation'; - -export async function generateIframeScriptCode(options: Options, projectRoot: string) { - const { presets } = options; - const rendererName = await getRendererName(options); - - const previewAnnotations = await presets.apply( - 'previewAnnotations', - [], - options - ); - const configEntries = [...previewAnnotations] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)); - - const filesToImport = (files: string[], name: string) => - files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n'); - - const importArray = (name: string, length: number) => - new Array(length).fill(0).map((_, i) => `${name}_${i}`); - - // noinspection UnnecessaryLocalVariableJS - /** @todo Inline variable and remove `noinspection` */ - // language=JavaScript - const code = ` - // Ensure that the client API is initialized by the framework before any other iframe code - // is loaded. That way our client-apis can assume the existence of the API+store - import { configure } from '${rendererName}'; - - import { logger } from '@storybook/client-logger'; - import * as previewApi from "@storybook/preview-api"; - ${filesToImport(configEntries, 'config')} - - import * as preview from '${virtualPreviewFile}'; - import { configStories } from '${virtualStoriesFile}'; - - const { - addDecorator, - addParameters, - addLoader, - addArgs, - addArgTypes, - addStepRunner, - addArgTypesEnhancer, - addArgsEnhancer, - setGlobalRender, - } = previewApi; - - const configs = [${importArray('config', configEntries.length) - .concat('preview.default') - .join(',')}].filter(Boolean) - - configs.map(config => config.default ? config.default : config).forEach(config => { - Object.keys(config).forEach((key) => { - const value = config[key]; - switch (key) { - case 'args': { - return addArgs(value); - } - case 'argTypes': { - return addArgTypes(value); - } - case 'decorators': { - return value.forEach((decorator) => addDecorator(decorator, false)); - } - case 'loaders': { - return value.forEach((loader) => addLoader(loader, false)); - } - case 'parameters': { - return addParameters({ ...value }, false); - } - case 'argTypesEnhancers': { - return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); - } - case 'argsEnhancers': { - return value.forEach((enhancer) => addArgsEnhancer(enhancer)) - } - case 'render': { - return setGlobalRender(value) - } - case 'globals': - case 'globalTypes': { - const v = {}; - v[key] = value; - return addParameters(v, false); - } - case 'decorateStory': - case 'applyDecorators': - case 'renderToDOM': // deprecated - case 'renderToCanvas': { - return null; // This key is not handled directly in v6 mode. - } - case 'runStep': { - return addStepRunner(value); - } - default: { - // eslint-disable-next-line prefer-template - return console.log(key + ' was not supported :( !'); - } - } - }); - }) - - /* TODO: not quite sure what to do with this, to fix HMR - if (import.meta.hot) { - import.meta.hot.accept(); - } - */ - - configStories(configure); - `.trim(); - return code; -} diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index 5df14d875f25..85db4dc2954c 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -31,7 +31,7 @@ async function toImportFn(stories: string[]) { const ext = path.extname(file); const relativePath = normalizePath(path.relative(process.cwd(), file)); if (!['.js', '.jsx', '.ts', '.tsx', '.mdx', '.svelte', '.vue'].includes(ext)) { - logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`); + logger.warn(`Cannot process ${ext} file: ${relativePath}`); } return ` '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`; diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts index c27d7c73ea4a..2aa64057592b 100644 --- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts @@ -4,10 +4,8 @@ import * as fs from 'fs'; import type { Plugin } from 'vite'; import type { Options } from '@storybook/types'; import { transformIframeHtml } from '../transform-iframe-html'; -import { generateIframeScriptCode } from '../codegen-iframe-script'; import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script'; import { generateImportFnScriptCode } from '../codegen-importfn-script'; -import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from '../codegen-entries'; import { generateAddonSetupCode } from '../codegen-set-addon-channel'; import { @@ -90,27 +88,16 @@ export function codeGeneratorPlugin(options: Options): Plugin { return undefined; }, async load(id, config) { - const storyStoreV7 = options.features?.storyStoreV7; if (id === virtualStoriesFile) { - if (storyStoreV7) { - return generateImportFnScriptCode(options); - } - return generateVirtualStoryEntryCode(options); + return generateImportFnScriptCode(options); } if (id === virtualAddonSetupFile) { return generateAddonSetupCode(); } - if (id === virtualPreviewFile && !storyStoreV7) { - return generatePreviewEntryCode(options); - } - if (id === virtualFileId) { - if (storyStoreV7) { - return generateModernIframeScriptCode(options, projectRoot); - } - return generateIframeScriptCode(options, projectRoot); + return generateModernIframeScriptCode(options, projectRoot); } if (id === iframeId) { 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 55e0d733aa9e..003839dccd40 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -132,68 +132,25 @@ export default async ( ].filter(Boolean); const virtualModuleMapping: Record = {}; - if (features?.storyStoreV7) { - const storiesFilename = 'storybook-stories.js'; - const storiesPath = resolve(join(workingDir, storiesFilename)); + const storiesFilename = 'storybook-stories.js'; + const storiesPath = resolve(join(workingDir, storiesFilename)); - const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; - virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); - const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); - virtualModuleMapping[configEntryPath] = handlebars( - await readTemplate( - require.resolve( - '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' - ) - ), - { - storiesFilename, - previewAnnotations, - } - // We need to double escape `\` for webpack. We may have some in windows paths - ).replace(/\\/g, '\\\\'); - entries.push(configEntryPath); - } else { - const rendererName = await getRendererName(options); - - const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js')); - virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`; - entries.push(rendererInitEntry); - - const entryTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') - ); - - previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { - if (!previewAnnotationFilename) return; - - // Ensure that relative paths end up mapped to a filename in the cwd, so a later import - // of the `previewAnnotationFilename` in the template works. - const entryFilename = previewAnnotationFilename.startsWith('.') - ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js` - : `${previewAnnotationFilename}-generated-config-entry.js`; - // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM - // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173 - virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { - previewAnnotationFilename, - }); - entries.push(entryFilename); - }); - if (stories.length > 0) { - const storyTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js') - ); - // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs - // in the user's webpack mode, which may be strict about the use of require/import. - // See https://github.com/storybookjs/storybook/issues/14877 - const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`)); - virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { - rendererName, - }) - // Make sure we also replace quotes for this one - .replace("'{{stories}}'", stories.map(toRequireContextString).join(',')); - entries.push(storiesFilename); + const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; + virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); + const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); + virtualModuleMapping[configEntryPath] = handlebars( + await readTemplate( + require.resolve( + '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' + ) + ), + { + storiesFilename, + previewAnnotations, } - } + // We need to double escape `\` for webpack. We may have some in windows paths + ).replace(/\\/g, '\\\\'); + entries.push(configEntryPath); const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel; const tsCheckOptions = typescriptOptions.checkOptions || {}; diff --git a/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js b/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js deleted file mode 100644 index 083a3c5f16c4..000000000000 --- a/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js +++ /dev/null @@ -1,65 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import { - addDecorator, - addParameters, - addLoader, - addArgs, - addArgTypes, - addStepRunner, - addArgsEnhancer, - addArgTypesEnhancer, - setGlobalRender, -} from '@storybook/preview-api'; -import * as previewAnnotations from '{{previewAnnotationFilename}}'; - -const config = previewAnnotations.default ?? previewAnnotations; - -Object.keys(config).forEach((key) => { - const value = config[key]; - switch (key) { - case 'args': { - return addArgs(value); - } - case 'argTypes': { - return addArgTypes(value); - } - case 'decorators': { - return value.forEach((decorator) => addDecorator(decorator, false)); - } - case 'loaders': { - return value.forEach((loader) => addLoader(loader, false)); - } - case 'parameters': { - return addParameters({ ...value }, false); - } - case 'argTypesEnhancers': { - return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); - } - case 'argsEnhancers': { - return value.forEach((enhancer) => addArgsEnhancer(enhancer)); - } - case 'render': { - return setGlobalRender(value); - } - case 'globals': - case 'globalTypes': { - const v = {}; - v[key] = value; - return addParameters(v, false); - } - case '__namedExportsOrder': - case 'decorateStory': - case 'renderToDOM': // deprecated - case 'renderToCanvas': { - return null; // This key is not handled directly in v6 mode. - } - case 'runStep': { - return addStepRunner(value); - } - default: { - return console.log( - `Unknown key '${key}' exported by preview annotation file '{{previewAnnotationFilename}}'` - ); - } - } -}); diff --git a/code/builders/builder-webpack5/templates/virtualModuleStory.template.js b/code/builders/builder-webpack5/templates/virtualModuleStory.template.js deleted file mode 100644 index f7a668cab55f..000000000000 --- a/code/builders/builder-webpack5/templates/virtualModuleStory.template.js +++ /dev/null @@ -1,3 +0,0 @@ -const { configure } = require('{{rendererName}}'); - -configure(['{{stories}}'], module, false); diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts index 988f5ba319fd..2643a4582bd5 100644 --- a/code/lib/core-server/src/__for-testing__/main.ts +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -29,9 +29,6 @@ const config: StorybookConfig = { disableTelemetry: true, }, logLevel: 'debug', - features: { - storyStoreV7: false, - }, framework: { name: '@storybook/react-webpack5', options: { diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 55dc59fbaac1..26ad52d47626 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -124,13 +124,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption presets.apply('docs', {}), ]); - if (features?.storyStoreV7 === false) { - deprecate( - dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead. - - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated` - ); - } - const fullOptions: Options = { ...options, presets, @@ -164,7 +157,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption let initializedStoryIndexGenerator: Promise = Promise.resolve(undefined); - if ((features?.buildStoriesJson || features?.storyStoreV7) && !options.ignorePreview) { + if (!options.ignorePreview) { const workingDir = process.cwd(); const directories = { configDir: options.configDir, @@ -176,8 +169,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption storyIndexers: deprecatedStoryIndexers, indexers, docs: docsOptions, - storiesV2Compatibility: !features?.storyStoreV7, - storyStoreV7: !!features?.storyStoreV7, + storiesV2Compatibility: false, + storyStoreV7: true, }); initializedStoryIndexGenerator = generator.initialize().then(() => generator); diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts index 1e8de546880e..97993a1dcc17 100644 --- a/code/lib/core-server/src/dev-server.ts +++ b/code/lib/core-server/src/dev-server.ts @@ -38,13 +38,6 @@ export async function storybookDevServer(options: Options) { getServerChannel(server) ); - if (features?.storyStoreV7 === false) { - deprecate( - dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead. - - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated` - ); - } - let indexError: Error | undefined; // try get index generator, if failed, send telemetry without storyCount, then rethrow the error const initializedStoryIndexGenerator: Promise = diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 347713e03aaf..5e50b89defff 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -190,7 +190,6 @@ export const features = async ( ...existing, warnOnLegacyHierarchySeparator: true, buildStoriesJson: false, - storyStoreV7: true, argTypeTargetsV7: true, legacyDecoratorFileOrder: false, }); diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 0f847b8917a1..4ed00b9ebb09 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -429,11 +429,6 @@ export class StoryIndexGenerator { async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) { const relativePath = path.relative(this.options.workingDir, absolutePath); try { - invariant( - this.options.storyStoreV7, - `You cannot use \`.mdx\` files without using \`storyStoreV7\`.` - ); - const normalizedPath = normalizeStoryPath(relativePath); const importPath = slash(normalizedPath); @@ -613,13 +608,9 @@ export class StoryIndexGenerator { async sortStories(entries: StoryIndex['entries']) { const sortableStories = Object.values(entries); - // Skip sorting if we're in v6 mode because we don't have - // all the info we need here - if (this.options.storyStoreV7) { - const storySortParameter = await this.getStorySortParameter(); - const fileNameOrder = this.storyFileNames(); - sortStoriesV7(sortableStories, storySortParameter, fileNameOrder); - } + const storySortParameter = await this.getStorySortParameter(); + const fileNameOrder = this.storyFileNames(); + sortStoriesV7(sortableStories, storySortParameter, fileNameOrder); return sortableStories.reduce((acc, item) => { acc[item.id] = item; diff --git a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts index 39820b3e2c17..84ff37e2219e 100644 --- a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts +++ b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts @@ -19,7 +19,6 @@ const options: StoryIndexGeneratorOptions = { storyIndexers: [], indexers: [], storiesV2Compatibility: false, - storyStoreV7: true, docs: { defaultName: 'docs', autodocs: false }, }; diff --git a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts index 952edb507824..9153fb0a5bb0 100644 --- a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts @@ -7,17 +7,12 @@ import { router } from './router'; export async function getStoryIndexGenerator( features: { - buildStoriesJson?: boolean; - storyStoreV7?: boolean; argTypeTargetsV7?: boolean; warnOnLegacyHierarchySeparator?: boolean; }, options: Options, serverChannel: ServerChannel ): Promise { - if (!features?.buildStoriesJson && !features?.storyStoreV7) { - return undefined; - } const workingDir = process.cwd(); const directories = { configDir: options.configDir, @@ -35,8 +30,8 @@ export async function getStoryIndexGenerator( indexers: await indexers, docs: await docsOptions, workingDir, - storiesV2Compatibility: !features?.storyStoreV7, - storyStoreV7: features.storyStoreV7 ?? false, + storiesV2Compatibility: false, // FIXME -- drop this + storyStoreV7: true, // FIXME -- drop this }); const initializedStoryIndexGenerator = generator.initialize().then(() => generator); diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index e1f0b1f6d613..ad5f6064f158 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -710,181 +710,6 @@ describe('useStoriesJson', () => { `); }); - it('disallows .mdx files without storyStoreV7', async () => { - const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; - useStoriesJson({ - router, - initializedStoryIndexGenerator: getInitializedStoryIndexGenerator({ - storyStoreV7: false, - }), - workingDir, - serverChannel: mockServerChannel, - normalizedStories, - }); - - expect(use).toHaveBeenCalledTimes(2); - const route = use.mock.calls[1][1]; - - await route(request, response); - - expect(send).toHaveBeenCalledTimes(1); - expect(send.mock.calls[0][0]).toMatchInlineSnapshot(` - "Unable to index files: - - ./src/docs2/ComponentReference.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/MetaOf.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/NoTitle.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/SecondMetaOf.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/Template.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/Title.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`." - `); - }); - - it('allows disabling storyStoreV7 if no .mdx files are used', async () => { - const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; - useStoriesJson({ - router, - initializedStoryIndexGenerator: getInitializedStoryIndexGenerator( - { storyStoreV7: false }, - normalizedStories.slice(0, 1) - ), - workingDir, - serverChannel: mockServerChannel, - normalizedStories, - }); - - expect(use).toHaveBeenCalledTimes(2); - const route = use.mock.calls[1][1]; - - await route(request, response); - - expect(send).toHaveBeenCalledTimes(1); - expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(` - Object { - "stories": Object { - "a--story-one": Object { - "id": "a--story-one", - "importPath": "./src/A.stories.js", - "kind": "A", - "name": "Story One", - "parameters": Object { - "__id": "a--story-one", - "docsOnly": false, - "fileName": "./src/A.stories.js", - }, - "story": "Story One", - "tags": Array [ - "component-tag", - "story-tag", - "story", - ], - "title": "A", - }, - "b--story-one": Object { - "id": "b--story-one", - "importPath": "./src/B.stories.ts", - "kind": "B", - "name": "Story One", - "parameters": Object { - "__id": "b--story-one", - "docsOnly": false, - "fileName": "./src/B.stories.ts", - }, - "story": "Story One", - "tags": Array [ - "autodocs", - "story", - ], - "title": "B", - }, - "d--story-one": Object { - "id": "d--story-one", - "importPath": "./src/D.stories.jsx", - "kind": "D", - "name": "Story One", - "parameters": Object { - "__id": "d--story-one", - "docsOnly": false, - "fileName": "./src/D.stories.jsx", - }, - "story": "Story One", - "tags": Array [ - "autodocs", - "story", - ], - "title": "D", - }, - "first-nested-deeply-f--story-one": Object { - "id": "first-nested-deeply-f--story-one", - "importPath": "./src/first-nested/deeply/F.stories.js", - "kind": "first-nested/deeply/F", - "name": "Story One", - "parameters": Object { - "__id": "first-nested-deeply-f--story-one", - "docsOnly": false, - "fileName": "./src/first-nested/deeply/F.stories.js", - }, - "story": "Story One", - "tags": Array [ - "story", - ], - "title": "first-nested/deeply/F", - }, - "h--story-one": Object { - "id": "h--story-one", - "importPath": "./src/H.stories.mjs", - "kind": "H", - "name": "Story One", - "parameters": Object { - "__id": "h--story-one", - "docsOnly": false, - "fileName": "./src/H.stories.mjs", - }, - "story": "Story One", - "tags": Array [ - "autodocs", - "story", - ], - "title": "H", - }, - "nested-button--story-one": Object { - "id": "nested-button--story-one", - "importPath": "./src/nested/Button.stories.ts", - "kind": "nested/Button", - "name": "Story One", - "parameters": Object { - "__id": "nested-button--story-one", - "docsOnly": false, - "fileName": "./src/nested/Button.stories.ts", - }, - "story": "Story One", - "tags": Array [ - "component-tag", - "story", - ], - "title": "nested/Button", - }, - "second-nested-g--story-one": Object { - "id": "second-nested-g--story-one", - "importPath": "./src/second-nested/G.stories.ts", - "kind": "second-nested/G", - "name": "Story One", - "parameters": Object { - "__id": "second-nested-g--story-one", - "docsOnly": false, - "fileName": "./src/second-nested/G.stories.ts", - }, - "story": "Story One", - "tags": Array [ - "story", - ], - "title": "second-nested/G", - }, - }, - "v": 3, - } - `); - }); - it('can handle simultaneous access', async () => { const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts index 15ab39abdc45..a8aa2aed903d 100644 --- a/code/lib/csf-tools/src/CsfFile.ts +++ b/code/lib/csf-tools/src/CsfFile.ts @@ -455,8 +455,8 @@ export class CsfFile { throw new Error(dedent` Unexpected \`storiesOf\` usage: ${formatLocation(node, self._fileName)}. - In SB7, we use the next-generation \`storyStoreV7\` by default, which does not support \`storiesOf\`. - More info, with details about how to opt-out here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev7-enabled-by-default + In SB8, we no longer support \`storiesOf\`. + More info, with details about how to migrate here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#FIXME `); } }, diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 07d6fb702d30..08019e849bef 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -814,10 +814,8 @@ export const init: ModuleFn = ({ filters: config?.sidebar?.filters || {}, }, init: async () => { - if (FEATURES?.storyStoreV7) { - provider.channel.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex()); - await api.fetchIndex(); - } + provider.channel.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex()); + await api.fetchIndex(); }, }; }; diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index a6617bce9f41..c84d80044734 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -40,7 +40,6 @@ jest.mock('@storybook/global', () => ({ global: { ...globalThis, fetch: jest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), - FEATURES: { storyStoreV7: true }, CONFIG_TYPE: 'DEVELOPMENT', }, })); diff --git a/code/lib/preview-api/README-preview-web.md b/code/lib/preview-api/README-preview-web.md index cb44e3b4b07e..e5c237775ce0 100644 --- a/code/lib/preview-api/README-preview-web.md +++ b/code/lib/preview-api/README-preview-web.md @@ -10,34 +10,14 @@ The preview's job is: 3. Render the current selection to the web view in either story or docs mode. -## V7 Store vs Legacy (V6) - -The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled. - -However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event. - -In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered. - ## Initialization -The preview is `initialized` in two ways. - -### V7 Mode: - - `importFn` - is an async `import()` function - `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error. - No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events. -### V6 Mode - -- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details. -- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi` -- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added. - -See `client-api` for more details on this process. - ## Story Rendering and interruptions The Preview is split into three parts responsible for state management: diff --git a/code/lib/preview-api/src/client-api.ts b/code/lib/preview-api/src/client-api.ts deleted file mode 100644 index c133a47e3570..000000000000 --- a/code/lib/preview-api/src/client-api.ts +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable @typescript-eslint/triple-slash-reference */ -/// - -export * from './modules/client-api'; diff --git a/code/lib/preview-api/src/core-client.ts b/code/lib/preview-api/src/core-client.ts deleted file mode 100644 index 18db05321a65..000000000000 --- a/code/lib/preview-api/src/core-client.ts +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable @typescript-eslint/triple-slash-reference */ -/// - -export * from './modules/core-client'; diff --git a/code/lib/preview-api/src/index.ts b/code/lib/preview-api/src/index.ts index db1f05d29870..2abcec8de9e1 100644 --- a/code/lib/preview-api/src/index.ts +++ b/code/lib/preview-api/src/index.ts @@ -41,22 +41,6 @@ export { DocsContext } from './preview-web'; */ export { simulatePageLoad, simulateDOMContentLoaded } from './preview-web'; -/** - * STORIES API - */ -export { - addArgTypes, - addArgTypesEnhancer, - addArgs, - addArgsEnhancer, - addDecorator, - addLoader, - addParameters, - addStepRunner, -} from './client-api'; -export { getQueryParam, getQueryParams } from './client-api'; -export { setGlobalRender } from './client-api'; - export { combineArgs, combineParameters, @@ -83,7 +67,5 @@ export type { PropDescriptor } from './store'; /** * STORIES API */ -export { ClientApi } from './client-api'; export { StoryStore } from './store'; export { Preview, PreviewWeb } from './preview-web'; -export { start } from './core-client'; diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.test.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.test.ts deleted file mode 100644 index 65f4d718a9ed..000000000000 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.test.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { addons, mockChannel } from '../addons'; -import { ClientApi } from './ClientApi'; - -beforeEach(() => { - addons.setChannel(mockChannel()); -}); - -describe('ClientApi', () => { - describe('getStoryIndex', () => { - it('should remember the order that files were added in', async () => { - const clientApi = new ClientApi(); - const store = { - processCSFFileWithCache: jest.fn(() => ({ meta: { title: 'title' } })), - storyFromCSFFile: jest.fn(({ storyId }) => ({ - id: storyId, - parameters: { fileName: storyId.split('-')[0].replace('kind', 'file') }, - })), - }; - clientApi.storyStore = store as any; - - let disposeCallback: () => void = () => {}; - const module1 = { - id: 'file1', - hot: { - data: {}, - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - const module2 = { - id: 'file2', - }; - clientApi.storiesOf('kind1', module1 as unknown as NodeModule).add('story1', jest.fn()); - clientApi.storiesOf('kind2', module2 as unknown as NodeModule).add('story2', jest.fn()); - // This gets called by configure - // eslint-disable-next-line no-underscore-dangle - clientApi._loadAddedExports(); - - expect(Object.keys(clientApi.getStoryIndex().entries)).toEqual([ - 'kind1--story1', - 'kind2--story2', - ]); - - disposeCallback(); - clientApi.storiesOf('kind1', module1 as unknown as NodeModule).add('story1', jest.fn()); - await new Promise((r) => setTimeout(r, 0)); - expect(Object.keys(clientApi.getStoryIndex().entries)).toEqual([ - 'kind1--story1', - 'kind2--story2', - ]); - }); - }); -}); diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts deleted file mode 100644 index 83a2ba0cd6b0..000000000000 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ /dev/null @@ -1,375 +0,0 @@ -/* eslint-disable no-underscore-dangle */ - -import { dedent } from 'ts-dedent'; -import { global } from '@storybook/global'; -import { logger } from '@storybook/client-logger'; -import { toId, sanitize } from '@storybook/csf'; -import type { - Args, - StepRunner, - ArgTypes, - Renderer, - DecoratorFunction, - Parameters, - ArgTypesEnhancer, - ArgsEnhancer, - LoaderFunction, - StoryFn, - Globals, - GlobalTypes, - Addon_ClientApiAddons, - Addon_StoryApi, - NormalizedComponentAnnotations, - Path, - ModuleImportFn, - ModuleExports, -} from '@storybook/types'; -import type { StoryStore } from '../../store'; -import { combineParameters, composeStepRunners, normalizeInputTypes } from '../../store'; - -import { StoryStoreFacade } from './StoryStoreFacade'; - -const warningAlternatives = { - addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`, - addParameters: `Instead, use \`export const parameters = {};\` in your \`preview.js\`.`, - addLoader: `Instead, use \`export const loaders = [];\` in your \`preview.js\`.`, - addArgs: '', - addArgTypes: '', - addArgsEnhancer: '', - addArgTypesEnhancer: '', - addStepRunner: '', - getGlobalRender: '', - setGlobalRender: '', -}; - -const checkMethod = (method: keyof typeof warningAlternatives) => { - if (global.FEATURES?.storyStoreV7) { - throw new Error( - dedent`You cannot use \`${method}\` with the new Story Store. - - ${warningAlternatives[method]}` - ); - } - - if (!global.__STORYBOOK_CLIENT_API__) { - throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`); - } -}; - -export const addDecorator = (decorator: DecoratorFunction) => { - checkMethod('addDecorator'); - global.__STORYBOOK_CLIENT_API__?.addDecorator(decorator); -}; - -export const addParameters = (parameters: Parameters) => { - checkMethod('addParameters'); - global.__STORYBOOK_CLIENT_API__?.addParameters(parameters); -}; - -export const addLoader = (loader: LoaderFunction) => { - checkMethod('addLoader'); - global.__STORYBOOK_CLIENT_API__?.addLoader(loader); -}; - -export const addArgs = (args: Args) => { - checkMethod('addArgs'); - global.__STORYBOOK_CLIENT_API__?.addArgs(args); -}; - -export const addArgTypes = (argTypes: ArgTypes) => { - checkMethod('addArgTypes'); - global.__STORYBOOK_CLIENT_API__?.addArgTypes(argTypes); -}; - -export const addArgsEnhancer = (enhancer: ArgsEnhancer) => { - checkMethod('addArgsEnhancer'); - global.__STORYBOOK_CLIENT_API__?.addArgsEnhancer(enhancer); -}; - -export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { - checkMethod('addArgTypesEnhancer'); - global.__STORYBOOK_CLIENT_API__?.addArgTypesEnhancer(enhancer); -}; - -export const addStepRunner = (stepRunner: StepRunner) => { - checkMethod('addStepRunner'); - global.__STORYBOOK_CLIENT_API__?.addStepRunner(stepRunner); -}; - -export const getGlobalRender = () => { - checkMethod('getGlobalRender'); - return global.__STORYBOOK_CLIENT_API__?.facade.projectAnnotations.render; -}; - -export const setGlobalRender = (render: StoryStoreFacade['projectAnnotations']['render']) => { - checkMethod('setGlobalRender'); - if (global.__STORYBOOK_CLIENT_API__) { - global.__STORYBOOK_CLIENT_API__.facade.projectAnnotations.render = render; - } -}; - -const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']); -export class ClientApi { - facade: StoryStoreFacade; - - storyStore?: StoryStore; - - private addons: Addon_ClientApiAddons; - - onImportFnChanged?: ({ importFn }: { importFn: ModuleImportFn }) => void; - - // If we don't get passed modules so don't know filenames, we can - // just use numeric indexes - private lastFileName = 0; - - constructor({ storyStore }: { storyStore?: StoryStore } = {}) { - this.facade = new StoryStoreFacade(); - - this.addons = {}; - - this.storyStore = storyStore; - } - - importFn(path: Path) { - return this.facade.importFn(path); - } - - getStoryIndex() { - if (!this.storyStore) { - throw new Error('Cannot get story index before setting storyStore'); - } - return this.facade.getStoryIndex(this.storyStore); - } - - addDecorator = (decorator: DecoratorFunction) => { - this.facade.projectAnnotations.decorators?.push(decorator); - }; - - addParameters = ({ - globals, - globalTypes, - ...parameters - }: Parameters & { globals?: Globals; globalTypes?: GlobalTypes }) => { - this.facade.projectAnnotations.parameters = combineParameters( - this.facade.projectAnnotations.parameters, - parameters - ); - if (globals) { - this.facade.projectAnnotations.globals = { - ...this.facade.projectAnnotations.globals, - ...globals, - }; - } - if (globalTypes) { - this.facade.projectAnnotations.globalTypes = { - ...this.facade.projectAnnotations.globalTypes, - ...normalizeInputTypes(globalTypes), - }; - } - }; - - addStepRunner = (stepRunner: StepRunner) => { - this.facade.projectAnnotations.runStep = composeStepRunners( - [this.facade.projectAnnotations.runStep, stepRunner].filter(Boolean) as StepRunner[] - ); - }; - - addLoader = (loader: LoaderFunction) => { - this.facade.projectAnnotations.loaders?.push(loader); - }; - - addArgs = (args: Args) => { - this.facade.projectAnnotations.args = { - ...this.facade.projectAnnotations.args, - ...args, - }; - }; - - addArgTypes = (argTypes: ArgTypes) => { - this.facade.projectAnnotations.argTypes = { - ...this.facade.projectAnnotations.argTypes, - ...normalizeInputTypes(argTypes), - }; - }; - - addArgsEnhancer = (enhancer: ArgsEnhancer) => { - this.facade.projectAnnotations.argsEnhancers?.push(enhancer); - }; - - addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { - this.facade.projectAnnotations.argTypesEnhancers?.push(enhancer); - }; - - // Because of the API of `storiesOf().add()` we don't have a good "end" call for a - // storiesOf file to finish adding stories, and us to load it into the facade as a - // single psuedo-CSF file. So instead we just keep collecting the CSF files and load - // them all into the facade at the end. - _addedExports = {} as Record; - - _loadAddedExports() { - Object.entries(this._addedExports).forEach(([fileName, fileExports]) => - this.facade.addStoriesFromExports(fileName, fileExports) - ); - } - - // what are the occasions that "m" is a boolean vs an obj - storiesOf = (kind: string, m?: NodeModule): Addon_StoryApi => { - if (!kind && typeof kind !== 'string') { - throw new Error('Invalid or missing kind provided for stories, should be a string'); - } - - if (!m) { - logger.warn( - `Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR` - ); - } - - if (m) { - const proto = Object.getPrototypeOf(m); - if (proto.exports && proto.exports.default) { - // FIXME: throw an error in SB6.0 - logger.error( - `Illegal mix of CSF default export and storiesOf calls in a single file: ${proto.i}` - ); - } - } - - // eslint-disable-next-line no-plusplus - const baseFilename = m && m.id ? `${m.id}` : (this.lastFileName++).toString(); - let fileName = baseFilename; - let i = 1; - // Deal with `storiesOf()` being called twice in the same file. - // On HMR, we clear _addedExports[fileName] below. - - while (this._addedExports[fileName]) { - i += 1; - fileName = `${baseFilename}-${i}`; - } - - if (m && m.hot && m.hot.accept) { - // This module used storiesOf(), so when it re-runs on HMR, it will reload - // itself automatically without us needing to look at our imports - m.hot.accept(); - m.hot.dispose(() => { - this.facade.clearFilenameExports(fileName); - - delete this._addedExports[fileName]; - - // We need to update the importFn as soon as the module re-evaluates - // (and calls storiesOf() again, etc). We could call `onImportFnChanged()` - // at the end of every setStories call (somehow), but then we'd need to - // debounce it somehow for initial startup. Instead, we'll take advantage of - // the fact that the evaluation of the module happens immediately in the same tick - setTimeout(() => { - this._loadAddedExports(); - this.onImportFnChanged?.({ importFn: this.importFn.bind(this) }); - }, 0); - }); - } - - let hasAdded = false; - const api: Addon_StoryApi = { - kind: kind.toString(), - add: () => api, - addDecorator: () => api, - addLoader: () => api, - addParameters: () => api, - }; - - // apply addons - Object.keys(this.addons).forEach((name) => { - const addon = this.addons[name]; - api[name] = (...args: any[]) => { - addon.apply(api, args); - return api; - }; - }); - - const meta: NormalizedComponentAnnotations = { - id: sanitize(kind), - title: kind, - decorators: [], - loaders: [], - parameters: {}, - }; - // We map these back to a simple default export, even though we have type guarantees at this point - - this._addedExports[fileName] = { default: meta }; - - let counter = 0; - api.add = (storyName: string, storyFn: StoryFn, parameters: Parameters = {}) => { - hasAdded = true; - - if (typeof storyName !== 'string') { - throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`); - } - - if (!storyFn || Array.isArray(storyFn) || invalidStoryTypes.has(typeof storyFn)) { - throw new Error( - `Cannot load story "${storyName}" in "${kind}" due to invalid format. Storybook expected a function/object but received ${typeof storyFn} instead.` - ); - } - - const { decorators, loaders, component, args, argTypes, ...storyParameters } = parameters; - - const storyId = parameters.__id || toId(kind, storyName); - - const csfExports = this._addedExports[fileName]; - // Whack a _ on the front incase it is "default" - csfExports[`story${counter}`] = { - name: storyName, - parameters: { fileName, __id: storyId, ...storyParameters }, - decorators, - loaders, - args, - argTypes, - component, - render: storyFn, - }; - counter += 1; - - return api; - }; - - api.addDecorator = (decorator: DecoratorFunction) => { - if (hasAdded) - throw new Error(`You cannot add a decorator after the first story for a kind. -Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`); - - meta.decorators?.push(decorator); - return api; - }; - - api.addLoader = (loader: LoaderFunction) => { - if (hasAdded) throw new Error(`You cannot add a loader after the first story for a kind.`); - - meta.loaders?.push(loader); - return api; - }; - - api.addParameters = ({ component, args, argTypes, tags, ...parameters }: Parameters) => { - if (hasAdded) - throw new Error(`You cannot add parameters after the first story for a kind. -Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`); - - meta.parameters = combineParameters(meta.parameters, parameters); - if (component) meta.component = component; - if (args) meta.args = { ...meta.args, ...args }; - if (argTypes) meta.argTypes = { ...meta.argTypes, ...argTypes }; - if (tags) meta.tags = tags; - return api; - }; - - return api; - }; - - // @deprecated - raw = () => { - return this.storyStore?.raw(); - }; - - // @deprecated - get _storyStore() { - return this.storyStore; - } -} diff --git a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts deleted file mode 100644 index ccd95120b45c..000000000000 --- a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts +++ /dev/null @@ -1,256 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -import { global } from '@storybook/global'; -import { dedent } from 'ts-dedent'; -import { SynchronousPromise } from 'synchronous-promise'; -import { toId, isExportStory, storyNameFromExport } from '@storybook/csf'; -import type { - IndexEntry, - Renderer, - ComponentId, - DocsOptions, - Parameters, - Path, - ModuleExports, - NormalizedProjectAnnotations, - NormalizedStoriesSpecifier, - PreparedStory, - StoryIndex, - StoryId, -} from '@storybook/types'; -import { logger } from '@storybook/client-logger'; -import type { StoryStore } from '../../store'; -import { userOrAutoTitle, sortStoriesV6 } from '../../store'; - -export const AUTODOCS_TAG = 'autodocs'; -export const STORIES_MDX_TAG = 'stories-mdx'; - -export class StoryStoreFacade { - projectAnnotations: NormalizedProjectAnnotations; - - entries: Record; - - csfExports: Record; - - constructor() { - this.projectAnnotations = { - loaders: [], - decorators: [], - parameters: {}, - argsEnhancers: [], - argTypesEnhancers: [], - args: {}, - argTypes: {}, - }; - - this.entries = {}; - - this.csfExports = {}; - } - - // This doesn't actually import anything because the client-api loads fully - // on startup, but this is a shim after all. - importFn(path: Path) { - return SynchronousPromise.resolve().then(() => { - const moduleExports = this.csfExports[path]; - if (!moduleExports) throw new Error(`Unknown path: ${path}`); - return moduleExports; - }); - } - - getStoryIndex(store: StoryStore) { - const fileNameOrder = Object.keys(this.csfExports); - const storySortParameter = this.projectAnnotations.parameters?.options?.storySort; - - const storyEntries = Object.entries(this.entries); - // Add the kind parameters and global parameters to each entry - const sortableV6 = storyEntries.map(([storyId, { type, importPath, ...entry }]) => { - const exports = this.csfExports[importPath]; - const csfFile = store.processCSFFileWithCache( - exports, - importPath, - exports.default.title - ); - - let storyLike: PreparedStory; - if (type === 'story') { - storyLike = store.storyFromCSFFile({ storyId, csfFile }); - } else { - storyLike = { - ...entry, - story: entry.name, - kind: entry.title, - componentId: toId(entry.componentId || entry.title), - parameters: { fileName: importPath }, - } as any; - } - return [ - storyId, - storyLike, - csfFile.meta.parameters, - this.projectAnnotations.parameters || {}, - ] as [StoryId, PreparedStory, Parameters, Parameters]; - }); - - // NOTE: the sortStoriesV6 version returns the v7 data format. confusing but more convenient! - let sortedV7: IndexEntry[]; - - try { - sortedV7 = sortStoriesV6(sortableV6, storySortParameter, fileNameOrder); - } catch (err: any) { - if (typeof storySortParameter === 'function') { - throw new Error(dedent` - Error sorting stories with sort parameter ${storySortParameter}: - - > ${err.message} - - Are you using a V7-style sort function in V6 compatibility mode? - - More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort - `); - } - throw err; - } - const entries = sortedV7.reduce((acc, s) => { - // We use the original entry we stored in `this.stories` because it is possible that the CSF file itself - // exports a `parameters.fileName` which can be different and mess up our `importFn`. - // NOTE: this doesn't actually change the story object, just the index. - acc[s.id] = this.entries[s.id]; - return acc; - }, {} as StoryIndex['entries']); - - return { v: 4, entries }; - } - - clearFilenameExports(fileName: Path) { - if (!this.csfExports[fileName]) { - return; - } - - // Clear this module's stories from the storyList and existing exports - Object.entries(this.entries).forEach(([id, { importPath }]) => { - if (importPath === fileName) { - delete this.entries[id]; - } - }); - - // We keep this as an empty record so we can use it to maintain component order - this.csfExports[fileName] = {}; - } - - // NOTE: we could potentially share some of this code with the stories.json generation - addStoriesFromExports(fileName: Path, fileExports: ModuleExports) { - if (fileName.match(/\.mdx$/) && !fileName.match(/\.stories\.mdx$/)) { - if (global.FEATURES?.storyStoreV7MdxErrors !== false) { - throw new Error(dedent` - Cannot index \`.mdx\` file (\`${fileName}\`) in \`storyStoreV7: false\` mode. - - The legacy story store does not support new-style \`.mdx\` files. If the file above - is not intended to be indexed (i.e. displayed as an entry in the sidebar), either - exclude it from your \`stories\` glob, or add to it. - - If you wanted to index the file, you'll need to name it \`stories.mdx\` and stick to the - legacy (6.x) MDX API, or use the new store.`); - } - } - - // if the export haven't changed since last time we added them, this is a no-op - if (this.csfExports[fileName] === fileExports) { - return; - } - // OTOH, if they have changed, let's clear them out first - this.clearFilenameExports(fileName); - - // eslint-disable-next-line @typescript-eslint/naming-convention - const { default: defaultExport, __namedExportsOrder, ...namedExports } = fileExports; - // eslint-disable-next-line prefer-const - let { id: componentId, title, tags: componentTags = [] } = defaultExport || {}; - - const specifiers = (global.STORIES || []).map( - (specifier: NormalizedStoriesSpecifier & { importPathMatcher: string }) => ({ - ...specifier, - importPathMatcher: new RegExp(specifier.importPathMatcher), - }) - ); - - title = userOrAutoTitle(fileName, specifiers, title); - - if (!title) { - logger.info( - `Unexpected default export without title in '${fileName}': ${JSON.stringify( - fileExports.default - )}` - ); - return; - } - - this.csfExports[fileName] = { - ...fileExports, - default: { ...defaultExport, title }, - }; - - let sortedExports = namedExports; - - // prefer a user/loader provided `__namedExportsOrder` array if supplied - // we do this as es module exports are always ordered alphabetically - // see https://github.com/storybookjs/storybook/issues/9136 - if (Array.isArray(__namedExportsOrder)) { - sortedExports = {}; - __namedExportsOrder.forEach((name) => { - const namedExport = namedExports[name]; - if (namedExport) sortedExports[name] = namedExport; - }); - } - - const storyExports = Object.entries(sortedExports).filter(([key]) => - isExportStory(key, defaultExport) - ); - - // NOTE: this logic is equivalent to the `extractStories` function of `StoryIndexGenerator` - const docsOptions = (global.DOCS_OPTIONS || {}) as DocsOptions; - const { autodocs } = docsOptions; - const componentAutodocs = componentTags.includes(AUTODOCS_TAG); - const autodocsOptedIn = autodocs === true || (autodocs === 'tag' && componentAutodocs); - if (storyExports.length) { - if (componentTags.includes(STORIES_MDX_TAG) || autodocsOptedIn) { - const name = docsOptions.defaultName; - const docsId = toId(componentId || title, name); - this.entries[docsId] = { - type: 'docs', - id: docsId, - title, - name, - importPath: fileName, - ...(componentId && { componentId }), - tags: [ - ...componentTags, - 'docs', - ...(autodocsOptedIn && !componentAutodocs ? [AUTODOCS_TAG] : []), - ], - storiesImports: [], - }; - } - } - - storyExports.forEach(([key, storyExport]: [string, any]) => { - const exportName = storyNameFromExport(key); - const id = storyExport.parameters?.__id || toId(componentId || title, exportName); - const name = - (typeof storyExport !== 'function' && storyExport.name) || - storyExport.storyName || - storyExport.story?.name || - exportName; - - if (!storyExport.parameters?.docsOnly) { - this.entries[id] = { - type: 'story', - id, - name, - title, - importPath: fileName, - ...(componentId && { componentId }), - tags: [...(storyExport.tags || componentTags), 'story'], - }; - } - }); - } -} diff --git a/code/lib/preview-api/src/modules/client-api/index.ts b/code/lib/preview-api/src/modules/client-api/index.ts deleted file mode 100644 index 075075214e9c..000000000000 --- a/code/lib/preview-api/src/modules/client-api/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -export { - addArgs, - addArgsEnhancer, - addArgTypes, - addArgTypesEnhancer, - addDecorator, - addLoader, - addParameters, - addStepRunner, - ClientApi, - setGlobalRender, -} from './ClientApi'; - -export * from '../../store'; - -export * from './queryparams'; diff --git a/code/lib/preview-api/src/modules/client-api/queryparams.ts b/code/lib/preview-api/src/modules/client-api/queryparams.ts deleted file mode 100644 index ccaa7193e407..000000000000 --- a/code/lib/preview-api/src/modules/client-api/queryparams.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { global } from '@storybook/global'; -import { parse } from 'qs'; - -export const getQueryParams = () => { - const { document } = global; - // document.location is not defined in react-native - if (document && document.location && document.location.search) { - return parse(document.location.search, { ignoreQueryPrefix: true }); - } - return {}; -}; - -export const getQueryParam = (key: string) => { - const params = getQueryParams(); - - return params[key]; -}; diff --git a/code/lib/preview-api/src/modules/core-client/executeLoadable.ts b/code/lib/preview-api/src/modules/core-client/executeLoadable.ts deleted file mode 100644 index 9c831f1ab610..000000000000 --- a/code/lib/preview-api/src/modules/core-client/executeLoadable.ts +++ /dev/null @@ -1,110 +0,0 @@ -/// -/// - -import { logger } from '@storybook/client-logger'; -import type { Path, ModuleExports } from '@storybook/types'; - -export interface RequireContext { - keys: () => string[]; - (id: string): any; - resolve(id: string): string; -} - -export type LoaderFunction = () => void | any[]; - -export type Loadable = RequireContext | RequireContext[] | LoaderFunction; - -/** - * Executes a Loadable (function that returns exports or require context(s)) - * and returns a map of filename => module exports - * - * @param loadable Loadable - * @returns Map - */ -export function executeLoadable(loadable: Loadable) { - let reqs = null; - // todo discuss / improve type check - if (Array.isArray(loadable)) { - reqs = loadable; - } else if ((loadable as RequireContext).keys) { - reqs = [loadable as RequireContext]; - } - - let exportsMap = new Map(); - if (reqs) { - reqs.forEach((req) => { - req.keys().forEach((filename: string) => { - try { - const fileExports = req(filename) as ModuleExports; - exportsMap.set( - typeof req.resolve === 'function' ? req.resolve(filename) : filename, - fileExports - ); - } catch (error: any) { - const errorString = - error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString(); - logger.error(`Unexpected error while loading ${filename}: ${errorString}`); - } - }); - }); - } else { - const exported = (loadable as LoaderFunction)(); - if (Array.isArray(exported) && exported.every((obj) => obj.default != null)) { - exportsMap = new Map( - exported.map((fileExports, index) => [`exports-map-${index}`, fileExports]) - ); - } else if (exported) { - logger.warn( - `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify( - exported - )}` - ); - } - } - - return exportsMap; -} - -/** - * Executes a Loadable (function that returns exports or require context(s)) - * and compares it's output to the last time it was run (as stored on a node module) - * - * @param loadable Loadable - * @param m NodeModule - * @returns { added: Map, removed: Map } - */ -export function executeLoadableForChanges(loadable: Loadable, m?: NodeModule) { - let lastExportsMap: ReturnType = - m?.hot?.data?.lastExportsMap || new Map(); - if (m?.hot?.dispose) { - m.hot.accept(); - m.hot.dispose((data) => { - // eslint-disable-next-line no-param-reassign - data.lastExportsMap = lastExportsMap; - }); - } - - const exportsMap = executeLoadable(loadable); - const added = new Map(); - Array.from(exportsMap.entries()) - // Ignore files that do not have a default export - .filter(([, fileExports]) => !!fileExports.default) - // Ignore exports that are equal (by reference) to last time, this means the file hasn't changed - .filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports) - .forEach(([fileName, fileExports]) => added.set(fileName, fileExports)); - - const removed = new Map(); - Array.from(lastExportsMap.keys()) - .filter((fileName) => !exportsMap.has(fileName)) - .forEach((fileName) => { - const value = lastExportsMap.get(fileName); - if (value) { - removed.set(fileName, value); - } - }); - - // Save the value for the dispose() call above - lastExportsMap = exportsMap; - - return { added, removed }; -} diff --git a/code/lib/preview-api/src/modules/core-client/index.ts b/code/lib/preview-api/src/modules/core-client/index.ts deleted file mode 100644 index 72d57e5f9d76..000000000000 --- a/code/lib/preview-api/src/modules/core-client/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ClientApi } from '../../client-api'; -import { StoryStore } from '../../store'; -import { start } from './start'; - -export { start, ClientApi, StoryStore }; diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts deleted file mode 100644 index b114e640f50a..000000000000 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ /dev/null @@ -1,1436 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -/** - * @jest-environment jsdom - */ - -// import { describe, it, beforeAll, beforeEach, afterAll, afterEach, jest } from '@jest/globals'; -import { STORY_RENDERED, STORY_UNCHANGED, SET_INDEX, CONFIG_ERROR } from '@storybook/core-events'; - -import type { ModuleExports, Path } from '@storybook/types'; -import { global } from '@storybook/global'; -import { setGlobalRender } from '../../client-api'; -import { - waitForRender, - waitForEvents, - waitForQuiescence, - emitter, - mockChannel, -} from '../preview-web/PreviewWeb.mockdata'; - -import { start as realStart } from './start'; -import type { Loadable } from './executeLoadable'; - -jest.mock('@storybook/global', () => ({ - global: { - ...globalThis, - window: globalThis, - history: { replaceState: jest.fn() }, - document: { - location: { - pathname: 'pathname', - search: '?id=*', - }, - }, - DOCS_OPTIONS: {}, - }, -})); - -// console.log(global); - -jest.mock('@storybook/channels', () => ({ - createBrowserChannel: () => mockChannel, -})); -jest.mock('@storybook/client-logger'); -jest.mock('react-dom'); - -// for the auto-title test -jest.mock('../../store', () => { - const actualStore = jest.requireActual('../../store'); - return { - ...actualStore, - userOrAutoTitle: (importPath: Path, specifier: any, userTitle?: string) => - userTitle || 'auto-title', - }; -}); - -jest.mock('../../preview-web', () => { - const actualPreviewWeb = jest.requireActual('../../preview-web'); - - class OverloadPreviewWeb extends actualPreviewWeb.PreviewWeb { - constructor() { - super(); - - this.view = { - ...Object.fromEntries( - Object.getOwnPropertyNames(this.view.constructor.prototype).map((key) => [key, jest.fn()]) - ), - prepareForDocs: jest.fn().mockReturnValue('docs-root'), - prepareForStory: jest.fn().mockReturnValue('story-root'), - }; - } - } - return { - ...actualPreviewWeb, - PreviewWeb: OverloadPreviewWeb, - }; -}); - -beforeEach(() => { - mockChannel.emit.mockClear(); - // Preview doesn't clean itself up as it isn't designed to ever be stopped :shrug: - emitter.removeAllListeners(); -}); - -const start: typeof realStart = (...args) => { - const result = realStart(...args); - - const configure: typeof result['configure'] = ( - framework: string, - loadable: Loadable, - m?: NodeModule, - disableBackwardCompatibility = false - ) => result.configure(framework, loadable, m, disableBackwardCompatibility); - - return { - ...result, - configure, - }; -}; -afterEach(() => { - // I'm not sure why this is required (it seems just afterEach is required really) - mockChannel.emit.mockClear(); -}); - -function makeRequireContext(importMap: Record) { - const req = (path: Path) => importMap[path]; - req.keys = () => Object.keys(importMap); - return req; -} - -describe('start', () => { - beforeEach(() => { - global.DOCS_OPTIONS = {}; - // @ts-expect-error (setting this to undefined is indeed what we want to do) - global.__STORYBOOK_CLIENT_API__ = undefined; - // @ts-expect-error (setting this to undefined is indeed what we want to do) - global.__STORYBOOK_PREVIEW__ = undefined; - // @ts-expect-error (setting this to undefined is indeed what we want to do) - global.IS_STORYBOOK = undefined; - }); - describe('when configure is called with storiesOf only', () => { - it('loads and renders the first story correctly', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - - configure('test', () => { - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .add('Story One', jest.fn()) - .add('Story Two', jest.fn()); - - clientApi - .storiesOf('Component B', { id: 'file2' } as NodeModule) - .add('Story Three', jest.fn()); - }); - - await waitForRender(); - - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-a--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--story-one", - "importPath": "file1", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__id": "component-a--story-one", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-a--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--story-two", - "importPath": "file1", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__id": "component-a--story-two", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-b--story-three": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-b", - "id": "component-b--story-three", - "importPath": "file2", - "initialArgs": Object {}, - "name": "Story Three", - "parameters": Object { - "__id": "component-b--story-three", - "__isArgsStory": false, - "fileName": "file2", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component B", - "type": "story", - }, - }, - "v": 4, - } - `); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story-one'); - - expect(renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - id: 'component-a--story-one', - }), - 'story-root' - ); - }); - - it('deals with stories with "default" name', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - - configure('test', () => { - clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn()); - }); - - await waitForRender(); - - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - }); - - it('deals with stories with camel-cased names', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - - configure('test', () => { - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .add('storyOne', jest.fn()); - }); - - await waitForRender(); - - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--storyone'); - }); - - it('deals with stories with spaces in the name', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - - configure('test', () => { - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .add('Story One', jest.fn()); - }); - - await waitForRender(); - - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story-one'); - }); - - // https://github.com/storybookjs/storybook/issues/16303 - it('deals with stories with numeric names', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - - configure('test', () => { - clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('story0', jest.fn()); - }); - - await waitForRender(); - - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story0'); - }); - - it('deals with storiesOf from the same file twice', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - - configure('test', () => { - clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn()); - clientApi.storiesOf('Component B', { id: 'file1' } as NodeModule).add('default', jest.fn()); - clientApi.storiesOf('Component C', { id: 'file1' } as NodeModule).add('default', jest.fn()); - }); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - - const storiesOfData = mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]; - expect(Object.values(storiesOfData.entries).map((s: any) => s.parameters.fileName)).toEqual([ - 'file1', - 'file1-2', - 'file1-3', - ]); - }); - - it('allows setting compomnent/args/argTypes via a parameter', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - const { configure, clientApi } = start(renderToCanvas); - - const component = {}; - configure('test', () => { - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .addParameters({ - component, - args: { a: 'a' }, - argTypes: { a: { type: 'string' } }, - }) - .add('default', jest.fn(), { - args: { b: 'b' }, - argTypes: { b: { type: 'string' } }, - }); - }); - - await waitForRender(); - - expect(renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - storyContext: expect.objectContaining({ - component, - args: { a: 'a', b: 'b' }, - argTypes: { - a: { name: 'a', type: { name: 'string' } }, - b: { name: 'b', type: { name: 'string' } }, - }, - }), - }), - 'story-root' - ); - - expect(global.IS_STORYBOOK).toBe(true); - }); - - it('supports forceRerender()', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - const { configure, clientApi, forceReRender } = start(renderToCanvas); - - configure('test', () => { - clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn()); - }); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - - mockChannel.emit.mockClear(); - forceReRender(); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - }); - - it('supports HMR when a story file changes', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - const { configure, clientApi } = start(renderToCanvas); - - let disposeCallback: () => void = () => {}; - const module = { - id: 'file1', - hot: { - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - const firstImplementation = jest.fn(); - configure('test', () => { - clientApi.storiesOf('Component A', module as any).add('default', firstImplementation); - }); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - expect(firstImplementation).toHaveBeenCalled(); - expect(module.hot.accept).toHaveBeenCalled(); - expect(disposeCallback).toBeDefined(); - - mockChannel.emit.mockClear(); - disposeCallback(); - const secondImplementation = jest.fn(); - clientApi.storiesOf('Component A', module as any).add('default', secondImplementation); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); - expect(secondImplementation).toHaveBeenCalled(); - }); - - it('re-emits SET_INDEX when a story is added', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - const { configure, clientApi } = start(renderToCanvas); - - let disposeCallback: () => void = () => {}; - const module = { - id: 'file1', - hot: { - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - configure('test', () => { - clientApi.storiesOf('Component A', module as any).add('default', jest.fn()); - }); - - await waitForRender(); - - mockChannel.emit.mockClear(); - disposeCallback(); - clientApi - .storiesOf('Component A', module as any) - .add('default', jest.fn()) - .add('new', jest.fn()); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-a--default": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--default", - "importPath": "file1", - "initialArgs": Object {}, - "name": "default", - "parameters": Object { - "__id": "component-a--default", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-a--new": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--new", - "importPath": "file1", - "initialArgs": Object {}, - "name": "new", - "parameters": Object { - "__id": "component-a--new", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - }, - "v": 4, - } - `); - }); - - it('re-emits SET_INDEX when a story file is removed', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - const { configure, clientApi } = start(renderToCanvas); - - let disposeCallback: () => void = () => {}; - const moduleB = { - id: 'file2', - hot: { - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - configure('test', () => { - clientApi.storiesOf('Component A', { id: 'file1' } as any).add('default', jest.fn()); - clientApi.storiesOf('Component B', moduleB as any).add('default', jest.fn()); - }); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-a--default": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--default", - "importPath": "file1", - "initialArgs": Object {}, - "name": "default", - "parameters": Object { - "__id": "component-a--default", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-b--default": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-b", - "id": "component-b--default", - "importPath": "file2", - "initialArgs": Object {}, - "name": "default", - "parameters": Object { - "__id": "component-b--default", - "__isArgsStory": false, - "fileName": "file2", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component B", - "type": "story", - }, - }, - "v": 4, - } - `); - mockChannel.emit.mockClear(); - disposeCallback(); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-a--default": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--default", - "importPath": "file1", - "initialArgs": Object {}, - "name": "default", - "parameters": Object { - "__id": "component-a--default", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - }, - "v": 4, - } - `); - }); - }); - - const componentCExports = { - default: { - title: 'Component C', - tags: ['component-tag', 'autodocs'], - }, - StoryOne: { - render: jest.fn(), - tags: ['story-tag'], - }, - StoryTwo: jest.fn(), - }; - - describe('when configure is called with CSF only', () => { - it('loads and renders the first story correctly', async () => { - const renderToCanvas = jest.fn(); - - const { configure } = start(renderToCanvas); - configure('test', () => [componentCExports]); - - await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-c--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story-tag", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-two", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - }, - "v": 4, - } - `); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-c--story-one'); - - expect(renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - id: 'component-c--story-one', - }), - 'story-root' - ); - }); - - it('supports HMR when a story file changes', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - let disposeCallback: (data: object) => void = () => {}; - const module = { - id: 'file1', - hot: { - data: {}, - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - - const { configure } = start(renderToCanvas); - configure('test', () => [componentCExports], module as any); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-c--story-one'); - expect(componentCExports.StoryOne.render).toHaveBeenCalled(); - expect(module.hot.accept).toHaveBeenCalled(); - expect(disposeCallback).toBeDefined(); - - mockChannel.emit.mockClear(); - disposeCallback(module.hot.data); - const secondImplementation = jest.fn(); - configure( - 'test', - () => [{ ...componentCExports, StoryOne: secondImplementation }], - module as any - ); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-c--story-one'); - expect(secondImplementation).toHaveBeenCalled(); - }); - - it('re-emits SET_INDEX when a story is added', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - let disposeCallback: (data: object) => void = () => {}; - const module = { - id: 'file1', - hot: { - data: {}, - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - const { configure } = start(renderToCanvas); - configure('test', () => [componentCExports], module as any); - - await waitForRender(); - - mockChannel.emit.mockClear(); - disposeCallback(module.hot.data); - configure('test', () => [{ ...componentCExports, StoryThree: jest.fn() }], module as any); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-c--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story-tag", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-three": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-three", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Three", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-two", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - }, - "v": 4, - } - `); - }); - - it('re-emits SET_INDEX when a story file is removed', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - - let disposeCallback: (data: object) => void = () => {}; - const module = { - id: 'file1', - hot: { - data: {}, - accept: jest.fn(), - dispose(cb: () => void) { - disposeCallback = cb; - }, - }, - }; - const { configure } = start(renderToCanvas); - configure( - 'test', - () => [componentCExports, { default: { title: 'Component D' }, StoryFour: jest.fn() }], - module as any - ); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-c--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story-tag", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-two", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-d--story-four": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-d--story-four", - "importPath": "exports-map-1", - "initialArgs": Object {}, - "name": "Story Four", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component D", - "type": "story", - }, - }, - "v": 4, - } - `); - await waitForRender(); - - mockChannel.emit.mockClear(); - disposeCallback(module.hot.data); - configure('test', () => [componentCExports], module as any); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-c--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story-tag", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-two", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - }, - "v": 4, - } - `); - - await waitForEvents([STORY_UNCHANGED]); - }); - - it('allows you to override the render function in project annotations', async () => { - const renderToCanvas = jest.fn(({ storyFn }) => storyFn()); - const frameworkRender = jest.fn(); - - const { configure } = start(renderToCanvas, { render: frameworkRender }); - - const projectRender = jest.fn(); - setGlobalRender(projectRender); - configure('test', () => { - return [ - { - default: { - title: 'Component A', - component: jest.fn(), - }, - StoryOne: {}, - }, - ]; - }); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story-one'); - - expect(frameworkRender).not.toHaveBeenCalled(); - expect(projectRender).toHaveBeenCalled(); - }); - - describe('docs', () => { - beforeEach(() => { - global.DOCS_OPTIONS = {}; - }); - - // NOTE: MDX files are only ever passed as CSF - it('sends over docs only stories as entries', async () => { - const renderToCanvas = jest.fn(); - - const { configure } = start(renderToCanvas); - - configure( - 'test', - makeRequireContext({ - './Introduction.stories.mdx': { - default: { title: 'Introduction', tags: ['stories-mdx'] }, - _Page: { name: 'Page', parameters: { docsOnly: true } }, - }, - }) - ); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "introduction": Object { - "id": "introduction", - "importPath": "./Introduction.stories.mdx", - "name": undefined, - "parameters": Object { - "fileName": "./Introduction.stories.mdx", - "renderer": "test", - }, - "storiesImports": Array [], - "tags": Array [ - "stories-mdx", - "docs", - ], - "title": "Introduction", - "type": "docs", - }, - }, - "v": 4, - } - `); - - // Wait a second to let the docs "render" finish (and maybe throw) - await waitForQuiescence(); - }); - - it('errors on .mdx files', async () => { - const renderToCanvas = jest.fn(); - - const { configure } = start(renderToCanvas); - - configure( - 'test', - makeRequireContext({ - './Introduction.mdx': { - default: () => 'some mdx function', - }, - }) - ); - - await waitForEvents([CONFIG_ERROR]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === CONFIG_ERROR)?.[1]) - .toMatchInlineSnapshot(` - [Error: Cannot index \`.mdx\` file (\`./Introduction.mdx\`) in \`storyStoreV7: false\` mode. - - The legacy story store does not support new-style \`.mdx\` files. If the file above - is not intended to be indexed (i.e. displayed as an entry in the sidebar), either - exclude it from your \`stories\` glob, or add to it. - - If you wanted to index the file, you'll need to name it \`stories.mdx\` and stick to the - legacy (6.x) MDX API, or use the new store.] - `); - }); - }); - }); - - describe('when configure is called with a combination', () => { - it('loads and renders the first story correctly', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - configure('test', () => { - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .add('Story One', jest.fn()) - .add('Story Two', jest.fn()); - - clientApi - .storiesOf('Component B', { id: 'file2' } as NodeModule) - .add('Story Three', jest.fn()); - - return [componentCExports]; - }); - - await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-a--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--story-one", - "importPath": "file1", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__id": "component-a--story-one", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-a--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--story-two", - "importPath": "file1", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__id": "component-a--story-two", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-b--story-three": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-b", - "id": "component-b--story-three", - "importPath": "file2", - "initialArgs": Object {}, - "name": "Story Three", - "parameters": Object { - "__id": "component-b--story-three", - "__isArgsStory": false, - "fileName": "file2", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component B", - "type": "story", - }, - "component-c--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story-tag", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-two", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - }, - "v": 4, - } - `); - - await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--story-one'); - - expect(renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - id: 'component-a--story-one', - }), - 'story-root' - ); - }); - - describe('autodocs', () => { - beforeEach(() => { - global.DOCS_OPTIONS = { autodocs: 'tag', defaultName: 'Docs' }; - }); - - it('adds stories for each component with autodocs tag', async () => { - const renderToCanvas = jest.fn(); - - const { configure, clientApi } = start(renderToCanvas); - configure('test', () => { - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .add('Story One', jest.fn()) - .add('Story Two', jest.fn()); - - clientApi - .storiesOf('Component B', { id: 'file2' } as NodeModule) - .addParameters({ tags: ['autodocs'] }) - .add('Story Three', jest.fn()); - - return [componentCExports]; - }); - - await waitForRender(); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-a--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--story-one", - "importPath": "file1", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__id": "component-a--story-one", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-a--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-a", - "id": "component-a--story-two", - "importPath": "file1", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__id": "component-a--story-two", - "__isArgsStory": false, - "fileName": "file1", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "Component A", - "type": "story", - }, - "component-b--docs": Object { - "componentId": "component-b", - "id": "component-b--docs", - "importPath": "file2", - "name": "Docs", - "parameters": Object { - "fileName": "file2", - "renderer": "test", - }, - "storiesImports": Array [], - "tags": Array [ - "autodocs", - "docs", - ], - "title": "Component B", - "type": "docs", - }, - "component-b--story-three": Object { - "argTypes": Object {}, - "args": Object {}, - "componentId": "component-b", - "id": "component-b--story-three", - "importPath": "file2", - "initialArgs": Object {}, - "name": "Story Three", - "parameters": Object { - "__id": "component-b--story-three", - "__isArgsStory": false, - "fileName": "file2", - "renderer": "test", - }, - "tags": Array [ - "autodocs", - "story", - ], - "title": "Component B", - "type": "story", - }, - "component-c--docs": Object { - "id": "component-c--docs", - "importPath": "exports-map-0", - "name": "Docs", - "parameters": Object { - "fileName": "exports-map-0", - "renderer": "test", - }, - "storiesImports": Array [], - "tags": Array [ - "component-tag", - "autodocs", - "docs", - ], - "title": "Component C", - "type": "docs", - }, - "component-c--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story-tag", - "story", - ], - "title": "Component C", - "type": "story", - }, - "component-c--story-two": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "component-c--story-two", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story Two", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "component-tag", - "autodocs", - "story", - ], - "title": "Component C", - "type": "story", - }, - }, - "v": 4, - } - `); - }); - }); - describe('when docsOptions.autodocs = true', () => { - beforeEach(() => { - global.DOCS_OPTIONS = { autodocs: true, defaultName: 'Docs' }; - }); - - it('adds stories for each component with autodocs tag', async () => { - const renderToDOM = jest.fn(); - - const { configure, clientApi } = start(renderToDOM); - configure('test', () => { - (clientApi as any).addParameters({ - docs: { renderer: () => ({ render: jest.fn((_, _2, _3, d) => d()) }) }, - }); - clientApi - .storiesOf('Component A', { id: 'file1' } as NodeModule) - .add('Story One', jest.fn()) - .add('Story Two', jest.fn()); - - clientApi - .storiesOf('Component B', { id: 'file2' } as NodeModule) - .addParameters({ tags: ['autodocs'] }) - .add('Story Three', jest.fn()); - - return [componentCExports]; - }); - - await waitForRender(); - const setIndexData = mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]; - expect(Object.keys(setIndexData.entries)).toMatchInlineSnapshot(` - Array [ - "component-a--docs", - "component-a--story-one", - "component-a--story-two", - "component-b--docs", - "component-b--story-three", - "component-c--docs", - "component-c--story-one", - "component-c--story-two", - ] - `); - }); - }); - }); - - describe('auto-title', () => { - const componentDExports = { - default: { - component: 'Component D', - }, - StoryOne: jest.fn(), - }; - it('loads and renders the first story correctly', async () => { - const renderToCanvas = jest.fn(); - - const { configure } = start(renderToCanvas); - configure('test', () => [componentDExports]); - - await waitForEvents([SET_INDEX]); - expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1]) - .toMatchInlineSnapshot(` - Object { - "entries": Object { - "auto-title--story-one": Object { - "argTypes": Object {}, - "args": Object {}, - "id": "auto-title--story-one", - "importPath": "exports-map-0", - "initialArgs": Object {}, - "name": "Story One", - "parameters": Object { - "__isArgsStory": false, - "fileName": "exports-map-0", - "renderer": "test", - }, - "tags": Array [ - "story", - ], - "title": "auto-title", - "type": "story", - }, - }, - "v": 4, - } - `); - - await waitForRender(); - }); - }); -}); diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts deleted file mode 100644 index f9c389f71e8f..000000000000 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ /dev/null @@ -1,176 +0,0 @@ -/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ -import { global } from '@storybook/global'; -import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; -import { createBrowserChannel } from '@storybook/channels'; -import { FORCE_RE_RENDER } from '@storybook/core-events'; -import { addons } from '../../addons'; -import { PreviewWeb } from '../../preview-web'; -import { ClientApi } from '../../client-api'; - -import { executeLoadableForChanges } from './executeLoadable'; -import type { Loadable } from './executeLoadable'; - -const { FEATURES } = global; - -const removedApi = (name: string) => () => { - throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`); -}; - -interface CoreClient_RendererImplementation { - /** - * A function that applies decorators to a story. - * @template TRenderer The type of renderer used by the Storybook client API. - * @type {ProjectAnnotations['applyDecorators']} - */ - decorateStory?: ProjectAnnotations['applyDecorators']; - /** - * A function that renders a story with args. - * @template TRenderer The type of renderer used by the Storybook client API. - * @type {ArgsStoryFn} - */ - render?: ArgsStoryFn; -} - -interface CoreClient_ClientAPIFacade { - /** - * The old way of adding stories at runtime. - * @deprecated This method is deprecated and will be removed in a future version. - */ - storiesOf: (...args: any[]) => never; - /** - * The old way of retrieving the list of stories at runtime. - * @deprecated This method is deprecated and will be removed in a future version. - */ - raw: (...args: any[]) => never; -} - -interface CoreClient_StartReturnValue { - /** - * Forces a re-render of all stories in the Storybook preview. - * This function emits the `FORCE_RE_RENDER` event to the Storybook channel. - * @deprecated This method is deprecated and will be removed in a future version. - * @returns {void} - */ - forceReRender: () => void; - /** - * The old way of setting up storybook with runtime configuration. - * @deprecated This method is deprecated and will be removed in a future version. - * @returns {void} - */ - configure: any; - /** - * @deprecated This property is deprecated and will be removed in a future version. - * @type {ClientApi | CoreClient_ClientAPIFacade} - */ - clientApi: ClientApi | CoreClient_ClientAPIFacade; -} - -/** - * Initializes the Storybook preview API. - * @template TRenderer The type of renderer used by the Storybook client API. - * @param {ProjectAnnotations['renderToCanvas']} renderToCanvas A function that renders a story to a canvas. - * @param {CoreClient_RendererImplementation} [options] Optional configuration options for the renderer implementation. - * @param {ProjectAnnotations['applyDecorators']} [options.decorateStory] A function that applies decorators to a story. - * @param {ArgsStoryFn} [options.render] A function that renders a story with arguments. - * @returns {CoreClient_StartReturnValue} An object containing functions and objects related to the Storybook preview API. - */ -export function start( - renderToCanvas: ProjectAnnotations['renderToCanvas'], - { decorateStory, render }: CoreClient_RendererImplementation = {} -): CoreClient_StartReturnValue { - if (global) { - // To enable user code to detect if it is running in Storybook - global.IS_STORYBOOK = true; - } - - if (FEATURES?.storyStoreV7) { - return { - forceReRender: removedApi('forceReRender'), - configure: removedApi('configure'), - clientApi: { - storiesOf: removedApi('clientApi.storiesOf'), - raw: removedApi('raw'), - }, - }; - } - - const channel = createBrowserChannel({ page: 'preview' }); - addons.setChannel(channel); - - const clientApi = global?.__STORYBOOK_CLIENT_API__ || new ClientApi(); - const preview = global?.__STORYBOOK_PREVIEW__ || new PreviewWeb(); - let initialized = false; - - const importFn = (path: Path) => clientApi.importFn(path); - function onStoriesChanged() { - const storyIndex = clientApi.getStoryIndex(); - preview.onStoriesChanged({ storyIndex, importFn }); - } - - // These two bits are a bit ugly, but due to dependencies, `ClientApi` cannot have - // direct reference to `PreviewWeb`, so we need to patch in bits - clientApi.onImportFnChanged = onStoriesChanged; - clientApi.storyStore = preview.storyStore; - - if (global) { - global.__STORYBOOK_CLIENT_API__ = clientApi; - global.__STORYBOOK_ADDONS_CHANNEL__ = channel; - global.__STORYBOOK_PREVIEW__ = preview; - global.__STORYBOOK_STORY_STORE__ = preview.storyStore; - } - - return { - forceReRender: () => channel.emit(FORCE_RE_RENDER), - - clientApi, - // This gets called each time the user calls configure (i.e. once per HMR) - // The first time, it constructs the preview, subsequently it updates it - configure( - renderer: string, - loadable: Loadable, - m?: NodeModule, - disableBackwardCompatibility = true - ) { - if (disableBackwardCompatibility) { - throw new Error('unexpected configure() call'); - } - - clientApi.addParameters({ renderer }); - - // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations - // function in case it throws. So we also need to process its output there also - const getProjectAnnotations = () => { - const { added, removed } = executeLoadableForChanges(loadable, m); - clientApi._loadAddedExports(); - - Array.from(added.entries()).forEach(([fileName, fileExports]) => - clientApi.facade.addStoriesFromExports(fileName, fileExports) - ); - - Array.from(removed.entries()).forEach(([fileName]) => - clientApi.facade.clearFilenameExports(fileName) - ); - - return { - render, - ...clientApi.facade.projectAnnotations, - renderToCanvas, - applyDecorators: decorateStory, - }; - }; - - if (!initialized) { - preview.initialize({ - getStoryIndex: () => clientApi.getStoryIndex(), - importFn, - getProjectAnnotations, - }); - initialized = true; - } else { - // TODO -- why don't we care about the new annotations? - getProjectAnnotations(); - onStoriesChanged(); - } - }, - }; -} diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 638cf8126b61..d98bd7feaf05 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -61,7 +61,7 @@ export class Preview { previewEntryError?: Error; constructor(protected channel: Channel = addons.getChannel()) { - if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) { + if (addons.hasServerChannel()) { this.serverChannel = addons.getServerChannel(); } this.storyStore = new StoryStore(); @@ -142,15 +142,7 @@ export class Preview { this.setInitialGlobals(); - let storyIndexPromise: Promise; - if (global.FEATURES?.storyStoreV7) { - storyIndexPromise = this.getStoryIndexFromServer(); - } else { - if (!this.getStoryIndex) { - throw new Error('No `getStoryIndex` passed defined in v6 mode'); - } - storyIndexPromise = SynchronousPromise.resolve().then(this.getStoryIndex); - } + const storyIndexPromise = this.getStoryIndexFromServer(); return storyIndexPromise .then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex)) @@ -192,7 +184,7 @@ export class Preview { return this.storyStore.initialize({ storyIndex, importFn: this.importFn, - cache: !global.FEATURES?.storyStoreV7, + cache: false, // FIXME -- drop this option }); } diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index 91d2cd35ae3e..556f7d2d2ecc 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -44,9 +44,7 @@ jest.mock('@storybook/global', () => ({ search: '?id=*', }, }, - FEATURES: { - storyStoreV7: true, - }, + fetch: async () => ({ status: 200, json: async () => mockStoryIndex }), }, })); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 8123020b86bb..a132deee8f56 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -69,10 +69,6 @@ jest.mock('@storybook/global', () => ({ search: '?id=*', }, }, - FEATURES: { - storyStoreV7: true, - // xxx - }, fetch: async () => mockFetchResult, }, })); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index 73b58cc70ead..4535e4201a7f 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -117,10 +117,6 @@ export class PreviewWithSelection extends Preview { return super.initializeWithStoryIndex(storyIndex).then(() => { - if (!global.FEATURES?.storyStoreV7) { - this.channel.emit(SET_INDEX, this.storyStore.getSetIndexPayload()); - } - return this.selectSpecifiedStory(); }); } @@ -204,10 +200,6 @@ export class PreviewWithSelection extends Preview extends Preview extends Preview extends Preview = ( const [progress, setProgress] = useState(undefined); useEffect(() => { - if (FEATURES?.storyStoreV7 && global.CONFIG_TYPE === 'DEVELOPMENT') { + if (global.CONFIG_TYPE === 'DEVELOPMENT') { try { const channel = addons.getServerChannel(); diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index 861fc3b88fcb..8c565be5b1c8 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -34,7 +34,7 @@ class ReactProvider extends Provider { this.channel = channel; global.__STORYBOOK_ADDONS_CHANNEL__ = channel; - if (FEATURES?.storyStoreV7 && CONFIG_TYPE === 'DEVELOPMENT') { + if (CONFIG_TYPE === 'DEVELOPMENT') { this.serverChannel = this.channel; addons.setServerChannel(this.serverChannel); } diff --git a/docs/api/main-config-features.md b/docs/api/main-config-features.md index 81a80502a7bc..e0bb12df4b12 100644 --- a/docs/api/main-config-features.md +++ b/docs/api/main-config-features.md @@ -9,34 +9,13 @@ Type: ```ts { argTypeTargetsV7?: boolean; - buildStoriesJson?: boolean; legacyDecoratorFileOrder?: boolean; legacyMdx1?: boolean; - storyStoreV7?: boolean; } ``` Enables Storybook's additional features. -## `buildStoriesJson` - -Type: `boolean` - -Default: `true`, when [`storyStoreV7`](#storystorev7) is `true` - -Generates a `index.json` and `stories.json` files to help story loading with the on-demand mode. - - - - - - - ## `legacyDecoratorFileOrder` Type: `boolean` @@ -71,25 +50,6 @@ Enables support for MDX version 1 as a fallback. Requires [@storybook/mdx1-csf]( -## `storyStoreV7` - -Type: `boolean` - -Default: `true` - -Opts out of [on-demand story loading](#on-demand-story-loading); loads all stories at build time. - - - - - - - ## `argTypeTargetsV7` (⚠️ **Experimental**) @@ -107,26 +67,4 @@ Filter args with a "target" on the type from the render function. ]} /> - - -## On-demand story loading - -As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the `storyStoreV7` feature flag to `false` in your configuration as follows: - - - - - - - -### Known limitations - -Because of the way stories are currently indexed in Storybook, loading stories on demand with `storyStoreV7` has a couple of minor limitations at the moment: - -- [CSF formats](../api/csf.md) from version 1 to version 3 are supported. The `storiesOf` construct is not. -- Custom [`storySort` functions](../writing-stories/naming-components-and-hierarchy.md#sorting-stories) receive more limited arguments. + \ No newline at end of file diff --git a/docs/api/main-config-stories.md b/docs/api/main-config-stories.md index 9eefa1360565..eeffbe428ece 100644 --- a/docs/api/main-config-stories.md +++ b/docs/api/main-config-stories.md @@ -117,7 +117,7 @@ When [auto-titling](../configure/sidebar-and-urls.md#csf-30-auto-titles), prefix
-💡 With [`storyStoreV7`](./main-config-features.md#storystorev7) (the default in Storybook 7), Storybook now statically analyzes the configuration file to improve performance. Loading stories with a custom implementation may de-optimize or break this ability. +💡 Storybook now statically analyzes the configuration file to improve performance. Loading stories with a custom implementation may de-optimize or break this ability.
diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index 130ac9bd56e1..5c9ddf93ebb1 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -10,7 +10,6 @@ By default, Storybook provides zero-config support for Webpack and automatically | Option | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `storyStoreV7` | Enabled by default.
Configures Webpack's [code splitting](https://webpack.js.org/guides/code-splitting/) feature
`features: { storyStoreV7: false }` | | `lazyCompilation` | Enables Webpack's experimental [`lazy compilation`](https://webpack.js.org/configuration/experiments/#experimentslazycompilation)
`core: { builder: { options: { lazyCompilation: true } } }` | | `fsCache` | Configures Webpack's filesystem [caching](https://webpack.js.org/configuration/cache/#cachetype) feature
`core: { builder: { options: { fsCache: true } } }` | From 01836ba60461601dd4f93b104ebe6f1823d83651 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 30 Oct 2023 16:47:47 +1100 Subject: [PATCH 002/265] Convert all Preview Web code to async/await --- code/lib/preview-api/package.json | 1 - .../src/modules/preview-web/Preview.tsx | 73 ++++++------- .../preview-web/PreviewWithSelection.tsx | 10 +- .../src/modules/store/StoryStore.ts | 100 +++++------------- code/yarn.lock | 8 -- 5 files changed, 61 insertions(+), 131 deletions(-) diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 93eebf7dc43f..3fe3fad4768c 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -54,7 +54,6 @@ "lodash": "^4.17.21", "memoizerific": "^1.11.3", "qs": "^6.10.0", - "synchronous-promise": "^2.0.15", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" }, diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index d98bd7feaf05..8e36bcf89eaf 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -1,6 +1,5 @@ import { dedent } from 'ts-dedent'; import { global } from '@storybook/global'; -import { SynchronousPromise } from 'synchronous-promise'; import { CONFIG_ERROR, FORCE_REMOUNT, @@ -13,7 +12,7 @@ import { UPDATE_GLOBALS, UPDATE_STORY_ARGS, } from '@storybook/core-events'; -import { logger, deprecate } from '@storybook/client-logger'; +import { logger } from '@storybook/client-logger'; import type { Channel } from '@storybook/channels'; import type { Renderer, @@ -75,7 +74,7 @@ export class Preview { // (Even simple things like `Promise.resolve()` and `await` involve the callback happening // in the next promise "tick"). // See the comment in `storyshots-core/src/api/index.ts` for more detail. - initialize({ + async initialize({ getStoryIndex, importFn, getProjectAnnotations, @@ -93,9 +92,8 @@ export class Preview { this.setupListeners(); - return this.getProjectAnnotationsOrRenderError(getProjectAnnotations).then( - (projectAnnotations) => this.initializeWithProjectAnnotations(projectAnnotations) - ); + const projectAnnotations = await this.getProjectAnnotationsOrRenderError(getProjectAnnotations); + return this.initializeWithProjectAnnotations(projectAnnotations); } setupListeners() { @@ -107,49 +105,44 @@ export class Preview { this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this)); } - getProjectAnnotationsOrRenderError( + async getProjectAnnotationsOrRenderError( getProjectAnnotations: () => MaybePromise> ): Promise> { - return SynchronousPromise.resolve() - .then(getProjectAnnotations) - .then((projectAnnotations) => { - if (projectAnnotations.renderToDOM) - deprecate(`\`renderToDOM\` is deprecated, please rename to \`renderToCanvas\``); - - this.renderToCanvas = projectAnnotations.renderToCanvas || projectAnnotations.renderToDOM; - if (!this.renderToCanvas) { - throw new Error(dedent` + try { + const projectAnnotations = await getProjectAnnotations(); + + this.renderToCanvas = projectAnnotations.renderToCanvas; + if (!this.renderToCanvas) { + throw new Error(dedent` Expected your framework's preset to export a \`renderToCanvas\` field. Perhaps it needs to be upgraded for Storybook 6.4? More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field `); - } - return projectAnnotations; - }) - .catch((err) => { - // This is an error extracting the projectAnnotations (i.e. evaluating the previewEntries) and - // needs to be show to the user as a simple error - this.renderPreviewEntryError('Error reading preview.js:', err); - throw err; - }); + } + return projectAnnotations; + } catch (err) { + // This is an error extracting the projectAnnotations (i.e. evaluating the previewEntries) and + // needs to be show to the user as a simple error + this.renderPreviewEntryError('Error reading preview.js:', err as Error); + throw err; + } } // If initialization gets as far as project annotations, this function runs. - initializeWithProjectAnnotations(projectAnnotations: ProjectAnnotations) { + async initializeWithProjectAnnotations(projectAnnotations: ProjectAnnotations) { this.storyStore.setProjectAnnotations(projectAnnotations); this.setInitialGlobals(); - const storyIndexPromise = this.getStoryIndexFromServer(); - - return storyIndexPromise - .then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex)) - .catch((err) => { - this.renderPreviewEntryError('Error loading story index:', err); - throw err; - }); + try { + const storyIndex = await this.getStoryIndexFromServer(); + return this.initializeWithStoryIndex(storyIndex); + } catch (err) { + this.renderPreviewEntryError('Error loading story index:', err as Error); + throw err; + } } async setInitialGlobals() { @@ -177,15 +170,11 @@ export class Preview { } // If initialization gets as far as the story index, this function runs. - initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike { + initializeWithStoryIndex(storyIndex: StoryIndex): void { if (!this.importFn) throw new Error(`Cannot call initializeWithStoryIndex before initialization`); - return this.storyStore.initialize({ - storyIndex, - importFn: this.importFn, - cache: false, // FIXME -- drop this option - }); + this.storyStore.initialize({ storyIndex, importFn: this.importFn }); } // EVENT HANDLERS @@ -360,9 +349,7 @@ export class Preview { Do you have an error in your \`preview.js\`? Check your Storybook's browser console for errors.`); } - if (global.FEATURES?.storyStoreV7) { - await this.storyStore.cacheAllCSFFiles(); - } + await this.storyStore.cacheAllCSFFiles(); return this.storyStore.extract(options); } diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index 4535e4201a7f..04178c5ff9af 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -1,12 +1,10 @@ import { dedent } from 'ts-dedent'; -import { global } from '@storybook/global'; import { CURRENT_STORY_WAS_SET, DOCS_PREPARED, PRELOAD_ENTRIES, PREVIEW_KEYDOWN, SET_CURRENT_STORY, - SET_INDEX, STORY_ARGS_UPDATED, STORY_CHANGED, STORY_ERRORED, @@ -115,10 +113,10 @@ export class PreviewWithSelection extends Preview { - return super.initializeWithStoryIndex(storyIndex).then(() => { - return this.selectSpecifiedStory(); - }); + async initializeWithStoryIndex(storyIndex: StoryIndex): Promise { + await super.initializeWithStoryIndex(storyIndex); + + return this.selectSpecifiedStory(); } // Use the selection specifier to choose a story, then render it diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 1fc0fa547d2a..19d21c8d6fc6 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -2,7 +2,6 @@ import memoize from 'memoizerific'; import type { IndexEntry, Renderer, - API_PreparedStoryIndex, ComponentTitle, Parameters, Path, @@ -24,7 +23,6 @@ import type { } from '@storybook/types'; import mapValues from 'lodash/mapValues.js'; import pick from 'lodash/pick.js'; -import { SynchronousPromise } from 'synchronous-promise'; import { HooksContext } from '../addons'; import { StoryIndexStore } from './StoryIndexStore'; @@ -63,7 +61,7 @@ export class StoryStore { prepareStoryWithCache: typeof prepareStory; - initializationPromise: SynchronousPromise; + initializationPromise: Promise; // This *does* get set in the constructor but the semantics of `new SynchronousPromise` trip up TS resolveInitializationPromise!: () => void; @@ -80,7 +78,7 @@ export class StoryStore { this.prepareStoryWithCache = memoize(STORY_CACHE_SIZE)(prepareStory) as typeof prepareStory; // We cannot call `loadStory()` until we've been initialized properly. But we can wait for it. - this.initializationPromise = new SynchronousPromise((resolve) => { + this.initializationPromise = new Promise((resolve) => { this.resolveInitializationPromise = resolve; }); } @@ -100,19 +98,15 @@ export class StoryStore { initialize({ storyIndex, importFn, - cache = false, }: { storyIndex?: StoryIndex; importFn: ModuleImportFn; - cache?: boolean; - }): Promise { + }): void { this.storyIndex = new StoryIndexStore(storyIndex); this.importFn = importFn; // We don't need the cache to be loaded to call `loadStory`, we just need the index ready this.resolveInitializationPromise(); - - return cache ? this.cacheAllCSFFiles() : SynchronousPromise.resolve(); } // This means that one of the CSF files has changed. @@ -142,18 +136,18 @@ export class StoryStore { } // To load a single CSF file to service a story we need to look up the importPath in the index - loadCSFFileByStoryId(storyId: StoryId): Promise> { + async loadCSFFileByStoryId(storyId: StoryId): Promise> { if (!this.storyIndex || !this.importFn) throw new Error(`loadCSFFileByStoryId called before initialization`); const { importPath, title } = this.storyIndex.storyIdToEntry(storyId); - return this.importFn(importPath).then((moduleExports) => - // We pass the title in here as it may have been generated by autoTitle on the server. - this.processCSFFileWithCache(moduleExports, importPath, title) - ); + const moduleExports = await this.importFn(importPath); + + // We pass the title in here as it may have been generated by autoTitle on the server. + return this.processCSFFileWithCache(moduleExports, importPath, title); } - loadAllCSFFiles({ batchSize = EXTRACT_BATCH_SIZE } = {}): Promise< + async loadAllCSFFiles({ batchSize = EXTRACT_BATCH_SIZE } = {}): Promise< StoryStore['cachedCSFFiles'] > { if (!this.storyIndex) throw new Error(`loadAllCSFFiles called before initialization`); @@ -163,41 +157,33 @@ export class StoryStore { storyId, ]); - const loadInBatches = ( + const loadInBatches = async ( remainingImportPaths: typeof importPaths ): Promise<{ importPath: Path; csfFile: CSFFile }[]> => { - if (remainingImportPaths.length === 0) return SynchronousPromise.resolve([]); + if (remainingImportPaths.length === 0) return Promise.resolve([]); const csfFilePromiseList = remainingImportPaths .slice(0, batchSize) - .map(([importPath, storyId]) => - this.loadCSFFileByStoryId(storyId).then((csfFile) => ({ - importPath, - csfFile, - })) - ); - - return SynchronousPromise.all(csfFilePromiseList).then((firstResults) => - loadInBatches(remainingImportPaths.slice(batchSize)).then((restResults) => - firstResults.concat(restResults) - ) - ); + .map(async ([importPath, storyId]) => ({ + importPath, + csfFile: await this.loadCSFFileByStoryId(storyId), + })); + + const firstResults = await Promise.all(csfFilePromiseList); + const restResults = await loadInBatches(remainingImportPaths.slice(batchSize)); + return firstResults.concat(restResults); }; - return loadInBatches(importPaths).then((list) => - list.reduce((acc, { importPath, csfFile }) => { - acc[importPath] = csfFile; - return acc; - }, {} as Record>) - ); + const list = await loadInBatches(importPaths); + return list.reduce((acc, { importPath, csfFile }) => { + acc[importPath] = csfFile; + return acc; + }, {} as Record>); } - cacheAllCSFFiles(): Promise { - return this.initializationPromise.then(() => - this.loadAllCSFFiles().then((csfFiles) => { - this.cachedCSFFiles = csfFiles; - }) - ); + async cacheAllCSFFiles(): Promise { + await this.initializationPromise; + this.cachedCSFFiles = await this.loadAllCSFFiles(); } preparedMetaFromCSFFile({ csfFile }: { csfFile: CSFFile }): PreparedMeta { @@ -393,38 +379,6 @@ export class StoryStore { }; }; - getSetIndexPayload(): API_PreparedStoryIndex { - if (!this.storyIndex) throw new Error('getSetIndexPayload called before initialization'); - if (!this.cachedCSFFiles) - throw new Error('Cannot call getSetIndexPayload() unless you call cacheAllCSFFiles() first'); - const { cachedCSFFiles } = this; - - const stories = this.extract({ includeDocsOnly: true }); - - return { - v: 4, - entries: Object.fromEntries( - Object.entries(this.storyIndex.entries).map(([id, entry]) => [ - id, - stories[id] - ? { - ...entry, - args: stories[id].initialArgs, - initialArgs: stories[id].initialArgs, - argTypes: stories[id].argTypes, - parameters: stories[id].parameters, - } - : { - ...entry, - parameters: this.preparedMetaFromCSFFile({ - csfFile: cachedCSFFiles[entry.importPath], - }).parameters, - }, - ]) - ), - }; - } - raw(): BoundStory[] { return Object.values(this.extract()) .map(({ id }: { id: StoryId }) => this.fromId(id)) diff --git a/code/yarn.lock b/code/yarn.lock index 6ca7f63f7d0a..1c97619cf949 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6940,7 +6940,6 @@ __metadata: qs: ^6.10.0 react: ^18.2.0 slash: ^5.0.0 - synchronous-promise: ^2.0.15 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 languageName: unknown @@ -28863,13 +28862,6 @@ __metadata: languageName: node linkType: hard -"synchronous-promise@npm:^2.0.15": - version: 2.0.17 - resolution: "synchronous-promise@npm:2.0.17" - checksum: 1babe643d8417789ef6e5a2f3d4b8abcda2de236acd09bbe2c98f6be82c0a2c92ed21a6e4f934845fa8de18b1435a9cba1e8c3d945032e8a532f076224c024b1 - languageName: node - linkType: hard - "tapable@npm:^2.0.0, tapable@npm:^2.1.1, tapable@npm:^2.2.0, tapable@npm:^2.2.1": version: 2.2.1 resolution: "tapable@npm:2.2.1" From 7e1e2b69596f1c34983743b73f530f7d0b8a53af Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 30 Oct 2023 16:54:40 +1100 Subject: [PATCH 003/265] Small fixups --- code/lib/preview-api/src/modules/preview-web/Preview.tsx | 7 ------- code/lib/preview-api/src/modules/store/StoryStore.ts | 2 +- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 8e36bcf89eaf..c5964131fad0 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -67,13 +67,6 @@ export class Preview { } // INITIALIZATION - - // NOTE: the reason that the preview and store's initialization code is written in a promise - // style and not `async-await`, and the use of `SynchronousPromise`s is in order to allow - // storyshots to immediately call `raw()` on the store without waiting for a later tick. - // (Even simple things like `Promise.resolve()` and `await` involve the callback happening - // in the next promise "tick"). - // See the comment in `storyshots-core/src/api/index.ts` for more detail. async initialize({ getStoryIndex, importFn, diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 19d21c8d6fc6..c16f353d7c04 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -63,7 +63,7 @@ export class StoryStore { initializationPromise: Promise; - // This *does* get set in the constructor but the semantics of `new SynchronousPromise` trip up TS + // This *does* get set in the constructor but the semantics of `new Promise` trip up TS resolveInitializationPromise!: () => void; constructor() { From d21b6b4d0cfbde391f3abff9098e00c8e496d52c Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 31 Oct 2023 11:19:36 +1100 Subject: [PATCH 004/265] Remove public APIs from packages --- code/frameworks/angular/src/client/index.ts | 3 -- .../angular/src/client/public-api.ts | 29 ----------------- .../ember/src/client/preview/index.ts | 16 ---------- code/renderers/html/src/index.ts | 1 - code/renderers/html/src/public-api.ts | 26 ---------------- code/renderers/preact/src/index.ts | 1 - code/renderers/preact/src/public-api.ts | 26 ---------------- code/renderers/react/src/index.ts | 1 - code/renderers/react/src/public-api.tsx | 25 --------------- code/renderers/server/src/index.ts | 1 - code/renderers/server/src/public-api.ts | 26 ---------------- code/renderers/svelte/src/index.ts | 1 - code/renderers/svelte/src/public-api.ts | 30 ------------------ code/renderers/vue/src/index.ts | 1 - code/renderers/vue/src/public-api.ts | 28 ----------------- code/renderers/vue3/src/index.ts | 2 +- code/renderers/vue3/src/public-api.ts | 31 ------------------- code/renderers/web-components/src/index.ts | 1 - .../web-components/src/public-api.ts | 26 ---------------- 19 files changed, 1 insertion(+), 274 deletions(-) delete mode 100644 code/frameworks/angular/src/client/public-api.ts delete mode 100644 code/frameworks/ember/src/client/preview/index.ts delete mode 100644 code/renderers/html/src/public-api.ts delete mode 100644 code/renderers/preact/src/public-api.ts delete mode 100644 code/renderers/react/src/public-api.tsx delete mode 100644 code/renderers/server/src/public-api.ts delete mode 100644 code/renderers/svelte/src/public-api.ts delete mode 100644 code/renderers/vue/src/public-api.ts delete mode 100644 code/renderers/vue3/src/public-api.ts delete mode 100644 code/renderers/web-components/src/public-api.ts diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts index 2377678bda2e..8f2e0a4172c0 100644 --- a/code/frameworks/angular/src/client/index.ts +++ b/code/frameworks/angular/src/client/index.ts @@ -2,9 +2,6 @@ import './globals'; -// eslint-disable-next-line import/export -export * from './public-api'; -// eslint-disable-next-line import/export export * from './public-types'; export type { StoryFnAngularReturnType as IStory } from './types'; diff --git a/code/frameworks/angular/src/client/public-api.ts b/code/frameworks/angular/src/client/public-api.ts deleted file mode 100644 index 3f91276a044b..000000000000 --- a/code/frameworks/angular/src/client/public-api.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/preview-api'; -import { renderToCanvas, render } from './render'; -import decorateStory from './decorateStory'; -import { AngularRenderer } from './types'; - -export * from './public-types'; - -const RENDERER = 'angular'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type - load: (...args: any[]) => void; -} - -const api = start(renderToCanvas, { decorateStory, render }); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; diff --git a/code/frameworks/ember/src/client/preview/index.ts b/code/frameworks/ember/src/client/preview/index.ts deleted file mode 100644 index 7b77a8755219..000000000000 --- a/code/frameworks/ember/src/client/preview/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { start } from '@storybook/preview-api'; - -import './globals'; -import type { EmberRenderer } from './types'; -import { renderToCanvas } from './render'; - -const { configure: coreConfigure, clientApi, forceReRender } = start(renderToCanvas); - -export const { raw } = clientApi; - -const RENDERER = 'ember'; -export const storiesOf = (kind: string, m: any) => - clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER }); -export const configure = (...args: any[]) => coreConfigure(RENDERER, ...args); - -export { forceReRender }; diff --git a/code/renderers/html/src/index.ts b/code/renderers/html/src/index.ts index 0c37ede8d826..145fbf2612ea 100644 --- a/code/renderers/html/src/index.ts +++ b/code/renderers/html/src/index.ts @@ -2,7 +2,6 @@ import './globals'; -export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/html/src/public-api.ts b/code/renderers/html/src/public-api.ts deleted file mode 100644 index 542eb1ca7b65..000000000000 --- a/code/renderers/html/src/public-api.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/preview-api'; -import type { HtmlRenderer } from './types'; - -import { renderToCanvas, render } from './render'; - -const RENDERER = 'html'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type -} - -const api = start(renderToCanvas, { render }); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; diff --git a/code/renderers/preact/src/index.ts b/code/renderers/preact/src/index.ts index 0c37ede8d826..145fbf2612ea 100644 --- a/code/renderers/preact/src/index.ts +++ b/code/renderers/preact/src/index.ts @@ -2,7 +2,6 @@ import './globals'; -export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/preact/src/public-api.ts b/code/renderers/preact/src/public-api.ts deleted file mode 100644 index 7a5451bb9ae8..000000000000 --- a/code/renderers/preact/src/public-api.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/preview-api'; - -import { renderToCanvas } from './render'; -import type { PreactRenderer } from './types'; - -export interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type - load: (...args: any[]) => void; -} - -const RENDERER = 'preact'; -const api = start(renderToCanvas); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts index ae032e4f06b8..07a118109716 100644 --- a/code/renderers/react/src/index.ts +++ b/code/renderers/react/src/index.ts @@ -2,7 +2,6 @@ import './globals'; -export * from './public-api'; export * from './public-types'; export * from './testing-api'; diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx deleted file mode 100644 index aaef6d65ddd2..000000000000 --- a/code/renderers/react/src/public-api.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import { start } from '@storybook/preview-api'; -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; - -import { render, renderToCanvas } from './render'; -import type { ReactRenderer } from './types'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type -} -const RENDERER = 'react'; - -const api = start(renderToCanvas, { render }); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; diff --git a/code/renderers/server/src/index.ts b/code/renderers/server/src/index.ts index 0c37ede8d826..145fbf2612ea 100644 --- a/code/renderers/server/src/index.ts +++ b/code/renderers/server/src/index.ts @@ -2,7 +2,6 @@ import './globals'; -export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/server/src/public-api.ts b/code/renderers/server/src/public-api.ts deleted file mode 100644 index e830f96a8918..000000000000 --- a/code/renderers/server/src/public-api.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/preview-api'; - -import { renderToCanvas, render } from './render'; -import type { ServerRenderer } from './types'; - -const RENDERER = 'server'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type -} - -const api = start(renderToCanvas, { render }); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const { raw } = api.clientApi; - -export const { forceReRender } = api; diff --git a/code/renderers/svelte/src/index.ts b/code/renderers/svelte/src/index.ts index 0c37ede8d826..145fbf2612ea 100644 --- a/code/renderers/svelte/src/index.ts +++ b/code/renderers/svelte/src/index.ts @@ -2,7 +2,6 @@ import './globals'; -export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/svelte/src/public-api.ts b/code/renderers/svelte/src/public-api.ts deleted file mode 100644 index fde627e6a20e..000000000000 --- a/code/renderers/svelte/src/public-api.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import { start } from '@storybook/preview-api'; -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { decorateStory } from './decorators'; - -import type { SvelteRenderer } from './types'; -import { render, renderToCanvas } from './render'; - -const RENDERER = 'svelte'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type -} - -const api = start(renderToCanvas, { - decorateStory, - render, -}); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; diff --git a/code/renderers/vue/src/index.ts b/code/renderers/vue/src/index.ts index 0c37ede8d826..145fbf2612ea 100644 --- a/code/renderers/vue/src/index.ts +++ b/code/renderers/vue/src/index.ts @@ -2,7 +2,6 @@ import './globals'; -export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/vue/src/public-api.ts b/code/renderers/vue/src/public-api.ts deleted file mode 100644 index 708e4e2b4014..000000000000 --- a/code/renderers/vue/src/public-api.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/preview-api'; - -import type { VueRenderer } from './types'; -import { renderToCanvas, render } from './render'; -import { decorateStory } from './decorateStory'; - -const RENDERER = 'vue'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type - load: (...args: any[]) => void; -} - -const api = start(renderToCanvas, { decorateStory, render }); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; diff --git a/code/renderers/vue3/src/index.ts b/code/renderers/vue3/src/index.ts index 6987cefb0c8e..83d5e6cdd65b 100644 --- a/code/renderers/vue3/src/index.ts +++ b/code/renderers/vue3/src/index.ts @@ -2,8 +2,8 @@ import './globals'; -export * from './public-api'; export * from './public-types'; +export { setup } from './render'; // optimization: stop HMR propagation in webpack try { diff --git a/code/renderers/vue3/src/public-api.ts b/code/renderers/vue3/src/public-api.ts deleted file mode 100644 index a6daddc418ac..000000000000 --- a/code/renderers/vue3/src/public-api.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import type { App } from 'vue'; -import { start } from '@storybook/preview-api'; - -import type { VueRenderer } from './types'; -import { decorateStory } from './decorateStory'; - -import { render, renderToCanvas } from './render'; - -const RENDERER = 'vue3'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type - load: (...args: any[]) => void; - app: App; -} - -const api = start(renderToCanvas, { decorateStory, render }); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const { forceReRender } = api; -export const { raw } = api.clientApi; -export { setup } from './render'; diff --git a/code/renderers/web-components/src/index.ts b/code/renderers/web-components/src/index.ts index 044e7875f24c..dfea3afb488d 100644 --- a/code/renderers/web-components/src/index.ts +++ b/code/renderers/web-components/src/index.ts @@ -7,7 +7,6 @@ import './globals'; const { window, EventSource } = global; export * from './public-types'; -export * from './public-api'; export * from './framework-api'; // TODO: disable HMR and do full page loads because of customElements.define diff --git a/code/renderers/web-components/src/public-api.ts b/code/renderers/web-components/src/public-api.ts deleted file mode 100644 index b8e1b24bb107..000000000000 --- a/code/renderers/web-components/src/public-api.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable prefer-destructuring */ -import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { start } from '@storybook/preview-api'; - -import { renderToCanvas } from './render'; -import type { WebComponentsRenderer } from './types'; - -const RENDERER = 'web-components'; - -interface ClientApi extends Addon_ClientStoryApi { - configure(loader: Addon_Loadable, module: NodeModule): void; - forceReRender(): void; - raw: () => any; // todo add type -} - -const api = start(renderToCanvas); - -export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { - return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - renderer: RENDERER, - }); -}; - -export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args); -export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; -export const raw: ClientApi['raw'] = api.clientApi.raw; From 36f2199c27b20b5c6b99bc3186975bde7e6863a6 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 1 Nov 2023 08:02:55 +1100 Subject: [PATCH 005/265] Drop unused vars --- code/lib/cli/src/sandbox-templates.ts | 2 +- code/lib/manager-api/src/modules/stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index abca1b7fcb98..7a39209b2d4a 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -62,7 +62,7 @@ export type Template = { inDevelopment?: boolean; /** * Some sandboxes might need extra modifications in the initialized Storybook, - * such as extend main.js, for setting specific feature flags like storyStoreV7, etc. + * such as extend main.js, for setting specific feature flags. */ modifications?: { skipTemplateStories?: boolean; diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 08019e849bef..a81f35d48b7b 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -58,7 +58,7 @@ import { import type { ComposedRef } from '../index'; import type { ModuleFn } from '../lib/types'; -const { FEATURES, fetch } = global; +const { fetch } = global; const STORY_INDEX_PATH = './index.json'; type Direction = -1 | 1; From b3dcefe368a2308de7ed76bb14bccc7d11b17d73 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 1 Nov 2023 14:22:07 +1100 Subject: [PATCH 006/265] Remove unused var --- code/ui/manager/src/runtime.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index 8c565be5b1c8..4a24fa6a7209 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -9,7 +9,7 @@ import { CHANNEL_CREATED } from '@storybook/core-events'; import Provider from './provider'; import { renderStorybookUI } from './index'; -const { FEATURES, CONFIG_TYPE } = global; +const { CONFIG_TYPE } = global; class ReactProvider extends Provider { private addons: AddonStore; From 4b9abd6dcfe93f5aa0e3b6d8aa0addf0e356cfe3 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 1 Nov 2023 14:29:47 +1100 Subject: [PATCH 007/265] Drop `buildStoriesJson` flag --- code/lib/core-server/src/presets/common-preset.ts | 1 - test-storybooks/external-docs/.storybook/main.cjs | 2 -- 2 files changed, 3 deletions(-) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 5e50b89defff..93195bb1c96f 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -189,7 +189,6 @@ export const features = async ( ): Promise => ({ ...existing, warnOnLegacyHierarchySeparator: true, - buildStoriesJson: false, argTypeTargetsV7: true, legacyDecoratorFileOrder: false, }); diff --git a/test-storybooks/external-docs/.storybook/main.cjs b/test-storybooks/external-docs/.storybook/main.cjs index fbe15b8582ac..d82b62915774 100644 --- a/test-storybooks/external-docs/.storybook/main.cjs +++ b/test-storybooks/external-docs/.storybook/main.cjs @@ -20,8 +20,6 @@ const config = { channelOptions: { allowFunction: false, maxDepth: 10 }, }, features: { - storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'), - buildStoriesJson: true, warnOnLegacyHierarchySeparator: false, previewMdx2: true, }, From fc2236c0ccabac3079833cca30315b4304b80f9f Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 1 Nov 2023 14:48:34 +1100 Subject: [PATCH 008/265] Remove unused imports --- code/lib/core-server/src/build-static.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 26ad52d47626..be715b49534a 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -2,7 +2,7 @@ import chalk from 'chalk'; import { copy, emptyDir, ensureDir } from 'fs-extra'; import { dirname, isAbsolute, join, resolve } from 'path'; import { global } from '@storybook/global'; -import { deprecate, logger } from '@storybook/node-logger'; +import { logger } from '@storybook/node-logger'; import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry'; import type { BuilderOptions, @@ -23,7 +23,6 @@ import { import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors'; import isEqual from 'lodash/isEqual.js'; -import dedent from 'ts-dedent'; import { outputStats } from './utils/output-stats'; import { copyAllStaticFiles, From a80b47cf255c25e6af4207cab4f07626fdfdfcc2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 1 Nov 2023 17:59:32 +0100 Subject: [PATCH 009/265] remove all references of storyStoreV7 --- .../src/codegen-importfn-script.ts | 4 - .../src/plugins/code-generator-plugin.ts | 15 +- .../src/preview/iframe-webpack.config.ts | 81 ++------ code/lib/cli/src/sandbox-templates.ts | 2 +- .../core-server/src/__for-testing__/main.ts | 3 - code/lib/core-server/src/build-static.ts | 11 +- code/lib/core-server/src/dev-server.ts | 7 - .../core-server/src/presets/common-preset.ts | 1 - .../StoryIndexGenerator.deprecated.test.ts | 2 - .../src/utils/StoryIndexGenerator.test.ts | 2 - .../src/utils/StoryIndexGenerator.ts | 43 +---- .../utils/__tests__/index-extraction.test.ts | 1 - .../src/utils/getStoryIndexGenerator.ts | 6 - .../src/utils/stories-json.test.ts | 177 ------------------ code/lib/csf-tools/src/CsfFile.ts | 3 +- code/lib/manager-api/src/modules/stories.ts | 6 +- .../lib/manager-api/src/tests/stories.test.ts | 2 +- .../src/modules/client-api/ClientApi.ts | 9 - .../modules/client-api/StoryStoreFacade.ts | 7 +- .../src/modules/core-client/start.test.ts | 7 +- .../src/modules/core-client/start.ts | 107 +---------- .../src/modules/preview-web/Preview.tsx | 18 +- .../PreviewWeb.integration.test.ts | 4 +- .../modules/preview-web/PreviewWeb.test.ts | 5 +- .../preview-web/PreviewWithSelection.tsx | 34 ++-- .../telemetry/src/storybook-metadata.test.ts | 4 +- code/lib/types/src/modules/core-common.ts | 5 - .../src/components/preview/Preview.tsx | 2 +- code/ui/manager/src/runtime.ts | 2 +- scripts/event-log-checker.ts | 20 -- scripts/tasks/test-runner-build.ts | 5 - test-storybooks/ember-cli/.storybook/main.js | 1 - .../external-docs/.storybook/main.cjs | 1 - .../server-kitchen-sink/.storybook/main.ts | 4 +- 34 files changed, 66 insertions(+), 535 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index 5df14d875f25..39ee3e2d42ef 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -28,11 +28,7 @@ function toImportPath(relativePath: string) { async function toImportFn(stories: string[]) { const { normalizePath } = await import('vite'); const objectEntries = stories.map((file) => { - const ext = path.extname(file); const relativePath = normalizePath(path.relative(process.cwd(), file)); - if (!['.js', '.jsx', '.ts', '.tsx', '.mdx', '.svelte', '.vue'].includes(ext)) { - logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`); - } return ` '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`; }); diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts index c27d7c73ea4a..52399c744768 100644 --- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts @@ -90,27 +90,16 @@ export function codeGeneratorPlugin(options: Options): Plugin { return undefined; }, async load(id, config) { - const storyStoreV7 = options.features?.storyStoreV7; if (id === virtualStoriesFile) { - if (storyStoreV7) { - return generateImportFnScriptCode(options); - } - return generateVirtualStoryEntryCode(options); + return generateImportFnScriptCode(options); } if (id === virtualAddonSetupFile) { return generateAddonSetupCode(); } - if (id === virtualPreviewFile && !storyStoreV7) { - return generatePreviewEntryCode(options); - } - if (id === virtualFileId) { - if (storyStoreV7) { - return generateModernIframeScriptCode(options, projectRoot); - } - return generateIframeScriptCode(options, projectRoot); + return generateModernIframeScriptCode(options, projectRoot); } if (id === iframeId) { 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 55e0d733aa9e..a1a820b1b6e2 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -13,16 +13,14 @@ import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@story import { globals } from '@storybook/preview/globals'; import { getBuilderOptions, - getRendererName, stringifyProcessEnvs, handlebars, - interpolate, normalizeStories, readTemplate, loadPreviewOrConfigFile, isPreservingSymlinks, } from '@storybook/core-common'; -import { toRequireContextString, toImportFn } from '@storybook/core-webpack'; +import { toImportFn } from '@storybook/core-webpack'; import { dedent } from 'ts-dedent'; import type { BuilderOptions, TypescriptOptions } from '../types'; import { createBabelLoader, createSWCLoader } from './loaders'; @@ -132,68 +130,25 @@ export default async ( ].filter(Boolean); const virtualModuleMapping: Record = {}; - if (features?.storyStoreV7) { - const storiesFilename = 'storybook-stories.js'; - const storiesPath = resolve(join(workingDir, storiesFilename)); + const storiesFilename = 'storybook-stories.js'; + const storiesPath = resolve(join(workingDir, storiesFilename)); - const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; - virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); - const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); - virtualModuleMapping[configEntryPath] = handlebars( - await readTemplate( - require.resolve( - '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' - ) - ), - { - storiesFilename, - previewAnnotations, - } - // We need to double escape `\` for webpack. We may have some in windows paths - ).replace(/\\/g, '\\\\'); - entries.push(configEntryPath); - } else { - const rendererName = await getRendererName(options); - - const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js')); - virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`; - entries.push(rendererInitEntry); - - const entryTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') - ); - - previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { - if (!previewAnnotationFilename) return; - - // Ensure that relative paths end up mapped to a filename in the cwd, so a later import - // of the `previewAnnotationFilename` in the template works. - const entryFilename = previewAnnotationFilename.startsWith('.') - ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js` - : `${previewAnnotationFilename}-generated-config-entry.js`; - // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM - // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173 - virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { - previewAnnotationFilename, - }); - entries.push(entryFilename); - }); - if (stories.length > 0) { - const storyTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js') - ); - // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs - // in the user's webpack mode, which may be strict about the use of require/import. - // See https://github.com/storybookjs/storybook/issues/14877 - const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`)); - virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { - rendererName, - }) - // Make sure we also replace quotes for this one - .replace("'{{stories}}'", stories.map(toRequireContextString).join(',')); - entries.push(storiesFilename); + const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; + virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); + const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); + virtualModuleMapping[configEntryPath] = handlebars( + await readTemplate( + require.resolve( + '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' + ) + ), + { + storiesFilename, + previewAnnotations, } - } + // We need to double escape `\` for webpack. We may have some in windows paths + ).replace(/\\/g, '\\\\'); + entries.push(configEntryPath); const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel; const tsCheckOptions = typescriptOptions.checkOptions || {}; diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 88190caaa6b1..e5cb876472d1 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -62,7 +62,7 @@ export type Template = { inDevelopment?: boolean; /** * Some sandboxes might need extra modifications in the initialized Storybook, - * such as extend main.js, for setting specific feature flags like storyStoreV7, etc. + * such as extend main.js, for setting specific feature flags. */ modifications?: { skipTemplateStories?: boolean; diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts index 988f5ba319fd..2643a4582bd5 100644 --- a/code/lib/core-server/src/__for-testing__/main.ts +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -29,9 +29,6 @@ const config: StorybookConfig = { disableTelemetry: true, }, logLevel: 'debug', - features: { - storyStoreV7: false, - }, framework: { name: '@storybook/react-webpack5', options: { diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 55dc59fbaac1..d2c63f033efe 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -124,13 +124,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption presets.apply('docs', {}), ]); - if (features?.storyStoreV7 === false) { - deprecate( - dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead. - - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated` - ); - } - const fullOptions: Options = { ...options, presets, @@ -164,7 +157,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption let initializedStoryIndexGenerator: Promise = Promise.resolve(undefined); - if ((features?.buildStoriesJson || features?.storyStoreV7) && !options.ignorePreview) { + if (features?.buildStoriesJson && !options.ignorePreview) { const workingDir = process.cwd(); const directories = { configDir: options.configDir, @@ -176,8 +169,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption storyIndexers: deprecatedStoryIndexers, indexers, docs: docsOptions, - storiesV2Compatibility: !features?.storyStoreV7, - storyStoreV7: !!features?.storyStoreV7, }); initializedStoryIndexGenerator = generator.initialize().then(() => generator); diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts index 1e8de546880e..97993a1dcc17 100644 --- a/code/lib/core-server/src/dev-server.ts +++ b/code/lib/core-server/src/dev-server.ts @@ -38,13 +38,6 @@ export async function storybookDevServer(options: Options) { getServerChannel(server) ); - if (features?.storyStoreV7 === false) { - deprecate( - dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead. - - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated` - ); - } - let indexError: Error | undefined; // try get index generator, if failed, send telemetry without storyCount, then rethrow the error const initializedStoryIndexGenerator: Promise = diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 39511aef6be4..fa548c3a2c0e 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -191,7 +191,6 @@ export const features = async ( ...existing, warnOnLegacyHierarchySeparator: true, buildStoriesJson: false, - storyStoreV7: true, argTypeTargetsV7: true, legacyDecoratorFileOrder: false, }); diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.deprecated.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.deprecated.test.ts index 60d700bad62e..e86119accda2 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.deprecated.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.deprecated.test.ts @@ -53,8 +53,6 @@ const options: StoryIndexGeneratorOptions = { { test: /\.stories\.(m?js|ts)x?$/, indexer: csfIndexer }, ], indexers: [], - storiesV2Compatibility: false, - storyStoreV7: true, docs: { defaultName: 'docs', autodocs: false }, }; diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index fad7090789fe..f11b584e67f2 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -48,8 +48,6 @@ const options: StoryIndexGeneratorOptions = { workingDir: path.join(__dirname, '__mockdata__'), storyIndexers: [], indexers: [csfIndexer, createStoriesMdxIndexer(false)], - storiesV2Compatibility: false, - storyStoreV7: true, docs: { defaultName: 'docs', autodocs: false }, }; diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 0f847b8917a1..584f3098af76 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -53,8 +53,6 @@ type SpecifierStoriesCache = Record; export type StoryIndexGeneratorOptions = { workingDir: Path; configDir: Path; - storiesV2Compatibility: boolean; - storyStoreV7: boolean; storyIndexers: StoryIndexer[]; indexers: Indexer[]; docs: DocsOptions; @@ -429,11 +427,6 @@ export class StoryIndexGenerator { async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) { const relativePath = path.relative(this.options.workingDir, absolutePath); try { - invariant( - this.options.storyStoreV7, - `You cannot use \`.mdx\` files without using \`storyStoreV7\`.` - ); - const normalizedPath = normalizeStoryPath(relativePath); const importPath = slash(normalizedPath); @@ -613,13 +606,9 @@ export class StoryIndexGenerator { async sortStories(entries: StoryIndex['entries']) { const sortableStories = Object.values(entries); - // Skip sorting if we're in v6 mode because we don't have - // all the info we need here - if (this.options.storyStoreV7) { - const storySortParameter = await this.getStorySortParameter(); - const fileNameOrder = this.storyFileNames(); - sortStoriesV7(sortableStories, storySortParameter, fileNameOrder); - } + const storySortParameter = await this.getStorySortParameter(); + const fileNameOrder = this.storyFileNames(); + sortStoriesV7(sortableStories, storySortParameter, fileNameOrder); return sortableStories.reduce((acc, item) => { acc[item.id] = item; @@ -659,31 +648,7 @@ export class StoryIndexGenerator { const sorted = await this.sortStories(indexEntries); - let compat = sorted; - if (this.options.storiesV2Compatibility) { - const titleToStoryCount = Object.values(sorted).reduce((acc, story) => { - acc[story.title] = (acc[story.title] || 0) + 1; - return acc; - }, {} as Record); - - // @ts-expect-error (Converted from ts-ignore) - compat = Object.entries(sorted).reduce((acc, entry) => { - const [id, story] = entry; - if (story.type === 'docs') return acc; - - acc[id] = { - ...story, - kind: story.title, - story: story.name, - parameters: { - __id: story.id, - docsOnly: titleToStoryCount[story.title] === 1 && story.name === 'Page', - fileName: story.importPath, - }, - }; - return acc; - }, {} as Record); - } + const compat = sorted; this.lastIndex = { v: 4, diff --git a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts index 39820b3e2c17..84ff37e2219e 100644 --- a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts +++ b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts @@ -19,7 +19,6 @@ const options: StoryIndexGeneratorOptions = { storyIndexers: [], indexers: [], storiesV2Compatibility: false, - storyStoreV7: true, docs: { defaultName: 'docs', autodocs: false }, }; diff --git a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts index 952edb507824..ba0a15ae642a 100644 --- a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts @@ -8,16 +8,12 @@ import { router } from './router'; export async function getStoryIndexGenerator( features: { buildStoriesJson?: boolean; - storyStoreV7?: boolean; argTypeTargetsV7?: boolean; warnOnLegacyHierarchySeparator?: boolean; }, options: Options, serverChannel: ServerChannel ): Promise { - if (!features?.buildStoriesJson && !features?.storyStoreV7) { - return undefined; - } const workingDir = process.cwd(); const directories = { configDir: options.configDir, @@ -35,8 +31,6 @@ export async function getStoryIndexGenerator( indexers: await indexers, docs: await docsOptions, workingDir, - storiesV2Compatibility: !features?.storyStoreV7, - storyStoreV7: features.storyStoreV7 ?? false, }); const initializedStoryIndexGenerator = generator.initialize().then(() => generator); diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index e1f0b1f6d613..2936f4689d36 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -49,8 +49,6 @@ const getInitializedStoryIndexGenerator = async ( indexers: [csfIndexer, createStoriesMdxIndexer(false)], configDir: workingDir, workingDir, - storiesV2Compatibility: false, - storyStoreV7: true, docs: { defaultName: 'docs', autodocs: false }, ...overrides, }; @@ -710,181 +708,6 @@ describe('useStoriesJson', () => { `); }); - it('disallows .mdx files without storyStoreV7', async () => { - const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; - useStoriesJson({ - router, - initializedStoryIndexGenerator: getInitializedStoryIndexGenerator({ - storyStoreV7: false, - }), - workingDir, - serverChannel: mockServerChannel, - normalizedStories, - }); - - expect(use).toHaveBeenCalledTimes(2); - const route = use.mock.calls[1][1]; - - await route(request, response); - - expect(send).toHaveBeenCalledTimes(1); - expect(send.mock.calls[0][0]).toMatchInlineSnapshot(` - "Unable to index files: - - ./src/docs2/ComponentReference.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/MetaOf.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/NoTitle.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/SecondMetaOf.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/Template.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`. - - ./src/docs2/Title.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`." - `); - }); - - it('allows disabling storyStoreV7 if no .mdx files are used', async () => { - const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; - useStoriesJson({ - router, - initializedStoryIndexGenerator: getInitializedStoryIndexGenerator( - { storyStoreV7: false }, - normalizedStories.slice(0, 1) - ), - workingDir, - serverChannel: mockServerChannel, - normalizedStories, - }); - - expect(use).toHaveBeenCalledTimes(2); - const route = use.mock.calls[1][1]; - - await route(request, response); - - expect(send).toHaveBeenCalledTimes(1); - expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(` - Object { - "stories": Object { - "a--story-one": Object { - "id": "a--story-one", - "importPath": "./src/A.stories.js", - "kind": "A", - "name": "Story One", - "parameters": Object { - "__id": "a--story-one", - "docsOnly": false, - "fileName": "./src/A.stories.js", - }, - "story": "Story One", - "tags": Array [ - "component-tag", - "story-tag", - "story", - ], - "title": "A", - }, - "b--story-one": Object { - "id": "b--story-one", - "importPath": "./src/B.stories.ts", - "kind": "B", - "name": "Story One", - "parameters": Object { - "__id": "b--story-one", - "docsOnly": false, - "fileName": "./src/B.stories.ts", - }, - "story": "Story One", - "tags": Array [ - "autodocs", - "story", - ], - "title": "B", - }, - "d--story-one": Object { - "id": "d--story-one", - "importPath": "./src/D.stories.jsx", - "kind": "D", - "name": "Story One", - "parameters": Object { - "__id": "d--story-one", - "docsOnly": false, - "fileName": "./src/D.stories.jsx", - }, - "story": "Story One", - "tags": Array [ - "autodocs", - "story", - ], - "title": "D", - }, - "first-nested-deeply-f--story-one": Object { - "id": "first-nested-deeply-f--story-one", - "importPath": "./src/first-nested/deeply/F.stories.js", - "kind": "first-nested/deeply/F", - "name": "Story One", - "parameters": Object { - "__id": "first-nested-deeply-f--story-one", - "docsOnly": false, - "fileName": "./src/first-nested/deeply/F.stories.js", - }, - "story": "Story One", - "tags": Array [ - "story", - ], - "title": "first-nested/deeply/F", - }, - "h--story-one": Object { - "id": "h--story-one", - "importPath": "./src/H.stories.mjs", - "kind": "H", - "name": "Story One", - "parameters": Object { - "__id": "h--story-one", - "docsOnly": false, - "fileName": "./src/H.stories.mjs", - }, - "story": "Story One", - "tags": Array [ - "autodocs", - "story", - ], - "title": "H", - }, - "nested-button--story-one": Object { - "id": "nested-button--story-one", - "importPath": "./src/nested/Button.stories.ts", - "kind": "nested/Button", - "name": "Story One", - "parameters": Object { - "__id": "nested-button--story-one", - "docsOnly": false, - "fileName": "./src/nested/Button.stories.ts", - }, - "story": "Story One", - "tags": Array [ - "component-tag", - "story", - ], - "title": "nested/Button", - }, - "second-nested-g--story-one": Object { - "id": "second-nested-g--story-one", - "importPath": "./src/second-nested/G.stories.ts", - "kind": "second-nested/G", - "name": "Story One", - "parameters": Object { - "__id": "second-nested-g--story-one", - "docsOnly": false, - "fileName": "./src/second-nested/G.stories.ts", - }, - "story": "Story One", - "tags": Array [ - "story", - ], - "title": "second-nested/G", - }, - }, - "v": 3, - } - `); - }); - it('can handle simultaneous access', async () => { const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts index 15ab39abdc45..83d33d598857 100644 --- a/code/lib/csf-tools/src/CsfFile.ts +++ b/code/lib/csf-tools/src/CsfFile.ts @@ -455,8 +455,7 @@ export class CsfFile { throw new Error(dedent` Unexpected \`storiesOf\` usage: ${formatLocation(node, self._fileName)}. - In SB7, we use the next-generation \`storyStoreV7\` by default, which does not support \`storiesOf\`. - More info, with details about how to opt-out here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev7-enabled-by-default + SB8 does not support \`storiesOf\`. `); } }, diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 795f9460b108..ad32444d39fd 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -818,10 +818,8 @@ export const init: ModuleFn = ({ filters: config?.sidebar?.filters || {}, }, init: async () => { - if (FEATURES?.storyStoreV7) { - provider.channel.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex()); - await api.fetchIndex(); - } + provider.channel.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex()); + await api.fetchIndex(); }, }; }; diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index 76213e10be25..36afdbd14a72 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -40,7 +40,7 @@ jest.mock('@storybook/global', () => ({ global: { ...globalThis, fetch: jest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), - FEATURES: { storyStoreV7: true }, + FEATURES: {}, CONFIG_TYPE: 'DEVELOPMENT', }, })); diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index f022ae4203b2..78c793923a56 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -1,6 +1,5 @@ /* eslint-disable no-underscore-dangle */ -import { dedent } from 'ts-dedent'; import { global } from '@storybook/global'; import type { Args, @@ -37,14 +36,6 @@ const warningAlternatives = { }; const checkMethod = (method: keyof typeof warningAlternatives) => { - if (global.FEATURES?.storyStoreV7) { - throw new Error( - dedent`You cannot use \`${method}\` with the new Story Store. - - ${warningAlternatives[method]}` - ); - } - if (!global.__STORYBOOK_CLIENT_API__) { throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`); } diff --git a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts index ccd95120b45c..72e33ff2e64a 100644 --- a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts +++ b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts @@ -142,14 +142,11 @@ export class StoryStoreFacade { if (fileName.match(/\.mdx$/) && !fileName.match(/\.stories\.mdx$/)) { if (global.FEATURES?.storyStoreV7MdxErrors !== false) { throw new Error(dedent` - Cannot index \`.mdx\` file (\`${fileName}\`) in \`storyStoreV7: false\` mode. + Cannot index \`.mdx\` file (\`${fileName}\`) in SB8. The legacy story store does not support new-style \`.mdx\` files. If the file above is not intended to be indexed (i.e. displayed as an entry in the sidebar), either - exclude it from your \`stories\` glob, or add to it. - - If you wanted to index the file, you'll need to name it \`stories.mdx\` and stick to the - legacy (6.x) MDX API, or use the new store.`); + exclude it from your \`stories\` glob, or add to it.`); } } diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index aa304d2ba883..670102982d18 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -568,14 +568,11 @@ describe('start', () => { await waitForEvents([CONFIG_ERROR]); expect(mockChannel.emit.mock.calls.find((call) => call[0] === CONFIG_ERROR)?.[1]) .toMatchInlineSnapshot(` - [Error: Cannot index \`.mdx\` file (\`./Introduction.mdx\`) in \`storyStoreV7: false\` mode. + [Error: Cannot index \`.mdx\` file (\`./Introduction.mdx\`) in SB8. The legacy story store does not support new-style \`.mdx\` files. If the file above is not intended to be indexed (i.e. displayed as an entry in the sidebar), either - exclude it from your \`stories\` glob, or add to it. - - If you wanted to index the file, you'll need to name it \`stories.mdx\` and stick to the - legacy (6.x) MDX API, or use the new store.] + exclude it from your \`stories\` glob, or add to it.] `); }); }); diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index 3b527da4cd1a..a66c63a48bca 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -1,19 +1,10 @@ -/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ +/* eslint-disable @typescript-eslint/naming-convention */ import { global } from '@storybook/global'; -import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; -import { createBrowserChannel } from '@storybook/channels'; -import { FORCE_RE_RENDER } from '@storybook/core-events'; -import { addons } from '../../addons'; -import { PreviewWeb } from '../../preview-web'; -import { ClientApi } from '../../client-api'; - -import { executeLoadableForChanges } from './executeLoadable'; -import type { Loadable } from './executeLoadable'; - -const { FEATURES } = global; +import type { Renderer, ArgsStoryFn, ProjectAnnotations } from '@storybook/types'; +import type { ClientApi } from '../../client-api'; const removedApi = (name: string) => () => { - throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`); + throw new Error(`@storybook/client-api:${name} was removed in SB8.`); }; interface CoreClient_RendererImplementation { @@ -78,93 +69,11 @@ export function start( global.IS_STORYBOOK = true; } - if (FEATURES?.storyStoreV7) { - return { - forceReRender: removedApi('forceReRender'), - configure: removedApi('configure'), - clientApi: { - raw: removedApi('raw'), - }, - }; - } - - const channel = createBrowserChannel({ page: 'preview' }); - addons.setChannel(channel); - - const clientApi = global?.__STORYBOOK_CLIENT_API__ || new ClientApi(); - const preview = global?.__STORYBOOK_PREVIEW__ || new PreviewWeb(); - let initialized = false; - - const importFn = (path: Path) => clientApi.importFn(path); - function onStoriesChanged() { - const storyIndex = clientApi.getStoryIndex(); - preview.onStoriesChanged({ storyIndex, importFn }); - } - - // These two bits are a bit ugly, but due to dependencies, `ClientApi` cannot have - // direct reference to `PreviewWeb`, so we need to patch in bits - clientApi.onImportFnChanged = onStoriesChanged; - clientApi.storyStore = preview.storyStore; - - if (global) { - global.__STORYBOOK_CLIENT_API__ = clientApi; - global.__STORYBOOK_ADDONS_CHANNEL__ = channel; - global.__STORYBOOK_PREVIEW__ = preview; - global.__STORYBOOK_STORY_STORE__ = preview.storyStore; - } - return { - forceReRender: () => channel.emit(FORCE_RE_RENDER), - - clientApi, - // This gets called each time the user calls configure (i.e. once per HMR) - // The first time, it constructs the preview, subsequently it updates it - configure( - renderer: string, - loadable: Loadable, - m?: NodeModule, - disableBackwardCompatibility = true - ) { - if (disableBackwardCompatibility) { - throw new Error('unexpected configure() call'); - } - - clientApi.addParameters({ renderer }); - - // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations - // function in case it throws. So we also need to process its output there also - const getProjectAnnotations = () => { - const { added, removed } = executeLoadableForChanges(loadable, m); - clientApi._loadAddedExports(); - - Array.from(added.entries()).forEach(([fileName, fileExports]) => - clientApi.facade.addStoriesFromExports(fileName, fileExports) - ); - - Array.from(removed.entries()).forEach(([fileName]) => - clientApi.facade.clearFilenameExports(fileName) - ); - - return { - render, - ...clientApi.facade.projectAnnotations, - renderToCanvas, - applyDecorators: decorateStory, - }; - }; - - if (!initialized) { - preview.initialize({ - getStoryIndex: () => clientApi.getStoryIndex(), - importFn, - getProjectAnnotations, - }); - initialized = true; - } else { - // TODO -- why don't we care about the new annotations? - getProjectAnnotations(); - onStoriesChanged(); - } + forceReRender: removedApi('forceReRender'), + configure: removedApi('configure'), + clientApi: { + raw: removedApi('raw'), }, }; } diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 638cf8126b61..bd5a92e41a2d 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -61,7 +61,7 @@ export class Preview { previewEntryError?: Error; constructor(protected channel: Channel = addons.getChannel()) { - if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) { + if (addons.hasServerChannel()) { this.serverChannel = addons.getServerChannel(); } this.storyStore = new StoryStore(); @@ -142,15 +142,7 @@ export class Preview { this.setInitialGlobals(); - let storyIndexPromise: Promise; - if (global.FEATURES?.storyStoreV7) { - storyIndexPromise = this.getStoryIndexFromServer(); - } else { - if (!this.getStoryIndex) { - throw new Error('No `getStoryIndex` passed defined in v6 mode'); - } - storyIndexPromise = SynchronousPromise.resolve().then(this.getStoryIndex); - } + const storyIndexPromise: Promise = this.getStoryIndexFromServer(); return storyIndexPromise .then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex)) @@ -192,7 +184,7 @@ export class Preview { return this.storyStore.initialize({ storyIndex, importFn: this.importFn, - cache: !global.FEATURES?.storyStoreV7, + cache: false, }); } @@ -368,9 +360,7 @@ export class Preview { Do you have an error in your \`preview.js\`? Check your Storybook's browser console for errors.`); } - if (global.FEATURES?.storyStoreV7) { - await this.storyStore.cacheAllCSFFiles(); - } + await this.storyStore.cacheAllCSFFiles(); return this.storyStore.extract(options); } diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index 91d2cd35ae3e..038635366a31 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -44,9 +44,7 @@ jest.mock('@storybook/global', () => ({ search: '?id=*', }, }, - FEATURES: { - storyStoreV7: true, - }, + FEATURES: {}, fetch: async () => ({ status: 200, json: async () => mockStoryIndex }), }, })); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 8123020b86bb..5caf2055bde0 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -69,10 +69,7 @@ jest.mock('@storybook/global', () => ({ search: '?id=*', }, }, - FEATURES: { - storyStoreV7: true, - // xxx - }, + FEATURES: {}, fetch: async () => mockFetchResult, }, })); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index 73b58cc70ead..f6c4d2e63dd7 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -117,9 +117,7 @@ export class PreviewWithSelection extends Preview { return super.initializeWithStoryIndex(storyIndex).then(() => { - if (!global.FEATURES?.storyStoreV7) { - this.channel.emit(SET_INDEX, this.storyStore.getSetIndexPayload()); - } + this.channel.emit(SET_INDEX, this.storyStore.getSetIndexPayload()); return this.selectSpecifiedStory(); }); @@ -204,9 +202,7 @@ export class PreviewWithSelection extends Preview extends Preview extends Preview extends Preview { }); test('should return user specified features', async () => { - const features = { - storyStoreV7: true, - }; + const features = {}; const result = await computeStorybookMetadata({ packageJson: packageJsonMock, diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 0f2a9f54c271..6308d6b02f22 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -279,11 +279,6 @@ export interface StorybookConfig { */ buildStoriesJson?: boolean; - /** - * Activate on demand story store - */ - storyStoreV7?: boolean; - /** * Do not throw errors if using `.mdx` files in SSv7 * (for internal use in sandboxes) diff --git a/code/ui/manager/src/components/preview/Preview.tsx b/code/ui/manager/src/components/preview/Preview.tsx index 7096c1d9bf47..6d9707e73a5f 100644 --- a/code/ui/manager/src/components/preview/Preview.tsx +++ b/code/ui/manager/src/components/preview/Preview.tsx @@ -160,7 +160,7 @@ const Canvas: FC<{ withLoader: boolean; baseUrl: string; children?: never }> = ( const [progress, setProgress] = useState(undefined); useEffect(() => { - if (FEATURES?.storyStoreV7 && global.CONFIG_TYPE === 'DEVELOPMENT') { + if (global.CONFIG_TYPE === 'DEVELOPMENT') { try { const channel = addons.getServerChannel(); diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index 861fc3b88fcb..8c565be5b1c8 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -34,7 +34,7 @@ class ReactProvider extends Provider { this.channel = channel; global.__STORYBOOK_ADDONS_CHANNEL__ = channel; - if (FEATURES?.storyStoreV7 && CONFIG_TYPE === 'DEVELOPMENT') { + if (CONFIG_TYPE === 'DEVELOPMENT') { this.serverChannel = this.channel; addons.setServerChannel(this.serverChannel); } diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index e1f6d82bd533..72d3177dcd44 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -60,26 +60,6 @@ async function run() { assert.equal(bootEvent.payload?.eventType, eventType); }); - // Test only StoryStoreV7 projects, as ssv6 does not support the storyIndex - if (template.modifications?.mainConfig?.features?.storyStoreV7 !== false) { - const { exampleStoryCount, exampleDocsCount } = mainEvent.payload?.storyIndex || {}; - if (['build', 'dev'].includes(eventType)) { - test(`${eventType} event should contain 8 stories and 3 docs entries`, () => { - assert.equal( - exampleStoryCount, - 8, - `Expected 8 stories but received ${exampleStoryCount} instead.` - ); - const expectedDocsCount = template.modifications?.disableDocs ? 0 : 3; - assert.equal( - exampleDocsCount, - expectedDocsCount, - `Expected ${expectedDocsCount} docs entries but received ${exampleDocsCount} instead.` - ); - }); - } - } - test(`main event should be ${eventType} and contain correct id and session id`, () => { assert.equal(mainEvent.eventType, eventType); assert.notEqual(mainEvent.eventId, bootEvent.eventId); diff --git a/scripts/tasks/test-runner-build.ts b/scripts/tasks/test-runner-build.ts index b57d4c803233..b5d1a399f9b7 100644 --- a/scripts/tasks/test-runner-build.ts +++ b/scripts/tasks/test-runner-build.ts @@ -19,11 +19,6 @@ export const testRunnerBuild: Task & { port: number } = { '--failOnConsole', ]; - // index-json mode is only supported in ssv7 - if (template.modifications?.mainConfig?.features?.storyStoreV7 !== false) { - flags.push('--index-json'); - } - await exec( `yarn test-storybook ${flags.join(' ')}`, { diff --git a/test-storybooks/ember-cli/.storybook/main.js b/test-storybooks/ember-cli/.storybook/main.js index 1552c8dfd1f1..f8becd9be286 100644 --- a/test-storybooks/ember-cli/.storybook/main.js +++ b/test-storybooks/ember-cli/.storybook/main.js @@ -45,7 +45,6 @@ module.exports = { staticDirs: ['../ember-output'], features: { buildStoriesJson: false, - storyStoreV7: false, }, framework: { name: '@storybook/ember' }, }; diff --git a/test-storybooks/external-docs/.storybook/main.cjs b/test-storybooks/external-docs/.storybook/main.cjs index fbe15b8582ac..4aed5ba024ff 100644 --- a/test-storybooks/external-docs/.storybook/main.cjs +++ b/test-storybooks/external-docs/.storybook/main.cjs @@ -20,7 +20,6 @@ const config = { channelOptions: { allowFunction: false, maxDepth: 10 }, }, features: { - storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'), buildStoriesJson: true, warnOnLegacyHierarchySeparator: false, previewMdx2: true, diff --git a/test-storybooks/server-kitchen-sink/.storybook/main.ts b/test-storybooks/server-kitchen-sink/.storybook/main.ts index 7854dd0349f5..3334ddd63d08 100644 --- a/test-storybooks/server-kitchen-sink/.storybook/main.ts +++ b/test-storybooks/server-kitchen-sink/.storybook/main.ts @@ -15,9 +15,7 @@ const mainConfig: StorybookConfig = { core: { disableTelemetry: true, }, - features: { - storyStoreV7: false, - }, + features: {}, framework: '@storybook/server-webpack5', }; From 9ab83e84772b9093bf494f5ade57fb6ee8750e17 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 1 Nov 2023 18:06:27 +0100 Subject: [PATCH 010/265] delete unused files --- .../builder-vite/src/codegen-entries.ts | 48 -------- .../builder-vite/src/codegen-iframe-script.ts | 116 ------------------ .../src/plugins/code-generator-plugin.ts | 2 - ...orybook-builder-api-preview-exports.ts.mdx | 2 - 4 files changed, 168 deletions(-) delete mode 100644 code/builders/builder-vite/src/codegen-entries.ts delete mode 100644 code/builders/builder-vite/src/codegen-iframe-script.ts diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts deleted file mode 100644 index 44c3163b1def..000000000000 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { loadPreviewOrConfigFile } from '@storybook/core-common'; -import type { Options } from '@storybook/types'; -import slash from 'slash'; -import { listStories } from './list-stories'; - -const absoluteFilesToImport = async ( - files: string[], - name: string, - normalizePath: (id: string) => string -) => - files - .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`) - .join('\n'); - -export async function generateVirtualStoryEntryCode(options: Options) { - const { normalizePath } = await import('vite'); - const storyEntries = await listStories(options); - const resolveMap = storyEntries.reduce>( - (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), - {} - ); - const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); - - return ` - ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)} - - function loadable(key) { - return {${modules}}[key]; - } - - Object.assign(loadable, { - keys: () => (${JSON.stringify(Object.keys(resolveMap))}), - resolve: (key) => (${JSON.stringify(resolveMap)}[key]) - }); - - export function configStories(configure) { - configure(loadable, { hot: import.meta.hot }, false); - } - `.trim(); -} - -export async function generatePreviewEntryCode({ configDir }: Options) { - const previewFile = loadPreviewOrConfigFile({ configDir }); - if (!previewFile) return ''; - - return `import * as preview from '${slash(previewFile)}'; - export default preview;`; -} diff --git a/code/builders/builder-vite/src/codegen-iframe-script.ts b/code/builders/builder-vite/src/codegen-iframe-script.ts deleted file mode 100644 index 94400f57a017..000000000000 --- a/code/builders/builder-vite/src/codegen-iframe-script.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { getRendererName } from '@storybook/core-common'; -import type { Options, PreviewAnnotation } from '@storybook/types'; -import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names'; -import { processPreviewAnnotation } from './utils/process-preview-annotation'; - -export async function generateIframeScriptCode(options: Options, projectRoot: string) { - const { presets } = options; - const rendererName = await getRendererName(options); - - const previewAnnotations = await presets.apply( - 'previewAnnotations', - [], - options - ); - const configEntries = [...previewAnnotations] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)); - - const filesToImport = (files: string[], name: string) => - files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n'); - - const importArray = (name: string, length: number) => - new Array(length).fill(0).map((_, i) => `${name}_${i}`); - - // noinspection UnnecessaryLocalVariableJS - /** @todo Inline variable and remove `noinspection` */ - // language=JavaScript - const code = ` - // Ensure that the client API is initialized by the framework before any other iframe code - // is loaded. That way our client-apis can assume the existence of the API+store - import { configure } from '${rendererName}'; - - import { logger } from '@storybook/client-logger'; - import * as previewApi from "@storybook/preview-api"; - ${filesToImport(configEntries, 'config')} - - import * as preview from '${virtualPreviewFile}'; - import { configStories } from '${virtualStoriesFile}'; - - const { - addDecorator, - addParameters, - addLoader, - addArgs, - addArgTypes, - addStepRunner, - addArgTypesEnhancer, - addArgsEnhancer, - setGlobalRender, - } = previewApi; - - const configs = [${importArray('config', configEntries.length) - .concat('preview.default') - .join(',')}].filter(Boolean) - - configs.map(config => config.default ? config.default : config).forEach(config => { - Object.keys(config).forEach((key) => { - const value = config[key]; - switch (key) { - case 'args': { - return addArgs(value); - } - case 'argTypes': { - return addArgTypes(value); - } - case 'decorators': { - return value.forEach((decorator) => addDecorator(decorator, false)); - } - case 'loaders': { - return value.forEach((loader) => addLoader(loader, false)); - } - case 'parameters': { - return addParameters({ ...value }, false); - } - case 'argTypesEnhancers': { - return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); - } - case 'argsEnhancers': { - return value.forEach((enhancer) => addArgsEnhancer(enhancer)) - } - case 'render': { - return setGlobalRender(value) - } - case 'globals': - case 'globalTypes': { - const v = {}; - v[key] = value; - return addParameters(v, false); - } - case 'decorateStory': - case 'applyDecorators': - case 'renderToDOM': // deprecated - case 'renderToCanvas': { - return null; // This key is not handled directly in v6 mode. - } - case 'runStep': { - return addStepRunner(value); - } - default: { - // eslint-disable-next-line prefer-template - return console.log(key + ' was not supported :( !'); - } - } - }); - }) - - /* TODO: not quite sure what to do with this, to fix HMR - if (import.meta.hot) { - import.meta.hot.accept(); - } - */ - - configStories(configure); - `.trim(); - return code; -} diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts index 52399c744768..2aa64057592b 100644 --- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts +++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts @@ -4,10 +4,8 @@ import * as fs from 'fs'; import type { Plugin } from 'vite'; import type { Options } from '@storybook/types'; import { transformIframeHtml } from '../transform-iframe-html'; -import { generateIframeScriptCode } from '../codegen-iframe-script'; import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script'; import { generateImportFnScriptCode } from '../codegen-importfn-script'; -import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from '../codegen-entries'; import { generateAddonSetupCode } from '../codegen-set-addon-channel'; import { diff --git a/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx index 87d466cf1002..2d5562727ede 100644 --- a/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx @@ -1,6 +1,4 @@ ```ts -// codegen-iframe-script.ts - import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names'; import { transformAbsPath } from './utils/transform-abs-path'; import type { ExtendedOptions } from './types'; From a71d36889cd8f205e0755c1a9021a3fd66ab0892 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 1 Nov 2023 18:09:10 +0100 Subject: [PATCH 011/265] remove unused files --- .../templates/virtualModuleEntry.template.js | 65 ------------------- .../templates/virtualModuleStory.template.js | 3 - 2 files changed, 68 deletions(-) delete mode 100644 code/builders/builder-webpack5/templates/virtualModuleEntry.template.js delete mode 100644 code/builders/builder-webpack5/templates/virtualModuleStory.template.js diff --git a/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js b/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js deleted file mode 100644 index 083a3c5f16c4..000000000000 --- a/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js +++ /dev/null @@ -1,65 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import { - addDecorator, - addParameters, - addLoader, - addArgs, - addArgTypes, - addStepRunner, - addArgsEnhancer, - addArgTypesEnhancer, - setGlobalRender, -} from '@storybook/preview-api'; -import * as previewAnnotations from '{{previewAnnotationFilename}}'; - -const config = previewAnnotations.default ?? previewAnnotations; - -Object.keys(config).forEach((key) => { - const value = config[key]; - switch (key) { - case 'args': { - return addArgs(value); - } - case 'argTypes': { - return addArgTypes(value); - } - case 'decorators': { - return value.forEach((decorator) => addDecorator(decorator, false)); - } - case 'loaders': { - return value.forEach((loader) => addLoader(loader, false)); - } - case 'parameters': { - return addParameters({ ...value }, false); - } - case 'argTypesEnhancers': { - return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); - } - case 'argsEnhancers': { - return value.forEach((enhancer) => addArgsEnhancer(enhancer)); - } - case 'render': { - return setGlobalRender(value); - } - case 'globals': - case 'globalTypes': { - const v = {}; - v[key] = value; - return addParameters(v, false); - } - case '__namedExportsOrder': - case 'decorateStory': - case 'renderToDOM': // deprecated - case 'renderToCanvas': { - return null; // This key is not handled directly in v6 mode. - } - case 'runStep': { - return addStepRunner(value); - } - default: { - return console.log( - `Unknown key '${key}' exported by preview annotation file '{{previewAnnotationFilename}}'` - ); - } - } -}); diff --git a/code/builders/builder-webpack5/templates/virtualModuleStory.template.js b/code/builders/builder-webpack5/templates/virtualModuleStory.template.js deleted file mode 100644 index f7a668cab55f..000000000000 --- a/code/builders/builder-webpack5/templates/virtualModuleStory.template.js +++ /dev/null @@ -1,3 +0,0 @@ -const { configure } = require('{{rendererName}}'); - -configure(['{{stories}}'], module, false); From 0d995eb91bfd67c2d91581bcce5d8a0edaff5d9f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 1 Nov 2023 18:13:26 +0100 Subject: [PATCH 012/265] cleanup --- code/lib/core-server/src/build-static.ts | 3 +-- code/lib/manager-api/src/modules/stories.ts | 2 +- .../src/modules/preview-web/PreviewWithSelection.tsx | 1 - code/ui/manager/src/runtime.ts | 2 +- 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index d2c63f033efe..93b2441043d6 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -2,7 +2,7 @@ import chalk from 'chalk'; import { copy, emptyDir, ensureDir } from 'fs-extra'; import { dirname, isAbsolute, join, resolve } from 'path'; import { global } from '@storybook/global'; -import { deprecate, logger } from '@storybook/node-logger'; +import { logger } from '@storybook/node-logger'; import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry'; import type { BuilderOptions, @@ -23,7 +23,6 @@ import { import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors'; import isEqual from 'lodash/isEqual.js'; -import dedent from 'ts-dedent'; import { outputStats } from './utils/output-stats'; import { copyAllStaticFiles, diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index ad32444d39fd..987fffe37c9e 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -58,7 +58,7 @@ import { import type { ComposedRef } from '../index'; import type { ModuleFn } from '../lib/types'; -const { FEATURES, fetch } = global; +const { fetch } = global; const STORY_INDEX_PATH = './index.json'; type Direction = -1 | 1; diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index f6c4d2e63dd7..d320ee9a6193 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -1,5 +1,4 @@ import { dedent } from 'ts-dedent'; -import { global } from '@storybook/global'; import { CURRENT_STORY_WAS_SET, DOCS_PREPARED, diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index 8c565be5b1c8..4a24fa6a7209 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -9,7 +9,7 @@ import { CHANNEL_CREATED } from '@storybook/core-events'; import Provider from './provider'; import { renderStorybookUI } from './index'; -const { FEATURES, CONFIG_TYPE } = global; +const { CONFIG_TYPE } = global; class ReactProvider extends Provider { private addons: AddonStore; From c66a48ba5e8d6ff388e31728cb26480e3e1a62a4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 1 Nov 2023 19:32:36 +0100 Subject: [PATCH 013/265] disable broken tests --- .../src/utils/stories-json.test.ts | 112 ++++++++++++++++++ .../src/modules/core-client/start.test.ts | 4 +- .../PreviewWeb.integration.test.ts | 2 +- .../modules/preview-web/PreviewWeb.test.ts | 2 +- 4 files changed, 116 insertions(+), 4 deletions(-) diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index 2936f4689d36..3956f50f0395 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -567,6 +567,46 @@ describe('useStoriesJson', () => { expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(` Object { "stories": Object { + "a--metaof": Object { + "id": "a--metaof", + "importPath": "./src/docs2/MetaOf.mdx", + "kind": "A", + "name": "MetaOf", + "parameters": Object { + "__id": "a--metaof", + "docsOnly": true, + "fileName": "./src/docs2/MetaOf.mdx", + }, + "storiesImports": Array [ + "./src/A.stories.js", + ], + "story": "MetaOf", + "tags": Array [ + "attached-mdx", + "docs", + ], + "title": "A", + }, + "a--second-docs": Object { + "id": "a--second-docs", + "importPath": "./src/docs2/SecondMetaOf.mdx", + "kind": "A", + "name": "Second Docs", + "parameters": Object { + "__id": "a--second-docs", + "docsOnly": true, + "fileName": "./src/docs2/SecondMetaOf.mdx", + }, + "storiesImports": Array [ + "./src/A.stories.js", + ], + "story": "Second Docs", + "tags": Array [ + "attached-mdx", + "docs", + ], + "title": "A", + }, "a--story-one": Object { "id": "a--story-one", "importPath": "./src/A.stories.js", @@ -619,6 +659,60 @@ describe('useStoriesJson', () => { ], "title": "D", }, + "docs2-componentreference--docs": Object { + "id": "docs2-componentreference--docs", + "importPath": "./src/docs2/ComponentReference.mdx", + "kind": "docs2/ComponentReference", + "name": "docs", + "parameters": Object { + "__id": "docs2-componentreference--docs", + "docsOnly": true, + "fileName": "./src/docs2/ComponentReference.mdx", + }, + "storiesImports": Array [], + "story": "docs", + "tags": Array [ + "unattached-mdx", + "docs", + ], + "title": "docs2/ComponentReference", + }, + "docs2-notitle--docs": Object { + "id": "docs2-notitle--docs", + "importPath": "./src/docs2/NoTitle.mdx", + "kind": "docs2/NoTitle", + "name": "docs", + "parameters": Object { + "__id": "docs2-notitle--docs", + "docsOnly": true, + "fileName": "./src/docs2/NoTitle.mdx", + }, + "storiesImports": Array [], + "story": "docs", + "tags": Array [ + "unattached-mdx", + "docs", + ], + "title": "docs2/NoTitle", + }, + "docs2-yabbadabbadooo--docs": Object { + "id": "docs2-yabbadabbadooo--docs", + "importPath": "./src/docs2/Title.mdx", + "kind": "docs2/Yabbadabbadooo", + "name": "docs", + "parameters": Object { + "__id": "docs2-yabbadabbadooo--docs", + "docsOnly": true, + "fileName": "./src/docs2/Title.mdx", + }, + "storiesImports": Array [], + "story": "docs", + "tags": Array [ + "unattached-mdx", + "docs", + ], + "title": "docs2/Yabbadabbadooo", + }, "first-nested-deeply-f--story-one": Object { "id": "first-nested-deeply-f--story-one", "importPath": "./src/first-nested/deeply/F.stories.js", @@ -669,6 +763,24 @@ describe('useStoriesJson', () => { ], "title": "nested/Button", }, + "nested-page--docs": Object { + "id": "nested-page--docs", + "importPath": "./src/nested/Page.stories.mdx", + "kind": "nested/Page", + "name": "docs", + "parameters": Object { + "__id": "nested-page--docs", + "docsOnly": true, + "fileName": "./src/nested/Page.stories.mdx", + }, + "storiesImports": Array [], + "story": "docs", + "tags": Array [ + "stories-mdx", + "docs", + ], + "title": "nested/Page", + }, "nested-page--story-one": Object { "id": "nested-page--story-one", "importPath": "./src/nested/Page.stories.mdx", diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 670102982d18..93816afc6c87 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -107,7 +107,7 @@ function makeRequireContext(importMap: Record) { return req; } -describe('start', () => { +describe.skip('start', () => { beforeEach(() => { global.DOCS_OPTIONS = {}; // @ts-expect-error (setting this to undefined is indeed what we want to do) @@ -585,7 +585,7 @@ describe('start', () => { }, StoryOne: jest.fn(), }; - it('loads and renders the first story correctly', async () => { + it.skip('loads and renders the first story correctly', async () => { const renderToCanvas = jest.fn(); const { configure } = start(renderToCanvas); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index 038635366a31..8c28b84905f1 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -71,7 +71,7 @@ beforeEach(() => { jest.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any); }); -describe('PreviewWeb', () => { +describe.skip('PreviewWeb', () => { describe('initial render', () => { it('renders story mode through the stack', async () => { const { DocsRenderer } = await import('@storybook/addon-docs'); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 5caf2055bde0..6a8647caa0cb 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -139,7 +139,7 @@ beforeEach(() => { jest.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any); }); -describe('PreviewWeb', () => { +describe.skip('PreviewWeb', () => { describe('initialize', () => { it('shows an error if getProjectAnnotations throws', async () => { const err = new Error('meta error'); From 811c4e95bcecfbb43808ced080af38272067102a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 1 Nov 2023 21:04:21 +0100 Subject: [PATCH 014/265] cleanup --- code/builders/builder-vite/src/codegen-importfn-script.ts | 1 - code/lib/core-server/src/dev-server.ts | 3 +-- code/lib/core-server/src/utils/StoryIndexGenerator.ts | 2 -- .../core-server/src/utils/__tests__/index-extraction.test.ts | 1 - code/lib/core-server/src/utils/stories-json.test.ts | 4 +--- code/ui/manager/src/components/preview/Preview.tsx | 2 -- scripts/tasks/test-runner-build.ts | 2 +- 7 files changed, 3 insertions(+), 12 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index 39ee3e2d42ef..247f15421c78 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -1,7 +1,6 @@ import * as path from 'path'; import type { Options } from '@storybook/types'; -import { logger } from '@storybook/node-logger'; import { listStories } from './list-stories'; diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts index 97993a1dcc17..7658398e8169 100644 --- a/code/lib/core-server/src/dev-server.ts +++ b/code/lib/core-server/src/dev-server.ts @@ -5,9 +5,8 @@ import invariant from 'tiny-invariant'; import type { CoreConfig, Options, StorybookConfig } from '@storybook/types'; import { logConfig } from '@storybook/core-common'; -import { deprecate, logger } from '@storybook/node-logger'; +import { logger } from '@storybook/node-logger'; -import dedent from 'ts-dedent'; import { MissingBuilderError } from '@storybook/core-events/server-errors'; import { getMiddleware } from './utils/middleware'; import { getServerAddresses } from './utils/server-address'; diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 584f3098af76..5ababe2b3762 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -16,8 +16,6 @@ import type { Path, Tag, StoryIndex, - V3CompatIndexEntry, - StoryId, StoryName, Indexer, IndexerOptions, diff --git a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts index 84ff37e2219e..d1de5a4e86b0 100644 --- a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts +++ b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts @@ -18,7 +18,6 @@ const options: StoryIndexGeneratorOptions = { workingDir: path.join(__dirname, '..', '__mockdata__'), storyIndexers: [], indexers: [], - storiesV2Compatibility: false, docs: { defaultName: 'docs', autodocs: false }, }; diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index 3956f50f0395..6db6b53e0d84 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -550,9 +550,7 @@ describe('useStoriesJson', () => { const mockServerChannel = { emit: jest.fn() } as any as ServerChannel; useStoriesJson({ router, - initializedStoryIndexGenerator: getInitializedStoryIndexGenerator({ - storiesV2Compatibility: true, - }), + initializedStoryIndexGenerator: getInitializedStoryIndexGenerator({}), workingDir, serverChannel: mockServerChannel, normalizedStories, diff --git a/code/ui/manager/src/components/preview/Preview.tsx b/code/ui/manager/src/components/preview/Preview.tsx index 6d9707e73a5f..71c1bf945256 100644 --- a/code/ui/manager/src/components/preview/Preview.tsx +++ b/code/ui/manager/src/components/preview/Preview.tsx @@ -18,8 +18,6 @@ import { FramesRenderer } from './FramesRenderer'; import type { PreviewProps } from './utils/types'; -const { FEATURES } = global; - const getWrappers = (getFn: API['getElements']) => Object.values(getFn(types.PREVIEW)); const getTabs = (getFn: API['getElements']) => Object.values(getFn(types.TAB)); diff --git a/scripts/tasks/test-runner-build.ts b/scripts/tasks/test-runner-build.ts index b5d1a399f9b7..0e87c477da44 100644 --- a/scripts/tasks/test-runner-build.ts +++ b/scripts/tasks/test-runner-build.ts @@ -10,7 +10,7 @@ export const testRunnerBuild: Task & { port: number } = { async ready() { return false; }, - async run({ sandboxDir, junitFilename, template }, { dryRun, debug }) { + async run({ sandboxDir, junitFilename }, { dryRun, debug }) { const execOptions = { cwd: sandboxDir }; const flags = [ `--url http://localhost:${this.port}`, From 7403b82da4b1e5978441e7f6c1683e8743ef8325 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 09:23:03 +0100 Subject: [PATCH 015/265] fix --- .../src/modules/store/StoryStore.test.ts | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index 75eac2a04c8e..d812829f2cd4 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -81,7 +81,7 @@ describe('StoryStore', () => { it('normalizes on initialization', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); expect(store.projectAnnotations!.globalTypes).toEqual({ a: { name: 'a', type: { name: 'string' } }, @@ -94,7 +94,7 @@ describe('StoryStore', () => { it('normalizes on updateGlobalAnnotations', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); store.setProjectAnnotations(projectAnnotations); expect(store.projectAnnotations!.globalTypes).toEqual({ @@ -110,7 +110,7 @@ describe('StoryStore', () => { it('pulls the story via the importFn', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); importFn.mockClear(); expect(await store.loadStory({ storyId: 'component-one--a' })).toMatchObject({ @@ -125,7 +125,7 @@ describe('StoryStore', () => { it('uses a cache', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); expect(processCSFFile).toHaveBeenCalledTimes(1); @@ -153,7 +153,7 @@ describe('StoryStore', () => { const loadPromise = store.loadStory({ storyId: 'component-one--a' }); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); expect(await loadPromise).toMatchObject({ id: 'component-one--a', @@ -172,7 +172,7 @@ describe('StoryStore', () => { it('busts the loadStory cache', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); expect(processCSFFile).toHaveBeenCalledTimes(1); @@ -191,7 +191,7 @@ describe('StoryStore', () => { it('busts the loadStory cache if the importFn returns a new module', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); expect(processCSFFile).toHaveBeenCalledTimes(1); @@ -213,7 +213,7 @@ describe('StoryStore', () => { it('busts the loadStory cache if the csf file no longer appears in the index', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.loadStory({ storyId: 'component-one--a' }); expect(processCSFFile).toHaveBeenCalledTimes(1); @@ -232,7 +232,7 @@ describe('StoryStore', () => { it('reuses the cache if a story importPath has not changed', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); expect(processCSFFile).toHaveBeenCalledTimes(1); @@ -264,7 +264,7 @@ describe('StoryStore', () => { it('imports with a new path for a story id if provided', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.loadStory({ storyId: 'component-one--a' }); expect(importFn).toHaveBeenCalledWith(storyIndex.entries['component-one--a'].importPath); @@ -294,7 +294,7 @@ describe('StoryStore', () => { it('re-caches stories if the were cached already', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.cacheAllCSFFiles(); await store.loadStory({ storyId: 'component-one--a' }); @@ -367,7 +367,7 @@ describe('StoryStore', () => { it('returns all the stories in the file', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const csfFile = await store.loadCSFFileByStoryId('component-one--a'); const stories = store.componentStoriesFromCSFFile({ csfFile }); @@ -386,7 +386,7 @@ describe('StoryStore', () => { 'component-one--a': storyIndex.entries['component-one--a'], }, }; - store.initialize({ storyIndex: reversedIndex, importFn, cache: false }); + store.initialize({ storyIndex: reversedIndex, importFn }); const csfFile = await store.loadCSFFileByStoryId('component-one--a'); const stories = store.componentStoriesFromCSFFile({ csfFile }); @@ -400,7 +400,7 @@ describe('StoryStore', () => { it('returns the args and globals correctly', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); @@ -413,7 +413,7 @@ describe('StoryStore', () => { it('returns the args and globals correctly when they change', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); @@ -429,7 +429,7 @@ describe('StoryStore', () => { it('can force initial args', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); @@ -443,7 +443,7 @@ describe('StoryStore', () => { it('returns the same hooks each time', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); @@ -460,7 +460,7 @@ describe('StoryStore', () => { it('cleans the hooks from the context', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); const story = await store.loadStory({ storyId: 'component-one--a' }); @@ -475,7 +475,7 @@ describe('StoryStore', () => { it('imports *all* csf files', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); importFn.mockClear(); const csfFiles = await store.loadAllCSFFiles(); @@ -495,7 +495,7 @@ describe('StoryStore', () => { }); const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn: blockedImportFn, cache: false }); + store.initialize({ storyIndex, importFn: blockedImportFn }); const promise = store.loadAllCSFFiles({ batchSize: 1 }); expect(blockedImportFn).toHaveBeenCalledTimes(1); @@ -510,7 +510,7 @@ describe('StoryStore', () => { it('throws if you have not called cacheAllCSFFiles', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); expect(() => store.extract()).toThrow(/Cannot call extract/); }); @@ -518,7 +518,7 @@ describe('StoryStore', () => { it('produces objects with functions and hooks stripped', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.cacheAllCSFFiles(); expect(store.extract()).toMatchInlineSnapshot(` @@ -710,7 +710,7 @@ describe('StoryStore', () => { it('produces an array of stories', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.cacheAllCSFFiles(); expect(store.raw()).toMatchInlineSnapshot(` @@ -859,7 +859,7 @@ describe('StoryStore', () => { it('maps stories list to payload correctly', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.cacheAllCSFFiles(); expect(store.getSetStoriesPayload()).toMatchInlineSnapshot(` @@ -999,7 +999,7 @@ describe('StoryStore', () => { it('maps stories list to payload correctly', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.cacheAllCSFFiles(); expect(store.getStoriesJsonData()).toMatchInlineSnapshot(` @@ -1053,7 +1053,7 @@ describe('StoryStore', () => { it('add parameters/args to index correctly', async () => { const store = new StoryStore(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await store.cacheAllCSFFiles(); expect(store.getSetIndexPayload()).toMatchInlineSnapshot(` @@ -1168,7 +1168,7 @@ describe('StoryStore', () => { const cachePromise = store.cacheAllCSFFiles(); store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn, cache: false }); + store.initialize({ storyIndex, importFn }); await expect(cachePromise).resolves.toEqual(undefined); }); From 1bbaa482cccd132b875d6bbe12e4e1348c4653fa Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 09:26:05 +0100 Subject: [PATCH 016/265] fix --- .../src/modules/store/StoryStore.test.ts | 112 ------------------ 1 file changed, 112 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index d812829f2cd4..f65b695b41c1 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -655,7 +655,6 @@ describe('StoryStore', () => { store.initialize({ storyIndex, importFn: docsOnlyImportFn, - cache: false, }); await store.cacheAllCSFFiles(); @@ -688,7 +687,6 @@ describe('StoryStore', () => { store.initialize({ storyIndex: unnattachedStoryIndex, importFn, - cache: false, }); await store.cacheAllCSFFiles(); @@ -1049,116 +1047,6 @@ describe('StoryStore', () => { }); }); - describe('getSetIndexPayload', () => { - it('add parameters/args to index correctly', async () => { - const store = new StoryStore(); - store.setProjectAnnotations(projectAnnotations); - store.initialize({ storyIndex, importFn }); - await store.cacheAllCSFFiles(); - - expect(store.getSetIndexPayload()).toMatchInlineSnapshot(` - Object { - "entries": Object { - "component-one--a": Object { - "argTypes": Object { - "a": Object { - "name": "a", - "type": Object { - "name": "string", - }, - }, - "foo": Object { - "name": "foo", - "type": Object { - "name": "string", - }, - }, - }, - "args": Object { - "foo": "a", - }, - "id": "component-one--a", - "importPath": "./src/ComponentOne.stories.js", - "initialArgs": Object { - "foo": "a", - }, - "name": "A", - "parameters": Object { - "__isArgsStory": false, - "fileName": "./src/ComponentOne.stories.js", - }, - "title": "Component One", - "type": "story", - }, - "component-one--b": Object { - "argTypes": Object { - "a": Object { - "name": "a", - "type": Object { - "name": "string", - }, - }, - "foo": Object { - "name": "foo", - "type": Object { - "name": "string", - }, - }, - }, - "args": Object { - "foo": "b", - }, - "id": "component-one--b", - "importPath": "./src/ComponentOne.stories.js", - "initialArgs": Object { - "foo": "b", - }, - "name": "B", - "parameters": Object { - "__isArgsStory": false, - "fileName": "./src/ComponentOne.stories.js", - }, - "title": "Component One", - "type": "story", - }, - "component-two--c": Object { - "argTypes": Object { - "a": Object { - "name": "a", - "type": Object { - "name": "string", - }, - }, - "foo": Object { - "name": "foo", - "type": Object { - "name": "string", - }, - }, - }, - "args": Object { - "foo": "c", - }, - "id": "component-two--c", - "importPath": "./src/ComponentTwo.stories.js", - "initialArgs": Object { - "foo": "c", - }, - "name": "C", - "parameters": Object { - "__isArgsStory": false, - "fileName": "./src/ComponentTwo.stories.js", - }, - "title": "Component Two", - "type": "story", - }, - }, - "v": 4, - } - `); - }); - }); - describe('cacheAllCsfFiles', () => { describe('if the store is not yet initialized', () => { it('waits for initialization', async () => { From 0285cd16da3d61c11233f1b6608d1d0abd067146 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 10:04:32 +0100 Subject: [PATCH 017/265] cleanup --- code/frameworks/ember/src/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/frameworks/ember/src/index.ts b/code/frameworks/ember/src/index.ts index fc8faa13668a..e892c33e505c 100644 --- a/code/frameworks/ember/src/index.ts +++ b/code/frameworks/ember/src/index.ts @@ -1,6 +1,4 @@ /// -import './client/preview'; - // optimization: stop HMR propagation in webpack if (typeof module !== 'undefined') module?.hot?.decline(); From a4ffcf1a62d7da2232f39fb03522c1d71f63606c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 2 Nov 2023 11:00:06 +0100 Subject: [PATCH 018/265] make it work --- code/builders/builder-vite/src/codegen-modern-iframe-script.ts | 1 - .../templates/virtualModuleModernEntry.js.handlebars | 1 - code/frameworks/angular/src/typings.d.ts | 1 - code/lib/preview-api/src/typings.d.ts | 1 - 4 files changed, 4 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts index 5bc163fba5fa..c30c533dbd8d 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -69,7 +69,6 @@ export async function generateModernIframeScriptCode(options: Options, projectRo window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(); window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore; - window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: window.__STORYBOOK_PREVIEW__.storyStore }); window.__STORYBOOK_PREVIEW__.initialize({ importFn, getProjectAnnotations }); ${generateHMRHandler(frameworkName)}; diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 0507ca9fbbd1..20d420c825f6 100644 --- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -20,7 +20,6 @@ const preview = new PreviewWeb(); window.__STORYBOOK_PREVIEW__ = preview; window.__STORYBOOK_STORY_STORE__ = preview.storyStore; window.__STORYBOOK_ADDONS_CHANNEL__ = channel; -window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); preview.initialize({ importFn, getProjectAnnotations }); diff --git a/code/frameworks/angular/src/typings.d.ts b/code/frameworks/angular/src/typings.d.ts index a1bde958b56d..bc5857ff199e 100644 --- a/code/frameworks/angular/src/typings.d.ts +++ b/code/frameworks/angular/src/typings.d.ts @@ -6,7 +6,6 @@ declare var NODE_ENV: string | undefined; declare var __STORYBOOK_ADDONS_CHANNEL__: any; declare var __STORYBOOK_ADDONS_PREVIEW: any; declare var __STORYBOOK_COMPODOC_JSON__: any; -declare var __STORYBOOK_CLIENT_API__: any; declare var __STORYBOOK_PREVIEW__: any; declare var __STORYBOOK_STORY_STORE__: any; declare var CHANNEL_OPTIONS: any; diff --git a/code/lib/preview-api/src/typings.d.ts b/code/lib/preview-api/src/typings.d.ts index bedefed4b9a8..36b3a081c70f 100644 --- a/code/lib/preview-api/src/typings.d.ts +++ b/code/lib/preview-api/src/typings.d.ts @@ -19,7 +19,6 @@ declare var IS_STORYBOOK: boolean; // relevant framework instantiates them via `start.js`. The good news is this happens right away. declare var __STORYBOOK_ADDONS_CHANNEL__: any; declare var __STORYBOOK_ADDONS_PREVIEW: any; -declare var __STORYBOOK_CLIENT_API__: import('./modules/client-api/ClientApi').ClientApi; declare var __STORYBOOK_PREVIEW__: import('./modules/preview-web/PreviewWeb').PreviewWeb; declare var __STORYBOOK_STORY_STORE__: any; declare var STORYBOOK_HOOKS_CONTEXT: any; From 4ab1b3ed70f52beee3c74e5a4ede02d22d7482af Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 24 Nov 2023 11:58:21 +0100 Subject: [PATCH 019/265] update exports file --- code/ui/manager/src/globals/exports.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 3080e52d9056..505cfe390477 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -265,10 +265,6 @@ export default { 'ChevronDownIcon', 'ChevronLeftIcon', 'ChevronRightIcon', - 'ChevronSmallDownIcon', - 'ChevronSmallLeftIcon', - 'ChevronSmallRightIcon', - 'ChevronSmallUpIcon', 'ChevronUpIcon', 'ChromaticIcon', 'ChromeIcon', From 7f4f035c7837eea8c17d24bcb3da542f7f3893d9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 12 Dec 2023 09:00:47 +0100 Subject: [PATCH 020/265] fix --- code/ui/manager/src/globals/exports.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index b670a3be73d4..21e4b0e806cc 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -232,8 +232,6 @@ export default { 'AdminIcon', 'AlertAltIcon', 'AlertIcon', - 'AlignLeftIcon', - 'AlignRightIcon', 'AppleIcon', 'ArrowDownIcon', 'ArrowLeftIcon', @@ -360,6 +358,7 @@ export default { 'MediumIcon', 'MemoryIcon', 'MenuIcon', + 'MenuReverseIcon', 'MergeIcon', 'MirrorIcon', 'MobileIcon', From a7cbe9907f868647f0c8b42a6c98f27349e1a636 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 13 Dec 2023 13:41:01 +0100 Subject: [PATCH 021/265] Prevent Stories lookup in node_modules --- .../src/preview/iframe-webpack.config.ts | 1 + code/lib/core-webpack/src/to-importFn.ts | 18 +++++++++++++++++- code/lib/csf-plugin/src/index.ts | 3 ++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index ac573827715a..c31238b5c5e5 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -218,6 +218,7 @@ export default async ( rules: [ { test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/, + exclude: /node_modules/, enforce: 'post', use: [ { diff --git a/code/lib/core-webpack/src/to-importFn.ts b/code/lib/core-webpack/src/to-importFn.ts index 20c3be9dc1c2..83455c66cb6b 100644 --- a/code/lib/core-webpack/src/to-importFn.ts +++ b/code/lib/core-webpack/src/to-importFn.ts @@ -4,6 +4,20 @@ import { globToRegexp } from '@storybook/core-common'; import { importPipeline } from './importPipeline'; +function adjustRegexToExcludeNodeModules(originalRegex: RegExp) { + const originalRegexString = originalRegex.source; + const startsWithCaret = originalRegexString.startsWith('^'); + const excludeNodeModulesPattern = startsWithCaret ? '(?!.*node_modules)' : '^(?!.*node_modules)'; + + // Combine the new exclusion pattern with the original regex + const adjustedRegexString = startsWithCaret + ? `^${excludeNodeModulesPattern}${originalRegexString.substring(1)}` + : excludeNodeModulesPattern + originalRegexString; + + // Create and return the new regex + return new RegExp(adjustedRegexString); +} + export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) { const { directory, files } = specifier; @@ -17,7 +31,9 @@ export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) { const webpackIncludeGlob = ['.', '..'].includes(directory) ? files : `${directoryWithoutLeadingDots}/${files}`; - const webpackIncludeRegexpWithCaret = globToRegexp(webpackIncludeGlob); + const webpackIncludeRegexpWithCaret = webpackIncludeGlob.includes('node_modules') + ? globToRegexp(webpackIncludeGlob) + : adjustRegexToExcludeNodeModules(globToRegexp(webpackIncludeGlob)); // picomatch is creating an exact match, but we are only matching the end of the filename return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, '')); } diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts index ec0aaa1d52a9..6cc9cfcd594b 100644 --- a/code/lib/csf-plugin/src/index.ts +++ b/code/lib/csf-plugin/src/index.ts @@ -5,7 +5,8 @@ import type { EnrichCsfOptions } from '@storybook/csf-tools'; export type CsfPluginOptions = EnrichCsfOptions; -const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/; +// Ignore node_modules +const STORIES_REGEX = /(? Date: Tue, 19 Dec 2023 16:00:06 +0100 Subject: [PATCH 022/265] fixes --- .../template/stories_nextjs-default-ts/Navigation.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index d9f2a3dc361f..8bb209bd9d45 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -24,7 +24,6 @@ function Component() { name: 'Prefetch', }, { - // @ts-expect-error (a legacy nextjs api?) cb: () => router.push('/push-html', { forceOptimisticNavigation: true }), name: 'Push HTML', }, @@ -33,7 +32,6 @@ function Component() { name: 'Refresh', }, { - // @ts-expect-error (a legacy nextjs api?) cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }), name: 'Replace', }, From 1d520ad523ec6d102627d5db9d7a2da6b488257b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Honza=20Hrub=C3=BD?= Date: Tue, 19 Dec 2023 12:25:26 +0100 Subject: [PATCH 023/265] CSF-tools: Allow type checking in storySort --- code/lib/csf-tools/src/getStorySortParameter.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/csf-tools/src/getStorySortParameter.ts b/code/lib/csf-tools/src/getStorySortParameter.ts index 426017c5f410..70d323d4edd6 100644 --- a/code/lib/csf-tools/src/getStorySortParameter.ts +++ b/code/lib/csf-tools/src/getStorySortParameter.ts @@ -19,7 +19,9 @@ const getValue = (obj: t.ObjectExpression, key: string) => { return value; }; -const parseValue = (expr: t.Expression): any => { +const parseValue = (value: t.Expression): any => { + const expr = stripTSModifiers(value); + if (t.isArrayExpression(expr)) { return (expr.elements as t.Expression[]).map((o) => { return parseValue(o); From c9068351d3eb003edd2f7d3814a93ab6e80ffbdf Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Dec 2023 00:24:12 +0800 Subject: [PATCH 024/265] CLI: Never prompt for ESLint plugin --- code/lib/cli/src/generators/baseGenerator.ts | 21 ++++---------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 70daf5764dd7..5ad50927d010 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -13,11 +13,7 @@ import { getPackageDetails } from '../js-package-manager'; import { getBabelPresets, writeBabelConfigFile } from '../babel-config'; import packageVersions from '../versions'; import type { FrameworkOptions, GeneratorOptions } from './types'; -import { - configureEslintPlugin, - extractEslintInfo, - suggestESLintPlugin, -} from '../automigrate/helpers/eslintPlugin'; +import { configureEslintPlugin, extractEslintInfo } from '../automigrate/helpers/eslintPlugin'; import { detectBuilder } from '../detect'; const logger = console; @@ -177,14 +173,7 @@ const hasFrameworkTemplates = (framework?: SupportedFrameworks) => export async function baseGenerator( packageManager: JsPackageManager, npmOptions: NpmOptions, - { - language, - builder, - pnp, - frameworkPreviewParts, - yes: skipPrompts, - projectType, - }: GeneratorOptions, + { language, builder, pnp, frameworkPreviewParts, projectType }: GeneratorOptions, renderer: SupportedRenderers, options: FrameworkOptions = defaultOptions, framework?: SupportedFrameworks @@ -362,10 +351,8 @@ export async function baseGenerator( ); if (hasEslint && !isStorybookPluginInstalled) { - if (skipPrompts || (await suggestESLintPlugin())) { - depsToInstall.push('eslint-plugin-storybook'); - await configureEslintPlugin(eslintConfigFile ?? undefined, packageManager); - } + depsToInstall.push('eslint-plugin-storybook'); + await configureEslintPlugin(eslintConfigFile ?? undefined, packageManager); } } } catch (err) { From 1d98fe1868ffdb3ad37b0ba9fd7c3de896427b13 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Thu, 21 Dec 2023 15:18:58 +0000 Subject: [PATCH 025/265] Fix addon-action module resolution broken for react-native --- code/addons/actions/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index da85fef889d0..045d22b145a6 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -40,6 +40,7 @@ }, "main": "dist/index.js", "module": "dist/index.mjs", + "react-native": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { From 0688ef09b7e809cbc27633930112a37c1b2e89e2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:40:37 +0100 Subject: [PATCH 026/265] Remove Babel from webpack5 builder --- MIGRATION.md | 5 + RESOLUTIONS.md | 6 +- code/addons/docs/README.md | 14 - code/builders/builder-webpack5/package.json | 4 - .../src/preview/iframe-webpack.config.ts | 19 +- .../builder-webpack5/src/preview/loaders.ts | 57 --- code/frameworks/angular/package.json | 1 - code/frameworks/angular/src/preset.ts | 1 - code/frameworks/ember/package.json | 3 - code/frameworks/ember/src/preset.ts | 6 +- .../server/framework-preset-babel-ember.ts | 54 --- code/frameworks/html-webpack5/package.json | 3 - code/frameworks/nextjs/src/swc/loader.ts | 8 - code/frameworks/preact-webpack5/package.json | 1 - code/frameworks/react-webpack5/package.json | 4 - code/frameworks/svelte-webpack5/package.json | 1 - code/frameworks/vue3-webpack5/package.json | 2 - code/frameworks/vue3-webpack5/src/preset.ts | 1 - .../web-components-webpack5/package.json | 2 - .../web-components-webpack5/src/preset.ts | 4 - .../web-components-webpack5/src/types.ts | 2 +- code/lib/cli/.babelrc.json | 21 - code/lib/cli/package.json | 2 - code/lib/cli/src/automigrate/fixes/index.ts | 4 +- .../automigrate/fixes/missing-babelrc.test.ts | 136 ------ .../src/automigrate/fixes/missing-babelrc.ts | 90 ---- code/lib/cli/src/babel-config.ts | 108 ----- code/lib/cli/src/generate.ts | 5 - code/lib/cli/src/generators/EMBER/index.ts | 6 - .../cli/src/generators/REACT_SCRIPTS/index.ts | 1 - code/lib/cli/src/generators/baseGenerator.ts | 46 +- code/lib/cli/src/generators/types.ts | 1 - code/lib/cli/src/repro-generators/configs.ts | 269 ----------- code/lib/cli/src/repro-generators/scripts.ts | 329 ------------- code/lib/cli/src/utils.ts | 1 - code/lib/cli/src/versions.ts | 1 - .../core-events/src/errors/server-errors.ts | 17 - code/lib/docs-tools/package.json | 2 - code/lib/types/package.json | 1 - code/lib/types/src/modules/core-common.ts | 17 +- code/package.json | 10 - code/presets/create-react-app/src/index.ts | 9 +- code/presets/html-webpack/package.json | 3 - .../src/framework-preset-react-docs.ts | 5 - .../src/loaders/react-docgen-loader.ts | 9 +- code/presets/svelte-webpack/package.json | 1 - .../src/framework-preset-svelte.ts | 10 +- code/presets/vue3-webpack/package.json | 2 - code/presets/web-components-webpack/README.md | 6 - .../web-components-webpack/package.json | 83 ---- code/presets/web-components-webpack/preset.js | 1 - .../web-components-webpack/project.json | 6 - .../web-components-webpack/src/index.ts | 50 -- .../web-components-webpack/src/types.ts | 1 - .../web-components-webpack/tsconfig.json | 7 - code/renderers/html/package.json | 3 - code/renderers/react/package.json | 1 - code/yarn.lock | 440 ++++-------------- docs/api/main-config-framework.md | 17 - docs/api/main-config-typescript.md | 19 - docs/configure/compilers.md | 85 +--- docs/configure/typescript.md | 2 +- docs/contribute/framework.md | 1 - docs/faq.md | 8 - ...g-framework-options-builder-use-swc.js.mdx | 16 - ...g-framework-options-builder-use-swc.ts.mdx | 20 - .../main-config-swc-jsx-transform.js.mdx | 9 - .../main-config-swc-jsx-transform.ts.mdx | 8 - docs/snippets/common/main-config-swc.js.mdx | 9 - docs/snippets/common/main-config-swc.ts.mdx | 8 - .../main-config-typescript-skip-babel.ts.mdx | 16 - ...torybook-addons-preset-babelDefault.js.mdx | 13 - ...torybook-addons-preset-babelDefault.ts.mdx | 15 - ...orybook-babel-configuration-example.ts.mdx | 2 - .../common/storybook-cli-babelrc-file.npm.mdx | 3 - .../storybook-cli-babelrc-file.pnpm.mdx | 3 - .../storybook-cli-babelrc-file.yarn.mdx | 3 - ...ybook-coverage-addon-config-options.js.mdx | 1 - ...ybook-coverage-addon-config-options.ts.mdx | 16 +- ...-main-fix-imports-autodocs-monorepo.js.mdx | 1 - ...-main-fix-imports-autodocs-monorepo.ts.mdx | 1 - docs/writing-tests/test-coverage.md | 27 +- scripts/verdaccio.yaml | 4 - 83 files changed, 123 insertions(+), 2086 deletions(-) delete mode 100644 code/builders/builder-webpack5/src/preview/loaders.ts delete mode 100644 code/frameworks/ember/src/server/framework-preset-babel-ember.ts delete mode 100644 code/lib/cli/.babelrc.json delete mode 100644 code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts delete mode 100644 code/lib/cli/src/automigrate/fixes/missing-babelrc.ts delete mode 100644 code/lib/cli/src/babel-config.ts delete mode 100644 code/lib/cli/src/repro-generators/configs.ts delete mode 100644 code/lib/cli/src/repro-generators/scripts.ts delete mode 100644 code/presets/web-components-webpack/README.md delete mode 100644 code/presets/web-components-webpack/package.json delete mode 100644 code/presets/web-components-webpack/preset.js delete mode 100644 code/presets/web-components-webpack/project.json delete mode 100644 code/presets/web-components-webpack/src/index.ts delete mode 100644 code/presets/web-components-webpack/src/types.ts delete mode 100644 code/presets/web-components-webpack/tsconfig.json delete mode 100644 docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx delete mode 100644 docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx delete mode 100644 docs/snippets/common/main-config-typescript-skip-babel.ts.mdx delete mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx delete mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx delete mode 100644 docs/snippets/common/storybook-cli-babelrc-file.npm.mdx delete mode 100644 docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx delete mode 100644 docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx diff --git a/MIGRATION.md b/MIGRATION.md index c69c72a1fc66..453e8f67bdf0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,7 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [typescript.skipBabel removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) @@ -382,6 +383,10 @@ To summarize: ### Core changes +#### typescript.skipBabel removed + +We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. + #### Dropping support for Node.js 16 In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above. diff --git a/RESOLUTIONS.md b/RESOLUTIONS.md index 88adfad30fa0..4e2a64960edd 100644 --- a/RESOLUTIONS.md +++ b/RESOLUTIONS.md @@ -8,8 +8,4 @@ svelte-check@3.4.6 (bug: 3.5.x): Type issues ## code/ui/components/package.json -overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230 - -## code/package.json - -@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462 +overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230 \ No newline at end of file diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9a9a3debad2a..379b23f2d8a1 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -110,20 +110,6 @@ export default { }; ``` -If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to -configure Jest to transform MDX stories into something Storyshots can understand: - -Add the following to your Jest configuration: - -```json -{ - "transform": { - "^.+\\.[tj]sx?$": "babel-jest", - "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx" - } -} -``` - ### Be sure to check framework specific installation needs - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here) diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index e38893b42bcd..e36fefc63ba8 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -63,7 +63,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", @@ -72,10 +71,8 @@ "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", - "@swc/core": "^1.3.82", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", - "babel-loader": "^9.0.0", "browser-assert": "^1.2.1", "case-sensitive-paths-webpack-plugin": "^2.4.0", "constants-browserify": "^1.0.0", @@ -90,7 +87,6 @@ "process": "^0.11.10", "semver": "^7.3.7", "style-loader": "^3.3.1", - "swc-loader": "^0.2.3", "terser-webpack-plugin": "^5.3.1", "ts-dedent": "^2.0.0", "url": "^0.11.0", diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index ac573827715a..c9bd220b544c 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -20,7 +20,6 @@ import { import { type BuilderOptions } from '@storybook/core-webpack'; import { dedent } from 'ts-dedent'; import type { TypescriptOptions } from '../types'; -import { createBabelLoader, createSWCLoader } from './loaders'; import { getVirtualModules } from './virtual-module-mapping'; const getAbsolutePath = (input: I): I => @@ -106,8 +105,7 @@ export default async ( const builderOptions = await getBuilderOptions(options); - const shouldCheckTs = - typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler; + const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipCompiler; const tsCheckOptions = typescriptOptions.checkOptions || {}; const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {}; @@ -235,9 +233,6 @@ export default async ( fullySpecified: false, }, }, - builderOptions.useSWC - ? await createSWCLoader(Object.keys(virtualModuleMapping), options) - : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)), { test: /\.md$/, type: 'asset/source', @@ -273,7 +268,6 @@ export default async ( ...(isProd ? { minimize: true, - // eslint-disable-next-line no-nested-ternary minimizer: options.build?.test?.esbuildMinify ? [ new TerserWebpackPlugin({ @@ -285,17 +279,6 @@ export default async ( }, }), ] - : builderOptions.useSWC - ? [ - new TerserWebpackPlugin({ - minify: TerserWebpackPlugin.swcMinify, - terserOptions: { - sourceMap: !options.build?.test?.disableSourcemaps, - mangle: false, - keep_fnames: true, - }, - }), - ] : [ new TerserWebpackPlugin({ parallel: true, diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts deleted file mode 100644 index 868d35ba394c..000000000000 --- a/code/builders/builder-webpack5/src/preview/loaders.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { getProjectRoot } from '@storybook/core-common'; -import type { Options as SwcOptions } from '@swc/core'; -import { dedent } from 'ts-dedent'; -import { logger } from '@storybook/node-logger'; -import type { Options } from '@storybook/types'; -import type { TypescriptOptions } from '../types'; - -export const createBabelLoader = async ( - options: Options & { typescriptOptions: TypescriptOptions }, - typescriptOptions: TypescriptOptions, - excludes: string[] = [] -) => { - logger.info(dedent`Using Babel compiler`); - const babelOptions = await options.presets.apply('babel', {}, options); - return { - test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/, - use: [ - { - loader: require.resolve('babel-loader'), - options: babelOptions, - }, - ], - include: [getProjectRoot()], - exclude: [/node_modules/, ...excludes], - }; -}; - -export const createSWCLoader = async (excludes: string[] = [], options: Options) => { - logger.info(dedent`Using SWC compiler`); - - const swc = await options.presets.apply('swc', {}, options); - const typescriptOptions = await options.presets.apply<{ skipCompiler?: boolean }>( - 'typescript', - {}, - options - ); - - const config: SwcOptions = { - ...swc, - jsc: { - ...(swc.jsc ?? {}), - parser: { - ...(swc.jsc?.parser ?? {}), - syntax: 'typescript', - tsx: true, - dynamicImport: true, - }, - }, - }; - return { - test: typescriptOptions.skipCompiler ? /\.(mjs|cjs|jsx?)$/ : /\.(mjs|cjs|tsx?|jsx?)$/, - loader: require.resolve('swc-loader'), - options: config, - include: [getProjectRoot()], - exclude: [/node_modules/, ...excludes], - }; -}; diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index ef030dd8bf55..58961f1839b7 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -99,7 +99,6 @@ "@angular/forms": ">=15.0.0 < 18.0.0", "@angular/platform-browser": ">=15.0.0 < 18.0.0", "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0", - "@babel/core": "*", "rxjs": "^6.0.0 || ^7.4.0", "typescript": "^4.0.0 || ^5.0.0", "zone.js": ">= 0.11.1 < 1.0.0" diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index 3d433ba2b841..da3bb0192f0d 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/code/frameworks/angular/src/preset.ts @@ -37,7 +37,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => { return { ...config, - skipBabel: true, skipCompiler: true, }; }; diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index c843c7712cde..f8b74eceeb04 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -46,9 +46,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", - "babel-plugin-ember-modules-api-polyfill": "^3.5.0", - "babel-plugin-htmlbars-inline-precompile": "^5.3.1", "ember-source": "~3.28.1 || ^4.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 998edbfa7405..1638022a7856 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -1,15 +1,19 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; +import { findDistFile } from './util'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons'> = [ - require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs'), ]; +export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { + return [...entry, findDistFile(__dirname, 'client/preview/config')]; +}; + export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { const framework = await options.presets.apply('framework'); diff --git a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts deleted file mode 100644 index cdb83bf6dbfa..000000000000 --- a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { precompile } from 'ember-source/dist/ember-template-compiler'; -import type { PresetProperty } from '@storybook/types'; -import { findDistFile } from '../util'; - -let emberOptions: any; - -function precompileWithPlugins(string: string, options: any) { - const precompileOptions: any = options; - if (emberOptions && emberOptions.polyfills) { - precompileOptions.plugins = { ast: emberOptions.polyfills }; - } - - return precompile(string, precompileOptions); -} - -export const babel: PresetProperty<'babel'> = (config, options) => { - if (options && options.presetsList) { - options.presetsList.forEach((e: any, index: number) => { - if (e.preset && e.preset.emberOptions) { - emberOptions = e.preset.emberOptions; - if (options.presetsList) { - // eslint-disable-next-line no-param-reassign - delete options.presetsList[index].preset.emberOptions; - } - } - }); - } - - const babelConfigPlugins = config?.plugins || []; - - const extraPlugins = [ - [ - require.resolve('babel-plugin-htmlbars-inline-precompile'), - { - precompile: precompileWithPlugins, - modules: { - 'ember-cli-htmlbars': 'hbs', - 'ember-cli-htmlbars-inline-precompile': 'default', - 'htmlbars-inline-precompile': 'default', - }, - }, - ], - [require.resolve('babel-plugin-ember-modules-api-polyfill')], - ]; - - return { - ...config, - plugins: [...babelConfigPlugins, ...extraPlugins], - }; -}; - -export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - return [...entry, findDistFile(__dirname, 'client/preview/config')]; -}; diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 825bccbf896d..89ebaafbc3e7 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -57,9 +57,6 @@ "devDependencies": { "typescript": "^5.3.2" }, - "peerDependencies": { - "@babel/core": "*" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 352d3796d549..1925c2b49171 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -4,9 +4,6 @@ import type { Options, Preset } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; import type { RuleSetRule } from 'webpack'; -import semver from 'semver'; -import { NextjsSWCNotSupportedError } from '@storybook/core-events/server-errors'; -import { getNextjsVersion } from '../utils'; const applyFastRefresh = async (options: Options) => { const isDevelopment = options.configType === 'DEVELOPMENT'; @@ -21,11 +18,6 @@ export const configureSWCLoader = async ( nextConfig: NextConfig ) => { const isDevelopment = options.configType !== 'PRODUCTION'; - const version = getNextjsVersion(); - - if (semver.lt(version, '14.0.0')) { - throw new NextjsSWCNotSupportedError(); - } const dir = getProjectRoot(); diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 7b49a2845fad..ba090ae61be2 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -58,7 +58,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "preact": "^8.0.0||^10.0.0" }, "engines": { diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index c63b840d6071..fe2ac68fbe3d 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -53,15 +53,11 @@ "@types/node": "^18.0.0" }, "peerDependencies": { - "@babel/core": "^7.22.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "typescript": "*" }, "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, "typescript": { "optional": true } diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 7c5441c1989f..87b9aedf5a93 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -58,7 +58,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "svelte": "^4.0.0 || ^5.0.0-next.16", "svelte-loader": "*" }, diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index d588c430fe39..f0e3fab5d068 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -59,9 +59,7 @@ "vue": "3.0.0" }, "peerDependencies": { - "@babel/core": "*", "@vue/compiler-sfc": "^3.0.0", - "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index b06e70968cdb..1a46a7574516 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/code/frameworks/vue3-webpack5/src/preset.ts @@ -24,6 +24,5 @@ export const core: PresetProperty<'core'> = async (config, options) => { export const typescript: PresetProperty<'typescript'> = async (config) => ({ ...config, - skipBabel: true, skipCompiler: true, }); diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 9e7ff1aca558..a4fe5fa8589e 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -50,10 +50,8 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/preset-env": "^7.23.2", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", - "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/web-components": "workspace:*", "@types/node": "^18.0.0" }, diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts index f746c12a788a..c613796aa3d0 100644 --- a/code/frameworks/web-components-webpack5/src/preset.ts +++ b/code/frameworks/web-components-webpack5/src/preset.ts @@ -4,10 +4,6 @@ import type { PresetProperty } from '@storybook/types'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; -export const addons: PresetProperty<'addons'> = [ - getAbsolutePath('@storybook/preset-web-components-webpack'), -]; - export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); diff --git a/code/frameworks/web-components-webpack5/src/types.ts b/code/frameworks/web-components-webpack5/src/types.ts index c6924040d025..01442d08f08a 100644 --- a/code/frameworks/web-components-webpack5/src/types.ts +++ b/code/frameworks/web-components-webpack5/src/types.ts @@ -1,7 +1,7 @@ import type { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsWebComponents, -} from '@storybook/preset-web-components-webpack'; +} from '@storybook/types'; import type { BuilderOptions, StorybookConfigWebpack, diff --git a/code/lib/cli/.babelrc.json b/code/lib/cli/.babelrc.json deleted file mode 100644 index 89a2815442ec..000000000000 --- a/code/lib/cli/.babelrc.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "node": 10 - }, - "useBuiltIns": "usage", - "corejs": "3" - } - ] - ], - "ignore": [ - "./src/rendererAssets", - "./src/generators/**/template", - "./src/generators/**/template-csf", - "./src/generators/**/template-csf-ts", - "./src/generators/**/template-mdx" - ] -} diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index bfaba5b57ace..c495fbebff32 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -56,8 +56,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "workspace:*", diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index bd33074805d8..9b5cc6fa3d69 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -13,7 +13,6 @@ import { removedGlobalClientAPIs } from './remove-global-client-apis'; import { mdx1to2 } from './mdx-1-to-2'; import { autodocsTrue } from './autodocs-true'; import { nodeJsRequirement } from './nodejs-requirement'; -import { missingBabelRc } from './missing-babelrc'; import { angularBuilders } from './angular-builders'; import { incompatibleAddons } from './incompatible-addons'; import { angularBuildersMultiproject } from './angular-builders-multiproject'; @@ -37,11 +36,10 @@ export const allFixes: Fix[] = [ mdx1to2, mdxgfm, autodocsTrue, - missingBabelRc, angularBuildersMultiproject, angularBuilders, wrapRequire, reactDocgen, ]; -export const initFixes: Fix[] = [missingBabelRc, eslintPlugin]; +export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts deleted file mode 100644 index 5363a77cd035..000000000000 --- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts +++ /dev/null @@ -1,136 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -import { describe, afterEach, it, expect, vi } from 'vitest'; - -import type { StorybookConfig } from '@storybook/types'; -import * as fsExtra from 'fs-extra'; -import { missingBabelRc } from './missing-babelrc'; -import type { JsPackageManager } from '../../js-package-manager'; - -vi.mock('fs-extra', async () => import('../../../../../__mocks__/fs-extra')); - -const babelContent = JSON.stringify({ - sourceType: 'unambiguous', - presets: [ - [ - '@babel/preset-env', - { - targets: { chrome: 100, safari: 15, firefox: 91 }, - }, - ], - '@babel/preset-typescript', - '@babel/preset-react', - ], - plugins: [], -}); - -const check = async ({ - packageManager = { - retrievePackageJson: () => ({}), - }, - main: mainConfig = {}, - storybookVersion = '7.0.0', - extraFiles, -}: { - packageManager?: any; - main?: Partial & Record; - storybookVersion?: string; - extraFiles?: Record; -}) => { - if (extraFiles) { - vi.mocked(fsExtra as any).__setMockFiles( - extraFiles - ); - } - - return missingBabelRc.check({ - packageManager, - mainConfig: mainConfig as any, - storybookVersion, - }); -}; - -const packageManager = { - retrievePackageJson: () => - Promise.resolve({ - devDependencies: {}, - dependencies: {}, - }), -} as Partial; - -const packageManagerWithBabelField = { - retrievePackageJson: () => - Promise.resolve({ - devDependencies: {}, - dependencies: {}, - babel: babelContent, - }), -} as Partial; - -describe('missing-babelrc fix', () => { - afterEach(() => { - vi.restoreAllMocks(); - }); - - it('skips when storybook version < 7.0.0', async () => { - await expect(check({ storybookVersion: '6.3.2', main: {} })).resolves.toBeNull(); - }); - - it('skips when babelrc config is present', async () => { - // different babel extensions - await expect( - check({ - packageManager, - extraFiles: { '.babelrc': babelContent }, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - await expect( - check({ - packageManager, - extraFiles: { '.babelrc.json': babelContent }, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - await expect( - check({ - packageManager, - extraFiles: { 'babel.config.json': babelContent }, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - - await expect( - check({ - packageManager: packageManagerWithBabelField, - main: { framework: '@storybook/react' }, - }) - ).resolves.toBeNull(); - }); - - it('skips when using a framework that provides babel config', async () => { - await expect( - check({ main: { framework: '@storybook/nextjs' }, packageManager }) - ).resolves.toBeNull(); - }); - - it('skips when using CRA preset', async () => { - await expect( - check({ - main: { framework: '@storybook/react', addons: ['@storybook/preset-create-react-app'] }, - packageManager, - }) - ).resolves.toBeNull(); - }); - - // eslint-disable-next-line jest/no-disabled-tests - it.skip('prompts when babelrc file is missing and framework does not provide babel config', async () => { - await expect( - check({ - packageManager, - main: { framework: '@storybook/react-webpack5' }, - }) - ).resolves.toEqual({ - needsBabelRc: true, - }); - }); -}); diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts deleted file mode 100644 index 9d12ec658b1f..000000000000 --- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts +++ /dev/null @@ -1,90 +0,0 @@ -import chalk from 'chalk'; -import dedent from 'ts-dedent'; -import semver from 'semver'; -import { loadPartialConfigAsync } from '@babel/core'; -import type { Fix } from '../types'; -import { generateStorybookBabelConfigInCWD } from '../../babel-config'; -import { getFrameworkPackageName } from '../helpers/mainConfigFile'; - -interface MissingBabelRcOptions { - needsBabelRc: boolean; -} - -const logger = console; - -const frameworksThatNeedBabelConfig = [ - '@storybook/react-webpack5', - '@storybook/vue3-webpack5', - '@storybook/html-webpack5', - '@storybook/web-components-webpack5', -]; - -export const missingBabelRc: Fix = { - id: 'missing-babelrc', - - async check({ packageManager, mainConfig, storybookVersion }) { - const packageJson = await packageManager.retrievePackageJson(); - - if (!semver.gte(storybookVersion, '7.0.0')) { - return null; - } - - const { addons } = mainConfig; - - const hasCraPreset = - addons && - addons.find((addon) => - typeof addon === 'string' - ? addon.endsWith('@storybook/preset-create-react-app') - : addon.name.endsWith('@storybook/preset-create-react-app') - ); - - const frameworkPackageName = getFrameworkPackageName(mainConfig); - - if ( - frameworkPackageName && - frameworksThatNeedBabelConfig.includes(frameworkPackageName) && - !hasCraPreset - ) { - const config = await loadPartialConfigAsync({ - babelrc: true, - filename: '__fake__.js', // somehow needed to detect .babelrc.* files - }); - - if (!config?.config && !config?.babelrc && !packageJson.babel) { - return { needsBabelRc: true }; - } - } - - return null; - }, - prompt() { - return dedent` - We detected that your project does not have a babel configuration (.babelrc, babel.config.js, etc.). - - In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses ${chalk.bold( - "your project's babel configuration" - )}, with small, incremental updates from Storybook addons. - - If your project does not have a babel configuration file, we can generate one that's equivalent to the 6.x defaults for you. Keep in mind that this can affect your project if it uses babel, and you may need to make additional changes based on your projects needs. - - We can create a ${chalk.blue( - '.babelrc.json' - )} file with some basic configuration and add any necessary package devDependencies. - - ${chalk.bold( - 'Note:' - )} After installing the necessary presets, if it does not work in a monorepo, see the babel documentation for reference: - ${chalk.yellow('https://babeljs.io/docs')} - - Please see the migration guide for more information: - ${chalk.yellow( - 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively' - )} - `; - }, - async run() { - logger.info(); - await generateStorybookBabelConfigInCWD(); - }, -}; diff --git a/code/lib/cli/src/babel-config.ts b/code/lib/cli/src/babel-config.ts deleted file mode 100644 index e24442b4e365..000000000000 --- a/code/lib/cli/src/babel-config.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { writeFile, pathExists } from 'fs-extra'; -import { logger } from '@storybook/node-logger'; -import path from 'path'; -import prompts from 'prompts'; -import { JsPackageManagerFactory } from './js-package-manager'; - -export const generateStorybookBabelConfigInCWD = async () => { - const target = process.cwd(); - return generateStorybookBabelConfig({ target }); -}; - -export const getBabelPresets = ({ typescript, jsx }: { typescript: boolean; jsx: boolean }) => { - const dependencies = ['@babel/preset-env']; - - if (typescript) { - dependencies.push('@babel/preset-typescript'); - } - - if (jsx) { - dependencies.push('@babel/preset-react'); - } - - return dependencies; -}; - -export const writeBabelConfigFile = async ({ - location, - typescript, - jsx, -}: { - location?: string; - typescript: boolean; - jsx: boolean; -}) => { - const fileLocation = location || path.join(process.cwd(), '.babelrc.json'); - - const presets: (string | [string, any])[] = [ - ['@babel/preset-env', { targets: { chrome: 100, safari: 15, firefox: 91 } }], - ]; - - if (typescript) { - presets.push('@babel/preset-typescript'); - } - - if (jsx) { - presets.push('@babel/preset-react'); - } - - const contents = JSON.stringify( - { - sourceType: 'unambiguous', - presets, - plugins: [], - }, - null, - 2 - ); - - await writeFile(fileLocation, contents); -}; - -export const generateStorybookBabelConfig = async ({ target }: { target: string }) => { - logger.info(`Generating the Storybook default babel config at ${target}`); - - const fileName = '.babelrc.json'; - const location = path.join(target, fileName); - - const exists = await pathExists(location); - - if (exists) { - const { overwrite } = await prompts({ - type: 'confirm', - initial: false, - name: 'overwrite', - message: `${fileName} already exists. Would you like overwrite it?`, - }); - - if (overwrite === false) { - logger.warn(`Cancelled, babel config file was NOT written to file-system.`); - return; - } - } - - const { typescript, jsx } = await prompts([ - { - type: 'confirm', - initial: false, - name: 'typescript', - message: `Do you want to add the TypeScript preset?`, - }, - { - type: 'confirm', - initial: false, - name: 'jsx', - message: `Do you want to add the React preset?`, - }, - ]); - - const dependencies = getBabelPresets({ typescript, jsx }); - - logger.info(`Writing file to ${location}`); - await writeBabelConfigFile({ location, typescript, jsx }); - - const packageManager = JsPackageManagerFactory.getPackageManager(); - - logger.info(`Installing dependencies (${dependencies.join(', ')})`); - await packageManager.addDependencies({ installAsDevDependencies: true }, dependencies); -}; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index c964767da543..410bb4446968 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -16,7 +16,6 @@ import { upgrade, type UpgradeOptions } from './upgrade'; import { sandbox } from './sandbox'; import { link } from './link'; import { automigrate } from './automigrate'; -import { generateStorybookBabelConfigInCWD } from './babel-config'; import { dev } from './dev'; import { build } from './build'; import { parseList, getEnvConfig } from './utils'; @@ -69,10 +68,6 @@ command('add ') .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications') .action((addonName: string, options: any) => add(addonName, options)); -command('babelrc') - .description('generate the default storybook babel config into your current working directory') - .action(() => generateStorybookBabelConfigInCWD()); - command('upgrade') .description('Upgrade your Storybook packages to the latest') .option( diff --git a/code/lib/cli/src/generators/EMBER/index.ts b/code/lib/cli/src/generators/EMBER/index.ts index 98c041c952f7..6b148964773d 100644 --- a/code/lib/cli/src/generators/EMBER/index.ts +++ b/code/lib/cli/src/generators/EMBER/index.ts @@ -9,12 +9,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'ember', { - extraPackages: [ - // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember - 'babel-plugin-ember-modules-api-polyfill', - // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember - 'babel-plugin-htmlbars-inline-precompile', - ], staticDir: 'dist', }, 'ember' diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts index 2177a9d5090e..627753ca96ee 100644 --- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -63,7 +63,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { extraAddons, extraPackages, staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined, - skipBabel: true, extraMain, } ); diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 70daf5764dd7..0897ece904f1 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -5,12 +5,11 @@ import ora from 'ora'; import invariant from 'tiny-invariant'; import type { NpmOptions } from '../NpmOptions'; import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; -import { SupportedLanguage, externalFrameworks, CoreBuilder } from '../project_types'; +import { SupportedLanguage, externalFrameworks } from '../project_types'; import { copyTemplateFiles } from '../helpers'; import { configureMain, configurePreview } from './configure'; import type { JsPackageManager } from '../js-package-manager'; import { getPackageDetails } from '../js-package-manager'; -import { getBabelPresets, writeBabelConfigFile } from '../babel-config'; import packageVersions from '../versions'; import type { FrameworkOptions, GeneratorOptions } from './types'; import { @@ -29,7 +28,6 @@ const defaultOptions: FrameworkOptions = { addScripts: true, addMainFile: true, addComponents: true, - skipBabel: false, useSWC: () => false, extraMain: undefined, framework: undefined, @@ -229,17 +227,8 @@ export async function baseGenerator( ...options, }; - let { skipBabel } = { - ...defaultOptions, - ...options, - }; - const swc = useSWC ? useSWC({ builder }) : false; - if (swc) { - skipBabel = true; - } - const extraAddonsToInstall = typeof extraAddonPackages === 'function' ? await extraAddonPackages({ @@ -275,8 +264,6 @@ export async function baseGenerator( } } - const files = await fse.readdir(process.cwd()); - const packageJson = await packageManager.retrievePackageJson(); const installedDependencies = new Set( Object.keys({ ...packageJson.dependencies, ...packageJson.devDependencies }) @@ -324,37 +311,6 @@ export async function baseGenerator( const depsToInstall = [...versionedPackages]; - // Add basic babel config for a select few frameworks that need it, if they do not have a babel config file already - if (builder !== CoreBuilder.Vite && !skipBabel) { - const frameworksThatNeedBabelConfig = [ - '@storybook/react-webpack5', - '@storybook/vue3-webpack5', - '@storybook/html-webpack5', - '@storybook/web-components-webpack5', - ]; - const needsBabelConfig = frameworkPackages.find((pkg) => - frameworksThatNeedBabelConfig.includes(pkg) - ); - const hasNoBabelFile = !files.some( - (fname) => fname.startsWith('.babel') || fname.startsWith('babel') - ); - - if (hasNoBabelFile && needsBabelConfig) { - const isTypescript = language !== SupportedLanguage.JAVASCRIPT; - const isReact = rendererId === 'react'; - depsToInstall.push( - ...getBabelPresets({ - typescript: isTypescript, - jsx: isReact, - }) - ); - await writeBabelConfigFile({ - typescript: isTypescript, - jsx: isReact, - }); - } - } - try { if (process.env.CI !== 'true') { const { hasEslint, isStorybookPluginInstalled, eslintConfigFile } = await extractEslintInfo( diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 2f97a34df126..f779ffd2b9cb 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -23,7 +23,6 @@ export interface FrameworkOptions { addScripts?: boolean; addMainFile?: boolean; addComponents?: boolean; - skipBabel?: boolean; useSWC?: ({ builder }: { builder: Builder }) => boolean; extraMain?: any; extensions?: string[]; diff --git a/code/lib/cli/src/repro-generators/configs.ts b/code/lib/cli/src/repro-generators/configs.ts deleted file mode 100644 index b95e65a18a87..000000000000 --- a/code/lib/cli/src/repro-generators/configs.ts +++ /dev/null @@ -1,269 +0,0 @@ -/* eslint-disable @typescript-eslint/naming-convention */ -import type { StorybookConfig } from '@storybook/types'; -import type { SupportedRenderers } from '../project_types'; - -export interface Parameters { - renderer: SupportedRenderers; - /** E2E configuration name */ - name: string; - /** framework version */ - version: string; - /** CLI to bootstrap the project */ - generator: string; - /** Use storybook framework detection */ - autoDetect?: boolean; - /** Dependencies to add before building Storybook */ - additionalDeps?: string[]; - /** Files to add before installing Storybook */ - additionalFiles?: { - path: string; - contents: string; - }[]; - /** Add typescript dependency and creates a tsconfig.json file */ - typescript?: boolean; - /** Merge configurations to main.js before running the tests */ - mainOverrides?: Partial & Record; - /** Environment variables to inject while running generator */ - envs?: Record; -} - -const fromDeps = (...args: string[]): string => - [ - 'mkdir {{appName}}', - 'cd {{appName}}', - // Create `yarn.lock` to force Yarn to consider adding deps in this directory - // and not look for a yarn workspace in parent directory - 'touch yarn.lock', - 'yarn init --yes', - args.length && `yarn add ${args.join(' ')}`, - ] - .filter(Boolean) - .join(' && '); - -// #region React -export const cra: Parameters = { - renderer: 'react', - name: 'cra', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npx -p create-react-app@{{version}} create-react-app {{appName}}', - 'cd {{appName}}', - 'echo "FAST_REFRESH=true" > .env', - 'echo "SKIP_PREFLIGHT_CHECK=true" > .env', - ].join(' && '), - envs: { npm_config_user_agent: 'npm' }, -}; - -export const cra_typescript: Parameters = { - renderer: 'react', - name: 'cra_typescript', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript', - ].join(' && '), - envs: { npm_config_user_agent: 'npm' }, -}; - -export const react: Parameters = { - renderer: 'react', - name: 'react', - version: 'latest', - generator: fromDeps('react', 'react-dom', '@babel/preset-react'), - additionalDeps: ['prop-types'], - additionalFiles: [{ path: '.babelrc', contents: '{ "presets": ["@babel/preset-react"] }' }], -}; - -export const react_legacy_root_api: Parameters = { - renderer: 'react', - name: 'react_legacy_root_api', - version: 'latest', - generator: fromDeps('react', 'react-dom'), - additionalDeps: ['prop-types', '@babel/preset-react'], - additionalFiles: [{ path: '.babelrc', contents: '{ "presets": ["@babel/preset-react"] }' }], - mainOverrides: { - reactOptions: { - legacyRootApi: true, - }, - }, -}; - -export const react_typescript: Parameters = { - renderer: 'react', - name: 'react_typescript', - version: 'latest', - generator: fromDeps('react', 'react-dom'), - typescript: true, - additionalDeps: ['@babel/preset-react', '@babel/preset-typescript'], - additionalFiles: [ - { - path: '.babelrc', - contents: '{ "presets": ["@babel/preset-react", "@babel/preset-typescript"] }', - }, - ], -}; - -export const nextjs: Parameters = { - renderer: 'react', - name: 'nextjs', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npm_config_user_agent=npm npx -p create-next-app@{{version}} create-next-app {{appName}}', - 'cd {{appName}}', - ].join(' && '), -}; - -export const nextjs_typescript: Parameters = { - renderer: 'react', - name: 'nextjs_typescript', - version: 'latest', - generator: [ - // Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM - 'npm_config_user_agent=npm npx -p create-next-app@{{version}} create-next-app {{appName}} --typescript', - 'cd {{appName}}', - ].join(' && '), -}; - -// export const vite_react: Parameters = { -// renderer: 'react', -// name: 'vite_react', -// version: 'latest', -// generator: 'npx -p create-vite@{{version}} create-vite {{appName}} --template react-ts', -// }; - -export const react_in_yarn_workspace: Parameters = { - renderer: 'react', - name: 'react_in_yarn_workspace', - version: 'latest', - generator: [ - 'mkdir {{appName}}', - 'cd {{appName}}', - 'echo "{ \\"name\\": \\"workspace-root\\", \\"private\\": true, \\"workspaces\\": [] }" > package.json', - 'touch yarn.lock', - `yarn add react react-dom`, - ].join(' && '), -}; - -// #endregion - -// #region Angular -const baseAngular: Parameters = { - renderer: 'angular', - name: 'angular', - version: 'latest', - generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`, -}; - -export const angular12: Parameters = { - ...baseAngular, - name: 'angular12', - version: 'v12-lts', -}; - -export const angular130: Parameters = { - ...baseAngular, - name: 'angular130', - version: '13.0.x', -}; - -export const angular13: Parameters = { - ...baseAngular, - name: 'angular13', - version: '13.1.x', -}; - -export const angular: Parameters = baseAngular; -// #endregion - -// #region web components -export const web_components: Parameters = { - renderer: 'web-components', - name: 'web_components', - version: '2', - generator: fromDeps('lit-element'), -}; - -export const web_components_typescript: Parameters = { - ...web_components, - name: 'web_components_typescript', - typescript: true, - additionalDeps: ['@babel/preset-typescript'], - additionalFiles: [ - { - path: '.babelrc', - contents: '{ "presets": ["@babel/preset-typescript"] }', - }, - ], -}; - -export const web_components_lit2: Parameters = { - ...web_components, - version: 'next', - name: 'web_components_lit2', - generator: fromDeps('lit'), - typescript: true, - additionalDeps: ['@babel/preset-typescript'], - additionalFiles: [ - { - path: '.babelrc', - contents: '{ "presets": ["@babel/preset-typescript"] }', - }, - ], -}; - -// #endregion - -// #region vue - -export const vue3: Parameters = { - renderer: 'vue3', - name: 'vue3', - version: 'next', - // Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here - generator: [ - // Force npm otherwise we have a mess between Yarn 1 and Yarn 2 - `npx -p @vue/cli@^4 vue create {{appName}} --preset=__default_vue_3__ --packageManager=npm --no-git --force`, - ].join(' && '), -}; - -// #endregion - -export const html: Parameters = { - renderer: 'html', - name: 'html', - version: 'latest', - generator: fromDeps(), - autoDetect: false, -}; - -export const preact: Parameters = { - renderer: 'preact', - name: 'preact', - version: 'latest', - generator: - 'npx preact-cli@{{version}} create preactjs-templates/default {{appName}} --install=false --git=false', -}; - -export const preact_vite: Parameters = { - renderer: 'preact', - name: 'preact', - version: 'latest', - generator: 'yarn create vite@{{version}} {{appName}} --template preact', -}; - -export const svelte: Parameters = { - renderer: 'svelte', - name: 'svelte', - version: 'latest', - generator: 'npx giget github:sveltejs/template#master {{appName}}', -}; - -export const svelteKit: Parameters = { - renderer: 'svelte', - name: 'svelteKit', - version: 'latest', - generator: - 'yarn create svelte-with-args --name={{appName}} --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest --no-svelte5', -}; diff --git a/code/lib/cli/src/repro-generators/scripts.ts b/code/lib/cli/src/repro-generators/scripts.ts deleted file mode 100644 index 17241f4b037f..000000000000 --- a/code/lib/cli/src/repro-generators/scripts.ts +++ /dev/null @@ -1,329 +0,0 @@ -import path from 'path'; -import { readJSON, writeJSON, outputFile, remove } from 'fs-extra'; -import chalk from 'chalk'; -import { command } from 'execa'; -import type spawn from 'cross-spawn'; -import { spawn as spawnAsync } from 'cross-spawn'; -import { cra, cra_typescript } from './configs'; -import storybookVersions from '../versions'; - -const logger = console; - -export interface Parameters { - /** E2E configuration name */ - name: string; - /** framework version */ - version: string; - /** CLI to bootstrap the project */ - generator: string; - /** Use storybook framework detection */ - autoDetect?: boolean; - /** Pre-build hook */ - preBuildCommand?: string; - /** When cli complains when folder already exists */ - ensureDir?: boolean; - /** Dependencies to add before building Storybook */ - additionalDeps?: string[]; - /** Files to add before installing Storybook */ - additionalFiles?: { - path: string; - contents: string; - }[]; - /** Add typescript dependency and creates a tsconfig.json file */ - typescript?: boolean; - /** Environment variables to inject while running generator */ - envs?: Record; -} - -interface Configuration { - e2e: boolean; - pnp: boolean; - local: boolean; - registry?: string; -} - -type ExecOptions = globalThis.Parameters[2]; - -export interface Options extends Parameters { - appName: string; - creationPath: string; - cwd: string; - e2e: boolean; - pnp: boolean; -} - -export const exec = async ( - // eslint-disable-next-line @typescript-eslint/no-shadow - command: string, - options: ExecOptions = {}, - { - startMessage, - errorMessage, - dryRun, - }: { startMessage?: string; errorMessage?: string; dryRun?: boolean } = {} -) => { - if (startMessage) logger.info(startMessage); - - if (dryRun) { - logger.info(`\n> ${command}\n`); - return undefined; - } - - logger.debug(command); - return new Promise((resolve, reject) => { - const child = spawnAsync(command, { - ...options, - shell: true, - stdio: 'pipe', - }); - - child.stderr.pipe(process.stdout); - child.stdout.pipe(process.stdout); - - child.on('exit', (code) => { - if (code === 0) { - resolve(undefined); - } else { - logger.error(chalk.red(`An error occurred while executing: \`${command}\``)); - logger.info(errorMessage); - reject(new Error(`command exited with code: ${code}: `)); - } - }); - }); -}; - -const addPackageResolutions = async ({ cwd }: Options) => { - logger.info(`🔢 Adding package resolutions:`); - const packageJsonPath = path.join(cwd, 'package.json'); - const packageJson = await readJSON(packageJsonPath); - packageJson.resolutions = storybookVersions; - await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); -}; - -const addLocalPackageResolutions = async ({ cwd }: Options) => { - logger.info(`🔢 Adding package resolutions:`); - const packageJsonPath = path.join(cwd, 'package.json'); - const packageJson = await readJSON(packageJsonPath); - const workspaceDir = path.join(__dirname, '..', '..', '..', '..', '..'); - const { stdout } = await command('yarn workspaces list --json', { - cwd: workspaceDir, - cleanup: true, - }); - - const workspaces = JSON.parse(`[${stdout.split('\n').join(',')}]`); - - packageJson.resolutions = Object.keys(storybookVersions).reduce((acc, key) => { - return { - ...acc, - [key]: path.join(workspaceDir, workspaces.find((item: any) => item.name === key).location), - }; - }, {}); - await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); -}; - -const installYarn2 = async ({ cwd, pnp, name }: Options) => { - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = [ - `yarn set version berry`, - `yarn config set enableGlobalCache true`, - `yarn config set checksumBehavior ignore`, - `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`, - ]; - - // FIXME: Some dependencies used by CRA aren't listed in its package.json - // Next line is a hack to remove as soon as CRA will have added these missing deps - // for details see https://github.com/facebook/create-react-app/pull/11751 - if ([cra.name, cra_typescript.name].includes(name)) { - command.push( - `yarn config set packageExtensions --json '{ "babel-preset-react-app@10.0.x": { "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.16.0" } } }'` - ); - } - - await exec( - command.join(' && '), - { cwd }, - { startMessage: `🧶 Installing Yarn 2`, errorMessage: `🚨 Installing Yarn 2 failed` } - ); -}; - -const configureYarn2ForE2E = async ({ cwd }: Options) => { - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = [ - // ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml) - `yarn config set npmRegistryServer http://localhost:6001/`, - // Some required magic to be able to fetch deps from local registry - `yarn config set unsafeHttpWhitelist --json '["localhost"]'`, - // Disable fallback mode to make sure everything is required correctly - `yarn config set pnpFallbackMode none`, - // We need to be able to update lockfile when bootstrapping the examples - `yarn config set enableImmutableInstalls false`, - // Discard all YN0013 - FETCH_NOT_CACHED messages - `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`, - ].join(' && '); - - await exec( - command, - { cwd }, - { startMessage: `🎛 Configuring Yarn 2`, errorMessage: `🚨 Configuring Yarn 2 failed` } - ); -}; - -const generate = async ({ cwd, name, appName, version, generator, envs }: Options) => { - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = generator.replace(/{{appName}}/g, appName).replace(/{{version}}/g, version); - - await exec( - command, - { cwd, env: { ...process.env, ...envs } }, - { - startMessage: `🏗 Bootstrapping ${name} project (this might take a few minutes)`, - errorMessage: `🚨 Bootstrapping ${name} failed`, - } - ); -}; - -const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => { - logger.info(`⤵️ Adding required files`); - - await Promise.all( - (additionalFiles ?? []).map(async (file) => { - await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'utf-8' }); - }) - ); -}; - -const initStorybook = async ({ cwd, autoDetect = true, name, e2e, pnp }: Options) => { - const flags = ['--yes']; - - if (!autoDetect) { - flags.push(`--type ${name}`); - } - if (e2e) { - flags.push('--linkable'); - } - if (pnp) { - flags.push('--use-pnp'); - } - - // This is bundled into a single javascript file. - const sbCLICommand = `node ${__filename}`; - - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = `${sbCLICommand} init ${flags.join(' ')}`; - - await exec( - command, - { cwd }, - { - startMessage: `🎨 Initializing Storybook with @storybook/cli`, - errorMessage: `🚨 Storybook initialization failed`, - } - ); -}; - -const addRequiredDeps = async ({ cwd, additionalDeps }: Options) => { - // Remove any lockfile generated without Yarn 2 - await Promise.all([ - remove(path.join(cwd, 'package-lock.json')), - remove(path.join(cwd, 'yarn.lock')), - ]); - - // eslint-disable-next-line @typescript-eslint/no-shadow - const command = - additionalDeps && additionalDeps.length > 0 - ? `yarn add -D ${additionalDeps.join(' ')}` - : `yarn install`; - - await exec( - command, - { cwd }, - { - startMessage: `🌍 Adding needed deps & installing all deps`, - errorMessage: `🚨 Dependencies installation failed`, - } - ); -}; - -const addTypescript = async ({ cwd }: Options) => { - logger.info(`👮 Adding typescript and tsconfig.json`); - try { - await exec(`yarn add -D typescript@latest`, { cwd }); - const tsConfig = { - compilerOptions: { - baseUrl: '.', - esModuleInterop: true, - jsx: 'preserve', - skipLibCheck: true, - strict: true, - }, - include: ['src/*'], - }; - const tsConfigJsonPath = path.resolve(cwd, 'tsconfig.json'); - await writeJSON(tsConfigJsonPath, tsConfig, { encoding: 'utf8', spaces: 2 }); - } catch (e) { - logger.error(`🚨 Creating tsconfig.json failed`); - throw e; - } -}; - -const doTask = async ( - task: (options: Options) => Promise, - options: Options, - condition = true -) => { - if (condition) { - await task(options); - logger.log(); - } -}; - -const registryUrlNPM = (url: string) => { - const args = ['config', 'set', 'registry', url]; - return exec(`npm ${args.join(' ')}`, { cwd: path.join(process.cwd(), '..') }); -}; - -const registryUrlYarn = (url: string) => { - const args = ['config', 'set', 'npmRegistryServer', url]; - return exec(`yarn ${args.join(' ')}`, { cwd: path.join(__dirname, '..') }); -}; - -export const createAndInit = async ( - cwd: string, - { name, version, ...rest }: Parameters, - { e2e, pnp, local, registry }: Configuration -) => { - const options: Options = { - name, - version, - appName: path.basename(cwd), - creationPath: path.join(cwd, '..'), - cwd, - e2e, - pnp, - ...rest, - }; - - logger.log(); - logger.info(`🏃 Starting for ${name} ${version}`); - logger.log(); - - await doTask(generate, { ...options, cwd: options.creationPath }); - await doTask(addAdditionalFiles, { ...options, cwd }, !!options.additionalFiles); - if (e2e) { - await doTask(addPackageResolutions, options); - } - if (local) { - await doTask(addLocalPackageResolutions, options); - } - await doTask(installYarn2, options); - if (e2e) { - await doTask(configureYarn2ForE2E, options, e2e); - } - await doTask(addTypescript, options, !!options.typescript); - await doTask(addRequiredDeps, options); - if (registry) { - await registryUrlNPM(registry); - await registryUrlYarn(registry); - } - await doTask(initStorybook, options); -}; diff --git a/code/lib/cli/src/utils.ts b/code/lib/cli/src/utils.ts index fcd861860992..67e76e8ddb08 100644 --- a/code/lib/cli/src/utils.ts +++ b/code/lib/cli/src/utils.ts @@ -106,7 +106,6 @@ const PACKAGES_EXCLUDED_FROM_CORE = [ '@storybook/addon-designs', '@storybook/addon-styling', '@storybook/addon-styling-webpack', - '@storybook/babel-plugin-require-context-hook', '@storybook/bench', '@storybook/builder-vite', '@storybook/csf', diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 25a82dcb02a4..5724d482d071 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -53,7 +53,6 @@ export default { '@storybook/preset-server-webpack': '8.0.0-alpha.5', '@storybook/preset-svelte-webpack': '8.0.0-alpha.5', '@storybook/preset-vue3-webpack': '8.0.0-alpha.5', - '@storybook/preset-web-components-webpack': '8.0.0-alpha.5', '@storybook/preview': '8.0.0-alpha.5', '@storybook/preview-api': '8.0.0-alpha.5', '@storybook/react': '8.0.0-alpha.5', diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index bacdd7d6055e..e00a7faa8e83 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -369,23 +369,6 @@ export class GoogleFontsLoadingError extends StorybookError { } } -export class NextjsSWCNotSupportedError extends StorybookError { - readonly category = Category.FRAMEWORK_NEXTJS; - - readonly code = 3; - - public readonly documentation = - 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#manual-migration'; - - template() { - return dedent` - You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. - SWC is only supported in Next.js 14.0.0 and higher. Please go to your .storybook/main. file - and remove the { framework: { options: { builder: { useSWC: true } } } } option or upgrade to Next.js v14 or later. - `; - } -} - export class NoMatchingExportError extends StorybookError { readonly category = Category.CORE_SERVER; diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index d5745cdaadc0..8bc90fac3e44 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -53,8 +53,6 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@babel/core": "^7.23.2", - "babel-plugin-react-docgen": "4.2.1", "require-from-string": "^2.0.2", "typescript": "^5.3.2" }, diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 8eba56ce78bc..e501e7ec645c 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -45,7 +45,6 @@ }, "dependencies": { "@storybook/channels": "workspace:*", - "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "file-system-cache": "2.3.0" }, diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8f848909d8ed..8f5a49efdfd1 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -2,7 +2,6 @@ import type { FileSystemCache } from 'file-system-cache'; import type { Options as SWCOptions } from '@swc/core'; import type { Options as TelejsonOptions } from 'telejson'; -import type { TransformOptions as BabelOptions } from '@babel/core'; import type { Router } from 'express'; import type { Server } from 'http'; import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest'; @@ -71,7 +70,6 @@ export interface Presets { args?: Options ): Promise; apply(extension: 'framework', config?: {}, args?: any): Promise; - apply(extension: 'babel', config?: {}, args?: any): Promise; apply(extension: 'swc', config?: {}, args?: any): Promise; apply(extension: 'entries', config?: [], args?: any): Promise; apply(extension: 'stories', config?: [], args?: any): Promise; @@ -249,16 +247,9 @@ export interface TypescriptOptions { * @default `false` */ check: boolean; - /** - * Disable parsing typescript files through babel. - * - * @default `false` - * @deprecated use `skipCompiler` instead - */ - skipBabel: boolean; /** - * Disable parsing typescript files through compiler. + * Disable parsing TypeScript files through compiler. * * @default `false` */ @@ -414,13 +405,15 @@ export interface StorybookConfigRaw { refs?: CoreCommon_StorybookRefs; - babel?: BabelOptions; + // We cannot use a particular Babel type here because we need to support a variety of versions + babel?: any; swc?: SWCOptions; env?: Record; - babelDefault?: BabelOptions; + // We cannot use a particular Babel type here because we need to support a variety of versions + babelDefault?: any; config?: Entry[]; diff --git a/code/package.json b/code/package.json index 6c3ff4745889..c4e268558c93 100644 --- a/code/package.json +++ b/code/package.json @@ -76,7 +76,6 @@ "defaults" ], "resolutions": { - "@babel/core": "^7.23.2", "@playwright/test": "1.36.0", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", @@ -90,11 +89,6 @@ "type-fest": "~2.19" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-env": "^7.23.2", - "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", - "@babel/runtime": "^7.23.2", "@nx/workspace": "17.0.2", "@playwright/test": "1.36.0", "@storybook/addon-a11y": "workspace:*", @@ -114,7 +108,6 @@ "@storybook/addon-toolbars": "workspace:*", "@storybook/addon-viewport": "workspace:*", "@storybook/angular": "workspace:*", - "@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/bench": "next", "@storybook/blocks": "workspace:*", "@storybook/builder-manager": "workspace:*", @@ -156,7 +149,6 @@ "@storybook/preset-server-webpack": "workspace:*", "@storybook/preset-svelte-webpack": "workspace:*", "@storybook/preset-vue3-webpack": "workspace:*", - "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", @@ -197,8 +189,6 @@ "@typescript-eslint/parser": "^5.45.0", "@vitejs/plugin-react": "^3.0.1", "@vitest/coverage-v8": "^1.0.1", - "babel-eslint": "^10.1.0", - "babel-loader": "^9.1.2", "chromatic": "7.1.0", "concurrently": "^5.3.0", "cross-env": "^7.0.3", diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index e47c824426ce..a5e16a31ecb4 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -38,12 +38,6 @@ const core = (existing: { disableWebpackDefaults: boolean }) => ({ disableWebpackDefaults: true, }); -// Don't use Storybook's default Babel config. -const babelDefault = (): Record => ({ - presets: [], - plugins: [], -}); - // Update the core Webpack config. const webpack = async ( webpackConfig: Configuration = {}, @@ -156,6 +150,5 @@ const webpack = async ( // we do not care of the typings exported from this package const exportedCore = core as any; const exportedWebpack = webpack as any; -const exportedBabelDefault = babelDefault as any; -export { exportedCore as core, exportedWebpack as webpack, exportedBabelDefault as babelDefault }; +export { exportedCore as core, exportedWebpack as webpack }; diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index ec63833fe6f7..c026e36c0f90 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -57,9 +57,6 @@ "devDependencies": { "typescript": "^5.3.2" }, - "peerDependencies": { - "@babel/core": "*" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index ae26133dc838..20f252b8eebf 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -20,7 +20,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( } if (reactDocgen !== 'react-docgen-typescript') { - const babelOptions = await options.presets.apply('babel', {}); return { ...config, module: { @@ -34,7 +33,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' ), options: { - babelOptions, debug, }, exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, @@ -46,8 +44,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin'); - const babelOptions = await options.presets.apply('babel', {}); - return { ...config, module: { @@ -61,7 +57,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' ), options: { - babelOptions, debug, }, exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts index 9f3ff5278b9e..fd22ca12bf5d 100644 --- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts +++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts @@ -10,7 +10,6 @@ import MagicString from 'magic-string'; import type { LoaderContext } from 'webpack'; import type { Handler, NodePath, babelTypes as t, Documentation } from 'react-docgen'; import { logger } from '@storybook/node-logger'; -import type { TransformOptions } from '@babel/core'; const { getNameOrValue, isReactForwardRefCall } = utils; @@ -59,15 +58,13 @@ const defaultImporter = docgenImporters.fsImporter; const handlers = [...defaultHandlers, actualNameHandler]; export default async function reactDocgenLoader( - this: LoaderContext<{ babelOptions: TransformOptions; debug: boolean }>, + this: LoaderContext<{ debug: boolean }>, source: string ) { const callback = this.async(); // get options const options = this.getOptions() || {}; - const { babelOptions = {}, debug = false } = options; - - const { plugins, presets } = babelOptions; + const { debug = false } = options; try { const docgenResults = parse(source, { @@ -78,8 +75,6 @@ export default async function reactDocgenLoader( babelOptions: { babelrc: false, configFile: false, - plugins, - presets, }, }) as DocObj[]; diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index f8ad27912e63..c94eb80b65f6 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -75,7 +75,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "svelte": "^4.0.0 || ^5.0.0-next.16", "svelte-loader": "*" }, diff --git a/code/presets/svelte-webpack/src/framework-preset-svelte.ts b/code/presets/svelte-webpack/src/framework-preset-svelte.ts index 89b2c24f81eb..457abb86a02e 100644 --- a/code/presets/svelte-webpack/src/framework-preset-svelte.ts +++ b/code/presets/svelte-webpack/src/framework-preset-svelte.ts @@ -1,4 +1,4 @@ -import type { Preset, PresetProperty } from '@storybook/types'; +import type { Preset } from '@storybook/types'; import type { StorybookConfig, SvelteOptions } from './types'; export const webpack: StorybookConfig['webpack'] = async (config, { presets }) => { @@ -28,11 +28,3 @@ export const webpack: StorybookConfig['webpack'] = async (config, { presets }) = }, }; }; - -export const babelDefault: PresetProperty<'babelDefault'> = (config) => { - return { - ...config, - presets: [...(config?.presets || [])], - plugins: [...(config?.plugins || [])], - }; -}; diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index c5e9d67c2087..2ffd7e561a18 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -74,9 +74,7 @@ "vue": "^3.2.33" }, "peerDependencies": { - "@babel/core": "*", "@vue/compiler-sfc": "^3.0.0", - "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/presets/web-components-webpack/README.md b/code/presets/web-components-webpack/README.md deleted file mode 100644 index b3d65a886224..000000000000 --- a/code/presets/web-components-webpack/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Storybook Webpack preset for Web components - -This package is a [preset](https://storybook.js.org/docs/web-components/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Web components. -It's an internal package that's not intended to be used directly by users. - -- More info on [Storybook for Web components](https://storybook.js.org/docs/web-components/get-started) diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json deleted file mode 100644 index 43e7f784170b..000000000000 --- a/code/presets/web-components-webpack/package.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "name": "@storybook/preset-web-components-webpack", - "version": "8.0.0-alpha.5", - "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", - "keywords": [ - "lit", - "lit-html", - "storybook", - "web-components" - ], - "homepage": "https://github.com/storybookjs/storybook/tree/next/code/presets/web-components-webpack", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "code/presets/web-components-webpack" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "license": "MIT", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" - }, - "./preset": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" - }, - "./package.json": "./package.json" - }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts", - "!src/**/*" - ], - "scripts": { - "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", - "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" - }, - "dependencies": { - "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-import-meta": "^7.10.4", - "@babel/preset-env": "^7.23.2", - "@storybook/core-webpack": "workspace:*", - "@types/node": "^18.0.0", - "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", - "babel-plugin-bundled-import-meta": "^0.3.1" - }, - "devDependencies": { - "lit": "2.3.1", - "typescript": "^5.3.2" - }, - "peerDependencies": { - "lit": "^2.0.0 || ^3.0.0" - }, - "engines": { - "node": ">=18.0.0" - }, - "publishConfig": { - "access": "public" - }, - "bundler": { - "entries": [ - "./src/index.ts" - ], - "platform": "node" - }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" -} diff --git a/code/presets/web-components-webpack/preset.js b/code/presets/web-components-webpack/preset.js deleted file mode 100644 index f4f0e998846b..000000000000 --- a/code/presets/web-components-webpack/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/index'); diff --git a/code/presets/web-components-webpack/project.json b/code/presets/web-components-webpack/project.json deleted file mode 100644 index ed7c04dfe11c..000000000000 --- a/code/presets/web-components-webpack/project.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "@storybook/preset-web-components-webpack", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "implicitDependencies": [], - "type": "library" -} diff --git a/code/presets/web-components-webpack/src/index.ts b/code/presets/web-components-webpack/src/index.ts deleted file mode 100644 index 73ed84497514..000000000000 --- a/code/presets/web-components-webpack/src/index.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { StorybookConfig } from './types'; - -export * from './types'; - -export const webpack: StorybookConfig['webpack'] = (config) => { - const rules = [ - ...(config.module?.rules || []), - { - test: [ - new RegExp(`src(.*)\\.js$`), - new RegExp(`packages(\\/|\\\\)*(\\/|\\\\)src(\\/|\\\\)(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)lit\\/(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)lit-html(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)lit-element(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)@open-wc(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)@polymer(.*)\\.js$`), - new RegExp(`node_modules(\\/|\\\\)@vaadin(.*)\\.js$`), - ], - use: { - loader: require.resolve('babel-loader'), - options: { - compact: false, - presets: [ - [ - require.resolve('@babel/preset-env'), - { - useBuiltIns: 'entry', - corejs: 3, - targets: { chrome: '100', esmodules: true }, - }, - ], - ], - plugins: [ - require.resolve('@babel/plugin-syntax-dynamic-import'), - require.resolve('@babel/plugin-syntax-import-meta'), - // webpack does not support import.meta.url yet, so we rewrite them in babel - [require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }], - ], - }, - }, - }, - ]; - - // eslint-disable-next-line no-param-reassign - config.module = config.module || {}; - // eslint-disable-next-line no-param-reassign - config.module.rules = rules; - - return config; -}; diff --git a/code/presets/web-components-webpack/src/types.ts b/code/presets/web-components-webpack/src/types.ts deleted file mode 100644 index 7b5a8352a9e1..000000000000 --- a/code/presets/web-components-webpack/src/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { BuilderResult, TypescriptOptions, StorybookConfig } from '@storybook/core-webpack'; diff --git a/code/presets/web-components-webpack/tsconfig.json b/code/presets/web-components-webpack/tsconfig.json deleted file mode 100644 index a4429176e35f..000000000000 --- a/code/presets/web-components-webpack/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, - "include": ["src/**/*"] -} diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 9fecf06b8fea..8053c52671ff 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -56,9 +56,6 @@ "devDependencies": { "typescript": "^5.3.2" }, - "peerDependencies": { - "@babel/core": "*" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index b49b1b48d39d..08b885f3fecb 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -69,7 +69,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@babel/core": "^7.23.2", "@storybook/test": "workspace:*", "@types/util-deprecate": "^1.0.0", "expect-type": "^0.15.0", diff --git a/code/yarn.lock b/code/yarn.lock index 6fe3d551d312..44862e0b196e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -375,7 +375,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.13": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5": version: 7.23.5 resolution: "@babel/code-frame@npm:7.23.5" dependencies: @@ -392,7 +392,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.23.2": +"@babel/core@npm:7.23.2, @babel/core@npm:^7.23.2": version: 7.23.2 resolution: "@babel/core@npm:7.23.2" dependencies: @@ -415,7 +415,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:7.23.0, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2": +"@babel/core@npm:7.23.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": + version: 7.23.6 + resolution: "@babel/core@npm:7.23.6" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.23.6" + "@babel/parser": "npm:^7.23.6" + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: a02bae7d916029b70706dc301535e1b31e5d216f55d4ee6f64a15825c6b69ee2c14c52a213d1497ec414e925ed4e9d897d41fb0d75df9fea28ed2c0008790e31 + languageName: node + linkType: hard + +"@babel/generator@npm:7.23.0, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2": version: 7.23.0 resolution: "@babel/generator@npm:7.23.0" dependencies: @@ -427,6 +450,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/generator@npm:7.23.6" + dependencies: + "@babel/types": "npm:^7.23.6" + "@jridgewell/gen-mapping": "npm:^0.3.2" + "@jridgewell/trace-mapping": "npm:^0.3.17" + jsesc: "npm:^2.5.1" + checksum: 53540e905cd10db05d9aee0a5304e36927f455ce66f95d1253bb8a179f286b88fa7062ea0db354c566fe27f8bb96567566084ffd259f8feaae1de5eccc8afbda + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.22.5, @babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -676,6 +711,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/helpers@npm:7.23.6" + dependencies: + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + checksum: df1cf6607676ad36f52f652ec03536f2732d70aef5e76dba5c964e34d49f3c2d3dcf9fb3740db359f53071d74b64606a833d5ba156f79f437f71bfe06e2e7e19 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -687,7 +733,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.9.6": +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": version: 7.23.6 resolution: "@babel/parser@npm:7.23.6" bin: @@ -929,7 +975,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.2.0, @babel/plugin-syntax-import-meta@npm:^7.8.3": +"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3": version: 7.10.4 resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4" dependencies: @@ -2145,7 +2191,7 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15, @babel/template@npm:^7.7.0": +"@babel/template@npm:^7.22.15": version: 7.22.15 resolution: "@babel/template@npm:7.22.15" dependencies: @@ -2156,7 +2202,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0": +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" dependencies: @@ -2174,7 +2220,25 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/traverse@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/traverse@npm:7.23.6" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d + languageName: node + linkType: hard + +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" dependencies: @@ -3243,7 +3307,7 @@ __metadata: languageName: node linkType: hard -"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3": +"@istanbuljs/schema@npm:^0.1.2": version: 0.1.3 resolution: "@istanbuljs/schema@npm:0.1.3" checksum: 61c5286771676c9ca3eb2bd8a7310a9c063fb6e0e9712225c8471c582d157392c88f5353581c8c9adbe0dff98892317d2fdfc56c3499aa42e0194405206a963a @@ -5049,7 +5113,6 @@ __metadata: "@angular/forms": ">=15.0.0 < 18.0.0" "@angular/platform-browser": ">=15.0.0 < 18.0.0" "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0" - "@babel/core": "*" rxjs: ^6.0.0 || ^7.4.0 typescript: ^4.0.0 || ^5.0.0 zone.js: ">= 0.11.1 < 1.0.0" @@ -5059,13 +5122,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/babel-plugin-require-context-hook@npm:1.0.1": - version: 1.0.1 - resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" - checksum: 3baca2838cd0a9901fb8019736e61de45b82f9f52afb279c3df73cd8d0fe42b0f0742e21556e7ebce71838afccdb95324153e425a337e617975812fe461eefc0 - languageName: node - linkType: hard - "@storybook/bench@npm:next": version: 1.0.0-next.6 resolution: "@storybook/bench@npm:1.0.0-next.6" @@ -5195,7 +5251,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5" dependencies: - "@babel/core": "npm:^7.23.2" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -5204,14 +5259,12 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" - "@swc/core": "npm:^1.3.82" "@types/node": "npm:^18.0.0" "@types/pretty-hrtime": "npm:^1.0.0" "@types/semver": "npm:^7.3.4" "@types/terser-webpack-plugin": "npm:^5.2.0" "@types/webpack-hot-middleware": "npm:^2.25.6" "@types/webpack-virtual-modules": "npm:^0.1.1" - babel-loader: "npm:^9.0.0" browser-assert: "npm:^1.2.1" case-sensitive-paths-webpack-plugin: "npm:^2.4.0" constants-browserify: "npm:^1.0.0" @@ -5228,7 +5281,6 @@ __metadata: semver: "npm:^7.3.7" slash: "npm:^5.0.0" style-loader: "npm:^3.3.1" - swc-loader: "npm:^0.2.3" terser-webpack-plugin: "npm:^5.3.1" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -5263,8 +5315,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" @@ -5604,13 +5654,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/core": "npm:^7.23.2" + "@babel/core": "npm:7.23.6" "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" assert: "npm:^2.1.0" - babel-plugin-react-docgen: "npm:4.2.1" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" require-from-string: "npm:^2.0.2" @@ -5633,9 +5682,6 @@ __metadata: ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" - babel-plugin-ember-modules-api-polyfill: ^3.5.0 - babel-plugin-htmlbars-inline-precompile: ^5.3.1 ember-source: ~3.28.1 || ^4.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -5692,8 +5738,6 @@ __metadata: "@storybook/preset-html-webpack": "workspace:*" "@types/node": "npm:^18.0.0" typescript: "npm:^5.3.2" - peerDependencies: - "@babel/core": "*" languageName: unknown linkType: soft @@ -5707,8 +5751,6 @@ __metadata: "@storybook/types": "workspace:*" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" - peerDependencies: - "@babel/core": "*" languageName: unknown linkType: soft @@ -5965,7 +6007,6 @@ __metadata: preact: "npm:^10.5.13" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" preact: ^8.0.0||^10.0.0 languageName: unknown linkType: soft @@ -5993,14 +6034,12 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@storybook/types": "workspace:*" - "@types/babel__core": "npm:^7.1.7" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" pnp-webpack-plugin: "npm:^1.7.0" semver: "npm:^7.3.5" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" react-scripts: ">=5.0.0" languageName: unknown linkType: soft @@ -6014,8 +6053,6 @@ __metadata: html-loader: "npm:^3.1.0" typescript: "npm:^5.3.2" webpack: "npm:5" - peerDependencies: - "@babel/core": "*" languageName: unknown linkType: soft @@ -6023,14 +6060,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack" dependencies: - "@babel/plugin-transform-react-jsx": "npm:^7.22.15" - "@babel/preset-typescript": "npm:^7.23.2" "@storybook/core-webpack": "workspace:*" "@types/node": "npm:^18.0.0" preact: "npm:^10.5.13" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" preact: ^8.0.0||^10.0.0 languageName: unknown linkType: soft @@ -6039,8 +6073,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" dependencies: - "@babel/preset-flow": "npm:^7.22.15" - "@babel/preset-react": "npm:^7.22.15" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6049,7 +6081,6 @@ __metadata: "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" - babel-plugin-add-react-displayname: "npm:^0.0.5" fs-extra: "npm:^11.1.0" magic-string: "npm:^0.30.5" react-docgen: "npm:^7.0.0" @@ -6058,12 +6089,9 @@ __metadata: typescript: "npm:^5.3.2" webpack: "npm:5" peerDependencies: - "@babel/core": ^7.22.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: - "@babel/core": - optional: true typescript: optional: true languageName: unknown @@ -6099,7 +6127,6 @@ __metadata: ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" svelte: ^4.0.0 || ^5.0.0-next.16 svelte-loader: "*" languageName: unknown @@ -6121,31 +6148,11 @@ __metadata: vue-loader: "npm:^16.0.0" webpack: "npm:5" peerDependencies: - "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 - babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 vue: ^3.0.0 languageName: unknown linkType: soft -"@storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack": - version: 0.0.0-use.local - resolution: "@storybook/preset-web-components-webpack@workspace:presets/web-components-webpack" - dependencies: - "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" - "@babel/plugin-syntax-import-meta": "npm:^7.10.4" - "@babel/preset-env": "npm:^7.23.2" - "@storybook/core-webpack": "workspace:*" - "@types/node": "npm:^18.0.0" - babel-loader: "npm:^7.0.0 || ^8.0.0 || ^9.0.0" - babel-plugin-bundled-import-meta: "npm:^0.3.1" - lit: "npm:2.3.1" - typescript: "npm:^5.3.2" - peerDependencies: - lit: ^2.0.0 || ^3.0.0 - languageName: unknown - linkType: soft - "@storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" @@ -6245,13 +6252,10 @@ __metadata: "@storybook/react": "workspace:*" "@types/node": "npm:^18.0.0" peerDependencies: - "@babel/core": ^7.22.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 typescript: "*" peerDependenciesMeta: - "@babel/core": - optional: true typescript: optional: true languageName: unknown @@ -6261,7 +6265,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" dependencies: - "@babel/core": "npm:^7.23.2" "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -6300,11 +6303,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/preset-react": "npm:^7.22.15" - "@babel/preset-typescript": "npm:^7.23.2" - "@babel/runtime": "npm:^7.23.2" "@chromaui/addon-visual-tests": "npm:^0.0.124" "@nx/workspace": "npm:17.0.2" "@playwright/test": "npm:1.36.0" @@ -6325,7 +6323,6 @@ __metadata: "@storybook/addon-toolbars": "workspace:*" "@storybook/addon-viewport": "workspace:*" "@storybook/angular": "workspace:*" - "@storybook/babel-plugin-require-context-hook": "npm:1.0.1" "@storybook/bench": "npm:next" "@storybook/blocks": "workspace:*" "@storybook/builder-manager": "workspace:*" @@ -6367,7 +6364,6 @@ __metadata: "@storybook/preset-server-webpack": "workspace:*" "@storybook/preset-svelte-webpack": "workspace:*" "@storybook/preset-vue3-webpack": "workspace:*" - "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" @@ -6408,8 +6404,6 @@ __metadata: "@typescript-eslint/parser": "npm:^5.45.0" "@vitejs/plugin-react": "npm:^3.0.1" "@vitest/coverage-v8": "npm:^1.0.1" - babel-eslint: "npm:^10.1.0" - babel-loader: "npm:^9.1.2" chromatic: "npm:7.1.0" concurrently: "npm:^5.3.0" cross-env: "npm:^7.0.3" @@ -6563,7 +6557,6 @@ __metadata: svelte-loader: "npm:^3.1.9" typescript: "npm:^5.3.2" peerDependencies: - "@babel/core": "*" svelte: ^4.0.0 || ^5.0.0-next.16 svelte-loader: "*" languageName: unknown @@ -6706,7 +6699,6 @@ __metadata: dependencies: "@storybook/channels": "workspace:*" "@storybook/csf": "npm:^0.1.2" - "@types/babel__core": "npm:^7.0.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" @@ -6746,9 +6738,7 @@ __metadata: typescript: "npm:^5.3.2" vue: "npm:3.0.0" peerDependencies: - "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 - babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 vue: ^3.0.0 languageName: unknown linkType: soft @@ -6796,10 +6786,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5" dependencies: - "@babel/preset-env": "npm:^7.23.2" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" - "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/web-components": "workspace:*" "@types/node": "npm:^18.0.0" lit: "npm:2.3.1" @@ -6901,13 +6889,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-darwin-arm64@npm:1.3.100" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - "@swc/core-darwin-arm64@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-darwin-arm64@npm:1.3.82" @@ -6915,13 +6896,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-darwin-x64@npm:1.3.100" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - "@swc/core-darwin-x64@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-darwin-x64@npm:1.3.82" @@ -6936,13 +6910,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.100" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - "@swc/core-linux-arm64-gnu@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-arm64-gnu@npm:1.3.82" @@ -6950,13 +6917,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.100" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - "@swc/core-linux-arm64-musl@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-arm64-musl@npm:1.3.82" @@ -6964,13 +6924,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.100" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - "@swc/core-linux-x64-gnu@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-x64-gnu@npm:1.3.82" @@ -6978,13 +6931,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-linux-x64-musl@npm:1.3.100" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - "@swc/core-linux-x64-musl@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-linux-x64-musl@npm:1.3.82" @@ -6992,13 +6938,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.100" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - "@swc/core-win32-arm64-msvc@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-win32-arm64-msvc@npm:1.3.82" @@ -7006,13 +6945,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.100" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - "@swc/core-win32-ia32-msvc@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-win32-ia32-msvc@npm:1.3.82" @@ -7020,13 +6952,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.3.100": - version: 1.3.100 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.100" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - "@swc/core-win32-x64-msvc@npm:1.3.82": version: 1.3.82 resolution: "@swc/core-win32-x64-msvc@npm:1.3.82" @@ -7079,56 +7004,6 @@ __metadata: languageName: node linkType: hard -"@swc/core@npm:^1.3.82": - version: 1.3.100 - resolution: "@swc/core@npm:1.3.100" - dependencies: - "@swc/core-darwin-arm64": "npm:1.3.100" - "@swc/core-darwin-x64": "npm:1.3.100" - "@swc/core-linux-arm64-gnu": "npm:1.3.100" - "@swc/core-linux-arm64-musl": "npm:1.3.100" - "@swc/core-linux-x64-gnu": "npm:1.3.100" - "@swc/core-linux-x64-musl": "npm:1.3.100" - "@swc/core-win32-arm64-msvc": "npm:1.3.100" - "@swc/core-win32-ia32-msvc": "npm:1.3.100" - "@swc/core-win32-x64-msvc": "npm:1.3.100" - "@swc/counter": "npm:^0.1.1" - "@swc/types": "npm:^0.1.5" - peerDependencies: - "@swc/helpers": ^0.5.0 - dependenciesMeta: - "@swc/core-darwin-arm64": - optional: true - "@swc/core-darwin-x64": - optional: true - "@swc/core-linux-arm64-gnu": - optional: true - "@swc/core-linux-arm64-musl": - optional: true - "@swc/core-linux-x64-gnu": - optional: true - "@swc/core-linux-x64-musl": - optional: true - "@swc/core-win32-arm64-msvc": - optional: true - "@swc/core-win32-ia32-msvc": - optional: true - "@swc/core-win32-x64-msvc": - optional: true - peerDependenciesMeta: - "@swc/helpers": - optional: true - checksum: d6e873a7c627765991b18bd8d1b0ce1f1d9cf08c451fe78dbbf28dda14d4301cec2689f6bd85e604847d4a20226fd79c272796fef4f28feaca81a20c0f62e8e9 - languageName: node - linkType: hard - -"@swc/counter@npm:^0.1.1": - version: 0.1.2 - resolution: "@swc/counter@npm:0.1.2" - checksum: 18be012107d4ba1f79776c48d83391ca2159103d7d31a59ff52fcc8024db51b71c5f46714a9fb73981739bc8a38dc6f385a046b71cc08f6043f3c47f5c409eab - languageName: node - linkType: hard - "@swc/helpers@npm:0.5.2": version: 0.5.2 resolution: "@swc/helpers@npm:0.5.2" @@ -7138,7 +7013,7 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.4, @swc/types@npm:^0.1.5": +"@swc/types@npm:^0.1.4": version: 0.1.5 resolution: "@swc/types@npm:0.1.5" checksum: b35f93fe896a2240f6f10544e408f9648c2bd4bcff9bd8d022d9a6942d31cf859f86119fb0bbb04a12eefa1f6a6745ffc7d18f3a490d76d7b6a074a7c9608144 @@ -7336,7 +7211,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7, @types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.7, @types/babel__core@npm:^7.18.0": +"@types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -9833,7 +9708,7 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.14.2, ast-types@npm:^0.14.1, ast-types@npm:^0.14.2": +"ast-types@npm:0.14.2, ast-types@npm:^0.14.1": version: 0.14.2 resolution: "ast-types@npm:0.14.2" dependencies: @@ -10019,23 +9894,7 @@ __metadata: languageName: node linkType: hard -"babel-eslint@npm:^10.1.0": - version: 10.1.0 - resolution: "babel-eslint@npm:10.1.0" - dependencies: - "@babel/code-frame": "npm:^7.0.0" - "@babel/parser": "npm:^7.7.0" - "@babel/traverse": "npm:^7.7.0" - "@babel/types": "npm:^7.7.0" - eslint-visitor-keys: "npm:^1.0.0" - resolve: "npm:^1.12.0" - peerDependencies: - eslint: ">= 4.12.1" - checksum: a1596111871ce3615410a2ffb87ab8383b35a8c8e1942b47130cb12bca2578c8eb9d8e56c3c84f44d7abe716684f6794f2e6c1e5b4e6d09f171ae51670be44b9 - languageName: node - linkType: hard - -"babel-loader@npm:9.1.3, babel-loader@npm:^7.0.0 || ^8.0.0 || ^9.0.0, babel-loader@npm:^9.0.0, babel-loader@npm:^9.1.2": +"babel-loader@npm:9.1.3": version: 9.1.3 resolution: "babel-loader@npm:9.1.3" dependencies: @@ -10048,25 +9907,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-add-react-displayname@npm:^0.0.5": - version: 0.0.5 - resolution: "babel-plugin-add-react-displayname@npm:0.0.5" - checksum: 96b363d613e3d25e55606546874f3ab34b45088ac5143a64e417976f1eb29ed3e4df90400daa5edb2026d6088ed172f7af469d89838aac4bc810ede377b63c63 - languageName: node - linkType: hard - -"babel-plugin-bundled-import-meta@npm:^0.3.1": - version: 0.3.2 - resolution: "babel-plugin-bundled-import-meta@npm:0.3.2" - dependencies: - "@babel/plugin-syntax-import-meta": "npm:^7.2.0" - "@babel/template": "npm:^7.7.0" - peerDependencies: - "@babel/core": ^7.7.0 - checksum: 506faae34ff19b75d8bf5291b141af2e083932cdf2a8b4334582da9b26a2750a9d5c0656c1d6da15a4e51894abdbf407c18d10b9d1a596b688771d334105ac0c - languageName: node - linkType: hard - "babel-plugin-debug-macros@npm:^0.3.4": version: 0.3.4 resolution: "babel-plugin-debug-macros@npm:0.3.4" @@ -10179,17 +10019,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-react-docgen@npm:4.2.1": - version: 4.2.1 - resolution: "babel-plugin-react-docgen@npm:4.2.1" - dependencies: - ast-types: "npm:^0.14.2" - lodash: "npm:^4.17.15" - react-docgen: "npm:^5.0.0" - checksum: 9f7af20e6ebd794beae14aa1ffe4f1c1c5855821a5a9f205099602c89b557e33b9cb3dc3fe0b3a2f2ca35007c6ab45f52da9695a681d8495ad0f5494ef78ec34 - languageName: node - linkType: hard - "babel-plugin-transform-hook-names@npm:^1.0.2": version: 1.0.2 resolution: "babel-plugin-transform-hook-names@npm:1.0.2" @@ -11005,28 +10834,6 @@ __metadata: languageName: node linkType: hard -"c8@npm:^7.6.0": - version: 7.14.0 - resolution: "c8@npm:7.14.0" - dependencies: - "@bcoe/v8-coverage": "npm:^0.2.3" - "@istanbuljs/schema": "npm:^0.1.3" - find-up: "npm:^5.0.0" - foreground-child: "npm:^2.0.0" - istanbul-lib-coverage: "npm:^3.2.0" - istanbul-lib-report: "npm:^3.0.0" - istanbul-reports: "npm:^3.1.4" - rimraf: "npm:^3.0.2" - test-exclude: "npm:^6.0.0" - v8-to-istanbul: "npm:^9.0.0" - yargs: "npm:^16.2.0" - yargs-parser: "npm:^20.2.9" - bin: - c8: bin/c8.js - checksum: 8946f55f2dcc85bf146f429a3deeede78502da245e515a2d181342475d8d8698b4055ec1d9b887ab8e1615f49c1a2af4d63557e68b2005844572fb785991e148 - languageName: node - linkType: hard - "cac@npm:^6.7.14": version: 6.7.14 resolution: "cac@npm:6.7.14" @@ -11787,7 +11594,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^2.18.0, commander@npm:^2.19.0, commander@npm:^2.2.0, commander@npm:^2.20.0": +"commander@npm:^2.18.0, commander@npm:^2.2.0, commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" checksum: 74c781a5248c2402a0a3e966a0a2bba3c054aad144f5c023364be83265e796b20565aa9feff624132ff629aa64e16999fa40a743c10c12f7c61e96a794b99288 @@ -12505,7 +12312,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": +"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": version: 4.3.4 resolution: "debug@npm:4.3.4" dependencies: @@ -14271,13 +14078,6 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^1.0.0": - version: 1.3.0 - resolution: "eslint-visitor-keys@npm:1.3.0" - checksum: 10c91fdbbe36810dd4308e57f9a8bc7177188b2a70247e54e3af1fa05ebc66414ae6fd4ce3c6c6821591f43a556e9037bc6b071122e099b5f8b7d2f76df553e3 - languageName: node - linkType: hard - "eslint-visitor-keys@npm:^3.1.0, eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" @@ -14413,17 +14213,6 @@ __metadata: languageName: node linkType: hard -"estree-to-babel@npm:^3.1.0": - version: 3.2.1 - resolution: "estree-to-babel@npm:3.2.1" - dependencies: - "@babel/traverse": "npm:^7.1.6" - "@babel/types": "npm:^7.2.0" - c8: "npm:^7.6.0" - checksum: c7949b141f569528b2608ab715d593a04f7e2e529df04e0b595d0a7dea819b410e71d1f04716e43ac1480942afc5701cb5151ad2906ee8402969651a389881bb - languageName: node - linkType: hard - "estree-util-is-identifier-name@npm:^2.0.0": version: 2.1.0 resolution: "estree-util-is-identifier-name@npm:2.1.0" @@ -15264,16 +15053,6 @@ __metadata: languageName: node linkType: hard -"foreground-child@npm:^2.0.0": - version: 2.0.0 - resolution: "foreground-child@npm:2.0.0" - dependencies: - cross-spawn: "npm:^7.0.0" - signal-exit: "npm:^3.0.2" - checksum: 6719982783a448162f9a01500757fb2053bc5dcd4d67c7cd30739b38ccc01b39f84e408c30989d1d8774519c021c0498e2450ab127690fb09d7f2568fd94ffcc - languageName: node - linkType: hard - "foreground-child@npm:^3.1.0": version: 3.1.1 resolution: "foreground-child@npm:3.1.1" @@ -17859,7 +17638,7 @@ __metadata: languageName: node linkType: hard -"istanbul-reports@npm:^3.1.4, istanbul-reports@npm:^3.1.6": +"istanbul-reports@npm:^3.1.6": version: 3.1.6 resolution: "istanbul-reports@npm:3.1.6" dependencies: @@ -20877,7 +20656,7 @@ __metadata: languageName: node linkType: hard -"neo-async@npm:^2.5.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2": +"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2": version: 2.6.2 resolution: "neo-async@npm:2.6.2" checksum: c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d @@ -21009,7 +20788,7 @@ __metadata: languageName: node linkType: hard -"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17": +"node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" dependencies: @@ -23493,26 +23272,6 @@ __metadata: languageName: node linkType: hard -"react-docgen@npm:^5.0.0": - version: 5.4.3 - resolution: "react-docgen@npm:5.4.3" - dependencies: - "@babel/core": "npm:^7.7.5" - "@babel/generator": "npm:^7.12.11" - "@babel/runtime": "npm:^7.7.6" - ast-types: "npm:^0.14.2" - commander: "npm:^2.19.0" - doctrine: "npm:^3.0.0" - estree-to-babel: "npm:^3.1.0" - neo-async: "npm:^2.6.1" - node-dir: "npm:^0.1.10" - strip-indent: "npm:^3.0.0" - bin: - react-docgen: bin/react-docgen.js - checksum: c920e9611e08317f8fdae707114cf02baaa18e2f1bd23ed18f57e66b9e1042e51dc98cc9de828b03d018ccc4e26300c9a6c4f74e862fc94dc64029267c801a01 - languageName: node - linkType: hard - "react-docgen@npm:^7.0.0": version: 7.0.1 resolution: "react-docgen@npm:7.0.1" @@ -24648,7 +24407,7 @@ __metadata: languageName: node linkType: hard -"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.4.0": +"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.4.0": version: 1.22.8 resolution: "resolve@npm:1.22.8" dependencies: @@ -24674,7 +24433,7 @@ __metadata: languageName: node linkType: hard -"resolve@patch:resolve@npm%3A1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin, resolve@patch:resolve@npm%3A^1.12.0#optional!builtin, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin": +"resolve@patch:resolve@npm%3A1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin": version: 1.22.8 resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin::version=1.22.8&hash=c3c19d" dependencies: @@ -26707,16 +26466,6 @@ __metadata: languageName: node linkType: hard -"swc-loader@npm:^0.2.3": - version: 0.2.3 - resolution: "swc-loader@npm:0.2.3" - peerDependencies: - "@swc/core": ^1.2.147 - webpack: ">=2" - checksum: cb3f9b116fbd292b881e804a4fe66cd6d543a7de2572f5a68e067e4780ee2d59a8da87a90736ba6e8e286e4368c98214ae3486b1b872080292814e5d3062f09c - languageName: node - linkType: hard - "symbol-observable@npm:4.0.0": version: 4.0.0 resolution: "symbol-observable@npm:4.0.0" @@ -28209,7 +27958,7 @@ __metadata: languageName: node linkType: hard -"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.2.0": +"v8-to-istanbul@npm:^9.2.0": version: 9.2.0 resolution: "v8-to-istanbul@npm:9.2.0" dependencies: @@ -29559,7 +29308,7 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.9": +"yargs-parser@npm:^20.2.2": version: 20.2.9 resolution: "yargs-parser@npm:20.2.9" checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72 @@ -29633,21 +29382,6 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^16.2.0": - version: 16.2.0 - resolution: "yargs@npm:16.2.0" - dependencies: - cliui: "npm:^7.0.2" - escalade: "npm:^3.1.1" - get-caller-file: "npm:^2.0.5" - require-directory: "npm:^2.1.1" - string-width: "npm:^4.2.0" - y18n: "npm:^5.0.5" - yargs-parser: "npm:^20.2.2" - checksum: b1dbfefa679848442454b60053a6c95d62f2d2e21dd28def92b647587f415969173c6e99a0f3bab4f1b67ee8283bf735ebe3544013f09491186ba9e8a9a2b651 - languageName: node - linkType: hard - "yn@npm:3.1.1": version: 3.1.1 resolution: "yn@npm:3.1.1" diff --git a/docs/api/main-config-framework.md b/docs/api/main-config-framework.md index ce256574b75c..8da82854d24f 100644 --- a/docs/api/main-config-framework.md +++ b/docs/api/main-config-framework.md @@ -38,20 +38,3 @@ While many options are specific to a framework, there are some options that are Type: `Record` Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md). - -#### `options.builder.useSWC` - -For frameworks made with [Webpack](../builders/webpack.md) builder, except Angular. Enabling this option allows you to use the [SWC](https://swc.rs/) compiler instead of [Babel](../configure/compilers.md#babel). - -When Storybook loads, it will update Webpack's configuration including the required loaders (e.g., [`TerserPlugin`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`babel-loader`](https://webpack.js.org/loaders/babel-loader/)) with SWC equivalents (e.g., [`swc-loader`](https://swc.rs/docs/usage/swc-loader)) for bundling and minification. - - - - - - diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index b8a4761ba5da..ae25c4fb308a 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -12,7 +12,6 @@ Type: checkOptions?: CheckOptions; reactDocgen?: 'react-docgen' | 'react-docgen-typescript' | false; reactDocgenTypescriptOptions?: ReactDocgenTypescriptOptions; - skipBabel?: boolean; } ``` @@ -87,24 +86,6 @@ Only available for React Storybook projects. Options to pass to react-docgen-typ -## `skipBabel` - -Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead. - -Type: `boolean` - -Disable parsing of TypeScript files through Babel. - - - - - - - ## `skipCompiler` Type: `boolean` diff --git a/docs/configure/compilers.md b/docs/configure/compilers.md index 96d9cb75f64a..803237b8b725 100644 --- a/docs/configure/compilers.md +++ b/docs/configure/compilers.md @@ -42,90 +42,7 @@ By default, Babel provides an opinionated [configuration](https://babeljs.io/doc - **Project-wide configuration**: Babel will look for a `babel.config.js` or equivalent file in the root of your project and use it to configure your project's Babel setup. - **File-relative configuration**: Babel will look for a `.babelrc.json` or equivalent file, introspecting the project structure until it finds a configuration file. This will allow you to configure Babel individually for multiple aspects of your project. -Storybook relies on an agnostic approach to configuring Babel, enabling you to provide the necessary configuration for your project, and it will use it. Based on the supported frameworks, builders, and addons, it may include minor adjustments to ensure compatibility with Storybook's features. If you need to provide a custom configuration, you can generate a `.babelrc.json` file by running the following command: - - - - - - - -When the command runs, it will prompt you to install additional packages and generate a `.babelrc.json` file in the current working directory of your project and apply it, assuming that you're using the default configuration and co-locating your Storybook stories in the current working directory of your project. - -
-Example Babel configuration - -```json -{ - "sourceType": "unambiguous", - "presets": [ - [ - "@babel/preset-env", - { - "shippedProposals": true, - "loose": true - } - ], - "@babel/preset-typescript" - ], - "plugins": [ - "@babel/plugin-transform-shorthand-properties", - "@babel/plugin-transform-block-scoping", - [ - "@babel/plugin-proposal-decorators", - { - "legacy": true - } - ], - [ - "@babel/plugin-proposal-class-properties", - { - "loose": true - } - ], - [ - "@babel/plugin-proposal-private-methods", - { - "loose": true - } - ], - "@babel/plugin-proposal-export-default-from", - "@babel/plugin-syntax-dynamic-import", - [ - "@babel/plugin-proposal-object-rest-spread", - { - "loose": true, - "useBuiltIns": true - } - ], - "@babel/plugin-transform-classes", - "@babel/plugin-transform-arrow-functions", - "@babel/plugin-transform-parameters", - "@babel/plugin-transform-destructuring", - "@babel/plugin-transform-spread", - "@babel/plugin-transform-for-of", - "babel-plugin-macros", - "@babel/plugin-proposal-optional-chaining", - "@babel/plugin-proposal-nullish-coalescing-operator", - [ - "babel-plugin-polyfill-corejs3", - { - "method": "usage-global", - "absoluteImports": "core-js", - "version": "3.18.3" - } - ] - ] -} -``` - -
+Storybook relies on an agnostic approach to configuring Babel, enabling you to provide the necessary configuration for your project, and it will use it. Based on the supported frameworks, builders, and addons, it may include minor adjustments to ensure compatibility with Storybook's features. diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md index b9aba6763119..eb789ed833e7 100644 --- a/docs/configure/typescript.md +++ b/docs/configure/typescript.md @@ -28,7 +28,7 @@ See the Vite builder [TypeScript documentation](https://github.com/storybookjs/b ### Extending the default configuration -Out of the box, Storybook is built to work with a wide range of third-party libraries, enabling you to safely access and document metadata (e.g., props, inputs) from your components without any additional configuration. It relies on [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) for TypeScript support and optionally [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/v4.1.6/README.md#options) for type checking. Since Storybook supports multiple frameworks, it also includes a set of third-party packages to support each framework (e.g., `ts-loader` and `ngx-template-loader` for Angular, `react-docgen-typescript-plugin` for React). If you need to customize the default configuration for a specific use case scenario, refer to the [`config.typescript` API reference](../api/main-config-typescript.md). +Out of the box, Storybook is built to work with a wide range of third-party libraries, enabling you to safely access and document metadata (e.g., props, inputs) from your components without any additional configuration. Since Storybook supports multiple frameworks, it also includes a set of third-party packages to support each framework (e.g., `ts-loader` and `ngx-template-loader` for Angular, `react-docgen-typescript-plugin` for React). If you need to customize the default configuration for a specific use case scenario, refer to the [`config.typescript` API reference](../api/main-config-typescript.md). The above example extends the baseline configuration to remove existing props from third-party libraries. Useful if you want to document only your components. However, if you need to include them, you can do so by adjusting your configuration as follows: diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md index 27fdf03b70af..023a787adc8a 100644 --- a/docs/contribute/framework.md +++ b/docs/contribute/framework.md @@ -100,7 +100,6 @@ Because a framework is a node package, it must contain a `package.json` file. He "": "^x.x.x" }, "peerDependencies": { - "@babel/core": "^x.x.x", "@storybook/addon-actions": "^7.0.0", "": "^x.x.x || ^x.x.x", "": "^x.x.x || ^x.x.x", diff --git a/docs/faq.md b/docs/faq.md index 580501e8ecd3..cb0742563f0b 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -8,7 +8,6 @@ Here are some answers to frequently asked questions. If you have a question, you - [How can I opt-out of Angular Ivy?](#how-can-i-opt-out-of-angular-ivy) - [How can I opt-out of Angular ngcc?](#how-can-i-opt-out-of-angular-ngcc) - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories) -- [I see `ReferenceError: React is not defined` when using Storybook with Next.js](#i-see-referenceerror-react-is-not-defined-when-using-storybook-with-nextjs) - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs) - [How do I fix module resolution in special environments?](#how-do-i-fix-module-resolution-in-special-environments) - [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook) @@ -97,13 +96,6 @@ If you're using [`Yarn`](https://yarnpkg.com/) as a package manager, you'll need -## I see `ReferenceError: React is not defined` when using Storybook with Next.js - -Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by: - -1. Adding `import React from 'react'` to your component files. -2. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require) - ## How do I setup Storybook to share Webpack configuration with Next.js? You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example: diff --git a/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx deleted file mode 100644 index 74835b3d835a..000000000000 --- a/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5) - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], -}; -``` diff --git a/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx deleted file mode 100644 index 103f6eb07fcc..000000000000 --- a/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], -}; - -export default config; -``` diff --git a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx index 4dca99f347d9..61d6fa4243c5 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.js.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.js.mdx @@ -2,15 +2,6 @@ // .storybook/main.js export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => ({ jsc: { transform: { diff --git a/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx b/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx index aadc09cd4a2e..248049e88e61 100644 --- a/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx +++ b/docs/snippets/common/main-config-swc-jsx-transform.ts.mdx @@ -5,14 +5,6 @@ import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => ({ jsc: { transform: { diff --git a/docs/snippets/common/main-config-swc.js.mdx b/docs/snippets/common/main-config-swc.js.mdx index 8fb0cc73115a..dbc9de018d7c 100644 --- a/docs/snippets/common/main-config-swc.js.mdx +++ b/docs/snippets/common/main-config-swc.js.mdx @@ -2,15 +2,6 @@ // .storybook/main.js export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => { return { ...config, diff --git a/docs/snippets/common/main-config-swc.ts.mdx b/docs/snippets/common/main-config-swc.ts.mdx index 90dc8d50f163..a8a3ebaf56ec 100644 --- a/docs/snippets/common/main-config-swc.ts.mdx +++ b/docs/snippets/common/main-config-swc.ts.mdx @@ -5,14 +5,6 @@ import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { - framework: { - name: '@storybook/your-framework', - options: { - builder: { - useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6 - }, - }, - }, swc: (config, options) => { return { ...config, diff --git a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx b/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx deleted file mode 100644 index c0c39d39a12d..000000000000 --- a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - skipBabel: true, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx deleted file mode 100644 index eb831ba140d8..000000000000 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// example-addon/src/babel/babelDefault.js - -export function babelDefault(config) { - return { - ...config, - plugins: [ - ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], - }; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx deleted file mode 100644 index 85f9b7e01c74..000000000000 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// example-addon/src/babel/babelDefault.ts - -import { TransformOptions } from '@babel/core'; - -export function babelDefault(config: TransformOptions) { - return { - ...config, - plugins: [ - ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], - }; -} -``` diff --git a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx index 5e74dccae3fc..d598e43197d2 100644 --- a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx +++ b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx @@ -3,9 +3,7 @@ import { TransformOptions } from '@babel/core'; export function babelDefault(config: TransformOptions) { return { - ...config, plugins: [ - ...config.plugins, [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], ], }; diff --git a/docs/snippets/common/storybook-cli-babelrc-file.npm.mdx b/docs/snippets/common/storybook-cli-babelrc-file.npm.mdx deleted file mode 100644 index 883425742e66..000000000000 --- a/docs/snippets/common/storybook-cli-babelrc-file.npm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npx storybook@latest babelrc -``` diff --git a/docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx b/docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx deleted file mode 100644 index 4f7d8b720d1f..000000000000 --- a/docs/snippets/common/storybook-cli-babelrc-file.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest babelrc -``` diff --git a/docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx b/docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx deleted file mode 100644 index 1bec8fcdd103..000000000000 --- a/docs/snippets/common/storybook-cli-babelrc-file.yarn.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -yarn dlx storybook@latest babelrc -``` diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx index de4f2e5d4f8d..aa5b784e31a6 100644 --- a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx +++ b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx @@ -11,7 +11,6 @@ export default { istanbul: { include: ['**/stories/**'], exclude: ['**/exampleDirectory/**'], - excludeNodeModules: true, }, }, }, diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx index 2bf04e8d7ade..71f5946e1da0 100644 --- a/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx +++ b/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx @@ -4,15 +4,16 @@ // For Vite support add the following import // import type { AddonOptionsVite } from '@storybook/addon-coverage'; -import type { AddonOptionsBabel } from '@storybook/addon-coverage'; +import type { AddonOptionsWebpack } from '@storybook/addon-coverage'; // Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5) import type { StorybookConfig } from '@storybook/your-framework'; -const coverageConfig: AddonOptionsBabel = { - include: ['**/stories/**'], - exclude: ['**/exampleDirectory/**'], - excludeNodeModules: true, +const coverageConfig: AddonOptionsWebpack = { + istanbul: { + include: ['**/stories/**'], + exclude: ['**/exampleDirectory/**'], + } }; const config: StorybookConfig = { @@ -21,10 +22,7 @@ const config: StorybookConfig = { // Other Storybook addons { name: '@storybook/addon-coverage', - options: { - istanbul: { - ...coverageConfig, - }, + options: coverageConfig, }, }, ], diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx index 0011fc2f7377..02b1a55356a7 100644 --- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx +++ b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx @@ -8,7 +8,6 @@ export default { typescript: { // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs. reactDocgen: 'react-docgen', - skipBabel: true, check: false, }, }; diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx index 45ed76c75eb9..775d8341be77 100644 --- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx +++ b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx @@ -10,7 +10,6 @@ const config: StorybookConfig = { typescript: { // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs. reactDocgen: 'react-docgen', - skipBabel: true, check: false, }, }; diff --git a/docs/writing-tests/test-coverage.md b/docs/writing-tests/test-coverage.md index cf635c22a4f4..038e0d56eee9 100644 --- a/docs/writing-tests/test-coverage.md +++ b/docs/writing-tests/test-coverage.md @@ -82,7 +82,7 @@ Finally, open a new terminal window and run the test-runner with: ### Configure -By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@storybook/addon-coverage) offers zero-config support for Storybook and instruments your code via [`babel-plugin-istanbul`](https://github.com/istanbuljs/babel-plugin-istanbul) for [Babel](https://babeljs.io/), or [`vite-plugin-istanbul`](https://github.com/iFaxity/vite-plugin-istanbul) for [Vite](https://vitejs.dev/). However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to the addon. Listed below are the available options and examples of how to use them. +By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@storybook/addon-coverage) offers zero-config support for Storybook and instruments your code via [`istanbul-lib-instrument`](https://www.npmjs.com/package/istanbul-lib-instrument) for [Webpack](https://webpack.js.org/), or [`vite-plugin-istanbul`](https://github.com/iFaxity/vite-plugin-istanbul) for [Vite](https://vitejs.dev/). However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to the addon. Listed below are the available options and examples of how to use them. @@ -95,28 +95,7 @@ By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@s -| Option | Description | Plugin | -| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `cwd` | Defines the current working directory
`options: { istanbul: { cwd: process.cwd(),}}` | Babel, Vite | -| `include` | Select the files to collect coverage
`options: { istanbul: { include: ['**/stories/**'],}}` | Babel, Vite | -| `exclude` | Select the files to exclude from coverage
`options: { istanbul: { exclude: ['**/stories/**'],}}` | Babel, Vite | -| `extension` | Sets additional file extensions for coverage
`options: { istanbul: { extension: ['.js', '.cjs', '.mjs'],}}` | Babel, Vite | -| `nycrcPath` | Defines the relative path for the existing nyc configuration file
`options: { istanbul: { nycrcPath: '../nyc.config.js',}}` | Babel, Vite | -| `excludeNodeModules` | Disables `node_modules` directory introspection
`options: { istanbul: { excludeNodeModules:false,}}` | Babel | -| `ignoreClassMethods` | Configures a set of method names to ignore from being collected
`options: { istanbul: { ignoreClassMethods: ['example', 'myMethod'],}}` | Babel | -| `useInlineSourceMaps` | Enables coverage collection on source maps
`options: { istanbul: { useInlineSourceMaps: false,}}` | Babel | -| `inputSourceMap` | Sets the value to store the source map.
Useful for instrumenting code programmatically
`options: { istanbul: { inputSourceMap: sourceMap,}}` | Babel | -| `onCover` | Hook to monitor coverage collection for all tests
`options: { istanbul: { onCover: (fileName, fileCoverage) => {},}}` | Babel | -| `requireEnv` | Overrides the `VITE_COVERAGE` environment variable's value by granting access to the `env` variables
`options: { istanbul: { requireEnv: true,}}` | Vite | -| `cypress` | Replaces the `VITE_COVERAGE` environment variable with `CYPRESS_COVERAGE`.
Requires Cypress
`options: { istanbul: { cypress: true,}}` | Vite | -| `checkProd` | Configures the plugin to skip instrumentation in production environments
`options: { istanbul: { checkProd: true,}}` | Vite | -| `forceBuildInstrument` | Configures the plugin to add instrumentation in build mode
`options: { istanbul: { forceBuildInstrument: true,}}` | Vite | - - - -Including the `nycrcPath` option enables use of an existing `nyc` configuration file with additional options like [coverage thresholds](https://github.com/istanbuljs/nyc#coverage-thresholds). For more information, refer to the [`nyc` documentation](https://github.com/istanbuljs/nyc#common-configuration-options). - - +Available options for Webpack or Vite can be looked up in the [@storybook/addon-coverage documentation](https://github.com/storybookjs/addon-coverage). ## What about other coverage reporting tools? @@ -168,7 +147,7 @@ If you generated a production build optimized for performance with the [`--test` ### The coverage addon doesn't support instrumented code -As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage) is based on Babel and Vite plugins for code instrumentation, frameworks that don't rely upon these libraries (e.g., Angular configured with Webpack), will require additional configuration to enable code instrumentation. In that case, you can refer to the following [repository](https://github.com/yannbf/storybook-coverage-recipes) for more information. +As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage) is based on Webpack5 loaders and Vite plugins for code instrumentation, frameworks that don't rely upon these libraries (e.g., Angular configured with Webpack), will require additional configuration to enable code instrumentation. In that case, you can refer to the following [repository](https://github.com/yannbf/storybook-coverage-recipes) for more information. #### Learn about other UI tests diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index e0139f305f0b..40580391a6e1 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -107,10 +107,6 @@ packages: access: $all publish: $all proxy: npmjs - '@storybook/babel-plugin-require-context-hook': - access: $all - publish: $all - proxy: npmjs '@storybook/semver': # TODO: remove this when new versions of all dependents have been published and updated. It is not used anymore but still referenced in the latest packages access: $all From cf05ed161046baa51e453670183f42f01f623b8e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:52:26 +0100 Subject: [PATCH 027/265] Remove babel cache preset from core-server --- code/lib/core-server/package.json | 6 ------ code/lib/core-server/src/build-dev.ts | 6 +----- code/lib/core-server/src/build-static.ts | 6 +----- .../lib/core-server/src/presets/babel-cache-preset.ts | 11 ----------- 4 files changed, 2 insertions(+), 27 deletions(-) delete mode 100644 code/lib/core-server/src/presets/babel-cache-preset.ts diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index b12fe37ae249..c7cee6550cf5 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -26,11 +26,6 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./dist/presets/babel-cache-preset": { - "types": "./dist/presets/babel-cache-preset.d.ts", - "node": "./dist/presets/babel-cache-preset.js", - "require": "./dist/presets/babel-cache-preset.js" - }, "./dist/presets/common-preset": { "types": "./dist/presets/common-preset.d.ts", "node": "./dist/presets/common-preset.js", @@ -119,7 +114,6 @@ "bundler": { "entries": [ "./src/index.ts", - "./src/presets/babel-cache-preset.ts", "./src/presets/common-preset.ts", "./src/presets/common-override-preset.ts" ], diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 88c3ab483f06..ea5397f313ea 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -153,12 +153,8 @@ export async function buildDevStandalone( ...(previewBuilder.corePresets || []), ...(resolvedRenderer ? [resolvedRenderer] : []), ...corePresets, - require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'), - ], - overridePresets: [ - ...(previewBuilder.overridePresets || []), - require.resolve('@storybook/core-server/dist/presets/common-override-preset'), ], + overridePresets: [...(previewBuilder.overridePresets || [])], ...options, }); diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 683da79eb0f1..bd75d0bf3242 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -84,12 +84,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption ...(previewBuilder.corePresets || []), ...(resolvedRenderer ? [resolvedRenderer] : []), ...corePresets, - require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'), - ], - overridePresets: [ - ...(previewBuilder.overridePresets || []), - require.resolve('@storybook/core-server/dist/presets/common-override-preset'), ], + overridePresets: [...(previewBuilder.overridePresets || [])], ...options, build, }); diff --git a/code/lib/core-server/src/presets/babel-cache-preset.ts b/code/lib/core-server/src/presets/babel-cache-preset.ts deleted file mode 100644 index 4a381daa921e..000000000000 --- a/code/lib/core-server/src/presets/babel-cache-preset.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { resolvePathInStorybookCache } from '@storybook/core-common'; - -// FIXME: babelConfig is maybe a TransformOptions? -const extend = (babelConfig: any) => ({ - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables a cache directory for faster-rebuilds - cacheDirectory: resolvePathInStorybookCache('babel'), - ...babelConfig, -}); - -export const babel = extend; From 89ec937f811a8c777a32b5afd3fac6eda1d90b2f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 13:53:57 +0100 Subject: [PATCH 028/265] Remove internal swc-webpack template --- code/lib/cli/src/sandbox-templates.ts | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index b6a8ce9aa4ad..aae5a867c5a0 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -483,25 +483,6 @@ const baseTemplates = { * They will be hidden by default in the Storybook status page. */ const internalTemplates = { - 'internal/swc-webpack': { - ...baseTemplates['react-webpack/18-ts'], - name: 'SWC (react-webpack/18-ts)', - isInternal: true, - inDevelopment: true, - modifications: { - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, - }, - }, - }, - }, - skipTasks: ['bench'], - }, 'internal/react16-webpack': { name: 'React 16 (Webpack | TypeScript)', script: From badd68352a08794be3239580850002c367db676b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 14:06:10 +0100 Subject: [PATCH 029/265] Adjust CLI Init to install appropriate Webpack5 compiler --- code/builders/builder-webpack5/src/types.ts | 1 - code/frameworks/nextjs/README.md | 6 ------ code/lib/cli/src/generators/ANGULAR/index.ts | 1 + code/lib/cli/src/generators/HTML/index.ts | 2 +- code/lib/cli/src/generators/NEXTJS/index.ts | 1 + code/lib/cli/src/generators/PREACT/index.ts | 2 +- code/lib/cli/src/generators/REACT/index.ts | 2 +- .../cli/src/generators/REACT_SCRIPTS/index.ts | 2 +- code/lib/cli/src/generators/SERVER/index.ts | 2 +- code/lib/cli/src/generators/VUE3/index.ts | 2 +- .../cli/src/generators/WEB-COMPONENTS/index.ts | 2 +- .../cli/src/generators/WEBPACK_REACT/index.ts | 2 +- code/lib/cli/src/generators/baseGenerator.ts | 17 +++++------------ code/lib/cli/src/generators/types.ts | 2 +- code/lib/core-webpack/src/types.ts | 1 - 15 files changed, 16 insertions(+), 29 deletions(-) diff --git a/code/builders/builder-webpack5/src/types.ts b/code/builders/builder-webpack5/src/types.ts index 93b2c3ad9caf..6e55f145ca22 100644 --- a/code/builders/builder-webpack5/src/types.ts +++ b/code/builders/builder-webpack5/src/types.ts @@ -37,7 +37,6 @@ export interface StorybookConfigWebpack extends Pick= 14.0.0 - useSWC: true, - }, - }, }, }; ``` diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 4a368e8d0af3..27b10dfcc2ca 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -71,6 +71,7 @@ const generator: Generator<{ projectName: string }> = async ( addScripts: false, componentsDestinationPath: root ? `${root}/src/stories` : undefined, storybookConfigFolder: storybookFolder, + webpackCompiler: () => undefined, }, 'angular' ); diff --git a/code/lib/cli/src/generators/HTML/index.ts b/code/lib/cli/src/generators/HTML/index.ts index c4e0af830fbd..87ee978b0865 100755 --- a/code/lib/cli/src/generators/HTML/index.ts +++ b/code/lib/cli/src/generators/HTML/index.ts @@ -4,7 +4,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'html', { - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/NEXTJS/index.ts b/code/lib/cli/src/generators/NEXTJS/index.ts index 2588b387312a..f060f6b97837 100644 --- a/code/lib/cli/src/generators/NEXTJS/index.ts +++ b/code/lib/cli/src/generators/NEXTJS/index.ts @@ -10,6 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'react', { extraAddons: ['@storybook/addon-onboarding'], + webpackCompiler: ({ builder }) => undefined, }, 'nextjs' ); diff --git a/code/lib/cli/src/generators/PREACT/index.ts b/code/lib/cli/src/generators/PREACT/index.ts index 6bbab88e16a3..74549fc5e26b 100644 --- a/code/lib/cli/src/generators/PREACT/index.ts +++ b/code/lib/cli/src/generators/PREACT/index.ts @@ -4,7 +4,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'preact', { - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/REACT/index.ts b/code/lib/cli/src/generators/REACT/index.ts index 046860356c56..e19a55ce1adc 100644 --- a/code/lib/cli/src/generators/REACT/index.ts +++ b/code/lib/cli/src/generators/REACT/index.ts @@ -10,7 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraPackages, - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), extraAddons: ['@storybook/addon-onboarding'], }); }; diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts index 627753ca96ee..048fca45d327 100644 --- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -59,7 +59,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'react', { - useSWC: () => true, + webpackCompiler: () => undefined, extraAddons, extraPackages, staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined, diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index 7ced80f7441c..1e7cdb0c6ad2 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/code/lib/cli/src/generators/SERVER/index.ts @@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'server', { - useSWC: () => true, + webpackCompiler: () => 'swc', extensions: ['json', 'yaml', 'yml'], } ); diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/cli/src/generators/VUE3/index.ts index ec20a5b946a1..75a632b4072a 100644 --- a/code/lib/cli/src/generators/VUE3/index.ts +++ b/code/lib/cli/src/generators/VUE3/index.ts @@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0'] : []; }, - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts index bf5ceee43c15..a4424ecb2757 100755 --- a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts +++ b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts @@ -5,7 +5,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { return baseGenerator(packageManager, npmOptions, options, 'web-components', { extraPackages: ['lit'], - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts b/code/lib/cli/src/generators/WEBPACK_REACT/index.ts index 94e8babee466..d894be17b34e 100644 --- a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts +++ b/code/lib/cli/src/generators/WEBPACK_REACT/index.ts @@ -5,7 +5,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraAddons: ['@storybook/addon-onboarding'], - useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + webpackCompiler: ({ builder }) => (builder === CoreBuilder.Webpack5 ? 'swc' : undefined), }); }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 0897ece904f1..62ed99c5c3ca 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -28,7 +28,7 @@ const defaultOptions: FrameworkOptions = { addScripts: true, addMainFile: true, addComponents: true, - useSWC: () => false, + webpackCompiler: () => undefined, extraMain: undefined, framework: undefined, extensions: undefined, @@ -221,13 +221,13 @@ export async function baseGenerator( extensions, storybookConfigFolder, componentsDestinationPath, - useSWC, + webpackCompiler, } = { ...defaultOptions, ...options, }; - const swc = useSWC ? useSWC({ builder }) : false; + const compiler = webpackCompiler ? webpackCompiler({ builder }) : undefined; const extraAddonsToInstall = typeof extraAddonPackages === 'function' @@ -241,6 +241,7 @@ export async function baseGenerator( const addons = [ '@storybook/addon-links', '@storybook/addon-essentials', + ...(compiler ? [`@storybook/addon-webpack5-compiler-${compiler}`] : []), ...stripVersions(extraAddonsToInstall || []), ].filter(Boolean); @@ -364,15 +365,7 @@ export async function baseGenerator( await configureMain({ framework: { name: frameworkInclude, - options: swc - ? { - ...(options.framework ?? {}), - builder: { - ...(options.framework?.builder ?? {}), - useSWC: true, - }, - } - : options.framework || {}, + options: options.framework || {}, }, prefixes, storybookConfigFolder, diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index f779ffd2b9cb..589c1299a545 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -23,7 +23,7 @@ export interface FrameworkOptions { addScripts?: boolean; addMainFile?: boolean; addComponents?: boolean; - useSWC?: ({ builder }: { builder: Builder }) => boolean; + webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined; extraMain?: any; extensions?: string[]; framework?: Record; diff --git a/code/lib/core-webpack/src/types.ts b/code/lib/core-webpack/src/types.ts index aecd1ccc62e3..01a68acfa950 100644 --- a/code/lib/core-webpack/src/types.ts +++ b/code/lib/core-webpack/src/types.ts @@ -24,7 +24,6 @@ export interface WebpackConfiguration { export type BuilderOptions = { fsCache?: boolean; - useSWC?: boolean; lazyCompilation?: boolean; }; From d88b38811772badadff8c6b4c1b8f43747da6d89 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 14:45:59 +0100 Subject: [PATCH 030/265] Do not apply default babel plugins for preact --- code/presets/preact-webpack/package.json | 3 --- code/presets/preact-webpack/src/index.ts | 27 ------------------------ 2 files changed, 30 deletions(-) diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index e430127e413c..4892d8a6fae1 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -49,8 +49,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", "@storybook/core-webpack": "workspace:*", "@types/node": "^18.0.0" }, @@ -59,7 +57,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "preact": "^8.0.0||^10.0.0" }, "engines": { diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts index 807098909d49..74240af2255c 100644 --- a/code/presets/preact-webpack/src/index.ts +++ b/code/presets/preact-webpack/src/index.ts @@ -1,5 +1,4 @@ import { dirname, join } from 'path'; -import type { PresetProperty } from '@storybook/types'; import type { StorybookConfig } from './types'; export * from './types'; @@ -7,32 +6,6 @@ export * from './types'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; -export const babel: PresetProperty<'babel'> = (config) => { - return { - ...config, - plugins: [ - [ - require.resolve('@babel/plugin-transform-react-jsx'), - { importSource: 'preact', runtime: 'automatic' }, - ], - ...(config?.plugins || []).filter((p) => { - const name = Array.isArray(p) ? p[0] : p; - if (typeof name === 'string') { - return !name.includes('plugin-transform-react-jsx'); - } - return true; - }), - ], - overrides: [ - // Transforms to apply only to first-party code: - { - exclude: '**/node_modules/**', - presets: [require.resolve('@babel/preset-typescript')], - }, - ], - }; -}; - export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => { return { ...config, From 2cfff035a90eaf9a52941bfd8c48c9fb5db52ada Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 14:47:52 +0100 Subject: [PATCH 031/265] Remove Preact 8 support --- code/frameworks/preact-webpack5/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index ba090ae61be2..bc0831fa9dd2 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -58,7 +58,7 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "preact": "^8.0.0||^10.0.0" + "preact": ">=10.0.0" }, "engines": { "node": ">=18.0.0" From a3d0330ddd20e9afec30ce44b1d7a88a280b209a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 15:19:20 +0100 Subject: [PATCH 032/265] Remove fast-refresh --- code/frameworks/nextjs/src/swc/loader.ts | 11 +- .../automigrate/fixes/new-frameworks.test.ts | 9 +- .../core-server/src/__for-testing__/main.ts | 1 - .../telemetry/src/storybook-metadata.test.ts | 12 +- code/presets/react-webpack/package.json | 14 --- .../src/framework-preset-react.test.ts | 102 ---------------- .../src/framework-preset-react.ts | 109 ------------------ code/presets/react-webpack/src/index.ts | 1 - code/presets/react-webpack/src/types.ts | 1 - docs/configure/frameworks.md | 1 - docs/faq.md | 31 ----- 11 files changed, 9 insertions(+), 283 deletions(-) delete mode 100644 code/presets/react-webpack/src/framework-preset-react.test.ts delete mode 100644 code/presets/react-webpack/src/framework-preset-react.ts diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 1925c2b49171..2d25ce1be28f 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -1,17 +1,10 @@ import { getProjectRoot } from '@storybook/core-common'; import { getVirtualModules } from '@storybook/builder-webpack5'; -import type { Options, Preset } from '@storybook/types'; +import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; import type { RuleSetRule } from 'webpack'; -const applyFastRefresh = async (options: Options) => { - const isDevelopment = options.configType === 'DEVELOPMENT'; - const framework = await options.presets.apply('framework'); - const reactOptions = typeof framework === 'object' ? framework.options : {}; - return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true'); -}; - export const configureSWCLoader = async ( baseConfig: any, options: Options, @@ -42,7 +35,7 @@ export const configureSWCLoader = async ( rootDir: dir, pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, - hasReactRefresh: await applyFastRefresh(options), + hasReactRefresh: false, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts index ab1a50315ea1..de0a7d41aea9 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts @@ -138,9 +138,6 @@ describe('new-frameworks fix', () => { }, }, }, - reactOptions: { - fastRefresh: true, - }, }, }) ).resolves.toEqual( @@ -149,9 +146,6 @@ describe('new-frameworks fix', () => { frameworkPackage: '@storybook/react-webpack5', dependenciesToAdd: ['@storybook/react-webpack5'], dependenciesToRemove: ['@storybook/builder-webpack5', '@storybook/manager-webpack5'], - frameworkOptions: { - fastRefresh: true, - }, builderConfig: { name: 'webpack5', options: { @@ -517,7 +511,7 @@ describe('new-frameworks fix', () => { checkNewFrameworks({ packageManager, main: { - framework: { name: '@storybook/react-webpack5', options: { fastRefresh: true } }, + framework: { name: '@storybook/react-webpack5' }, addons: [ { name: 'storybook-addon-next', @@ -541,7 +535,6 @@ describe('new-frameworks fix', () => { dependenciesToRemove: ['@storybook/react-webpack5', 'storybook-addon-next'], addonsToRemove: ['storybook-addon-next'], frameworkOptions: { - fastRefresh: true, nextConfigPath: '../next.config.js', }, builderInfo: { diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts index 988f5ba319fd..ab4ba5c316e7 100644 --- a/code/lib/core-server/src/__for-testing__/main.ts +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -35,7 +35,6 @@ const config: StorybookConfig = { framework: { name: '@storybook/react-webpack5', options: { - fastRefresh: true, strictMode: true, }, }, diff --git a/code/lib/telemetry/src/storybook-metadata.test.ts b/code/lib/telemetry/src/storybook-metadata.test.ts index b04081a7e581..b440f634007d 100644 --- a/code/lib/telemetry/src/storybook-metadata.test.ts +++ b/code/lib/telemetry/src/storybook-metadata.test.ts @@ -129,7 +129,7 @@ describe('storybook-metadata', () => { framework: { name: '/Users/foo/storybook/.yarn/__virtual__/@storybook-react-vite-virtual-769c990b9/0/cache/@storybook-react-vite-npm-7.1.0-alpha.38-512b-a23.zip/node_modules/@storybook/react-vite', options: { - fastRefresh: false, + strictMode: false, }, }, }, @@ -137,7 +137,7 @@ describe('storybook-metadata', () => { expect(unixResult.framework).toEqual({ name: '@storybook/react-vite', - options: { fastRefresh: false }, + options: { strictMode: false }, }); const windowsResult = await computeStorybookMetadata({ @@ -147,7 +147,7 @@ describe('storybook-metadata', () => { framework: { name: 'C:\\Users\\foo\\storybook\\.yarn\\__virtual__\\@storybook-react-vite-virtual-769c990b9\\0\\cache\\@storybook-react-vite-npm-7.1.0-alpha.38-512b-a23.zip\\node_modules\\@storybook\\react-vite', options: { - fastRefresh: false, + strictMode: false, }, }, }, @@ -155,7 +155,7 @@ describe('storybook-metadata', () => { expect(windowsResult.framework).toEqual({ name: '@storybook/react-vite', - options: { fastRefresh: false }, + options: { strictMode: false }, }); }); @@ -235,7 +235,7 @@ describe('storybook-metadata', () => { framework: { name: '@storybook/react-vite', options: { - fastRefresh: false, + strictMode: false, }, }, }, @@ -243,7 +243,7 @@ describe('storybook-metadata', () => { expect(reactResult.framework).toEqual({ name: '@storybook/react-vite', - options: { fastRefresh: false }, + options: { strictMode: false }, }); const angularResult = await computeStorybookMetadata({ diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 42457e27d994..eab6e3eb3475 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -42,11 +42,6 @@ "require": "./dist/framework-preset-react-docs.js", "import": "./dist/framework-preset-react-docs.mjs" }, - "./dist/framework-preset-react": { - "types": "./dist/framework-preset-react.d.ts", - "require": "./dist/framework-preset-react.js", - "import": "./dist/framework-preset-react.mjs" - }, "./dist/loaders/react-docgen-loader": { "types": "./dist/loaders/react-docgen-loader.d.ts", "require": "./dist/loaders/react-docgen-loader.js", @@ -69,9 +64,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/preset-flow": "^7.22.15", - "@babel/preset-react": "^7.22.15", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/node-logger": "workspace:*", @@ -79,11 +71,9 @@ "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", - "babel-plugin-add-react-displayname": "^0.0.5", "fs-extra": "^11.1.0", "magic-string": "^0.30.5", "react-docgen": "^7.0.0", - "react-refresh": "^0.14.0", "semver": "^7.3.7", "webpack": "5" }, @@ -91,14 +81,10 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "^7.22.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, "typescript": { "optional": true } diff --git a/code/presets/react-webpack/src/framework-preset-react.test.ts b/code/presets/react-webpack/src/framework-preset-react.test.ts deleted file mode 100644 index 3e555a7673b1..000000000000 --- a/code/presets/react-webpack/src/framework-preset-react.test.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { describe, it, expect, vi } from 'vitest'; -import type { Configuration } from 'webpack'; -import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; -import type { Options } from '@storybook/core-webpack'; -import * as preset from './framework-preset-react'; - -const mockApply = vi.fn(); -vi.mock('@pmmmwh/react-refresh-webpack-plugin', () => { - return vi.fn().mockImplementation(() => { - return { apply: mockApply }; - }); -}); - -describe('framework-preset-react', () => { - const reactRefreshPath = require.resolve('react-refresh/babel'); - const webpackConfigMock: Configuration = { - plugins: [], - module: { - rules: [], - }, - }; - const babelConfigMock = {}; - - const storybookOptions: Partial = { - configType: 'DEVELOPMENT', - presets: { - // @ts-expect-error (Converted from ts-ignore) - apply: async () => ({ - name: '@storybook/react', - options: { - fastRefresh: true, - }, - }), - }, - presetsList: [], - }; - - const storybookOptionsDisabledRefresh: Partial = { - configType: 'DEVELOPMENT', - presets: { - // @ts-expect-error (Converted from ts-ignore) - apply: async () => ({ - name: '@storybook/react', - options: { - fastRefresh: false, - }, - }), - }, - }; - - describe('babel', () => { - it('should return a config with fast refresh plugin when fast refresh is enabled', async () => { - const config = await preset.babel?.(babelConfigMock, storybookOptions as Options); - - expect(config?.plugins).toEqual([[reactRefreshPath, {}, 'storybook-react-refresh']]); - }); - - it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => { - const config = await preset.babel?.( - babelConfigMock, - storybookOptionsDisabledRefresh as Options - ); - - expect(config).toEqual(babelConfigMock); - }); - - it('should return unchanged config without fast refresh plugin when mode is not development', async () => { - const config = await preset.babel?.(babelConfigMock, { - ...storybookOptions, - configType: 'PRODUCTION', - } as Options); - - expect(config).toEqual(babelConfigMock); - }); - }); - - describe('webpackFinal', () => { - it('should return a config with fast refresh plugin when fast refresh is enabled', async () => { - const config = await preset.webpackFinal?.(webpackConfigMock, storybookOptions as Options); - - expect(config?.plugins).toEqual([new ReactRefreshWebpackPlugin()]); - }); - - it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => { - const config = await preset.webpackFinal?.( - webpackConfigMock, - storybookOptionsDisabledRefresh as Options - ); - - expect(config).toEqual(webpackConfigMock); - }); - - it('should return unchanged config without fast refresh plugin when mode is not development', async () => { - const config = await preset.webpackFinal?.(webpackConfigMock, { - ...storybookOptions, - configType: 'PRODUCTION', - } as Options); - - expect(config).toEqual(webpackConfigMock); - }); - }); -}); diff --git a/code/presets/react-webpack/src/framework-preset-react.ts b/code/presets/react-webpack/src/framework-preset-react.ts deleted file mode 100644 index a3a1d273189c..000000000000 --- a/code/presets/react-webpack/src/framework-preset-react.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { dirname, join } from 'path'; -import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; - -import { logger } from '@storybook/node-logger'; - -import type { Options, Preset } from '@storybook/core-webpack'; -import type { PresetProperty, PresetPropertyFn } from 'lib/types/dist'; -import type { StorybookConfig, ReactOptions } from './types'; - -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - -const applyFastRefresh = async (options: Options) => { - const isDevelopment = options.configType === 'DEVELOPMENT'; - const framework = await options.presets.apply('framework'); - const reactOptions = (typeof framework === 'object' ? framework.options : {}) as ReactOptions; - return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true'); -}; - -export const babel: PresetPropertyFn<'babel'> = async (config, options) => { - if (!(await applyFastRefresh(options))) return config; - - return { - ...config, - plugins: [ - [require.resolve('react-refresh/babel'), {}, 'storybook-react-refresh'], - ...(config?.plugins || []), - ], - }; -}; -const storybookReactDirName = getAbsolutePath('@storybook/preset-react-webpack'); -// TODO: improve node_modules detection -const context = storybookReactDirName.includes('node_modules') - ? join(storybookReactDirName, '../../') // Real life case, already in node_modules - : join(storybookReactDirName, '../../node_modules'); // SB Monorepo - -const hasJsxRuntime = () => { - try { - require.resolve('react/jsx-runtime', { paths: [context] }); - return true; - } catch (e) { - return false; - } -}; - -export const babelDefault: PresetPropertyFn<'babelDefault'> = async (config) => { - const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {}; - return { - ...config, - presets: [ - ...(config?.presets || []), - [require.resolve('@babel/preset-react'), presetReactOptions], - ], - plugins: [...(config?.plugins || []), require.resolve('babel-plugin-add-react-displayname')], - }; -}; - -export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, options) => { - if (!(await applyFastRefresh(options))) return config; - - // matches the name of the plugin in CRA. - const hasReactRefresh = !!config.plugins?.find( - (p) => p.constructor.name === 'ReactRefreshPlugin' - ); - - if (hasReactRefresh) { - logger.warn("=> React refresh is already set. You don't need to set the option"); - return config; - } - - logger.info('=> Using React fast refresh'); - - return { - ...config, - plugins: [ - ...(config.plugins || []), - - // Storybook uses webpack-hot-middleware https://github.com/storybookjs/storybook/issues/14114 - new ReactRefreshWebpackPlugin({ - overlay: { - sockIntegration: 'whm', - }, - }), - ], - }; -}; - -export const swc: PresetProperty<'swc'> = async (config, options) => { - const isDevelopment = options.configType !== 'PRODUCTION'; - - if (!(await applyFastRefresh(options))) { - return config; - } - - return { - ...config, - jsc: { - ...(config?.jsc ?? {}), - transform: { - ...(config?.jsc?.transform ?? {}), - react: { - ...(config?.jsc?.transform?.react ?? {}), - development: isDevelopment, - refresh: isDevelopment, - }, - }, - }, - }; -}; diff --git a/code/presets/react-webpack/src/index.ts b/code/presets/react-webpack/src/index.ts index 22ce14617df4..690e247c5774 100644 --- a/code/presets/react-webpack/src/index.ts +++ b/code/presets/react-webpack/src/index.ts @@ -3,7 +3,6 @@ import type { PresetProperty } from '@storybook/types'; export * from './types'; export const addons: PresetProperty<'addons'> = [ - require.resolve('@storybook/preset-react-webpack/dist/framework-preset-react'), require.resolve('@storybook/preset-react-webpack/dist/framework-preset-cra'), require.resolve('@storybook/preset-react-webpack/dist/framework-preset-react-docs'), ]; diff --git a/code/presets/react-webpack/src/types.ts b/code/presets/react-webpack/src/types.ts index 9301264955e8..22cccf97501f 100644 --- a/code/presets/react-webpack/src/types.ts +++ b/code/presets/react-webpack/src/types.ts @@ -8,7 +8,6 @@ import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/r export type { BuilderResult } from '@storybook/core-webpack'; export interface ReactOptions { - fastRefresh?: boolean; strictMode?: boolean; /** * Use React's legacy root API to mount components diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md index 8efe4b5dac8c..6c38d3f7abc3 100644 --- a/docs/configure/frameworks.md +++ b/docs/configure/frameworks.md @@ -40,7 +40,6 @@ Every modern web application has unique requirements and relies on various tools | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `nextConfigPath` | Sets the default path for the NextJS configuration file
`framework: { name: '@storybook/nextjs', options: { nextConfigPath: '../next.config.js'} }` | NextJS | | `builder` | Configures [Webpack 5](../builders/webpack.md) builder options for NextJS
`core: { builder: { name:'webpack5', options: { lazyCompilation: true} }}` | NextJS | -| `fastRefresh` | Enables [fast refresh mode](https://www.npmjs.com/package/react-refresh) for React
`framework: { name: '@storybook/react-webpack5', options: { fastRefresh: false } }` | React | | `strictMode` | Enables React's [strict mode](https://reactjs.org/docs/strict-mode.html)
`framework: { name: '@storybook/react-webpack5', options: { strictMode: false } }` | React | | `legacyRootApi` | Requires React 18. Toggles support for React's [legacy root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
`framework: { name: '@storybook/react-webpack5', options: { legacyRootApi: true } }` | React | | `enableIvy` | Enabled by default with Angular 9+. Replaces the default compiler with the [Ivy compiler](https://docs.angular.lat/guide/ivy)
`framework: { name: '@storybook/angular', options: { enableIvy: true } }` | Angular | diff --git a/docs/faq.md b/docs/faq.md index cb0742563f0b..55840449c2fa 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -10,7 +10,6 @@ Here are some answers to frequently asked questions. If you have a question, you - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories) - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs) - [How do I fix module resolution in special environments?](#how-do-i-fix-module-resolution-in-special-environments) -- [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook) - [How do I setup the new React Context Root API with Storybook?](#how-do-i-setup-the-new-react-context-root-api-with-storybook) - [Why is there no addons channel?](#why-is-there-no-addons-channel) - [Why aren't Controls visible in the Canvas panel but visible in Docs?](#why-arent-controls-visible-in-the-canvas-panel-but-visible-in-docs) @@ -133,36 +132,6 @@ To fix this, you can wrap the package name inside your Storybook configuration f -## How do I setup React Fast Refresh with Storybook? - -Fast refresh is an opt-in feature that can be used in Storybook React. -There are two ways that you can enable it, go ahead and pick one: - -- You can set a `FAST_REFRESH` environment variable in your `.env` file: - -``` -FAST_REFRESH=true -``` - -- Or you can set the following properties in your `.storybook/main.js` files: - -```js -export default { - framework: { - name: '@storybook/react-webpack5', - options: { - fastRefresh: true, - }, - }, -}; -``` - - - -Fast Refresh only works in development mode with React 16.10 or higher. - - - ## How do I setup the new React Context Root API with Storybook? If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used. From ce4f3090f220df835f06c7e0accdb2c2cdc2225f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 15:21:09 +0100 Subject: [PATCH 033/265] Remove deprecated code --- code/presets/create-react-app/package.json | 6 +----- code/presets/create-react-app/src/index.ts | 18 +----------------- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 13411ebf33a6..73510cad1cce 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -50,12 +50,9 @@ }, "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", - "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@storybook/types": "workspace:*", - "@types/babel__core": "^7.1.7", "@types/semver": "^7.3.4", - "pnp-webpack-plugin": "^1.7.0", - "semver": "^7.3.5" + "pnp-webpack-plugin": "^1.7.0" }, "devDependencies": { "@storybook/node-logger": "workspace:*", @@ -63,7 +60,6 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "@babel/core": "*", "react-scripts": ">=5.0.0" }, "publishConfig": { diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts index a5e16a31ecb4..48bde3883620 100644 --- a/code/presets/create-react-app/src/index.ts +++ b/code/presets/create-react-app/src/index.ts @@ -1,10 +1,8 @@ /* eslint-disable import/no-extraneous-dependencies */ import { join, relative, dirname } from 'path'; import type { Configuration, RuleSetRule, WebpackPluginInstance } from 'webpack'; -import semver from 'semver'; import { logger } from '@storybook/node-logger'; import PnpWebpackPlugin from 'pnp-webpack-plugin'; -import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; import { mergePlugins } from './helpers/mergePlugins'; import { getReactScriptsPath } from './helpers/getReactScriptsPath'; import { processCraConfig } from './helpers/processCraConfig'; @@ -89,19 +87,6 @@ const webpack = async ( logger.info(`=> Modifying Create React App rules.`); const craRules = await processCraConfig(craWebpackConfig, options); - // NOTE: These are set by default in Storybook 6. - const isStorybook6 = semver.gte(options.packageJson.version || '', '6.0.0'); - const { - typescriptOptions = { - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: {}, - }, - } = options; - const tsDocgenPlugin = - !isStorybook6 && typescriptOptions.reactDocgen === 'react-docgen-typescript' - ? [new ReactDocgenTypescriptPlugin(typescriptOptions.reactDocgenTypescriptOptions)] - : []; - // NOTE: This is code replicated from // https://github.com/storybookjs/storybook/blob/89830ad76384faeaeb0c19df3cb44232cdde261b/builders/builder-webpack5/src/preview/base-webpack.config.ts#L45-L53 // as we are not applying SB's default webpack config here. @@ -130,8 +115,7 @@ const webpack = async ( // when there are duplicates between SB and CRA plugins: mergePlugins( ...((webpackConfig.plugins ?? []) as WebpackPluginInstance[]), - ...((craWebpackConfig.plugins ?? []) as WebpackPluginInstance[]), - ...tsDocgenPlugin + ...((craWebpackConfig.plugins ?? []) as WebpackPluginInstance[]) ), resolve: { ...webpackConfig.resolve, From 83a025427fdb2648a68916f0e846977d4354e59d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 28 Dec 2023 16:08:03 +0100 Subject: [PATCH 034/265] Update lock file --- code/yarn.lock | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 44862e0b196e..7d9bc145eec7 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -415,7 +415,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.23.6, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": version: 7.23.6 resolution: "@babel/core@npm:7.23.6" dependencies: @@ -4148,7 +4148,7 @@ __metadata: languageName: node linkType: hard -"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1, @pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": +"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1": version: 0.5.11 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11" dependencies: @@ -5654,7 +5654,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/core": "npm:7.23.6" "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -6007,7 +6006,7 @@ __metadata: preact: "npm:^10.5.13" typescript: "npm:^5.3.2" peerDependencies: - preact: ^8.0.0||^10.0.0 + preact: ">=10.0.0" languageName: unknown linkType: soft @@ -6032,12 +6031,10 @@ __metadata: dependencies: "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.1" "@storybook/node-logger": "workspace:*" - "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" pnp-webpack-plugin: "npm:^1.7.0" - semver: "npm:^7.3.5" typescript: "npm:^5.3.2" peerDependencies: react-scripts: ">=5.0.0" @@ -6073,7 +6070,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" dependencies: - "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/node-logger": "workspace:*" @@ -6084,7 +6080,6 @@ __metadata: fs-extra: "npm:^11.1.0" magic-string: "npm:^0.30.5" react-docgen: "npm:^7.0.0" - react-refresh: "npm:^0.14.0" semver: "npm:^7.3.7" typescript: "npm:^5.3.2" webpack: "npm:5" From 5023619d9618de540c483fc47bf46f96b9c27922 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 10:32:04 +0100 Subject: [PATCH 035/265] Add custom babel-loader to Next.js --- code/frameworks/nextjs/package.json | 1 + code/frameworks/nextjs/src/babel/loader.ts | 24 ++++++++++++++++++++++ code/frameworks/nextjs/src/preset.ts | 19 ++++++++++------- code/frameworks/nextjs/src/swc/loader.ts | 7 +------ code/yarn.lock | 3 ++- 5 files changed, 40 insertions(+), 14 deletions(-) create mode 100644 code/frameworks/nextjs/src/babel/loader.ts diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index ed10bbe5c119..4b2a7b826abf 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -99,6 +99,7 @@ "@storybook/react": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", + "babel-loader": "^9.1.3", "css-loader": "^6.7.3", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts new file mode 100644 index 000000000000..bed72b3dea46 --- /dev/null +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -0,0 +1,24 @@ +import { getProjectRoot } from '@storybook/core-common'; +import { getVirtualModules } from '@storybook/builder-webpack5'; +import type { Options } from '@storybook/types'; + +export const configureBabelLoader = async (baseConfig: any, options: Options) => { + const { virtualModules } = await getVirtualModules(options); + + const babelOptions = await options.presets.apply('babel', {}, options); + const typescriptOptions = await options.presets.apply('typescript', {}, options); + + baseConfig.module.rules = [ + { + test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: babelOptions, + }, + ], + include: [getProjectRoot()], + exclude: [/node_modules/, ...Object.keys(virtualModules)], + }, + ]; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 5ee5e2e319a5..116627b1cf34 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -4,6 +4,7 @@ import type { PresetProperty } from '@storybook/types'; import type { ConfigItem, PluginItem } from '@babel/core'; import { loadPartialConfig } from '@babel/core'; import { getProjectRoot } from '@storybook/core-common'; +import fs from 'fs'; import { configureConfig } from './config/webpack'; import { configureCss } from './css/webpack'; import { configureImports } from './imports/webpack'; @@ -17,6 +18,7 @@ import { configureNextFont } from './font/webpack/configureNextFont'; import nextBabelPreset from './babel/preset'; import { configureNodePolyfills } from './nodePolyfills/webpack'; import { configureSWCLoader } from './swc/loader'; +import { configureBabelLoader } from './babel/loader'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -78,9 +80,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( return result; }; -// Not even sb init - automigrate - running dev -// You're using a version of Nextjs prior to v10, which is unsupported by this framework. - export const babel: PresetProperty<'babel'> = async (baseConfig) => { const configPartial = loadPartialConfig({ ...baseConfig, @@ -141,14 +140,19 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( 'frameworkOptions' ); - const { options: { nextConfigPath, builder } = {} } = frameworkOptions; + const { options: { nextConfigPath } = {} } = frameworkOptions; const nextConfig = await configureConfig({ baseConfig, nextConfigPath, configDir: options.configDir, }); - configureNextFont(baseConfig, builder?.useSWC); + const babelRCPath = join(getProjectRoot(), '.babelrc'); + const hasBabelConfig = fs.existsSync(babelRCPath); + + const useSWC = nextConfig.experimental?.forceSwcTransforms ?? hasBabelConfig; + + configureNextFont(baseConfig, useSWC); configureRuntimeNextjsVersionResolution(baseConfig); configureImports({ baseConfig, configDir: options.configDir }); configureCss(baseConfig, nextConfig); @@ -160,9 +164,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureRSC(baseConfig); } - // TODO: In Storybook 8.0, we have to check whether the babel-compiler addon is used. Otherwise, swc should be used. - if (builder?.useSWC) { + if (useSWC) { await configureSWCLoader(baseConfig, options, nextConfig); + } else { + await configureBabelLoader(baseConfig, options); } return baseConfig; diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 2d25ce1be28f..cfc6c322380b 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -3,7 +3,6 @@ import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; -import type { RuleSetRule } from 'webpack'; export const configureSWCLoader = async ( baseConfig: any, @@ -17,12 +16,8 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); baseConfig.module.rules = [ - // TODO: Remove filtering in Storybook 8.0 - ...baseConfig.module.rules.filter((r: RuleSetRule) => { - return !r.loader?.includes('swc-loader'); - }), { - test: /\.(m?(j|t)sx?)$/, + test: /\.((c|m)?(j|t)sx?)$/, include: [getProjectRoot()], exclude: [/(node_modules)/, ...Object.keys(virtualModules)], enforce: 'post', diff --git a/code/yarn.lock b/code/yarn.lock index 7d9bc145eec7..a2b59c2f0dba 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5931,6 +5931,7 @@ __metadata: "@types/loader-utils": "npm:^2.0.5" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" + babel-loader: "npm:^9.1.3" css-loader: "npm:^6.7.3" find-up: "npm:^5.0.0" fs-extra: "npm:^11.1.0" @@ -9889,7 +9890,7 @@ __metadata: languageName: node linkType: hard -"babel-loader@npm:9.1.3": +"babel-loader@npm:9.1.3, babel-loader@npm:^9.1.3": version: 9.1.3 resolution: "babel-loader@npm:9.1.3" dependencies: From 75a093716067a5262126f7646976f5affd9a7538 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 11:36:48 +0100 Subject: [PATCH 036/265] Readd babel-plugin-react-docgen for testing purposes --- code/lib/docs-tools/package.json | 1 + code/renderers/react/package.json | 2 + code/yarn.lock | 157 ++++++++++++++++++++++++------ 3 files changed, 131 insertions(+), 29 deletions(-) diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 8bc90fac3e44..0a0f9d0bd87b 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -53,6 +53,7 @@ "lodash": "^4.17.21" }, "devDependencies": { + "babel-plugin-react-docgen": "4.2.1", "require-from-string": "^2.0.2", "typescript": "^5.3.2" }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 08b885f3fecb..47ce3d563aa3 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -70,7 +70,9 @@ }, "devDependencies": { "@storybook/test": "workspace:*", + "@types/babel-plugin-react-docgen": "^4", "@types/util-deprecate": "^1.0.0", + "babel-plugin-react-docgen": "^4.2.1", "expect-type": "^0.15.0", "require-from-string": "^2.0.2" }, diff --git a/code/yarn.lock b/code/yarn.lock index a2b59c2f0dba..acc4ba37c9ed 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -415,7 +415,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.23.6 resolution: "@babel/core@npm:7.23.6" dependencies: @@ -450,7 +450,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.6": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -2202,43 +2202,43 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": - version: 7.23.2 - resolution: "@babel/traverse@npm:7.23.2" +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.23.6": + version: 7.23.6 + resolution: "@babel/traverse@npm:7.23.6" dependencies: - "@babel/code-frame": "npm:^7.22.13" - "@babel/generator": "npm:^7.23.0" + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" - debug: "npm:^4.1.0" + "@babel/parser": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff + checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d languageName: node linkType: hard -"@babel/traverse@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/traverse@npm:7.23.6" +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": + version: 7.23.2 + resolution: "@babel/traverse@npm:7.23.2" dependencies: - "@babel/code-frame": "npm:^7.23.5" - "@babel/generator": "npm:^7.23.6" + "@babel/code-frame": "npm:^7.22.13" + "@babel/generator": "npm:^7.23.0" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.6" - "@babel/types": "npm:^7.23.6" - debug: "npm:^4.3.1" + "@babel/parser": "npm:^7.23.0" + "@babel/types": "npm:^7.23.0" + debug: "npm:^4.1.0" globals: "npm:^11.1.0" - checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d + checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" dependencies: @@ -3307,7 +3307,7 @@ __metadata: languageName: node linkType: hard -"@istanbuljs/schema@npm:^0.1.2": +"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3": version: 0.1.3 resolution: "@istanbuljs/schema@npm:0.1.3" checksum: 61c5286771676c9ca3eb2bd8a7310a9c063fb6e0e9712225c8471c582d157392c88f5353581c8c9adbe0dff98892317d2fdfc56c3499aa42e0194405206a963a @@ -5659,6 +5659,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" assert: "npm:^2.1.0" + babel-plugin-react-docgen: "npm:4.2.1" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" require-from-string: "npm:^2.0.2" @@ -6268,6 +6269,7 @@ __metadata: "@storybook/react-dom-shim": "workspace:*" "@storybook/test": "workspace:*" "@storybook/types": "workspace:*" + "@types/babel-plugin-react-docgen": "npm:^4" "@types/escodegen": "npm:^0.0.6" "@types/estree": "npm:^0.0.51" "@types/node": "npm:^18.0.0" @@ -6275,6 +6277,7 @@ __metadata: acorn: "npm:^7.4.1" acorn-jsx: "npm:^5.3.1" acorn-walk: "npm:^7.2.0" + babel-plugin-react-docgen: "npm:^4.2.1" escodegen: "npm:^2.1.0" expect-type: "npm:^0.15.0" html-tags: "npm:^3.1.0" @@ -7207,6 +7210,13 @@ __metadata: languageName: node linkType: hard +"@types/babel-plugin-react-docgen@npm:^4": + version: 4.2.3 + resolution: "@types/babel-plugin-react-docgen@npm:4.2.3" + checksum: 4f18ab888a5268076e1b09345b39cf6b378cf780e38dadad554101782bb365018f6f630acd6fc2990f35131490d3e1bdea338447d2dc6e991e97442420e767ce + languageName: node + linkType: hard + "@types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" @@ -9704,7 +9714,7 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.14.2, ast-types@npm:^0.14.1": +"ast-types@npm:0.14.2, ast-types@npm:^0.14.1, ast-types@npm:^0.14.2": version: 0.14.2 resolution: "ast-types@npm:0.14.2" dependencies: @@ -10015,6 +10025,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-react-docgen@npm:4.2.1, babel-plugin-react-docgen@npm:^4.2.1": + version: 4.2.1 + resolution: "babel-plugin-react-docgen@npm:4.2.1" + dependencies: + ast-types: "npm:^0.14.2" + lodash: "npm:^4.17.15" + react-docgen: "npm:^5.0.0" + checksum: 9f7af20e6ebd794beae14aa1ffe4f1c1c5855821a5a9f205099602c89b557e33b9cb3dc3fe0b3a2f2ca35007c6ab45f52da9695a681d8495ad0f5494ef78ec34 + languageName: node + linkType: hard + "babel-plugin-transform-hook-names@npm:^1.0.2": version: 1.0.2 resolution: "babel-plugin-transform-hook-names@npm:1.0.2" @@ -10830,6 +10851,28 @@ __metadata: languageName: node linkType: hard +"c8@npm:^7.6.0": + version: 7.14.0 + resolution: "c8@npm:7.14.0" + dependencies: + "@bcoe/v8-coverage": "npm:^0.2.3" + "@istanbuljs/schema": "npm:^0.1.3" + find-up: "npm:^5.0.0" + foreground-child: "npm:^2.0.0" + istanbul-lib-coverage: "npm:^3.2.0" + istanbul-lib-report: "npm:^3.0.0" + istanbul-reports: "npm:^3.1.4" + rimraf: "npm:^3.0.2" + test-exclude: "npm:^6.0.0" + v8-to-istanbul: "npm:^9.0.0" + yargs: "npm:^16.2.0" + yargs-parser: "npm:^20.2.9" + bin: + c8: bin/c8.js + checksum: 8946f55f2dcc85bf146f429a3deeede78502da245e515a2d181342475d8d8698b4055ec1d9b887ab8e1615f49c1a2af4d63557e68b2005844572fb785991e148 + languageName: node + linkType: hard + "cac@npm:^6.7.14": version: 6.7.14 resolution: "cac@npm:6.7.14" @@ -11590,7 +11633,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^2.18.0, commander@npm:^2.2.0, commander@npm:^2.20.0": +"commander@npm:^2.18.0, commander@npm:^2.19.0, commander@npm:^2.2.0, commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" checksum: 74c781a5248c2402a0a3e966a0a2bba3c054aad144f5c023364be83265e796b20565aa9feff624132ff629aa64e16999fa40a743c10c12f7c61e96a794b99288 @@ -14209,6 +14252,17 @@ __metadata: languageName: node linkType: hard +"estree-to-babel@npm:^3.1.0": + version: 3.2.1 + resolution: "estree-to-babel@npm:3.2.1" + dependencies: + "@babel/traverse": "npm:^7.1.6" + "@babel/types": "npm:^7.2.0" + c8: "npm:^7.6.0" + checksum: c7949b141f569528b2608ab715d593a04f7e2e529df04e0b595d0a7dea819b410e71d1f04716e43ac1480942afc5701cb5151ad2906ee8402969651a389881bb + languageName: node + linkType: hard + "estree-util-is-identifier-name@npm:^2.0.0": version: 2.1.0 resolution: "estree-util-is-identifier-name@npm:2.1.0" @@ -15049,6 +15103,16 @@ __metadata: languageName: node linkType: hard +"foreground-child@npm:^2.0.0": + version: 2.0.0 + resolution: "foreground-child@npm:2.0.0" + dependencies: + cross-spawn: "npm:^7.0.0" + signal-exit: "npm:^3.0.2" + checksum: 6719982783a448162f9a01500757fb2053bc5dcd4d67c7cd30739b38ccc01b39f84e408c30989d1d8774519c021c0498e2450ab127690fb09d7f2568fd94ffcc + languageName: node + linkType: hard + "foreground-child@npm:^3.1.0": version: 3.1.1 resolution: "foreground-child@npm:3.1.1" @@ -17634,7 +17698,7 @@ __metadata: languageName: node linkType: hard -"istanbul-reports@npm:^3.1.6": +"istanbul-reports@npm:^3.1.4, istanbul-reports@npm:^3.1.6": version: 3.1.6 resolution: "istanbul-reports@npm:3.1.6" dependencies: @@ -20652,7 +20716,7 @@ __metadata: languageName: node linkType: hard -"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2": +"neo-async@npm:^2.5.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2": version: 2.6.2 resolution: "neo-async@npm:2.6.2" checksum: c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d @@ -20784,7 +20848,7 @@ __metadata: languageName: node linkType: hard -"node-dir@npm:^0.1.17": +"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" dependencies: @@ -23268,6 +23332,26 @@ __metadata: languageName: node linkType: hard +"react-docgen@npm:^5.0.0": + version: 5.4.3 + resolution: "react-docgen@npm:5.4.3" + dependencies: + "@babel/core": "npm:^7.7.5" + "@babel/generator": "npm:^7.12.11" + "@babel/runtime": "npm:^7.7.6" + ast-types: "npm:^0.14.2" + commander: "npm:^2.19.0" + doctrine: "npm:^3.0.0" + estree-to-babel: "npm:^3.1.0" + neo-async: "npm:^2.6.1" + node-dir: "npm:^0.1.10" + strip-indent: "npm:^3.0.0" + bin: + react-docgen: bin/react-docgen.js + checksum: c920e9611e08317f8fdae707114cf02baaa18e2f1bd23ed18f57e66b9e1042e51dc98cc9de828b03d018ccc4e26300c9a6c4f74e862fc94dc64029267c801a01 + languageName: node + linkType: hard + "react-docgen@npm:^7.0.0": version: 7.0.1 resolution: "react-docgen@npm:7.0.1" @@ -27954,7 +28038,7 @@ __metadata: languageName: node linkType: hard -"v8-to-istanbul@npm:^9.2.0": +"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.2.0": version: 9.2.0 resolution: "v8-to-istanbul@npm:9.2.0" dependencies: @@ -29304,7 +29388,7 @@ __metadata: languageName: node linkType: hard -"yargs-parser@npm:^20.2.2": +"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.9": version: 20.2.9 resolution: "yargs-parser@npm:20.2.9" checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72 @@ -29378,6 +29462,21 @@ __metadata: languageName: node linkType: hard +"yargs@npm:^16.2.0": + version: 16.2.0 + resolution: "yargs@npm:16.2.0" + dependencies: + cliui: "npm:^7.0.2" + escalade: "npm:^3.1.1" + get-caller-file: "npm:^2.0.5" + require-directory: "npm:^2.1.1" + string-width: "npm:^4.2.0" + y18n: "npm:^5.0.5" + yargs-parser: "npm:^20.2.2" + checksum: b1dbfefa679848442454b60053a6c95d62f2d2e21dd28def92b647587f415969173c6e99a0f3bab4f1b67ee8283bf735ebe3544013f09491186ba9e8a9a2b651 + languageName: node + linkType: hard + "yn@npm:3.1.1": version: 3.1.1 resolution: "yn@npm:3.1.1" From c1d748ae4c2cca49463d620b6fadff97c2da01de Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 11:40:27 +0100 Subject: [PATCH 037/265] Only use swc mode in Next.js for version gte 14 --- code/frameworks/nextjs/src/preset.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 116627b1cf34..fe2b2040aae8 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -5,13 +5,14 @@ import type { ConfigItem, PluginItem } from '@babel/core'; import { loadPartialConfig } from '@babel/core'; import { getProjectRoot } from '@storybook/core-common'; import fs from 'fs'; +import semver from 'semver'; import { configureConfig } from './config/webpack'; import { configureCss } from './css/webpack'; import { configureImports } from './imports/webpack'; import { configureStyledJsx } from './styledJsx/webpack'; import { configureImages } from './images/webpack'; import { configureRSC } from './rsc/webpack'; -import { configureRuntimeNextjsVersionResolution } from './utils'; +import { configureRuntimeNextjsVersionResolution, getNextjsVersion } from './utils'; import type { FrameworkOptions, StorybookConfig } from './types'; import TransformFontImports from './font/babel'; import { configureNextFont } from './font/webpack/configureNextFont'; @@ -149,8 +150,11 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const babelRCPath = join(getProjectRoot(), '.babelrc'); const hasBabelConfig = fs.existsSync(babelRCPath); + const nextjsVersion = getNextjsVersion(); - const useSWC = nextConfig.experimental?.forceSwcTransforms ?? hasBabelConfig; + const isNext14orNewer = semver.gte(nextjsVersion, '14.0.0'); + const useSWC = + isNext14orNewer && (nextConfig.experimental?.forceSwcTransforms ?? !hasBabelConfig); configureNextFont(baseConfig, useSWC); configureRuntimeNextjsVersionResolution(baseConfig); From df14928923e1d04973997b94a93c9adf1109159b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 12:48:48 +0100 Subject: [PATCH 038/265] Readd webpack module.rules to babel and swc loader configuration --- code/frameworks/nextjs/src/babel/loader.ts | 1 + code/frameworks/nextjs/src/swc/loader.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts index bed72b3dea46..90d383ea332c 100644 --- a/code/frameworks/nextjs/src/babel/loader.ts +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -9,6 +9,7 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) => const typescriptOptions = await options.presets.apply('typescript', {}, options); baseConfig.module.rules = [ + ...baseConfig.module.rules, { test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, use: [ diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index cfc6c322380b..de7e476ca401 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -16,6 +16,7 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); baseConfig.module.rules = [ + ...baseConfig.module.rules, { test: /\.((c|m)?(j|t)sx?)$/, include: [getProjectRoot()], From f164cd159acd718be211c06366308c673df3e16f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 12:56:44 +0100 Subject: [PATCH 039/265] Fix build step --- code/frameworks/nextjs/package.json | 1 + code/frameworks/nextjs/src/preset.ts | 4 ++-- code/presets/preact-webpack/src/index.ts | 1 + code/presets/react-webpack/package.json | 1 - code/yarn.lock | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4b2a7b826abf..7a7b443fc162 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -97,6 +97,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/types": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.1.3", diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index fe2b2040aae8..cce426e8b1e4 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -1,7 +1,7 @@ // https://storybook.js.org/docs/react/addons/writing-presets import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; -import type { ConfigItem, PluginItem } from '@babel/core'; +import type { ConfigItem, PluginItem, TransformOptions } from '@babel/core'; import { loadPartialConfig } from '@babel/core'; import { getProjectRoot } from '@storybook/core-common'; import fs from 'fs'; @@ -81,7 +81,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( return result; }; -export const babel: PresetProperty<'babel'> = async (baseConfig) => { +export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOptions) => { const configPartial = loadPartialConfig({ ...baseConfig, filename: `${getProjectRoot()}/__fake__.js`, diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts index 74240af2255c..ad2b259fd6ad 100644 --- a/code/presets/preact-webpack/src/index.ts +++ b/code/presets/preact-webpack/src/index.ts @@ -1,4 +1,5 @@ import { dirname, join } from 'path'; +import type { PresetProperty } from 'lib/types/dist'; import type { StorybookConfig } from './types'; export * from './types'; diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index eab6e3eb3475..b80bb48d3416 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -100,7 +100,6 @@ "./src/index.ts", "./src/framework-preset-cra.ts", "./src/framework-preset-react-docs.ts", - "./src/framework-preset-react.ts", "./src/loaders/react-docgen-loader.ts" ], "platform": "node" diff --git a/code/yarn.lock b/code/yarn.lock index acc4ba37c9ed..7b74a1f9ce4d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5926,6 +5926,7 @@ __metadata: "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/types": "workspace:*" "@types/babel__core": "npm:^7" "@types/babel__plugin-transform-runtime": "npm:^7" "@types/babel__preset-env": "npm:^7" From ec5c571432e2eff595d1a013cb47f9b8c6837d7d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 29 Dec 2023 14:30:03 +0100 Subject: [PATCH 040/265] Implement fast refresh for Next.js --- code/frameworks/nextjs/package.json | 3 +++ code/frameworks/nextjs/src/babel/preset.ts | 1 + .../nextjs/src/fastRefresh/webpack.ts | 13 +++++++++++++ code/frameworks/nextjs/src/preset.ts | 6 ++++++ code/frameworks/nextjs/src/swc/loader.ts | 2 +- code/yarn.lock | 17 +++++++++++++++-- 6 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 code/frameworks/nextjs/src/fastRefresh/webpack.ts diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7a7b443fc162..bd7cce325470 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -89,6 +89,7 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.2", "@babel/runtime": "^7.23.2", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", @@ -110,6 +111,7 @@ "pnp-webpack-plugin": "^1.7.0", "postcss": "^8.4.21", "postcss-loader": "^7.0.2", + "react-refresh": "^0.14.0", "resolve-url-loader": "^5.0.0", "sass-loader": "^12.4.0", "semver": "^7.3.5", @@ -126,6 +128,7 @@ "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", "@types/loader-utils": "^2.0.5", + "@types/react-refresh": "^0", "next": "^14.0.2", "typescript": "^5.3.2", "webpack": "^5.65.0" diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts index 46dddd1d1659..c21e7e281caf 100644 --- a/code/frameworks/nextjs/src/babel/preset.ts +++ b/code/frameworks/nextjs/src/babel/preset.ts @@ -120,6 +120,7 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset => ], ], plugins: [ + isDevelopment && require.resolve('react-refresh/babel'), !useJsxRuntime && [ require('./plugins/jsx-pragma'), { diff --git a/code/frameworks/nextjs/src/fastRefresh/webpack.ts b/code/frameworks/nextjs/src/fastRefresh/webpack.ts new file mode 100644 index 000000000000..83e91518383d --- /dev/null +++ b/code/frameworks/nextjs/src/fastRefresh/webpack.ts @@ -0,0 +1,13 @@ +import type { Configuration as WebpackConfig } from 'webpack'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; + +export const configureFastRefresh = (baseConfig: WebpackConfig): void => { + baseConfig.plugins = [ + ...(baseConfig.plugins ?? []), + new ReactRefreshWebpackPlugin({ + overlay: { + sockIntegration: 'whm', + }, + }), + ]; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index cce426e8b1e4..da332d81e4ef 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -20,6 +20,7 @@ import nextBabelPreset from './babel/preset'; import { configureNodePolyfills } from './nodePolyfills/webpack'; import { configureSWCLoader } from './swc/loader'; import { configureBabelLoader } from './babel/loader'; +import { configureFastRefresh } from './fastRefresh/webpack'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -151,6 +152,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const babelRCPath = join(getProjectRoot(), '.babelrc'); const hasBabelConfig = fs.existsSync(babelRCPath); const nextjsVersion = getNextjsVersion(); + const isDevelopment = options.configType !== 'PRODUCTION'; const isNext14orNewer = semver.gte(nextjsVersion, '14.0.0'); const useSWC = @@ -164,6 +166,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); + if (isDevelopment) { + configureFastRefresh(baseConfig); + } + if (options.features?.experimentalNextRSC) { configureRSC(baseConfig); } diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index de7e476ca401..255305d0b713 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -31,7 +31,7 @@ export const configureSWCLoader = async ( rootDir: dir, pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, - hasReactRefresh: false, + hasReactRefresh: isDevelopment, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/yarn.lock b/code/yarn.lock index 7b74a1f9ce4d..c5ba2b8e9500 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4148,7 +4148,7 @@ __metadata: languageName: node linkType: hard -"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1": +"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1, @pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": version: 0.5.11 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11" dependencies: @@ -5918,6 +5918,7 @@ __metadata: "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" + "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" @@ -5932,6 +5933,7 @@ __metadata: "@types/babel__preset-env": "npm:^7" "@types/loader-utils": "npm:^2.0.5" "@types/node": "npm:^18.0.0" + "@types/react-refresh": "npm:^0" "@types/semver": "npm:^7.3.4" babel-loader: "npm:^9.1.3" css-loader: "npm:^6.7.3" @@ -5944,6 +5946,7 @@ __metadata: pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" postcss-loader: "npm:^7.0.2" + react-refresh: "npm:^0.14.0" resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" @@ -7218,7 +7221,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": +"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -7932,6 +7935,16 @@ __metadata: languageName: node linkType: hard +"@types/react-refresh@npm:^0": + version: 0.14.5 + resolution: "@types/react-refresh@npm:0.14.5" + dependencies: + "@types/babel__core": "npm:*" + csstype: "npm:^3.0.2" + checksum: 7fc9e1a2b5bc096ba2259b5df9dc036b330d1791bb9fc27b6426db7f2c86be42449713e09f0244d82ecdf596c45bead8feccac032ef0efe4853cb2086ee1ffbe + languageName: node + linkType: hard + "@types/react-syntax-highlighter@npm:11.0.5": version: 11.0.5 resolution: "@types/react-syntax-highlighter@npm:11.0.5" From b03d4830c3d8dffcbdbce60a559a22acb1338447 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 12:48:56 +0100 Subject: [PATCH 041/265] Add custom babel-loader to Ember.js --- code/frameworks/ember/package.json | 9 +- code/frameworks/ember/src/preset.ts | 32 +- .../server/framework-preset-babel-ember.ts | 55 ++++ code/yarn.lock | 296 ++++++++++-------- 4 files changed, 257 insertions(+), 135 deletions(-) create mode 100644 code/frameworks/ember/src/server/framework-preset-babel-ember.ts diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index f8b74eceeb04..4c80543bd856 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -32,23 +32,26 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { + "@babel/core": "^7.23.7", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", + "babel-loader": "9.1.3", + "babel-plugin-ember-modules-api-polyfill": "^3.5.0", + "babel-plugin-htmlbars-inline-precompile": "^5.3.1", "find-up": "^5.0.0", "ts-dedent": "^2.0.0" }, "devDependencies": { + "@types/babel__preset-env": "^7", "ember-source": "~3.28.1", "typescript": "^5.3.2" }, "peerDependencies": { - "ember-source": "~3.28.1 || ^4.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "ember-source": "~3.28.1 || ^4.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 1638022a7856..00b3d2bd1564 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -1,17 +1,43 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; +import { getVirtualModules } from '@storybook/builder-webpack5'; +import { getProjectRoot } from '@storybook/core-common'; import type { StorybookConfig } from './types'; -import { findDistFile } from './util'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; export const addons: PresetProperty<'addons'> = [ + require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs'), ]; -export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - return [...entry, findDistFile(__dirname, 'client/preview/config')]; +export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => { + const { virtualModules } = await getVirtualModules(options); + + const babelOptions = await options.presets.apply('babel', {}, options); + const typescriptOptions = await options.presets.apply('typescript', {}, options); + + return { + ...baseConfig, + module: { + ...baseConfig.module, + rules: [ + ...(baseConfig.module?.rules ?? []), + { + test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/, + use: [ + { + loader: require.resolve('babel-loader'), + options: babelOptions, + }, + ], + include: [getProjectRoot()], + exclude: [/node_modules/, ...Object.keys(virtualModules)], + }, + ], + }, + }; }; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { diff --git a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts new file mode 100644 index 000000000000..da5a524cc796 --- /dev/null +++ b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts @@ -0,0 +1,55 @@ +import { precompile } from 'ember-source/dist/ember-template-compiler'; +import type { PresetProperty, PresetPropertyFn } from '@storybook/types'; +import type { TransformOptions } from '@babel/core'; +import { findDistFile } from '../util'; + +let emberOptions: any; + +function precompileWithPlugins(string: string, options: any) { + const precompileOptions: any = options; + if (emberOptions && emberOptions.polyfills) { + precompileOptions.plugins = { ast: emberOptions.polyfills }; + } + + return precompile(string, precompileOptions); +} + +export const babel: PresetPropertyFn<'babel'> = (config: TransformOptions, options) => { + if (options && options.presetsList) { + options.presetsList.forEach((e: any, index: number) => { + if (e.preset && e.preset.emberOptions) { + emberOptions = e.preset.emberOptions; + if (options.presetsList) { + // eslint-disable-next-line no-param-reassign + delete options.presetsList[index].preset.emberOptions; + } + } + }); + } + + const babelConfigPlugins = config?.plugins || []; + + const extraPlugins = [ + [ + require.resolve('babel-plugin-htmlbars-inline-precompile'), + { + precompile: precompileWithPlugins, + modules: { + 'ember-cli-htmlbars': 'hbs', + 'ember-cli-htmlbars-inline-precompile': 'default', + 'htmlbars-inline-precompile': 'default', + }, + }, + ], + [require.resolve('babel-plugin-ember-modules-api-polyfill')], + ]; + + return { + ...config, + plugins: [...babelConfigPlugins, ...extraPlugins], + }; +}; + +export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { + return [...entry, findDistFile(__dirname, 'client/preview/config')]; +}; diff --git a/code/yarn.lock b/code/yarn.lock index c5ba2b8e9500..c29697995fbe 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -392,7 +392,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.23.2, @babel/core@npm:^7.23.2": +"@babel/core@npm:7.23.2": version: 7.23.2 resolution: "@babel/core@npm:7.23.2" dependencies: @@ -415,30 +415,30 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": - version: 7.23.6 - resolution: "@babel/core@npm:7.23.6" +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.7, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": + version: 7.23.7 + resolution: "@babel/core@npm:7.23.7" dependencies: "@ampproject/remapping": "npm:^2.2.0" "@babel/code-frame": "npm:^7.23.5" "@babel/generator": "npm:^7.23.6" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helpers": "npm:^7.23.6" + "@babel/helpers": "npm:^7.23.7" "@babel/parser": "npm:^7.23.6" "@babel/template": "npm:^7.22.15" - "@babel/traverse": "npm:^7.23.6" + "@babel/traverse": "npm:^7.23.7" "@babel/types": "npm:^7.23.6" convert-source-map: "npm:^2.0.0" debug: "npm:^4.1.0" gensync: "npm:^1.0.0-beta.2" json5: "npm:^2.2.3" semver: "npm:^6.3.1" - checksum: a02bae7d916029b70706dc301535e1b31e5d216f55d4ee6f64a15825c6b69ee2c14c52a213d1497ec414e925ed4e9d897d41fb0d75df9fea28ed2c0008790e31 + checksum: 38c9934973d384ed83369712978453eac91dc3f22167404dbdb272b64f602e74728a6f37012c53ee57e521b8ae2da60097f050497d9b6a212d28b59cdfb2cd1d languageName: node linkType: hard -"@babel/generator@npm:7.23.0, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2": +"@babel/generator@npm:7.23.0": version: 7.23.0 resolution: "@babel/generator@npm:7.23.0" dependencies: @@ -450,7 +450,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.6": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -493,9 +493,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/helper-create-class-features-plugin@npm:7.23.5" +"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6, @babel/helper-create-class-features-plugin@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/helper-create-class-features-plugin@npm:7.23.7" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-environment-visitor": "npm:^7.22.20" @@ -508,7 +508,7 @@ __metadata: semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0 - checksum: a29bd03725630dcf2f094b7e3fe45c63984e63a5d092ceffec2da9d95c108afcc073863d6e9c0fb944d07f3cde5ebac4bba833473ca96af5e949f7d471154901 + checksum: f594e99f97211bda5530756712751c1c4ce6063bb376f1f38cc540309a086bd0f4b62aff969ddb29e7310e936c2d3745934a2b292c4710be8112e57fbe3f3381 languageName: node linkType: hard @@ -525,9 +525,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.4.3": - version: 0.4.3 - resolution: "@babel/helper-define-polyfill-provider@npm:0.4.3" +"@babel/helper-define-polyfill-provider@npm:^0.4.3, @babel/helper-define-polyfill-provider@npm:^0.4.4": + version: 0.4.4 + resolution: "@babel/helper-define-polyfill-provider@npm:0.4.4" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -536,7 +536,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 0007035157e0d32ee9cb4ca319b89d6f3705523383efe52a59eb3d4dfa2ed08c5147e49c10a6e6d69c15221d89c76c8e5875475d6710fb44a5c37b8e69388e40 + checksum: 60126f5f719b9e2114df62e3bf3ac0797b71d8dc733db60192eb169b004fde72ee309fa5848c5fdfe98b8e8863c46f55e16da5aa8a4e420b4d2670cd0c5dd708 languageName: node linkType: hard @@ -700,25 +700,14 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.23.2": - version: 7.23.2 - resolution: "@babel/helpers@npm:7.23.2" +"@babel/helpers@npm:^7.23.2, @babel/helpers@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/helpers@npm:7.23.7" dependencies: "@babel/template": "npm:^7.22.15" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - checksum: 3a6a939c5277a27486e7c626812f0643b35d1c053ac2eb66911f5ae6c0a4e4bcdd40750eba36b766b0ee8a753484287f50ae56232a5f8f2947116723e44b9e35 - languageName: node - linkType: hard - -"@babel/helpers@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/helpers@npm:7.23.6" - dependencies: - "@babel/template": "npm:^7.22.15" - "@babel/traverse": "npm:^7.23.6" + "@babel/traverse": "npm:^7.23.7" "@babel/types": "npm:^7.23.6" - checksum: df1cf6607676ad36f52f652ec03536f2732d70aef5e76dba5c964e34d49f3c2d3dcf9fb3740db359f53071d74b64606a833d5ba156f79f437f71bfe06e2e7e19 + checksum: f74a61ad28a1bc1fdd9133ad571c07787b66d6db017c707b87c203b0cd06879cea8b33e9c6a8585765a4949efa5df3cc9e19b710fe867f11be38ee29fd4a0488 languageName: node linkType: hard @@ -766,15 +755,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.3" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0 - checksum: 0f43b74741d50e637ba4dcef2786621126fe4da6ccf4ee2e94423ee23f6a04ecd91d458e59764c43e4968be139e5197ee43be8a2fea2c09f0b202a3391e548cc + checksum: 355746e21ad7f43e4f4daef54cfe2ef461ecd19446b2afedd53c39df1bf9aa2eeeeaabee2279b1321de89a97c9360e4f76e9ba950fee50ff1676c25f6929d625 languageName: node linkType: hard @@ -791,17 +780,15 @@ __metadata: linkType: hard "@babel/plugin-proposal-decorators@npm:^7.13.5": - version: 7.23.0 - resolution: "@babel/plugin-proposal-decorators@npm:7.23.0" + version: 7.23.7 + resolution: "@babel/plugin-proposal-decorators@npm:7.23.7" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" + "@babel/helper-create-class-features-plugin": "npm:^7.23.7" "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/plugin-syntax-decorators": "npm:^7.22.10" + "@babel/plugin-syntax-decorators": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 983e7113f9ca3b2ae632869f71accec48cb652d68840697c3977071d44879657ca6b4427ed02e76e448e385d0feca9bd3d40edfaf1530c6c6c25fe8b97d46689 + checksum: 49457b186d3ac5130ed27bc3af1fcfbca495d6e68ad9e800cd0cfefc0720158563db170ca5c99f03cfe12ff2affc088eeaba7d766b2d9c0538e2a85e21e557ed languageName: node linkType: hard @@ -909,14 +896,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-decorators@npm:^7.22.10": - version: 7.22.10 - resolution: "@babel/plugin-syntax-decorators@npm:7.22.10" +"@babel/plugin-syntax-decorators@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-syntax-decorators@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: cf606ef13ed98b3adf560ede27a873c0ab37e884c762a6f15493c881f5a78b67f24dcdd5c70e8cd8f39dbe4b23475cb98619729812f29feb2dcc241130195e7c + checksum: 86299c050b0a5b6565d6b9e3529f2d6dca4780215ab88050bdd0ae9a576868a17f9cd1e140857089cc5d06bdfeb89f0711285f99481b82316896a552a62e449f languageName: node linkType: hard @@ -942,14 +929,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-flow@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-syntax-flow@npm:7.22.5" +"@babel/plugin-syntax-flow@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-syntax-flow@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 07afc7df02141597968532bfbfa3f6c0ad21a2bdd885d0e5e035dcf60fdf35f0995631c9750b464e1a6f2feea14160a82787f914e88e8f7115dc99f09853e43e + checksum: 8a5e1e8b6a3728a2c8fe6d70c09a43642e737d9c0485e1b041cd3a6021ef05376ec3c9137be3b118c622ba09b5770d26fdc525473f8d06d4ab9e46de2783dd0a languageName: node linkType: hard @@ -1144,9 +1131,9 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.2, @babel/plugin-transform-async-generator-functions@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.4" +"@babel/plugin-transform-async-generator-functions@npm:^7.23.2, @babel/plugin-transform-async-generator-functions@npm:^7.23.7": + version: 7.23.7 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.7" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -1154,7 +1141,7 @@ __metadata: "@babel/plugin-syntax-async-generators": "npm:^7.8.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: f2eef4de609975a3f7da7832576b5ffc93e43c80f87e1a99e886b0f8591096cfc4c37e2d5f52fdeaa2a9c09a25a59f3e621159abaca75d3193922a5c0e4cbe0c + checksum: 63d314edc9fbeaf2700745ca0e19bf9840e87f2d7d1f6c5638e06d2aec3e7418d0d7493ed09087e2fe369cc15e9d96c113fb2cd367cb5e3ff922e3712c27b7d4 languageName: node linkType: hard @@ -1332,15 +1319,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-flow-strip-types@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-flow-strip-types@npm:7.22.5" +"@babel/plugin-transform-flow-strip-types@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-transform-flow-strip-types@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/plugin-syntax-flow": "npm:^7.22.5" + "@babel/plugin-syntax-flow": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 5949a8e5214e3fc65d31dab0551423cea9d9eef35faa5d0004707ba7347baf96166aa400907ce7498f754db4e1e9d039ca434a508546b0dc9fdae9a42e814c1a + checksum: 9ab627f9668fc1f95564b26bffd6706f86205960d9ccc168236752fbef65dbe10aa0ce74faae12f48bb3b72ec7f38ef2a78b4874c222c1e85754e981639f3b33 languageName: node linkType: hard @@ -1514,13 +1501,13 @@ __metadata: linkType: hard "@babel/plugin-transform-object-assign@npm:^7.8.3": - version: 7.22.5 - resolution: "@babel/plugin-transform-object-assign@npm:7.22.5" + version: 7.23.3 + resolution: "@babel/plugin-transform-object-assign@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: c80ca956ccc45c68a6f35e8aea80e08c0a653e4baf243727d4258f242d312d71be20e3fad35a1f2cd9d58b30dcbb5cdf5f8d6c6614a3f8c6079d90f9b1dadee6 + checksum: 44467e8bd8eaae3fe54834dac9d1647d2b2598529a90722281832f6905d485c05e37b5fbd6fd7660c5d2e32e6f005824cda8a9321ddac2e2d619536fafc9783c languageName: node linkType: hard @@ -1647,24 +1634,24 @@ __metadata: linkType: hard "@babel/plugin-transform-react-jsx-self@npm:^7.18.6": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-self@npm:7.22.5" + version: 7.23.3 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 263091bdede1f448cb2c59b84eb69972c15d3f022c929a75337bd20d8b65551ac38cd26dad1946eaa93289643506b10ddaea3445a28cb8fca5a773a22a0df90b + checksum: 6b586508fc58998483d4ee93a7e784c4f4d2350e2633739cf1990b7ad172e13906f72382fdaf7f07b4e3c7e7555342634d392bdeb1a079bb64762c6368ca9a32 languageName: node linkType: hard "@babel/plugin-transform-react-jsx-source@npm:^7.19.6": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5" + version: 7.23.3 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: defc9debb76b4295e3617ef7795a0533dbbecef6f51bf5ba4bfc162df892a84fd39e14d5f1b9a5aad7b09b97074fef4c6756f9d2036eef5a9874acabe198f75a + checksum: a3aad7cf738e9bfaddc26cdbb83bb9684c2e689d26fb0793d772af0c8da0cd25bb02523d192fbc6946c32143e56b472c1d33fa82466b3f2d3346e1ce8fe83cf6 languageName: node linkType: hard @@ -1735,18 +1722,18 @@ __metadata: linkType: hard "@babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.23.2": - version: 7.23.6 - resolution: "@babel/plugin-transform-runtime@npm:7.23.6" + version: 7.23.7 + resolution: "@babel/plugin-transform-runtime@npm:7.23.7" dependencies: "@babel/helper-module-imports": "npm:^7.22.15" "@babel/helper-plugin-utils": "npm:^7.22.5" - babel-plugin-polyfill-corejs2: "npm:^0.4.6" - babel-plugin-polyfill-corejs3: "npm:^0.8.5" - babel-plugin-polyfill-regenerator: "npm:^0.5.3" + babel-plugin-polyfill-corejs2: "npm:^0.4.7" + babel-plugin-polyfill-corejs3: "npm:^0.8.7" + babel-plugin-polyfill-regenerator: "npm:^0.5.4" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 94a7ee92f073df53fd8bebf9ed391a95553716077da1c6c3a57f10f042358c938495d55e6b09b4b50544c01f03560c4770c17698e1c24817a15d3668e8231249 + checksum: 0d5038462a5762c3a88d820785f685ce1b659075527a3ad538647fd9ce486052777d5aea3d62e626639d60441a04dd0ded2ed32c86b92cf8afbdbd3d54460c13 languageName: node linkType: hard @@ -1807,16 +1794,16 @@ __metadata: linkType: hard "@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.23.3": - version: 7.23.5 - resolution: "@babel/plugin-transform-typescript@npm:7.23.5" + version: 7.23.6 + resolution: "@babel/plugin-transform-typescript@npm:7.23.6" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.23.5" + "@babel/helper-create-class-features-plugin": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.22.5" "@babel/plugin-syntax-typescript": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 75d6689bfdf4c9462b5fb21107c295717c9bedffe5eae8b22b0a65c9603660683d55e020df83825de13792358043bd939f48efc2b3a293b5210a608076c94934 + checksum: e08f7a981fe157e32031070b92cd77030018b002d063e4be3711ffb7ec04539478b240d8967a4748abb56eccc0ba376f094f30711ef6a028b2a89d15d6ddc01f languageName: node linkType: hard @@ -1968,8 +1955,8 @@ __metadata: linkType: hard "@babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.23.2": - version: 7.23.6 - resolution: "@babel/preset-env@npm:7.23.6" + version: 7.23.7 + resolution: "@babel/preset-env@npm:7.23.7" dependencies: "@babel/compat-data": "npm:^7.23.5" "@babel/helper-compilation-targets": "npm:^7.23.6" @@ -1977,7 +1964,7 @@ __metadata: "@babel/helper-validator-option": "npm:^7.23.5" "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3" "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.3" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7" "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" "@babel/plugin-syntax-class-properties": "npm:^7.12.13" @@ -1998,7 +1985,7 @@ __metadata: "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" "@babel/plugin-transform-arrow-functions": "npm:^7.23.3" - "@babel/plugin-transform-async-generator-functions": "npm:^7.23.4" + "@babel/plugin-transform-async-generator-functions": "npm:^7.23.7" "@babel/plugin-transform-async-to-generator": "npm:^7.23.3" "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3" "@babel/plugin-transform-block-scoping": "npm:^7.23.4" @@ -2046,27 +2033,27 @@ __metadata: "@babel/plugin-transform-unicode-regex": "npm:^7.23.3" "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3" "@babel/preset-modules": "npm:0.1.6-no-external-plugins" - babel-plugin-polyfill-corejs2: "npm:^0.4.6" - babel-plugin-polyfill-corejs3: "npm:^0.8.5" - babel-plugin-polyfill-regenerator: "npm:^0.5.3" + babel-plugin-polyfill-corejs2: "npm:^0.4.7" + babel-plugin-polyfill-corejs3: "npm:^0.8.7" + babel-plugin-polyfill-regenerator: "npm:^0.5.4" core-js-compat: "npm:^3.31.0" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 5b24d179af52f082d04b9b98cc4777e37bf31a97cef5a91d8917e996dbd75f2f743c88c40f80744cb8529355bb674619d150c0260c32d834aa4067e21d0c8962 + checksum: ac9def873cec52ee02a550bde6e22eced16d1ae331bb8ebc82c03e4c91c12ac17e3e4027647e61612937bcc25ac46e71370aaf99dc2e85dbd11f7777ffeed54e languageName: node linkType: hard "@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/preset-flow@npm:7.22.15" + version: 7.23.3 + resolution: "@babel/preset-flow@npm:7.23.3" dependencies: "@babel/helper-plugin-utils": "npm:^7.22.5" "@babel/helper-validator-option": "npm:^7.22.15" - "@babel/plugin-transform-flow-strip-types": "npm:^7.22.5" + "@babel/plugin-transform-flow-strip-types": "npm:^7.23.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 7eef0c84ec1889d6c4f7a67d7d1a81703420eed123a8c23f25af148eead77907f0bd701f3e729fdb37d3ddb2a373bf43938b36a9ba17f546111ddb9521466b92 + checksum: 1cf109925791f2af679f03289848d27596b4f27cb0ad4ee74a8dd4c1cbecc119bdef3b45cbbe12489bc9bdf61163f94c1c0bf6013cc58c325f1cc99edc01bda9 languageName: node linkType: hard @@ -2115,17 +2102,17 @@ __metadata: linkType: hard "@babel/register@npm:^7.13.16, @babel/register@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/register@npm:7.22.15" + version: 7.23.7 + resolution: "@babel/register@npm:7.23.7" dependencies: clone-deep: "npm:^4.0.1" find-cache-dir: "npm:^2.0.0" make-dir: "npm:^2.1.0" - pirates: "npm:^4.0.5" + pirates: "npm:^4.0.6" source-map-support: "npm:^0.5.16" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 895cc773c3b3eae909478ea2a9735ef6edd634b04b4aaaad2ce576fd591c2b3c70ff8c90423e769a291bee072186e7e4801480c1907e31ba3053c6cdba5571cb + checksum: b2466e41a4394e725b57e139ba45c3f61b88546d3cb443e84ce46cb34071b60c6cdb706a14c58a1443db530691a54f51da1f0c97f6c1aecbb838a2fb7eb5dbb9 languageName: node linkType: hard @@ -2137,12 +2124,12 @@ __metadata: linkType: hard "@babel/runtime-corejs3@npm:^7.10.2": - version: 7.23.1 - resolution: "@babel/runtime-corejs3@npm:7.23.1" + version: 7.23.7 + resolution: "@babel/runtime-corejs3@npm:7.23.7" dependencies: core-js-pure: "npm:^3.30.2" regenerator-runtime: "npm:^0.14.0" - checksum: 6e2c2b11779ff56c88b1f3a8742498640f7271ad4fcf9cfd24052bbb236a5e7c4c7c8d81cda751da3b4effa678736303deb78441c5752e63bfb90d6453fd870f + checksum: 7230942b6dadddd68334283068f360323c6df205542811bd7e37384ebfc0b5dcc266470db99e5905a8c6e3bb9898f7f066dde145b33b560acd271118ed9b41b2 languageName: node linkType: hard @@ -2174,11 +2161,11 @@ __metadata: linkType: hard "@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.23.6 - resolution: "@babel/runtime@npm:7.23.6" + version: 7.23.7 + resolution: "@babel/runtime@npm:7.23.7" dependencies: regenerator-runtime: "npm:^0.14.0" - checksum: d886954e985ef8e421222f7a2848884d96a752e0020d3078b920dd104e672fdf23bcc6f51a44313a048796319f1ac9d09c2c88ec8cbb4e1f09174bcd3335b9ff + checksum: 3e304133ee55b0750e03e53cb4efb47fb2bdcdb5795f85bbffa10595196c34b9be60eb65bd6d833c87f49fc827f0365f86f95f51d85b188004d3128bb5129c93 languageName: node linkType: hard @@ -2202,9 +2189,9 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/traverse@npm:7.23.6" +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.7, @babel/traverse@npm:^7.4.5": + version: 7.23.7 + resolution: "@babel/traverse@npm:7.23.7" dependencies: "@babel/code-frame": "npm:^7.23.5" "@babel/generator": "npm:^7.23.6" @@ -2216,25 +2203,7 @@ __metadata: "@babel/types": "npm:^7.23.6" debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: 5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d - languageName: node - linkType: hard - -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5": - version: 7.23.2 - resolution: "@babel/traverse@npm:7.23.2" - dependencies: - "@babel/code-frame": "npm:^7.22.13" - "@babel/generator": "npm:^7.23.0" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-hoist-variables": "npm:^7.22.5" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" - debug: "npm:^4.1.0" - globals: "npm:^11.1.0" - checksum: d096c7c4bab9262a2f658298a3c630ae4a15a10755bb257ae91d5ab3e3b2877438934859c8d34018b7727379fe6b26c4fa2efc81cf4c462a7fe00caf79fa02ff + checksum: e32fceb4249beec2bde83968ddffe17444221c1ee5cd18c543a2feaf94e3ca83f2a4dfbc2dcca87cf226e0105973e0fe3717063a21e982a9de9945615ab3f3f5 languageName: node linkType: hard @@ -5671,20 +5640,23 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ember@workspace:frameworks/ember" dependencies: + "@babel/core": "npm:^7.23.7" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" + "@types/babel__preset-env": "npm:^7" + babel-loader: "npm:9.1.3" + babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" + babel-plugin-htmlbars-inline-precompile: "npm:^5.3.1" ember-source: "npm:~3.28.1" find-up: "npm:^5.0.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: ember-source: ~3.28.1 || ^4.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -9966,6 +9938,19 @@ __metadata: languageName: node linkType: hard +"babel-plugin-htmlbars-inline-precompile@npm:^5.3.1": + version: 5.3.1 + resolution: "babel-plugin-htmlbars-inline-precompile@npm:5.3.1" + dependencies: + babel-plugin-ember-modules-api-polyfill: "npm:^3.5.0" + line-column: "npm:^1.0.2" + magic-string: "npm:^0.25.7" + parse-static-imports: "npm:^1.1.0" + string.prototype.matchall: "npm:^4.0.5" + checksum: 8a93893d22f5dc6cb8c271c228311b3cb60b01df247f592e0d88df88b690114f7193fc2175c72de3ad3898a81a53dc0c407c6f059801315dea912e5628c9a5fa + languageName: node + linkType: hard + "babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" @@ -10016,6 +10001,19 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs2@npm:^0.4.7": + version: 0.4.7 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.7" + dependencies: + "@babel/compat-data": "npm:^7.22.6" + "@babel/helper-define-polyfill-provider": "npm:^0.4.4" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: f80f7284ec72c63e7dd751e0bdf25e9978df195a79e0887470603bfdea13ee518d62573cf360bb1bc01b80819e54915dd5edce9cff14c52d0af5f984aa3d36a3 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs3@npm:^0.8.5": version: 0.8.6 resolution: "babel-plugin-polyfill-corejs3@npm:0.8.6" @@ -10028,6 +10026,18 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs3@npm:^0.8.7": + version: 0.8.7 + resolution: "babel-plugin-polyfill-corejs3@npm:0.8.7" + dependencies: + "@babel/helper-define-polyfill-provider": "npm:^0.4.4" + core-js-compat: "npm:^3.33.1" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 094e40f4ab9f131408202063964d63740609fd4fdb70a5b6332b371761921b540ffbcee7a434c0199b8317dfb2ba4675eef674867215fd3b85e24054607c1501 + languageName: node + linkType: hard + "babel-plugin-polyfill-regenerator@npm:^0.5.3": version: 0.5.3 resolution: "babel-plugin-polyfill-regenerator@npm:0.5.3" @@ -10039,6 +10049,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-regenerator@npm:^0.5.4": + version: 0.5.4 + resolution: "babel-plugin-polyfill-regenerator@npm:0.5.4" + dependencies: + "@babel/helper-define-polyfill-provider": "npm:^0.4.4" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 0b903f5fe2f8c487b4260935dfe60bd9a95bcaee7ae63958f063045093b16d4e8288c232199d411261300aa21f6b106a3cb83c42cc996de013b337f5825a79fe + languageName: node + linkType: hard + "babel-plugin-react-docgen@npm:4.2.1, babel-plugin-react-docgen@npm:^4.2.1": version: 4.2.1 resolution: "babel-plugin-react-docgen@npm:4.2.1" @@ -17619,7 +17640,7 @@ __metadata: languageName: node linkType: hard -"isarray@npm:1.0.0, isarray@npm:~1.0.0": +"isarray@npm:1.0.0, isarray@npm:^1.0.0, isarray@npm:~1.0.0": version: 1.0.0 resolution: "isarray@npm:1.0.0" checksum: 18b5be6669be53425f0b84098732670ed4e727e3af33bc7f948aac01782110eb9a18b3b329c5323bcdd3acdaae547ee077d3951317e7f133bff7105264b3003d @@ -18643,6 +18664,16 @@ __metadata: languageName: node linkType: hard +"line-column@npm:^1.0.2": + version: 1.0.2 + resolution: "line-column@npm:1.0.2" + dependencies: + isarray: "npm:^1.0.0" + isobject: "npm:^2.0.0" + checksum: 75aa918a9791362a3369c7222689350dc6df5b040314525ba79c3682f1386e13a3ceddd6b2584b8cb5c3ab3a5b3c50c940a182772dbb6361303bf6ef65fc2d64 + languageName: node + linkType: hard + "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -22008,6 +22039,13 @@ __metadata: languageName: node linkType: hard +"parse-static-imports@npm:^1.1.0": + version: 1.1.0 + resolution: "parse-static-imports@npm:1.1.0" + checksum: 24a210b3ed4fc8ab4d79a807956484a60f97cd0e8174d4c2c88c034fdba65d87ce62ec293aadee46e07d476959610a905a2b80d60b343fd525e057479cabfbbe + languageName: node + linkType: hard + "parse5-html-rewriting-stream@npm:7.0.0": version: 7.0.0 resolution: "parse5-html-rewriting-stream@npm:7.0.0" @@ -22324,7 +22362,7 @@ __metadata: languageName: node linkType: hard -"pirates@npm:^4.0.4, pirates@npm:^4.0.5": +"pirates@npm:^4.0.4, pirates@npm:^4.0.6": version: 4.0.6 resolution: "pirates@npm:4.0.6" checksum: 00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36 @@ -26098,7 +26136,7 @@ __metadata: languageName: node linkType: hard -"string.prototype.matchall@npm:^4.0.8": +"string.prototype.matchall@npm:^4.0.5, string.prototype.matchall@npm:^4.0.8": version: 4.0.10 resolution: "string.prototype.matchall@npm:4.0.10" dependencies: From 1f8db9e7767fdf1a23e4584e8eb1853c371a48a8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 12:59:49 +0100 Subject: [PATCH 042/265] Remove @swc/core package --- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 1 - code/lib/types/src/modules/core-common.ts | 6 +++--- code/package.json | 1 - 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index c9bd220b544c..97cde4815b6b 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -8,7 +8,6 @@ import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import type { TransformOptions as EsbuildOptions } from 'esbuild'; -import type { JsMinifyOptions as SwcOptions } from '@swc/core'; import type { Options } from '@storybook/types'; import { globalsNameReferenceMap } from '@storybook/preview/globals'; import { diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8f5a49efdfd1..6b436be70b51 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { FileSystemCache } from 'file-system-cache'; -import type { Options as SWCOptions } from '@swc/core'; import type { Options as TelejsonOptions } from 'telejson'; import type { Router } from 'express'; import type { Server } from 'http'; @@ -70,7 +69,8 @@ export interface Presets { args?: Options ): Promise; apply(extension: 'framework', config?: {}, args?: any): Promise; - apply(extension: 'swc', config?: {}, args?: any): Promise; + apply(extension: 'babel', config?: {}, args?: any): Promise; + apply(extension: 'swc', config?: {}, args?: any): Promise; apply(extension: 'entries', config?: [], args?: any): Promise; apply(extension: 'stories', config?: [], args?: any): Promise; apply(extension: 'managerEntries', config: [], args?: any): Promise; @@ -408,7 +408,7 @@ export interface StorybookConfigRaw { // We cannot use a particular Babel type here because we need to support a variety of versions babel?: any; - swc?: SWCOptions; + swc?: any; env?: Record; diff --git a/code/package.json b/code/package.json index c4e268558c93..a142204640ec 100644 --- a/code/package.json +++ b/code/package.json @@ -170,7 +170,6 @@ "@storybook/web-components": "workspace:*", "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", - "@swc/core": "1.3.82", "@testing-library/dom": "^7.29.4", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", From 9ed26ab696c220b14b9f64f6e7de33a4bc505d7e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 20:47:18 +0100 Subject: [PATCH 043/265] Add Migration note to Next.js SWC mode --- MIGRATION.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 453e8f67bdf0..5a0cc2285d0c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -17,6 +17,7 @@ - [Framework-specific changes](#framework-specific-changes) - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) + - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -495,6 +496,13 @@ Starting in 8.0, we drop support for Angular < 15 Starting in 8.0, we drop support for Next.js < 13.5. +#### Next.js Automatic SWC mode detection + +Similar to how Next.js detects if SWC should be used, Storybook will follow more or less the same rules: + +- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. +- Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated From 105e3ff2b75d6b228976dd4b50a1941ba7b0add1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:02:43 +0100 Subject: [PATCH 044/265] Add Migration note for Preact --- MIGRATION.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 5a0cc2285d0c..b0f8b79e52d6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -18,6 +18,7 @@ - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) + - [Preact: No longer adds default babel plugins](#preact-no-longer-adds-default-babel-plugins) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -503,6 +504,54 @@ Similar to how Next.js detects if SWC should be used, Storybook will follow more - If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. +#### Preact: No longer adds default babel plugins + +Until now, Storybook added a set of default babel plugins to the babel config for Preact projects which uses Webpack. + +We have configured the runtime automatic import plugin to automatically import `h` from `preact` when needed. This is no longer the case in Storybook 8.0. If you want to use the runtime automatic import plugin to skip unnecessary preact imports, you will need to add it to your babel config yourself. The same applies if you want to use TypeScript with Preact. + +```js +.babelrc + +{ + "plugins": [ + [ + // Add this to automatically import `h` from `preact` when needed + "@babel/plugin-transform-react-jsx", { + "importSource": "preact", + "runtime": "automatic" + } + ], + // Add this if you want to use TypeScript with Preact + "@babel/preset-typescript" + ], +} +``` + +If you want to configure the plugins only for Storybook, you can add the same setting to your `.storybook/main.js` file. + +```js +const config = { + ... + babel: async (options) => { + options.plugins.push( + [ + "@babel/plugin-transform-react-jsx", { + "importSource": "preact", + "runtime": "automatic" + } + ], + "@babel/preset-typescript" + ) + return options; + }, +} + +export default config +``` + +We are doing this to apply the same babel config as you have defined in your project. This streamlines the experience of using Storybook with Preact. Additionally, we are not vendor-locked to a specific Babel version anymore, which means that you can upgrade Babel without breaking your Storybook. + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated From da46a9e1755ca0a9cdb6319d625e325b350d86ea Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:04:23 +0100 Subject: [PATCH 045/265] Add Migration note to drop support for Preact < 10 --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index b0f8b79e52d6..082922622bda 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -18,6 +18,7 @@ - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) + - [Preact: Dropping support for Preact \< 10](#preact-dropping-support-for-preact--10) - [Preact: No longer adds default babel plugins](#preact-no-longer-adds-default-babel-plugins) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) @@ -504,6 +505,10 @@ Similar to how Next.js detects if SWC should be used, Storybook will follow more - If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. +#### Preact: Dropping support for Preact \< 10 + +Starting in 8.0, we drop support for Preact < 10. + #### Preact: No longer adds default babel plugins Until now, Storybook added a set of default babel plugins to the babel config for Preact projects which uses Webpack. From 068cdf1ca6494070d0ccf54028f6562a23f38ef0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:17:29 +0100 Subject: [PATCH 046/265] Add note to addon authors for optional babel usage --- docs/addons/writing-presets.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md index 658efea74cf9..6d815fe00d71 100644 --- a/docs/addons/writing-presets.md +++ b/docs/addons/writing-presets.md @@ -56,6 +56,8 @@ To customize Storybook's Babel configuration and add support for additional feat +Please keep in mind that the babel configurations are only applied if the users Storybook Framework uses Babel. If the framework uses another transpiler, like SWC or esbuild, the babel configuration will be ignored. + ### Builders By default, Storybook provides support for the leading industry builders, including [Webpack](../builders/webpack.md) and [Vite](../builders/vite.md). If you need additional features for any of these builders, you can use APIs to extend the builder configuration based on your specific needs. From 56ff8b2c3add6b0b3ed30d48061098cb348b7f0d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:19:42 +0100 Subject: [PATCH 047/265] Readd deleted snippets --- .../storybook-addons-preset-babelDefault.js.mdx | 14 ++++++++++++++ .../storybook-addons-preset-babelDefault.ts.mdx | 15 +++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx create mode 100644 docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx new file mode 100644 index 000000000000..0677a8775a97 --- /dev/null +++ b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx @@ -0,0 +1,14 @@ + +```js +// example-addon/src/babel/babelDefault.js + +export function babelDefault(config) { + return { + ...config, + plugins: [ + ...config.plugins, + [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], + ], + }; +} +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx new file mode 100644 index 000000000000..81306146a38d --- /dev/null +++ b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx @@ -0,0 +1,15 @@ +```ts +// example-addon/src/babel/babelDefault.ts + +import { TransformOptions } from '@babel/core'; + +export function babelDefault(config: TransformOptions) { + return { + ...config, + plugins: [ + ...config.plugins, + [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], + ], + }; +} +``` \ No newline at end of file From bb9370c50085e88a9b1f1ac26194df1d9617d49b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 30 Dec 2023 21:44:17 +0100 Subject: [PATCH 048/265] Add Migration note for removing fastRefresh option --- MIGRATION.md | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 082922622bda..c7de11eda55a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,7 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [framework.options.fastRefresh for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - [typescript.skipBabel removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) @@ -386,6 +387,67 @@ To summarize: ### Core changes +#### framework.options.fastRefresh for Webpack5-based projects removed + +In Storybook 8.0.0, we have removed the `framework.options.fastRefresh` option. + +The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck in the future, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. + +Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Webpack 5 and Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. + +We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs, if it is not already configured or if your fast-refresh configuration is not automatically picked up by Storybook: + +`package.json`: + +```diff +{ + "devDependencies": { ++ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", ++ "react-refresh": "^0.14.0", + } +} +``` + +`babel.config.js` (optionally, add it to `.storybook/main.js`): + +```diff ++const isProdBuild = process.env.NODE_ENV === 'production'; + +module.exports = (api) => { + return { + plugins: [ ++ !isProdBuild && 'react-refresh/babel', + ].filter(Boolean), + }; +}; +``` + +`.storybook/main.js`: + +```diff ++import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"; ++const isProdBuild = process.env.NODE_ENV === 'production'; +const config = { + webpackFinal: (config) => { ++ config.plugins = [ ++ !isProdBuild && new ReactRefreshWebpackPlugin({ ++ overlay: { ++ sockIntegration: 'whm', ++ }, ++ }), ++ ...config.plugins, ++ ].filter(Boolean); + return config; + }, +}; + +export default config; +``` + +This approach aligns with our philosophy of transparency and puts users in control of their Webpack and Babel configurations. + +We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are taking a step closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. + #### typescript.skipBabel removed We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. From 0da6d737744c7defa8127db4affca8eba2745ed5 Mon Sep 17 00:00:00 2001 From: Homa Wong Date: Sat, 30 Dec 2023 13:55:26 -0800 Subject: [PATCH 049/265] fix: import error This works for storysource as the underlying `./dist/preset.js` is still in CJS --- code/addons/storysource/preset.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/storysource/preset.js b/code/addons/storysource/preset.js index dd83b37f74cb..b120250981f9 100644 --- a/code/addons/storysource/preset.js +++ b/code/addons/storysource/preset.js @@ -1 +1 @@ -import './dist/preset'; +require('./dist/preset'); From 9661b7e6b5d18d4bf742b70888317b9a9455a471 Mon Sep 17 00:00:00 2001 From: Homa Wong Date: Sat, 30 Dec 2023 14:55:19 -0800 Subject: [PATCH 050/265] docs: misc cleanup on contributing guide --- CONTRIBUTING.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ae9125750200..f8ae3a42c13c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -25,6 +25,7 @@ If you run `yarn start` and encounter the following error, try rerunning `yarn s ```sh > NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json' ``` + If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command: ```sh @@ -37,11 +38,11 @@ By executing this command, you will be able to see which untracked or ignored fi If you have forked the repository, you should [disable Github Actions for your repo](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository) as many of them (e.g. pushing to sandbox) will fail without proper authorization. In your Github repo, go to Settings > Actions > General > set the Actions Permissions to **Disable actions**. -# Running against different sandbox templates +## Running against different sandbox templates You can also pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run. -# Making code changes +## Making code changes If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following: @@ -56,10 +57,10 @@ yarn build --watch react core-server api addon-docs 3. If you are running the sandbox in "unlinked" mode you'll need to re-run the sandbox from the `publish` step to see the changes: -``` +```sh yarn task --task dev --template --start-from=publish ``` -# Contributing to Storybook +## Contributing to Storybook For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute). From 685b825ebf19dd9d55ea579579fc8d4fd40accd5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 28 Dec 2023 01:11:13 +0800 Subject: [PATCH 051/265] Docs: Add autodocs filter function parameter --- code/addons/docs/src/preview.ts | 3 +++ code/ui/blocks/src/blocks/Stories.tsx | 8 ++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts index 0d1183bd0cf1..f0e41435bb2e 100644 --- a/code/addons/docs/src/preview.ts +++ b/code/addons/docs/src/preview.ts @@ -1,8 +1,11 @@ +import type { PreparedStory } from '@storybook/types'; + export const parameters: any = { docs: { renderer: async () => { const { DocsRenderer } = (await import('./DocsRenderer')) as any; return new DocsRenderer(); }, + autodocsFilter: (story: PreparedStory) => !story.parameters?.docs?.disable, }, }; diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index de42c50d2e41..93e8bfd49cf3 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -27,9 +27,13 @@ const StyledHeading: typeof Heading = styled(Heading)(({ theme }) => ({ })); export const Stories: FC = ({ title = 'Stories', includePrimary = true }) => { - const { componentStories } = useContext(DocsContext); + const { componentStories, projectAnnotations, getStoryContext } = useContext(DocsContext); - let stories = componentStories().filter((story) => !story.parameters?.docs?.disable); + let stories = componentStories(); + const { autodocsFilter } = projectAnnotations.parameters?.docs || {}; + if (autodocsFilter) { + stories = stories.filter((story) => autodocsFilter(story, getStoryContext(story))); + } if (!includePrimary) stories = stories.slice(1); From 6808657ff96291c1163fa30ed0af4063aac7d65e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 2 Jan 2024 11:05:03 +0100 Subject: [PATCH 052/265] Add cache directory to babel-loaders --- code/frameworks/ember/src/preset.ts | 7 +++++-- code/frameworks/nextjs/src/babel/loader.ts | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 00b3d2bd1564..9de2b1ab35c0 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -1,7 +1,7 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; import { getVirtualModules } from '@storybook/builder-webpack5'; -import { getProjectRoot } from '@storybook/core-common'; +import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common'; import type { StorybookConfig } from './types'; const getAbsolutePath = (input: I): I => @@ -29,7 +29,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, use: [ { loader: require.resolve('babel-loader'), - options: babelOptions, + options: { + cacheDirectory: resolvePathInStorybookCache('babel'), + ...babelOptions, + }, }, ], include: [getProjectRoot()], diff --git a/code/frameworks/nextjs/src/babel/loader.ts b/code/frameworks/nextjs/src/babel/loader.ts index 90d383ea332c..25ff56890588 100644 --- a/code/frameworks/nextjs/src/babel/loader.ts +++ b/code/frameworks/nextjs/src/babel/loader.ts @@ -1,4 +1,4 @@ -import { getProjectRoot } from '@storybook/core-common'; +import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common'; import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; @@ -15,7 +15,10 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) => use: [ { loader: require.resolve('babel-loader'), - options: babelOptions, + options: { + cacheDirectory: resolvePathInStorybookCache('babel'), + ...babelOptions, + }, }, ], include: [getProjectRoot()], From 6c5b0b8562042f267acd6fed71a9c38e16972f49 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 2 Jan 2024 11:23:11 +0100 Subject: [PATCH 053/265] Add migration note for babel/swc removal --- MIGRATION.md | 48 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index c7de11eda55a..4702469c6a93 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -3,6 +3,8 @@ - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) + - [framework.options.builder.useSWC for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) + - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) - [framework.options.fastRefresh for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - [typescript.skipBabel removed](#typescriptskipbabel-removed) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -387,13 +389,55 @@ To summarize: ### Core changes +#### framework.options.builder.useSWC for Webpack5-based projects removed + +In Storybook 8.0.0, we have removed the `framework.options.builder.useSWC` option. The `@storybook/builder-webpack5` package is now compiler-agnostic and does not depend on Babel or SWC. + +If you want to use SWC, you can install and add the following addon to your Storybook configuration: + +```sh +npm install --save-dev @storybook/addon-webpack-compiler-swc +``` + +`.storybook/main.js`: + +```js +const config = { + addons: ["@storybook/addon-webpack-compiler-swc"] +}; + +export default config; +``` + +The goal is to make @storybook/builder-webpack5 more leightweight and flexible. We are not locked into a specific compiler or compiler version anymore. This allows us to support Babel 7/8, SWC and other compilers at the same time. + +#### Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5` + +In Storybook 8.0.0, we have removed the `@storybook/builder-webpack5` package's dependency on Babel. This means that Babel is not preconfigured in `@storybook/builder-webpack5`. If you want to use Babel, you can install and add the following addon to your Storybook configuration: + +```sh +npm install --save-dev @storybook/addon-webpack-compiler-babel +``` + +`.storybook/main.js`: + +```js +const config = { + addons: ["@storybook/addon-webpack-compiler-babel"] +}; + +export default config; +``` + +We are doing this to make Storybook more flexible and to allow users to use a variety of compilers like SWC, Babel or even pure TypeScript. + #### framework.options.fastRefresh for Webpack5-based projects removed In Storybook 8.0.0, we have removed the `framework.options.fastRefresh` option. The fast-refresh implementation currently relies on the `react-refresh/babel` package. While this has served us well, integrating this dependency could pose challenges. Specifically, it would necessitate locking users into a specific Babel version. This could become a bottleneck in the future, especially when Babel 8 is released. There is uncertainty about whether react-refresh/babel will seamlessly support Babel 8, potentially hindering users from updating smoothly. -Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Webpack 5 and Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. +Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a less-than-optimal development experience. We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. By adding the following configuration, users can easily configure fast-refresh according to their specific needs, if it is not already configured or if your fast-refresh configuration is not automatically picked up by Storybook: @@ -448,6 +492,8 @@ This approach aligns with our philosophy of transparency and puts users in contr We are committed to minimizing magic behind the scenes. By removing `framework.options.fastRefresh`, we are taking a step closer to a Storybook that doesn't impose unnecessary configurations on users. Instead, we encourage users to leverage their existing Webpack and Babel setups, fostering a more transparent and customizable development environment. +You don't have to add fast refresh to `@storybook/nextjs`, since it is already configured there as a default to match the same experience as `next dev`. + #### typescript.skipBabel removed We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. From 5fe992e9201fece88571cf8e8a918a0113ff5faf Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 2 Jan 2024 18:29:20 +0800 Subject: [PATCH 054/265] Fix sidebar bottom/top --- code/ui/manager/src/container/Sidebar.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 9041badfd5d0..a9433f948401 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -41,9 +41,8 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { const whatsNewNotificationsEnabled = state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications; - const items = api.getElements(types.experimental_SIDEBAR_BOTTOM); - const bottom = useMemo(() => Object.values(items), [items]); - const top = useMemo(() => Object.values(api.getElements(types.experimental_SIDEBAR_TOP)), []); + const bottom = Object.values(api.getElements(types.experimental_SIDEBAR_BOTTOM)); + const top = Object.values(api.getElements(types.experimental_SIDEBAR_TOP)); return { title: name, From c82e2152c10d66a7e99dda4b031377313ccaea57 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 2 Jan 2024 12:37:21 +0100 Subject: [PATCH 055/265] Upgrade yarn.lock --- code/yarn.lock | 123 ------------------------------------------------- 1 file changed, 123 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index c29697995fbe..9ac57d8c7dcb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6360,7 +6360,6 @@ __metadata: "@storybook/web-components": "workspace:*" "@storybook/web-components-vite": "workspace:*" "@storybook/web-components-webpack5": "workspace:*" - "@swc/core": "npm:1.3.82" "@testing-library/dom": "npm:^7.29.4" "@testing-library/jest-dom": "npm:^6.1.4" "@testing-library/react": "npm:^14.0.0" @@ -6864,121 +6863,6 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-darwin-arm64@npm:1.3.82" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - -"@swc/core-darwin-x64@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-darwin-x64@npm:1.3.82" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - -"@swc/core-linux-arm-gnueabihf@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.82" - conditions: os=linux & cpu=arm - languageName: node - linkType: hard - -"@swc/core-linux-arm64-gnu@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.82" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - -"@swc/core-linux-arm64-musl@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.82" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - -"@swc/core-linux-x64-gnu@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.82" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - -"@swc/core-linux-x64-musl@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-x64-musl@npm:1.3.82" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - -"@swc/core-win32-arm64-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.82" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - -"@swc/core-win32-ia32-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.82" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@swc/core-win32-x64-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.82" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - -"@swc/core@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core@npm:1.3.82" - dependencies: - "@swc/core-darwin-arm64": "npm:1.3.82" - "@swc/core-darwin-x64": "npm:1.3.82" - "@swc/core-linux-arm-gnueabihf": "npm:1.3.82" - "@swc/core-linux-arm64-gnu": "npm:1.3.82" - "@swc/core-linux-arm64-musl": "npm:1.3.82" - "@swc/core-linux-x64-gnu": "npm:1.3.82" - "@swc/core-linux-x64-musl": "npm:1.3.82" - "@swc/core-win32-arm64-msvc": "npm:1.3.82" - "@swc/core-win32-ia32-msvc": "npm:1.3.82" - "@swc/core-win32-x64-msvc": "npm:1.3.82" - "@swc/types": "npm:^0.1.4" - peerDependencies: - "@swc/helpers": ^0.5.0 - dependenciesMeta: - "@swc/core-darwin-arm64": - optional: true - "@swc/core-darwin-x64": - optional: true - "@swc/core-linux-arm-gnueabihf": - optional: true - "@swc/core-linux-arm64-gnu": - optional: true - "@swc/core-linux-arm64-musl": - optional: true - "@swc/core-linux-x64-gnu": - optional: true - "@swc/core-linux-x64-musl": - optional: true - "@swc/core-win32-arm64-msvc": - optional: true - "@swc/core-win32-ia32-msvc": - optional: true - "@swc/core-win32-x64-msvc": - optional: true - peerDependenciesMeta: - "@swc/helpers": - optional: true - checksum: cee1f56e969074fe9e23fe51348d7da0c921949f5845e57030824d0e32d09fcefc647371c982e82836cc72c27c5fc5370c6aaff4f8f1c527d1c39c5ab6203e17 - languageName: node - linkType: hard - "@swc/helpers@npm:0.5.2": version: 0.5.2 resolution: "@swc/helpers@npm:0.5.2" @@ -6988,13 +6872,6 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.4": - version: 0.1.5 - resolution: "@swc/types@npm:0.1.5" - checksum: b35f93fe896a2240f6f10544e408f9648c2bd4bcff9bd8d022d9a6942d31cf859f86119fb0bbb04a12eefa1f6a6745ffc7d18f3a490d76d7b6a074a7c9608144 - languageName: node - linkType: hard - "@szmarczak/http-timer@npm:^4.0.5": version: 4.0.6 resolution: "@szmarczak/http-timer@npm:4.0.6" From 263ed62fb4034676535cc521755c679adeaf260e Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Tue, 2 Jan 2024 09:59:34 -0400 Subject: [PATCH 056/265] fix: Check optionalDependencies for storybook versions --- code/lib/cli/src/helpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 33c7b6c6ccd9..4bd17d055e35 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -295,7 +295,7 @@ export async function adjustTemplate(templatePath: string, templateData: Record< // Given a package.json, finds any official storybook package within it // and if it exists, returns the version of that package from the specified package.json export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) { - const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies }; + const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies, ...packageJson.optionalDependencies }; const storybookPackage = Object.keys(allDeps).find((name: string) => { return storybookMonorepoPackages[name as keyof typeof storybookMonorepoPackages]; }); From 6e8f823ff097dc139be772446d3a7048b9fc46de Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Wed, 3 Jan 2024 10:01:25 -0400 Subject: [PATCH 057/265] Formatting --- code/lib/cli/src/helpers.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 4bd17d055e35..9d0570922867 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -295,7 +295,11 @@ export async function adjustTemplate(templatePath: string, templateData: Record< // Given a package.json, finds any official storybook package within it // and if it exists, returns the version of that package from the specified package.json export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) { - const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies, ...packageJson.optionalDependencies }; + const allDeps = { + ...packageJson.dependencies, + ...packageJson.devDependencies, + ...packageJson.optionalDependencies + }; const storybookPackage = Object.keys(allDeps).find((name: string) => { return storybookMonorepoPackages[name as keyof typeof storybookMonorepoPackages]; }); From b7d72d59297287e37969fdd424b3d69d47183697 Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Wed, 3 Jan 2024 10:21:06 -0400 Subject: [PATCH 058/265] Update helpers.ts --- code/lib/cli/src/helpers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 9d0570922867..ed54bd765986 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -295,10 +295,10 @@ export async function adjustTemplate(templatePath: string, templateData: Record< // Given a package.json, finds any official storybook package within it // and if it exists, returns the version of that package from the specified package.json export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) { - const allDeps = { + const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies, - ...packageJson.optionalDependencies + ...packageJson.optionalDependencies, }; const storybookPackage = Object.keys(allDeps).find((name: string) => { return storybookMonorepoPackages[name as keyof typeof storybookMonorepoPackages]; From fc113e3a61763cd2b77ba856b66c3325bbfe802f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 3 Jan 2024 15:32:09 +0100 Subject: [PATCH 059/265] add migration note about react 18 in the manager --- MIGRATION.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 8d6310ddce12..3007009d1a8d 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,8 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) - - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) + - [Manager addons are now rendered with react 18](#manager-addons-are-now-rendered-with-react-18) + - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - [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) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -339,6 +340,26 @@ ## From version 7.x to 8.0.0 +### Manager addons are now rendered with react 18 + +The UI added to the manager via addon, are now rendered with react 18. + +Example: +```tsx +import { addons, types } from '@storybook/manager-api'; + +addons.register('my-addon', () => { + addons.add('my-addon/panel', { + type: types.PANEL, + title: 'My Addon', + // This will be called as a JSX element by react 18 + render: ({ active }) => (active ?
Hello World
: null), + }); +}); +``` + +Previously the `key` prop was passed to the render function, that is now no longer the case. + ### Framework-specific Vite plugins have to be explicitly added In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed. From b8db53974c758a5c9c76e19a6548c7923b6d1f3e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 3 Jan 2024 15:35:14 +0100 Subject: [PATCH 060/265] Add migration note for web-component projects --- MIGRATION.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index dc7a34c00ed8..bbc4138a052e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -26,6 +26,7 @@ - [Require Angular 15 and up](#require-angular-15-and-up) - [Svelte](#svelte) - [Require Svelte 4 and up](#require-svelte-4-and-up) + - [Web Components](#web-components) - [Deprecations which are now removed](#deprecations-which-are-now-removed) - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) - [Next.js Automatic SWC mode detection](#nextjs-automatic-swc-mode-detection) @@ -641,6 +642,17 @@ Starting in 8.0, Storybook requires Angular 15 and up. Starting in 8.0, Storybook requires Svelte 4 and up. +#### Web Components + +Starting in 8.0, Storybook doesn't apply any default babel plugins to Web Components projects. Storybook will pick up the babel configuration you have in place. Before Storybook 8.0, Storybook has added the following babel presets and plugins: + +- `@babel/preset-env` + +The following list of plugins are not necessary anymore, since they are included in `@babel/preset-env`: + +- `@babel/plugin-syntax-dynamic-import` +- `@babel/plugin-syntax-import-meta` + ### Deprecations which are now removed #### --use-npm flag in storybook CLI From 7295177e236b88ec3f34591d7e9614bd0b6ee6b5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 3 Jan 2024 15:39:25 +0100 Subject: [PATCH 061/265] add migration notes about storiesOf removal --- MIGRATION.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 8d6310ddce12..8c07f68d215c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,8 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) - - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) + - [Removal of `storiesOf`-API](#removal-of-storiesof-api) + - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - [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) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -339,6 +340,14 @@ ## From version 7.x to 8.0.0 +### Removal of `storiesOf`-API + +The `storiesOf` API has been removed in storybook 8.0. + +If you need to dynamically create stories, you will need to implement this via the experimental `experimental_indexers` [API](#storyindexers-is-replaced-with-experimental_indexers). + +For migrating to CSF, see: [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + ### Framework-specific Vite plugins have to be explicitly added In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed. From 71b8c2fa2505f066b530ede3db8af6f20431715a Mon Sep 17 00:00:00 2001 From: wuzhuobin Date: Wed, 3 Jan 2024 22:53:39 +0800 Subject: [PATCH 062/265] Update button-story-default-export-with-component.ts.mdx Fix incorrect export doc --- .../button-story-default-export-with-component.ts.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx index 805431b359c0..8ddd34a485c3 100644 --- a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx +++ b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx @@ -3,7 +3,8 @@ import type { Meta } from '@storybook/web-components'; -export default { +const meta: Meta = { + title: 'Button', component: 'demo-button', }; From fa2364c043980cc8f135a24849afeb6ec67f8af3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 17:44:13 -0300 Subject: [PATCH 063/265] Addon Controls: Remove unused hideNoControlsWarning type --- MIGRATION.md | 20 +++++++++++++++++- code/addons/controls/src/ControlsPanel.tsx | 3 --- docs/essentials/controls.md | 20 ------------------ ...utton-story-hide-nocontrols-warning.ts.mdx | 20 ------------------ ...utton-story-hide-nocontrols-warning.js.mdx | 15 ------------- ...n-story-hide-nocontrols-warning.ts-4-9.mdx | 21 ------------------- ...utton-story-hide-nocontrols-warning.ts.mdx | 21 ------------------- ...utton-story-hide-nocontrols-warning.js.mdx | 13 ------------ ...utton-story-hide-nocontrols-warning.ts.mdx | 18 ---------------- 9 files changed, 19 insertions(+), 132 deletions(-) delete mode 100644 docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx delete mode 100644 docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx delete mode 100644 docs/snippets/common/button-story-hide-nocontrols-warning.ts-4-9.mdx delete mode 100644 docs/snippets/common/button-story-hide-nocontrols-warning.ts.mdx delete mode 100644 docs/snippets/web-components/button-story-hide-nocontrols-warning.js.mdx delete mode 100644 docs/snippets/web-components/button-story-hide-nocontrols-warning.ts.mdx diff --git a/MIGRATION.md b/MIGRATION.md index 8d6310ddce12..9ab4cbc39f48 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,7 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) - - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) + - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - [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) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -24,6 +24,7 @@ - [Require Svelte 4 and up](#require-svelte-4-and-up) - [Deprecations which are now removed](#deprecations-which-are-now-removed) - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) + - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -35,6 +36,7 @@ - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -531,6 +533,10 @@ Starting in 8.0, Storybook requires Svelte 4 and up. The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated). +#### hideNoControlsWarning parameter from addon controls + +The `hideNoControlsWarning` parameter is now removed. [More info here](#addon-controls-hidenocontrolswarning-parameter-is-deprecated). + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated @@ -711,6 +717,18 @@ The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0.0. Pl The `render` method can now be a `React.FunctionComponent` (without the `children` prop). Storybook will now render it, rather than calling it as a function. +#### Addon-controls hideNoControlsWarning parameter is deprecated + +The `hideNoControlsWarning` parameter is now unused and deprecated, given that the UI of the Controls addon changed in a way that does not display that message anymore. + +```ts +export const Primary = { + parameters: { + controls: { hideNoControlsWarning: true }, // this parameter is now unnecessary + }, +}; +``` + ## From version 6.5.x to 7.0.0 A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`. diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index fc7c2085abd4..09d3bc45e44e 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -16,9 +16,6 @@ interface ControlsParameters { sort?: SortType; expanded?: boolean; presetColors?: PresetColor[]; - - /** @deprecated No longer used, will be removed in Storybook 8.0 */ - hideNoControlsWarning?: boolean; } export const ControlsPanel: FC = () => { diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 5d86420c4ab0..f575d34947d9 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -409,26 +409,6 @@ Consider the following snippet to force required args first: -#### Hide NoControls warning - -If you don't plan to handle the control args inside your story, you can remove the warning with: - - - - - - - ### Disable controls for specific properties Aside from the features already documented here, Controls can also be disabled for individual properties. diff --git a/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx b/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx deleted file mode 100644 index 9462922bc188..000000000000 --- a/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/angular'; - -import { Button } from './button.component'; - -const meta: Meta - ), + import { Button } from './button'; + export default {}; - name: 'Primary', - }; + export const Primary = { + render: () => ( + + ), - `); + name: 'Primary', + }; + `); }); -it('story child is CSF3', () => { +it('story child is CSF3', async () => { const input = dedent` import { Story } from '@storybook/addon-docs'; import { Button } from './button'; @@ -547,7 +529,7 @@ it('story child is CSF3', () => { } args={{label: 'Hello' }} /> `; - jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); + await jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); const [, csf] = fs.writeFileSync.mock.calls[0]; @@ -563,11 +545,10 @@ it('story child is CSF3', () => { label: 'Hello', }, }; - `); }); -it('story child is arrow function', () => { +it('story child is arrow function', async () => { const input = dedent` import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Button } from './button'; @@ -577,23 +558,22 @@ it('story child is arrow function', () => { `; - jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); + await jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); const [, csf] = fs.writeFileSync.mock.calls[0]; expect(csf).toMatchInlineSnapshot(` - import { Button } from './button'; - export default {}; - - export const Primary = { - render: (args) => ); diff --git a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx index 3517870221b2..b741ea537376 100644 --- a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/button-has-type */ import React from 'react'; export interface Props extends React.ButtonHTMLAttributes { diff --git a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx index 19f7951a337a..d50eeb2b916f 100644 --- a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; function Button({ label, onClick }) { - // eslint-disable-next-line react/button-has-type return ; } diff --git a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx index 24837c61a4cd..2e66bdd696d2 100644 --- a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx index f79658f01abe..8134e591f18d 100644 --- a/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx @@ -1,5 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; @@ -10,7 +8,7 @@ const local = 'local-value'; /** * A component that renders its props */ -// eslint-disable-next-line react/prefer-stateless-function + class PropsWriter extends React.Component { render() { return 
{JSON.stringify(this.props)}
; @@ -50,7 +48,7 @@ PropsWriter.defaultProps = { importedReference: imported, globalReference: Date, stringGlobalName: 'top', - // eslint-disable-next-line react/default-props-match-prop-types + stringNoPropType: 'stringNoPropType', }; diff --git a/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx b/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx index ca1cb735478e..8bc5c569444f 100644 --- a/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx index a995807144eb..42959b7b0cbd 100644 --- a/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx @@ -1,5 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx index edfb32ee358e..b47eadfbc921 100644 --- a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx @@ -1,5 +1,3 @@ -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/forbid-prop-types */ import React from 'react'; import PropTypes, { string, shape } from 'prop-types'; import { PRESET_SHAPE, SOME_PROP_TYPES } from './ext'; @@ -398,9 +396,8 @@ PropTypesProps.defaultProps = { string: 'Default string', func: () => {}, funcWithJsDoc: (foo, bar) => { - // eslint-disable-next-line no-undef const yo = window.document; - // eslint-disable-next-line no-undef + const pouf = souffle; return { foo, bar }; diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx b/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx index b23ab673a439..f9357c93860d 100644 --- a/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx @@ -1,4 +1,3 @@ -/* eslint-disable react/require-default-props, react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index b0276f377013..0a768647d740 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts index 7a967db4da66..54773fe2de91 100644 --- a/code/renderers/svelte/src/public-types.test.ts +++ b/code/renderers/svelte/src/public-types.test.ts @@ -1,5 +1,4 @@ // this file tests Typescript types that's why there are no assertions -/* eslint-disable jest/expect-expect */ import { describe, it } from 'vitest'; import { satisfies } from '@storybook/core-common'; import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts index 05fc9daf852f..514b3128ed21 100644 --- a/code/renderers/svelte/src/render.ts +++ b/code/renderers/svelte/src/render.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import type { RenderContext, ArgsStoryFn } from '@storybook/types'; import { RESET_STORY_ARGS } from '@storybook/core-events'; // ! DO NOT change this PreviewRender import to a relative path, it will break it. @@ -22,7 +21,7 @@ function teardown(canvasElement: SvelteRenderer['canvasElement']) { if (!componentsByDomElement.has(canvasElement)) { return; } - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it exists because we just checked + componentsByDomElement.get(canvasElement)!.$destroy(); canvasElement.innerHTML = ''; diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts index aecdb01fabbb..adb20ae68755 100644 --- a/code/renderers/vue3/src/docs/sourceDecorator.ts +++ b/code/renderers/vue3/src/docs/sourceDecorator.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-eval */ /* eslint-disable no-underscore-dangle */ import { addons } from '@storybook/preview-api'; import type { ArgTypes, Args, StoryContext } from '@storybook/types'; @@ -240,7 +239,7 @@ export function generateTemplateSource( const slotArgs = Object.fromEntries( Object.entries(props ?? {}).filter(([key, value]) => slotsProps?.[key]) ); - // eslint-disable-next-line no-nested-ternary + const childSources: string = children ? typeof children === 'string' ? children diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts index 41080f5459a6..4c43c75e5ca9 100644 --- a/code/renderers/vue3/src/public-types.test.ts +++ b/code/renderers/vue3/src/public-types.test.ts @@ -1,5 +1,4 @@ // this file tests Typescript types that's why there are no assertions -/* eslint-disable jest/expect-expect */ import { describe, it } from 'vitest'; import { satisfies } from '@storybook/core-common'; import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index c7051ac847f5..535f3a67b63c 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,5 +1,5 @@ /* eslint-disable local-rules/no-uncategorized-errors,no-underscore-dangle */ -/* eslint-disable no-param-reassign */ + import type { App } from 'vue'; import { createApp, h, isReactive, isVNode, reactive } from 'vue'; import type { ArgsStoryFn, RenderContext } from '@storybook/types'; diff --git a/code/renderers/vue3/template/stories/preview.js b/code/renderers/vue3/template/stories/preview.js index 03dc82f84bcf..2bee659276ae 100644 --- a/code/renderers/vue3/template/stories/preview.js +++ b/code/renderers/vue3/template/stories/preview.js @@ -5,7 +5,7 @@ import { setup } from '@storybook/vue3'; const somePlugin = { install: (app, options) => { // inject a globally available $greetingText() method - // eslint-disable-next-line no-param-reassign + app.config.globalProperties.$greetingMessage = (key) => { // retrieve a nested property in `options` // using `key` diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js b/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js index f54beb468650..968d60353212 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js @@ -25,7 +25,7 @@ const meta = { render: (args) => { // Individual properties can be overridden by spreading the args // and the replacing the key-values that need to be updated - args = { ...args, icon: icons[args.icon || 'Primary'] }; // eslint-disable-line no-param-reassign + args = { ...args, icon: icons[args.icon || 'Primary'] }; return { // Components used in your story `template` are defined in the `components` object components: { OverrideArgs }, diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts index 95266e452711..862b7679eda8 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts @@ -8,7 +8,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'; import MySlotComponent from './MySlotComponent.vue'; declare global { - // eslint-disable-next-line no-var,vars-on-top,@typescript-eslint/naming-convention + // eslint-disable-next-line no-var,@typescript-eslint/naming-convention var __STORYBOOK_ADDONS_CHANNEL__: Channel; } diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts index ed91fd10c475..adcee313bd68 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts @@ -5,7 +5,7 @@ declare module 'vue' { } declare global { - // eslint-disable-next-line no-var,vars-on-top + // eslint-disable-next-line no-var var Components: Record; } diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js index 68087cf9aa09..70d06bb86fba 100644 --- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js +++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js @@ -195,5 +195,4 @@ export class DemoWcCard extends LitElement { } } -// eslint-disable-next-line no-undef customElements.define('input', DemoWcCard); diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js b/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js index da94e189e016..a76c22da7d37 100644 --- a/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js +++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js @@ -57,5 +57,4 @@ export const Welcome = () => html` `; -// eslint-disable-next-line no-undef customElements.define('input', Welcome); diff --git a/code/renderers/web-components/src/docs/web-components-properties.test.ts b/code/renderers/web-components/src/docs/web-components-properties.test.ts index 3b418464e152..ed80c4ca4069 100644 --- a/code/renderers/web-components/src/docs/web-components-properties.test.ts +++ b/code/renderers/web-components/src/docs/web-components-properties.test.ts @@ -49,7 +49,6 @@ describe('web-components component properties', () => { const customElementsJson = runWebComponentsAnalyzer(inputPath); const customElements = JSON.parse(customElementsJson); customElements.tags.forEach((tag: any) => { - // eslint-disable-next-line no-param-reassign tag.path = 'dummy-path-to-component'; }); expect(customElements).toMatchFileSnapshot( diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts index 5445648cb51e..eb7cabfaef2a 100644 --- a/code/renderers/web-components/src/render.ts +++ b/code/renderers/web-components/src/render.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { global } from '@storybook/global'; diff --git a/code/renderers/web-components/template/stories/demo-wc-card/index.js b/code/renderers/web-components/template/stories/demo-wc-card/index.js index 2b369f73fd43..e5ef957d2eca 100644 --- a/code/renderers/web-components/template/stories/demo-wc-card/index.js +++ b/code/renderers/web-components/template/stories/demo-wc-card/index.js @@ -1,4 +1,3 @@ import { DemoWcCard } from './DemoWcCard.js'; -// eslint-disable-next-line no-undef customElements.define('demo-wc-card', DemoWcCard); diff --git a/code/ui/.storybook/preview-head.html b/code/ui/.storybook/preview-head.html index 8eb8709c1b73..4037d732ffec 100644 --- a/code/ui/.storybook/preview-head.html +++ b/code/ui/.storybook/preview-head.html @@ -1,4 +1,3 @@ diff --git a/code/ui/blocks/src/blocks/ArgsTable.tsx b/code/ui/blocks/src/blocks/ArgsTable.tsx index 239e616e1b93..aa0ff827ed34 100644 --- a/code/ui/blocks/src/blocks/ArgsTable.tsx +++ b/code/ui/blocks/src/blocks/ArgsTable.tsx @@ -109,7 +109,7 @@ const isShortcut = (value?: string) => { return value && [PRIMARY_STORY].includes(value); }; -export const getComponent = (props: ArgsTableProps = {}, component: Component): Component => { +export const getComponent = (props: ArgsTableProps, component: Component): Component => { const { of } = props as OfProps; const { story } = props as StoryProps; if (isShortcut(of) || isShortcut(story)) { diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index b57c35526759..c0a9e8b0d0bc 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -11,7 +11,7 @@ import { UndoIcon } from '@storybook/icons'; import { ArgRow } from './ArgRow'; import { SectionRow } from './SectionRow'; import type { ArgType, ArgTypes, Args, Globals } from './types'; -// eslint-disable-next-line import/no-cycle + import { EmptyBlock } from '..'; import { Skeleton } from './Skeleton'; import { Empty } from './Empty'; diff --git a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx index 99a1b46f902c..e493848fedae 100644 --- a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { TabsState } from '@storybook/components'; import type { ArgsTableProps, SortType } from './ArgsTable'; -// eslint-disable-next-line import/no-cycle + import { ArgsTable } from './ArgsTable'; export interface TabbedArgsTableProps { diff --git a/code/ui/blocks/src/components/ArgsTable/index.ts b/code/ui/blocks/src/components/ArgsTable/index.ts index e3b1f1528205..6fabf7147b73 100644 --- a/code/ui/blocks/src/components/ArgsTable/index.ts +++ b/code/ui/blocks/src/components/ArgsTable/index.ts @@ -1,5 +1,5 @@ export * from './types'; -// eslint-disable-next-line import/no-cycle + export * from './ArgsTable'; export * from './TabbedArgsTable'; diff --git a/code/ui/blocks/src/components/ColorPalette.tsx b/code/ui/blocks/src/components/ColorPalette.tsx index 98b171d0b05f..7ed11e0df686 100644 --- a/code/ui/blocks/src/components/ColorPalette.tsx +++ b/code/ui/blocks/src/components/ColorPalette.tsx @@ -168,7 +168,6 @@ function renderSwatchSpecimen(colors: Colors) { const swatchElements = []; const labelElements = []; - // eslint-disable-next-line no-restricted-syntax, guard-for-in for (const colorKey in colors) { const colorValue = colors[colorKey]; swatchElements.push(renderSwatch(colorValue, swatchElements.length)); diff --git a/code/ui/blocks/src/components/Preview.tsx b/code/ui/blocks/src/components/Preview.tsx index a4651ba72184..3705bd987d66 100644 --- a/code/ui/blocks/src/components/Preview.tsx +++ b/code/ui/blocks/src/components/Preview.tsx @@ -8,7 +8,7 @@ import { ActionBar, Zoom } from '@storybook/components'; import type { ActionItem } from '@storybook/components'; import type { SourceProps } from '.'; -// eslint-disable-next-line import/no-cycle + import { Source } from '.'; import { getBlockBackgroundStyle } from './BlockBackgroundStyles'; import { Toolbar } from './Toolbar'; @@ -266,7 +266,6 @@ export const Preview: FC = ({ > {Array.isArray(children) ? ( - // eslint-disable-next-line react/no-array-index-key children.map((child, i) =>
{child}
) ) : (
{children}
diff --git a/code/ui/blocks/src/components/index.ts b/code/ui/blocks/src/components/index.ts index 8c4916b6bde6..ae6b28b0e733 100644 --- a/code/ui/blocks/src/components/index.ts +++ b/code/ui/blocks/src/components/index.ts @@ -1,9 +1,9 @@ export * from './Source'; export * from './EmptyBlock'; export * from './DocsPage'; -// eslint-disable-next-line import/no-cycle + export * from './Preview'; -// eslint-disable-next-line import/no-cycle + export * from './ArgsTable'; export * from './Story'; export * from './IFrame'; diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx index b126c80e3b2d..c9bf13a526c9 100644 --- a/code/ui/blocks/src/controls/Color.tsx +++ b/code/ui/blocks/src/controls/Color.tsx @@ -333,7 +333,6 @@ export const ColorControl: FC = ({ {presets.map((preset, index: number) => ( } diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx index 99e9d048f8af..517a4d0fd6f4 100644 --- a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx +++ b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx @@ -1,9 +1,6 @@ /* eslint-disable react/no-direct-mutation-state */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ + /* eslint-disable react/sort-comp */ -/* eslint-disable react/no-array-index-key */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable react/button-has-type */ import type { ReactElement } from 'react'; import React, { cloneElement, Component } from 'react'; diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts b/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts index 7537ba703189..af3219475c42 100644 --- a/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts +++ b/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts @@ -8,7 +8,7 @@ export function parse(string: string) { // Check if string contains 'function' and start with it to eval it if (result.indexOf('function') === 0) { - return (0, eval)(`(${result})`); // eslint-disable-line no-eval + return (0, eval)(`(${result})`); } try { diff --git a/code/ui/blocks/src/controls/types.ts b/code/ui/blocks/src/controls/types.ts index a6958c7495d1..6303ec41422a 100644 --- a/code/ui/blocks/src/controls/types.ts +++ b/code/ui/blocks/src/controls/types.ts @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/no-empty-interface */ - import type { ArgType } from '../components/ArgsTable'; export interface ControlProps { diff --git a/code/ui/blocks/src/examples/EmptyExample.tsx b/code/ui/blocks/src/examples/EmptyExample.tsx index b107ac26b781..d9ad80b7a120 100644 --- a/code/ui/blocks/src/examples/EmptyExample.tsx +++ b/code/ui/blocks/src/examples/EmptyExample.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// eslint-disable-next-line no-empty-pattern export const EmptyExample = ({}) => (
This component is not intended to render anything, it simply serves a something to hang diff --git a/code/ui/components/scripts/writeCssScript.js b/code/ui/components/scripts/writeCssScript.js index 4392c6ad3158..6bf292f1e05b 100644 --- a/code/ui/components/scripts/writeCssScript.js +++ b/code/ui/components/scripts/writeCssScript.js @@ -1,5 +1,4 @@ /* eslint-disable no-underscore-dangle */ -/* eslint-disable no-param-reassign */ // This little script converts the overflowscrollbars CSS file into the css-in-js file // it's normal you have to run prettier over the file after diff --git a/code/ui/components/src/components/ActionBar/ActionBar.tsx b/code/ui/components/src/components/ActionBar/ActionBar.tsx index 8519b47e47c1..6295bf99349a 100644 --- a/code/ui/components/src/components/ActionBar/ActionBar.tsx +++ b/code/ui/components/src/components/ActionBar/ActionBar.tsx @@ -69,7 +69,6 @@ export interface ActionBarProps { export const ActionBar: FC = ({ actionItems, ...props }) => ( {actionItems.map(({ title, className, onClick, disabled }, index: number) => ( - // eslint-disable-next-line react/no-array-index-key {title} diff --git a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx index 5204ceb6f9aa..6d02a63aba20 100644 --- a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx +++ b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx @@ -66,14 +66,12 @@ export const ErrorFormatter: FC<{ error: Error }> = ({ error }) => {
{lines.map((l, i) => l.name ? ( - // eslint-disable-next-line react/no-array-index-key {' '}at {l.name} ( {l.location})
) : ( - // eslint-disable-next-line react/no-array-index-key {' '}at {l.location}
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx index 02734c576641..14d4addb25ca 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx @@ -24,7 +24,6 @@ const Wrapper = styled.div({ const list = (filler: (data: number) => ReactElement) => { const data = []; - // eslint-disable-next-line no-plusplus for (let i = 0; i < 20; i++) { data.push(filler(i)); } diff --git a/code/ui/components/src/components/bar/separator.tsx b/code/ui/components/src/components/bar/separator.tsx index 6a24a11d3386..d0606458d042 100644 --- a/code/ui/components/src/components/bar/separator.tsx +++ b/code/ui/components/src/components/bar/separator.tsx @@ -26,7 +26,7 @@ export const interleaveSeparators = (list: any[]) => item ? ( {acc} - {/* eslint-disable-next-line react/no-array-index-key */} + {} {index > 0 ? : null} {item.render() || item} diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index b6a28dbd5119..9b23e884a271 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -26,7 +26,6 @@ interface FibonacciMap { } function fibonacci(num: number, memo?: FibonacciMap): number { - /* eslint-disable no-param-reassign */ if (!memo) { memo = {}; } @@ -39,7 +38,6 @@ function fibonacci(num: number, memo?: FibonacciMap): number { memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo); return memo[num]; - /* eslint-enable no-param-reassign */ } type Panels = Record>; diff --git a/code/ui/components/src/components/typography/DocumentFormatting.tsx b/code/ui/components/src/components/typography/DocumentFormatting.tsx index b6dd2892b343..8811b4452a00 100644 --- a/code/ui/components/src/components/typography/DocumentFormatting.tsx +++ b/code/ui/components/src/components/typography/DocumentFormatting.tsx @@ -1,9 +1,8 @@ export const nameSpaceClassNames = ({ ...props }, key: string) => { const classes = [props.class, props.className]; - // eslint-disable-next-line no-param-reassign + delete props.class; - // eslint-disable-next-line no-param-reassign props.className = ['sbdocs', `sbdocs-${key}`, ...classes].filter(Boolean).join(' '); return props; diff --git a/code/ui/components/src/components/utils/getStoryHref.ts b/code/ui/components/src/components/utils/getStoryHref.ts index 3c74b80036e3..335bead96aa3 100644 --- a/code/ui/components/src/components/utils/getStoryHref.ts +++ b/code/ui/components/src/components/utils/getStoryHref.ts @@ -1,7 +1,7 @@ function parseQuery(queryString: string) { const query: Record = {}; const pairs = queryString.split('&'); - // eslint-disable-next-line no-plusplus + for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts index 8b38d4731439..f43d08b5d8f5 100644 --- a/code/ui/components/src/index.ts +++ b/code/ui/components/src/index.ts @@ -91,7 +91,6 @@ export { withReset, codeCommon } from './components/typography/lib/common'; export { ClipboardCode } from './components/clipboard/ClipboardCode'; -// eslint-disable-next-line prefer-destructuring export const components = typography.components; const resetComponents: Record = {}; diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts index ece5ac50391b..f30ae944c0de 100644 --- a/code/ui/manager/scripts/generate-exports-file.ts +++ b/code/ui/manager/scripts/generate-exports-file.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import fs from 'fs-extra'; import path from 'path'; import { dedent } from 'ts-dedent'; diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 8dd1c2909c2c..e37339445c82 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -21,7 +21,7 @@ class SafeTab extends Component { componentDidCatch(error: Error, info: any) { this.setState({ hasError: true }); - // eslint-disable-next-line no-console + console.error(error, info); } diff --git a/code/ui/manager/src/components/sidebar/Brand.tsx b/code/ui/manager/src/components/sidebar/Brand.tsx index d73bf2b81c0d..aa093da9ac16 100644 --- a/code/ui/manager/src/components/sidebar/Brand.tsx +++ b/code/ui/manager/src/components/sidebar/Brand.tsx @@ -39,7 +39,7 @@ export const Brand = withTheme(({ theme }) => { // When image is explicitly set to null, enable custom HTML support if (image === null) { if (title === null) return null; - // eslint-disable-next-line react/no-danger + if (!url) return
; return ; } diff --git a/code/ui/manager/src/components/sidebar/Explorer.tsx b/code/ui/manager/src/components/sidebar/Explorer.tsx index 7c268b63c896..5f2e87d9352c 100644 --- a/code/ui/manager/src/components/sidebar/Explorer.tsx +++ b/code/ui/manager/src/components/sidebar/Explorer.tsx @@ -1,7 +1,6 @@ import type { FC } from 'react'; import React, { useRef } from 'react'; -// eslint-disable-next-line import/no-cycle import { Ref } from './Refs'; import type { CombinedDataset, Selection } from './types'; diff --git a/code/ui/manager/src/components/sidebar/Loader.tsx b/code/ui/manager/src/components/sidebar/Loader.tsx index 58ab4e3213c7..8bc9f364d135 100644 --- a/code/ui/manager/src/components/sidebar/Loader.tsx +++ b/code/ui/manager/src/components/sidebar/Loader.tsx @@ -48,7 +48,6 @@ export const Loader: FC = ({ size }) => { return ( {sequence.map((depth, index) => ( - // eslint-disable-next-line react/no-array-index-key ))} diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx index 3ce49f5fbfe4..04f90148f7b8 100644 --- a/code/ui/manager/src/components/sidebar/Refs.tsx +++ b/code/ui/manager/src/components/sidebar/Refs.tsx @@ -9,7 +9,6 @@ import { AuthBlock, ErrorBlock, LoaderBlock, EmptyBlock } from './RefBlocks'; import { RefIndicator } from './RefIndicator'; -// eslint-disable-next-line import/no-cycle import { Tree } from './Tree'; import { DEFAULT_REF_ID } from './Sidebar'; diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 57966edd6074..32415c056110 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -1,4 +1,3 @@ -/* eslint-disable import/no-cycle */ import { useStorybookApi, shortcutToHumanString } from '@storybook/manager-api'; import { styled } from '@storybook/theming'; import type { DownshiftState, StateChangeOptions } from 'downshift'; diff --git a/code/ui/manager/src/components/sidebar/SearchResults.tsx b/code/ui/manager/src/components/sidebar/SearchResults.tsx index 6a8708656d59..bfbdde53ce34 100644 --- a/code/ui/manager/src/components/sidebar/SearchResults.tsx +++ b/code/ui/manager/src/components/sidebar/SearchResults.tsx @@ -13,7 +13,7 @@ import { TypeIcon } from './TreeNode'; import type { Match, DownshiftItem, SearchResult } from './types'; import { isExpandType } from './types'; import { matchesKeyCode, matchesModifiers } from '../../keybinding'; -// eslint-disable-next-line import/no-cycle + import { statusMapping } from '../../utils/status'; import { UseSymbol } from './IconSymbols'; @@ -212,7 +212,6 @@ const Result: FC< {item.path.map((group, index) => ( - // eslint-disable-next-line react/no-array-index-key match.arrayIndex === index)}> {group} diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 180870a6892d..3ea23f6b48a5 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -12,11 +12,10 @@ import type { import type { HeadingProps } from './Heading'; import { Heading } from './Heading'; -// eslint-disable-next-line import/no-cycle import { Explorer } from './Explorer'; -// eslint-disable-next-line import/no-cycle + import { Search } from './Search'; -// eslint-disable-next-line import/no-cycle + import { SearchResults } from './SearchResults'; import type { Refs, CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index 04c46a5b101d..d1a566bddf4c 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -18,7 +18,7 @@ import { ExpandAltIcon, CollapseIcon as CollapseIconSvg } from '@storybook/icons import { ComponentNode, DocumentNode, GroupNode, RootNode, StoryNode } from './TreeNode'; import type { ExpandAction, ExpandedState } from './useExpanded'; -// eslint-disable-next-line import/no-cycle + import { useExpanded } from './useExpanded'; import type { Highlight, Item } from './types'; diff --git a/code/ui/manager/src/components/sidebar/useExpanded.ts b/code/ui/manager/src/components/sidebar/useExpanded.ts index 4657c5d3d60c..ba851070e1c2 100644 --- a/code/ui/manager/src/components/sidebar/useExpanded.ts +++ b/code/ui/manager/src/components/sidebar/useExpanded.ts @@ -8,7 +8,6 @@ import { useCallback, useEffect, useReducer } from 'react'; import { matchesKeyCode, matchesModifiers } from '../../keybinding'; import type { Highlight } from './types'; -// eslint-disable-next-line import/no-cycle import { isAncestor, getAncestorIds, getDescendantIds, scrollIntoView } from '../../utils/tree'; const { document } = global; diff --git a/code/ui/manager/src/components/sidebar/useHighlighted.ts b/code/ui/manager/src/components/sidebar/useHighlighted.ts index 8c38358393cb..0010614dce59 100644 --- a/code/ui/manager/src/components/sidebar/useHighlighted.ts +++ b/code/ui/manager/src/components/sidebar/useHighlighted.ts @@ -7,7 +7,6 @@ import { matchesKeyCode, matchesModifiers } from '../../keybinding'; import type { CombinedDataset, Highlight, Selection } from './types'; -// eslint-disable-next-line import/no-cycle import { cycle, isAncestor, scrollIntoView } from '../../utils/tree'; const { document, window: globalWindow } = global; diff --git a/code/ui/manager/src/utils/status.tsx b/code/ui/manager/src/utils/status.tsx index 824b0ab21042..c5ab041663fd 100644 --- a/code/ui/manager/src/utils/status.tsx +++ b/code/ui/manager/src/utils/status.tsx @@ -4,7 +4,7 @@ import type { ReactElement } from 'react'; import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/types'; import { styled } from '@storybook/theming'; -// eslint-disable-next-line import/no-cycle + import { getDescendantIds } from './tree'; const SmallIcons = styled(Icons)({ diff --git a/code/ui/manager/src/utils/tree.ts b/code/ui/manager/src/utils/tree.ts index b51fc84f630a..f2307d78d4a9 100644 --- a/code/ui/manager/src/utils/tree.ts +++ b/code/ui/manager/src/utils/tree.ts @@ -3,7 +3,6 @@ import { global } from '@storybook/global'; import type { SyntheticEvent } from 'react'; import type { HashEntry, IndexHash } from '@storybook/manager-api'; -// eslint-disable-next-line import/no-cycle import { DEFAULT_REF_ID } from '../components/sidebar/Sidebar'; import type { Item, RefType, Dataset, SearchItem } from '../components/sidebar/types'; diff --git a/package.json b/package.json index e0a68082ebda..c770aa307522 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "@storybook/root", + "type": "module", "scripts": { "ci-tests": "cd code; yarn ci-tests", "get-report-message": "cd scripts; yarn get-report-message", From 33cfa64d2c652f01225d6fd7ffd6aff9e4eaaf1b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Jan 2024 13:45:06 +0100 Subject: [PATCH 249/265] ensure single version of monorepo packages --- code/package.json | 6 ++ code/yarn.lock | 159 ++++------------------------------------------ 2 files changed, 18 insertions(+), 147 deletions(-) diff --git a/code/package.json b/code/package.json index 348a98b46b54..43f3782f3de4 100644 --- a/code/package.json +++ b/code/package.json @@ -77,6 +77,12 @@ ], "resolutions": { "@playwright/test": "1.36.0", + "@storybook/client-logger": "workspace:*", + "@storybook/core-events": "workspace:*", + "@storybook/instrumenter": "workspace:*", + "@storybook/preview-api": "workspace:*", + "@storybook/test": "workspace:*", + "@storybook/types": "workspace:*", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", diff --git a/code/yarn.lock b/code/yarn.lock index f15fc86d7aad..49cf78c86a07 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5320,20 +5320,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channels@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/channels@npm:8.0.0-alpha.9" - dependencies: - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/global": "npm:^5.0.0" - qs: "npm:^6.10.0" - telejson: "npm:^7.2.0" - tiny-invariant: "npm:^1.3.1" - checksum: c7465f1d48e0be63f855849c71828906f6f3420411e17a02bebfab441b195c59c12ddbcf8da8a2d630941758b54ca4db1d2ab7850c922ceec394c8264afaf134 - languageName: node - linkType: hard - "@storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": version: 0.0.0-use.local resolution: "@storybook/channels@workspace:lib/channels" @@ -5402,24 +5388,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@npm:7.5.0": - version: 7.5.0 - resolution: "@storybook/client-logger@npm:7.5.0" - dependencies: - "@storybook/global": "npm:^5.0.0" - checksum: 90326c49a224bf21680c04ffee94725bf75658086093ccb839a8aae39476929c4719eafb18e498a148cf0dd956d4e9a5d3b2a34d09ca4fd25e2af553458558ac - languageName: node - linkType: hard - -"@storybook/client-logger@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/client-logger@npm:8.0.0-alpha.9" - dependencies: - "@storybook/global": "npm:^5.0.0" - checksum: bc0527a186d901434ea5e5b1807b56288f74c66ff43ea355762bb643f8e257e9b80be94d60f196178b1019abae2baf5c50d4ffd010ec44ec9c8349abc352bf78 - languageName: node - linkType: hard - "@storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" @@ -5534,15 +5502,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/core-events@npm:8.0.0-alpha.9" - dependencies: - ts-dedent: "npm:^2.0.0" - checksum: 8868baf90e7f5124966d762a69e06678988105b292b9093d74d2ecd5489cbdad6bc421be19b28b75e9e446074f1ef4fc4ee699ad896ed78bbe99ae0e94cfa416 - languageName: node - linkType: hard - "@storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" @@ -5817,21 +5776,6 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/instrumenter@npm:8.0.0-alpha.9" - dependencies: - "@storybook/channels": "npm:8.0.0-alpha.9" - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/global": "npm:^5.0.0" - "@storybook/preview-api": "npm:8.0.0-alpha.9" - "@vitest/utils": "npm:^0.34.6" - util: "npm:^0.12.4" - checksum: 2c1e8953a5e178bb9631878a233623f7df637164bd72d76987431926e81bb3ca6eda71ed1aeda9f21675103c6c5b7e9fba1d3d9a3dd283a821bb11aeea17ac1d - languageName: node - linkType: hard - "@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" @@ -6203,27 +6147,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/preview-api@npm:8.0.0-alpha.9" - dependencies: - "@storybook/channels": "npm:8.0.0-alpha.9" - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/csf": "npm:^0.1.2" - "@storybook/global": "npm:^5.0.0" - "@storybook/types": "npm:8.0.0-alpha.9" - "@types/qs": "npm:^6.9.5" - dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" - memoizerific: "npm:^1.11.3" - qs: "npm:^6.10.0" - ts-dedent: "npm:^2.0.0" - util-deprecate: "npm:^1.0.2" - checksum: 8a911b9d937e5f458fa4f51cda4abf6c3575c11c03bb17f4ca726aa940badcf41ea801bfc947120e440f07a8d3b54a4f14cb1afca94961d28aaec52f5129b072 - languageName: node - linkType: hard - "@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" @@ -6694,26 +6617,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/test@npm:next": - version: 8.0.0-alpha.9 - resolution: "@storybook/test@npm:8.0.0-alpha.9" - dependencies: - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/instrumenter": "npm:8.0.0-alpha.9" - "@storybook/preview-api": "npm:8.0.0-alpha.9" - "@testing-library/dom": "npm:^9.3.1" - "@testing-library/jest-dom": "npm:^6.1.3" - "@testing-library/user-event": "npm:14.3.0" - "@types/chai": "npm:^4" - "@vitest/expect": "npm:^0.34.2" - "@vitest/spy": "npm:^0.34.1" - chai: "npm:^4.3.7" - util: "npm:^0.12.4" - checksum: c5184a0a869f9849d9ef0f02e1c6c79de16b5534746d662355278a6c8bd0f97df3a35e17e5f2c9ba3789b1fae8f8a215f6a88479005ef443275feb653b005498 - languageName: node - linkType: hard - "@storybook/test@workspace:*, @storybook/test@workspace:lib/test": version: 0.0.0-use.local resolution: "@storybook/test@workspace:lib/test" @@ -6786,17 +6689,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/types@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/types@npm:8.0.0-alpha.9" - dependencies: - "@storybook/channels": "npm:8.0.0-alpha.9" - "@types/express": "npm:^4.7.0" - file-system-cache: "npm:2.3.0" - checksum: c40518716905b046b176f9f7ff34748e4561cc669039f02fd15841f1d4320089d3734a41532ea4551ed3b0b18c7900a10b9330e182e07e23325781d5400a8f78 - languageName: node - linkType: hard - "@storybook/types@workspace:*, @storybook/types@workspace:lib/types": version: 0.0.0-use.local resolution: "@storybook/types@workspace:lib/types" @@ -7253,13 +7145,6 @@ __metadata: languageName: node linkType: hard -"@types/chai@npm:^4": - version: 4.3.11 - resolution: "@types/chai@npm:4.3.11" - checksum: 0c216ac4a19bfbf8318bb104d32e50704ee2ffc4b538b976c4326e6638fee121462402caa570662227a2a218810388aadb14bdbd3d3d474ec300b00695db448a - languageName: node - linkType: hard - "@types/color-convert@npm:^2.0.0": version: 2.0.3 resolution: "@types/color-convert@npm:2.0.3" @@ -8444,17 +8329,6 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:^0.34.2": - version: 0.34.7 - resolution: "@vitest/expect@npm:0.34.7" - dependencies: - "@vitest/spy": "npm:0.34.7" - "@vitest/utils": "npm:0.34.7" - chai: "npm:^4.3.10" - checksum: 3ce5b63a51a8c5f585d21768c1dc48dbedbb83b01a6bad07a27db809b53d4e21cfdd059f23815ad8374dfd010e75e279ea0baa7b0fd2bdeffed8afeb53d326ee - languageName: node - linkType: hard - "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch": version: 1.1.3 resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=5d51c9" @@ -8488,15 +8362,6 @@ __metadata: languageName: node linkType: hard -"@vitest/spy@npm:0.34.7, @vitest/spy@npm:^0.34.1": - version: 0.34.7 - resolution: "@vitest/spy@npm:0.34.7" - dependencies: - tinyspy: "npm:^2.1.1" - checksum: 1150b270eb72a5e8e7da997bcba90ebe5ed2ac50de1ea1f81738e16a19ab4bc77ca4d17639988df65695d4b325fe3647a1e4204d01024bcf5ecac8ba7764a2cc - languageName: node - linkType: hard - "@vitest/spy@npm:1.0.4": version: 1.0.4 resolution: "@vitest/spy@npm:1.0.4" @@ -8515,17 +8380,6 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:0.34.7, @vitest/utils@npm:^0.34.6": - version: 0.34.7 - resolution: "@vitest/utils@npm:0.34.7" - dependencies: - diff-sequences: "npm:^29.4.3" - loupe: "npm:^2.3.6" - pretty-format: "npm:^29.5.0" - checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e - languageName: node - linkType: hard - "@vitest/utils@npm:1.0.4": version: 1.0.4 resolution: "@vitest/utils@npm:1.0.4" @@ -8549,6 +8403,17 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:^0.34.6": + version: 0.34.7 + resolution: "@vitest/utils@npm:0.34.7" + dependencies: + diff-sequences: "npm:^29.4.3" + loupe: "npm:^2.3.6" + pretty-format: "npm:^29.5.0" + checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e + languageName: node + linkType: hard + "@volar/language-core@npm:1.10.1, @volar/language-core@npm:~1.10.0": version: 1.10.1 resolution: "@volar/language-core@npm:1.10.1" @@ -27010,7 +26875,7 @@ __metadata: languageName: node linkType: hard -"tinyspy@npm:^2.1.1, tinyspy@npm:^2.2.0": +"tinyspy@npm:^2.2.0": version: 2.2.0 resolution: "tinyspy@npm:2.2.0" checksum: 8c7b70748dd8590e85d52741db79243746c15bc03c92d75c23160a762142db577e7f53e360ba7300e321b12bca5c42dd2522a8dbeec6ba3830302573dd8516bc From 7bb384b099e35d5b97b2d4294609765406c794f0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Jan 2024 14:05:14 +0100 Subject: [PATCH 250/265] Update yarn.lock --- code/yarn.lock | 87 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 83 insertions(+), 4 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 0da80455d7cc..f15fc86d7aad 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5320,6 +5320,20 @@ __metadata: languageName: unknown linkType: soft +"@storybook/channels@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/channels@npm:8.0.0-alpha.9" + dependencies: + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/global": "npm:^5.0.0" + qs: "npm:^6.10.0" + telejson: "npm:^7.2.0" + tiny-invariant: "npm:^1.3.1" + checksum: c7465f1d48e0be63f855849c71828906f6f3420411e17a02bebfab441b195c59c12ddbcf8da8a2d630941758b54ca4db1d2ab7850c922ceec394c8264afaf134 + languageName: node + linkType: hard + "@storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": version: 0.0.0-use.local resolution: "@storybook/channels@workspace:lib/channels" @@ -5397,7 +5411,16 @@ __metadata: languageName: node linkType: hard -"@storybook/client-logger@npm:8.0.0-alpha.9, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": +"@storybook/client-logger@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/client-logger@npm:8.0.0-alpha.9" + dependencies: + "@storybook/global": "npm:^5.0.0" + checksum: bc0527a186d901434ea5e5b1807b56288f74c66ff43ea355762bb643f8e257e9b80be94d60f196178b1019abae2baf5c50d4ffd010ec44ec9c8349abc352bf78 + languageName: node + linkType: hard + +"@storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" dependencies: @@ -5511,7 +5534,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@npm:8.0.0-alpha.9, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": +"@storybook/core-events@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/core-events@npm:8.0.0-alpha.9" + dependencies: + ts-dedent: "npm:^2.0.0" + checksum: 8868baf90e7f5124966d762a69e06678988105b292b9093d74d2ecd5489cbdad6bc421be19b28b75e9e446074f1ef4fc4ee699ad896ed78bbe99ae0e94cfa416 + languageName: node + linkType: hard + +"@storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: @@ -5785,7 +5817,22 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.0.0-alpha.9, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": +"@storybook/instrumenter@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/instrumenter@npm:8.0.0-alpha.9" + dependencies: + "@storybook/channels": "npm:8.0.0-alpha.9" + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/global": "npm:^5.0.0" + "@storybook/preview-api": "npm:8.0.0-alpha.9" + "@vitest/utils": "npm:^0.34.6" + util: "npm:^0.12.4" + checksum: 2c1e8953a5e178bb9631878a233623f7df637164bd72d76987431926e81bb3ca6eda71ed1aeda9f21675103c6c5b7e9fba1d3d9a3dd283a821bb11aeea17ac1d + languageName: node + linkType: hard + +"@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" dependencies: @@ -6156,7 +6203,28 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@npm:8.0.0-alpha.9, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": +"@storybook/preview-api@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/preview-api@npm:8.0.0-alpha.9" + dependencies: + "@storybook/channels": "npm:8.0.0-alpha.9" + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/csf": "npm:^0.1.2" + "@storybook/global": "npm:^5.0.0" + "@storybook/types": "npm:8.0.0-alpha.9" + "@types/qs": "npm:^6.9.5" + dequal: "npm:^2.0.2" + lodash: "npm:^4.17.21" + memoizerific: "npm:^1.11.3" + qs: "npm:^6.10.0" + ts-dedent: "npm:^2.0.0" + util-deprecate: "npm:^1.0.2" + checksum: 8a911b9d937e5f458fa4f51cda4abf6c3575c11c03bb17f4ca726aa940badcf41ea801bfc947120e440f07a8d3b54a4f14cb1afca94961d28aaec52f5129b072 + languageName: node + linkType: hard + +"@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" dependencies: @@ -6718,6 +6786,17 @@ __metadata: languageName: unknown linkType: soft +"@storybook/types@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/types@npm:8.0.0-alpha.9" + dependencies: + "@storybook/channels": "npm:8.0.0-alpha.9" + "@types/express": "npm:^4.7.0" + file-system-cache: "npm:2.3.0" + checksum: c40518716905b046b176f9f7ff34748e4561cc669039f02fd15841f1d4320089d3734a41532ea4551ed3b0b18c7900a10b9330e182e07e23325781d5400a8f78 + languageName: node + linkType: hard + "@storybook/types@workspace:*, @storybook/types@workspace:lib/types": version: 0.0.0-use.local resolution: "@storybook/types@workspace:lib/types" From 036235b74ddfda141372ce2c99ff486e24a1eca3 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 15 Jan 2024 14:55:34 +0100 Subject: [PATCH 251/265] simplify isCanary --- code/lib/cli/src/upgrade.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 23876f933403..29115c4244cf 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -1,6 +1,6 @@ import { sync as spawnSync } from 'cross-spawn'; import { telemetry, getStorybookCoreVersion } from '@storybook/telemetry'; -import semver, { eq, lt, parse, prerelease } from 'semver'; +import semver, { eq, lt, prerelease } from 'semver'; import { logger } from '@storybook/node-logger'; import { withTelemetry } from '@storybook/core-server'; import { @@ -112,12 +112,7 @@ export const doUpgrade = async ({ const beforeVersion = await getStorybookCoreVersion(); const currentVersion = versions['@storybook/cli']; - const currentSemver = parse(currentVersion); - const isCanary = - currentSemver && - currentSemver.major === 0 && - currentSemver.minor === 0 && - currentSemver.patch === 0; + const isCanary = currentVersion.startsWith('0.0.0'); if (!isCanary && lt(currentVersion, beforeVersion)) { throw new UpgradeStorybookToLowerVersionError({ beforeVersion, currentVersion }); From c897845f99e00253696f1bbb09d8d7adfb19edd4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Jan 2024 16:39:12 +0100 Subject: [PATCH 252/265] init when download-dir = before-storybook --- code/lib/cli/src/sandbox.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox.ts b/code/lib/cli/src/sandbox.ts index 0ba72861cb13..5cf2b09bb049 100644 --- a/code/lib/cli/src/sandbox.ts +++ b/code/lib/cli/src/sandbox.ts @@ -218,7 +218,7 @@ export const sandbox = async ( // this is to ensure we DO get the latest version of the template (output of the generator), but we initialize using the version of storybook that the CLI is. // we warned the user about the fact they are running an old version of storybook // we warned the user the sandbox step would take longer - if ((isOutdated || isPrerelease) && init) { + if (downloadType === 'before-storybook' && init) { const before = process.cwd(); process.chdir(templateDestination); // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project From 8176beefcbf92e8bbafe2720113bc597fbd78328 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 15 Jan 2024 17:58:44 +0100 Subject: [PATCH 253/265] Use v4.0.0 of eslint packages --- code/package.json | 5 ++--- code/yarn.lock | 24 +++++++++++++----------- scripts/package.json | 5 ++--- scripts/yarn.lock | 24 +++++++++++++----------- 4 files changed, 30 insertions(+), 28 deletions(-) diff --git a/code/package.json b/code/package.json index f8240f825464..0953df4953cd 100644 --- a/code/package.json +++ b/code/package.json @@ -77,7 +77,6 @@ ], "resolutions": { "@playwright/test": "1.36.0", - "@storybook/linter-config": "portal:/Users/kasperpeulen/code/storybook/linter-config", "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", "esbuild": "^0.18.0", "playwright": "1.36.0", @@ -124,14 +123,14 @@ "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/ember": "workspace:*", - "@storybook/eslint-config-storybook": "^3.1.2", + "@storybook/eslint-config-storybook": "^4.0.0", "@storybook/global": "^5.0.0", "@storybook/html": "workspace:*", "@storybook/html-vite": "workspace:*", "@storybook/html-webpack5": "workspace:*", "@storybook/instrumenter": "workspace:*", "@storybook/jest": "next", - "@storybook/linter-config": "^3.1.2", + "@storybook/linter-config": "^4.0.0", "@storybook/manager": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/nextjs": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index fd171c52ef79..3b2456e35c0e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5812,12 +5812,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/eslint-config-storybook@npm:^3.1.2": - version: 3.1.2 - resolution: "@storybook/eslint-config-storybook@npm:3.1.2" +"@storybook/eslint-config-storybook@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/eslint-config-storybook@npm:4.0.0" dependencies: - "@storybook/linter-config": "npm:3.1.2" - checksum: dc366d302702aa2cfaaaa2c49d361d53355adb8ff59c3f77021c338ab830899b47f4c44f67565628de7a8dfabda5f84c8d8585f3faab97d5098bc4d87fa4802d + "@storybook/linter-config": "npm:4.0.0" + checksum: 03378991e3db17f8ce7dbbe7f29aa5c6b623c1bed35d6ea0fbc7fb73b66b1497fe4793331dacd2de73da7f256751d691104bd51ce20d619d60951ce68837acde languageName: node linkType: hard @@ -5915,11 +5915,12 @@ __metadata: languageName: node linkType: hard -"@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Froot%40workspace%3A.": - version: 0.0.0-use.local - resolution: "@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Froot%40workspace%3A." +"@storybook/linter-config@npm:4.0.0, @storybook/linter-config@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/linter-config@npm:4.0.0" dependencies: "@typescript-eslint/eslint-plugin": "npm:^6.18.1" + "@typescript-eslint/parser": "npm:^6.18.1" eslint-config-airbnb-typescript: "npm:^17.1.0" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-eslint-comments: "npm:^3.2.0" @@ -5937,8 +5938,9 @@ __metadata: remark-preset-lint-recommended: "npm:^6.1.3" peerDependencies: remark: ^14.0.0 || ^15.0.0 + checksum: 1de4e64a80932a529737e95c0604f8781d96aae60d86d448d6e1a612ff382124df552cf750a02bb4900a303e7ca51e08bc922d8d196ec1590c6e2360fa9e1391 languageName: node - linkType: soft + linkType: hard "@storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api": version: 0.0.0-use.local @@ -6458,14 +6460,14 @@ __metadata: "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/ember": "workspace:*" - "@storybook/eslint-config-storybook": "npm:^3.1.2" + "@storybook/eslint-config-storybook": "npm:^4.0.0" "@storybook/global": "npm:^5.0.0" "@storybook/html": "workspace:*" "@storybook/html-vite": "workspace:*" "@storybook/html-webpack5": "workspace:*" "@storybook/instrumenter": "workspace:*" "@storybook/jest": "npm:next" - "@storybook/linter-config": "npm:^3.1.2" + "@storybook/linter-config": "npm:^4.0.0" "@storybook/manager": "workspace:*" "@storybook/manager-api": "workspace:*" "@storybook/nextjs": "workspace:*" diff --git a/scripts/package.json b/scripts/package.json index db8cfddd9eb4..0742f1f0f4f4 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -54,7 +54,6 @@ ] }, "resolutions": { - "@storybook/linter-config": "portal:/Users/kasperpeulen/code/storybook/linter-config", "@testing-library/jest-dom": "^5.11.9", "esbuild": "^0.18.0", "serialize-javascript": "^3.1.0", @@ -77,9 +76,9 @@ "@nx/workspace": "17.0.2", "@octokit/graphql": "^5.0.5", "@octokit/request": "^8.1.2", - "@storybook/eslint-config-storybook": "^3.1.2", + "@storybook/eslint-config-storybook": "^4.0.0", "@storybook/jest": "next", - "@storybook/linter-config": "^3.1.2", + "@storybook/linter-config": "^4.0.0", "@storybook/testing-library": "next", "@testing-library/dom": "^9.3.0", "@testing-library/jest-dom": "^5.11.9", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 1a3585b3cd4f..dc28816721ba 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2821,12 +2821,12 @@ __metadata: languageName: node linkType: hard -"@storybook/eslint-config-storybook@npm:^3.1.2": - version: 3.1.2 - resolution: "@storybook/eslint-config-storybook@npm:3.1.2" +"@storybook/eslint-config-storybook@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/eslint-config-storybook@npm:4.0.0" dependencies: - "@storybook/linter-config": "npm:3.1.2" - checksum: dc366d302702aa2cfaaaa2c49d361d53355adb8ff59c3f77021c338ab830899b47f4c44f67565628de7a8dfabda5f84c8d8585f3faab97d5098bc4d87fa4802d + "@storybook/linter-config": "npm:4.0.0" + checksum: 03378991e3db17f8ce7dbbe7f29aa5c6b623c1bed35d6ea0fbc7fb73b66b1497fe4793331dacd2de73da7f256751d691104bd51ce20d619d60951ce68837acde languageName: node linkType: hard @@ -2851,11 +2851,12 @@ __metadata: languageName: node linkType: hard -"@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Fscripts%40workspace%3A.": - version: 0.0.0-use.local - resolution: "@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Fscripts%40workspace%3A." +"@storybook/linter-config@npm:4.0.0, @storybook/linter-config@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/linter-config@npm:4.0.0" dependencies: "@typescript-eslint/eslint-plugin": "npm:^6.18.1" + "@typescript-eslint/parser": "npm:^6.18.1" eslint-config-airbnb-typescript: "npm:^17.1.0" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-eslint-comments: "npm:^3.2.0" @@ -2873,8 +2874,9 @@ __metadata: remark-preset-lint-recommended: "npm:^6.1.3" peerDependencies: remark: ^14.0.0 || ^15.0.0 + checksum: 1de4e64a80932a529737e95c0604f8781d96aae60d86d448d6e1a612ff382124df552cf750a02bb4900a303e7ca51e08bc922d8d196ec1590c6e2360fa9e1391 languageName: node - linkType: soft + linkType: hard "@storybook/scripts@workspace:.": version: 0.0.0-use.local @@ -2896,9 +2898,9 @@ __metadata: "@nx/workspace": "npm:17.0.2" "@octokit/graphql": "npm:^5.0.5" "@octokit/request": "npm:^8.1.2" - "@storybook/eslint-config-storybook": "npm:^3.1.2" + "@storybook/eslint-config-storybook": "npm:^4.0.0" "@storybook/jest": "npm:next" - "@storybook/linter-config": "npm:^3.1.2" + "@storybook/linter-config": "npm:^4.0.0" "@storybook/testing-library": "npm:next" "@testing-library/dom": "npm:^9.3.0" "@testing-library/jest-dom": "npm:^5.11.9" From 7abbd42b3f31d7269898ead467e53844eab499d1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Jan 2024 21:29:35 +0100 Subject: [PATCH 254/265] Remove deprecated `config` preset and update `previewAnnotations` --- MIGRATION.md | 59 +++++++++++++++---- .../core-server/src/presets/common-preset.ts | 12 ---- code/lib/types/src/modules/core-common.ts | 9 --- 3 files changed, 47 insertions(+), 33 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 670f89c77ac8..4689f4627bb5 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -42,6 +42,7 @@ - [Web Components](#web-components) - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) - [Deprecations which are now removed](#deprecations-which-are-now-removed) + - [Removed `config` preset](#removed-config-preset) - [Removed `passArgsFirst` option](#removed-passargsfirst-option) - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore) - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi) @@ -65,18 +66,20 @@ - [`Primary` Doc block properties](#primary-doc-block-properties) - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) + - [Addon author changes](#addon-author-changes) + - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -102,7 +105,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -115,7 +118,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -165,7 +168,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -800,6 +803,23 @@ Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web ### Deprecations which are now removed +#### Removed `config` preset + +In Storybook 7.0 we have deprecated the preset field `config` and it has been replaced with 'previewAnnotations'. The `config` preset is now completely removed in Storybook 8.0. + +```diff +// .storybook/main.js + +// before +const config = { + framework: "@storybook/your-framework", +- config: (entries) => [...entries, yourEntry], ++ previewAnnotations: (entries) => [...entries, yourEntry], +}; + +export default config; +``` + #### Removed `passArgsFirst` option Since Storybook 6, we have had an option called `parameters.passArgsFirst` (default=`true`), which sallows you to pass the context to the story function first when set to `false.` We have removed this option. In Storybook 8.0, the args are always passed first, and as a second argument, the context is passed. @@ -1012,6 +1032,21 @@ In particular, the following methods on the `StoryStore` are deprecated and will Note that both these methods require initialization, so you should await `preview.ready()`. +### Addon author changes + +#### Removed `config` preset + +In Storybook 7.0 we have deprecated the preset field `config` and it has been replaced with `previewAnnotations`. The `config` preset is now completely removed in Storybook 8.0. + +```diff +// your-addon/preset.js + +module.exports = { +- config: (entries = []) => [...entries, ...yourEntry], ++ previewAnnotations: (entries = []) => [...entries, ...yourEntry], +}; +``` + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 15fb3bfceb26..aa349043eb4d 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -173,18 +173,6 @@ export const core = async (existing: CoreConfig, options: Options): Promise { - const config = await options.presets.apply('config', [], options); - - if (config.length > 0) { - deprecate( - `You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0` - ); - } - - return [...config, ...base]; -}; - export const features: PresetProperty<'features'> = async (existing) => ({ ...existing, argTypeTargetsV7: true, diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 377081831972..ae6921115ec8 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -398,8 +398,6 @@ export interface StorybookConfigRaw { // We cannot use a particular Babel type here because we need to support a variety of versions babelDefault?: any; - config?: Entry[]; - previewAnnotations?: Entry[]; experimental_indexers?: Indexer[]; @@ -483,13 +481,6 @@ export interface StorybookConfig { */ babelDefault?: PresetValue; - /** - * Add additional scripts to run in the preview a la `.storybook/preview.js` - * - * @deprecated use `previewAnnotations` or `/preview.js` file instead - */ - config?: PresetValue; - /** * Add additional scripts to run in the preview a la `.storybook/preview.js` */ From a53c320fb2e057a7a520712270ba1cb364d7292b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 16 Jan 2024 15:36:24 +0800 Subject: [PATCH 255/265] CSF-tools: Optimize storySort handling --- code/lib/csf-tools/src/getStorySortParameter.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/csf-tools/src/getStorySortParameter.ts b/code/lib/csf-tools/src/getStorySortParameter.ts index 70d323d4edd6..26b4ee3325b5 100644 --- a/code/lib/csf-tools/src/getStorySortParameter.ts +++ b/code/lib/csf-tools/src/getStorySortParameter.ts @@ -98,6 +98,9 @@ const parseDefault = (defaultExpr: t.Expression, program: t.Program): t.Expressi }; export const getStorySortParameter = (previewCode: string) => { + // don't even try to process the file + if (!previewCode.includes('storySort')) return undefined; + let storySort: t.Expression | undefined; const ast = babelParse(previewCode); traverse.default(ast, { From 167ce756d2ebf6aadf44341c596322ce35f31c84 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 16 Jan 2024 09:17:18 +0100 Subject: [PATCH 256/265] Remove unused import --- code/lib/core-server/src/presets/common-preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index aa349043eb4d..db67ca08bb47 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -1,5 +1,5 @@ import fs, { pathExists, readFile } from 'fs-extra'; -import { deprecate, logger } from '@storybook/node-logger'; +import { logger } from '@storybook/node-logger'; import { telemetry } from '@storybook/telemetry'; import { findConfigFile, From feb02f87f7611868d13462441f9554700f99e873 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 12 Dec 2023 17:46:50 +0100 Subject: [PATCH 257/265] Pass jsConfig to Next.js SWC Loader and load Next.js config with default --- code/frameworks/nextjs/src/config/webpack.ts | 4 +- code/frameworks/nextjs/src/preset.ts | 1 - code/frameworks/nextjs/src/swc/loader.ts | 4 ++ code/frameworks/nextjs/src/utils.ts | 42 ++------------------ 4 files changed, 9 insertions(+), 42 deletions(-) diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index be2a983fceec..1abc8684c4d5 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/code/frameworks/nextjs/src/config/webpack.ts @@ -15,13 +15,11 @@ const tryResolve = (path: string) => { export const configureConfig = async ({ baseConfig, nextConfigPath, - configDir, }: { baseConfig: WebpackConfig; nextConfigPath?: string; - configDir: string; }): Promise => { - const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir }); + const nextConfig = await resolveNextConfig({ nextConfigPath }); addScopedAlias(baseConfig, 'next/config'); if (tryResolve('next/dist/compiled/react')) { diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index da332d81e4ef..d1bdb71527bf 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -146,7 +146,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const nextConfig = await configureConfig({ baseConfig, nextConfigPath, - configDir: options.configDir, }); const babelRCPath = join(getProjectRoot(), '.babelrc'); diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 255305d0b713..d1b5c6e7ab98 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -3,6 +3,7 @@ import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; +import loadJsConfig from 'next/dist/build/load-jsconfig'; export const configureSWCLoader = async ( baseConfig: any, @@ -15,6 +16,8 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); + const { jsConfig } = await loadJsConfig(dir, nextConfig as any); + baseConfig.module.rules = [ ...baseConfig.module.rules, { @@ -32,6 +35,7 @@ export const configureSWCLoader = async ( pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, hasReactRefresh: isDevelopment, + jsConfig, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts index c119db2dbff7..6429ed718759 100644 --- a/code/frameworks/nextjs/src/utils.ts +++ b/code/frameworks/nextjs/src/utils.ts @@ -1,11 +1,10 @@ import path from 'path'; import { DefinePlugin } from 'webpack'; import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'; -import findUp from 'find-up'; -import { pathExists } from 'fs-extra'; import type { Configuration as WebpackConfig } from 'webpack'; import type { NextConfig } from 'next'; -import { pathToFileURL } from 'node:url'; +import loadConfig from 'next/dist/server/config'; +import { getProjectRoot } from '@storybook/core-common'; export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfig): void => { baseConfig.plugins?.push( @@ -17,46 +16,13 @@ export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfi export const getNextjsVersion = (): string => require(scopedResolve('next/package.json')).version; -const findNextConfigFile = async (configDir: string) => { - const supportedExtensions = ['mjs', 'js']; - return supportedExtensions.reduce>( - async (acc, ext: string | undefined) => { - const resolved = await acc; - if (!resolved) { - acc = findUp(`next.config.${ext}`, { cwd: configDir }); - } - - return acc; - }, - Promise.resolve(undefined) - ); -}; - export const resolveNextConfig = async ({ - baseConfig = {}, nextConfigPath, - configDir, }: { - baseConfig?: WebpackConfig; nextConfigPath?: string; - configDir: string; }): Promise => { - const nextConfigFile = nextConfigPath || (await findNextConfigFile(configDir)); - - if (!nextConfigFile || (await pathExists(nextConfigFile)) === false) { - return {}; - } - - const nextConfigExport = await import(pathToFileURL(nextConfigFile).href); - - const nextConfig = - typeof nextConfigExport === 'function' - ? nextConfigExport(PHASE_DEVELOPMENT_SERVER, { - defaultConfig: baseConfig, - }) - : nextConfigExport; - - return nextConfig.default || nextConfig; + const dir = nextConfigPath ? path.dirname(nextConfigPath) : getProjectRoot(); + return loadConfig(PHASE_DEVELOPMENT_SERVER, dir, undefined); }; // This is to help the addon in development From 98cdbf9c61e997a91118d69f46007b3becf04add Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 12 Dec 2023 18:06:21 +0100 Subject: [PATCH 258/265] Activate Next.js 13 sandbox --- code/lib/cli/src/sandbox-templates.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index a882d2be3bba..d909792fc4e6 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -129,7 +129,6 @@ const baseTemplates = { extraDependencies: ['server-only'], }, skipTasks: ['e2e-tests-dev', 'bench'], - inDevelopment: true, }, 'nextjs/default-js': { name: 'Next.js Latest (Webpack | JavaScript)', From d2e6f238722277fc4e862fdafb3294d93c8a1123 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 13 Dec 2023 14:45:21 +0100 Subject: [PATCH 259/265] Fix generation of Next.js 13 sandbox --- code/lib/cli/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index d909792fc4e6..8451d086194e 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -116,7 +116,7 @@ const baseTemplates = { 'nextjs/13-ts': { name: 'Next.js v13.5 (Webpack | TypeScript)', script: - 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12.2.0" && yarn && git add . && git commit --amend --no-edit && cd ..', + 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', From 39660d67c9be7788b7d3a6a48043df859d2c3c39 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 27 Dec 2023 08:55:48 +0100 Subject: [PATCH 260/265] Fix parallelism --- .circleci/config.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5aa1adf2ec7f..8e93487dd40a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -706,22 +706,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 32 + parallelism: 33 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 32 + parallelism: 33 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 29 + parallelism: 30 requires: - build-sandboxes - e2e-production: - parallelism: 27 + parallelism: 28 requires: - build-sandboxes - e2e-dev: @@ -729,7 +729,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 27 + parallelism: 28 requires: - build-sandboxes From fddbcff7565ba6423975ed5241acdd189d77f0b5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Jan 2024 09:59:31 +0100 Subject: [PATCH 261/265] Fix eslint in snapshots --- .../8140-js-prop-types-oneof/docgen.snapshot | 2 -- .../8428-js-static-prop-types/docgen.snapshot | 4 ---- .../stories/docgen-components/9023-js-hoc/docgen.snapshot | 4 ---- .../docgen-components/9465-ts-type-props/docgen.snapshot | 5 +---- .../9556-ts-react-default-exports/docgen.snapshot | 1 - .../docgen-components/9586-js-react-memo/docgen.snapshot | 1 - .../9668-js-proptypes-no-jsdoc/docgen.snapshot | 3 --- .../template/stories/docgen-components/jsdoc/docgen.snapshot | 1 - 8 files changed, 1 insertion(+), 20 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot index 1ceef4f786bf..961e7e2368c0 100644 --- a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot @@ -1,5 +1,3 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; const Alert = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot index 25027c025e27..51b837feb2b6 100644 --- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot @@ -1,12 +1,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; - -// eslint-disable-next-line react/prefer-stateless-function export default class Test extends React.Component { render() { return /*#__PURE__*/React.createElement("div", null, "test"); diff --git a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot index a700c46c8eb6..8ce2304c42ca 100644 --- a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot @@ -1,7 +1,3 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/prefer-stateless-function */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot index 160336db5afd..4be33fd4eadd 100644 --- a/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot @@ -2,10 +2,7 @@ import React from 'react'; const Component = ({ disabled = false, children -}) => -/*#__PURE__*/ -// eslint-disable-next-line react/button-has-type -React.createElement("button", { +}) => /*#__PURE__*/React.createElement("button", { disabled: disabled }, children); export const component = Component; diff --git a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot index b8a990334c99..deeed4ffa007 100644 --- a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot @@ -1,5 +1,4 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -/* eslint-disable react/button-has-type */ import React from 'react'; export const Button = ({ isDisabled = false, diff --git a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot index d50edbe41be8..434fea936e30 100644 --- a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot @@ -4,7 +4,6 @@ function Button({ label, onClick }) { - // eslint-disable-next-line react/button-has-type return /*#__PURE__*/React.createElement("button", { onClick: onClick }, label); diff --git a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot index f11733fbfdbf..bf77d5ab99e5 100644 --- a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot @@ -1,6 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; const CCTable = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot index 2f7812a35999..bd8d15a3ac75 100644 --- a/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot @@ -1,4 +1,3 @@ -/* eslint-disable react/require-default-props, react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; const JsDocProps = () => /*#__PURE__*/React.createElement("div", null, "JSDoc with PropTypes!"); From f673d39a21f0c1dfeb9a5572c37847922aec7e45 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Jan 2024 10:55:37 +0100 Subject: [PATCH 262/265] Remove not defined variable --- .../template/stories/docgen-components/js-proptypes/input.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx index b47eadfbc921..a6eb20abddb3 100644 --- a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx @@ -398,8 +398,6 @@ PropTypesProps.defaultProps = { funcWithJsDoc: (foo, bar) => { const yo = window.document; - const pouf = souffle; - return { foo, bar }; }, namedDefaultFunc: concat, From c0037961c54681d2cca03ee29103145d3ca0f627 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 16 Jan 2024 11:06:28 +0100 Subject: [PATCH 263/265] Remove unused ts-expect-error comment --- .../builders/builder-webpack5/src/loaders/export-order-loader.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts index 2eea4bb4a870..f57c3a16eb66 100644 --- a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts +++ b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts @@ -1,5 +1,4 @@ import assert from 'assert'; -// @ts-expect-error No types import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer'; import { parse as parseEs } from 'es-module-lexer'; import MagicString from 'magic-string'; From fddd249d00ec0b34746fad0ee3591859b390b775 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 16 Jan 2024 13:44:48 +0100 Subject: [PATCH 264/265] Remove inDevelopment flag from internal webpack5-babel template --- .circleci/config.yml | 68 +++++++++++++-------------- code/lib/cli/src/sandbox-templates.ts | 1 - 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8e93487dd40a..b212c825ddc2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -4,8 +4,8 @@ parameters: workflow: description: Which workflow to run type: enum - enum: ['normal', 'merged', 'daily', 'skipped', 'docs'] - default: 'skipped' + enum: ["normal", "merged", "daily", "skipped", "docs"] + default: "skipped" executors: sb_node_16_classic: @@ -13,8 +13,8 @@ executors: class: description: The Resource class type: enum - enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] - default: 'small' + enum: ["small", "medium", "medium+", "large", "xlarge"] + default: "small" working_directory: /tmp/storybook docker: - image: cimg/node:18.18.0 @@ -26,8 +26,8 @@ executors: class: description: The Resource class type: enum - enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] - default: 'small' + enum: ["small", "medium", "medium+", "large", "xlarge"] + default: "small" working_directory: /tmp/storybook docker: - image: cimg/node:18.18.0-browsers @@ -39,8 +39,8 @@ executors: class: description: The Resource class type: enum - enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] - default: 'small' + enum: ["small", "medium", "medium+", "large", "xlarge"] + default: "small" working_directory: /tmp/storybook docker: - image: mcr.microsoft.com/playwright:v1.36.0-focal @@ -56,7 +56,7 @@ orbs: commands: cancel-workflow-on-failure: - description: 'Cancels the entire workflow in case the previous step has failed' + description: "Cancels the entire workflow in case the previous step has failed" steps: - run: name: Cancel current workflow @@ -66,13 +66,13 @@ commands: echo "To execute all checks locally, please run yarn ci-tests" curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}" report-workflow-on-failure: - description: 'Reports failures to discord' + description: "Reports failures to discord" parameters: template: description: | Which template to report in discord. Applicable for parallel sandbox jobs type: string - default: 'none' + default: "none" steps: - run: when: on_fail @@ -88,7 +88,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - restore_cache: name: Restore Yarn cache keys: @@ -114,7 +114,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - restore_cache: name: Restore Yarn cache keys: @@ -157,7 +157,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -173,7 +173,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -187,7 +187,7 @@ jobs: executor: sb_node_16_browsers steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -215,7 +215,7 @@ jobs: name: sb_node_16_browsers steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -237,7 +237,7 @@ jobs: name: sb_node_16_browsers steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - codecov/upload @@ -273,7 +273,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -297,7 +297,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -317,7 +317,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -356,7 +356,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -376,7 +376,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -415,7 +415,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -438,7 +438,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -461,7 +461,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -483,7 +483,7 @@ jobs: type: string steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - when: @@ -706,22 +706,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 33 + parallelism: 34 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 33 + parallelism: 34 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-production: - parallelism: 28 + parallelism: 29 requires: - build-sandboxes - e2e-dev: @@ -729,7 +729,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 28 + parallelism: 29 requires: - build-sandboxes @@ -744,14 +744,14 @@ workflows: # - "yarn1" # - "yarn2" # - "pnpm" - template: + template: - "react-vite-ts" - "nextjs-ts" - "vue-vite-ts" # --smoke-test is not supported for the angular builder right now # - "angular-cli" - "lit-vite-ts" - + # TODO: reenable once we find out the source of flakyness # - test-runner-dev: # parallelism: 4 diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 8451d086194e..d470e06e6ffe 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -499,7 +499,6 @@ const internalTemplates = { ), }, isInternal: true, - inDevelopment: true, skipTasks: ['e2e-tests-dev', 'bench'], }, 'internal/react16-webpack': { From fc05211a981cf4b2c6596d128adffde110ae5a95 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Jan 2024 16:32:56 +0100 Subject: [PATCH 265/265] Only add @storybook/theming to resolutions --- code/package.json | 9 ++------- code/yarn.lock | 19 ++----------------- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/code/package.json b/code/package.json index f47fbb71b8ff..f1eaf0f85c44 100644 --- a/code/package.json +++ b/code/package.json @@ -77,12 +77,7 @@ ], "resolutions": { "@playwright/test": "1.36.0", - "@storybook/client-logger": "workspace:*", - "@storybook/core-events": "workspace:*", - "@storybook/instrumenter": "workspace:*", - "@storybook/preview-api": "workspace:*", - "@storybook/test": "workspace:*", - "@storybook/types": "workspace:*", + "@storybook/theming": "workspace:*", "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", "esbuild": "^0.18.0", "playwright": "1.36.0", @@ -162,7 +157,7 @@ "@storybook/svelte": "workspace:*", "@storybook/svelte-webpack5": "workspace:*", "@storybook/telemetry": "workspace:*", - "@storybook/test": "next", + "@storybook/test": "workspace:*", "@storybook/testing-library": "next", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 54e625cf8ce0..04e71212fdee 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2613,7 +2613,7 @@ __metadata: languageName: node linkType: hard -"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0, @emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" peerDependencies: @@ -6448,7 +6448,7 @@ __metadata: "@storybook/svelte": "workspace:*" "@storybook/svelte-webpack5": "workspace:*" "@storybook/telemetry": "workspace:*" - "@storybook/test": "npm:next" + "@storybook/test": "workspace:*" "@storybook/testing-library": "npm:next" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" @@ -6723,21 +6723,6 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:^7.0.2": - version: 7.5.0 - resolution: "@storybook/theming@npm:7.5.0" - dependencies: - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0" - "@storybook/client-logger": "npm:7.5.0" - "@storybook/global": "npm:^5.0.0" - memoizerific: "npm:^1.11.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 57da8e27c748cbec4dc1661cdd2d449949d97476d8e97933696b31d07c7361cbbcca8d7225cc00ca078daa160023b8965ddec7c23519ce0a4ef2658246b062e7 - languageName: node - linkType: hard - "@storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming"