Permalink
Browse files

Add missing files from old React site. Closes #143

  • Loading branch information...
Daniel15 committed Oct 10, 2017
1 parent 11c2aac commit 8ae4f11e2a88d8cdd1d0e0d0b630906e769a763c
Showing with 715 additions and 3 deletions.
  1. +3 −3 site/htmltojsx.htm
  2. +302 −0 site/live_editor.js
  3. +1 −0 site/react.css
  4. +409 −0 site/syntax.css
View
@@ -9,8 +9,8 @@
<meta property="og:type" content="website" />
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.css" />
<link rel="stylesheet" href="https://facebook.github.io/react/css/react.css" />
<link rel="stylesheet" href="https://facebook.github.io/react/css/syntax.css" />
<link rel="stylesheet" href="react.css" />
<link rel="stylesheet" href="syntax.css" />
</head>
<body>
<div class="jsxCompiler">
@@ -22,7 +22,7 @@ <h1>HTML to JSX Compiler</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.0/create-react-class.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
<script src="https://facebook.github.io/react/js/live_editor.js"></script>
<script src="live_editor.js"></script>
<script src="htmltojsx.min.js"></script>
<script src="htmltojsx-component.js"></script>
</div>
View
@@ -0,0 +1,302 @@
'use strict';
// This file was copied from the old React site. Please clean me up :)
var _jsxFileName = '_js/live_editor.js';
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);
var CodeMirrorEditor = React.createClass({
displayName: 'CodeMirrorEditor',
propTypes: {
lineNumbers: React.PropTypes.bool,
onChange: React.PropTypes.func
},
getDefaultProps: function () {
return {
lineNumbers: false
};
},
componentDidMount: function () {
if (IS_MOBILE) return;
this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
mode: 'jsx',
lineNumbers: this.props.lineNumbers,
lineWrapping: true,
smartIndent: false, // javascript mode does bad things with jsx indents
matchBrackets: true,
theme: 'solarized-light',
readOnly: this.props.readOnly
});
this.editor.on('change', this.handleChange);
},
componentDidUpdate: function () {
if (this.props.readOnly) {
this.editor.setValue(this.props.codeText);
}
},
handleChange: function () {
if (!this.props.readOnly) {
this.props.onChange && this.props.onChange(this.editor.getValue());
}
},
render: function () {
// wrap in a div to fully contain CodeMirror
var editor;
if (IS_MOBILE) {
editor = React.createElement(
'pre',
{ style: { overflow: 'scroll' }, __source: {
fileName: _jsxFileName,
lineNumber: 53
}
},
this.props.codeText
);
} else {
editor = React.createElement('textarea', { ref: 'editor', defaultValue: this.props.codeText, __source: {
fileName: _jsxFileName,
lineNumber: 55
}
});
}
return React.createElement(
'div',
{ style: this.props.style, className: this.props.className, __source: {
fileName: _jsxFileName,
lineNumber: 59
}
},
editor
);
}
});
var selfCleaningTimeout = {
componentDidUpdate: function () {
clearTimeout(this.timeoutID);
},
setTimeout: function () {
clearTimeout(this.timeoutID);
this.timeoutID = setTimeout.apply(null, arguments);
}
};
var ReactPlayground = React.createClass({
displayName: 'ReactPlayground',
mixins: [selfCleaningTimeout],
MODES: { JSX: 'JSX', JS: 'JS' }, //keyMirror({JSX: true, JS: true}),
propTypes: {
codeText: React.PropTypes.string.isRequired,
transformer: React.PropTypes.func,
renderCode: React.PropTypes.bool,
showCompiledJSTab: React.PropTypes.bool,
showLineNumbers: React.PropTypes.bool,
editorTabTitle: React.PropTypes.string
},
getDefaultProps: function () {
return {
transformer: function (code, options) {
var presets = ['react'];
if (!options || !options.skipES2015Transform) {
presets.push('es2015');
}
return Babel.transform(code, {
presets: presets
}).code;
},
editorTabTitle: 'Live JSX Editor',
showCompiledJSTab: true,
showLineNumbers: false
};
},
getInitialState: function () {
return {
mode: this.MODES.JSX,
code: this.props.codeText
};
},
handleCodeChange: function (value) {
this.setState({ code: value });
this.executeCode();
},
handleCodeModeSwitch: function (mode) {
this.setState({ mode: mode });
},
compileCode: function (options) {
return this.props.transformer(this.state.code, options);
},
render: function () {
var isJS = this.state.mode === this.MODES.JS;
var compiledCode = '';
try {
compiledCode = this.compileCode({ skipES2015Transform: true });
} catch (err) {}
var JSContent = React.createElement(CodeMirrorEditor, {
key: 'js',
className: 'playgroundStage CodeMirror-readonly',
onChange: this.handleCodeChange,
codeText: compiledCode,
readOnly: true,
lineNumbers: this.props.showLineNumbers,
__source: {
fileName: _jsxFileName,
lineNumber: 136
}
});
var JSXContent = React.createElement(CodeMirrorEditor, {
key: 'jsx',
onChange: this.handleCodeChange,
className: 'playgroundStage',
codeText: this.state.code,
lineNumbers: this.props.showLineNumbers,
__source: {
fileName: _jsxFileName,
lineNumber: 146
}
});
var JSXTabClassName = 'playground-tab' + (isJS ? '' : ' playground-tab-active');
var JSTabClassName = 'playground-tab' + (isJS ? ' playground-tab-active' : '');
var JSTab = React.createElement(
'div',
{
className: JSTabClassName,
onClick: this.handleCodeModeSwitch.bind(this, this.MODES.JS), __source: {
fileName: _jsxFileName,
lineNumber: 160
}
},
'Compiled JS'
);
var JSXTab = React.createElement(
'div',
{
className: JSXTabClassName,
onClick: this.handleCodeModeSwitch.bind(this, this.MODES.JSX), __source: {
fileName: _jsxFileName,
lineNumber: 167
}
},
this.props.editorTabTitle
);
return React.createElement(
'div',
{ className: 'playground', __source: {
fileName: _jsxFileName,
lineNumber: 174
}
},
React.createElement(
'div',
{
__source: {
fileName: _jsxFileName,
lineNumber: 175
}
},
JSXTab,
this.props.showCompiledJSTab && JSTab
),
React.createElement(
'div',
{ className: 'playgroundCode', __source: {
fileName: _jsxFileName,
lineNumber: 179
}
},
isJS ? JSContent : JSXContent
),
React.createElement(
'div',
{ className: 'playgroundPreview', __source: {
fileName: _jsxFileName,
lineNumber: 182
}
},
React.createElement('div', { ref: 'mount', __source: {
fileName: _jsxFileName,
lineNumber: 183
}
})
)
);
},
componentDidMount: function () {
this.executeCode();
},
componentDidUpdate: function (prevProps, prevState) {
// execute code only when the state's not being updated by switching tab
// this avoids re-displaying the error, which comes after a certain delay
if (this.props.transformer !== prevProps.transformer || this.state.code !== prevState.code) {
this.executeCode();
}
},
executeCode: function () {
var mountNode = ReactDOM.findDOMNode(this.refs.mount);
try {
ReactDOM.unmountComponentAtNode(mountNode);
} catch (e) {}
try {
var compiledCode;
if (this.props.renderCode) {
compiledCode = this.compileCode({ skipES2015Transform: true });
ReactDOM.render(React.createElement(CodeMirrorEditor, { codeText: compiledCode, readOnly: true, __source: {
fileName: _jsxFileName,
lineNumber: 214
}
}), mountNode);
} else {
compiledCode = this.compileCode({ skipES2015Transform: false });
eval(compiledCode);
}
} catch (err) {
// Babel errors are preformatted, runtime errors are not.
var errorMessage = err._babel ? React.createElement(
'pre',
{ style: { overflowX: 'auto' }, className: 'playgroundError', __source: {
fileName: _jsxFileName,
lineNumber: 224
}
},
err.toString()
) : React.createElement(
'div',
{ className: 'playgroundError', __source: {
fileName: _jsxFileName,
lineNumber: 225
}
},
err.toString()
);
this.setTimeout(function () {
ReactDOM.render(errorMessage, mountNode);
}, 500);
}
}
});
Oops, something went wrong.

0 comments on commit 8ae4f11

Please sign in to comment.