-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
render.tsx
53 lines (47 loc) · 1.53 KB
/
render.tsx
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
import * as preact from 'preact';
import { document } from 'global';
import dedent from 'ts-dedent';
import { RenderContext, StoryFnPreactReturnType } from './types';
const rootElement = document ? document.getElementById('root') : null;
let renderedStory: Element;
function preactRender(story: StoryFnPreactReturnType, targetDOMNode: HTMLElement): void {
if (preact.Fragment) {
// Preact 10 only:
preact.render(story, targetDOMNode);
} else {
renderedStory = (preact.render(story, targetDOMNode, renderedStory) as unknown) as Element;
}
}
const StoryHarness: preact.FunctionalComponent<{
name: string;
kind: string;
showError: RenderContext['showError'];
storyFn: () => any;
}> = ({ showError, name, kind, storyFn }) => {
const content = preact.h(storyFn as any, null);
if (!content) {
showError({
title: `Expecting a Preact element from the story: "${name}" of "${kind}".`,
description: dedent`
Did you forget to return the Preact element from the story?
Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
`,
});
return null;
}
return content;
};
export default function renderMain({
storyFn,
kind,
name,
showError,
forceRender,
targetDOMNode = rootElement,
}: RenderContext) {
// But forceRender means that it's the same story, so we want to keep the state in that case.
if (!forceRender) {
preactRender(null, targetDOMNode);
}
preactRender(preact.h(StoryHarness, { name, kind, showError, storyFn }), targetDOMNode);
}