michaelwooley / storybook-experimental-vite

8 stars 3 forks source link

Aliased imports mocks #3

Closed michaelwooley closed 1 year ago

benmccann commented 2 years ago

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: https://github.com/storybookjs/storybook/issues/14952

benmccann commented 2 years ago

@michaelwooley are you still having difficulty with stores? I wasn't able to reproduce what you mentioned in https://github.com/michaelwooley/storybook-experimental-vite/pull/7#discussion_r914997604

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 commented 2 years ago

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 (https://github.com/michaelwooley/storybook-experimental-vite/pull/7#discussion_r914997604).

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 commented 1 year ago

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: https://github.com/storybookjs/storybook/issues/20999. PRs for it would be very welcome!