From b3840f4e4f86ffc779836086a1ff24b1eeff0ffa Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 15 Dec 2023 16:45:53 +0100
Subject: [PATCH 1/2] SvelteKit: new modules exports mocks

---
 code/e2e-tests/framework-svelte.spec.ts       | 16 +++++++++
 code/frameworks/sveltekit/README.md           |  2 ++
 code/frameworks/sveltekit/package.json        |  2 +-
 .../sveltekit/src/mocks/app/navigation.ts     | 14 ++++++++
 code/frameworks/sveltekit/src/preview.ts      |  2 +-
 .../Navigation.svelte                         | 14 +++++++-
 .../navigation.stories.js                     | 36 +++++++++++++++++++
 .../Navigation.svelte                         | 14 +++++++-
 .../navigation.stories.js                     | 36 +++++++++++++++++++
 .../Navigation.svelte                         | 14 +++++++-
 .../navigation.stories.js                     | 36 +++++++++++++++++++
 11 files changed, 181 insertions(+), 5 deletions(-)

diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts
index 40d2b7f817dd..7033342b6890 100644
--- a/code/e2e-tests/framework-svelte.spec.ts
+++ b/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();
   });
 });
diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md
index 2f2755dc91a2..c3c01c771897 100644
--- a/code/frameworks/sveltekit/README.md
+++ b/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                                        |
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 95f01fb533ef..85e0c1000043 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0-next.16",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0 | ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"
diff --git a/code/frameworks/sveltekit/src/mocks/app/navigation.ts b/code/frameworks/sveltekit/src/mocks/app/navigation.ts
index 8d23ddbea46a..edd60f5ebf83 100644
--- a/code/frameworks/sveltekit/src/mocks/app/navigation.ts
+++ b/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);
+}
diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts
index 10affca46fc4..fc3ab8bcc65a 100644
--- a/code/frameworks/sveltekit/src/preview.ts
+++ b/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']);
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Navigation.svelte
index 4bcb7d0e6fc9..24a37f3517f8 100644
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Navigation.svelte
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-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
+>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js
index ded12268e03c..8640d467c463 100644
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-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();
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte
index b923b8ee78d8..c9d5459f0d4a 100644
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte
+++ b/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
+>
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
index ded12268e03c..8640d467c463 100644
--- 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
@@ -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();
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
index 4bcb7d0e6fc9..24a37f3517f8 100644
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte
+++ b/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
+>
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
index ded12268e03c..8640d467c463 100644
--- 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
@@ -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();

From 482ef84dec096d0e4dbeefaaed8d8906f8ef8836 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 15 Dec 2023 21:39:02 +0100
Subject: [PATCH 2/2] fix peer dep and update yarn lock

---
 code/frameworks/sveltekit/package.json | 2 +-
 code/yarn.lock                         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 85e0c1000043..cbd378434112 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0-next.16",
-    "vite": "^4.0.0 | ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"
diff --git a/code/yarn.lock b/code/yarn.lock
index fe0b388fcdd4..beebf33a74dc 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6704,7 +6704,7 @@ __metadata:
     vite: "npm:^4.0.0"
   peerDependencies:
     svelte: ^4.0.0 || ^5.0.0-next.16
-    vite: ^4.0.0
+    vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft