@storybook/sveltekit 9.0.0-alpha.2 → 9.0.0-alpha.21

package/template/stories_svelte-kit-skeleton-ts/modules/Navigation.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { goto, invalidate, invalidateAll, afterNavigate, replaceState, pushState } from '$app/navigation';
+
+	export let 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-ts/modules/Paths.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { assets, base } from "$app/paths";
+</script>
+
+<div data-testid="assets">{assets}</div>
+<div data-testid="base">{base}</div>

package/template/stories_svelte-kit-skeleton-ts/modules/Stores.svelte

@@ -0,0 +1,17 @@
+<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-ts/modules/environment.stories.js

@@ -0,0 +1,8 @@
+import Environment from './Environment.svelte';
+
+export default {
+  title: 'stories/frameworks/sveltekit/modules/environment',
+  component: Environment,
+};
+
+export const Default = {};

package/template/{stories_svelte-kit-prerelease-ts → stories_svelte-kit-skeleton-ts/modules}/forms.stories.js

@@ -1,11 +1,10 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Forms from './Forms.svelte';
 
 export default {
-  title: 'stories/sveltekit/modules/forms',
+  title: 'stories/frameworks/sveltekit/modules/forms',
   component: Forms,
-  tags: ['autodocs'],
 };
 
 const enhance = fn();

package/template/{stories_svelte-kit-prerelease-ts → stories_svelte-kit-skeleton-ts/modules}/hrefs.stories.js

@@ -1,11 +1,10 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Hrefs from './Hrefs.svelte';
 
 export default {
-  title: 'stories/sveltekit/modules/hrefs',
+  title: 'stories/frameworks/sveltekit/modules/hrefs',
   component: Hrefs,
-  tags: ['autodocs'],
 };
 
 export const DefaultActions = {

package/template/{stories_svelte-kit-skeleton-js → stories_svelte-kit-skeleton-ts/modules}/navigation.stories.js

@@ -1,11 +1,10 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Navigation from './Navigation.svelte';
 
 export default {
-  title: 'stories/sveltekit/modules/navigation',
+  title: 'stories/frameworks/sveltekit/modules/navigation',
   component: Navigation,
-  tags: ['autodocs'],
 };
 
 const goto = fn();

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

@@ -0,0 +1,8 @@
+import Paths from './Paths.svelte';
+
+export default {
+  title: 'stories/frameworks/sveltekit/modules/paths',
+  component: Paths,
+};
+
+export const Default = {};

package/template/stories_svelte-kit-skeleton-ts/{stores.stories.js → modules/stores.stories.js}

@@ -1,9 +1,8 @@
 import Stores from './Stores.svelte';
 
 export default {
-  title: 'stories/sveltekit/modules/stores',
+  title: 'stories/frameworks/sveltekit/modules/stores',
   component: Stores,
-  tags: ['autodocs'],
 };
 
 export const AllUndefined = {};

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/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-prerelease-ts/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-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/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-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/docs-ts.stories.js

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

package/template/stories_svelte-kit-skeleton-ts/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-ts/forms.stories.js

@@ -1,27 +0,0 @@
-import { expect, fn, 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.getByText('enhance');
-    button.click();
-    expect(enhance).toHaveBeenCalled();
-  },
-  parameters: {
-    sveltekit_experimental: {
-      forms: {
-        enhance,
-      },
-    },
-  },
-};