Don't change rootElement when received node is the same

[goncalo-matos]

Issue:
storybook-html's render is always rewriting the root element's content even when it's not a different component. This appeared to be a problem for dynamic class changes (as in changing a prop in a AngularJS component) as it is removing the dom node and adding it again which kills stuff like animations (since from the browser's perspective this is not a change in the class attribute and it is a new node).

Props to @svipatov for finding the issue and help developing this PR.

What I did

Checked the reference of the received DOM node, if it is the same then the node was already mutated and there is no need to rewrite the root element.

How to test

• Is this testable with Jest or Chromatic screenshots?
  It could be, but I did not find any test for the changed file (I can add it if it's wanted)
• Does this need a new example in the kitchen sink apps?
  No
• Does this need an update to the documentation?
  No

If your answer is yes to any of these, please make sure to include it in your PR.

[igor-dv]

Can you maybe share a usecase ? I can think of knobs changes, but for this, we have a forceRender parameter that can be helpful. Here is the example in @storybook/react

[codecov]

Codecov Report

Merging #4822 into next will decrease coverage by 0.05%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##             next    #4822      +/-   ##
==========================================
- Coverage   35.55%   35.49%   -0.06%     
==========================================
  Files         560      560              
  Lines        6827     6820       -7     
  Branches      915      914       -1     
==========================================
- Hits         2427     2421       -6     
  Misses       3920     3920              
+ Partials      480      479       -1

Impacted Files	Coverage Δ
app/html/src/client/preview/render.js	0% <0%> (ø)	⬆️
app/react/src/server/cra-config.js	16.66% <0%> (-11.54%)	⬇️
app/react/src/server/framework-preset-cra-rules.js
...pp/react/src/server/framework-preset-cra-styles.js	0% <0%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d507e2e...5a33ea0. Read the comment docs.

[svipatov]

Hey @igor-dv.

The case you refer is exactly in the case of using knobs.

When changing a knob, it causes the whole content of root to be replaced, so no transitions happen since there was no class "added".

I understand what you mean regarding forceRender.
But our problem is the inverse of what you've provided in the example regarding forceRender, since it looks like @storybook/html is "forcing" rendering everytime. This case is to help reuse the component, when a rerender is not needed.

Tell me if I've understood anything wrong and we'll try to elaborate more.

[igor-dv]

Maybe forceRender is a bit misleading name, but it means that the story was rerendered forcibly (and not navigated). In other words, when knobs are changed, this parameter will be true.

[goncalo-matos]

Yeah, from your explanation it seems forceRender will do the trick. We'll change it and update/reopen the PR