@storybook/sveltekit 9.0.0-alpha.8 → 9.0.0-beta.0

package/template/stories_svelte-kit-prerelease-ts/DocsTSReferencedPropTypes.svelte

@@ -1,118 +0,0 @@
-<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;
-    /**
-     * 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>;
-    /**
-     * Date
-     */
-    date?: Date;
-    /**
-     * Union of types
-     */
-    unionTypes?: number | string;
-    /**
-     * Intersection of types
-     */
-    intersection?: { a: number } & { b: string };
-    /**
-     * Snippet contents
-     */
-    children: Snippet;
-    /**
-     * Event callback function
-     */
-    func?: (event: MouseEvent) => 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,
-  }: PropsA & PropsB = $props();
-</script>
-
-<div>Docs: TS + Runes (referenced prop types)</div>

package/template/stories_svelte-kit-prerelease-ts/Forms.svelte

@@ -1,7 +0,0 @@
-<script>
-	import { enhance } from '$app/forms';
-</script>
-
-<form use:enhance>
-	<button>enhance</button>
-</form>

package/template/stories_svelte-kit-prerelease-ts/docs-jsdoc-runes.stories.js

@@ -1,10 +0,0 @@
-import DocsJSDocRunes from './DocsJSDocRunes.svelte';
-
-export default {
-  title: 'stories/renderers/svelte/docs-jsdoc-runes',
-  component: DocsJSDocRunes,
-  args: {},
-  tags: ['autodocs'],
-};
-
-export const Primary = {};

package/template/stories_svelte-kit-prerelease-ts/docs-ts-inline-prop-types.stories.js

@@ -1,10 +0,0 @@
-import DocsTSInlinePropTypes from './DocsTSInlinePropTypes.svelte';
-
-export default {
-  title: 'stories/renderers/svelte/docs-ts-inline-prop-types',
-  component: DocsTSInlinePropTypes,
-  args: {},
-  tags: ['autodocs'],
-};
-
-export const Primary = {};

package/template/stories_svelte-kit-prerelease-ts/docs-ts-referenced-prop-types.stories.js

@@ -1,10 +0,0 @@
-import DocsTSReferencedPropTypes from './DocsTSReferencedPropTypes.svelte';
-
-export default {
-  title: 'stories/renderers/svelte/docs-ts-referenced-prop-types',
-  component: DocsTSReferencedPropTypes,
-  args: {},
-  tags: ['autodocs'],
-};
-
-export const Primary = {};

package/template/stories_svelte-kit-prerelease-ts/docs-ts.stories.js

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

package/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js

@@ -1,53 +0,0 @@
-import { expect, fn, within } from 'storybook/test';
-
-import Hrefs from './Hrefs.svelte';
-
-export default {
-  title: 'stories/sveltekit/modules/hrefs',
-  component: Hrefs,
-  tags: ['autodocs'],
-};
-
-export const DefaultActions = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-
-    const initialUrl = window.location.toString();
-
-    const basicHref = canvas.getByText('/basic-href');
-    basicHref.click();
-
-    const complexHref = canvas.getByText(
-      '/deep/nested/link?with=true&multiple-params=200#and-an-id'
-    );
-    complexHref.click();
-
-    const finalUrl = window.location.toString();
-    expect(finalUrl).toBe(initialUrl);
-  },
-};
-
-const basicStringMatch = fn();
-const noMatch = fn();
-const exactStringMatch = fn();
-const regexMatch = fn();
-
-export const Callbacks = {
-  parameters: {
-    sveltekit_experimental: {
-      hrefs: {
-        '/basic-href': basicStringMatch,
-        '/basic': noMatch,
-        '/deep/nested/link?with=true&multiple-params=200#and-an-id': exactStringMatch,
-        'nested/link\\?with': { callback: regexMatch, asRegex: true },
-      },
-    },
-  },
-  play: async (ctx) => {
-    await DefaultActions.play(ctx);
-    expect(basicStringMatch).toHaveBeenCalledTimes(1);
-    expect(noMatch).not.toHaveBeenCalled();
-    expect(exactStringMatch).toHaveBeenCalledTimes(1);
-    expect(regexMatch).toHaveBeenCalledTimes(1);
-  },
-};

package/template/stories_svelte-kit-prerelease-ts/types.ts

@@ -1,7 +0,0 @@
-export type LiteralNumbers = 100 | 1000 | 10000;
-export type LiteralStrings = 'apple' | 'grape' | 'orange';
-
-export enum MyEnum {
-  FOO = 'foo',
-  BAR = 'bar',
-}

package/template/stories_svelte-kit-skeleton-js/Hrefs.svelte

@@ -1,8 +0,0 @@
-<ul>
-  <li><a href="/basic-href">Link to <code>/basic-href</code></a></li>
-  <li>
-    <a href="/deep/nested/link?with=true&multiple-params=200#and-an-id"
-      >Link to <code>/deep/nested/link?with=true&multiple-params=200#and-an-id</code></a
-    >
-  </li>
-</ul>

package/template/stories_svelte-kit-skeleton-js/Navigation.svelte

@@ -1,38 +0,0 @@
-<script>
-	import { goto, invalidate, invalidateAll, afterNavigate, pushState, replaceState } from '$app/navigation';
-
-	export let afterNavigateFn;
-	if(afterNavigateFn){
-		afterNavigate(afterNavigateFn);
-	}
-</script>
-
-<button
-	on:click={() => {
-		goto('/storybook-goto');
-	}}>goto</button
->
-
-<button
-	on:click={() => {
-		invalidate('/storybook-invalidate');
-	}}>invalidate</button
->
-
-<button
-	on:click={() => {
-		invalidateAll();
-	}}>invalidateAll</button
->
-
-<button
-	on:click={() => {
-		pushState('/storybook-push-state', {});
-	}}>pushState</button
->
-
-<button
-	on:click={() => {
-		replaceState('/storybook-replace-state', {});
-	}}>replaceState</button
->

package/template/stories_svelte-kit-skeleton-js/Stores.svelte

@@ -1,17 +0,0 @@
-<script>
-	import { page, navigating, updated, getStores } from '$app/stores';
-
-	let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores();
-
-	updated.check();
-</script>
-
-<p>Directly importing</p>
-<pre>{JSON.stringify($page, null, 2)}</pre>
-<pre>{JSON.stringify($navigating, null, 2)}</pre>
-<pre>{JSON.stringify($updated, null, 2)}</pre>
-
-<p>With getStores</p>
-<pre>{JSON.stringify($pageStore, null, 2)}</pre>
-<pre>{JSON.stringify($navigatingStore, null, 2)}</pre>
-<pre>{JSON.stringify($updatedStore, null, 2)}</pre>

package/template/stories_svelte-kit-skeleton-js/environment.stories.js

@@ -1,11 +0,0 @@
-import { expect, fn, within } from 'storybook/test';
-
-import Environment from './Environment.svelte';
-
-export default {
-  title: 'stories/sveltekit/modules/environment',
-  component: Environment,
-  tags: ['autodocs'],
-};
-
-export const Default = {};

package/template/stories_svelte-kit-skeleton-js/forms.stories.js

@@ -1,27 +0,0 @@
-import { expect, fn, userEvent, within } from 'storybook/test';
-
-import Forms from './Forms.svelte';
-
-export default {
-  title: 'stories/sveltekit/modules/forms',
-  component: Forms,
-  tags: ['autodocs'],
-};
-
-const enhance = fn();
-
-export const Enhance = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    expect(enhance).toHaveBeenCalled();
-  },
-  parameters: {
-    sveltekit_experimental: {
-      forms: {
-        enhance,
-      },
-    },
-  },
-};

package/template/stories_svelte-kit-skeleton-js/navigation.stories.js

@@ -1,121 +0,0 @@
-import { expect, fn, within } from 'storybook/test';
-
-import Navigation from './Navigation.svelte';
-
-export default {
-  title: 'stories/sveltekit/modules/navigation',
-  component: Navigation,
-  tags: ['autodocs'],
-};
-
-const goto = fn();
-
-export const Goto = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const button = canvas.getByText('goto');
-    button.click();
-    expect(goto).toHaveBeenCalledWith('/storybook-goto');
-  },
-  parameters: {
-    sveltekit_experimental: {
-      navigation: {
-        goto,
-      },
-    },
-  },
-};
-
-const replaceState = fn();
-
-export const ReplaceState = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const button = canvas.getByText('replaceState');
-    button.click();
-    expect(replaceState).toHaveBeenCalledWith('/storybook-replace-state', {});
-  },
-  parameters: {
-    sveltekit_experimental: {
-      navigation: {
-        replaceState,
-      },
-    },
-  },
-};
-
-const pushState = fn();
-
-export const PushState = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const button = canvas.getByText('pushState');
-    button.click();
-    expect(pushState).toHaveBeenCalledWith('/storybook-push-state', {});
-  },
-  parameters: {
-    sveltekit_experimental: {
-      navigation: {
-        pushState,
-      },
-    },
-  },
-};
-
-export const DefaultActions = {};
-
-const invalidate = fn();
-
-export const Invalidate = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const button = canvas.getByText('invalidate', { exact: true });
-    button.click();
-    expect(invalidate).toHaveBeenCalledWith('/storybook-invalidate');
-  },
-  parameters: {
-    sveltekit_experimental: {
-      navigation: {
-        invalidate,
-      },
-    },
-  },
-};
-
-const invalidateAll = fn();
-
-export const InvalidateAll = {
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const button = canvas.getByText('invalidateAll');
-    button.click();
-    expect(invalidateAll).toHaveBeenCalledWith();
-  },
-  parameters: {
-    sveltekit_experimental: {
-      navigation: {
-        invalidateAll,
-      },
-    },
-  },
-};
-
-const afterNavigateFn = fn();
-
-export const AfterNavigate = {
-  async play() {
-    expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' });
-  },
-  args: {
-    afterNavigateFn,
-  },
-  parameters: {
-    sveltekit_experimental: {
-      navigation: {
-        afterNavigate: {
-          test: 'passed',
-        },
-      },
-    },
-  },
-};

package/template/stories_svelte-kit-skeleton-js/paths.stories.js

@@ -1,11 +0,0 @@
-import { expect, fn, within } from 'storybook/test';
-
-import Paths from './Paths.svelte';
-
-export default {
-  title: 'stories/sveltekit/modules/paths',
-  component: Paths,
-  tags: ['autodocs'],
-};
-
-export const Default = {};

package/template/stories_svelte-kit-skeleton-js/stores.stories.js

@@ -1,116 +0,0 @@
-import Stores from './Stores.svelte';
-
-export default {
-  title: 'stories/sveltekit/modules/stores',
-  component: Stores,
-  tags: ['autodocs'],
-};
-
-export const AllUndefined = {};
-
-export const PageStore = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        page: {
-          data: {
-            test: 'passed',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const NavigatingStore = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        navigating: {
-          route: {
-            id: '/storybook',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const UpdatedStore = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        updated: true,
-      },
-    },
-  },
-};
-
-export const PageAndNavigatingStore = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        page: {
-          data: {
-            test: 'passed',
-          },
-        },
-        navigating: {
-          route: {
-            id: '/storybook',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const PageAndUpdatedStore = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        page: {
-          data: {
-            test: 'passed',
-          },
-        },
-        updated: true,
-      },
-    },
-  },
-};
-
-export const NavigatingAndUpdatedStore = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        navigating: {
-          route: {
-            id: '/storybook',
-          },
-        },
-        updated: true,
-      },
-    },
-  },
-};
-
-export const AllThreeStores = {
-  parameters: {
-    sveltekit_experimental: {
-      stores: {
-        page: {
-          data: {
-            test: 'passed',
-          },
-        },
-        navigating: {
-          route: {
-            id: '/storybook',
-          },
-        },
-        updated: true,
-      },
-    },
-  },
-};

package/template/stories_svelte-kit-skeleton-ts/DocsTS.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-  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 = 100;
-  /**
-   * 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;
-</script>
-
-<div>Docs: TS</div>

package/template/stories_svelte-kit-skeleton-ts/Environment.svelte

@@ -1,8 +0,0 @@
-<script>
-  import { browser, dev, building, version } from '$app/environment';
-</script>
-
-<div data-testid="browser">{browser}</div>
-<div data-testid="dev">{dev}</div>
-<div data-testid="building">{building}</div>
-<div data-testid="version" data-chromatic="ignore">{version}</div>