Core: Single story option in iframe view

[robhil]

We are trying to integrate the Storybook in our app - UXPin and allow our users to use components from Storybook in their design.
Generally, it's work fine but we noticed that the iframe view loads slower when there are more stories added to the storybook
e.g. please take into consideration this button: https://5ccbc373887ca40020446347-synmdrrwjj.chromatic.com/iframe.html?id=design-system-button--basic&viewMode=story

ConfigApi.configure takes about 900ms.

What I did

We figured out that we can load only one story when we want to show only one component.
We added a new param __singleStory and when it's true only one story is loaded.
As I know you have some plans to improve the loading time but this solution could be a quick win for us :)
Here you can see how it looks tested on official-storybook example
https://recordit.co/dkie0lFbJk

How to test

• Is this testable with Jest or Chromatic screenshots?
  no
• Does this need a new example in the kitchen sink apps?
  no
• Does this need an update to the documentation?
  no

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 69880ed. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[shilman]

Great stuff @robhil!! 😻

We're also thinking about some other use cases here #14843. I'll try to get some variant of this (this PR or a slightly more general one) into 6.3 to help your perf.

[shilman]

@robhil Some news:

1. we love this feature and i've promoted it back to a normal query param
2. we're starting another round of optimization work and will be considering this as a distinct use case to be optimized (bundle splitting etc.)

I'll merge this as soon as CI passes and release in the next alpha. Great work! 🎉

[shilman]

@tmeasday any ideas for a cleaner way to implement this?

[tmeasday]

I think this is a great idea and it is a pretty great implementation, thank you for the tests.

However I think I agree with what @shilman is hinting at here and that we should do this filtering in the store. It knows about the specifier already, so could it not just make addStory()/addKindMetadata() a no-op when the kind/storyId doesn't match? WDYT?

We have to evaluate (i.e require) all the imports anyway in this implementation so I would imagine that iterating through them and performing a no-op for each one wouldn't have a performance cost, but if that's not the case, we could reconsider.

I am planning on totally overhauling the story store sometime soon (probably not for 6.3 though), so I am not precious about how this is implemented, but putting it in store at least means it would also work for non-CSF stories too.

[tmeasday]

Great! Thank you