Merge pull request #25244 from paoloricciuti/new-sveltekit-modules

SvelteKit: Support 2.0 modules with mocks
(cherry picked from commit aae68d4)

code/e2e-tests/framework-svelte.spec.ts

@@ -122,5 +122,21 @@ test.describe('SvelteKit', () => {
       hasText: `"invalidateAll"`,
     });
     await expect(invalidateAllLogItem).toBeVisible();
+
+    const replaceState = root.getByRole('button', { name: 'replaceState' });
+    await replaceState.click();
+
+    const replaceStateLogItem = page.locator('#storybook-panel-root #panel-tab-content', {
+      hasText: `/storybook-replace-state`,
+    });
+    await expect(replaceStateLogItem).toBeVisible();
+
+    const pushState = root.getByRole('button', { name: 'pushState' });
+    await pushState.click();
+
+    const pushStateLogItem = page.locator('#storybook-panel-root #panel-tab-content', {
+      hasText: `/storybook-push-state`,
+    });
+    await expect(pushStateLogItem).toBeVisible();
   });
 });

code/frameworks/sveltekit/README.md

@@ -136,6 +136,8 @@ You can add the name of the module you want to mock to `parameters.sveltekit_exp
 | `import { navigating } from "$app/stores"`        | `parameters.sveltekit_experimental.stores.navigating`        | A Partial of the navigating store                                                                                                         |
 | `import { updated } from "$app/stores"`           | `parameters.sveltekit_experimental.stores.updated`           | A boolean representing the value of updated (you can also access `check()` which will be a noop)                                          |
 | `import { goto } from "$app/navigation"`          | `parameters.sveltekit_experimental.navigation.goto`          | A callback that will be called whenever goto is called, in no function is provided an action will be logged to the Actions panel          |
+| `import { pushState } from "$app/navigation"`     | `parameters.sveltekit_experimental.navigation.pushState`     | A callback that will be called whenever pushState is called, in no function is provided an action will be logged to the Actions panel     |
+| `import { replaceState } from "$app/navigation"`  | `parameters.sveltekit_experimental.navigation.replaceState`  | A callback that will be called whenever replaceState is called, in no function is provided an action will be logged to the Actions panel  |
 | `import { invalidate } from "$app/navigation"`    | `parameters.sveltekit_experimental.navigation.invalidate`    | A callback that will be called whenever invalidate is called, in no function is provided an action will be logged to the Actions panel    |
 | `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called, in no function is provided an action will be logged to the Actions panel |
 | `import { afterNavigate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called                                        |

code/frameworks/sveltekit/package.json

@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "svelte": "^3.0.0 || ^4.0.0",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"

code/frameworks/sveltekit/src/mocks/app/navigation.ts

@@ -41,3 +41,17 @@ export async function invalidateAll() {
 export function preloadCode() {}
 
 export function preloadData() {}
+
+export async function pushState(...args: any[]) {
+  const event = new CustomEvent('storybook:pushState', {
+    detail: args,
+  });
+  window.dispatchEvent(event);
+}
+
+export async function replaceState(...args: any[]) {
+  const event = new CustomEvent('storybook:replaceState', {
+    detail: args,
+  });
+  window.dispatchEvent(event);
+}

code/frameworks/sveltekit/src/preview.ts

@@ -117,7 +117,7 @@ export const decorators: Decorator[] = [
 
       const removeNavigationListeners = createListeners(
         'navigation',
-        ['goto', 'invalidate', 'invalidateAll'],
+        ['goto', 'invalidate', 'invalidateAll', 'pushState', 'replaceState'],
         true
       );
       const removeFormsListeners = createListeners('forms', ['enhance']);

code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte

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

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

@@ -25,6 +25,42 @@ export const 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();

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

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

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

@@ -25,6 +25,42 @@ export const 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();