HMR clears the component state

[haskelcurry]

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/>'
  }))

2. In Storybook app, insert some text in the input field
3. Change something not related to this component
4. 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

[haskelcurry]

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

[shilman]

cc @kroeder @CodeByAlex @jonrimmer

[jonrimmer]

@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?

[haskelcurry]

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

[shilman]

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

[haskelcurry]

@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.

[haskelcurry]

@shilman Can we please reopen it?..

[haskelcurry]

Yes it's still a bug

[ndelangen]

@jonrimmer could you have a look at this repro?
#6308 (comment)

[danawoodman]

AFAIK, this seems to still be an issue, at least for me with a React application using the latest packages.

[deanrad]

Yes, CodeSandbox does this safely, but Storybook doesn't (as of 5.3.9)

[valentinpalkovic]

Please provide a reproduction for Storybook 7. I will close this. Feel free to reopen it, if it is still not working.