@storybook/sveltekit 8.0.0-alpha.0 → 8.0.0-alpha.2

package/README.md

@@ -185,16 +185,6 @@ export const MyStory = {
 
 You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
 
-### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview
-
-> Some stories don't load, instead they show the following error in the preview:
->
-> ```
-> Cannot read properties of undefined (reading 'disable_scroll_handling')
-> ```
-
-You'll experience this if anything in your story is importing from `$app/forms` or `$app/navigation`, which is currently not supported. To get around this, separate your component into a shallow parent component that imports what's needed and passes it to a child component via props. This way you can write stories for your child component and mock any of the necessary modules by passing props in.
-
 ## 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.

package/dist/{index-4b5cffbe.d.ts → index-82e4147f.d.ts}

@@ -2823,6 +2823,7 @@ interface CLIOptions {
     enableCrashReports?: boolean;
     host?: string;
     initialPath?: string;
+    exactPort?: boolean;
     /**
      * @deprecated Use 'staticDirs' Storybook Configuration option instead
      */
@@ -3007,6 +3008,10 @@ interface StorybookConfigRaw {
          * This will make sure that your story renders the same no matter if docgen is enabled or not.
          */
         disallowImplicitActionsInRenderV8?: boolean;
+        /**
+         * Enable asynchronous component rendering in NextJS framework
+         */
+        experimentalNextRSC?: boolean;
     };
     build?: TestBuildConfig;
     stories: StoriesEntry[];

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { F as FrameworkOptions, H as HrefConfig, N as NormalizedHrefConfig, S as StorybookConfig, a as SvelteKitParameters } from './index-4b5cffbe.js';
+export { F as FrameworkOptions, H as HrefConfig, N as NormalizedHrefConfig, S as StorybookConfig, a as SvelteKitParameters } from './index-82e4147f.js';
 import '@storybook/builder-vite';
 import 'file-system-cache';
 import '@babel/core';

package/dist/preset.d.ts

@@ -1,4 +1,4 @@
-import { P as PresetProperty, S as StorybookConfig } from './index-4b5cffbe.js';
+import { P as PresetProperty, S as StorybookConfig } from './index-82e4147f.js';
 import '@storybook/builder-vite';
 import 'file-system-cache';
 import '@babel/core';

package/dist/preset.js

@@ -1 +1 @@
-"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});
+"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");function mockSveltekitStores(){return{name:"storybook:sveltekit-mock-stores",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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -53,10 +53,10 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-actions": "8.0.0-alpha.0",
-    "@storybook/builder-vite": "8.0.0-alpha.0",
-    "@storybook/svelte": "8.0.0-alpha.0",
-    "@storybook/svelte-vite": "8.0.0-alpha.0"
+    "@storybook/addon-actions": "8.0.0-alpha.2",
+    "@storybook/builder-vite": "8.0.0-alpha.2",
+    "@storybook/svelte": "8.0.0-alpha.2",
+    "@storybook/svelte-vite": "8.0.0-alpha.2"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
@@ -64,7 +64,7 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "vite": "^4.0.0"
   },
   "engines": {

package/template/stories_svelte-kit-prerelease-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-prerelease-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-prerelease-ts/navigation.stories.js

@@ -0,0 +1,84 @@
+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-goto');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        goto,
+      },
+    },
+  },
+};
+
+export const DefaultActions = {};
+
+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-invalidate');
+  },
+  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-prerelease-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,
+      },
+    },
+  },
+};

package/template/stories_svelte-kit-prerelease-ts/ts-docs.stories.js

@@ -0,0 +1,12 @@
+import ButtonTypescript from './ButtonTypeScript.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/ts-docs',
+  component: ButtonTypescript,
+  args: {
+    primary: true,
+  },
+  tags: ['autodocs'],
+};
+
+export const Primary = {};