@storybook/sveltekit 8.0.0-alpha.1 → 8.0.0-alpha.3

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-76c82265.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
      */

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-76c82265.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-76c82265.js';
+import { P as PresetProperty, S as StorybookConfig } from './index-82e4147f.js';
 import '@storybook/builder-vite';
 import 'file-system-cache';
 import '@babel/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.3",
   "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.1",
-    "@storybook/builder-vite": "8.0.0-alpha.1",
-    "@storybook/svelte": "8.0.0-alpha.1",
-    "@storybook/svelte-vite": "8.0.0-alpha.1"
+    "@storybook/addon-actions": "8.0.0-alpha.3",
+    "@storybook/builder-vite": "8.0.0-alpha.3",
+    "@storybook/svelte": "8.0.0-alpha.3",
+    "@storybook/svelte-vite": "8.0.0-alpha.3"
   },
   "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 = {};