Skip to content

Commit 8ae4f11

Browse files
Daniel15Daniel15
committed
Add missing files from old React site. Closes #143 
1 parent 11c2aac commit 8ae4f11

File tree

4 files changed

+715
-3
lines changed

4 files changed

+715
-3
lines changed

Diff for: ‎site/htmltojsx.htm

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<meta property="og:type" content="website" />
1010
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png" />
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.css" />
12-
<link rel="stylesheet" href="https://facebook.github.io/react/css/react.css" />
13-
<link rel="stylesheet" href="https://facebook.github.io/react/css/syntax.css" />
12+
<link rel="stylesheet" href="react.css" />
13+
<link rel="stylesheet" href="syntax.css" />
1414
</head>
1515
<body>
1616
<div class="jsxCompiler">
@@ -22,7 +22,7 @@ <h1>HTML to JSX Compiler</h1>
2222
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
2323
<script src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.0/create-react-class.min.js"></script>
2424
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
25-
<script src="https://facebook.github.io/react/js/live_editor.js"></script>
25+
<script src="live_editor.js"></script>
2626
<script src="htmltojsx.min.js"></script>
2727
<script src="htmltojsx-component.js"></script>
2828
</div>

Diff for: ‎site/live_editor.js

+302
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
'use strict';
2+
// This file was copied from the old React site. Please clean me up :)
3+
4+
var _jsxFileName = '_js/live_editor.js';
5+
var IS_MOBILE = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i);
6+
7+
var CodeMirrorEditor = React.createClass({
8+
displayName: 'CodeMirrorEditor',
9+
10+
propTypes: {
11+
lineNumbers: React.PropTypes.bool,
12+
onChange: React.PropTypes.func
13+
},
14+
getDefaultProps: function () {
15+
return {
16+
lineNumbers: false
17+
};
18+
},
19+
componentDidMount: function () {
20+
if (IS_MOBILE) return;
21+
22+
this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
23+
mode: 'jsx',
24+
lineNumbers: this.props.lineNumbers,
25+
lineWrapping: true,
26+
smartIndent: false, // javascript mode does bad things with jsx indents
27+
matchBrackets: true,
28+
theme: 'solarized-light',
29+
readOnly: this.props.readOnly
30+
});
31+
this.editor.on('change', this.handleChange);
32+
},
33+
34+
componentDidUpdate: function () {
35+
if (this.props.readOnly) {
36+
this.editor.setValue(this.props.codeText);
37+
}
38+
},
39+
40+
handleChange: function () {
41+
if (!this.props.readOnly) {
42+
this.props.onChange && this.props.onChange(this.editor.getValue());
43+
}
44+
},
45+
46+
render: function () {
47+
// wrap in a div to fully contain CodeMirror
48+
var editor;
49+
50+
if (IS_MOBILE) {
51+
editor = React.createElement(
52+
'pre',
53+
{ style: { overflow: 'scroll' }, __source: {
54+
fileName: _jsxFileName,
55+
lineNumber: 53
56+
}
57+
},
58+
this.props.codeText
59+
);
60+
} else {
61+
editor = React.createElement('textarea', { ref: 'editor', defaultValue: this.props.codeText, __source: {
62+
fileName: _jsxFileName,
63+
lineNumber: 55
64+
}
65+
});
66+
}
67+
68+
return React.createElement(
69+
'div',
70+
{ style: this.props.style, className: this.props.className, __source: {
71+
fileName: _jsxFileName,
72+
lineNumber: 59
73+
}
74+
},
75+
editor
76+
);
77+
}
78+
});
79+
80+
var selfCleaningTimeout = {
81+
componentDidUpdate: function () {
82+
clearTimeout(this.timeoutID);
83+
},
84+
85+
setTimeout: function () {
86+
clearTimeout(this.timeoutID);
87+
this.timeoutID = setTimeout.apply(null, arguments);
88+
}
89+
};
90+
91+
var ReactPlayground = React.createClass({
92+
displayName: 'ReactPlayground',
93+
94+
mixins: [selfCleaningTimeout],
95+
96+
MODES: { JSX: 'JSX', JS: 'JS' }, //keyMirror({JSX: true, JS: true}),
97+
98+
propTypes: {
99+
codeText: React.PropTypes.string.isRequired,
100+
transformer: React.PropTypes.func,
101+
renderCode: React.PropTypes.bool,
102+
showCompiledJSTab: React.PropTypes.bool,
103+
showLineNumbers: React.PropTypes.bool,
104+
editorTabTitle: React.PropTypes.string
105+
},
106+
107+
getDefaultProps: function () {
108+
return {
109+
transformer: function (code, options) {
110+
var presets = ['react'];
111+
if (!options || !options.skipES2015Transform) {
112+
presets.push('es2015');
113+
}
114+
return Babel.transform(code, {
115+
presets: presets
116+
}).code;
117+
},
118+
editorTabTitle: 'Live JSX Editor',
119+
showCompiledJSTab: true,
120+
showLineNumbers: false
121+
};
122+
},
123+
124+
getInitialState: function () {
125+
return {
126+
mode: this.MODES.JSX,
127+
code: this.props.codeText
128+
};
129+
},
130+
131+
handleCodeChange: function (value) {
132+
this.setState({ code: value });
133+
this.executeCode();
134+
},
135+
136+
handleCodeModeSwitch: function (mode) {
137+
this.setState({ mode: mode });
138+
},
139+
140+
compileCode: function (options) {
141+
return this.props.transformer(this.state.code, options);
142+
},
143+
144+
render: function () {
145+
var isJS = this.state.mode === this.MODES.JS;
146+
var compiledCode = '';
147+
try {
148+
compiledCode = this.compileCode({ skipES2015Transform: true });
149+
} catch (err) {}
150+
151+
var JSContent = React.createElement(CodeMirrorEditor, {
152+
key: 'js',
153+
className: 'playgroundStage CodeMirror-readonly',
154+
onChange: this.handleCodeChange,
155+
codeText: compiledCode,
156+
readOnly: true,
157+
lineNumbers: this.props.showLineNumbers,
158+
__source: {
159+
fileName: _jsxFileName,
160+
lineNumber: 136
161+
}
162+
});
163+
164+
var JSXContent = React.createElement(CodeMirrorEditor, {
165+
key: 'jsx',
166+
onChange: this.handleCodeChange,
167+
className: 'playgroundStage',
168+
codeText: this.state.code,
169+
lineNumbers: this.props.showLineNumbers,
170+
__source: {
171+
fileName: _jsxFileName,
172+
lineNumber: 146
173+
}
174+
});
175+
176+
var JSXTabClassName = 'playground-tab' + (isJS ? '' : ' playground-tab-active');
177+
var JSTabClassName = 'playground-tab' + (isJS ? ' playground-tab-active' : '');
178+
179+
var JSTab = React.createElement(
180+
'div',
181+
{
182+
className: JSTabClassName,
183+
onClick: this.handleCodeModeSwitch.bind(this, this.MODES.JS), __source: {
184+
fileName: _jsxFileName,
185+
lineNumber: 160
186+
}
187+
},
188+
'Compiled JS'
189+
);
190+
191+
var JSXTab = React.createElement(
192+
'div',
193+
{
194+
className: JSXTabClassName,
195+
onClick: this.handleCodeModeSwitch.bind(this, this.MODES.JSX), __source: {
196+
fileName: _jsxFileName,
197+
lineNumber: 167
198+
}
199+
},
200+
this.props.editorTabTitle
201+
);
202+
203+
return React.createElement(
204+
'div',
205+
{ className: 'playground', __source: {
206+
fileName: _jsxFileName,
207+
lineNumber: 174
208+
}
209+
},
210+
React.createElement(
211+
'div',
212+
{
213+
__source: {
214+
fileName: _jsxFileName,
215+
lineNumber: 175
216+
}
217+
},
218+
JSXTab,
219+
this.props.showCompiledJSTab && JSTab
220+
),
221+
React.createElement(
222+
'div',
223+
{ className: 'playgroundCode', __source: {
224+
fileName: _jsxFileName,
225+
lineNumber: 179
226+
}
227+
},
228+
isJS ? JSContent : JSXContent
229+
),
230+
React.createElement(
231+
'div',
232+
{ className: 'playgroundPreview', __source: {
233+
fileName: _jsxFileName,
234+
lineNumber: 182
235+
}
236+
},
237+
React.createElement('div', { ref: 'mount', __source: {
238+
fileName: _jsxFileName,
239+
lineNumber: 183
240+
}
241+
})
242+
)
243+
);
244+
},
245+
246+
componentDidMount: function () {
247+
this.executeCode();
248+
},
249+
250+
componentDidUpdate: function (prevProps, prevState) {
251+
// execute code only when the state's not being updated by switching tab
252+
// this avoids re-displaying the error, which comes after a certain delay
253+
if (this.props.transformer !== prevProps.transformer || this.state.code !== prevState.code) {
254+
this.executeCode();
255+
}
256+
},
257+
258+
executeCode: function () {
259+
var mountNode = ReactDOM.findDOMNode(this.refs.mount);
260+
261+
try {
262+
ReactDOM.unmountComponentAtNode(mountNode);
263+
} catch (e) {}
264+
265+
try {
266+
var compiledCode;
267+
if (this.props.renderCode) {
268+
compiledCode = this.compileCode({ skipES2015Transform: true });
269+
ReactDOM.render(React.createElement(CodeMirrorEditor, { codeText: compiledCode, readOnly: true, __source: {
270+
fileName: _jsxFileName,
271+
lineNumber: 214
272+
}
273+
}), mountNode);
274+
} else {
275+
compiledCode = this.compileCode({ skipES2015Transform: false });
276+
eval(compiledCode);
277+
}
278+
} catch (err) {
279+
// Babel errors are preformatted, runtime errors are not.
280+
var errorMessage = err._babel ? React.createElement(
281+
'pre',
282+
{ style: { overflowX: 'auto' }, className: 'playgroundError', __source: {
283+
fileName: _jsxFileName,
284+
lineNumber: 224
285+
}
286+
},
287+
err.toString()
288+
) : React.createElement(
289+
'div',
290+
{ className: 'playgroundError', __source: {
291+
fileName: _jsxFileName,
292+
lineNumber: 225
293+
}
294+
},
295+
err.toString()
296+
);
297+
this.setTimeout(function () {
298+
ReactDOM.render(errorMessage, mountNode);
299+
}, 500);
300+
}
301+
}
302+
});

0 commit comments

Comments
 (0)