Directly importing
+{JSON.stringify($page, null, 2)}
+{JSON.stringify($navigating, null, 2)}
+{JSON.stringify($updated, null, 2)}
+
+With getStores
+{JSON.stringify($pageStore, null, 2)}
+{JSON.stringify($navigatingStore, null, 2)}
+{JSON.stringify($updatedStore, null, 2)}
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js
new file mode 100644
index 000000000000..72b584baef76
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js
@@ -0,0 +1,26 @@
+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,
+ },
+ },
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js
new file mode 100644
index 000000000000..f1cbf4973534
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js
@@ -0,0 +1,53 @@
+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);
+ // eslint-disable-next-line no-undef
+ 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();
+
+ // eslint-disable-next-line no-undef
+ 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);
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js
new file mode 100644
index 000000000000..529997126f7c
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js
@@ -0,0 +1,82 @@
+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');
+ },
+ parameters: {
+ sveltekit_experimental: {
+ navigation: {
+ goto,
+ },
+ },
+ },
+};
+
+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');
+ },
+ 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',
+ },
+ },
+ },
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js
new file mode 100644
index 000000000000..7f7401cf8bee
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js
@@ -0,0 +1,116 @@
+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,
+ },
+ },
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte
new file mode 100644
index 000000000000..371a17656bea
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte
new file mode 100644
index 000000000000..4e7d69e0e051
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte
@@ -0,0 +1,8 @@
+
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte
new file mode 100644
index 000000000000..d97b6fe8a2df
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte
new file mode 100644
index 000000000000..164b00f7fa8b
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte
@@ -0,0 +1,17 @@
+
+
+Directly importing
+{JSON.stringify($page, null, 2)}
+{JSON.stringify($navigating, null, 2)}
+{JSON.stringify($updated, null, 2)}
+
+With getStores
+{JSON.stringify($pageStore, null, 2)}
+{JSON.stringify($navigatingStore, null, 2)}
+{JSON.stringify($updatedStore, null, 2)}
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js
new file mode 100644
index 000000000000..72b584baef76
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js
@@ -0,0 +1,26 @@
+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,
+ },
+ },
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js
new file mode 100644
index 000000000000..f1cbf4973534
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js
@@ -0,0 +1,53 @@
+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);
+ // eslint-disable-next-line no-undef
+ 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();
+
+ // eslint-disable-next-line no-undef
+ 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);
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js
new file mode 100644
index 000000000000..529997126f7c
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js
@@ -0,0 +1,82 @@
+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');
+ },
+ parameters: {
+ sveltekit_experimental: {
+ navigation: {
+ goto,
+ },
+ },
+ },
+};
+
+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');
+ },
+ 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',
+ },
+ },
+ },
+ },
+};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js
new file mode 100644
index 000000000000..7f7401cf8bee
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js
@@ -0,0 +1,116 @@
+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,
+ },
+ },
+ },
+};
diff --git a/code/renderers/svelte/template/stories/decorators-runs-once.stories.js b/code/renderers/svelte/template/stories/decorators-runs-once.stories.js
index 649d9f8a18bb..5186ccb14d88 100644
--- a/code/renderers/svelte/template/stories/decorators-runs-once.stories.js
+++ b/code/renderers/svelte/template/stories/decorators-runs-once.stories.js
@@ -7,7 +7,7 @@ export default {
},
decorators: [
(Story) => {
- console.log('decorator');
+ console.log('decorator called');
return Story();
},
],
diff --git a/code/yarn.lock b/code/yarn.lock
index d2928cb17c0e..760db61c9a4e 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -7659,6 +7659,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/sveltekit@workspace:frameworks/sveltekit"
dependencies:
+ "@storybook/addon-actions": "workspace:*"
"@storybook/builder-vite": "workspace:*"
"@storybook/svelte": "workspace:*"
"@storybook/svelte-vite": "workspace:*"