SvelteKit: Add support for mocking $app/state

code/frameworks/sveltekit/package.json

@@ -70,11 +70,13 @@
     "@storybook/svelte-vite": "workspace:*"
   },
   "devDependencies": {
+    "@sveltejs/kit": "^2.0.0",
     "@types/node": "^22.0.0",
     "typescript": "^5.8.3",
     "vite": "^6.2.5"
   },
   "peerDependencies": {
+    "@sveltejs/kit": "^2.0.0",
     "storybook": "workspace:^",
     "svelte": "^5.0.0",
     "vite": "^5.0.0 || ^6.0.0"

code/frameworks/sveltekit/src/mocks/app/state.svelte.ts

@@ -0,0 +1,60 @@
+/**
+ * Inspired by the the code:
+ * {@link https://github.com/sveltejs/kit/blob/main/packages/kit/src/runtime/client/state.svelte.js}
+ *
+ * The differences:
+ *
+ * - Legacy Svelte support is not included
+ * - Not using classes (internal coding style preference)
+ *
+ * @module
+ */
+
+/* eslint-disable prefer-const */
+import type { Navigation, Page } from '@sveltejs/kit';
+
+let pageData = $state.raw<Page['data']>({});
+let pageForm = $state.raw<Page['form']>(null);
+let pageError = $state.raw<Page['error']>(null);
+let pageParams = $state.raw<Page['params']>({});
+let pageRoute = $state.raw<Page['route']>({ id: null });
+let pageState = $state.raw<Page['state']>({});
+let pageStatus = $state.raw<Page['status']>(-1);
+let pageUrl = $state.raw<Page['url']>(new URL('https://example.com'));
+
+export let page = {
+  data: pageData,
+  form: pageForm,
+  error: pageError,
+  params: pageParams,
+  route: pageRoute,
+  state: pageState,
+  status: pageStatus,
+  url: pageUrl,
+} satisfies Page;
+
+let navigatingFrom = $state.raw<Navigation['from'] | null>(null);
+let navigatingTo = $state.raw<Navigation['from'] | null>(null);
+let navigatingType = $state.raw<Navigation['type'] | null>(null);
+let navigatingWillUnload = $state.raw<Navigation['willUnload'] | null>(null);
+let navigatingDelta = $state.raw<Navigation['delta'] | null>(null);
+let navigatingComplete = $state.raw<Navigation['complete'] | null>(null);
+
+export let navigating = {
+  from: navigatingFrom,
+  to: navigatingTo,
+  type: navigatingType,
+  willUnload: navigatingWillUnload,
+  delta: navigatingDelta,
+  complete: navigatingComplete,
+};
+
+let updatedCurrent = $state.raw(false);
+
+export let updated = {
+  current: updatedCurrent,
+  check: () =>
+    new Promise<boolean>((resolve) => {
+      resolve(updatedCurrent);
+    }),
+};

code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts

@@ -14,6 +14,7 @@ export function mockSveltekitStores() {
         alias: {
           '$app/forms': resolve(dir, '../src/mocks/app/forms.ts'),
           '$app/navigation': resolve(dir, '../src/mocks/app/navigation.ts'),
+          '$app/state': resolve(dir, '../src/mocks/app/state.svelte.ts'),
           '$app/stores': resolve(dir, '../src/mocks/app/stores.ts'),
         },
       },

code/frameworks/sveltekit/src/preview.ts

@@ -4,6 +4,11 @@ import { action } from 'storybook/actions';
 import { onMount } from 'svelte';
 
 import { setAfterNavigateArgument } from './mocks/app/navigation';
+import {
+  navigating as appStateNavigating,
+  page as appStatePage,
+  updated as appStateUpdated,
+} from './mocks/app/state.svelte';
 import { setNavigating, setPage, setUpdated } from './mocks/app/stores';
 import type { HrefConfig, NormalizedHrefConfig, SvelteKitParameters } from './types';
 
@@ -21,6 +26,70 @@ const svelteKitMocksDecorator: Decorator = (Story, ctx) => {
   setUpdated(svelteKitParameters?.stores?.updated);
   setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
 
+  const svelteKitParametersStatePage = svelteKitParameters.state?.page;
+
+  if (svelteKitParametersStatePage?.data) {
+    appStatePage.data = svelteKitParametersStatePage.data;
+  }
+
+  if (svelteKitParametersStatePage?.form) {
+    appStatePage.form = svelteKitParametersStatePage.form;
+  }
+
+  if (svelteKitParametersStatePage?.error) {
+    appStatePage.error = svelteKitParametersStatePage.error;
+  }
+
+  if (svelteKitParametersStatePage?.params) {
+    appStatePage.params = svelteKitParametersStatePage.params;
+  }
+
+  if (svelteKitParametersStatePage?.route) {
+    appStatePage.route = svelteKitParametersStatePage.route;
+  }
+
+  if (svelteKitParametersStatePage?.state) {
+    appStatePage.state = svelteKitParametersStatePage.state;
+  }
+
+  if (svelteKitParametersStatePage?.status) {
+    appStatePage.status = svelteKitParametersStatePage.status;
+  }
+
+  if (svelteKitParametersStatePage?.url) {
+    appStatePage.url = svelteKitParametersStatePage.url;
+  }
+
+  const svelteKitParametersStateNavigating = svelteKitParameters.state?.navigating;
+
+  if (svelteKitParametersStateNavigating?.from) {
+    appStateNavigating.from = svelteKitParametersStateNavigating.from;
+  }
+
+  if (svelteKitParametersStateNavigating?.to) {
+    appStateNavigating.to = svelteKitParametersStateNavigating.to;
+  }
+
+  if (svelteKitParametersStateNavigating?.type) {
+    appStateNavigating.type = svelteKitParametersStateNavigating.type;
+  }
+
+  if (svelteKitParametersStateNavigating?.willUnload) {
+    appStateNavigating.willUnload = svelteKitParametersStateNavigating.willUnload;
+  }
+
+  if (svelteKitParametersStateNavigating?.delta) {
+    appStateNavigating.delta = svelteKitParametersStateNavigating.delta;
+  }
+
+  if (svelteKitParametersStateNavigating?.complete) {
+    appStateNavigating.complete = svelteKitParametersStateNavigating.complete;
+  }
+
+  if (typeof svelteKitParameters.state?.updated?.current === 'boolean') {
+    appStateUpdated.current = svelteKitParameters.state?.updated?.current;
+  }
+
   onMount(() => {
     const globalClickListener = (e: MouseEvent) => {
       // we add a global click event listener and we check if there's a link in the composedPath

code/frameworks/sveltekit/src/types.ts

@@ -5,6 +5,8 @@ import type {
 
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
 
+import type { Navigation, Page } from '@sveltejs/kit';
+
 import type { enhance } from './mocks/app/forms';
 import type { goto, invalidate, invalidateAll } from './mocks/app/navigation';
 
@@ -48,6 +50,15 @@ export type HrefConfig = NormalizedHrefConfig | NormalizedHrefConfig['callback']
 
 export type SvelteKitParameters = Partial<{
   hrefs: Record<string, HrefConfig>;
+  state: {
+    page: Partial<Page>;
+    navigating: Partial<Navigation>;
+    updated: { current: boolean };
+  };
+  /**
+   * @deprecated
+   * @see {@link https://svelte.dev/docs/kit/$app-stores}
+   */
   stores: {
     page: Record<string, any>;
     navigating: Record<string, any>;

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

@@ -0,0 +1,18 @@
+<script>
+import { onMount} from "svelte";
+	import { page, navigating, updated } from '$app/state';
+
+	updated.check();
+
+</script>
+
+<h1>$app/state</h1>
+
+<h2>page</h2>
+<pre>{JSON.stringify(page, null, 2)}</pre>
+
+<h2>navigating</h2>
+<pre>{JSON.stringify(navigating, null, 2)}</pre>
+
+<h2>updated</h2>
+<pre>{JSON.stringify(updated, null, 2)}</pre>

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

@@ -0,0 +1,103 @@
+import State from './State.svelte';
+
+export default {
+  title: 'stories/frameworks/sveltekit/modules/state',
+  component: State,
+};
+
+export const AllUndefined = {};
+
+export const Page = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const Navigating = {
+  parameters: {
+    sveltekit_experimental: {
+      navigating: {
+        route: {
+          id: '/storybook',
+        },
+      },
+    },
+  },
+};
+
+export const Updated = {
+  parameters: {
+    sveltekit_experimental: {
+      updated: true,
+    },
+  },
+};
+
+export const PageAndNavigating = {
+  parameters: {
+    sveltekit_experimental: {
+      page: {
+        data: {
+          test: 'passed',
+        },
+      },
+      navigating: {
+        route: {
+          id: '/storybook',
+        },
+      },
+    },
+  },
+};
+
+export const PageAndUpdated = {
+  parameters: {
+    sveltekit_experimental: {
+      page: {
+        data: {
+          test: 'passed',
+        },
+      },
+      updated: true,
+    },
+  },
+};
+
+export const NavigatingAndUpdated = {
+  parameters: {
+    sveltekit_experimental: {
+      navigating: {
+        route: {
+          id: '/storybook',
+        },
+      },
+      updated: true,
+    },
+  },
+};
+
+export const AllThree = {
+  parameters: {
+    sveltekit_experimental: {
+      page: {
+        data: {
+          test: 'passed',
+        },
+      },
+      navigating: {
+        route: {
+          id: '/storybook',
+        },
+      },
+      updated: true,
+    },
+  },
+};