@storybook/svelte-vite 9.0.0-alpha.13 → 9.0.0-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "9.0.0-alpha.13",
+  "version": "9.0.0-alpha.14",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -54,8 +54,8 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "9.0.0-alpha.13",
-    "@storybook/svelte": "9.0.0-alpha.13",
+    "@storybook/builder-vite": "9.0.0-alpha.14",
+    "@storybook/svelte": "9.0.0-alpha.14",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
     "svelte2tsx": "^0.7.35",
@@ -72,8 +72,8 @@
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
-    "storybook": "^9.0.0-alpha.13",
-    "svelte": "^4.0.0 || ^5.0.0",
+    "storybook": "^9.0.0-alpha.14",
+    "svelte": "^5.0.0",
     "vite": "^5.0.0 || ^6.0.0"
   },
   "engines": {

package/template/stories_svelte-vite-default-js/docgen/jsdoc.stories.js

@@ -0,0 +1,17 @@
+import JSDoc from './jsdoc.svelte';
+
+/** @typedef {import('@storybook/svelte-vite').StoryObj} StoryObj */
+
+/** @type {Meta<typeof JSDoc>} */
+const meta = {
+  component: JSDoc,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: JSDoc,
+    props: { ...args, argTypes },
+  }),
+};
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-js/docgen/jsdoc.svelte

@@ -0,0 +1,92 @@
+<script>
+  /**
+   * @typedef {Object} MyObject
+   * @property {string} foo
+   * @property {number} bar
+   */
+
+  /**
+   * @typedef {Object} MyProps
+   * @property {boolean} [boolean] Boolean
+   * @property {string} [string] String
+   * @property {string} stringRequired String (required)
+   * @property {number} [number] Number
+   * @property {true} [trueLiteral] True literal
+   * @property {symbol} [symbol] Symbol
+   * @property {null} [nullValue] Null
+   * @property {undefined} [undefinedValue] Undefined
+   * @property {any} [any] Any
+   * @property {Date} [date] Date
+   * @property {import('./types').LiteralStrings} [unionLiteralStrings] Union of literal strings
+   * @property {import('./types').LiteralNumbers} [unionLiteralNumbers] Union of literal numbers
+   * @property {MyObject} [object] Object
+   * @property {{ foo: string; bar: number }} [inlineObject] Inline object
+   * @property {Record<string, number>} [record] Record
+   * @property {number | string} [unionTypes] Union of types
+   * @property {{ a: number } & { b: string }} [intersection] Intersection of types
+   * @property {(event: MouseEvent) => number} [func] Event callback function
+   * @property {import('svelte').Snippet} children Snippet contents
+   * @property {Record<string, any>} [argTypes] Actual arg types inferred from the component
+   */
+
+  /** @type {MyProps} */
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    trueLiteral = undefined,
+    symbol = undefined,
+    nullValue = null,
+    undefinedValue = undefined,
+    any = undefined,
+    date = new Date('20 Jan 1983'),
+    unionLiteralStrings = 'apple',
+    unionLiteralNumbers = 1000,
+    object = undefined,
+    inlineObject = undefined,
+    record = { a: 1, b: 2 },
+    unionTypes = 123,
+    intersection = undefined,
+    func = () => 10,
+    children,
+    argTypes,
+  } = $props();
+</script>
+
+<h1>Docgen: JS - JSDoc</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      trueLiteral,
+      symbol,
+      nullValue,
+      undefinedValue,
+      any,
+      date,
+      unionLiteralStrings,
+      unionLiteralNumbers,
+      object,
+      inlineObject,
+      record,
+      unionTypes,
+      intersection,
+      func,
+      argTypes,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/jsdoc.stories.js

@@ -0,0 +1,17 @@
+import JSDoc from './jsdoc.svelte';
+
+/** @typedef {import('@storybook/svelte-vite').StoryObj} StoryObj */
+
+/** @type {Meta<typeof JSDoc>} */
+const meta = {
+  component: JSDoc,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: JSDoc,
+    props: { ...args, argTypes },
+  }),
+};
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/jsdoc.svelte

@@ -0,0 +1,91 @@
+<script>
+  /**
+   * @typedef {Object} MyObject
+   * @property {string} foo
+   * @property {number} bar
+   */
+
+  /**
+   * @typedef {Object} MyProps
+   * @property {boolean} [boolean] Boolean
+   * @property {string} [string] String
+   * @property {string} stringRequired String (required)
+   * @property {number} [number] Number
+   * @property {true} [trueLiteral] True literal
+   * @property {symbol} [symbol] Symbol
+   * @property {null} [nullValue] Null
+   * @property {undefined} [undefinedValue] Undefined
+   * @property {any} [any] Any
+   * @property {import('./types').LiteralStrings} [unionLiteralStrings] Union of literal strings
+   * @property {import('./types').LiteralNumbers} [unionLiteralNumbers] Union of literal numbers
+   * @property {MyObject} [object] Object
+   * @property {{ foo: string; bar: number }} [inlineObject] Inline object
+   * @property {Record<string, number>} [record] Record
+   * @property {Date} [date] Date
+   * @property {number | string} [unionTypes] Union of types
+   * @property {{ a: number } & { b: string }} [intersection] Intersection of types
+   * @property {import('svelte').Snippet} children Snippet contents
+   * @property {(event: MouseEvent) => number} [func] Event callback function
+   * @property {Record<string, any>} [argTypes] Actual arg types inferred from the component
+   */
+
+  /** @type {MyProps} */
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    trueLiteral = undefined,
+    symbol = undefined,
+    nullValue = null,
+    undefinedValue = undefined,
+    any = undefined,
+    unionLiteralStrings = 'apple',
+    unionLiteralNumbers = 1000,
+    object = undefined,
+    inlineObject = undefined,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    intersection = undefined,
+    children,
+    func = () => 10,
+    argTypes,
+  } = $props();
+</script>
+
+<h1>Docgen: JS - JSDoc</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      trueLiteral,
+      symbol,
+      nullValue,
+      undefinedValue,
+      any,
+      date,
+      unionLiteralStrings,
+      unionLiteralNumbers,
+      object,
+      inlineObject,
+      record,
+      unionTypes,
+      intersection,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts-inline-prop-types.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TSInlinePropTypes from './ts-inline-prop-types.svelte';
+
+const meta = {
+  component: TSInlinePropTypes,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TSInlinePropTypes,
+    props: { ...args, argTypes },
+  }),
+} satisfies Meta<typeof TSInlinePropTypes>;
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/ts-inline-prop-types.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    nullValue = null,
+    arrayOfNumbers = [1, 20, 300],
+    enumValue = MyEnum.FOO,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    func = () => 10,
+    children,
+    argTypes,
+  }: {
+    /** Boolean */
+    boolean?: boolean;
+    /** String */
+    string?: string;
+    /** String (required) */
+    stringRequired: string;
+    /** Number */
+    number?: number;
+    /** True literal */
+    trueLiteral?: true;
+    /** Symbol */
+    symbol?: symbol;
+    /** Null */
+    nullValue?: null;
+    /** Undefined */
+    undefinedValue?: undefined;
+    /** Any */
+    any?: any;
+    /** Date */
+    date?: Date;
+    /** Array of numbers */
+    arrayOfNumbers?: number[];
+    /** Enum */
+    enumValue?: MyEnum;
+    /** Union of literal strings */
+    unionLiteralStrings?: LiteralStrings;
+    /** Union of literal numbers */
+    unionLiteralNumbers?: LiteralNumbers;
+    /** Object */
+    object?: MyObject;
+    /** Inline object */
+    inlineObject?: {
+      foo: string;
+      bar: number;
+    };
+    /** Record */
+    record?: Record<string, number>;
+    /** Union of types */
+    unionTypes?: number | string;
+    /** Intersection of types */
+    intersection?: { a: number } & { b: string };
+    /** Event callback function */
+    func?: (event: MouseEvent) => number;
+    /** Snippet contents */
+    children: Snippet;
+    /** Actual arg types inferred from the component */
+    argTypes: Record<string, any>;
+  } = $props();
+</script>
+
+<h1>Docgen: TS - inline prop types</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      nullValue,
+      date,
+      arrayOfNumbers,
+      enumValue,
+      record,
+      unionTypes,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts-legacy.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TSLegacy from './ts-legacy.svelte';
+
+const meta = {
+  component: TSLegacy,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TSLegacy,
+    props: { ...args, argTypes } as any,
+  }),
+} satisfies Meta<typeof TSLegacy>;
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/ts-legacy.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  /** Boolean */
+  export let boolean: boolean = true;
+  /** String */
+  export let string: string = 'default';
+  /** String (required) */
+  export let stringRequired: string;
+  /** Number */
+  export let number: number = 123;
+  /** True literal */
+  export let trueLiteral: true | undefined = undefined;
+  /** Symbol */
+  export let symbol: symbol | undefined = undefined;
+  /** Null */
+  export let nullValue: null = null;
+  /** Undefined */
+  export let undefinedValue: undefined = undefined;
+  /** Any */
+  export let any: any = null;
+  /** Date */
+  export let date: Date = new Date('20 Jan 1983');
+  /** Array of numbers */
+  export let arrayOfNumbers: number[] = [1, 20, 300];
+  /** Enum */
+  export let enumValue: MyEnum = MyEnum.FOO;
+  /** Union of literal strings */
+  export let unionLiteralStrings: LiteralStrings = 'apple';
+  /** Union of literal numbers */
+  export let unionLiteralNumbers: LiteralNumbers = 1000;
+  /** Object */
+  export let object: MyObject | undefined = undefined;
+  /** Inline object */
+  export let inlineObject:
+    | {
+        foo: string;
+        bar: number;
+      }
+    | undefined = undefined;
+  /** Record */
+  export let record: Record<string, number> = { a: 1, b: 2 };
+  /** Union of types */
+  export let unionTypes: number | string = 123;
+  /** Intersection of types */
+  export let intersection: ({ a: number } & { b: string }) | undefined = undefined;
+  /** Event callback function */
+  export let func: (event: MouseEvent) => number = () => 10;
+  /** Snippet contents */
+  export let children: Snippet;
+  /** Actual arg types inferred from the component */
+  export let argTypes: Record<string, any> = {};
+</script>
+
+<h1>Docgen: TS - legacy</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      trueLiteral,
+      symbol,
+      nullValue,
+      undefinedValue,
+      any,
+      date,
+      arrayOfNumbers,
+      enumValue,
+      unionLiteralStrings,
+      unionLiteralNumbers,
+      object,
+      inlineObject,
+      record,
+      unionTypes,
+      intersection,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts-referenced-prop-types.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TSReferencedPropTypes from './ts-referenced-prop-types.svelte';
+
+const meta = {
+  component: TSReferencedPropTypes,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TSReferencedPropTypes,
+    props: { ...args, argTypes },
+  }),
+} satisfies Meta<typeof TSReferencedPropTypes>;
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/ts-referenced-prop-types.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  type PropsA = {
+    /** Boolean */
+    boolean?: boolean;
+    /** String */
+    string?: string;
+    /** String (required) */
+    stringRequired: string;
+    /** Number */
+    number?: number;
+  };
+  type PropsB = {
+    /** True literal */
+    trueLiteral?: true;
+    /** Symbol */
+    symbol?: symbol;
+    /** Null */
+    nullValue?: null;
+    /** Undefined */
+    undefinedValue?: undefined;
+    /** Any */
+    any?: any;
+    /** Date */
+    date?: Date;
+    /** Array of numbers */
+    arrayOfNumbers?: number[];
+    /** Enum */
+    enumValue?: MyEnum;
+    /** Union of literal strings */
+    unionLiteralStrings?: LiteralStrings;
+    /** Union of literal numbers */
+    unionLiteralNumbers?: LiteralNumbers;
+    /** Object */
+    object?: MyObject;
+    /** Inline object */
+    inlineObject?: {
+      foo: string;
+      bar: number;
+    };
+    /** Record */
+    record?: Record<string, number>;
+    /** Union of types */
+    unionTypes?: number | string;
+    /** Intersection of types */
+    intersection?: { a: number } & { b: string };
+    /** Event callback function */
+    func?: (event: MouseEvent) => number;
+    /** Snippet contents */
+    children: Snippet;
+    /** Actual arg types inferred from the component */
+    argTypes: Record<string, any>;
+  };
+
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    nullValue = null,
+    arrayOfNumbers = [1, 20, 300],
+    enumValue = MyEnum.FOO,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    children,
+    func = () => 10,
+    argTypes,
+  }: PropsA & PropsB = $props();
+</script>
+
+<h1>Docgen: TS - referenced prop types</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      nullValue,
+      arrayOfNumbers,
+      enumValue,
+      record,
+      date,
+      unionTypes,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TS from './ts.svelte';
+
+const meta = {
+  component: TS,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TS,
+    props: { ...args, argTypes },
+  }),
+} satisfies Meta<typeof TS>;
+
+export default meta;
+
+export const Default = {};