Merge pull request storybookjs#6190 from dwightjack/next

Allow forced renders in @storybook/html
EskelCz · Mar 25, 2019 · 2745e2d · 2745e2d
2 parents 8f95620 + 4b9ec19
commit 2745e2d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js
@@ -4,20 +4,22 @@ import { stripIndents } from 'common-tags';
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
+  parameters = {},
   storyFn,
   selectedKind,
   selectedStory,
   showMain,
   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
@@ -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
@@ -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
@@ -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, {