@storybook/sveltekit 11.0.0-alpha.4 → 11.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,31 @@
1
+ import CJS_COMPAT_NODE_URL_krxa3c8h1ok from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_krxa3c8h1ok from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_krxa3c8h1ok from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_krxa3c8h1ok.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_krxa3c8h1ok.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_krxa3c8h1ok.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+
13
+ // src/plugins/mock-sveltekit-modules.ts
14
+ function mockSveltekitModules() {
15
+ return {
16
+ name: "storybook:sveltekit-mock-modules",
17
+ config: () => ({
18
+ resolve: {
19
+ alias: {
20
+ "$app/forms": "@storybook/sveltekit/internal/mocks/app/forms",
21
+ "$app/navigation": "@storybook/sveltekit/internal/mocks/app/navigation",
22
+ "$app/state": "@storybook/sveltekit/internal/mocks/app/state.svelte.js"
23
+ }
24
+ }
25
+ })
26
+ };
27
+ }
28
+
29
+ export {
30
+ mockSveltekitModules
31
+ };
@@ -10,6 +10,9 @@ declare function enhance(form: HTMLFormElement): {
10
10
  declare function goto(...args: any[]): Promise<void>;
11
11
  declare function invalidate(...args: any[]): Promise<void>;
12
12
  declare function invalidateAll(): Promise<void>;
13
+ declare function refreshAll(): Promise<void>;
14
+ declare function pushState(...args: any[]): Promise<void>;
15
+ declare function replaceState(...args: any[]): Promise<void>;
13
16
  //#endregion
14
17
  //#region code/frameworks/sveltekit/.dts-emit/code/frameworks/sveltekit/src/types.d.ts
15
18
  type FrameworkName = CompatibleString<'@storybook/sveltekit'>;
@@ -96,19 +99,13 @@ type SvelteKitParameters = Partial<{
96
99
  current: boolean;
97
100
  };
98
101
  };
99
- /**
100
- * @deprecated
101
- * @see {@link https://svelte.dev/docs/kit/$app-stores}
102
- */
103
- stores: {
104
- page: Record<string, any>;
105
- navigating: Record<string, any>;
106
- updated: boolean;
107
- };
108
102
  navigation: {
109
103
  goto: typeof goto;
110
104
  invalidate: typeof invalidate;
111
105
  invalidateAll: typeof invalidateAll;
106
+ refreshAll: typeof refreshAll;
107
+ pushState: typeof pushState;
108
+ replaceState: typeof replaceState;
112
109
  afterNavigate: Record<string, any>;
113
110
  };
114
111
  forms: {
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { a as SvelteKitParameters, i as StorybookConfig, n as HrefConfig, r as NormalizedHrefConfig, t as FrameworkOptions } from "./chunk-B_AQQjYm.js";
1
+ import { a as SvelteKitParameters, i as StorybookConfig, n as HrefConfig, r as NormalizedHrefConfig, t as FrameworkOptions } from "./chunk-D3kX1WMe.js";
2
2
  import { SvelteRenderer } from "@storybook/svelte";
3
3
  import { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from "storybook/internal/types";
4
4
  export * from "@storybook/svelte";
@@ -14,7 +14,15 @@ function setAfterNavigateArgument(afterNavigateArgs) {
14
14
  function afterNavigate(cb) {
15
15
  let argument = getContext("after-navigate-args");
16
16
  onMount(() => {
17
- cb && cb instanceof Function && cb(argument);
17
+ cb && cb instanceof Function && cb({
18
+ type: "enter",
19
+ shallow: !1,
20
+ from: null,
21
+ to: null,
22
+ willUnload: !1,
23
+ complete: Promise.resolve(),
24
+ ...argument
25
+ });
18
26
  });
19
27
  }
20
28
  function onNavigate() {
@@ -33,10 +41,16 @@ async function invalidateAll() {
33
41
  let event = new CustomEvent("storybook:invalidateAll");
34
42
  window.dispatchEvent(event);
35
43
  }
44
+ async function refreshAll() {
45
+ let event = new CustomEvent("storybook:refreshAll");
46
+ window.dispatchEvent(event);
47
+ }
36
48
  function preloadCode() {
37
49
  }
38
50
  function preloadData() {
39
51
  }
52
+ function snapshot() {
53
+ }
40
54
  async function pushState(...args) {
41
55
  let event = new CustomEvent("storybook:pushState", {
42
56
  detail: args
@@ -60,6 +74,8 @@ export {
60
74
  preloadCode,
61
75
  preloadData,
62
76
  pushState,
77
+ refreshAll,
63
78
  replaceState,
64
- setAfterNavigateArgument
79
+ setAfterNavigateArgument,
80
+ snapshot
65
81
  };
@@ -1,4 +1,4 @@
1
- import { i as StorybookConfig } from "../chunk-B_AQQjYm.js";
1
+ import { i as StorybookConfig } from "../chunk-D3kX1WMe.js";
2
2
 
3
3
  //#region code/frameworks/sveltekit/.dts-emit/code/frameworks/sveltekit/src/node/index.d.ts
4
4
  declare function defineMain(config: StorybookConfig): StorybookConfig;
@@ -1,10 +1,10 @@
1
- import CJS_COMPAT_NODE_URL_2uhoiveb2r7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_2uhoiveb2r7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_2uhoiveb2r7 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_krxa3c8h1ok from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_krxa3c8h1ok from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_krxa3c8h1ok from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_2uhoiveb2r7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_2uhoiveb2r7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_2uhoiveb2r7.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_krxa3c8h1ok.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_krxa3c8h1ok.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_krxa3c8h1ok.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
package/dist/preset.js CHANGED
@@ -1,19 +1,21 @@
1
- import CJS_COMPAT_NODE_URL_2uhoiveb2r7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_2uhoiveb2r7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_2uhoiveb2r7 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_krxa3c8h1ok from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_krxa3c8h1ok from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_krxa3c8h1ok from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_2uhoiveb2r7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_2uhoiveb2r7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_2uhoiveb2r7.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_krxa3c8h1ok.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_krxa3c8h1ok.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_krxa3c8h1ok.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
11
  // ------------------------------------------------------------
12
12
  import {
13
- mockSveltekitStores
14
- } from "./_node-chunks/chunk-XUXJJPIG.js";
13
+ mockSveltekitModules
14
+ } from "./_node-chunks/chunk-4GGOF3SQ.js";
15
15
 
16
16
  // src/preset.ts
17
+ import { existsSync } from "node:fs";
18
+ import { resolve } from "node:path";
17
19
  import { fileURLToPath } from "node:url";
18
20
  import { withoutVitePlugins } from "@storybook/builder-vite";
19
21
  import { viteFinal as svelteViteFinal } from "@storybook/svelte-vite/preset";
@@ -24,7 +26,78 @@ function configOverrides() {
24
26
  // SvelteKit sets SSR, we need it to be false when building
25
27
  name: "storybook:sveltekit-overrides",
26
28
  apply: "build",
27
- config: () => ({ build: { ssr: !1 } })
29
+ config: () => ({
30
+ build: { ssr: !1 },
31
+ // SvelteKit's compile plugin defines these, and Storybook removes that plugin. `$app/env/public`
32
+ // reads `env` from the payload. See https://github.com/sveltejs/kit/blob/090496890cedbbff15d998695d48cd31e7d698b7/packages/kit/src/exports/vite/build/index.js#L346-L349
33
+ // and https://github.com/sveltejs/kit/blob/090496890cedbbff15d998695d48cd31e7d698b7/packages/kit/src/exports/vite/build/index.js#L1064-L1075
34
+ define: {
35
+ __SVELTEKIT_PAYLOAD__: JSON.stringify({ env: {} }),
36
+ __SVELTEKIT_MANIFEST_ASSETS__: "[]",
37
+ __SVELTEKIT_MANIFEST_IMMUTABLE__: "[]",
38
+ __SVELTEKIT_MANIFEST_PRERENDERED__: "[]",
39
+ __SVELTEKIT_MANIFEST_ROUTES__: "[]"
40
+ }
41
+ })
42
+ };
43
+ }
44
+
45
+ // src/plugins/dev-public-env.ts
46
+ function devPublicEnv() {
47
+ return {
48
+ name: "storybook:sveltekit-dev-public-env",
49
+ apply: "serve",
50
+ transform: {
51
+ // In development, `$app/env/public` reads `env` from this global, which SvelteKit's HTML sets.
52
+ // Setting it in the module itself works regardless of which module Storybook evaluates first.
53
+ // See https://github.com/sveltejs/kit/blob/090496890cedbbff15d998695d48cd31e7d698b7/packages/kit/src/core/env.js#L280-L283
54
+ filter: { id: /\/generated\/dev\/env\/public\/client\.js(\?|$)/ },
55
+ handler(code) {
56
+ return `(globalThis.__sveltekit_dev ??= {}).env ??= {};${code}`;
57
+ }
58
+ }
59
+ };
60
+ }
61
+
62
+ // src/plugins/guard-server-modules.ts
63
+ function guardServerModules() {
64
+ return {
65
+ name: "storybook:sveltekit-guard-server-modules",
66
+ applyToEnvironment: (environment) => environment.config.consumer === "client",
67
+ load: {
68
+ // The files behind `$app/env/private` and `$app/server`, see https://github.com/sveltejs/kit/blob/090496890cedbbff15d998695d48cd31e7d698b7/packages/kit/src/exports/vite/module_ids.js
69
+ filter: { id: /\/src\/runtime\/app\/(env\/private|server)\/index\.js(\?|$)/ },
70
+ handler() {
71
+ this.error(
72
+ "`$app/env/private` and `$app/server` are server-only modules. Storybook renders stories in the browser. Stories and the components that they render cannot import these modules. Mock the module that imports them with a mock file: https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules#mock-files"
73
+ );
74
+ }
75
+ }
76
+ };
77
+ }
78
+
79
+ // src/plugins/sync.ts
80
+ import { execFileSync } from "node:child_process";
81
+ import { readFileSync } from "node:fs";
82
+ import { join } from "node:path";
83
+ import { pathToFileURL } from "node:url";
84
+ import { resolvePackageDir } from "storybook/internal/common";
85
+ function syncSvelteKit() {
86
+ return {
87
+ name: "storybook:sveltekit-sync",
88
+ apply: "build",
89
+ // Builds need the files that `svelte-kit sync` writes, such as `$app/tsconfig`. SvelteKit's
90
+ // compile plugin writes them, but Storybook removes that plugin
91
+ configResolved({ root }) {
92
+ let kitDir = resolvePackageDir(
93
+ "@sveltejs/kit",
94
+ pathToFileURL(join(root, "package.json")).href
95
+ ), { bin } = JSON.parse(readFileSync(join(kitDir, "package.json"), "utf-8"));
96
+ execFileSync(process.execPath, [join(kitDir, bin["svelte-kit"]), "sync"], {
97
+ cwd: root,
98
+ stdio: "pipe"
99
+ });
100
+ }
28
101
  };
29
102
  }
30
103
 
@@ -35,7 +108,12 @@ var core = {
35
108
  }, previewAnnotations = (entry = []) => [
36
109
  ...entry,
37
110
  fileURLToPath(import.meta.resolve("@storybook/sveltekit/preview"))
38
- ], viteFinal = async (config, options) => {
111
+ ], staticDirs = async (values = [], options) => {
112
+ if (options.configType !== "PRODUCTION")
113
+ return values;
114
+ let assetsDir = resolve(options.configDir, "..", "static");
115
+ return existsSync(assetsDir) ? [...values, { from: assetsDir, to: "/" }] : values;
116
+ }, viteFinal = async (config, options) => {
39
117
  let baseConfig = await svelteViteFinal(config, options);
40
118
  return {
41
119
  ...baseConfig,
@@ -46,18 +124,21 @@ var core = {
46
124
  "vite-plugin-sveltekit-guard"
47
125
  ]),
48
126
  configOverrides(),
49
- mockSveltekitStores()
127
+ syncSvelteKit(),
128
+ devPublicEnv(),
129
+ mockSveltekitModules(),
130
+ guardServerModules()
50
131
  ]
51
132
  };
52
133
  }, optimizeViteDeps = [
53
134
  "@storybook/sveltekit/internal/mocks/app/forms",
54
135
  "@storybook/sveltekit/internal/mocks/app/navigation",
55
- "@storybook/sveltekit/internal/mocks/app/stores",
56
136
  "@storybook/sveltekit/internal/mocks/app/state.svelte.js"
57
137
  ];
58
138
  export {
59
139
  core,
60
140
  optimizeViteDeps,
61
141
  previewAnnotations,
142
+ staticDirs,
62
143
  viteFinal
63
144
  };
@@ -1,20 +1,20 @@
1
- import CJS_COMPAT_NODE_URL_2uhoiveb2r7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_2uhoiveb2r7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_2uhoiveb2r7 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_krxa3c8h1ok from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_krxa3c8h1ok from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_krxa3c8h1ok from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_2uhoiveb2r7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_2uhoiveb2r7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_2uhoiveb2r7.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_krxa3c8h1ok.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_krxa3c8h1ok.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_krxa3c8h1ok.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
11
  // ------------------------------------------------------------
12
12
  import {
13
- mockSveltekitStores
14
- } from "./_node-chunks/chunk-XUXJJPIG.js";
13
+ mockSveltekitModules
14
+ } from "./_node-chunks/chunk-4GGOF3SQ.js";
15
15
 
16
16
  // src/vite-plugin.ts
17
- var storybookSveltekitPlugin = () => [mockSveltekitStores()];
17
+ var storybookSveltekitPlugin = () => [mockSveltekitModules()];
18
18
  export {
19
19
  storybookSveltekitPlugin
20
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/sveltekit",
3
- "version": "11.0.0-alpha.4",
3
+ "version": "11.0.0-alpha.5",
4
4
  "description": "Storybook for SvelteKit: Develop, document, and test UI components in isolation",
5
5
  "keywords": [
6
6
  "storybook",
@@ -37,7 +37,6 @@
37
37
  "./internal/mocks/app/forms": "./dist/mocks/app/forms.js",
38
38
  "./internal/mocks/app/navigation": "./dist/mocks/app/navigation.js",
39
39
  "./internal/mocks/app/state.svelte.js": "./static/app-state-mock.svelte.js",
40
- "./internal/mocks/app/stores": "./dist/mocks/app/stores.js",
41
40
  "./node": {
42
41
  "types": "./dist/node/index.d.ts",
43
42
  "code": "./src/node/index.ts",
@@ -57,19 +56,21 @@
57
56
  "*.d.ts"
58
57
  ],
59
58
  "dependencies": {
60
- "@storybook/builder-vite": "11.0.0-alpha.4",
61
- "@storybook/svelte": "11.0.0-alpha.4",
62
- "@storybook/svelte-vite": "11.0.0-alpha.4"
59
+ "@storybook/builder-vite": "11.0.0-alpha.5",
60
+ "@storybook/svelte": "11.0.0-alpha.5",
61
+ "@storybook/svelte-vite": "11.0.0-alpha.5"
63
62
  },
64
63
  "devDependencies": {
65
64
  "@types/node": "^22.19.1",
65
+ "memfs": "^4.11.1",
66
66
  "typescript": "^6.0.3",
67
67
  "vite": "^7.0.4"
68
68
  },
69
69
  "peerDependencies": {
70
- "storybook": "^11.0.0-alpha.4",
70
+ "@sveltejs/kit": "^3.0.0",
71
+ "storybook": "^11.0.0-alpha.5",
71
72
  "svelte": "^5.0.0",
72
- "vite": "^6.3.0 || ^7.0.0 || ^8.0.0"
73
+ "vite": "^8.0.0"
73
74
  },
74
75
  "publishConfig": {
75
76
  "access": "public"
@@ -3,14 +3,10 @@
3
3
  import { action } from 'storybook/actions';
4
4
 
5
5
  import { setAfterNavigateArgument } from '@storybook/sveltekit/internal/mocks/app/navigation';
6
- import { setAppStoresNavigating, setAppStoresPage, setAppStoresUpdated } from '@storybook/sveltekit/internal/mocks/app/stores';
7
6
 
8
7
  const { svelteKitParameters = {}, children } = $props();
9
8
 
10
9
  // Set context during component initialization - this happens before any child components
11
- setAppStoresPage(svelteKitParameters?.stores?.page);
12
- setAppStoresNavigating(svelteKitParameters?.stores?.navigating);
13
- setAppStoresUpdated(svelteKitParameters?.stores?.updated);
14
10
  setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate);
15
11
 
16
12
  const normalizeHrefConfig = (hrefConfig) => {
@@ -110,7 +106,7 @@
110
106
 
111
107
  const removeNavigationListeners = createListeners(
112
108
  'navigation',
113
- ['goto', 'invalidate', 'invalidateAll', 'pushState', 'replaceState'],
109
+ ['goto', 'invalidate', 'invalidateAll', 'refreshAll', 'pushState', 'replaceState'],
114
110
  true
115
111
  );
116
112
  const removeFormsListeners = createListeners('forms', ['enhance']);
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { browser, dev, building, version } from '$app/environment';
2
+ import { browser, dev, building, version } from '$app/env';
3
3
  </script>
4
4
 
5
5
  <div data-testid="browser">{browser}</div>
@@ -0,0 +1,5 @@
1
+ <script>
2
+ import favicon from '#lib/assets/favicon.svg';
3
+ </script>
4
+
5
+ <img alt="Svelte logo" src={favicon} />
@@ -3,6 +3,7 @@
3
3
  goto,
4
4
  invalidate,
5
5
  invalidateAll,
6
+ refreshAll,
6
7
  afterNavigate,
7
8
  replaceState,
8
9
  pushState,
@@ -31,6 +32,12 @@
31
32
  }}>invalidateAll</button
32
33
  >
33
34
 
35
+ <button
36
+ on:click={() => {
37
+ refreshAll();
38
+ }}>refreshAll</button
39
+ >
40
+
34
41
  <button
35
42
  on:click={() => {
36
43
  pushState('/storybook-push-state', {});
@@ -1,6 +1,6 @@
1
1
  <script>
2
- import { assets, base } from "$app/paths";
2
+ import { asset, resolve } from '$app/paths';
3
3
  </script>
4
4
 
5
- <div data-testid="assets">{assets}</div>
6
- <div data-testid="base">{base}</div>
5
+ <div data-testid="asset">{asset('robots.txt')}</div>
6
+ <div data-testid="resolve">{resolve('/')}</div>
@@ -0,0 +1,5 @@
1
+ <script>
2
+ import { STORYBOOK_STATIC_PUBLIC } from '$app/env/public';
3
+ </script>
4
+
5
+ <div data-testid="static-public">{STORYBOOK_STATIC_PUBLIC}</div>
@@ -0,0 +1,15 @@
1
+ import { expect, within } from 'storybook/test';
2
+
3
+ import Lib from './Lib.svelte';
4
+
5
+ export default {
6
+ title: 'stories/frameworks/sveltekit/modules/lib',
7
+ component: Lib,
8
+ };
9
+
10
+ export const SubpathImport = {
11
+ async play({ canvasElement }) {
12
+ const canvas = within(canvasElement);
13
+ await expect(canvas.getByAltText('Svelte logo').getAttribute('src')).toMatch(/svg/);
14
+ },
15
+ };
@@ -99,11 +99,29 @@ export const InvalidateAll = {
99
99
  },
100
100
  };
101
101
 
102
+ const refreshAll = fn();
103
+
104
+ export const RefreshAll = {
105
+ async play({ canvasElement }) {
106
+ const canvas = within(canvasElement);
107
+ const button = canvas.getByText('refreshAll');
108
+ button.click();
109
+ expect(refreshAll).toHaveBeenCalledWith();
110
+ },
111
+ parameters: {
112
+ sveltekit_experimental: {
113
+ navigation: {
114
+ refreshAll,
115
+ },
116
+ },
117
+ },
118
+ };
119
+
102
120
  const afterNavigateFn = fn();
103
121
 
104
122
  export const AfterNavigate = {
105
123
  async play() {
106
- expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' });
124
+ expect(afterNavigateFn).toHaveBeenCalledWith(expect.objectContaining({ test: 'passed' }));
107
125
  },
108
126
  args: {
109
127
  afterNavigateFn,
@@ -118,3 +136,16 @@ export const AfterNavigate = {
118
136
  },
119
137
  },
120
138
  };
139
+
140
+ const defaultAfterNavigateFn = fn();
141
+
142
+ export const AfterNavigateDefault = {
143
+ async play() {
144
+ expect(defaultAfterNavigateFn).toHaveBeenCalledWith(
145
+ expect.objectContaining({ type: 'enter', shallow: false, willUnload: false })
146
+ );
147
+ },
148
+ args: {
149
+ afterNavigateFn: defaultAfterNavigateFn,
150
+ },
151
+ };
@@ -0,0 +1,15 @@
1
+ import { expect, within } from 'storybook/test';
2
+
3
+ import PublicEnv from './PublicEnv.svelte';
4
+
5
+ export default {
6
+ title: 'stories/frameworks/sveltekit/modules/public-env',
7
+ component: PublicEnv,
8
+ };
9
+
10
+ export const Static = {
11
+ async play({ canvasElement }) {
12
+ const canvas = within(canvasElement);
13
+ await expect(canvas.getByTestId('static-public')).toHaveTextContent('static public value');
14
+ },
15
+ };
@@ -1,32 +0,0 @@
1
- import CJS_COMPAT_NODE_URL_2uhoiveb2r7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_2uhoiveb2r7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_2uhoiveb2r7 from "node:module";
4
-
5
- var __filename = CJS_COMPAT_NODE_URL_2uhoiveb2r7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_2uhoiveb2r7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_2uhoiveb2r7.createRequire(import.meta.url);
8
-
9
- // ------------------------------------------------------------
10
- // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
- // ------------------------------------------------------------
12
-
13
- // src/plugins/mock-sveltekit-stores.ts
14
- function mockSveltekitStores() {
15
- return {
16
- name: "storybook:sveltekit-mock-stores",
17
- config: () => ({
18
- resolve: {
19
- alias: {
20
- "$app/forms": "@storybook/sveltekit/internal/mocks/app/forms",
21
- "$app/navigation": "@storybook/sveltekit/internal/mocks/app/navigation",
22
- "$app/state": "@storybook/sveltekit/internal/mocks/app/state.svelte.js",
23
- "$app/stores": "@storybook/sveltekit/internal/mocks/app/stores"
24
- }
25
- }
26
- })
27
- };
28
- }
29
-
30
- export {
31
- mockSveltekitStores
32
- };
@@ -1,37 +0,0 @@
1
- import "../../_browser-chunks/chunk-4BE7D4DS.js";
2
-
3
- // src/mocks/app/stores.ts
4
- import { getContext, setContext } from "svelte";
5
- function createMockedStore(contextName) {
6
- return [
7
- {
8
- subscribe(runner) {
9
- let page2 = getContext(contextName);
10
- return runner(page2), () => {
11
- };
12
- }
13
- },
14
- (value) => {
15
- setContext(contextName, value);
16
- }
17
- ];
18
- }
19
- var [page, setAppStoresPage] = createMockedStore("page-ctx"), [navigating, setAppStoresNavigating] = createMockedStore("navigating-ctx"), [updated, setAppStoresUpdated] = createMockedStore("updated-ctx");
20
- updated.check = () => {
21
- };
22
- function getStores() {
23
- return {
24
- page,
25
- navigating,
26
- updated
27
- };
28
- }
29
- export {
30
- getStores,
31
- navigating,
32
- page,
33
- setAppStoresNavigating,
34
- setAppStoresPage,
35
- setAppStoresUpdated,
36
- updated
37
- };
@@ -1,17 +0,0 @@
1
- <script>
2
- import { page, navigating, updated, getStores } from '$app/stores';
3
-
4
- let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores();
5
-
6
- updated.check();
7
- </script>
8
-
9
- <p>Directly importing</p>
10
- <pre>{JSON.stringify($page, null, 2)}</pre>
11
- <pre>{JSON.stringify($navigating, null, 2)}</pre>
12
- <pre>{JSON.stringify($updated, null, 2)}</pre>
13
-
14
- <p>With getStores</p>
15
- <pre>{JSON.stringify($pageStore, null, 2)}</pre>
16
- <pre>{JSON.stringify($navigatingStore, null, 2)}</pre>
17
- <pre>{JSON.stringify($updatedStore, null, 2)}</pre>
@@ -1,115 +0,0 @@
1
- import Stores from './Stores.svelte';
2
-
3
- export default {
4
- title: 'stories/frameworks/sveltekit/modules/stores',
5
- component: Stores,
6
- };
7
-
8
- export const AllUndefined = {};
9
-
10
- export const PageStore = {
11
- parameters: {
12
- sveltekit_experimental: {
13
- stores: {
14
- page: {
15
- data: {
16
- test: 'passed',
17
- },
18
- },
19
- },
20
- },
21
- },
22
- };
23
-
24
- export const NavigatingStore = {
25
- parameters: {
26
- sveltekit_experimental: {
27
- stores: {
28
- navigating: {
29
- route: {
30
- id: '/storybook',
31
- },
32
- },
33
- },
34
- },
35
- },
36
- };
37
-
38
- export const UpdatedStore = {
39
- parameters: {
40
- sveltekit_experimental: {
41
- stores: {
42
- updated: true,
43
- },
44
- },
45
- },
46
- };
47
-
48
- export const PageAndNavigatingStore = {
49
- parameters: {
50
- sveltekit_experimental: {
51
- stores: {
52
- page: {
53
- data: {
54
- test: 'passed',
55
- },
56
- },
57
- navigating: {
58
- route: {
59
- id: '/storybook',
60
- },
61
- },
62
- },
63
- },
64
- },
65
- };
66
-
67
- export const PageAndUpdatedStore = {
68
- parameters: {
69
- sveltekit_experimental: {
70
- stores: {
71
- page: {
72
- data: {
73
- test: 'passed',
74
- },
75
- },
76
- updated: true,
77
- },
78
- },
79
- },
80
- };
81
-
82
- export const NavigatingAndUpdatedStore = {
83
- parameters: {
84
- sveltekit_experimental: {
85
- stores: {
86
- navigating: {
87
- route: {
88
- id: '/storybook',
89
- },
90
- },
91
- updated: true,
92
- },
93
- },
94
- },
95
- };
96
-
97
- export const AllThreeStores = {
98
- parameters: {
99
- sveltekit_experimental: {
100
- stores: {
101
- page: {
102
- data: {
103
- test: 'passed',
104
- },
105
- },
106
- navigating: {
107
- route: {
108
- id: '/storybook',
109
- },
110
- },
111
- updated: true,
112
- },
113
- },
114
- },
115
- };