Using preview-url to view standalone Storybook - storysource addon doesn't work

[basher]

Describe the bug
I have a working standalone Storybook HTML instance, using --preview-url option. I need to use standalone because I use Parcel for bundling, not Webpack.

However, I cannot get storysource addon to load source code for the standalone story.

To Reproduce
I have 2 minimal repos setup to demo the problem:

• npm run storybook from the standalone repo.
• npm run storybook:preview from the preview repo, and select Y to accept the new localhost port number.
• The standalone repo's story loads correctly in the Storybook UI, but the source code never loads:

• However, if I run npm run storybook from the preview repo to view its own demo story, then storysource works:

I imagine the issue with using a --preview-url is to do with mapping the correct dirname as specified in the storysource docs, but I can't figure out how to point to the story file in standalone repo???

Expected behavior
Story source from standalone repo is displayed.

Screenshots
See above.

Code snippets
See repo links above.

System:
System:
OS: Windows 10 10.0.18362
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @
2.60GHz
Binaries:
Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[basher]

I'm still keen to resolve this.

Might it end up being a non-issue when Storybook 6 is released, with support for @storybook/server, meaning I don't have to use a standalone Storybook setup?

[shilman]

Yeah, @storybook/server builds on the standalone stuff and supercedes it. We should probably get rid of standalone, right @jonspalmer @tmeasday ?

[basher]

Thanks Michael.

Any ideas how far off you are from releasing @storybook/server?

[shilman]

Shooting for the 6.0 release in mid-May: #9311

[tmeasday]

@shilman I'm not sure @storybook/server removes the need for standalone -- it is a different layer of separation -- in @storybook/server the JS code for the preview is still served by our process, but it (inside the preview iframe) communicates with an external service.

In standalone the entire preview iframe is served by that external service.

You could also combine the two and have the external service serve JS that the communicates with itself, although I don't think that's currently what @storybook/server supports.

In any case I think the --preview-url and embedding @storybook/client-api etal in a non-webpack build still makes sense for e.g. the parcel use case.

---

As for what is going on here, I guess storysource is reliant on a webpack loader, right? You would have to replicate that behaviour in parcel somehow. I'm not too sure exactly what that means but perhaps @shilman could give a brief rundown of what the loader does.

[shilman]

@jonspalmer can you confirm @tmeasday 's comment above?

As for storysource, it uses source-loader which annotates each story file with its own source code as story parameters (effectively) that can be used in the addon. If the source-loader webpack loader is not run, or those parameters are not written by hand (and historically, they have not been designed to be written by hand -- that has changed a bit in 6.0), then it won't work.

[basher]

In hindsight, the storysource addon is probably not the correct addon for me, in terms of achieving some parity of behaviour compared to my previous experience of using the old Storybook API and Create React App.

I want to be able to view component source code (including configurable props), like the old info addon used to do.

• Therefore, I guess I need to get storybook docs working with Parcel instead.
• Unfortunately, docs don't work with Parcel V1.2, so I'm waiting for V2 to be officially released!

Thanks for your assistance with this bug... maybe it will help someone else, or will help you guys figure out a way forward to support people who absolutely want to use Storybook, but not with a Webpack bundler.

[jonspalmer]

@shilman Yup @tmeasday's comment is right that they're separate use cases. My sense is that it's pretty hard to get the preview-url approach working in non-trivial cases and we don't seem to have strong examples of it being used in anger. Yes you can bundle @storybook/client-api in your on preview Iframe but so much of the other bells and whistles are coupled more strongly (or dependent on webpack anyway)

There isn't anything stopping @storybook/server responses from including script tags and my gut says we could use that mechanism for providing interactions depending on the use case.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!