Skip to content

[Bug]: useParameter API is not working on initial load. #28592

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
hwookim opened this issue Jul 14, 2024 · 11 comments · Fixed by #31579
Closed

[Bug]: useParameter API is not working on initial load. #28592

hwookim opened this issue Jul 14, 2024 · 11 comments · Fixed by #31579
Assignees
@valentinpalkovic
Labels
bug core
Milestone
9.0 GA

Comments

@hwookim
Copy link

hwookim commented Jul 14, 2024 •
edited
Loading

Describe the bug

The useParameter API is not working on initial load.

I'm implementing and managing a storybook-addon-cookie.
My addon uses useParameter to read the cookie values entered by the user inside the story and display them in the panel.

However, since migrating to storybook version 8, when I access the parameter via useParameter, I get an empty value on initial load.
When I use console.log to preview and Panel, it appears to be getting an empty value until preview is called.

Is there any way to ensure that preview.js is called before manager.js?

// Panel
export const PanelContent: React.FC = () => {
  const { path } = useStorybookState();
  const defaultCookie = useParameter<Cookie>(PARAM_KEY, {}); // TODO: Doesn't work on initial load

  const [story, setStory] = useState<string>();
  const [value, setValue] = useState<Cookie>();
  const [globals, updateGlobals] = useGlobals();

  const initCookie = () => {
    setStory(path);
    setValue(defaultCookie);
    clearCookies();
    setCookies(defaultCookie, encoding);
  };

  useEffect(() => {
    console.log('defaultCookie', defaultCookie);
    if (story !== path) {
      initCookie();
    }
  }, [defaultCookie, path, story]);
 //...
}
// preview
export const cookieDecorator = (
  storyFn: StoryFunction<Renderer>,
  { parameters }: DecoratorContext,
) => {
  const [flag, setFlag] = useState<boolean>(true);

  if (flag) {
    setFlag(false);
    if (!parameters) return storyFn();

    if (parameters[PARAM_PRESERVE_KEY] !== true) {
      clearCookies();
    }

    if (parameters[PARAM_KEY]) {
      console.log(parameters[PARAM_KEY]);
      setCookies(parameters.cookie, parameters.cookieEncoding);
    }
  }

  return storyFn();
};

스크린샷 2024-07-14 오후 5 41 57

Reproduction link

https://github.com/hwookim/storybook-addon-cookie

Reproduction steps

No response

System

The package pretty much follows the settings in addon-kit.

Additional context

No response
@valentinpalkovic
Copy link
Contributor

@ndelangen Any ideas?

@storybookjs storybookjs deleted a comment from greptile-apps bot Jul 16, 2024
@ndelangen
Copy link
Member

Is there any way to ensure that preview.js is called before manager.js?

Unfortunately, no.

This is due to the fact that parameters are dynamic, and stories are loaded async; the manager can only know about the parameters on a story, after it's been loaded.

@hwookim
Copy link
Author

hwookim commented Jul 17, 2024

@ndelangen Is there any API to know if a parameter has been loaded?
It's hard to know by the presence or absence of a value, since the user can send an empty value.

@ndelangen
Copy link
Member

No, there's currently no way to distinguish between those scenarios.

@t-hamano t-hamano mentioned this issue May 15, 2025
Draft
@Sidnioulz
Copy link
Member

@valentinpalkovic this issue is what we were discussing. #22119 also relates to the same topic so this is an 'old' bug.

Sirrine-Jonathan/storybook-source-link#21 can be used as a repro repository as it is visible: the first time you load a story in that SB instance, two addons disappear from the toolbar and the source-link addon fails to load its data.

You discussed a potential fix within useParameter that would ensure parameters get reloaded whenever a new story is prepared, therefore circumventing the race condition that @tmeasday discussed in his own issue. The starting point for the fix was:

useChannel(
    {
      [STORY_PREPARED]: () => {
        setStory(api.getCurrentStoryData());
      },
    },
    []
  );

@tmeasday
Copy link
Member

Does it not eventually work when the parameters come over the wire? In my original issue it was just about a flash of "unparameterized" content, not the addon getting stuck without parameters.

@Sidnioulz
Copy link
Member

Does it not eventually work when the parameters come over the wire? In my original issue it was just about a flash of "unparameterized" content, not the addon getting stuck without parameters.

Yes and no. The add-ons don't get reloaded with all the parameters when the story loads. They're missing parameters until the second time the story is displayed (as, by then, the manager has loaded it).

@tmeasday
Copy link
Member

tmeasday commented May 20, 2025 •
edited
Loading

Huh, I would have guessed useParameters would trigger a re-render when the parameters change (load), so there could be a (another) bug there.

@Sidnioulz
Copy link
Member

Just want to confirm that this is a regression (either SB 8 or SB 9). If I browse SB on https://github.com/Sidnioulz/storybook-source-link/tree/ee910f644134d43edc03963ab0d15b9d21133002 (which is version 7) and https://github.com/Sidnioulz/storybook-source-link/tree/main (version 9), I can see on v7 that the toolbar flickers the first time a story is rendered (but does not flicker in subsequent renders), demonstrating that it reloads once parameters become available. On the SB 9 branch, the toolbar no longer updates.

@Sidnioulz Sidnioulz mentioned this issue May 25, 2025
Open
@valentinpalkovic valentinpalkovic added this to the 9.0 GA milestone May 26, 2025
@valentinpalkovic valentinpalkovic self-assigned this May 26, 2025
@valentinpalkovic valentinpalkovic mentioned this issue May 27, 2025
Merged
8 tasks
@valentinpalkovic
Copy link
Contributor

Hi @Sidnioulz

Could you please try out this canary and let me know whether it fixes the reactivity issue?
0.0.0-pr-31579-sha-cf05dec5

@Sidnioulz
Copy link
Member

@valentinpalkovic congrats, it's working! 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@valentinpalkovic valentinpalkovic

Labels
bug core
Projects
None yet
Milestone
9.0 GA
Development

Successfully merging a pull request may close this issue.

Manager: Add reactivity to useParameter storybookjs/storybook
5 participants
@tmeasday @ndelangen @Sidnioulz @valentinpalkovic @hwookim