From 4b9ec199eaa5f415ca927e9b565d0c7cb63e10c0 Mon Sep 17 00:00:00 2001
From: Marco Solazzi <marco.solazzi@gmail.com>
Date: Wed, 20 Mar 2019 12:57:59 +0900
Subject: [PATCH] control forced re-renders with a parameter

---
 app/html/src/client/preview/render.js                      | 4 +++-
 examples/html-kitchen-sink/.storybook/config.js            | 3 +++
 .../stories/__snapshots__/addon-knobs.stories.storyshot    | 6 ++++++
 examples/html-kitchen-sink/stories/addon-knobs.stories.js  | 7 +++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js
index a3898b72346f..a9d900f0b5fc 100644
--- a/app/html/src/client/preview/render.js
+++ b/app/html/src/client/preview/render.js
@@ -4,6 +4,7 @@ import { stripIndents } from 'common-tags';
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
+  parameters = {},
   storyFn,
   selectedKind,
   selectedStory,
@@ -11,13 +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 (forceRender === true) {
+    if (html.preventForcedRender === true && forceRender === true) {
       return;
     }
 
diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js
index 01cf1eef5fd5..70b1c92783a9 100644
--- a/examples/html-kitchen-sink/.storybook/config.js
+++ b/examples/html-kitchen-sink/.storybook/config.js
@@ -1,6 +1,9 @@
 import { configure, addParameters } from '@storybook/html';
 
 addParameters({
+  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
index 1517b1b70843..7d7dc3f6f0a7 100644
--- 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,12 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
 exports[`Storyshots Addons|Knobs Simple 1`] = `
 <div>
   I am John Doe and I'm 44 years old.
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index 1a97b85a369d..372e509295b2 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -22,6 +22,13 @@ storiesOf('Addons|Knobs', module)
 
     return `<div>${content}</div>`;
   })
+  .add('DOM', () => {
+    const name = text('Name', 'John Doe');
+    // eslint-disable-next-line
+    const container = document.createElement('p');
+    container.textContent = name;
+    return container;
+  })
   .add('All knobs', () => {
     const name = text('Name', 'Jane');
     const stock = number('Stock', 20, {