SvelteKit: Add support for mocking $app/state
#31369
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
7 file(s) reviewed, 7 comment(s)
Edit PR Review Bot Settings | Greptile
code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/State.svelte
Outdated
Show resolved
Hide resolved
code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js
Show resolved
Hide resolved
|
View your CI Pipeline Execution ↗ for commit e873a2f
☁️ Nx Cloud last updated this comment at |
JReinhold
added
feature request
sveltekit
ci:daily
Thanks Jeppe! 🧡 Co-authored-by: Jeppe Reinhold <[email protected]>
|
The suggestion I added should be enough to fix the reactivity problem. |
🧡 @paoloricciuti from Svelte Team Co-authored-by: Paolo Ricciuti <[email protected]>
|
@paoloricciuti always coming in clutch. 😍 |
…port-mocking-sveltekit-app-state
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a new $app/state mock and exposes it via package.json exports and build extraOutputs. Introduces a static app-state-mock module exporting page, navigating, updated and setter functions (setAppState*). Adds a preview.beforeEach that reads parameters.sveltekit_experimental.state and applies it to the mock. Adds types for Page/Navigation and extends SvelteKitParameters with a state property. Renames internal store setters to setAppStores* and updates MockProvider to call them. Adds a State.svelte example component, stories, and docs updates. Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Story author
participant SB as Storybook runtime
participant Preview as preview.beforeEach
participant MockModule as static/app-state-mock.svelte.js
participant UI as State.svelte
participant Resolver as Module resolver / alias
Dev->>SB: define story with parameters.sveltekit_experimental.state
SB->>Preview: invoke beforeEach(ctx)
Preview->>MockModule: call setAppStatePage / setAppStateNavigating / setAppStateUpdated
SB->>UI: render component
UI->>Resolver: import '$app/state'
Resolver->>MockModule: resolve to static/app-state-mock.svelte.js
MockModule-->>UI: provide page, navigating, updated (and setters)
UI-->>SB: rendered output
sequenceDiagram
autonumber
participant Component as App component
participant AliasPlugin as mock-sveltekit-stores alias
participant PkgExports as package.json exports
participant File as ./static/app-state-mock.svelte.js
Component->>AliasPlugin: import '$app/state'
AliasPlugin-->>PkgExports: map to internal export path
PkgExports-->>File: resolve to ./static/app-state-mock.svelte.js
File-->>Component: export page/navigating/updated + setters
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
code/frameworks/sveltekit/package.json (1)
30-46: Missing export for $app/state mock subpath (breaks alias resolution).Alias points to '@storybook/sveltekit/internal/mocks/app/state.svelte.js' but this subpath is not exported. Consumers will get “Package subpath is not defined by "exports"”.
Add the export mapping:
"exports": { ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" }, "./internal/mocks/app/forms": "./dist/mocks/app/forms.js", "./internal/mocks/app/navigation": "./dist/mocks/app/navigation.js", "./internal/mocks/app/stores": "./dist/mocks/app/stores.js", + "./internal/mocks/app/state.svelte.js": "./dist/mocks/app/state.svelte.js", "./node": { "types": "./dist/node/index.d.ts", "default": "./dist/node/index.js" },docs/get-started/frameworks/sveltekit.mdx (1)
101-116: Fix navigating example shape: useto(target) instead of top-levelroute.
$app/state.navigatingexpects{ from?: NavigationTarget, to?: NavigationTarget, ... }. The current example usesrouteat the top level, which will be ignored by the mock and break consumers readingnavigating.to.Apply this diff to correct the example:
state: { page: { data: { test: 'passed', }, }, - navigating: { - route: { - id: '/storybook', - }, - }, + navigating: { + to: { + route: { id: '/storybook' }, + params: {}, + url: new URL('http://localhost/storybook'), + }, + }, updated: true, },
🧹 Nitpick comments (3)
code/frameworks/sveltekit/scripts/copy-unbundled-to-dist.ts (1)
1-24: Harden ESM path handling and copy robustness (no __dirname in ESM; ensure parents exist; skip missing).Use import.meta.url to derive __dirname, ensure parent dirs exist, and skip gracefully if source is absent.
-import { cp } from 'node:fs/promises'; - -import { join } from 'path'; +import { cp, mkdir, access } from 'node:fs/promises'; +import { join, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; -const src = join(__dirname, '..', 'src'); -const dist = join(__dirname, '..', 'dist'); +const __dirname = dirname(fileURLToPath(import.meta.url)); +const src = join(__dirname, '..', 'src'); +const dist = join(__dirname, '..', 'dist'); // relative to src directory const PATHS_TO_COPY = ['mocks/app/state.svelte.js']; const run = async () => { console.log('Copying unbundled files to dist...'); await Promise.all( - PATHS_TO_COPY.map((pathToCopy) => - cp(join(src, pathToCopy), join(dist, pathToCopy), { recursive: true, force: true }) - ) + PATHS_TO_COPY.map(async (pathToCopy) => { + const from = join(src, pathToCopy); + const to = join(dist, pathToCopy); + try { + await access(from); + } catch { + console.warn(`[copy-unbundled-to-dist] Skipping missing ${pathToCopy}`); + return; + } + await mkdir(dirname(to), { recursive: true }); + await cp(from, to, { force: true }); + }) ); console.log('Done!'); }; run().catch((e) => { console.error(e); process.exitCode = 1; });code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/State.svelte (1)
1-5: Call updated.check() in onMount to avoid SSR/initialization timing issues.Prevents invoking browser-only logic at module init.
<script> - import { page, navigating, updated } from '$app/state'; - - updated.check(); + import { page, navigating, updated } from '$app/state'; + import { onMount } from 'svelte'; + onMount(() => { + updated.check(); + }); </script>code/frameworks/sveltekit/src/types.ts (1)
108-115: Minor typing polish.Consider unknown over any for data/state to improve safety.
- data: Record<string, any>; - state: Record<string, any>; - form: any; + data: Record<string, unknown>; + state: Record<string, unknown>; + form: unknown;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
code/frameworks/sveltekit/build-config.ts(1 hunks)code/frameworks/sveltekit/package.json(1 hunks)code/frameworks/sveltekit/scripts/copy-unbundled-to-dist.ts(1 hunks)code/frameworks/sveltekit/src/mocks/app/stores.ts(1 hunks)code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts(1 hunks)code/frameworks/sveltekit/src/preview.ts(3 hunks)code/frameworks/sveltekit/src/types.ts(1 hunks)code/frameworks/sveltekit/static/app-state-mock.svelte.js(1 hunks)code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/State.svelte(1 hunks)code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js(1 hunks)docs/get-started/frameworks/sveltekit.mdx(3 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preview.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preview.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preview.ts
📚 Learning: 2025-09-17T08:11:04.287Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx} : Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Applied to files:
code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: daily
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (11)
code/frameworks/sveltekit/package.json (1)
49-54: LGTM: publish surface update looks right.Including static/**/* and *.d.ts aligns with the new static artifact and d.ts emission.
code/frameworks/sveltekit/scripts/copy-unbundled-to-dist.ts (1)
14-16: Echoing prior: check source exists to avoid silent failure.Handled in the diff above with access() + warning.
code/frameworks/sveltekit/src/preview.ts (1)
152-158: beforeEach init looks good; double-check interaction with decorator.Both decorator (stores) and beforeEach (state) set similar concepts. Verify there’s no unintended overwrite ordering.
If needed, gate one behind a parameter flag or unify into a single initializer.
code/frameworks/sveltekit/src/types.ts (1)
57-107: LGTM: localizing SvelteKit types avoids cross-package type coupling.Shapes align with SvelteKit semantics.
code/frameworks/sveltekit/src/mocks/app/stores.ts (1)
18-25: LGTM: clearer setter names while preserving exports.Renames improve clarity and match usage in preview.ts.
code/frameworks/sveltekit/build-config.ts (1)
48-50: Confirm build order: extraOutputs requires the unbundled state file to existscripts/build/utils/generate-package-json.ts spreads data.extraOutputs into package.json exports (so exported static files must already exist); no 'copy-unbundled' / 'copy-unbundled-to-dist' or other 'unbundled' copy step was found in the repo. Ensure the build runs the copy/unbundle step that creates static/app-state-mock.svelte.js before packaging.
Locations: code/frameworks/sveltekit/build-config.ts (extraOutputs), scripts/build/utils/generate-package-json.ts (uses data.extraOutputs).
docs/get-started/frameworks/sveltekit.mdx (1)
355-377: Good addition ofstate.*API docs.Headings and brief descriptions for
state.navigating,state.page, andstate.updatedlook consistent.code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js (4)
1-149: Verify other occurrences ofnavigating.routeacross the repo
Automated search returned no matches; manually inspect docs/templates and example files for the incorrect shape and update any occurrences.
116-118: AlignNavigatingAndUpdatedwith correctnavigatingshape.Apply this diff:
navigating: { - route: { - id: '/storybook', - }, + to: { + route: { id: '/storybook' }, + params: {}, + url: new URL('https://storybook.js.org'), + }, },
84-90: AlignPageAndNavigatingwith correctnavigatingshape.Apply this diff:
navigating: { - route: { - id: '/storybook', - }, + to: { + route: { id: '/storybook' }, + params: {}, + url: new URL('https://storybook.js.org'), + }, },
138-141: AlignAllThreewith correctnavigatingshape.Apply this diff:
navigating: { - route: { - id: '/storybook', - }, + to: { + route: { id: '/storybook' }, + params: {}, + url: new URL('https://storybook.js.org'), + }, },
code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js
Show resolved
Hide resolved
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 43 | 43 | 0 |
| Self size | 30.16 MB | 30.13 MB | 🎉 -24 KB 🎉 |
| Dependency size | 17.30 MB | 17.30 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 20 | 0 |
| Self size | 48 KB | 58 KB | 🚨 +11 KB 🚨 |
| Dependency size | 26.84 MB | 26.84 MB | 🎉 -500 B 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 187 | 0 |
| Self size | 890 KB | 886 KB | 🎉 -4 KB 🎉 |
| Dependency size | 79.75 MB | 79.73 MB | 🎉 -24 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 169 | 169 | 0 |
| Self size | 35 KB | 35 KB | 0 B |
| Dependency size | 76.18 MB | 76.16 MB | 🎉 -24 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 44 | 44 | 0 |
| Self size | 1.55 MB | 1.55 MB | 0 B |
| Dependency size | 47.46 MB | 47.43 MB | 🎉 -24 KB 🎉 |
| Bundle Size Analyzer | node | node |
…port-mocking-sveltekit-app-state
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
code/frameworks/sveltekit/build-config.ts(1 hunks)code/frameworks/sveltekit/package.json(1 hunks)code/frameworks/sveltekit/src/preview.ts(2 hunks)code/frameworks/sveltekit/static/MockProvider.svelte(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- code/frameworks/sveltekit/src/preview.ts
- code/frameworks/sveltekit/build-config.ts
- code/frameworks/sveltekit/package.json
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: daily
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
code/frameworks/sveltekit/static/MockProvider.svelte (1)
6-6: Import rename verified — exports & usages OKsetAppStoresPage, setAppStoresNavigating, and setAppStoresUpdated are exported from code/frameworks/sveltekit/src/mocks/app/stores.ts and are only consumed in code/frameworks/sveltekit/static/MockProvider.svelte; no other call sites found.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/get-started/frameworks/sveltekit.mdx (1)
101-116: Fix example:state.updatedshape should be an object withcurrent, not a booleanThis contradicts the types and the template stories. Using a boolean here will mislead users.
state: { page: { data: { test: 'passed', }, }, navigating: { to: { route: { id: '/storybook' }, params: {}, url: new URL('http://localhost/storybook'), }, }, - updated: true, + updated: { current: true }, },
🧹 Nitpick comments (1)
code/frameworks/sveltekit/src/preview.ts (1)
24-30: Guard setter calls to avoid passing undefined (safer no-op semantics)Prevents unintentionally overwriting internal state with
undefinedif a story doesn’t specify a given field.export const beforeEach: Preview['beforeEach'] = async (ctx) => { - const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {}; - - setAppStatePage(svelteKitParameters?.state?.page); - setAppStateNavigating(svelteKitParameters?.state?.navigating); - setAppStateUpdated(svelteKitParameters?.state?.updated); + const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {}; + const state = svelteKitParameters?.state; + + if (state?.page) setAppStatePage(state.page); + if (state?.navigating) setAppStateNavigating(state.navigating); + if (state?.updated) setAppStateUpdated(state.updated); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/frameworks/sveltekit/src/preview.ts(2 hunks)code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js(1 hunks)docs/get-started/frameworks/sveltekit.mdx(3 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preview.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preview.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preview.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/frameworks/sveltekit/src/preview.ts
🧬 Code graph analysis (1)
code/frameworks/sveltekit/src/preview.ts (1)
code/frameworks/sveltekit/src/types.ts (1)
SvelteKitParameters(108-133)
🔇 Additional comments (5)
code/frameworks/sveltekit/src/preview.ts (1)
3-7: Verify internal export/alias for state mock resolves in consumersEnsure
@storybook/sveltekit/internal/mocks/app/state.svelte.jsis exported in package.json and mapped in build config (extraOutputs), otherwise this import can fail downstream.#!/bin/bash set -euo pipefail echo "Checking package export for internal state mock..." rg -nP '"\./internal/mocks/app/state\.svelte\.js"\s*:' code/frameworks/sveltekit/package.json -C2 || true echo -e "\nChecking build extraOutputs mapping..." rg -nP 'extraOutputs.*state\.svelte\.js' code/frameworks/sveltekit -C3 || true echo -e "\nChecking for Vite alias to \$app/state..." rg -nP '\$app/state|mocks/app/state\.svelte\.js' code/frameworks/sveltekit/src -C3 || truecode/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/modules/state.stories.js (3)
10-34: LGTM:state.pagefixture looks correct and consistent with typesData, form, params, route.id, status, and url are well-shaped.
36-63: LGTM:state.navigatingshape is validIncludes
from,to, allowedtype,willUnload,delta, andcomplete: Promise<void>.
65-75: LGTM:state.updateduses{ current: boolean }Matches the types and should interop with the setters.
docs/get-started/frameworks/sveltekit.mdx (1)
83-85: Confirm minimal SvelteKit version for $app/state — v2.12 is correctSvelteKit introduced $app/state in v2.12, so "Requires SvelteKit v2.12 or newer" is accurate.
| import { | ||
| setAppStateNavigating, | ||
| setAppStatePage, | ||
| setAppStateUpdated, // @ts-expect-error no declaration file for this JS module | ||
| } from '@storybook/sveltekit/internal/mocks/app/state.svelte.js'; |
There was a problem hiding this comment.
Fix @ts-expect-error placement; TypeScript ignores inline trailing annotations
// @ts-expect-error must be on the preceding line of the failing statement. As written, it won’t suppress the error for this import.
Apply:
-import {
- setAppStateNavigating,
- setAppStatePage,
- setAppStateUpdated, // @ts-expect-error no declaration file for this JS module
-} from '@storybook/sveltekit/internal/mocks/app/state.svelte.js';
+// @ts-expect-error no declaration file for this JS module
+import {
+ setAppStateNavigating,
+ setAppStatePage,
+ setAppStateUpdated,
+} from '@storybook/sveltekit/internal/mocks/app/state.svelte.js';Optional (preferred): add a declaration file to remove the need for ts-expect-error:
// code/frameworks/sveltekit/src/mocks/app/state.svelte.d.ts
declare module '@storybook/sveltekit/internal/mocks/app/state.svelte.js' {
import type { Page, Navigation } from '../../types'; // adjust path if needed
export function setAppStatePage(page?: Partial<Page> | undefined): void;
export function setAppStateNavigating(navigating?: Partial<Navigation> | undefined): void;
export function setAppStateUpdated(updated?: { current: boolean } | undefined): void;
}🤖 Prompt for AI Agents
In code/frameworks/sveltekit/src/preview.ts around lines 3 to 7, the trailing
"// @ts-expect-error" on the import does not suppress the TypeScript error
because the annotation must be on the line immediately before the failing
statement; move the "// @ts-expect-error no declaration file for this JS module"
to its own line immediately above the import statement so TS recognizes it, and
optionally add a declaration file at
code/frameworks/sveltekit/src/mocks/app/state.svelte.d.ts declaring the module
and exported functions to remove the need for the ts-expect-error.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/frameworks/sveltekit/src/preset.ts (1)
38-43: Optional: unify optimizeViteDeps entry styleOther entries omit extensions; if exports also support the extensionless specifier for state, consider aligning for consistency. If the .svelte.js suffix is required by the exports map, keep as-is.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
code/frameworks/sveltekit/src/preset.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (11)
📓 Common learnings
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/frameworks/sveltekit/src/preset.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/frameworks/sveltekit/src/preset.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: daily
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
code/frameworks/sveltekit/src/preset.ts (1)
42-42: Approve — .svelte.js specifier consistent across exports/importspackage.json, preview.ts, and mock-sveltekit-stores.ts all reference '@storybook/sveltekit/internal/mocks/app/state.svelte.js' (extension matches), so Vite prebundling should work.
3 participants
Resolves #31257
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-31369-sha-038fb8e0. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-31369-sha-038fb8e0feat/support-mocking-sveltekit-app-state038fb8e01747657280)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=31369Greptile Summary
This PR adds support for mocking SvelteKit's
$app/statemodule in Storybook, which is a significant enhancement for testing SvelteKit components. The changes enable developers to simulate various application states during component development and testing.The implementation includes:
$app/statemodule with support for page, navigating, and updated statesThe changes also maintain backward compatibility by supporting both the new state-based approach and the legacy stores approach.
Confidence score: 4/5
10 files reviewed, 1 comment
Edit PR Review Bot Settings | Greptile
Summary by CodeRabbit
New Features
Documentation
Refactor
Chores