Support `features.storyStoreV7` #126

joshwooding · 2021-10-26T00:42:31Z

Closes #125

joshwooding · 2021-10-26T10:38:11Z

@tmeasday Any thoughts on the current list of issues? I'm not that familiar with how storybook works but from what I can tell the useEffect in preview.tsx sets the storyId to undefined here for some reason on initial load when there wasn't a defined path:

https://github.com/storybookjs/storybook/blob/842d4793ed5becc6bfd054eb8cf4bb36d1b4892c/lib/ui/src/components/preview/preview.tsx#L164

tmeasday · 2021-10-26T10:51:08Z

Hey @joshwooding -- if you let me know how to run it I can take a look? It isn't entirely clear what the issues mean.

Have you looked at what events are being emitted from the preview side? I'm not sure but I think that code would only emit any empty story id if the preview somehow told it to.

tmeasday

Couple comments scanning through

packages/storybook-builder-vite/codegen-modern-iframe-script.js

packages/storybook-builder-vite/codegen-importfn-script.js

joshwooding · 2021-10-26T12:15:29Z

Hey @joshwooding -- if you let me know how to run it I can take a look? It isn't entirely clear what the issues mean.

Have you looked at what events are being emitted from the preview side? I'm not sure but I think that code would only emit any empty story id if the preview somehow told it to.

@tmeasday
You should be able to test it by:

Pulling the branch down
running yarn install in the root folder
cd to './packages/example-react'
run yarn storybook

joshwooding · 2021-10-26T16:46:48Z

After some investigation FEATURES in the stories.ts file isn't being updated.

joshwooding · 2021-10-26T19:26:32Z

@tmeasday I'm seeing some weird stuff. Not sure if it's due to the yarn setup or something else but when installing node_modules from scratch I get a prebuilt manager which does not get changed and is stuck with the features config set to {"postcss":true}.

IanVS · 2021-11-01T01:17:03Z

Hi @joshwooding, thanks for your work on this. Is there more you're planning to do, or is it ready to review? If so, is there anything we should be aware of as we do?

joshwooding · 2021-11-01T16:29:46Z

@IanVS I think there are some few kinks to iron out. Currently the current issues are:

Storybook uses the prebuilt manager which breaks everything. You need to delete node_modules > @storybook/manager-webpack4 > prebuild to get everything working or use --no-manager-cache (This might be an issue with the monorepo)
You need to refresh the page when initial loading because a 408 timeout is returned when getting @react-refresh

packages/storybook-builder-vite/codegen-importfn-script.js

joshwooding · 2021-11-03T11:19:39Z

@IanVS I'm stumped on the 408 timeout issue. It seems like the modules referenced in the iframe aren't loaded on the first render so we get a 408 error in the console and the stories don't load. Refreshing the page fixes this. Any ideas?

@eirslett Not sure if you have any ideas?

eirslett · 2021-11-03T12:43:29Z

@eirslett Not sure if you have any ideas?

We usually add any third-party dependencies from package.json to the optimizeDeps config, so they are optimized immediately on startup.

joshwooding · 2021-11-03T13:15:39Z

@eirslett The 408 requests include third-party dependencies sadly :(

joshwooding · 2021-11-09T19:35:52Z

The only issue I can see now is that the static storybook sets an empty path?

joshwooding · 2021-11-10T01:51:50Z

The only issue I can see now is that the static storybook sets an empty path?

This is an issue with storybook-builder-vite so as far as I can see this is ready to review @IanVS 🎉

IanVS · 2021-11-10T02:32:27Z

Thanks for sticking with this one, @joshwooding! I'll give it some 👀 as soon as I can.

In the meantime, it would be great if anyone else would be willing to try it out and play around with it, especially those using svelte or vue or other frameworks than React, which is what I'll be testing out.

joshwooding · 2021-11-10T12:26:51Z

Hmm, I can't get svelte to work in the repo. Two instances of ClientApi seem to exist for some reason.

joshwooding · 2021-11-10T12:47:30Z

.svelte story files no longer work due to https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/utils/StoryIndexGenerator.ts#L68 cc @tmeasday

I assume this is intentional

storybookjs/storybook#16673 an issue has been raised to track this.

tmeasday · 2021-11-10T19:13:27Z

Hmm, yes I guess we will need to think about that @shilman

packages/example-react/package.json

joshwooding · 2021-11-15T22:53:01Z

.svelte story files no longer work due to https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/utils/StoryIndexGenerator.ts#L68 cc @tmeasday

I assume this is intentional

storybookjs/storybook#16673 an issue has been raised to track this.

I think this and the svelte duplicate ClientAPIs are the only issues left :)

I think the duplicate ClientAPIs are due to @storybook/addon-svelte-csf including an different version

packages/example-react/.storybook/main.js

IanVS · 2021-11-17T01:28:59Z

I pulled down the branch and am experimenting with it now. I'm seeing a few things so far, still investigating:


╭──────────────────────────────────────────────────────╮
│                                                      │
│   Storybook 6.4.0-rc.2 for React started             │
│   6.56 s for manager and 5.38 s for preview          │
│                                                      │
│    Local:            http://localhost:62893/         │
│    On your network:  http://192.168.68.116:62893/    │
│                                                      │
╰──────────────────────────────────────────────────────╯
8:25:39 PM [vite] new dependencies found: @storybook/channel-websocket, updating...
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/@storybook_preview-web.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/@storybook_client-api.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/global.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/@storybook_addons.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/@storybook_channel-postmessage.js" points to missing source files
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-JST3G223.js?v=732bfa54.
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-XEMAM7KF.js?v=732bfa54.
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-MRP3MKNT.js?v=732bfa54.
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-TYR6E6LN.js?v=732bfa54.
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-NRERFRFO.js?v=732bfa54.
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-OAV7HHZ3.js?v=732bfa54.
8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-LRSF2QUR.js?v=732bfa54.
.
.
.
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/unfetch.js" points to missing source files
8:25:41 PM [vite] ✨ dependencies updated, reloading page...
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/@storybook_client-logger.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/telejson.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/chunk-4S6UEONU.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/util-deprecate.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/ts-dedent.js" points to missing source files
Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/chunk-AKDXD5X2.js" points to missing source files

So, it seems like we should add @storybook/channel-websocket to the optimizeDeps list, and I've seen others report the source map issues, so now that I have a reproduction I'll see if I can figure out what's going on.

After I added @storybook/channel-websocket to prebundling and restarted storybook, the messages like 8:25:39 PM [vite] Failed to load source map for /node_modules/.vite/chunk-LRSF2QUR.js?v=732bfa54. are no longer shown, but I do still see a lot like Sourcemap for "/Users/ianvs/code/storybook/storybook-builder-vite/packages/example-react/node_modules/.vite/lodash_isFunction.js" points to missing source files

OK, found a solution for those warnings: vitejs/vite#5438 (comment). I'll throw up a PR.

IanVS · 2021-11-17T02:50:10Z

It's so cool to see the new components get fetched only when you view their stories. This should help folks with large storybooks a ton!

What do you think about merging this and in our release notes mentioning that storyStoreV7 is not supported for svelte yet. It sounds like storybook changes will be needed for it to work correctly, so there's probably no need to hold up this PR. This whole project is experimental, so I'm 👍 for releasing and getting bug reports if folks hit trouble.

IanVS

If you're willing to add @storybook/channel-websocket to the list of optimized dependencies and uncomment out the accessibility plugin in the examples, I'll give this my 👍. Great work here, thanks again for sticking with it.

packages/example-react/package.json

packages/storybook-builder-vite/codegen-iframe-script.js

packages/storybook-builder-vite/codegen-importfn-script.js

tmeasday · 2021-11-17T03:35:16Z

It's so cool to see the new components get fetched only when you view their stories

In Vite I would assume they are only getting compiled when requested too, which I assume should help larger storybooks a lot!

IanVS · 2021-11-17T03:45:23Z

Compiling is really fast in vite, but one of the bottlenecks has been sending all the (sometimes hundreds of) files to the browser at startup. So for both reasons, this is a big step in the right direction!

joshwooding · 2021-11-17T12:16:50Z

It's so cool to see the new components get fetched only when you view their stories. This should help folks with large storybooks a ton!

What do you think about merging this and in our release notes mentioning that storyStoreV7 is not supported for svelte yet. It sounds like storybook changes will be needed for it to work correctly, so there's probably no need to hold up this PR. This whole project is experimental, so I'm 👍 for releasing and getting bug reports if folks hit trouble.

Sounds great. I've added comments and updated optimizeDeps :)

IanVS · 2021-11-17T13:27:59Z

Oh shoot, I've caused a merge conflict in the lockfile. Would you mind rebasing one more time?

joshwooding · 2021-11-17T18:35:47Z

@IanVS Done :)

joshwooding marked this pull request as draft October 26, 2021 00:45

joshwooding force-pushed the support-story-store-v7 branch 3 times, most recently from ef0c5f5 to e46de50 Compare October 26, 2021 10:26

tmeasday reviewed Oct 26, 2021

View reviewed changes

packages/storybook-builder-vite/codegen-modern-iframe-script.js Outdated Show resolved Hide resolved

packages/storybook-builder-vite/codegen-importfn-script.js Outdated Show resolved Hide resolved

joshwooding force-pushed the support-story-store-v7 branch 2 times, most recently from a22dfaf to fd06954 Compare October 26, 2021 14:49

tmeasday mentioned this pull request Oct 26, 2021

Allow getProjectAnnotations to be async for Vite builder. storybookjs/storybook#16483

Closed

joshwooding marked this pull request as ready for review October 26, 2021 23:58

joshwooding force-pushed the support-story-store-v7 branch from 9a28bd6 to 6ecb5bf Compare November 1, 2021 21:56

tmeasday approved these changes Nov 2, 2021

View reviewed changes

packages/storybook-builder-vite/codegen-importfn-script.js Outdated Show resolved Hide resolved

joshwooding force-pushed the support-story-store-v7 branch from b83c5ee to 71df6f8 Compare November 9, 2021 19:34

joshwooding commented Nov 11, 2021

View reviewed changes

packages/example-react/package.json Outdated Show resolved Hide resolved

joshwooding force-pushed the support-story-store-v7 branch from 71df6f8 to d146303 Compare November 15, 2021 22:45

joshwooding force-pushed the support-story-store-v7 branch from d146303 to 2ac8ece Compare November 15, 2021 22:50

joshwooding force-pushed the support-story-store-v7 branch 3 times, most recently from 74aa943 to 31746ed Compare November 16, 2021 02:04

IanVS reviewed Nov 16, 2021

View reviewed changes

packages/example-react/.storybook/main.js Show resolved Hide resolved

joshwooding force-pushed the support-story-store-v7 branch 3 times, most recently from c2efc06 to 426a654 Compare November 16, 2021 23:20

IanVS reviewed Nov 17, 2021

View reviewed changes

packages/example-react/package.json Show resolved Hide resolved

packages/storybook-builder-vite/codegen-iframe-script.js Show resolved Hide resolved

packages/storybook-builder-vite/codegen-importfn-script.js Show resolved Hide resolved

IanVS requested a review from eirslett November 17, 2021 03:03

joshwooding force-pushed the support-story-store-v7 branch from 426a654 to 01dbbd5 Compare November 17, 2021 12:10

IanVS approved these changes Nov 17, 2021

View reviewed changes

Support features.storyStoreV7

c648994

joshwooding force-pushed the support-story-store-v7 branch from 01dbbd5 to c648994 Compare November 17, 2021 18:24

IanVS merged commit 496312e into storybookjs:main Nov 18, 2021

joshwooding deleted the support-story-store-v7 branch November 19, 2021 17:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support `features.storyStoreV7` #126

Support `features.storyStoreV7` #126

joshwooding commented Oct 26, 2021 •

edited

Loading

joshwooding commented Oct 26, 2021

tmeasday commented Oct 26, 2021

tmeasday left a comment

joshwooding commented Oct 26, 2021 •

edited

Loading

joshwooding commented Oct 26, 2021

joshwooding commented Oct 26, 2021

IanVS commented Nov 1, 2021

joshwooding commented Nov 1, 2021

joshwooding commented Nov 3, 2021 •

edited

Loading

eirslett commented Nov 3, 2021

joshwooding commented Nov 3, 2021

joshwooding commented Nov 9, 2021

joshwooding commented Nov 10, 2021

IanVS commented Nov 10, 2021

joshwooding commented Nov 10, 2021 •

edited

Loading

joshwooding commented Nov 10, 2021 •

edited

Loading

tmeasday commented Nov 10, 2021

joshwooding commented Nov 15, 2021 •

edited

Loading

IanVS commented Nov 17, 2021 •

edited

Loading

IanVS commented Nov 17, 2021 •

edited

Loading

IanVS left a comment

tmeasday commented Nov 17, 2021

IanVS commented Nov 17, 2021

joshwooding commented Nov 17, 2021

IanVS commented Nov 17, 2021

joshwooding commented Nov 17, 2021

Support features.storyStoreV7 #126

Support features.storyStoreV7 #126

Conversation

joshwooding commented Oct 26, 2021 • edited Loading

joshwooding commented Oct 26, 2021

tmeasday commented Oct 26, 2021

tmeasday left a comment

Choose a reason for hiding this comment

joshwooding commented Oct 26, 2021 • edited Loading

joshwooding commented Oct 26, 2021

joshwooding commented Oct 26, 2021

IanVS commented Nov 1, 2021

joshwooding commented Nov 1, 2021

joshwooding commented Nov 3, 2021 • edited Loading

eirslett commented Nov 3, 2021

joshwooding commented Nov 3, 2021

joshwooding commented Nov 9, 2021

joshwooding commented Nov 10, 2021

IanVS commented Nov 10, 2021

joshwooding commented Nov 10, 2021 • edited Loading

joshwooding commented Nov 10, 2021 • edited Loading

tmeasday commented Nov 10, 2021

joshwooding commented Nov 15, 2021 • edited Loading

IanVS commented Nov 17, 2021 • edited Loading

IanVS commented Nov 17, 2021 • edited Loading

IanVS left a comment

Choose a reason for hiding this comment

tmeasday commented Nov 17, 2021

IanVS commented Nov 17, 2021

joshwooding commented Nov 17, 2021

IanVS commented Nov 17, 2021

joshwooding commented Nov 17, 2021

Support `features.storyStoreV7` #126

Support `features.storyStoreV7` #126

joshwooding commented Oct 26, 2021 •

edited

Loading

joshwooding commented Oct 26, 2021 •

edited

Loading

joshwooding commented Nov 3, 2021 •

edited

Loading

joshwooding commented Nov 10, 2021 •

edited

Loading

joshwooding commented Nov 10, 2021 •

edited

Loading

joshwooding commented Nov 15, 2021 •

edited

Loading

IanVS commented Nov 17, 2021 •

edited

Loading

IanVS commented Nov 17, 2021 •

edited

Loading