Addon-controls: Control update causes full page re-render

[eikooc]

Describe the bug When toggling a control value the whole html get's replaced which in turn causes no animations to occur when switching a value of a prop.

If only the value of the prop updated, the component would show the animation correctly.

Expected behavior Only props to update

Screenshots https://user-images.githubusercontent.com/1305015/107917053-9b22dd00-6f67-11eb-8aaa-538f07da3ced.mp4

Code snippets If applicable, add code samples to help explain your problem.

System Environment Info:

System: OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla) CPU: (24) x64 AMD Ryzen 9 3900 12-Core Processor Binaries: Node: 12.16.1 - /tmp/fnm-shell-8506636/bin/node Yarn: 1.22.10 - /tmp/fnm-shell-8506636/bin/yarn npm: 6.14.8 - /tmp/fnm-shell-8506636/bin/npm Browsers: Chrome: 88.0.4324.150 Firefox: 85.0.1 npmPackages: @storybook/addon-actions: ^6.2.0-alpha.28 => 6.2.0-alpha.28 @storybook/addon-essentials: ^6.2.0-alpha.28 => 6.2.0-alpha.28 @storybook/addon-links: ^6.2.0-alpha.28 => 6.2.0-alpha.28 @storybook/vue3: ^6.2.0-alpha.28 => 6.2.0-alpha.28

[shilman]

@tmeasday can you chime in here? i'm not sure how much of this is vue3-specific and how much of it is a general limitation of args. i can never remember where we landed on this for react... 🙈

[tmeasday]

For react I believe it happens if you have a JSX decorator, not if you don't. Something like that. I don't really know too much about the re-rendering behaviour of the vue implementation.

[phated]

@eikooc This was also mentioned in https://github.com/storybookjs/storybook/pull/13954#issuecomment-781554544 - the issue seems to be that a lot of Vue components expect to use stateful lifecycle hooks between re-renders, but each story gets a complete remount. I'm not sure how we would solve this on top of Storybook's current architecture.

[lee-chase]

Not a Vue 3 specific, in Vue 2 I tended to end up wrapping a component to test things like animation and v-model. I was tempted to try and write an addon to see if it could be automated but never found the time.

[tmeasday]

@phated the subtlety here is when you change story vs when you change arg value within a single story.

The "correct"[1] behaviour of SB is:

• Change story: remount the component, reinitializing state etc
• Change args (previously change knob values): simply changes inputs to the component, without re-mounting, thus maintaining state.

The slightly confusing mechanism to do that is the forceRerender argument, which when true means do not remount the component.

I'm not sure about the details of the vue 3 (or vue 2) implementation, but if it is possible to do so it would make sense to mirror the react behaviour here.

[1] There are various rationales for doing it in different ways and it is by no means obvious that this is the right choice, but it is what SB has done forever, at least in theory.

[thomasaull]

I'm currently facing the same issue with vue3, where I'm updating the args of a story when the value of an input updates. This means on every keystroke, the component gets a complete rerender and the input looses focus. In vue2 this does not happen. Is there anything I can do to solve this or help solving it?

[thomasaull]

I played around with it a bit and got it working with some prototype code, I might be able to put together a PR if I can make the time

[thomasaull]

PR is over here: https://github.com/storybookjs/storybook/pull/15168

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-rc.5 containing PR #15168 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[thomasaull]

@shilman This issue should be reopened, since the PR was reverted and there's needs for a better solution (proposal in https://github.com/storybookjs/storybook/issues/15345 might be one)

[hanzenok]

Facing issues with full re-render while working with args on v6.3.8 and Vue3. The PR was reverted, what's the status on this issue?

[shilman]

Have you tried upgrading to the latest prerelease:

npx sb@next upgrade --prerelease

Not sure whether it's fixed, but we've made a lot of changes to how this works there

[hanzenok]

@shilman did the upgrade, dont know if it resolved the issue with re-rendering because the upgrade broke controls and they are now missing. Will have to figure this out

info  @percy/storybook             ^4.0.2  →          ^4.1.0     
info  @storybook/addon-actions     ^6.3.8  →  ^6.4.0-beta.32     
info  @storybook/addon-essentials  ^6.3.8  →  ^6.4.0-beta.32     
info  @storybook/addon-links       ^6.3.8  →  ^6.4.0-beta.32     
info  @storybook/vue3              ^6.3.8  →  ^6.4.0-beta.32    

[shilman]

@hanzenok Do you have a reproduction you can share, even privately? I'd love to figure out what broke before we release

[hanzenok]

@shilman I've retried the update today and the controls, for some reason, are no longer broken

but the issue with the re-rendering stil persists in the new version, here is my repo with an example: https://github.com/hanzenok/sb-vue3-bug