@storybook/sveltekit 7.6.0-alpha.6 → 7.6.0-alpha.7

package/README.md

@@ -13,6 +13,8 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
   - [In a project with Storybook](#in-a-project-with-storybook)
     - [Automatic migration](#automatic-migration)
     - [Manual migration](#manual-migration)
+- [How to mock](#how-to-mock)
+  - [Mocking links](#mocking-links)
 - [Troubleshooting](#troubleshooting)
   - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook)
   - [Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview)
@@ -26,10 +28,10 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo
 | **Module**                                                                         | **Status**             | **Note**                                                                                                                            |
 | ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported           | `version` is always empty in Storybook.                                                                                             |
-| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Future              | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
-| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Future              | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999)                                          |
+| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ✅ Supported           | See [How to mock](#how-to-mock)                                                                                                     |
+| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ✅ Supported           | See [How to mock](#how-to-mock)                                                                                                     |
 | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ✅ Supported           | Requires SvelteKit 1.4.0 or newer                                                                                                   |
-| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported           | Mocks planned, so you can set different store values per story.                                                                     |
+| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported           | See [How to mock](#how-to-mock)                                                                                                     |
 | [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported       | They are meant to only be available server-side, and Storybook renders all components on the client.                                |
 | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
 | [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported       | They are meant to only be available server-side, and Storybook renders all components on the client.                                |
@@ -100,6 +102,77 @@ yarn remove storybook-builder-vite
 yarn remove @storybook/builder-vite
 ```
 
+## How to mock
+
+To mock a SvelteKit import you can set it on `parameters.sveltekit_experimental`:
+
+```ts
+export const MyStory = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};
+```
+
+You can add the name of the module you want to mock to `parameters.sveltekit_experimental` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects:
+
+| Module                                            | Path in parameters                                           | Kind of objects                                                                                    |
+| ------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
+| `import { page } from "$app/stores"`              | `parameters.sveltekit_experimental.stores.page`              | A Partial of the page store                                                                        |
+| `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                                             |
+| `import { invalidate } from "$app/navigation"`    | `parameters.sveltekit_experimental.navigation.invalidate`    | A callback that will be called whenever invalidate is called                                       |
+| `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called                                    |
+| `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 |
+| `import { enhance } from "$app/forms"`            | `parameters.sveltekit_experimental.forms.enhance`            | A callback that will called when a form with `use:enhance` is submitted                            |
+
+All the other functions are still exported as `noop` from the mocked modules so that your application will still work.
+
+### Mocking links
+
+The default link-handling behavior (ie. clicking an `<a />` tag with an `href` attribute) is to log an action to the Actions panel.
+
+You can override this by setting an object on `parameter.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values are objects typed as `{ callback: (href, event) => void, asRegex?: boolean }`.
+
+If you have an `<a />` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based on the `asRegex` property) the corresponding `callback` will be called.
+
+Example:
+
+```ts
+export const MyStory = {
+  parameters: {
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': (to, event) => {
+          console.log(to, event);
+        },
+        '/root.*': {
+          callback: (to, event) => {
+            console.log(to, event);
+          },
+          asRegex: true,
+        },
+      },
+    },
+  },
+};
+```
+
 ## Troubleshooting
 
 ### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook
@@ -125,3 +198,4 @@ You'll experience this if anything in your story is importing from `$app/forms`
 ## Acknowledgements
 
 Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible.
+A big thank you also goes out to [Paolo Ricciuti](https://twitter.com/PaoloRicciuti) for improving the mocking capabilities.

package/dist/{index-64fd81fa.d.ts → index-f3de942f.d.ts}

@@ -1,7 +1,7 @@
+import { BuilderOptions as BuilderOptions$1, StorybookConfigVite } from '@storybook/builder-vite';
 import { FileSystemCache } from 'file-system-cache';
 import { TransformOptions } from '@babel/core';
 import { Server } from 'http';
-import { BuilderOptions as BuilderOptions$1, StorybookConfigVite } from '@storybook/builder-vite';
 
 /**
 Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
@@ -2873,8 +2873,15 @@ interface TypescriptOptions {
      * Disable parsing typescript files through babel.
      *
      * @default `false`
+     * @deprecated use `skipCompiler` instead
      */
     skipBabel: boolean;
+    /**
+     * Disable parsing typescript files through compiler.
+     *
+     * @default `false`
+     */
+    skipCompiler: boolean;
 }
 type Preset = string | {
     name: string;
@@ -2994,6 +3001,12 @@ interface StorybookConfig$1 {
          * Apply decorators from preview.js before decorators from addons or frameworks
          */
         legacyDecoratorFileOrder?: boolean;
+        /**
+         * Disallow implicit actions during rendering. This will be the default in Storybook 8.
+         *
+         * This will make sure that your story renders the same no matter if docgen is enabled or not.
+         */
+        disallowImplicitActionsInRenderV8?: boolean;
     };
     build?: TestBuildConfig;
     /**
@@ -3080,6 +3093,14 @@ type PresetProperty<K, TStorybookConfig = StorybookConfig$1> = TStorybookConfig[
 type PresetPropertyFn<K, TStorybookConfig = StorybookConfig$1, TOptions = {}> = (config: TStorybookConfig[K extends keyof TStorybookConfig ? K : never], options: Options & TOptions) => TStorybookConfig[K extends keyof TStorybookConfig ? K : never] | Promise<TStorybookConfig[K extends keyof TStorybookConfig ? K : never]>;
 type Path = string;
 
+declare function enhance(form: HTMLFormElement): {
+    destroy(): void;
+};
+
+declare function goto(...args: any[]): Promise<void>;
+declare function invalidate(...args: any[]): Promise<void>;
+declare function invalidateAll(): Promise<void>;
+
 type FrameworkName = '@storybook/sveltekit';
 type BuilderName = '@storybook/builder-vite';
 type FrameworkOptions = {
@@ -3097,9 +3118,28 @@ type StorybookConfigFramework = {
         };
     };
 };
-/**
- * The interface for Storybook configuration in `main.ts` files.
- */
 type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework;
+type NormalizedHrefConfig = {
+    callback: (to: string, event: Event) => void;
+    asRegex?: boolean;
+};
+type HrefConfig = NormalizedHrefConfig | NormalizedHrefConfig['callback'];
+type SvelteKitParameters = Partial<{
+    hrefs: Record<string, HrefConfig>;
+    stores: {
+        page: Record<string, any>;
+        navigating: Record<string, any>;
+        updated: boolean;
+    };
+    navigation: {
+        goto: typeof goto;
+        invalidate: typeof invalidate;
+        invalidateAll: typeof invalidateAll;
+        afterNavigate: Record<string, any>;
+    };
+    forms: {
+        enhance: typeof enhance;
+    };
+}>;
 
-export { FrameworkOptions as F, PresetProperty as P, StorybookConfig as S };
+export { FrameworkOptions as F, HrefConfig as H, NormalizedHrefConfig as N, PresetProperty as P, StorybookConfig as S, SvelteKitParameters as a };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { F as FrameworkOptions, S as StorybookConfig } from './index-64fd81fa.js';
+export { F as FrameworkOptions, H as HrefConfig, N as NormalizedHrefConfig, S as StorybookConfig, a as SvelteKitParameters } from './index-f3de942f.js';
+import '@storybook/builder-vite';
 import 'file-system-cache';
 import '@babel/core';
 import 'http';
-import '@storybook/builder-vite';

package/dist/preset.d.ts

@@ -1,10 +1,11 @@
-import { P as PresetProperty, S as StorybookConfig } from './index-64fd81fa.js';
+import { P as PresetProperty, S as StorybookConfig } from './index-f3de942f.js';
+import '@storybook/builder-vite';
 import 'file-system-cache';
 import '@babel/core';
 import 'http';
-import '@storybook/builder-vite';
 
 declare const core: PresetProperty<'core', StorybookConfig>;
+declare const previewAnnotations: StorybookConfig['previewAnnotations'];
 declare const viteFinal: NonNullable<StorybookConfig['viteFinal']>;
 
-export { core, viteFinal };
+export { core, previewAnnotations, viteFinal };

package/dist/preset.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/svelte-vite/preset"),import_builder_vite=require("@storybook/builder-vite"),import_path=require("path");function configOverrides(){return{name:"storybook:sveltekit-overrides",apply:"build",config:()=>({build:{ssr:!1}})}}var getAbsolutePath=input=>(0,import_path.dirname)(require.resolve((0,import_path.join)(input,"package.json"))),core={builder:getAbsolutePath("@storybook/builder-vite"),renderer:getAbsolutePath("@storybook/svelte")},viteFinal=async(config,options)=>{let baseConfig=await(0,import_preset.viteFinal)(config,options),{plugins=[]}=baseConfig;return plugins=(await(0,import_builder_vite.withoutVitePlugins)(plugins,["vite-plugin-sveltekit-compile","vite-plugin-sveltekit-guard"])).concat(configOverrides()),{...baseConfig,plugins}};0&&(module.exports={core,viteFinal});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,previewAnnotations:()=>previewAnnotations,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/svelte-vite/preset"),import_builder_vite=require("@storybook/builder-vite"),import_path=require("path");function configOverrides(){return{name:"storybook:sveltekit-overrides",apply:"build",config:()=>({build:{ssr:!1}})}}var import_node_path=require("path"),import_vite=require("vite");function mockSveltekitStores(){return{name:"storybook:sveltekit-mock-stores",enforce:"post",config:config=>(0,import_vite.mergeConfig)(config,{resolve:{alias:{$app:(0,import_node_path.resolve)(__dirname,"../src/mocks/app/")}}})}}var getAbsolutePath=input=>(0,import_path.dirname)(require.resolve((0,import_path.join)(input,"package.json"))),core={builder:getAbsolutePath("@storybook/builder-vite"),renderer:getAbsolutePath("@storybook/svelte")},previewAnnotations=(entry=[])=>[...entry,(0,import_path.join)((0,import_path.dirname)(require.resolve("@storybook/sveltekit/package.json")),"dist/preview.mjs")],viteFinal=async(config,options)=>{let baseConfig=await(0,import_preset.viteFinal)(config,options),{plugins=[]}=baseConfig;return plugins=(await(0,import_builder_vite.withoutVitePlugins)(plugins,["vite-plugin-sveltekit-compile","vite-plugin-sveltekit-guard"])).concat(configOverrides()).concat(mockSveltekitStores()),{...baseConfig,plugins}};0&&(module.exports={core,previewAnnotations,viteFinal});

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { Decorator } from '@storybook/svelte';
+
+declare const decorators: Decorator[];
+
+export { decorators };

package/dist/preview.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators});module.exports=__toCommonJS(preview_exports);var import_addon_actions=require("@storybook/addon-actions"),import_svelte3=require("svelte");var import_svelte=require("svelte");function setAfterNavigateArgument(afterNavigateArgs){(0,import_svelte.setContext)("after-navigate-args",afterNavigateArgs)}var import_svelte2=require("svelte");function createMockedStore(contextName){return[{subscribe(runner){let page2=(0,import_svelte2.getContext)(contextName);return runner(page2),()=>{}}},value=>{(0,import_svelte2.setContext)(contextName,value)}]}var[page,setPage]=createMockedStore("page-ctx"),[navigating,setNavigating]=createMockedStore("navigating-ctx"),[updated,setUpdated]=createMockedStore("updated-ctx");updated.check=()=>{};var normalizeHrefConfig=hrefConfig=>typeof hrefConfig=="function"?{callback:hrefConfig,asRegex:!1}:hrefConfig,decorators=[(Story,ctx)=>{var _a,_b,_c,_d,_e;let svelteKitParameters=((_a=ctx.parameters)==null?void 0:_a.sveltekit_experimental)??{};return setPage((_b=svelteKitParameters==null?void 0:svelteKitParameters.stores)==null?void 0:_b.page),setNavigating((_c=svelteKitParameters==null?void 0:svelteKitParameters.stores)==null?void 0:_c.navigating),setUpdated((_d=svelteKitParameters==null?void 0:svelteKitParameters.stores)==null?void 0:_d.updated),setAfterNavigateArgument((_e=svelteKitParameters==null?void 0:svelteKitParameters.navigation)==null?void 0:_e.afterNavigate),(0,import_svelte3.onMount)(()=>{let globalClickListener=e=>{let element=e.composedPath().findLast(el=>el instanceof HTMLElement&&el.tagName==="A");if(element&&element instanceof HTMLAnchorElement){let to=element.getAttribute("href");if(!to)return;e.preventDefault();let defaultActionCallback=()=>(0,import_addon_actions.action)("navigate")(to,e);if(!svelteKitParameters.hrefs){defaultActionCallback();return}let callDefaultCallback=!0;Object.entries(svelteKitParameters.hrefs).forEach(([href,hrefConfig])=>{let{callback,asRegex}=normalizeHrefConfig(hrefConfig);(asRegex?new RegExp(href).test(to):to===href)&&(callDefaultCallback=!1,callback==null||callback(to,e))}),callDefaultCallback&&defaultActionCallback()}};function createListeners(baseModule,functions){let toRemove=[];return functions.forEach(func=>{var _a2;if((_a2=svelteKitParameters[baseModule])!=null&&_a2[func]&&svelteKitParameters[baseModule][func]instanceof Function){let listener=({detail=[]})=>{let args=Array.isArray(detail)?detail:[];svelteKitParameters[baseModule][func](...args)},eventType=`storybook:${func}`;toRemove.push({eventType,listener}),window.addEventListener(eventType,listener)}}),()=>{toRemove.forEach(({eventType,listener})=>{window.removeEventListener(eventType,listener)})}}let removeNavigationListeners=createListeners("navigation",["goto","invalidate","invalidateAll"]),removeFormsListeners=createListeners("forms",["enhance"]);return window.addEventListener("click",globalClickListener),()=>{window.removeEventListener("click",globalClickListener),removeNavigationListeners(),removeFormsListeners()}}),Story()}];0&&(module.exports={decorators});

package/dist/preview.mjs

@@ -0,0 +1,6 @@
+import { action } from '@storybook/addon-actions';
+import { onMount, setContext, getContext } from 'svelte';
+
+function setAfterNavigateArgument(afterNavigateArgs){setContext("after-navigate-args",afterNavigateArgs);}function createMockedStore(contextName){return [{subscribe(runner){let page2=getContext(contextName);return runner(page2),()=>{}}},value=>{setContext(contextName,value);}]}var[page,setPage]=createMockedStore("page-ctx"),[navigating,setNavigating]=createMockedStore("navigating-ctx"),[updated,setUpdated]=createMockedStore("updated-ctx");updated.check=()=>{};var normalizeHrefConfig=hrefConfig=>typeof hrefConfig=="function"?{callback:hrefConfig,asRegex:!1}:hrefConfig,decorators=[(Story,ctx)=>{let svelteKitParameters=ctx.parameters?.sveltekit_experimental??{};return setPage(svelteKitParameters?.stores?.page),setNavigating(svelteKitParameters?.stores?.navigating),setUpdated(svelteKitParameters?.stores?.updated),setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate),onMount(()=>{let globalClickListener=e=>{let element=e.composedPath().findLast(el=>el instanceof HTMLElement&&el.tagName==="A");if(element&&element instanceof HTMLAnchorElement){let to=element.getAttribute("href");if(!to)return;e.preventDefault();let defaultActionCallback=()=>action("navigate")(to,e);if(!svelteKitParameters.hrefs){defaultActionCallback();return}let callDefaultCallback=!0;Object.entries(svelteKitParameters.hrefs).forEach(([href,hrefConfig])=>{let{callback,asRegex}=normalizeHrefConfig(hrefConfig);(asRegex?new RegExp(href).test(to):to===href)&&(callDefaultCallback=!1,callback?.(to,e));}),callDefaultCallback&&defaultActionCallback();}};function createListeners(baseModule,functions){let toRemove=[];return functions.forEach(func=>{if(svelteKitParameters[baseModule]?.[func]&&svelteKitParameters[baseModule][func]instanceof Function){let listener=({detail=[]})=>{let args=Array.isArray(detail)?detail:[];svelteKitParameters[baseModule][func](...args);},eventType=`storybook:${func}`;toRemove.push({eventType,listener}),window.addEventListener(eventType,listener);}}),()=>{toRemove.forEach(({eventType,listener})=>{window.removeEventListener(eventType,listener);});}}let removeNavigationListeners=createListeners("navigation",["goto","invalidate","invalidateAll"]),removeFormsListeners=createListeners("forms",["enhance"]);return window.addEventListener("click",globalClickListener),()=>{window.removeEventListener("click",globalClickListener),removeNavigationListeners(),removeFormsListeners();}}),Story()}];
+
+export { decorators };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "7.6.0-alpha.6",
+  "version": "7.6.0-alpha.7",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -29,6 +29,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./dist/preview.mjs": {
+      "import": "./dist/preview.mjs"
+    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
@@ -43,16 +46,17 @@
     "README.md",
     "*.js",
     "*.d.ts",
-    "!src/**/*"
+    "src/mocks/**/*"
   ],
   "scripts": {
-    "check": "../../../scripts/prepare/check.ts",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.6.0-alpha.6",
-    "@storybook/svelte": "7.6.0-alpha.6",
-    "@storybook/svelte-vite": "7.6.0-alpha.6"
+    "@storybook/addon-actions": "7.6.0-alpha.7",
+    "@storybook/builder-vite": "7.6.0-alpha.7",
+    "@storybook/svelte": "7.6.0-alpha.7",
+    "@storybook/svelte-vite": "7.6.0-alpha.7"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
@@ -72,6 +76,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
+      "./src/preview.ts",
       "./src/preset.ts"
     ],
     "platform": "node"

package/src/mocks/app/forms.ts

@@ -0,0 +1,17 @@
+export function enhance(form: HTMLFormElement) {
+  const listener = (e: Event) => {
+    e.preventDefault();
+    const event = new CustomEvent('storybook:enhance');
+    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

@@ -0,0 +1,43 @@
+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() {}

package/src/mocks/app/stores.ts

@@ -0,0 +1,32 @@
+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,
+  };
+}

package/template/stories_svelte-kit-skeleton-js/forms.stories.js

@@ -0,0 +1,26 @@
+import { expect, fn, within } from '@storybook/test';
+import Forms from './Forms.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/forms',
+  component: Forms,
+  tags: ['autodocs'],
+};
+
+const enhance = fn();
+
+export const Enhance = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('enhance');
+    button.click();
+    expect(enhance).toHaveBeenCalled();
+  },
+  parameters: {
+    sveltekit_experimental: {
+      forms: {
+        enhance,
+      },
+    },
+  },
+};

package/template/stories_svelte-kit-skeleton-js/hrefs.stories.js

@@ -0,0 +1,53 @@
+import { expect, fn, within } from '@storybook/test';
+import Hrefs from './Hrefs.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/hrefs',
+  component: Hrefs,
+  tags: ['autodocs'],
+};
+
+export const DefaultActions = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // eslint-disable-next-line no-undef
+    const initialUrl = window.location.toString();
+
+    const basicHref = canvas.getByText('/basic-href');
+    basicHref.click();
+
+    const complexHref = canvas.getByText(
+      '/deep/nested/link?with=true&multiple-params=200#and-an-id'
+    );
+    complexHref.click();
+
+    // eslint-disable-next-line no-undef
+    const finalUrl = window.location.toString();
+    expect(finalUrl).toBe(initialUrl);
+  },
+};
+
+const basicStringMatch = fn();
+const noMatch = fn();
+const exactStringMatch = fn();
+const regexMatch = fn();
+
+export const Callbacks = {
+  parameters: {
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': basicStringMatch,
+        '/basic': noMatch,
+        '/deep/nested/link?with=true&multiple-params=200#and-an-id': exactStringMatch,
+        'nested/link\\?with': { callback: regexMatch, asRegex: true },
+      },
+    },
+  },
+  play: async (ctx) => {
+    await DefaultActions.play(ctx);
+    expect(basicStringMatch).toHaveBeenCalledTimes(1);
+    expect(noMatch).not.toHaveBeenCalled();
+    expect(exactStringMatch).toHaveBeenCalledTimes(1);
+    expect(regexMatch).toHaveBeenCalledTimes(1);
+  },
+};

package/template/stories_svelte-kit-skeleton-js/navigation.stories.js

@@ -0,0 +1,82 @@
+import { expect, fn, within } from '@storybook/test';
+import Navigation from './Navigation.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/navigation',
+  component: Navigation,
+  tags: ['autodocs'],
+};
+
+const goto = fn();
+
+export const Goto = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('goto');
+    button.click();
+    expect(goto).toHaveBeenCalledWith('/storybook');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        goto,
+      },
+    },
+  },
+};
+
+const invalidate = fn();
+
+export const Invalidate = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('invalidate', { exact: true });
+    button.click();
+    expect(invalidate).toHaveBeenCalledWith('/storybook');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        invalidate,
+      },
+    },
+  },
+};
+
+const invalidateAll = fn();
+
+export const InvalidateAll = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('invalidateAll');
+    button.click();
+    expect(invalidateAll).toHaveBeenCalledWith();
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        invalidateAll,
+      },
+    },
+  },
+};
+
+const afterNavigateFn = fn();
+
+export const AfterNavigate = {
+  async play() {
+    expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' });
+  },
+  args: {
+    afterNavigateFn,
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        afterNavigate: {
+          test: 'passed',
+        },
+      },
+    },
+  },
+};

package/template/stories_svelte-kit-skeleton-js/stores.stories.js

@@ -0,0 +1,116 @@
+import Stores from './Stores.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/stores',
+  component: Stores,
+  tags: ['autodocs'],
+};
+
+export const AllUndefined = {};
+
+export const PageStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const NavigatingStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const UpdatedStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        updated: true,
+      },
+    },
+  },
+};
+
+export const PageAndNavigatingStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const PageAndUpdatedStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};
+
+export const NavigatingAndUpdatedStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};
+
+export const AllThreeStores = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};

package/template/stories_svelte-kit-skeleton-ts/forms.stories.js

@@ -0,0 +1,26 @@
+import { expect, fn, within } from '@storybook/test';
+import Forms from './Forms.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/forms',
+  component: Forms,
+  tags: ['autodocs'],
+};
+
+const enhance = fn();
+
+export const Enhance = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('enhance');
+    button.click();
+    expect(enhance).toHaveBeenCalled();
+  },
+  parameters: {
+    sveltekit_experimental: {
+      forms: {
+        enhance,
+      },
+    },
+  },
+};

package/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js

@@ -0,0 +1,53 @@
+import { expect, fn, within } from '@storybook/test';
+import Hrefs from './Hrefs.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/hrefs',
+  component: Hrefs,
+  tags: ['autodocs'],
+};
+
+export const DefaultActions = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // eslint-disable-next-line no-undef
+    const initialUrl = window.location.toString();
+
+    const basicHref = canvas.getByText('/basic-href');
+    basicHref.click();
+
+    const complexHref = canvas.getByText(
+      '/deep/nested/link?with=true&multiple-params=200#and-an-id'
+    );
+    complexHref.click();
+
+    // eslint-disable-next-line no-undef
+    const finalUrl = window.location.toString();
+    expect(finalUrl).toBe(initialUrl);
+  },
+};
+
+const basicStringMatch = fn();
+const noMatch = fn();
+const exactStringMatch = fn();
+const regexMatch = fn();
+
+export const Callbacks = {
+  parameters: {
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': basicStringMatch,
+        '/basic': noMatch,
+        '/deep/nested/link?with=true&multiple-params=200#and-an-id': exactStringMatch,
+        'nested/link\\?with': { callback: regexMatch, asRegex: true },
+      },
+    },
+  },
+  play: async (ctx) => {
+    await DefaultActions.play(ctx);
+    expect(basicStringMatch).toHaveBeenCalledTimes(1);
+    expect(noMatch).not.toHaveBeenCalled();
+    expect(exactStringMatch).toHaveBeenCalledTimes(1);
+    expect(regexMatch).toHaveBeenCalledTimes(1);
+  },
+};

package/template/stories_svelte-kit-skeleton-ts/navigation.stories.js

@@ -0,0 +1,82 @@
+import { expect, fn, within } from '@storybook/test';
+import Navigation from './Navigation.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/navigation',
+  component: Navigation,
+  tags: ['autodocs'],
+};
+
+const goto = fn();
+
+export const Goto = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('goto');
+    button.click();
+    expect(goto).toHaveBeenCalledWith('/storybook');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        goto,
+      },
+    },
+  },
+};
+
+const invalidate = fn();
+
+export const Invalidate = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('invalidate', { exact: true });
+    button.click();
+    expect(invalidate).toHaveBeenCalledWith('/storybook');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        invalidate,
+      },
+    },
+  },
+};
+
+const invalidateAll = fn();
+
+export const InvalidateAll = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('invalidateAll');
+    button.click();
+    expect(invalidateAll).toHaveBeenCalledWith();
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        invalidateAll,
+      },
+    },
+  },
+};
+
+const afterNavigateFn = fn();
+
+export const AfterNavigate = {
+  async play() {
+    expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' });
+  },
+  args: {
+    afterNavigateFn,
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        afterNavigate: {
+          test: 'passed',
+        },
+      },
+    },
+  },
+};

package/template/stories_svelte-kit-skeleton-ts/stores.stories.js

@@ -0,0 +1,116 @@
+import Stores from './Stores.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/stores',
+  component: Stores,
+  tags: ['autodocs'],
+};
+
+export const AllUndefined = {};
+
+export const PageStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const NavigatingStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const UpdatedStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        updated: true,
+      },
+    },
+  },
+};
+
+export const PageAndNavigatingStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const PageAndUpdatedStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};
+
+export const NavigatingAndUpdatedStore = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};
+
+export const AllThreeStores = {
+  parameters: {
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          route: {
+            id: '/storybook',
+          },
+        },
+        updated: true,
+      },
+    },
+  },
+};