Release: Patch 7.6.6

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.6.6
+
+- SvelteKit: Support 2.0 modules with mocks - [#25244](https://github.com/storybookjs/storybook/pull/25244), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+
 ## 7.6.5
 
 - Angular: Update Angular cli templates - [#25152](https://github.com/storybookjs/storybook/pull/25152), thanks [@Marklb](https://github.com/Marklb)!

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/Environment.svelte

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

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/Environment.svelte

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

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();

code/package.json

@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.6"
 }

code/yarn.lock

@@ -6281,6 +6281,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@storybook/client-logger@npm:7.5.0":
+  version: 7.5.0
+  resolution: "@storybook/client-logger@npm:7.5.0"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 90326c49a224bf21680c04ffee94725bf75658086093ccb839a8aae39476929c4719eafb18e498a148cf0dd956d4e9a5d3b2a34d09ca4fd25e2af553458558ac
+  languageName: node
+  linkType: hard
+
 "@storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/client-logger@workspace:lib/client-logger"
@@ -6684,12 +6693,12 @@ __metadata:
   linkType: soft
 
 "@storybook/icons@npm:^1.1.6":
-  version: 1.2.3
-  resolution: "@storybook/icons@npm:1.2.3"
+  version: 1.1.7
+  resolution: "@storybook/icons@npm:1.1.7"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 510878cc80a844eb5b83460be8e71890743fb9fd70afb3cc46658d3324574d6389542a5dd078c5f613741193d0ac1ff7d2d83b33e447ee0fc1c3699d255ba225
+  checksum: 5bb97f948f2a1cfc067a120f8e17004cdf9cdef0d08558ec51659e4e4d4b1620c76ced6d15a57d84aed888c664a0f9daa7a6e7b4ef22302d95f3228aa627bc83
   languageName: node
   linkType: hard
 
@@ -7656,7 +7665,7 @@ __metadata:
     vite: "npm:^4.0.0"
   peerDependencies:
     svelte: ^3.0.0 || ^4.0.0
-    vite: ^4.0.0
+    vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -7711,7 +7720,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:^7.0.2, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@npm:^7.0.2":
+  version: 7.5.0
+  resolution: "@storybook/theming@npm:7.5.0"
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
+    "@storybook/client-logger": "npm:7.5.0"
+    "@storybook/global": "npm:^5.0.0"
+    memoizerific: "npm:^1.11.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 57da8e27c748cbec4dc1661cdd2d449949d97476d8e97933696b31d07c7361cbbcca8d7225cc00ca078daa160023b8965ddec7c23519ce0a4ef2658246b062e7
+  languageName: node
+  linkType: hard
+
+"@storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies: