[knobs] Knobs don't appear on refresh when a decorator includes a suspense boundary

[andyrichardson]

Describe the bug

When hittin

Note: May also apply to stories with suspense boundaries. Not tested.

To Reproduce

Consider the following application code

const Child = lazy(() => import("./Child"));

export const SomeComponent = ({ children }) => {
  return (
    <Suspense fallback={null}>
      <Child>
        {children}
      </Child>
    </Suspense>
  )
};

Consider the following decorator

const lazyDecorator = (Story, context) => {
  const someknob = Select("Something", ["A", "B"], "A");

  return (
    <SomeComponent>
      <Story {...context} />
    </SomeComponent>
  )
};

addDecorator(lazyDecorator);

Expected behavior

A decorator with a suspense boundary has no impact on how knobs work.

Screenshots

System

6.1.0-rc.3

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls documentation
• Migration instructions

Please upgrade and try them out today!

[andyrichardson]

Hey @shilman, thanks for the suggestion!

Unfortunately controls can't be used because they can't be declared by decorators (#12836, storybookjs/storybook#11984)

[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!

[shilman]

@andyrichardson sorry for the slow reply. what's the use case for adding controls via decorator?

[andyrichardson]

what's the use case for adding controls via decorator?

@shilman no worries!

Any application-wide context (e.g. language, region)

[shilman]

Have you looked at toolbars/globals for that?

https://storybook.js.org/docs/react/essentials/toolbars-and-globals

It's the controls/args analog for global variables. We'll probably be building more on top of that in the future (e.g. a way to show global controls side by side with story controls in the addon panel instead of only on the toolbar). But data-wise, it's the recommended way forward for this kind of stuff. And if it doesn't quite fit your use case, I'd love to discuss why and figure out how to make it work.