How do I use store.startConfiguring() and store.finishConfiguring() ?

[jeremytenjo]

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-immutable-outside-of-configuration

The docs are not very clear on how to use store.startConfiguring() and store.finishConfiguring() .

Where does store come from?

[shilman]

Those are implementation details, and you probably shouldn't be calling those functions yourself. @tmeasday maybe we should rename those with underscores to ... underscore this point?

[jeremytenjo]

Is there a recommended way to load stories dynamically ?

[joshje]

For those still wondering how to follow that guidance, I found (by reading source code) that the storyStore is available via window.__STORYBOOK_STORY_STORE__.

https://github.com/storybookjs/storybook/blob/master/lib/core/src/client/preview/start.ts#L89

const storyStore = window.__STORYBOOK_STORY_STORE__;

storyStore.startConfiguring();
...
storyStore.finishConfiguring();

[pyymenta]

It works for me man! Thank you so much! 🎉 🎉 🎉 🎉

[pyymenta]

In my case, I've made a wrapper that encapsulates the start/finish configuring logic into a wrapper:

const configWrapper = (storyLogicFn) => {
  window.__STORYBOOK_STORY_STORE__.startConfiguring();

  storyLogicFn();

  window.__STORYBOOK_STORY_STORE__.finishConfiguring();
};

Then, you can use outside config context:

functionThatReturnsAPromise().then(() => {
  configWrapper(() => {
    storiesOf('MyStorybookSection/Component', module)
      .add('some-usecase', () => (
        <MyComponent />
      ));
  });
})

And it works like a charm 😄 😄 😄