-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
render.js
58 lines (52 loc) · 1.69 KB
/
render.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import { document } from 'global';
import React from 'react';
import ReactDOM from 'react-dom';
import { stripIndents } from 'common-tags';
import isReactRenderable from './element_check';
const rootEl = document ? document.getElementById('root') : null;
function render(node, el) {
ReactDOM.render(
process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
el
);
}
export default function renderMain({
storyFn,
selectedKind,
selectedStory,
showMain,
showError,
forceRender,
}) {
const element = storyFn();
if (!element) {
showError({
title: `Expecting a React element from the story: "${selectedStory}" of "${selectedKind}".`,
description: stripIndents`
Did you forget to return the React element from the story?
Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
`,
});
return;
}
if (!isReactRenderable(element)) {
showError({
title: `Expecting a valid React element from the story: "${selectedStory}" of "${selectedKind}".`,
description: stripIndents`
Seems like you are not returning a correct React element from the story.
Could you double check that?
`,
});
return;
}
// We need to unmount the existing set of components in the DOM node.
// Otherwise, React may not recreate instances for every story run.
// This could leads to issues like below:
// https://github.com/storybooks/react-storybook/issues/81
// But forceRender means that it's the same story, so we want too keep the state in that case.
if (!forceRender) {
ReactDOM.unmountComponentAtNode(rootEl);
}
showMain();
render(element, rootEl);
}