Update to Sveltekit stores mocking due to depreciating $app/stores in Svelte 5.

[navsubrm]

Summary

I didn't see any other post on this, and I don't really know the full scope to fix the issue. I have been trying to pass page data to a story for a form I have using the parameters.sveltekit_experimental.stores per the documentation. After digging for a while, I identified the page context was updating, but the store wasn't. It has been driving me crazy for a day or so.

I think I finally found the issue. After reading through the add-on files, the mockSvelteKitStores export from storybook/code/frameworks/src/plugins/mock-sveltekit-stores.ts file is using $app/stores as the alias. I changed my form to use $app/stores instead of $app/state and the page context updated the page store. $app/stores is depreciated in Svelte 5, so is there a way to alias both $app/stores and $app/state? I don't want to break the add-on for anyone else by just trying to push an update to the alias.

import { getContext } from 'svelte';
import { page } from '$app/state';

const context = getContext('page-ctx');
$inspect('Context from form: ', context, page);

Console output:
init"Context from form: "
{data: {test: "passed"}, form: {fail: true, missingUsername: true, missingPassword: true}}
{data: {}, error: null, form: null, params: {}, route: {id: null}, …}

Thanks!

Additional information

No response

Create a reproduction

No response

[navsubrm]

So, I went through the SvelteKit documentation and repository to try to understand the implementation of $app/state in svelte5. I then took the storybook/svelte repository and implemented mocking of state. It works, but I have a sticking point on the implementation that I would like to figure out if someone on here can help. I made the following updates:

I added the file state.ts to the @storybook/sveltekit/mocks folder. I did the state objects without $state.raw() because I kept getting a bundling error about using $state.raw() outside of a .svelte. I had the file originally named state.svelte.ts, but it still gave the error.
export const page = { data: { test: 'Horray!' }, form: null, error: null, params: {}, route: { id: null }, state: {}, status: -1, url: new URL('https://example1.com'), }; export const navigating = { current: null, }; export const updated = { current: null, };

I added the alias for $app/state to the mock-sveltekit-stores.ts file in @storybook/sveltekit/plugins folder:

'$app/state': resolve(dir, '../src/mocks/app/state.ts'),

From there, I built a wrapper to handle updating the state from context for display in the story. I tried this two ways, and don't know why one works but the other doesn't. I assume it has something to do with when the item is loading, but am not sure.

The first method to update page, I used a component in my storybook, that I imported in my preview.ts file and added to decorators.

ContextDecorator.svelte:
`<script lang="ts">
import { page, navigating, updated } from '$app/state';
import { getContext } from 'svelte';

const pageCtx = getContext('page-ctx');
const navCtx = getContext('navigating-ctx');
const updatedCtx = getContext('updated-ctx');

Object.assign(page, pageCtx);
Object.assign(navigating, navCtx);
Object.assign(updated, updatedCtx);

</script> `

preview.ts in .storybook:
`
import StateDecorator from './ContextDecorator.svelte';

const preview: Preview = {
decorators: [() => StateDecorator],
...
`

When I run the story, the state updates and reflects correctly. However, if I make the component exportable from @storybook/sveltekit and import the component, it doesn't work. Similarly, my initial attempt to update the items in @storybook/sveltekit/preview.ts fails. I can't import the component to export from preview without getting the error "Invalid compiler option: The boolean options have been removed from the css option. Use "external" instead of false and "injected" instead of true".

I also wrote the component as below and imported it into @storybook/sveltekit/preview.ts and added it to the decorator export array. However, state was not updated in that use. I can't tell if it is not creating the appropriate wrapper, or if it is running at the wrong time.

`
import { page, navigating, updated } from '$app/state';
import { getContext, setContext } from 'svelte';
import type { Decorator } from '@storybook/svelte';

const defaultPageData = {
url: new URL('http://localhost:3000'),
params: {},
route: { id: null },
status: 200,
error: null,
data: {},
form: null,
};
const defaultNavigatingData = null;
const defaultUpdatedData = false;

export const stateMockDecorator: Decorator = (Story, ctx) => {

const Wrapper = {
setup() {

  let pageCtx = getContext('page-ctx');
  let navCtx = getContext('navigating-ctx');
  let updatedCtx = getContext('updated-ctx');

  if (!pageCtx) {
    pageCtx = writable(ctx.parameters.sveltekit_experimental.stores.page || defaultPageData);
    setContext('page-ctx', pageCtx);
  }
  if (!navCtx) {
    navCtx = writable(ctx.parameters.sveltekit_experimental.stores.navigating || defaultNavigatingData);
    setContext('navigating-ctx', navCtx);
  }
  if (!updatedCtx) {
    updatedCtx = writable(ctx.parameters.sveltekit_experimental.stores.updated || defaultUpdatedData);
    setContext('updated-ctx', updatedCtx);
  }

  Object.assign(page, pageCtx);
  Object.assign(navigating, navCtx);
  Object.assign(updated, updatedCtx);

  return { Story };
},
template: '<Story />',

};

return {
Component: Wrapper,
};
};`

All of that is to say, I can get state updated from a component in storybook with a custom component added to the storybook preview, but believe their is a better way to do this so that it is transparent and doesn't require special configuration. Any insight is appreciated. Thank you in advance.

[JReinhold]

You are correct, mocking $app/state isn't currently supported, but we have an open PR for exactly that here: #31369

It's pretty close to getting done, so I think the best approach would be to follow that PR :)

There's a canary release of that PR (see the description) you can try out and let us know if it solves your use case. 🙏

[navsubrm]

Thank you for the reply. I will keep any eye out for the release.