GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Addon-docs: render into a different root to avoid conflicts

Browse Source
This commit is contained in:
Michael Shilman 2019-07-01 18:14:43 +08:00
parent c91d8d4281
commit 6eb702ff70
2 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
lib/core/src/client/preview/start.js
View File

@ -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 = () => <div style={{ fontFamily: 'sans-serif' }}>No docs found</div>;
const StoryDocs = (parameters && parameters.docs) || NoDocs;
ReactDOM.render(<StoryDocs context={renderContext} />, document.getElementById('root'));
ReactDOM.render(
<StoryDocs context={renderContext} />,
document.getElementById('docs-root')
);
break;
}
case 'story':

68
lib/core/src/server/templates/index.ejs
View File

@ -1,48 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><%= options.title || 'Storybook'%></title>
<head>
<meta charset="utf-8">
<title><%= options.title || 'Storybook'%></title>
<% if (files.favicon) { %>
<link rel="shortcut icon" href="<%= files.favicon%>" />
<% } %>
<% if (files.favicon) { %>
<link rel="shortcut icon" href="<%= files.favicon%>">
<% } %>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
files.css.forEach(file => { %>
<link href="<%= file %>" rel="stylesheet" />
<% }); %>
</head>
<body>
<% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
<% if (typeof headHtmlSnippet !== 'undefined') { %>
<%= headHtmlSnippet %>
<% } %>
<div id="root"></div>
<div id="docs-root"></div>
<% files.css.forEach(file => { %>
<link href="<%= file %>" rel="stylesheet">
<% }); %>
</head>
<body>
<% if (typeof bodyHtmlSnippet !== 'undefined') { %>
<%= bodyHtmlSnippet %>
<% } %>
<div id="root"></div>
<% if (options.window) { %>
<script>
<% for (var varName in options.window) { %>
window['<%=varName%>'] = <%= JSON.stringify(options.window[varName]) %>;
<% } %>
</script>
<% } %>
<% dlls.forEach(file => { %>
<script src="<%= file %>"></script>
<% }); %>
<% files.js.forEach(file => { %>
<script src="<%= file %>"></script>
<% }); %>
</body>
<% if (options.window) { %>
<script>
<% for (var varName in options.window) { %>
window['<%=varName%>'] = <%= JSON.stringify(options.window[varName]) %>;
<% } %>
</script>
<% } %> <% dlls.forEach(file => { %>
<script src="<%= file %>"></script>
<% }); %> <% files.js.forEach(file => { %>
<script src="<%= file %>"></script>
<% }); %>
</body>
</html>