[Bug]: the view source functionality doesn't re-render when arguments change

[marcomontalbano]

Describe the bug

When working with the html template, the view source functionality doesn't re-render when arguments change. It will render correctly only the first time, but when you set back the attribute, it doesn't update.

I'm posting a video to show better the issue that as mentioned below is directly reproducible on your official StackBlitz sandbox.

Registrazione.schermo.2023-05-19.alle.21.11.37.mov

To Reproduce

I'm able to reproduce this issue on any official html and lit sandboxes.

From next release:

• https://stackblitz.com/github/storybookjs/sandboxes/tree/next/html-webpack/default/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/next/html-vite/default-js/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/next/html-vite/default-ts/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/next/lit-vite/default-ts/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/next/lit-vite/default-js/after-storybook

From main release:

• https://stackblitz.com/github/storybookjs/sandboxes/tree/main/html-webpack/default/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/main/html-vite/default-js/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/main/html-vite/default-ts/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/main/lit-vite/default-ts/after-storybook
• https://stackblitz.com/github/storybookjs/sandboxes/tree/main/lit-vite/default-js/after-storybook

I'm able to reproduce it locally by running:

npx sb@next init --type html
npm run storybook 

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.15.0 - ~/Library/pnpm/node
    Yarn: 1.22.19 - ~/node_modules/.bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 112.0.2
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^7.0.12 => 7.0.12 
    @storybook/addon-interactions: ^7.0.12 => 7.0.12 
    @storybook/addon-links: ^7.0.12 => 7.0.12 
    @storybook/blocks: ^7.0.12 => 7.0.12 
    @storybook/html: ^7.0.12 => 7.0.12 
    @storybook/html-webpack5: ^7.0.12 => 7.0.12 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[chakAs3]

@marcomontalbano thank you for your detailed feedback, i could reproduce the bug easily, it is not related to a specific framework, got it on react and vue

[marcomontalbano]

@chakAs3 you're right! I didn't test them, but checking now I get the same issue with React here:
https://stackblitz.com/github/storybookjs/sandboxes/tree/next/react-webpack/18-ts/after-storybook

It's the first time I open the Storybook's source code, so I can probably go wrong, but I notice that the Source component is rendered as soon as the SourceContext is updated, but here that context will not update when the newSource is already present in the state. I hope this can help.

storybook/code/ui/blocks/src/blocks/SourceContainer.tsx

Lines 73 to 86 in e8c1164

	setSources((current) => {
	const newSources = {
	...current,
	[id]: {
	...current[id],
	[hash]: { code: source, format },
	},
	};
	if (!deepEqual(current, newSources)) {
	return newSources;
	}
	return current;
	});

[chakAs3]

hi @marcomontalbano i have already open a PR fixing this,Indeed that is the bug if the hash(arg) already in the current source the function return. always current, not only if the arg is boolean but also if you go back and forth between 2 states

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.28 containing PR #22807 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease