support javascript in Svelte Vite docgen

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');

code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts

@@ -65,34 +65,43 @@ export function svelteDocgen(svelteOptions: Record<string, any> = {}): 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([[/<style.+<\/style>/gims, '']])];
-  }
+  let docPreprocessOptions: Parameters<typeof preprocess>[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([[/<style.+<\/style>/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,
         });
 

code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * @component Button TypeScript
+   * @wrapper
+   */
+  import { global as globalThis } from '@storybook/global';
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
+
+  /**
+   * Rounds the button
+   */
+  export let primary: boolean = false;
+
+  /**
+   * Displays the count
+   */
+  export let count: number = 0;
+
+  /**
+   * Button text
+   * @slot
+   */
+  export let text: string = 'You clicked';
+
+  function handleClick(_event: MouseEvent) {
+    count += 1;
+  }
+</script>
+
+<h1>Button TypeScript</h1>
+
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
+
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>

code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js

@@ -0,0 +1,12 @@
+import ButtonTypescript from './ButtonTypeScript.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/ts-docs',
+  component: ButtonTypescript,
+  args: {
+    primary: true,
+  },
+  tags: ['autodocs'],
+};
+
+export const Primary = {};

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * @component Button TypeScript
+   * @wrapper
+   */
+  import { global as globalThis } from '@storybook/global';
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
+
+  /**
+   * Rounds the button
+   */
+  export let primary: boolean = false;
+
+  /**
+   * Displays the count
+   */
+  export let count: number = 0;
+
+  /**
+   * Button text
+   * @slot
+   */
+  export let text: string = 'You clicked';
+
+  function handleClick(_event: MouseEvent) {
+    count += 1;
+  }
+</script>
+
+<h1>Button TypeScript</h1>
+
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
+
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js

@@ -0,0 +1,12 @@
+import ButtonTypescript from './ButtonTypeScript.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/ts-docs',
+  component: ButtonTypescript,
+  args: {
+    primary: true,
+  },
+  tags: ['autodocs'],
+};
+
+export const Primary = {};

code/renderers/svelte/template/stories/args.stories.js

@@ -7,7 +7,7 @@ import {
   STORY_RENDERED,
 } from '@storybook/core-events';
 import { addons } from '@storybook/preview-api';
-import ButtonView from './views/ButtonView.svelte';
+import ButtonView from './views/ButtonJavaScript.svelte';
 
 export default {
   component: ButtonView,

code/renderers/svelte/template/stories/docs.stories.js → code/renderers/svelte/template/stories/js-docs.stories.js

@@ -1,7 +1,7 @@
-import ButtonView from './views/ButtonView.svelte';
+import ButtonJavaScript from './views/ButtonJavaScript.svelte';
 
 export default {
-  component: ButtonView,
+  component: ButtonJavaScript,
   args: {
     primary: true,
   },

code/renderers/svelte/template/stories/slot-decorators.stories.js

@@ -1,4 +1,4 @@
-import ButtonView from './views/ButtonView.svelte';
+import ButtonView from './views/ButtonJavaScript.svelte';
 import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
 import BorderDecoratorBlue from './views/BorderDecoratorBlue.svelte';
 import BorderDecoratorProps from './views/BorderDecoratorProps.svelte';

code/renderers/svelte/template/stories/svelte-mdx.stories.mdx

@@ -1,6 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ButtonView from './views/ButtonView.svelte';
+import ButtonView from './views/ButtonJavaScript.svelte';
 import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
 
 <Meta title="stories/renderers/svelte/svelte-mdx" />

code/renderers/svelte/template/stories/views/ButtonView.svelte → code/renderers/svelte/template/stories/views/ButtonJavaScript.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
   /**
    * @component Button View
    * @wrapper
@@ -23,7 +23,7 @@
    */
   export let text = 'You clicked';
 
-  function handleClick(_event: MouseEvent) {
+  function handleClick(_event) {
     count += 1;
   }
 </script>