Storybook: HMR clears the component state

Created on 27 Mar 2019 · 11Comments · Source: storybookjs/storybook

I use Angular Storybook. When I change something slightly (i.e. the component's SCSS), the input fields of my simple component get cleared, and the whole state is lost.

To Reproduce
Steps to reproduce the behavior:
1.

storiesOf('Input', module)
  .add('with text', () => ({
    template: '<input/>'
  }))

In Storybook app, insert some text in the input field
Change something not related to this component
The text gets cleared. The config is among the [HMR] updates:

[HMR]  - ./.storybook/config.js

Expected behavior
The state of inputs should persist. That's what the HMR for, not just for live reloading.

System:

OS: Arch Linux
Browser: chrome
Framework: angular
Version: 5.0.5

angular babel / webpack question / support todo

Source

mtuzinskiy

👍9

All 11 comments

Any thoughts or comments on this? Does it work for anybody else? Does it behave in same way in React version?

mtuzinskiy on 12 Apr 2019

cc @kroeder @CodeByAlex @jonrimmer

shilman on 12 Apr 2019

@mtuzinskiy This may have been fixed by #6094. Can you test using @storybook/angular version 5.1.0-alpha.25 and see if it still happens?

jonrimmer on 12 Apr 2019

@jonrimmer That would be great! I tried to update the @storybook/angular in basic example to 5.1.0-alpha.25 and got this:

Provider.renderPreview() is not implemented!

mtuzinskiy on 12 Apr 2019

@mtuzinskiy can you try clearing your node_modules and possibly your yarn.lock?

shilman on 13 Apr 2019

@shilman Yes that was it. But unfortunately it didn't solve the problem. I created the sample project, which uses 5.1.0-alpha.25:
https://github.com/mtuzinskiy/storybook-hmr-temp
To reproduce, please clone it, run yarn install and then yarn storybook.
It'll render the simplistic Input component.
Enter anything in the input, and then change the margin: value in input.component.scss. You'll see that the input gets cleared.