Decorator unmounted when switching stories

Additional Context

I’m trying to create a storybook addon for my company. We’re looking to create a decorator which will hold a stateful object (our company’s sdk) via the react’s context api. After that we’ll have stories which will make use of this context to load some data.

This addon is part of our web solution, and we work in a yarn workspaces environment with boilerplates made with tsdx. Don’t worry I’ve provided a clonable repro repo 😃

Describe the bug

The decorator works fine when clicking on the toolbar’s button, we can see the color changing from green to red. The problem is that the decorator gets unmounted/remounted when you visit another story. I’ve added console.log statement to help debug.

To Reproduce

1. git clone https://github.com/y-nk/storybook-decorator-unmounted-repro
2. cd storybook-decorator-unmounted-repro
3. yarn
4. cd addon
5. yarn build
6. cd ../demo-app
7. yarn storybook (or yarn build-storybook and npx http-server storybook-static)

or

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 16.4.0 - ~/.nvm/versions/node/v16.4.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 7.18.1 - ~/.nvm/versions/node/v16.4.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 88.0.1
    Safari: 14.1.1

---

EDIT: I forgot to mention but you can tinker around by running yarn watch in the addon side, and yarn storybook in the demo-app side.

[tmeasday]

@y-nk I guess so, but I do wonder if that would be confusing in other situations…

[tmeasday]

Without thinking too deeply about it yet, the problem there is the set of decorators differs between different stories, so the DecoratorStack “component” will be different as you change stories, and so React will see <DecoratorStack> as a new component that it needs to remount (along with its rendered subcomponents) each time you change story.

It would be nice to be able to produce something like:

<DecoratorOne>
  <DecoratorTwo>
     <Story />
  </DecoratorTwo>
</DecoratorOne>

But the issue is that the decorator API allows DecoratorOne to pass updated context to DecoratorTwo, so it need to take it unrendered as an prop, rather than as a child.