From ff7b7e176737a67fa73b655175e11f1433f3241b Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 6 Sep 2023 21:12:16 +0200 Subject: [PATCH 01/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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 95e642f428f796f2d4110a26c86b33924ce6209b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 09:49:41 +0200 Subject: [PATCH 09/10] 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 10/10] 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

+ +