HTML: support knobs for both cached and uncached nodes (#6783)

HTML: support knobs for both cached and uncached nodes
storybookjs · May 18, 2019 · cb27dc1 · cb27dc1 · vercel · May 18, 2019
2 parents b826fdd + 8ee658c
commit cb27dc1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js
@@ -12,14 +12,14 @@ export default function renderMain({
   showError,
   forceRender,
 }) {
-  const { html = {} } = parameters;
   const element = storyFn();
 
   showMain();
   if (typeof element === 'string') {
     rootElement.innerHTML = element;
   } else if (element instanceof Node) {
-    if (html.preventForcedRender === true && forceRender === true) {
+    // Don't re-mount the element if it didn't change and neither did the story
+    if (rootElement.firstChild === element && forceRender === true) {
       return;
     }
 

diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js
@@ -11,9 +11,6 @@ addParameters({
       restoreScroll: true,
     },
   },
-  html: {
-    preventForcedRender: false, // default
-  },
   options: {
     hierarchyRootSeparator: /\|/,
   },

diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -47,6 +47,14 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
+exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
 exports[`Storyshots Addons|Knobs DOM 1`] = `
 <p>
   John Doe

diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
+import { document } from 'global';
 
 import {
   array,
@@ -13,6 +14,7 @@ import {
   number,
 } from '@storybook/addon-knobs';
 
+const cachedContainer = document.createElement('p');
 storiesOf('Addons|Knobs', module)
   .addDecorator(withKnobs)
   .add('Simple', () => {
@@ -24,11 +26,18 @@ storiesOf('Addons|Knobs', module)
   })
   .add('DOM', () => {
     const name = text('Name', 'John Doe');
-    // eslint-disable-next-line
     const container = document.createElement('p');
     container.textContent = name;
     return container;
   })
+  .add('CSS transitions', () => {
+    const name = text('Name', 'John Doe');
+    const textColor = color('Text color', 'orangered');
+    cachedContainer.textContent = name;
+    cachedContainer.style.transition = 'color 0.5s ease-out';
+    cachedContainer.style.color = textColor;
+    return cachedContainer;
+  })
   .add('All knobs', () => {
     const name = text('Name', 'Jane');
     const stock = number('Stock', 20, {