Aliased imports mocks

[michaelwooley]

No description provided.

[benmccann]

I just took a look at why you can't import $app/navigation. It's because it depends on the client singleton being available, which gets created when you call SvelteKit's start function, which hasn't been called in this case.

Here's the upstream issue: storybookjs/storybook#14952

[benmccann]

@michaelwooley are you still having difficulty with stores? I wasn't able to reproduce what you mentioned in #7 (comment)

I put the following in Header.svelte:

import { session } from '$app/stores';
console.log(`session ${session}`);
console.log(`$session ${$session}`);

It printed:

session [object Object]
$session [object Object]

[michaelwooley]

I am seeing the same message you reported in the terminal running storybook.

All of the errors that I am seeing only show up in the browser once you navigate to the header story (i.e. http://localhost:6006/?path=/story/header--basic).

Unfortunately, I'm still seeing the same errors that were popping up the other day (#7 (comment)).

I'm pretty certain that we're trying the same cases but here is a branch of what I've just tried just in case: https://github.com/michaelwooley/storybook-experimental-vite/compare/michael/import-session-store-demo

---

Poking around the code a bit, the failure appears to come up in .svelte-kit/runtime/app/stores.js:

	const stores = getContext('__svelte__');

	return {
		page: {
			subscribe: stores.page.subscribe

We never set the __svelte__ context. So stores is undefined.

[benmccann]

Most aliases are now supported out-of-the-box with the latest Storybook 7. You can see a summary of what is supported and not supported here: https://github.com/storybookjs/storybook/tree/next/code/frameworks/sveltekit

There are a few that are not yet supported and make more sense to support as mocks. I've created a new issue to track that: storybookjs/storybook#20999. PRs for it would be very welcome!