From 6eb702ff7041b624bdee3edbf7cac3c409845ba8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 1 Jul 2019 18:14:43 +0800 Subject: [PATCH] Addon-docs: render into a different root to avoid conflicts --- lib/core/src/client/preview/start.js | 26 +++++++++- lib/core/src/server/templates/index.ejs | 68 ++++++++++--------------- 2 files changed, 53 insertions(+), 41 deletions(-) diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index 7c5fd41d7f0..2ba30f35876 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -190,11 +190,35 @@ export default function start(render, { decorateStory } = {}) { addons.getChannel().emit(Events.STORY_CHANGED, id); } + // Docs view renders into a different root ID to avoid conflicts + // with the user's view layer. Therefore we need to clean up whenever + // we transition between view modes + if (viewMode !== previousViewMode) { + switch (viewMode) { + case 'docs': { + document.getElementById('root').setAttribute('hidden', true); + document.getElementById('docs-root').removeAttribute('hidden'); + break; + } + case 'story': + default: { + if (previousViewMode === 'docs') { + document.getElementById('docs-root').setAttribute('hidden', true); + ReactDOM.unmountComponentAtNode(document.getElementById('docs-root')); + document.getElementById('root').removeAttribute('hidden'); + } + } + } + } + // Given a cleaned up state, render the appropriate view mode switch (viewMode) { case 'docs': { const NoDocs = () =>
No docs found
; const StoryDocs = (parameters && parameters.docs) || NoDocs; - ReactDOM.render(, document.getElementById('root')); + ReactDOM.render( + , + document.getElementById('docs-root') + ); break; } case 'story': diff --git a/lib/core/src/server/templates/index.ejs b/lib/core/src/server/templates/index.ejs index 514b7be4e6e..5731c9b020b 100644 --- a/lib/core/src/server/templates/index.ejs +++ b/lib/core/src/server/templates/index.ejs @@ -1,48 +1,36 @@ + + + <%= options.title || 'Storybook'%> - - - <%= options.title || 'Storybook'%> + <% if (files.favicon) { %> + + <% } %> - <% if (files.favicon) { %> - - <% } %> + - + <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <% + files.css.forEach(file => { %> + + <% }); %> + + + <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %> - <% if (typeof headHtmlSnippet !== 'undefined') { %> - <%= headHtmlSnippet %> - <% } %> +
+
- <% files.css.forEach(file => { %> - - <% }); %> - - - - -<% if (typeof bodyHtmlSnippet !== 'undefined') { %> - <%= bodyHtmlSnippet %> -<% } %> - -
- -<% if (options.window) { %> - -<% } %> - -<% dlls.forEach(file => { %> - -<% }); %> - -<% files.js.forEach(file => { %> - -<% }); %> - - + <% if (options.window) { %> + + <% } %> <% dlls.forEach(file => { %> + + <% }); %> <% files.js.forEach(file => { %> + + <% }); %> +