-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
Preview.tsx
119 lines (99 loc) · 2.74 KB
/
Preview.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import PlaygroundError from 'rsg-components/PlaygroundError';
import ReactExample from 'rsg-components/ReactExample';
import Context from 'rsg-components/Context';
const improveErrorMessage = (message: string) =>
message.replace(
'Check the render method of `StateHolder`.',
'Check the code of your example in a Markdown file or in the editor below.'
);
interface PreviewProps {
code: string;
evalInContext(code: string): () => any;
}
interface PreviewState {
error: string | null;
}
export default class Preview extends Component<PreviewProps, PreviewState> {
public static propTypes = {
code: PropTypes.string.isRequired,
evalInContext: PropTypes.func.isRequired,
};
public static contextType = Context;
private mountNode: Element | null = null;
public state: PreviewState = {
error: null,
};
public componentDidMount() {
// Clear console after hot reload, do not clear on the first load
// to keep any warnings
if (this.context.codeRevision > 0) {
// eslint-disable-next-line no-console
console.clear();
}
this.executeCode();
}
public shouldComponentUpdate(nextProps: PreviewProps, nextState: PreviewState) {
return this.state.error !== nextState.error || this.props.code !== nextProps.code;
}
public componentDidUpdate(prevProps: PreviewProps) {
if (this.props.code !== prevProps.code) {
this.executeCode();
}
}
public componentWillUnmount() {
this.unmountPreview();
}
public unmountPreview() {
if (this.mountNode) {
ReactDOM.unmountComponentAtNode(this.mountNode);
}
}
private executeCode() {
this.setState({
error: null,
});
const { code } = this.props;
if (!code) {
return;
}
const wrappedComponent: React.FunctionComponentElement<any> = (
<ReactExample
code={code}
evalInContext={this.props.evalInContext}
onError={this.handleError}
compilerConfig={this.context.config.compilerConfig}
/>
);
window.requestAnimationFrame(() => {
// this.unmountPreview();
try {
ReactDOM.render(wrappedComponent, this.mountNode);
} catch (err) {
/* istanbul ignore next: it is near-impossible to trigger a sync error from ReactDOM.render */
if (err instanceof Error) {
/* istanbul ignore next */
this.handleError(err);
}
}
});
}
private handleError = (err: Error) => {
this.unmountPreview();
this.setState({
error: improveErrorMessage(err.toString()),
});
console.error(err); // eslint-disable-line no-console
};
public render() {
const { error } = this.state;
return (
<>
<div data-testid="mountNode" ref={(ref) => (this.mountNode = ref)} />
{error && <PlaygroundError message={error} />}
</>
);
}
}