From ff7b7e176737a67fa73b655175e11f1433f3241b Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 6 Sep 2023 21:12:16 +0200 Subject: [PATCH 01/44] Svelte: Always inject doc metadata --- .../svelte-vite/src/plugins/svelte-docgen.ts | 19 +++++++------ .../src/svelte-docgen-loader.ts | 27 ++++++++++--------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index b9e8ac5fa762..7f6dc2314a5f 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -79,21 +79,24 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt const s = new MagicString(src); + let componentDoc: any; try { - const componentDoc = await svelteDoc.parse(options); - // get filename for source content - const file = path.basename(resource); - - componentDoc.name = path.basename(file); - - const componentName = getNameFromFilename(resource); - s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`); + componentDoc = await svelteDoc.parse(options); } catch (error: any) { + componentDoc = { keywords: [], data: [] }; if (logDocgen) { logger.error(error); } } + // get filename for source content + const file = path.basename(resource); + + componentDoc.name = path.basename(file); + + const componentName = getNameFromFilename(resource); + s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`); + return { code: s.toString(), map: s.generateMap({ hires: true, source: id }), diff --git a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts index 5267e73a317a..b8c6ae1a656d 100644 --- a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts +++ b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts @@ -73,27 +73,30 @@ export default async function svelteDocgen(this: any, source: string) { let docgen = ''; + let componentDoc: any; try { // FIXME // @ts-expect-error (Converted from ts-ignore) - const componentDoc = await svelteDoc.parse(options); + componentDoc = await svelteDoc.parse(options); + } catch (error) { + componentDoc = { keywords: [], data: [] }; + if (logDocgen) { + logger.error(error as any); + } + } - // get filename for source content - const file = path.basename(resource); + // get filename for source content + const file = path.basename(resource); - // populate filename in docgen - componentDoc.name = path.basename(file); + // populate filename in docgen + componentDoc.name = path.basename(file); - const componentName = getNameFromFilename(resource); + const componentName = getNameFromFilename(resource); - docgen = dedent` + docgen = dedent` ${componentName}.__docgen = ${JSON.stringify(componentDoc)}; `; - } catch (error) { - if (logDocgen) { - logger.error(error as any); - } - } + // inject __docgen prop in svelte component const output = source + docgen; From 4f6667dcb1cb42a4920920984b84e33743c8fb3f Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 6 Sep 2023 21:18:25 +0200 Subject: [PATCH 02/44] Svelte: Fix parsing of ecma v12 by sveltedoc-parser --- .../svelte-vite/src/plugins/svelte-docgen.ts | 16 ++++++++++++++++ .../svelte-webpack/src/svelte-docgen-loader.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 7f6dc2314a5f..6f46d8be1a2e 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -8,6 +8,22 @@ import { logger } from '@storybook/node-logger'; import { preprocess } from 'svelte/compiler'; import { createFilter } from 'vite'; +/* + * Patch sveltedoc-parser internal options. + * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87 + */ +const svelteDocParserOptions = require('sveltedoc-parser/lib/options.js'); + +svelteDocParserOptions.getAstDefaultOptions = () => ({ + range: true, + loc: true, + comment: true, + tokens: true, + ecmaVersion: 12, + sourceType: 'module', + ecmaFeatures: {}, +}); + // Most of the code here should probably be exported by @storybook/svelte and reused here. // See: https://github.com/storybookjs/storybook/blob/next/app/svelte/src/server/svelte-docgen-loader.ts diff --git a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts index b8c6ae1a656d..f83055132059 100644 --- a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts +++ b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts @@ -5,6 +5,22 @@ import * as fs from 'fs'; import { preprocess } from 'svelte/compiler'; import { logger } from '@storybook/node-logger'; +/* + * Patch sveltedoc-parser internal options. + * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87 + */ +const svelteDocParserOptions = require('sveltedoc-parser/lib/options.js'); + +svelteDocParserOptions.getAstDefaultOptions = () => ({ + range: true, + loc: true, + comment: true, + tokens: true, + ecmaVersion: 12, + sourceType: 'module', + ecmaFeatures: {}, +}); + // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts // Copied because it is not exported from the compiler function getNameFromFilename(filename: string) { From e0fb28981d2f6f76968ff4f420fe43c783b8607e Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Sat, 9 Sep 2023 17:51:30 +0200 Subject: [PATCH 03/44] Adding e2e to test Svelte documentation --- code/e2e-tests/framework-svelte.spec.ts | 30 +++++++++++++++++++ .../svelte/template/cli/js/Button.svelte | 3 +- .../svelte/template/cli/ts-3-8/Button.svelte | 3 +- .../svelte/template/cli/ts-4-9/Button.svelte | 3 +- .../svelte/template/components/Button.svelte | 3 +- 5 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 code/e2e-tests/framework-svelte.spec.ts diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts new file mode 100644 index 000000000000..b2a3dbf41672 --- /dev/null +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -0,0 +1,30 @@ +/* eslint-disable jest/no-disabled-tests */ +import type { Locator } from '@playwright/test'; +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006'; +const templateName = process.env.STORYBOOK_TEMPLATE_NAME; + +test.describe('Svelte', () => { + test.skip( + // eslint-disable-next-line jest/valid-title + !templateName?.includes('svelte') || templateName?.includes('-ts'), + 'Only run this test on Svelte with javascript' + ); + + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); + }); + + test('Story have a documentation', async ({ page }) => { + const sbPage = new SbPage(page); + + sbPage.navigateToStory('example/button', 'docs'); + const root = sbPage.previewRoot(); + const argsTable = root.locator('.docblock-argstable'); + await expect(argsTable).toContainText('Is this the principal call to action on the page'); + }); +}); diff --git a/code/renderers/svelte/template/cli/js/Button.svelte b/code/renderers/svelte/template/cli/js/Button.svelte index a2a78d9d0d6f..de99698d769e 100644 --- a/code/renderers/svelte/template/cli/js/Button.svelte +++ b/code/renderers/svelte/template/cli/js/Button.svelte @@ -24,6 +24,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte index dfc4bbd4c037..977d766f3559 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte @@ -22,6 +22,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte index f590a0aff55e..0c551e54f84f 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte @@ -22,6 +22,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/components/Button.svelte b/code/renderers/svelte/template/components/Button.svelte index 4b80e84b8132..07f18594ace0 100644 --- a/code/renderers/svelte/template/components/Button.svelte +++ b/code/renderers/svelte/template/components/Button.svelte @@ -24,6 +24,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator const dispatch = createEventDispatcher(); @@ -41,5 +42,5 @@ {style} on:click={onClick} > - {label} + {text} From 4f5351151c7bce95e55a0eec528d02993af77cf0 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Tue, 12 Sep 2023 20:13:36 +0200 Subject: [PATCH 04/44] Svelte: Fix documentation for typescript component with vite --- code/e2e-tests/framework-svelte.spec.ts | 5 ++-- code/frameworks/svelte-vite/package.json | 1 + .../svelte-vite/src/plugins/svelte-docgen.ts | 23 ++++++++++++++++--- code/yarn.lock | 1 + 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index b2a3dbf41672..3bf8d5d39abf 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -1,5 +1,4 @@ /* eslint-disable jest/no-disabled-tests */ -import type { Locator } from '@playwright/test'; import { test, expect } from '@playwright/test'; import process from 'process'; import { SbPage } from './util'; @@ -10,8 +9,8 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME; test.describe('Svelte', () => { test.skip( // eslint-disable-next-line jest/valid-title - !templateName?.includes('svelte') || templateName?.includes('-ts'), - 'Only run this test on Svelte with javascript' + !templateName?.includes('svelte'), + 'Only run this test on Svelte' ); test.beforeEach(async ({ page }) => { diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index ddbf5fc5488b..95ed91f74d38 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -52,6 +52,7 @@ "@storybook/svelte": "workspace:*", "@sveltejs/vite-plugin-svelte": "^2.4.2", "magic-string": "^0.30.0", + "svelte-preprocess": "^5.0.4", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.2.0" }, diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 6f46d8be1a2e..5dfe00afd766 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -7,6 +7,7 @@ import type { SvelteParserOptions } from 'sveltedoc-parser'; import { logger } from '@storybook/node-logger'; import { preprocess } from 'svelte/compiler'; import { createFilter } from 'vite'; +import { replace, typescript } from 'svelte-preprocess'; /* * Patch sveltedoc-parser internal options. @@ -60,10 +61,26 @@ function getNameFromFilename(filename: string) { export function svelteDocgen(svelteOptions: Record = {}): PluginOption { const cwd = process.cwd(); - const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; + const { preprocess: preprocessOptions, docPreprocess, logDocgen = false } = svelteOptions; const include = /\.(svelte)$/; const filter = createFilter(include); + let docPreprocessOptions = docPreprocess; + if (!docPreprocessOptions && preprocessOptions) { + /* + * We can't use vitePreprocess() for the documentation. + * This preprocessor uses esbuild which removes jsdoc. + * + * By default, only typescript is transpiled, and style tags are removed. + * This can be configured with the `docPreprocess` options. + * + * Note: theses preprocessors are only used to make the component + * compatible to sveltedoc-parser (no ts), not to compile + * the component. + */ + docPreprocessOptions = [typescript(), replace([[//gims, '']])]; + } + return { name: 'storybook:svelte-docgen-plugin', async transform(src: string, id: string) { @@ -72,11 +89,11 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt const resource = path.relative(cwd, id); let docOptions; - if (preprocessOptions) { + if (docPreprocessOptions) { // eslint-disable-next-line @typescript-eslint/no-shadow const src = fs.readFileSync(resource).toString(); - const { code: fileContent } = await preprocess(src, preprocessOptions, { + const { code: fileContent } = await preprocess(src, docPreprocessOptions, { filename: resource, }); diff --git a/code/yarn.lock b/code/yarn.lock index 1ab170d5bbc7..13d2baf97661 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8050,6 +8050,7 @@ __metadata: "@types/node": ^16.0.0 magic-string: ^0.30.0 svelte: ^4.0.0 + svelte-preprocess: ^5.0.4 sveltedoc-parser: ^4.2.1 ts-dedent: ^2.2.0 typescript: ~4.9.3 From a1860c02d5a9991bc4c88f77c23bb7606f9df8b7 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 13 Sep 2023 19:20:43 +0200 Subject: [PATCH 05/44] Fix e2e tests --- code/e2e-tests/framework-svelte.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 3bf8d5d39abf..d8821bde95cc 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -21,7 +21,7 @@ test.describe('Svelte', () => { test('Story have a documentation', async ({ page }) => { const sbPage = new SbPage(page); - sbPage.navigateToStory('example/button', 'docs'); + await sbPage.navigateToStory('example/button', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); await expect(argsTable).toContainText('Is this the principal call to action on the page'); From 048d7c661320abab820af54ccf601630088524fd Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Thu, 14 Sep 2023 21:10:13 +0200 Subject: [PATCH 06/44] Move e2e tests into ButtonView --- code/e2e-tests/framework-svelte.spec.ts | 4 ++-- code/renderers/svelte/template/cli/js/Button.svelte | 3 +-- .../svelte/template/cli/ts-3-8/Button.svelte | 3 +-- .../svelte/template/cli/ts-4-9/Button.svelte | 3 +-- .../svelte/template/components/Button.svelte | 3 +-- .../renderers/svelte/template/stories/docs.stories.js | 11 +++++++++++ .../svelte/template/stories/views/ButtonView.svelte | 6 +++--- 7 files changed, 20 insertions(+), 13 deletions(-) create mode 100644 code/renderers/svelte/template/stories/docs.stories.js diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index d8821bde95cc..09136254b0f0 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -21,9 +21,9 @@ test.describe('Svelte', () => { test('Story have a documentation', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('example/button', 'docs'); + await sbPage.navigateToStory('stories/renderers/svelte/docs', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); - await expect(argsTable).toContainText('Is this the principal call to action on the page'); + await expect(argsTable).toContainText('Rounds the button'); }); }); diff --git a/code/renderers/svelte/template/cli/js/Button.svelte b/code/renderers/svelte/template/cli/js/Button.svelte index de99698d769e..a2a78d9d0d6f 100644 --- a/code/renderers/svelte/template/cli/js/Button.svelte +++ b/code/renderers/svelte/template/cli/js/Button.svelte @@ -24,7 +24,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte index 977d766f3559..dfc4bbd4c037 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte @@ -22,7 +22,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte index 0c551e54f84f..f590a0aff55e 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte @@ -22,7 +22,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/components/Button.svelte b/code/renderers/svelte/template/components/Button.svelte index 07f18594ace0..4b80e84b8132 100644 --- a/code/renderers/svelte/template/components/Button.svelte +++ b/code/renderers/svelte/template/components/Button.svelte @@ -24,7 +24,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator const dispatch = createEventDispatcher(); @@ -42,5 +41,5 @@ {style} on:click={onClick} > - {text} + {label} diff --git a/code/renderers/svelte/template/stories/docs.stories.js b/code/renderers/svelte/template/stories/docs.stories.js new file mode 100644 index 000000000000..56337bab7303 --- /dev/null +++ b/code/renderers/svelte/template/stories/docs.stories.js @@ -0,0 +1,11 @@ +import ButtonView from './views/ButtonView.svelte'; + +export default { + component: ButtonView, + args: { + primary: true, + }, + tags: ['autodocs'], +}; + +export const Primary = {}; diff --git a/code/renderers/svelte/template/stories/views/ButtonView.svelte b/code/renderers/svelte/template/stories/views/ButtonView.svelte index 201981d8df35..900949a1b8ce 100644 --- a/code/renderers/svelte/template/stories/views/ButtonView.svelte +++ b/code/renderers/svelte/template/stories/views/ButtonView.svelte @@ -1,10 +1,10 @@ - From d3b51fa4efd468c995bfa6d56f16d6f824f6c97f Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Sun, 17 Sep 2023 20:42:01 +0200 Subject: [PATCH 07/44] Remove the possibility to configure doc preprocessors --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 5dfe00afd766..2c2bccfc3a8e 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -61,18 +61,17 @@ function getNameFromFilename(filename: string) { export function svelteDocgen(svelteOptions: Record = {}): PluginOption { const cwd = process.cwd(); - const { preprocess: preprocessOptions, docPreprocess, logDocgen = false } = svelteOptions; + const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; const include = /\.(svelte)$/; const filter = createFilter(include); - let docPreprocessOptions = docPreprocess; - if (!docPreprocessOptions && preprocessOptions) { + let docPreprocessOptions: any = null; + if (preprocessOptions) { /* * We can't use vitePreprocess() for the documentation. * This preprocessor uses esbuild which removes jsdoc. * * By default, only typescript is transpiled, and style tags are removed. - * This can be configured with the `docPreprocess` options. * * Note: theses preprocessors are only used to make the component * compatible to sveltedoc-parser (no ts), not to compile From 70d43ab43aa7aae7125c7b54ed855f638b37eea8 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Mon, 18 Sep 2023 20:40:54 +0200 Subject: [PATCH 08/44] Ignore type checking of globalThis --- code/renderers/svelte/template/stories/views/ButtonView.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/code/renderers/svelte/template/stories/views/ButtonView.svelte b/code/renderers/svelte/template/stories/views/ButtonView.svelte index 900949a1b8ce..d4bccf149006 100644 --- a/code/renderers/svelte/template/stories/views/ButtonView.svelte +++ b/code/renderers/svelte/template/stories/views/ButtonView.svelte @@ -4,6 +4,7 @@ * @wrapper */ import { global as globalThis } from '@storybook/global'; + // @ts-ignore const Button = globalThis.Components?.Button; /** From 1a75c1cf35e89b4b50f7691fc885b2255f255d1b Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:05:30 -0400 Subject: [PATCH 09/44] Add Vite 5 to peer dependencies --- code/builders/builder-vite/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/vue-vite/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 6e0cc80db781..23e46183d29b 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -72,7 +72,7 @@ "peerDependencies": { "@preact/preset-vite": "*", "typescript": ">= 4.3.x", - "vite": "^3.0.0 || ^4.0.0", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vite-plugin-glimmerx": "*" }, "peerDependenciesMeta": { diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 3df266adecec..57a1eeca2287 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -58,7 +58,7 @@ }, "peerDependencies": { "preact": ">=10", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 15026f5f0af8..babc6acc6b7f 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -63,7 +63,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 5eabe2366d49..ecf4ec434c6d 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -63,7 +63,7 @@ }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index d081aa9f1c37..be83a6bf53e7 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -62,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vue": "^2.7.0" }, "engines": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 440d63740f21..a2900bd97025 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -62,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" From 12448d86ed1e357ca3f932604afacc50f779c651 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:06:41 -0400 Subject: [PATCH 10/44] Install vite beta in sandboxes --- code/lib/cli/src/sandbox-templates.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 69e858f1d14f..0f762b425690 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -139,7 +139,7 @@ const baseTemplates = { }, 'react-vite/default-js': { name: 'React Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template react', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template react', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -149,7 +149,7 @@ const baseTemplates = { }, 'react-vite/default-ts': { name: 'React Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template react-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template react-ts', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -204,7 +204,7 @@ const baseTemplates = { }, 'vue3-vite/default-js': { name: 'Vue v3 (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue', expected: { framework: '@storybook/vue3-vite', renderer: '@storybook/vue3', @@ -214,7 +214,7 @@ const baseTemplates = { }, 'vue3-vite/default-ts': { name: 'Vue v3 (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue-ts', expected: { framework: '@storybook/vue3-vite', renderer: '@storybook/vue3', @@ -246,7 +246,7 @@ const baseTemplates = { 'html-vite/default-js': { name: 'HTML Latest (Vite | JavaScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/html-vite', renderer: '@storybook/html', @@ -257,7 +257,7 @@ const baseTemplates = { 'html-vite/default-ts': { name: 'HTML Latest (Vite | TypeScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/html-vite', renderer: '@storybook/html', @@ -267,7 +267,7 @@ const baseTemplates = { }, 'svelte-vite/default-js': { name: 'Svelte Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte', expected: { framework: '@storybook/svelte-vite', renderer: '@storybook/svelte', @@ -277,7 +277,7 @@ const baseTemplates = { }, 'svelte-vite/default-ts': { name: 'Svelte Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte-ts', expected: { framework: '@storybook/svelte-vite', renderer: '@storybook/svelte', @@ -346,7 +346,7 @@ const baseTemplates = { 'lit-vite/default-js': { name: 'Lit Latest (Vite | JavaScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -358,7 +358,7 @@ const baseTemplates = { 'lit-vite/default-ts': { name: 'Lit Latest (Vite | TypeScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -415,7 +415,7 @@ const baseTemplates = { }, 'preact-vite/default-js': { name: 'Preact Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact', expected: { framework: '@storybook/preact-vite', renderer: '@storybook/preact', @@ -425,7 +425,7 @@ const baseTemplates = { }, 'preact-vite/default-ts': { name: 'Preact Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact-ts', expected: { framework: '@storybook/preact-vite', renderer: '@storybook/preact', From 77cd89cdaea563fb979ba030586d4ce5fcec9271 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:32:24 -0400 Subject: [PATCH 11/44] Update @joshwooding/vite-plugin-react-docgen-typescript to support vite 5 --- code/frameworks/react-vite/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index babc6acc6b7f..b5814ef0b71a 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -47,7 +47,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", From cc10c62b893d23c60b6a0ba881783db385ae362a Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:32:30 -0400 Subject: [PATCH 12/44] Update yarn lock --- code/yarn.lock | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 3ec46c6397a8..375d333d7fe8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3731,9 +3731,9 @@ __metadata: languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1": - version: 0.2.1 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": + version: 0.3.0 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" dependencies: glob: ^7.2.0 glob-promise: ^4.2.0 @@ -3741,11 +3741,11 @@ __metadata: react-docgen-typescript: ^2.2.2 peerDependencies: typescript: ">= 4.3.x" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 peerDependenciesMeta: typescript: optional: true - checksum: 506fea864748cce273d19c628c69ef529c4ec4b3d3a5f0d8fb9ab430dc45a0155a2ac52881410f5a475ddb6c34bc8a344b64f4edd9f738c02d43275e991906ee + checksum: 31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0 languageName: node linkType: hard @@ -6517,7 +6517,7 @@ __metadata: peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 vite-plugin-glimmerx: "*" peerDependenciesMeta: "@preact/preset-vite": @@ -7344,7 +7344,7 @@ __metadata: vite: ^4.0.0 peerDependencies: preact: ">=10" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -7652,7 +7652,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1 + "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0 "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" @@ -7665,7 +7665,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -8019,7 +8019,7 @@ __metadata: vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -8181,7 +8181,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 vue: ^2.7.0 languageName: unknown linkType: soft @@ -8227,7 +8227,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft From f262b6352ad4f09baffa99f4675a75d7ae3b2233 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 11:28:17 -0400 Subject: [PATCH 13/44] Use dynamic import of Vite functions --- code/builders/builder-vite/src/build.ts | 3 +- .../builder-vite/src/codegen-entries.ts | 10 +++- .../src/codegen-importfn-script.ts | 3 +- .../builders/builder-vite/src/list-stories.ts | 3 +- .../builders/builder-vite/src/optimizeDeps.ts | 2 +- .../src/plugins/external-globals-plugin.ts | 3 +- .../src/plugins/inject-export-order-plugin.ts | 55 ++++++++++--------- .../src/plugins/strip-story-hmr-boundaries.ts | 5 +- code/builders/builder-vite/src/vite-config.ts | 7 ++- code/builders/builder-vite/src/vite-server.ts | 2 +- 10 files changed, 52 insertions(+), 41 deletions(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 0a75cc71b3a2..67da9f989692 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -1,10 +1,10 @@ -import { build as viteBuild, mergeConfig } from 'vite'; import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { sanitizeEnvVars } from './envs'; export async function build(options: Options) { + const { build: viteBuild, mergeConfig } = await import('vite'); const { presets } = options; const config = await commonConfig(options, 'build'); @@ -21,6 +21,5 @@ export async function build(options: Options) { }).build; const finalConfig = await presets.apply('viteFinal', config, options); - await viteBuild(await sanitizeEnvVars(options, finalConfig)); } diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 6a6328cf8f96..7c41a911b593 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,15 +1,19 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; import slash from 'slash'; -import { normalizePath } from 'vite'; import { listStories } from './list-stories'; -const absoluteFilesToImport = (files: string[], name: string) => +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()), '.') }), @@ -18,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) { const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); return ` - ${absoluteFilesToImport(storyEntries, 'story')} + ${absoluteFilesToImport(storyEntries, 'story', normalizePath)} function loadable(key) { return {${modules}}[key]; diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index f81c4647f641..5df14d875f25 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -1,5 +1,5 @@ import * as path from 'path'; -import { normalizePath } from 'vite'; + import type { Options } from '@storybook/types'; import { logger } from '@storybook/node-logger'; @@ -26,6 +26,7 @@ function toImportPath(relativePath: string) { * @param stories An array of absolute story paths. */ 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)); diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 746373c4c0f5..521952bff15a 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -4,9 +4,10 @@ import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; import type { Options } from '@storybook/types'; -import { normalizePath } from 'vite'; export async function listStories(options: Options) { + const { normalizePath } = await import('vite'); + return ( await Promise.all( normalizeStories(await options.presets.apply('stories', [], options), { diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 43c64f34a7e4..ddb32c800403 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import { normalizePath, resolveConfig } from 'vite'; import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite'; import type { Options } from '@storybook/types'; import { listStories } from './list-stories'; @@ -128,6 +127,7 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise normalizePath(path.relative(root, storyPath))); // TODO: check if resolveConfig takes a lot of time, possible optimizations here diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts index dd53ab4a4e56..1debc299aa99 100644 --- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts +++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts @@ -3,7 +3,6 @@ import findCacheDirectory from 'find-cache-dir'; import { init, parse } from 'es-module-lexer'; import MagicString from 'magic-string'; import { ensureFile, writeFile } from 'fs-extra'; -import { mergeAlias } from 'vite'; import type { Alias, Plugin } from 'vite'; const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); @@ -38,6 +37,8 @@ const replacementMap = new Map([ */ export async function externalGlobalsPlugin(externals: Record) { await init; + const { mergeAlias } = await import('vite'); + return { name: 'storybook:external-globals-plugin', enforce: 'post', diff --git a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts index 743043f7427c..621dae80e647 100644 --- a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts +++ b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts @@ -1,32 +1,35 @@ import { parse } from 'es-module-lexer'; import MagicString from 'magic-string'; -import { createFilter } from 'vite'; -const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]; -const filter = createFilter(include); +export async function injectExportOrderPlugin() { + const { createFilter } = await import('vite'); -export const injectExportOrderPlugin = { - name: 'storybook:inject-export-order-plugin', - // This should only run after the typescript has been transpiled - enforce: 'post', - async transform(code: string, id: string) { - if (!filter(id)) return undefined; + const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]; + const filter = createFilter(include); - // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, - // and run `await init;` once and then call `parse()` without `await`, - // instead of calling `await parse()` every time. - const [, exports] = await parse(code); + return { + name: 'storybook:inject-export-order-plugin', + // This should only run after the typescript has been transpiled + enforce: 'post', + async transform(code: string, id: string) { + if (!filter(id)) return undefined; - if (exports.includes('__namedExportsOrder')) { - // user has defined named exports already - return undefined; - } - const s = new MagicString(code); - const orderedExports = exports.filter((e) => e !== 'default'); - s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`); - return { - code: s.toString(), - map: s.generateMap({ hires: true, source: id }), - }; - }, -}; + // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, + // and run `await init;` once and then call `parse()` without `await`, + // instead of calling `await parse()` every time. + const [, exports] = await parse(code); + + if (exports.includes('__namedExportsOrder')) { + // user has defined named exports already + return undefined; + } + const s = new MagicString(code); + const orderedExports = exports.filter((e) => e !== 'default'); + s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`); + return { + code: s.toString(), + map: s.generateMap({ hires: true, source: id }), + }; + }, + }; +} diff --git a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts index 46ca7045e6d5..c249fc523d1a 100644 --- a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts +++ b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts @@ -1,5 +1,4 @@ import type { Plugin } from 'vite'; -import { createFilter } from 'vite'; import MagicString from 'magic-string'; /** @@ -7,7 +6,9 @@ import MagicString from 'magic-string'; * as hmr boundaries, but vite has a bug which causes them to be treated as boundaries * (https://github.com/vitejs/vite/issues/9869). */ -export function stripStoryHMRBoundary(): Plugin { +export async function stripStoryHMRBoundary(): Promise { + const { createFilter } = await import('vite'); + const filter = createFilter(/\.stories\.([tj])sx?$/); return { name: 'storybook:strip-hmr-boundary-plugin', diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 75778971b26a..24db49249909 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import { loadConfigFromFile, mergeConfig } from 'vite'; import findCacheDirectory from 'find-cache-dir'; import type { ConfigEnv, @@ -41,6 +40,8 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; + const { loadConfigFromFile, mergeConfig } = await import('vite'); + const { viteConfigPath } = await getBuilderOptions(options); const projectRoot = path.resolve(options.configDir, '..'); @@ -80,8 +81,8 @@ export async function pluginConfig(options: Options) { const plugins = [ codeGeneratorPlugin(options), await csfPlugin(options), - injectExportOrderPlugin, - stripStoryHMRBoundary(), + await injectExportOrderPlugin(), + await stripStoryHMRBoundary(), { name: 'storybook:allow-storybook-dir', enforce: 'post', diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 13489d8580e5..ce4631cabaed 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -1,5 +1,4 @@ import type { Server } from 'http'; -import { createServer } from 'vite'; import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { getOptimizeDeps } from './optimizeDeps'; @@ -29,5 +28,6 @@ export async function createViteServer(options: Options, devServer: Server) { const finalConfig = await presets.apply('viteFinal', config, options); + const { createServer } = await import('vite'); return createServer(await sanitizeEnvVars(options, finalConfig)); } From 954c76cee8b4bb345e53b74c1f8611b996399099 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 12:18:25 -0400 Subject: [PATCH 14/44] Use Vite 5 beta in devDependencies --- code/addons/docs/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 4 +-- code/frameworks/vue-vite/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/package.json | 2 +- code/yarn.lock | 46 ++++++++++++------------ 10 files changed, 33 insertions(+), 33 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 39294a7573b8..be9012fa635e 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -123,7 +123,7 @@ "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3", - "vite": "^4.0.4" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 23e46183d29b..2f36e2425faa 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -67,7 +67,7 @@ "rollup": "^3.20.1", "slash": "^5.0.0", "typescript": "~4.9.3", - "vite": "^4.0.4" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "@preact/preset-vite": "*", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 57a1eeca2287..1cc587c0f3fa 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -54,7 +54,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "preact": ">=10", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index b5814ef0b71a..66a375526fe8 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -58,7 +58,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index ecf4ec434c6d..f2262f94c6b6 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -59,7 +59,7 @@ "@types/node": "^16.0.0", "svelte": "^4.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 8b9f808420b5..ed161d4bc041 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -57,11 +57,11 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "^4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index be83a6bf53e7..6c632989e394 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -56,7 +56,7 @@ }, "devDependencies": { "typescript": "~4.9.3", - "vite": "^4.0.0", + "vite": "^5.0.0-beta.4", "vue": "^2.7.10" }, "peerDependencies": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index a2900bd97025..1f67b902efd1 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -57,7 +57,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/package.json b/code/package.json index 7a14a389b3d7..a7bb10867aa1 100644 --- a/code/package.json +++ b/code/package.json @@ -258,7 +258,7 @@ "ts-node": "^10.9.1", "typescript": "~4.9.3", "util": "^0.12.4", - "vite": "^4.0.0", + "vite": "^5.0.0-beta.4", "vite-plugin-turbosnap": "^1.0.1", "wait-on": "^7.0.1" }, diff --git a/code/yarn.lock b/code/yarn.lock index 375d333d7fe8..dba868dc5a29 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5890,7 +5890,7 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 - vite: ^4.0.4 + vite: ^5.0.0-beta.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6513,7 +6513,7 @@ __metadata: rollup: ^3.20.1 slash: ^5.0.0 typescript: ~4.9.3 - vite: ^4.0.4 + vite: ^5.0.0-beta.4 peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" @@ -7341,7 +7341,7 @@ __metadata: "@storybook/preact": "workspace:*" "@types/node": ^16.0.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: preact: ">=10" vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -7661,7 +7661,7 @@ __metadata: magic-string: ^0.30.0 react-docgen: ^6.0.2 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -7901,7 +7901,7 @@ __metadata: ts-node: ^10.9.1 typescript: ~4.9.3 util: ^0.12.4 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 vite-plugin-turbosnap: ^1.0.1 wait-on: ^7.0.1 dependenciesMeta: @@ -8016,7 +8016,7 @@ __metadata: sveltedoc-parser: ^4.2.1 ts-dedent: ^2.2.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: svelte: ^3.0.0 || ^4.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -8074,10 +8074,10 @@ __metadata: "@storybook/svelte-vite": "workspace:*" "@types/node": ^16.0.0 typescript: ^4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 languageName: unknown linkType: soft @@ -8175,7 +8175,7 @@ __metadata: "@storybook/vue": "workspace:*" magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 vue: ^2.7.10 vue-docgen-api: ^4.40.0 peerDependencies: @@ -8222,7 +8222,7 @@ __metadata: "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 vue-docgen-api: ^4.40.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -17632,7 +17632,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2": +"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -17651,7 +17651,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin": +"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -26097,7 +26097,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27": +"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.30": version: 8.4.31 resolution: "postcss@npm:8.4.31" dependencies: @@ -28435,7 +28435,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.27.1": +"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.29.2": version: 3.29.4 resolution: "rollup@npm:3.29.4" dependencies: @@ -31910,16 +31910,16 @@ __metadata: languageName: node linkType: hard -"vite@npm:^4.0.0, vite@npm:^4.0.4": - version: 4.4.10 - resolution: "vite@npm:4.4.10" +"vite@npm:^5.0.0-beta.4": + version: 5.0.0-beta.4 + resolution: "vite@npm:5.0.0-beta.4" dependencies: - esbuild: ^0.18.10 - fsevents: ~2.3.2 - postcss: ^8.4.27 - rollup: ^3.27.1 + esbuild: ^0.19.3 + fsevents: ~2.3.3 + postcss: ^8.4.30 + rollup: ^3.29.2 peerDependencies: - "@types/node": ">= 14" + "@types/node": ^18.0.0 || >=20.0.0 less: "*" lightningcss: ^1.21.0 sass: "*" @@ -31946,7 +31946,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: d1359f147eb84aad9922460848184f14295e76f335ab03f90a585886ff070e1a7c74996022b3bb07da0a3130c9829565b5556e6eb1d0db12a8aad26f3694d445 + checksum: df7247abd37069ec160c4c84c9d139328d33c7c768627a17fca0e8d3f452b2ff32ee75b978e08f563b57ad85c9d19e66f1e454dcac4050b7fca36aa1d508004d languageName: node linkType: hard From 619f8385c57fa71db17c40941aa5dfd933faef67 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 14:52:25 -0400 Subject: [PATCH 15/44] Use dynamic import of slash --- code/builders/builder-vite/src/codegen-entries.ts | 2 +- code/builders/builder-vite/src/codegen-iframe-script.ts | 8 +++++--- .../builder-vite/src/codegen-modern-iframe-script.ts | 8 +++++--- code/builders/builder-vite/src/list-stories.ts | 2 +- .../builder-vite/src/utils/process-preview-annotation.ts | 8 ++++++-- 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 7c41a911b593..e74ecdb7a244 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,6 +1,5 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; -import slash from 'slash'; import { listStories } from './list-stories'; const absoluteFilesToImport = async ( @@ -14,6 +13,7 @@ const absoluteFilesToImport = async ( export async function generateVirtualStoryEntryCode(options: Options) { const { normalizePath } = await import('vite'); + const slash = await import('slash'); const storyEntries = await listStories(options); const resolveMap = storyEntries.reduce>( (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), diff --git a/code/builders/builder-vite/src/codegen-iframe-script.ts b/code/builders/builder-vite/src/codegen-iframe-script.ts index 94400f57a017..e46b09a023f5 100644 --- a/code/builders/builder-vite/src/codegen-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-iframe-script.ts @@ -12,9 +12,11 @@ export async function generateIframeScriptCode(options: Options, projectRoot: st [], options ); - const configEntries = [...previewAnnotations] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)); + const configEntries = await Promise.all( + [...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'); 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..f497f55273a1 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -13,9 +13,11 @@ export async function generateModernIframeScriptCode(options: Options, projectRo [], options ); - const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)); + const previewAnnotationURLs = await Promise.all( + [...previewAnnotations, previewOrConfigFile] + .filter(Boolean) + .map((path) => processPreviewAnnotation(path, projectRoot)) + ); // This is pulled out to a variable because it is reused in both the initial page load // and the HMR handler. We don't use the hot.accept callback params because only the changed diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 521952bff15a..47d66fd08a4c 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import slash from 'slash'; import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; @@ -7,6 +6,7 @@ import type { Options } from '@storybook/types'; export async function listStories(options: Options) { const { normalizePath } = await import('vite'); + const slash = await import('slash'); return ( await Promise.all( diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts index a6d83b2f7093..3b462e838285 100644 --- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts +++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts @@ -1,6 +1,5 @@ import type { PreviewAnnotation } from '@storybook/types'; import { resolve, isAbsolute, relative } from 'path'; -import slash from 'slash'; import { stripAbsNodeModulesPath } from '@storybook/core-common'; /** @@ -10,7 +9,12 @@ import { stripAbsNodeModulesPath } from '@storybook/core-common'; * For node_modules, we want bare imports (so vite can process them), * and for files in the user's source, we want URLs absolute relative to project root. */ -export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) { +export async function processPreviewAnnotation( + path: PreviewAnnotation | undefined, + projectRoot: string +) { + const slash = await import('slash'); + // If entry is an object, take the first, which is the // bare (non-absolute) specifier. // This is so that webpack can use an absolute path, and From a7bff7690eb7244e7dd219b9dc473d3b2d304119 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 14:52:41 -0400 Subject: [PATCH 16/44] Try to use ESM mocks for jest test --- .../builder-vite/src/vite-config.test.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index c4f2f212be48..922c50cb90ac 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -1,12 +1,14 @@ import type { Options, Presets } from '@storybook/types'; -import { loadConfigFromFile } from 'vite'; +import { jest } from '@jest/globals'; import { commonConfig } from './vite-config'; -jest.mock('vite', () => ({ - ...jest.requireActual('vite'), +jest.unstable_mockModule('vite', () => ({ loadConfigFromFile: jest.fn(async () => ({})), })); -const loadConfigFromFileMock = jest.mocked(loadConfigFromFile); + +const loadConfigFromFileMock = async () => { + return jest.mocked((await import('vite')).loadConfigFromFile); +}; const dummyOptions: Options = { configType: 'DEVELOPMENT', @@ -30,7 +32,7 @@ const dummyOptions: Options = { describe('commonConfig', () => { it('should preserve default envPrefix', async () => { - loadConfigFromFileMock.mockReturnValueOnce( + (await loadConfigFromFileMock()).mockReturnValueOnce( Promise.resolve({ config: {}, path: '', @@ -42,7 +44,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix string', async () => { - loadConfigFromFileMock.mockReturnValueOnce( + (await loadConfigFromFileMock()).mockReturnValueOnce( Promise.resolve({ config: { envPrefix: 'SECRET_' }, path: '', @@ -54,7 +56,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix array', async () => { - loadConfigFromFileMock.mockReturnValueOnce( + (await loadConfigFromFileMock()).mockReturnValueOnce( Promise.resolve({ config: { envPrefix: ['SECRET_', 'VUE_'] }, path: '', From 73a8e8ff4b365c7d18ae699952eed1ad4455bc02 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:01:07 -0400 Subject: [PATCH 17/44] Revert "Try to use ESM mocks for jest test" This reverts commit a7bff7690eb7244e7dd219b9dc473d3b2d304119. --- .../builder-vite/src/vite-config.test.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index 922c50cb90ac..c4f2f212be48 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -1,14 +1,12 @@ import type { Options, Presets } from '@storybook/types'; -import { jest } from '@jest/globals'; +import { loadConfigFromFile } from 'vite'; import { commonConfig } from './vite-config'; -jest.unstable_mockModule('vite', () => ({ +jest.mock('vite', () => ({ + ...jest.requireActual('vite'), loadConfigFromFile: jest.fn(async () => ({})), })); - -const loadConfigFromFileMock = async () => { - return jest.mocked((await import('vite')).loadConfigFromFile); -}; +const loadConfigFromFileMock = jest.mocked(loadConfigFromFile); const dummyOptions: Options = { configType: 'DEVELOPMENT', @@ -32,7 +30,7 @@ const dummyOptions: Options = { describe('commonConfig', () => { it('should preserve default envPrefix', async () => { - (await loadConfigFromFileMock()).mockReturnValueOnce( + loadConfigFromFileMock.mockReturnValueOnce( Promise.resolve({ config: {}, path: '', @@ -44,7 +42,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix string', async () => { - (await loadConfigFromFileMock()).mockReturnValueOnce( + loadConfigFromFileMock.mockReturnValueOnce( Promise.resolve({ config: { envPrefix: 'SECRET_' }, path: '', @@ -56,7 +54,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix array', async () => { - (await loadConfigFromFileMock()).mockReturnValueOnce( + loadConfigFromFileMock.mockReturnValueOnce( Promise.resolve({ config: { envPrefix: ['SECRET_', 'VUE_'] }, path: '', From df438545d5dc7ba76ca230799c5d2708511a87a2 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:02:18 -0400 Subject: [PATCH 18/44] Revert "Use Vite 5 beta in devDependencies" This reverts commit 954c76cee8b4bb345e53b74c1f8611b996399099. --- code/addons/docs/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 4 +-- code/frameworks/vue-vite/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/package.json | 2 +- code/yarn.lock | 46 ++++++++++++------------ 10 files changed, 33 insertions(+), 33 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index be9012fa635e..39294a7573b8 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -123,7 +123,7 @@ "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 2f36e2425faa..23e46183d29b 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -67,7 +67,7 @@ "rollup": "^3.20.1", "slash": "^5.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.4" }, "peerDependencies": { "@preact/preset-vite": "*", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 1cc587c0f3fa..57a1eeca2287 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -54,7 +54,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "preact": ">=10", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 66a375526fe8..b5814ef0b71a 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -58,7 +58,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index f2262f94c6b6..ecf4ec434c6d 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -59,7 +59,7 @@ "@types/node": "^16.0.0", "svelte": "^4.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index ed161d4bc041..8b9f808420b5 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -57,11 +57,11 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "^4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 6c632989e394..be83a6bf53e7 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -56,7 +56,7 @@ }, "devDependencies": { "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4", + "vite": "^4.0.0", "vue": "^2.7.10" }, "peerDependencies": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 1f67b902efd1..a2900bd97025 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -57,7 +57,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/package.json b/code/package.json index a7bb10867aa1..7a14a389b3d7 100644 --- a/code/package.json +++ b/code/package.json @@ -258,7 +258,7 @@ "ts-node": "^10.9.1", "typescript": "~4.9.3", "util": "^0.12.4", - "vite": "^5.0.0-beta.4", + "vite": "^4.0.0", "vite-plugin-turbosnap": "^1.0.1", "wait-on": "^7.0.1" }, diff --git a/code/yarn.lock b/code/yarn.lock index dba868dc5a29..375d333d7fe8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5890,7 +5890,7 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6513,7 +6513,7 @@ __metadata: rollup: ^3.20.1 slash: ^5.0.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.4 peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" @@ -7341,7 +7341,7 @@ __metadata: "@storybook/preact": "workspace:*" "@types/node": ^16.0.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: preact: ">=10" vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -7661,7 +7661,7 @@ __metadata: magic-string: ^0.30.0 react-docgen: ^6.0.2 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -7901,7 +7901,7 @@ __metadata: ts-node: ^10.9.1 typescript: ~4.9.3 util: ^0.12.4 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 vite-plugin-turbosnap: ^1.0.1 wait-on: ^7.0.1 dependenciesMeta: @@ -8016,7 +8016,7 @@ __metadata: sveltedoc-parser: ^4.2.1 ts-dedent: ^2.2.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -8074,10 +8074,10 @@ __metadata: "@storybook/svelte-vite": "workspace:*" "@types/node": ^16.0.0 typescript: ^4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 languageName: unknown linkType: soft @@ -8175,7 +8175,7 @@ __metadata: "@storybook/vue": "workspace:*" magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 vue: ^2.7.10 vue-docgen-api: ^4.40.0 peerDependencies: @@ -8222,7 +8222,7 @@ __metadata: "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 vue-docgen-api: ^4.40.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -17632,7 +17632,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": +"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -17651,7 +17651,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": +"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -26097,7 +26097,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.30": +"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27": version: 8.4.31 resolution: "postcss@npm:8.4.31" dependencies: @@ -28435,7 +28435,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.29.2": +"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.27.1": version: 3.29.4 resolution: "rollup@npm:3.29.4" dependencies: @@ -31910,16 +31910,16 @@ __metadata: languageName: node linkType: hard -"vite@npm:^5.0.0-beta.4": - version: 5.0.0-beta.4 - resolution: "vite@npm:5.0.0-beta.4" +"vite@npm:^4.0.0, vite@npm:^4.0.4": + version: 4.4.10 + resolution: "vite@npm:4.4.10" dependencies: - esbuild: ^0.19.3 - fsevents: ~2.3.3 - postcss: ^8.4.30 - rollup: ^3.29.2 + esbuild: ^0.18.10 + fsevents: ~2.3.2 + postcss: ^8.4.27 + rollup: ^3.27.1 peerDependencies: - "@types/node": ^18.0.0 || >=20.0.0 + "@types/node": ">= 14" less: "*" lightningcss: ^1.21.0 sass: "*" @@ -31946,7 +31946,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: df7247abd37069ec160c4c84c9d139328d33c7c768627a17fca0e8d3f452b2ff32ee75b978e08f563b57ad85c9d19e66f1e454dcac4050b7fca36aa1d508004d + checksum: d1359f147eb84aad9922460848184f14295e76f335ab03f90a585886ff070e1a7c74996022b3bb07da0a3130c9829565b5556e6eb1d0db12a8aad26f3694d445 languageName: node linkType: hard From cf036606062da1ac233b5c9b168ea2e2cfe69d53 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:04:27 -0400 Subject: [PATCH 19/44] Revert "Use dynamic import of slash" This reverts commit 619f8385c57fa71db17c40941aa5dfd933faef67. --- code/builders/builder-vite/src/codegen-entries.ts | 2 +- code/builders/builder-vite/src/codegen-iframe-script.ts | 8 +++----- .../builder-vite/src/codegen-modern-iframe-script.ts | 8 +++----- code/builders/builder-vite/src/list-stories.ts | 2 +- .../builder-vite/src/utils/process-preview-annotation.ts | 8 ++------ 5 files changed, 10 insertions(+), 18 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index e74ecdb7a244..7c41a911b593 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,5 +1,6 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; +import slash from 'slash'; import { listStories } from './list-stories'; const absoluteFilesToImport = async ( @@ -13,7 +14,6 @@ const absoluteFilesToImport = async ( export async function generateVirtualStoryEntryCode(options: Options) { const { normalizePath } = await import('vite'); - const slash = await import('slash'); const storyEntries = await listStories(options); const resolveMap = storyEntries.reduce>( (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), diff --git a/code/builders/builder-vite/src/codegen-iframe-script.ts b/code/builders/builder-vite/src/codegen-iframe-script.ts index e46b09a023f5..94400f57a017 100644 --- a/code/builders/builder-vite/src/codegen-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-iframe-script.ts @@ -12,11 +12,9 @@ export async function generateIframeScriptCode(options: Options, projectRoot: st [], options ); - const configEntries = await Promise.all( - [...previewAnnotations] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)) - ); + 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'); 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 f497f55273a1..5bc163fba5fa 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -13,11 +13,9 @@ export async function generateModernIframeScriptCode(options: Options, projectRo [], options ); - const previewAnnotationURLs = await Promise.all( - [...previewAnnotations, previewOrConfigFile] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)) - ); + const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile] + .filter(Boolean) + .map((path) => processPreviewAnnotation(path, projectRoot)); // This is pulled out to a variable because it is reused in both the initial page load // and the HMR handler. We don't use the hot.accept callback params because only the changed diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 47d66fd08a4c..521952bff15a 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -1,4 +1,5 @@ import * as path from 'path'; +import slash from 'slash'; import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; @@ -6,7 +7,6 @@ import type { Options } from '@storybook/types'; export async function listStories(options: Options) { const { normalizePath } = await import('vite'); - const slash = await import('slash'); return ( await Promise.all( diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts index 3b462e838285..a6d83b2f7093 100644 --- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts +++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts @@ -1,5 +1,6 @@ import type { PreviewAnnotation } from '@storybook/types'; import { resolve, isAbsolute, relative } from 'path'; +import slash from 'slash'; import { stripAbsNodeModulesPath } from '@storybook/core-common'; /** @@ -9,12 +10,7 @@ import { stripAbsNodeModulesPath } from '@storybook/core-common'; * For node_modules, we want bare imports (so vite can process them), * and for files in the user's source, we want URLs absolute relative to project root. */ -export async function processPreviewAnnotation( - path: PreviewAnnotation | undefined, - projectRoot: string -) { - const slash = await import('slash'); - +export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) { // If entry is an object, take the first, which is the // bare (non-absolute) specifier. // This is so that webpack can use an absolute path, and From d138cf647a5b4de2c5c2f36dbb2305717d74c680 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:49:55 -0400 Subject: [PATCH 20/44] Add missing await --- code/builders/builder-vite/src/codegen-entries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 7c41a911b593..44c3163b1def 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -22,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) { const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); return ` - ${absoluteFilesToImport(storyEntries, 'story', normalizePath)} + ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)} function loadable(key) { return {${modules}}[key]; From 779c89974a5922b886ac29a61ded363e9fb0bbe9 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 6 Oct 2023 11:25:16 -0400 Subject: [PATCH 21/44] Update code/frameworks/react-vite/package.json Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- code/frameworks/react-vite/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index b5814ef0b71a..0af1b52dedde 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -47,7 +47,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", From 2aacb587b29fe5b1fffe84e01a5c5cb287521e37 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 6 Oct 2023 11:30:11 -0400 Subject: [PATCH 22/44] Update yarn.lock --- code/yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 375d333d7fe8..10d76b878c46 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3731,9 +3731,9 @@ __metadata: languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": - version: 0.3.0 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1": + version: 0.3.1 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1" dependencies: glob: ^7.2.0 glob-promise: ^4.2.0 @@ -3745,7 +3745,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0 + checksum: a9c7a03d7d1daf5bd64949255516ba64c88d5600366c8c74dcdb6f37c2a6099daaec02860b7587d2220e61afa47a0b2de17ef70d723c2db02f24e0890edfd9f3 languageName: node linkType: hard @@ -7652,7 +7652,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0 + "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.1 "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" From 95e642f428f796f2d4110a26c86b33924ce6209b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 09:49:41 +0200 Subject: [PATCH 23/44] comment updates Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 2c2bccfc3a8e..fc287ec76c09 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -68,12 +68,12 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt let docPreprocessOptions: any = null; if (preprocessOptions) { /* - * We can't use vitePreprocess() for the documentation. - * This preprocessor uses esbuild which removes jsdoc. + * We can't use vitePreprocess() for the documentation + * because it uses esbuild which removes jsdoc. * * By default, only typescript is transpiled, and style tags are removed. * - * Note: theses preprocessors are only used to make the component + * Note: these preprocessors are only used to make the component * compatible to sveltedoc-parser (no ts), not to compile * the component. */ From 270c94da50270ca120fedee3ca207ba685a09c23 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 14:32:10 +0200 Subject: [PATCH 24/44] support javascript in Svelte Vite docgen --- code/e2e-tests/framework-svelte.spec.ts | 15 ++++++- .../svelte-vite/src/plugins/svelte-docgen.ts | 43 +++++++++++-------- .../ButtonTypeScript.svelte | 38 ++++++++++++++++ .../ts-docs.stories.js | 12 ++++++ .../ButtonTypeScript.svelte | 38 ++++++++++++++++ .../ts-docs.stories.js | 12 ++++++ .../svelte/template/stories/args.stories.js | 2 +- .../{docs.stories.js => js-docs.stories.js} | 4 +- .../stories/slot-decorators.stories.js | 2 +- .../template/stories/svelte-mdx.stories.mdx | 2 +- ...tonView.svelte => ButtonJavaScript.svelte} | 4 +- 11 files changed, 146 insertions(+), 26 deletions(-) create mode 100644 code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte create mode 100644 code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js rename code/renderers/svelte/template/stories/{docs.stories.js => js-docs.stories.js} (52%) rename code/renderers/svelte/template/stories/views/{ButtonView.svelte => ButtonJavaScript.svelte} (92%) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 09136254b0f0..007f1182c781 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -18,10 +18,21 @@ test.describe('Svelte', () => { await new SbPage(page).waitUntilLoaded(); }); - test('Story have a documentation', async ({ page }) => { + test('JS story has auto-generated args table', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('stories/renderers/svelte/docs', 'docs'); + await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs'); + const root = sbPage.previewRoot(); + const argsTable = root.locator('.docblock-argstable'); + await expect(argsTable).toContainText('Rounds the button'); + }); + + test('TS story has auto-generated args table', async ({ page }) => { + // eslint-disable-next-line jest/valid-title + test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates'); + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); await expect(argsTable).toContainText('Rounds the button'); diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index fc287ec76c09..bce6ab3c1a00 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -65,34 +65,43 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt const include = /\.(svelte)$/; const filter = createFilter(include); - let docPreprocessOptions: any = null; - if (preprocessOptions) { - /* - * We can't use vitePreprocess() for the documentation - * because it uses esbuild which removes jsdoc. - * - * By default, only typescript is transpiled, and style tags are removed. - * - * Note: these preprocessors are only used to make the component - * compatible to sveltedoc-parser (no ts), not to compile - * the component. - */ - docPreprocessOptions = [typescript(), replace([[//gims, '']])]; - } + let docPreprocessOptions: Parameters[1] | undefined; return { name: 'storybook:svelte-docgen-plugin', async transform(src: string, id: string) { if (!filter(id)) return undefined; + if (preprocessOptions && !docPreprocessOptions) { + /* + * We can't use vitePreprocess() for the documentation + * because it uses esbuild which removes jsdoc. + * + * By default, only typescript is transpiled, and style tags are removed. + * + * Note: these preprocessors are only used to make the component + * compatible to sveltedoc-parser (no ts), not to compile + * the component. + */ + docPreprocessOptions = [replace([[//gims, '']])]; + + try { + const ts = require.resolve('typescript'); + if (ts) { + docPreprocessOptions.unshift(typescript()); + } + } catch { + // this will error in JavaScript-only projects, this is okay + } + } + const resource = path.relative(cwd, id); let docOptions; if (docPreprocessOptions) { - // eslint-disable-next-line @typescript-eslint/no-shadow - const src = fs.readFileSync(resource).toString(); + const rawSource = fs.readFileSync(resource).toString(); - const { code: fileContent } = await preprocess(src, docPreprocessOptions, { + const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, { filename: resource, }); diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte new file mode 100644 index 000000000000..cd00f38a3d57 --- /dev/null +++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte @@ -0,0 +1,38 @@ + + +

Button TypeScript

+ +