@storybook/sveltekit 10.0.0-beta.5 → 10.0.0-beta.7

package/dist/_browser-chunks/chunk-Q3EHWMWT.js

@@ -0,0 +1,39 @@
+import {
+  __export,
+  __name
+} from "./chunk-JFJ5UJ7Q.js";
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  beforeEach: () => beforeEach,
+  decorators: () => decorators
+});
+import MockProvider from "@storybook/sveltekit/internal/MockProvider.svelte";
+import {
+  setAppStateNavigating,
+  setAppStatePage,
+  setAppStateUpdated
+} from "@storybook/sveltekit/internal/mocks/app/state.svelte.js";
+var svelteKitMocksDecorator = /* @__PURE__ */ __name((Story, ctx) => {
+  const svelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
+  return {
+    Component: MockProvider,
+    props: {
+      svelteKitParameters
+    }
+  };
+}, "svelteKitMocksDecorator");
+var decorators = [svelteKitMocksDecorator];
+var beforeEach = /* @__PURE__ */ __name(async (ctx) => {
+  const svelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
+  setAppStatePage(svelteKitParameters?.state?.page);
+  setAppStateNavigating(svelteKitParameters?.state?.navigating);
+  setAppStateUpdated(svelteKitParameters?.state?.updated);
+}, "beforeEach");
+
+export {
+  decorators,
+  beforeEach,
+  preview_exports
+};

package/dist/_node-chunks/{chunk-G4KKPBLJ.js → chunk-3WVLFY2S.js}

@@ -1,17 +1,17 @@
-import CJS_COMPAT_NODE_URL_lr745q6e35 from 'node:url';
-import CJS_COMPAT_NODE_PATH_lr745q6e35 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_lr745q6e35 from "node:module";
+import CJS_COMPAT_NODE_URL_f9wtsfi1ckc from 'node:url';
+import CJS_COMPAT_NODE_PATH_f9wtsfi1ckc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_lr745q6e35.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_lr745q6e35.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_lr745q6e35.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_f9wtsfi1ckc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_f9wtsfi1ckc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   __name
-} from "./chunk-74JCJPKD.js";
+} from "./chunk-MU6AXIPM.js";
 
 // src/plugins/mock-sveltekit-stores.ts
 function mockSveltekitStores() {
@@ -22,6 +22,7 @@ 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"
         }
       }

package/dist/_node-chunks/chunk-MU6AXIPM.js

@@ -0,0 +1,17 @@
+import CJS_COMPAT_NODE_URL_f9wtsfi1ckc from 'node:url';
+import CJS_COMPAT_NODE_PATH_f9wtsfi1ckc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_f9wtsfi1ckc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_f9wtsfi1ckc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/index.d.ts

@@ -42,8 +42,63 @@ type NormalizedHrefConfig = {
     asRegex?: boolean;
 };
 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>;
+}
 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>;

package/dist/index.js

@@ -1,8 +1,6 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-Y4OPRTUT.js";
-import "./_browser-chunks/chunk-T276X65R.js";
-import "./_browser-chunks/chunk-MNND3IGN.js";
+} from "./_browser-chunks/chunk-Q3EHWMWT.js";
 import {
   __name
 } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";

package/dist/mocks/app/navigation.js

@@ -1,18 +1,70 @@
 import {
-  afterNavigate,
-  beforeNavigate,
-  disableScrollHandling,
-  goto,
-  invalidate,
-  invalidateAll,
-  onNavigate,
-  preloadCode,
-  preloadData,
-  pushState,
-  replaceState,
-  setAfterNavigateArgument
-} from "../../_browser-chunks/chunk-T276X65R.js";
-import "../../_browser-chunks/chunk-JFJ5UJ7Q.js";
+  __name
+} from "../../_browser-chunks/chunk-JFJ5UJ7Q.js";
+
+// src/mocks/app/navigation.ts
+import { getContext, onMount, setContext } from "svelte";
+async function goto(...args) {
+  const event = new CustomEvent("storybook:goto", {
+    detail: args
+  });
+  window.dispatchEvent(event);
+}
+__name(goto, "goto");
+function setAfterNavigateArgument(afterNavigateArgs) {
+  setContext("after-navigate-args", afterNavigateArgs);
+}
+__name(setAfterNavigateArgument, "setAfterNavigateArgument");
+function afterNavigate(cb) {
+  const argument = getContext("after-navigate-args");
+  onMount(() => {
+    if (cb && cb instanceof Function) {
+      cb(argument);
+    }
+  });
+}
+__name(afterNavigate, "afterNavigate");
+function onNavigate() {
+}
+__name(onNavigate, "onNavigate");
+function beforeNavigate() {
+}
+__name(beforeNavigate, "beforeNavigate");
+function disableScrollHandling() {
+}
+__name(disableScrollHandling, "disableScrollHandling");
+async function invalidate(...args) {
+  const event = new CustomEvent("storybook:invalidate", {
+    detail: args
+  });
+  window.dispatchEvent(event);
+}
+__name(invalidate, "invalidate");
+async function invalidateAll() {
+  const event = new CustomEvent("storybook:invalidateAll");
+  window.dispatchEvent(event);
+}
+__name(invalidateAll, "invalidateAll");
+function preloadCode() {
+}
+__name(preloadCode, "preloadCode");
+function preloadData() {
+}
+__name(preloadData, "preloadData");
+async function pushState(...args) {
+  const event = new CustomEvent("storybook:pushState", {
+    detail: args
+  });
+  window.dispatchEvent(event);
+}
+__name(pushState, "pushState");
+async function replaceState(...args) {
+  const event = new CustomEvent("storybook:replaceState", {
+    detail: args
+  });
+  window.dispatchEvent(event);
+}
+__name(replaceState, "replaceState");
 export {
   afterNavigate,
   beforeNavigate,

package/dist/mocks/app/stores.js

@@ -1,19 +1,44 @@
 import {
-  getStores,
-  navigating,
-  page,
-  setNavigating,
-  setPage,
-  setUpdated,
-  updated
-} from "../../_browser-chunks/chunk-MNND3IGN.js";
-import "../../_browser-chunks/chunk-JFJ5UJ7Q.js";
+  __name
+} from "../../_browser-chunks/chunk-JFJ5UJ7Q.js";
+
+// src/mocks/app/stores.ts
+import { getContext, setContext } from "svelte";
+function createMockedStore(contextName) {
+  return [
+    {
+      subscribe(runner) {
+        const page2 = getContext(contextName);
+        runner(page2);
+        return () => {
+        };
+      }
+    },
+    (value) => {
+      setContext(contextName, value);
+    }
+  ];
+}
+__name(createMockedStore, "createMockedStore");
+var [page, setAppStoresPage] = createMockedStore("page-ctx");
+var [navigating, setAppStoresNavigating] = createMockedStore("navigating-ctx");
+var [updated, setAppStoresUpdated] = createMockedStore("updated-ctx");
+updated.check = () => {
+};
+function getStores() {
+  return {
+    page,
+    navigating,
+    updated
+  };
+}
+__name(getStores, "getStores");
 export {
   getStores,
   navigating,
   page,
-  setNavigating,
-  setPage,
-  setUpdated,
+  setAppStoresNavigating,
+  setAppStoresPage,
+  setAppStoresUpdated,
   updated
 };

package/dist/node/index.js

@@ -1,17 +1,17 @@
-import CJS_COMPAT_NODE_URL_lr745q6e35 from 'node:url';
-import CJS_COMPAT_NODE_PATH_lr745q6e35 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_lr745q6e35 from "node:module";
+import CJS_COMPAT_NODE_URL_f9wtsfi1ckc from 'node:url';
+import CJS_COMPAT_NODE_PATH_f9wtsfi1ckc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_lr745q6e35.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_lr745q6e35.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_lr745q6e35.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_f9wtsfi1ckc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_f9wtsfi1ckc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   __name
-} from "../_node-chunks/chunk-74JCJPKD.js";
+} from "../_node-chunks/chunk-MU6AXIPM.js";
 
 // src/node/index.ts
 function defineMain(config) {

package/dist/preset.js

@@ -1,20 +1,20 @@
-import CJS_COMPAT_NODE_URL_lr745q6e35 from 'node:url';
-import CJS_COMPAT_NODE_PATH_lr745q6e35 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_lr745q6e35 from "node:module";
+import CJS_COMPAT_NODE_URL_f9wtsfi1ckc from 'node:url';
+import CJS_COMPAT_NODE_PATH_f9wtsfi1ckc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_lr745q6e35.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_lr745q6e35.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_lr745q6e35.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_f9wtsfi1ckc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_f9wtsfi1ckc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   mockSveltekitStores
-} from "./_node-chunks/chunk-G4KKPBLJ.js";
+} from "./_node-chunks/chunk-3WVLFY2S.js";
 import {
   __name
-} from "./_node-chunks/chunk-74JCJPKD.js";
+} from "./_node-chunks/chunk-MU6AXIPM.js";
 
 // src/preset.ts
 import { fileURLToPath } from "node:url";
@@ -61,7 +61,8 @@ var viteFinal = /* @__PURE__ */ __name(async (config, options) => {
 var optimizeViteDeps = [
   "@storybook/sveltekit/internal/mocks/app/forms",
   "@storybook/sveltekit/internal/mocks/app/navigation",
-  "@storybook/sveltekit/internal/mocks/app/stores"
+  "@storybook/sveltekit/internal/mocks/app/stores",
+  "@storybook/sveltekit/internal/mocks/app/state.svelte.js"
 ];
 export {
   core,

package/dist/preview.js

@@ -1,9 +1,9 @@
 import {
+  beforeEach,
   decorators
-} from "./_browser-chunks/chunk-Y4OPRTUT.js";
-import "./_browser-chunks/chunk-T276X65R.js";
-import "./_browser-chunks/chunk-MNND3IGN.js";
+} from "./_browser-chunks/chunk-Q3EHWMWT.js";
 import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 export {
+  beforeEach,
   decorators
 };

package/dist/vite-plugin.js

@@ -1,20 +1,20 @@
-import CJS_COMPAT_NODE_URL_lr745q6e35 from 'node:url';
-import CJS_COMPAT_NODE_PATH_lr745q6e35 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_lr745q6e35 from "node:module";
+import CJS_COMPAT_NODE_URL_f9wtsfi1ckc from 'node:url';
+import CJS_COMPAT_NODE_PATH_f9wtsfi1ckc from 'node:path';
+import CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_lr745q6e35.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_lr745q6e35.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_lr745q6e35.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_f9wtsfi1ckc.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_f9wtsfi1ckc.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_f9wtsfi1ckc.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   mockSveltekitStores
-} from "./_node-chunks/chunk-G4KKPBLJ.js";
+} from "./_node-chunks/chunk-3WVLFY2S.js";
 import {
   __name
-} from "./_node-chunks/chunk-74JCJPKD.js";
+} from "./_node-chunks/chunk-MU6AXIPM.js";
 
 // src/vite-plugin.ts
 var storybookSveltekitPlugin = /* @__PURE__ */ __name(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "10.0.0-beta.5",
+  "version": "10.0.0-beta.7",
   "description": "Storybook for SvelteKit: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
@@ -32,8 +32,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./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",
@@ -46,20 +48,20 @@
   },
   "files": [
     "dist/**/*",
+    "static/**/*",
     "template/**/*",
     "README.md",
     "*.js",
-    "*.d.ts",
-    "src/mocks/**/*"
+    "*.d.ts"
   ],
   "scripts": {
     "check": "jiti ../../../scripts/check/check-package.ts",
     "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "10.0.0-beta.5",
-    "@storybook/svelte": "10.0.0-beta.5",
-    "@storybook/svelte-vite": "10.0.0-beta.5"
+    "@storybook/builder-vite": "10.0.0-beta.7",
+    "@storybook/svelte": "10.0.0-beta.7",
+    "@storybook/svelte-vite": "10.0.0-beta.7"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -67,7 +69,7 @@
     "vite": "^7.0.4"
   },
   "peerDependencies": {
-    "storybook": "^10.0.0-beta.5",
+    "storybook": "^10.0.0-beta.7",
     "svelte": "^5.0.0",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },

package/static/MockProvider.svelte

@@ -0,0 +1,127 @@
+<script>
+  import { onMount } from 'svelte';
+  import { action } from 'storybook/actions';
+  
+  import { setAfterNavigateArgument } from '@storybook/sveltekit/internal/mocks/app/navigation';
+  import { setAppStoresNavigating, setAppStoresPage, setAppStoresUpdated } from '@storybook/sveltekit/internal/mocks/app/stores';
+
+  const { svelteKitParameters = {}, children } = $props();
+
+  // Set context during component initialization - this happens before any child components
+  setAppStoresPage(svelteKitParameters?.stores?.page);
+  setAppStoresNavigating(svelteKitParameters?.stores?.navigating);
+  setAppStoresUpdated(svelteKitParameters?.stores?.updated);
+  setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
+
+  const normalizeHrefConfig = (hrefConfig) => {
+    if (typeof hrefConfig === 'function') {
+      return { callback: hrefConfig, asRegex: false };
+    }
+    return hrefConfig;
+  };
+
+  onMount(() => {
+    const globalClickListener = (e) => {
+      // we add a global click event listener and we check if there's a link in the composedPath
+      const path = e.composedPath();
+      const element = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A');
+      if (element && element instanceof HTMLAnchorElement) {
+        // if the element is an a-tag we get the href of the element
+        // and compare it to the hrefs-parameter set by the user
+        const to = element.getAttribute('href');
+        if (!to) {
+          return;
+        }
+        e.preventDefault();
+        const defaultActionCallback = () => action('navigate')(to, e);
+        if (!svelteKitParameters.hrefs) {
+          defaultActionCallback();
+          return;
+        }
+
+        let callDefaultCallback = true;
+        // we loop over every href set by the user and check if the href matches
+        // if it does we call the callback provided by the user and disable the default callback
+        Object.entries(svelteKitParameters.hrefs).forEach(([href, hrefConfig]) => {
+          const { callback, asRegex } = normalizeHrefConfig(hrefConfig);
+          const isMatch = asRegex ? new RegExp(href).test(to) : to === href;
+          if (isMatch) {
+            callDefaultCallback = false;
+            callback?.(to, e);
+          }
+        });
+        if (callDefaultCallback) {
+          defaultActionCallback();
+        }
+      }
+    };
+
+    /**
+     * Function that create and add listeners for the event that are emitted by the mocked
+     * functions. The event name is based on the function name
+     *
+     * Eg. storybook:goto, storybook:invalidateAll
+     *
+     * @param baseModule The base module where the function lives (navigation|forms)
+     * @param functions The list of functions in that module that emit events
+     * @param {boolean} [defaultToAction] The list of functions in that module that emit events
+     * @returns A function to remove all the listener added
+     */
+    function createListeners(baseModule, functions, defaultToAction) {
+      // the array of every added listener, we can use this in the return function
+      // to clean them
+      const toRemove = [];
+      functions.forEach((func) => {
+        // we loop over every function and check if the user actually passed
+        // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto
+        const hasFunction =
+          svelteKitParameters[baseModule]?.[func] &&
+          svelteKitParameters[baseModule][func] instanceof Function;
+        // if we default to an action we still add the listener (this will be the case for goto, invalidate, invalidateAll)
+        if (hasFunction || defaultToAction) {
+          // we create the listener that will just get the detail array from the custom element
+          // and call the user provided function spreading this args in...this will basically call
+          // the function that the user provide with the same arguments the function is invoked to
+
+          // eg. if it calls goto("/my-route") inside the component the function sveltekit_experimental.navigation.goto
+          // it provided to storybook will be called with "/my-route"
+          const listener = ({ detail = [] }) => {
+            const args = Array.isArray(detail) ? detail : [];
+            // if it has a function in the parameters we call that function
+            // otherwise we invoke the action
+            const fnToCall = hasFunction
+              ? svelteKitParameters[baseModule][func]
+              : action(func);
+            fnToCall(...args);
+          };
+          const eventType = `storybook:${func}`;
+          toRemove.push({ eventType, listener });
+          // add the listener to window
+          window.addEventListener(eventType, listener);
+        }
+      });
+      return () => {
+        // loop over every listener added and remove them
+        toRemove.forEach(({ eventType, listener }) => {
+          window.removeEventListener(eventType, listener);
+        });
+      };
+    }
+
+    const removeNavigationListeners = createListeners(
+      'navigation',
+      ['goto', 'invalidate', 'invalidateAll', 'pushState', 'replaceState'],
+      true
+    );
+    const removeFormsListeners = createListeners('forms', ['enhance']);
+    window.addEventListener('click', globalClickListener);
+
+    return () => {
+      window.removeEventListener('click', globalClickListener);
+      removeNavigationListeners();
+      removeFormsListeners();
+    };
+  });
+</script>
+
+{@render children()}

package/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;
+}

package/template/stories_svelte-kit-skeleton-ts/modules/State.svelte

@@ -0,0 +1,16 @@
+<script>
+	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>

package/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js

@@ -0,0 +1,84 @@
+import State from './State.svelte';
+
+export default {
+  title: 'stories/frameworks/sveltekit/modules/state',
+  component: State,
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          url: new URL('https://storybook.js.org'), // necessary to make the rendered output deterministic in CH snapshots
+        },
+      },
+    },
+  },
+};
+
+export const Default = {};
+
+export const Page = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+          form: {
+            framework: 'SvelteKit',
+            rating: 5,
+          },
+          params: {
+            referrer: 'storybook',
+          },
+          route: {
+            id: '/framework/sveltekit',
+          },
+          status: 200,
+          url: new URL('https://svelte.dev/docs/kit/'),
+        },
+      },
+    },
+  },
+};
+
+export const Navigating = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        navigating: {
+          from: {
+            params: {
+              framework: 'SvelteKit',
+            },
+            route: {
+              id: '/framework/sveltekit',
+            },
+            url: new URL('https://svelte.dev'),
+          },
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('https://storybook.js.org'),
+          },
+          type: 'link',
+          willUnload: true,
+          delta: 3,
+          complete: Promise.resolve(),
+        },
+      },
+    },
+  },
+};
+
+export const Updated = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        updated: {
+          current: true,
+        },
+      },
+    },
+  },
+};

package/dist/_browser-chunks/chunk-MNND3IGN.js

@@ -1,45 +0,0 @@
-import {
-  __name
-} from "./chunk-JFJ5UJ7Q.js";
-
-// src/mocks/app/stores.ts
-import { getContext, setContext } from "svelte";
-function createMockedStore(contextName) {
-  return [
-    {
-      subscribe(runner) {
-        const page2 = getContext(contextName);
-        runner(page2);
-        return () => {
-        };
-      }
-    },
-    (value) => {
-      setContext(contextName, value);
-    }
-  ];
-}
-__name(createMockedStore, "createMockedStore");
-var [page, setPage] = createMockedStore("page-ctx");
-var [navigating, setNavigating] = createMockedStore("navigating-ctx");
-var [updated, setUpdated] = createMockedStore("updated-ctx");
-updated.check = () => {
-};
-function getStores() {
-  return {
-    page,
-    navigating,
-    updated
-  };
-}
-__name(getStores, "getStores");
-
-export {
-  page,
-  setPage,
-  navigating,
-  setNavigating,
-  updated,
-  setUpdated,
-  getStores
-};

package/dist/_browser-chunks/chunk-T276X65R.js

@@ -1,82 +0,0 @@
-import {
-  __name
-} from "./chunk-JFJ5UJ7Q.js";
-
-// src/mocks/app/navigation.ts
-import { getContext, onMount, setContext } from "svelte";
-async function goto(...args) {
-  const event = new CustomEvent("storybook:goto", {
-    detail: args
-  });
-  window.dispatchEvent(event);
-}
-__name(goto, "goto");
-function setAfterNavigateArgument(afterNavigateArgs) {
-  setContext("after-navigate-args", afterNavigateArgs);
-}
-__name(setAfterNavigateArgument, "setAfterNavigateArgument");
-function afterNavigate(cb) {
-  const argument = getContext("after-navigate-args");
-  onMount(() => {
-    if (cb && cb instanceof Function) {
-      cb(argument);
-    }
-  });
-}
-__name(afterNavigate, "afterNavigate");
-function onNavigate() {
-}
-__name(onNavigate, "onNavigate");
-function beforeNavigate() {
-}
-__name(beforeNavigate, "beforeNavigate");
-function disableScrollHandling() {
-}
-__name(disableScrollHandling, "disableScrollHandling");
-async function invalidate(...args) {
-  const event = new CustomEvent("storybook:invalidate", {
-    detail: args
-  });
-  window.dispatchEvent(event);
-}
-__name(invalidate, "invalidate");
-async function invalidateAll() {
-  const event = new CustomEvent("storybook:invalidateAll");
-  window.dispatchEvent(event);
-}
-__name(invalidateAll, "invalidateAll");
-function preloadCode() {
-}
-__name(preloadCode, "preloadCode");
-function preloadData() {
-}
-__name(preloadData, "preloadData");
-async function pushState(...args) {
-  const event = new CustomEvent("storybook:pushState", {
-    detail: args
-  });
-  window.dispatchEvent(event);
-}
-__name(pushState, "pushState");
-async function replaceState(...args) {
-  const event = new CustomEvent("storybook:replaceState", {
-    detail: args
-  });
-  window.dispatchEvent(event);
-}
-__name(replaceState, "replaceState");
-
-export {
-  goto,
-  setAfterNavigateArgument,
-  afterNavigate,
-  onNavigate,
-  beforeNavigate,
-  disableScrollHandling,
-  invalidate,
-  invalidateAll,
-  preloadCode,
-  preloadData,
-  pushState,
-  replaceState
-};

package/dist/_browser-chunks/chunk-Y4OPRTUT.js

@@ -1,104 +0,0 @@
-import {
-  setAfterNavigateArgument
-} from "./chunk-T276X65R.js";
-import {
-  setNavigating,
-  setPage,
-  setUpdated
-} from "./chunk-MNND3IGN.js";
-import {
-  __export,
-  __name
-} from "./chunk-JFJ5UJ7Q.js";
-
-// src/preview.ts
-var preview_exports = {};
-__export(preview_exports, {
-  decorators: () => decorators
-});
-import { action } from "storybook/actions";
-import { onMount } from "svelte";
-var normalizeHrefConfig = /* @__PURE__ */ __name((hrefConfig) => {
-  if (typeof hrefConfig === "function") {
-    return { callback: hrefConfig, asRegex: false };
-  }
-  return hrefConfig;
-}, "normalizeHrefConfig");
-var svelteKitMocksDecorator = /* @__PURE__ */ __name((Story, ctx) => {
-  const svelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {};
-  setPage(svelteKitParameters?.stores?.page);
-  setNavigating(svelteKitParameters?.stores?.navigating);
-  setUpdated(svelteKitParameters?.stores?.updated);
-  setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
-  onMount(() => {
-    const globalClickListener = /* @__PURE__ */ __name((e) => {
-      const path = e.composedPath();
-      const element = path.findLast((el) => el instanceof HTMLElement && el.tagName === "A");
-      if (element && element instanceof HTMLAnchorElement) {
-        const to = element.getAttribute("href");
-        if (!to) {
-          return;
-        }
-        e.preventDefault();
-        const defaultActionCallback = /* @__PURE__ */ __name(() => action("navigate")(to, e), "defaultActionCallback");
-        if (!svelteKitParameters.hrefs) {
-          defaultActionCallback();
-          return;
-        }
-        let callDefaultCallback = true;
-        Object.entries(svelteKitParameters.hrefs).forEach(([href, hrefConfig]) => {
-          const { callback, asRegex } = normalizeHrefConfig(hrefConfig);
-          const isMatch = asRegex ? new RegExp(href).test(to) : to === href;
-          if (isMatch) {
-            callDefaultCallback = false;
-            callback?.(to, e);
-          }
-        });
-        if (callDefaultCallback) {
-          defaultActionCallback();
-        }
-      }
-    }, "globalClickListener");
-    function createListeners(baseModule, functions, defaultToAction) {
-      const toRemove = [];
-      functions.forEach((func) => {
-        const hasFunction = svelteKitParameters[baseModule]?.[func] && svelteKitParameters[baseModule][func] instanceof Function;
-        if (hasFunction || defaultToAction) {
-          const listener = /* @__PURE__ */ __name(({ detail = [] }) => {
-            const args = Array.isArray(detail) ? detail : [];
-            const fnToCall = hasFunction ? svelteKitParameters[baseModule][func] : action(func);
-            fnToCall(...args);
-          }, "listener");
-          const eventType = `storybook:${func}`;
-          toRemove.push({ eventType, listener });
-          window.addEventListener(eventType, listener);
-        }
-      });
-      return () => {
-        toRemove.forEach(({ eventType, listener }) => {
-          window.removeEventListener(eventType, listener);
-        });
-      };
-    }
-    __name(createListeners, "createListeners");
-    const removeNavigationListeners = createListeners(
-      "navigation",
-      ["goto", "invalidate", "invalidateAll", "pushState", "replaceState"],
-      true
-    );
-    const removeFormsListeners = createListeners("forms", ["enhance"]);
-    window.addEventListener("click", globalClickListener);
-    return () => {
-      window.removeEventListener("click", globalClickListener);
-      removeNavigationListeners();
-      removeFormsListeners();
-    };
-  });
-  return Story();
-}, "svelteKitMocksDecorator");
-var decorators = [svelteKitMocksDecorator];
-
-export {
-  decorators,
-  preview_exports
-};

package/dist/_node-chunks/chunk-74JCJPKD.js

@@ -1,17 +0,0 @@
-import CJS_COMPAT_NODE_URL_lr745q6e35 from 'node:url';
-import CJS_COMPAT_NODE_PATH_lr745q6e35 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_lr745q6e35 from "node:module";
-
-var __filename = CJS_COMPAT_NODE_URL_lr745q6e35.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_lr745q6e35.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_lr745q6e35.createRequire(import.meta.url);
-
-// ------------------------------------------------------------
-// end of CJS compatibility banner, injected by Storybook's esbuild configuration
-// ------------------------------------------------------------
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-export {
-  __name
-};

package/src/mocks/app/forms.ts

@@ -1,20 +0,0 @@
-export function enhance(form: HTMLFormElement) {
-  const listener = (...args: any[]) => {
-    const e = args[0];
-    e.preventDefault();
-    const event = new CustomEvent('storybook:enhance', {
-      detail: args,
-    });
-    window.dispatchEvent(event);
-  };
-  form.addEventListener('submit', listener);
-  return {
-    destroy() {
-      form.removeEventListener('submit', listener);
-    },
-  };
-}
-
-export function applyAction() {}
-
-export function deserialize() {}

package/src/mocks/app/navigation.ts

@@ -1,57 +0,0 @@
-import { getContext, onMount, setContext } from 'svelte';
-
-export async function goto(...args: any[]) {
-  const event = new CustomEvent('storybook:goto', {
-    detail: args,
-  });
-  window.dispatchEvent(event);
-}
-
-export function setAfterNavigateArgument(afterNavigateArgs: any) {
-  setContext('after-navigate-args', afterNavigateArgs);
-}
-
-export function afterNavigate(cb: any) {
-  const argument = getContext('after-navigate-args');
-  onMount(() => {
-    if (cb && cb instanceof Function) {
-      cb(argument);
-    }
-  });
-}
-
-export function onNavigate() {}
-
-export function beforeNavigate() {}
-
-export function disableScrollHandling() {}
-
-export async function invalidate(...args: any[]) {
-  const event = new CustomEvent('storybook:invalidate', {
-    detail: args,
-  });
-  window.dispatchEvent(event);
-}
-
-export async function invalidateAll() {
-  const event = new CustomEvent('storybook:invalidateAll');
-  window.dispatchEvent(event);
-}
-
-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);
-}

package/src/mocks/app/stores.ts

@@ -1,32 +0,0 @@
-import { getContext, setContext } from 'svelte';
-
-function createMockedStore(contextName: string) {
-  return [
-    {
-      subscribe(runner: any) {
-        const page = getContext(contextName);
-        runner(page);
-        return () => {};
-      },
-    },
-    (value: unknown) => {
-      setContext(contextName, value);
-    },
-  ] as const;
-}
-
-export const [page, setPage] = createMockedStore('page-ctx');
-export const [navigating, setNavigating] = createMockedStore('navigating-ctx');
-const [updated, setUpdated] = createMockedStore('updated-ctx');
-
-(updated as any).check = () => {};
-
-export { updated, setUpdated };
-
-export function getStores() {
-  return {
-    page,
-    navigating,
-    updated,
-  };
-}