SvelteKit: Add support for mocking $app/state

code/frameworks/sveltekit/build-config.ts

@@ -46,6 +46,7 @@ const config: BuildEntries = {
     ],
   },
   extraOutputs: {
+    './internal/mocks/app/state.svelte.js': './static/app-state-mock.svelte.js',
     './internal/MockProvider.svelte': './static/MockProvider.svelte',
   },
 };

code/frameworks/sveltekit/package.json

@@ -35,6 +35,7 @@
     "./internal/MockProvider.svelte": "./static/MockProvider.svelte",
     "./internal/mocks/app/forms": "./dist/mocks/app/forms.js",
     "./internal/mocks/app/navigation": "./dist/mocks/app/navigation.js",
+    "./internal/mocks/app/state.svelte.js": "./static/app-state-mock.svelte.js",
     "./internal/mocks/app/stores": "./dist/mocks/app/stores.js",
     "./node": {
       "types": "./dist/node/index.d.ts",

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

@@ -15,13 +15,13 @@ function createMockedStore(contextName: string) {
   ] as const;
 }
 
-export const [page, setPage] = createMockedStore('page-ctx');
-export const [navigating, setNavigating] = createMockedStore('navigating-ctx');
-const [updated, setUpdated] = createMockedStore('updated-ctx');
+export const [page, setAppStoresPage] = createMockedStore('page-ctx');
+export const [navigating, setAppStoresNavigating] = createMockedStore('navigating-ctx');
+const [updated, setAppStoresUpdated] = createMockedStore('updated-ctx');
 
 (updated as any).check = () => {};
 
-export { updated, setUpdated };
+export { updated, setAppStoresUpdated };
 
 export function getStores() {
   return {

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

@@ -8,6 +8,7 @@ export function mockSveltekitStores() {
         alias: {
           '$app/forms': '@storybook/sveltekit/internal/mocks/app/forms',
           '$app/navigation': '@storybook/sveltekit/internal/mocks/app/navigation',
+          '$app/state': '@storybook/sveltekit/internal/mocks/app/state.svelte.js',
           '$app/stores': '@storybook/sveltekit/internal/mocks/app/stores',
         },
       },

code/frameworks/sveltekit/src/preset.ts

@@ -39,4 +39,5 @@ export const optimizeViteDeps = [
   '@storybook/sveltekit/internal/mocks/app/forms',
   '@storybook/sveltekit/internal/mocks/app/navigation',
   '@storybook/sveltekit/internal/mocks/app/stores',
+  '@storybook/sveltekit/internal/mocks/app/state.svelte.js',
 ];

code/frameworks/sveltekit/src/preview.ts

@@ -1,5 +1,10 @@
-import type { Decorator } from '@storybook/svelte';
+import type { Decorator, Preview } from '@storybook/svelte';
 import MockProvider from '@storybook/sveltekit/internal/MockProvider.svelte';
+import {
+  setAppStateNavigating,
+  setAppStatePage,
+  setAppStateUpdated, // @ts-expect-error no declaration file for this JS module
+} from '@storybook/sveltekit/internal/mocks/app/state.svelte.js';
 
 import type { SvelteKitParameters } from './types';
 
@@ -15,3 +20,11 @@ const svelteKitMocksDecorator: Decorator = (Story, ctx) => {
 };
 
 export const decorators: Decorator[] = [svelteKitMocksDecorator];
+
+export const beforeEach: Preview['beforeEach'] = async (ctx) => {
+  const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
+
+  setAppStatePage(svelteKitParameters?.state?.page);
+  setAppStateNavigating(svelteKitParameters?.state?.navigating);
+  setAppStateUpdated(svelteKitParameters?.state?.updated);
+};

code/frameworks/sveltekit/src/types.ts

@@ -54,8 +54,68 @@ export type NormalizedHrefConfig = {
 
 export type HrefConfig = NormalizedHrefConfig | NormalizedHrefConfig['callback'];
 
+/**
+ * Copied from:
+ * {@link https://github.com/sveltejs/kit/blob/7bb41aa4263b057a8912f4cdd35db03755d37342/packages/kit/types/index.d.ts#L1102-L1143}
+ */
+interface Page<
+  Params extends Record<string, string> = Record<string, string>,
+  RouteId extends string | null = string | null,
+> {
+  url: URL;
+  params: Params;
+  route: {
+    id: RouteId;
+  };
+  status: number;
+  error: Error | null;
+  data: Record<string, any>;
+  state: Record<string, any>;
+  form: any;
+}
+
+/**
+ * Copied from:
+ * {@link https://github.com/sveltejs/kit/blob/7bb41aa4263b057a8912f4cdd35db03755d37342/packages/kit/types/index.d.ts#L988}
+ */
+interface NavigationTarget {
+  params: Record<string, string> | null;
+  route: {
+    id: string | null;
+  };
+  url: URL;
+}
+
+/**
+ * Copied from:
+ * {@link https://github.com/sveltejs/kit/blob/7bb41aa4263b057a8912f4cdd35db03755d37342/packages/kit/types/index.d.ts#L1017C9-L1017C89}
+ */
+type NavigationType = 'enter' | 'form' | 'leave' | 'link' | 'goto' | 'popstate';
+
+/**
+ * Copied from:
+ * {@link https://github.com/sveltejs/kit/blob/7bb41aa4263b057a8912f4cdd35db03755d37342/packages/kit/types/index.d.ts#L1017C9-L1017C89}
+ */
+interface Navigation {
+  from: NavigationTarget | null;
+  to: NavigationTarget | null;
+  type: Exclude<NavigationType, 'enter'>;
+  willUnload: boolean;
+  delta?: number;
+  complete: Promise<void>;
+}
+
 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/static/MockProvider.svelte

@@ -3,16 +3,14 @@
   import { action } from 'storybook/actions';
   
   import { setAfterNavigateArgument } from '@storybook/sveltekit/internal/mocks/app/navigation';
-  import { setNavigating, setPage, setUpdated } from '@storybook/sveltekit/internal/mocks/app/stores';
+  import { setAppStoresNavigating, setAppStoresPage, setAppStoresUpdated } from '@storybook/sveltekit/internal/mocks/app/stores';
 
-  
-  const{ svelteKitParameters = {}, children } = $props();
-  
+  const { svelteKitParameters = {}, children } = $props();
 
   // Set context during component initialization - this happens before any child components
-  setPage(svelteKitParameters?.stores?.page);
-  setNavigating(svelteKitParameters?.stores?.navigating);
-  setUpdated(svelteKitParameters?.stores?.updated);
+  setAppStoresPage(svelteKitParameters?.stores?.page);
+  setAppStoresNavigating(svelteKitParameters?.stores?.navigating);
+  setAppStoresUpdated(svelteKitParameters?.stores?.updated);
   setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
 
   const normalizeHrefConfig = (hrefConfig) => {

code/frameworks/sveltekit/static/app-state-mock.svelte.js

@@ -0,0 +1,234 @@
+/**
+ * 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
+ */
+import { fn } from 'storybook/test';
+
+/**
+ * @typedef {Object} App
+ * @property {Object} Error
+ * @property {string} Error.message
+ * @property {Object} Locals
+ * @property {Object} PageData
+ * @property {Object} PageState
+ * @property {Object} Platform
+ */
+
+/**
+ * @typedef {Object} Page
+ * @property {URL} url
+ * @property {Record<string, string>} params
+ * @property {Object} route
+ * @property {string | null} route.id
+ * @property {number} status
+ * @property {App.Error | null} error
+ * @property {App.PageData & Record<string, any>} data
+ * @property {App.PageState} state
+ * @property {any} form
+ */
+
+const defaultStatePageValues = {
+  data: {},
+  form: null,
+  error: null,
+  params: {},
+  route: { id: null },
+  state: {},
+  status: -1,
+  url: new URL(location.origin),
+};
+
+/** @type {Page['data']} */
+let pageData = $state.raw(defaultStatePageValues.data);
+/** @type {Page['form']} */
+let pageForm = $state.raw(defaultStatePageValues.form);
+/** @type {Page['error']} */
+let pageError = $state.raw(defaultStatePageValues.error);
+/** @type {Page['params']} */
+let pageParams = $state.raw(defaultStatePageValues.params);
+/** @type {Page['route']} */
+let pageRoute = $state.raw(defaultStatePageValues.route);
+/** @type {Page['state']} */
+let pageState = $state.raw(defaultStatePageValues.state);
+/** @type {Page['status']} */
+let pageStatus = $state.raw(defaultStatePageValues.status);
+/** @type {Page['url']} */
+let pageUrl = $state.raw(defaultStatePageValues.url);
+
+/** @type {Page} */
+export let page = {
+  get data() {
+    return pageData;
+  },
+  set data(newPageData) {
+    pageData = newPageData;
+  },
+  get form() {
+    return pageForm;
+  },
+  set form(newPageForm) {
+    pageForm = newPageForm;
+  },
+  get error() {
+    return pageError;
+  },
+  set error(newPageError) {
+    pageError = newPageError;
+  },
+  get params() {
+    return pageParams;
+  },
+  set params(newPageParams) {
+    pageParams = newPageParams;
+  },
+  get route() {
+    return pageRoute;
+  },
+  set route(newPageRoute) {
+    pageRoute = newPageRoute;
+  },
+  get state() {
+    return pageState;
+  },
+  set state(newPageState) {
+    pageState = newPageState;
+  },
+  get status() {
+    return pageStatus;
+  },
+  set status(newPageStatus) {
+    pageStatus = newPageStatus;
+  },
+  get url() {
+    return pageUrl;
+  },
+  set url(newPageUrl) {
+    pageUrl = newPageUrl;
+  },
+};
+
+export function setAppStatePage(params = {}) {
+  page.data = params.data ?? defaultStatePageValues.data;
+  page.form = params.form ?? defaultStatePageValues.form;
+  page.error = params.error ?? defaultStatePageValues.error;
+  page.params = params.params ?? defaultStatePageValues.params;
+  page.route = params.route ?? defaultStatePageValues.route;
+  page.state = params.state ?? defaultStatePageValues.state;
+  page.status = params.status ?? defaultStatePageValues.status;
+  page.url = params.url ?? defaultStatePageValues.url;
+}
+
+/**
+ * @typedef {Object} NavigationTarget
+ * @property {Record<string, string> | null} params
+ * @property {Object} route
+ * @property {string | null} route.id
+ * @property {URL} url
+ */
+
+/** @typedef {'enter' | 'form' | 'leave' | 'link' | 'goto' | 'popstate'} NavigationType */
+
+/**
+ * @typedef {Object} Navigation
+ * @property {NavigationTarget | null} from
+ * @property {NavigationTarget | null} to
+ * @property {Exclude<NavigationType, 'enter'>} type
+ * @property {boolean} willUnload
+ * @property {number} [delta]
+ * @property {Promise<void>} complete
+ */
+
+const defaultStateNavigatingValues = {
+  from: null,
+  to: null,
+  type: null,
+  willUnload: null,
+  delta: null,
+  complete: null,
+};
+
+/** @type {Navigation['from'] | null} */
+let navigatingFrom = $state.raw(defaultStateNavigatingValues.from);
+/** @type {Navigation['to'] | null} */
+let navigatingTo = $state.raw(defaultStateNavigatingValues.to);
+/** @type {Navigation['type'] | null} */
+let navigatingType = $state.raw(defaultStateNavigatingValues.type);
+/** @type {Navigation['willUnload'] | null} */
+let navigatingWillUnload = $state.raw(defaultStateNavigatingValues.willUnload);
+/** @type {Navigation['delta'] | null} */
+let navigatingDelta = $state.raw(defaultStateNavigatingValues.delta);
+/** @type {Navigation['complete'] | null} */
+let navigatingComplete = $state.raw(defaultStateNavigatingValues.complete);
+
+/** @type {Navigation} */
+export let navigating = {
+  get from() {
+    return navigatingFrom;
+  },
+  set from(newNavigatingFrom) {
+    navigatingFrom = newNavigatingFrom;
+  },
+  get to() {
+    return navigatingTo;
+  },
+  set to(newNavigatingTo) {
+    navigatingTo = newNavigatingTo;
+  },
+  get type() {
+    return navigatingType;
+  },
+  set type(newNavigatingType) {
+    navigatingType = newNavigatingType;
+  },
+  get willUnload() {
+    return navigatingWillUnload;
+  },
+  set willUnload(newNavigatingWillUnload) {
+    navigatingWillUnload = newNavigatingWillUnload;
+  },
+  get delta() {
+    return navigatingDelta;
+  },
+  set delta(newNavigatingDelta) {
+    navigatingDelta = newNavigatingDelta;
+  },
+  get complete() {
+    return navigatingComplete;
+  },
+  set complete(newNavigatingComplete) {
+    navigatingComplete = newNavigatingComplete;
+  },
+};
+
+export function setAppStateNavigating(params = {}) {
+  navigating.from = params.from ?? defaultStateNavigatingValues.from;
+  navigating.to = params.to ?? defaultStateNavigatingValues.to;
+  navigating.type = params.type ?? defaultStateNavigatingValues.type;
+  navigating.willUnload = params.willUnload ?? defaultStateNavigatingValues.willUnload;
+  navigating.delta = params.delta ?? defaultStateNavigatingValues.delta;
+  navigating.complete = params.complete ?? defaultStateNavigatingValues.complete;
+}
+
+/** @type {boolean} */
+let updatedCurrent = $state.raw(false);
+
+export let updated = {
+  get current() {
+    return updatedCurrent;
+  },
+  set current(newCurrent) {
+    updatedCurrent = newCurrent;
+  },
+  check: fn(() => Promise.resolve(updatedCurrent)),
+};
+
+export function setAppStateUpdated(params = {}) {
+  updated.current = params.current ?? false;
+}