From 270c94da50270ca120fedee3ca207ba685a09c23 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 14:32:10 +0200 Subject: [PATCH] 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

+ +