Permalink
Browse files

Move HTML to JSX page from the React site. References #52

  • Loading branch information...
Daniel15 committed Apr 25, 2016
1 parent 4adebdf commit 3ade7db4eb7c66d57d2617c1f89bd61b78d010ce
Showing with 131 additions and 7 deletions.
  1. +3 −0 .babelrc
  2. +11 −2 gulpfile.js
  3. +8 −5 package.json
  4. +28 −0 site/htmltojsx.htm
  5. +81 −0 src/htmltojsx-component.js
View
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "react"]
}
View
@@ -8,6 +8,7 @@
*
*/
var babel = require('gulp-babel');
var del = require('del');
var githubPages = require('gulp-gh-pages');
var gulp = require('gulp');
@@ -24,7 +25,8 @@ var PACKAGE_OUTPUT_DIR = 'build/package/';
gulp.task('default', ['build']);
gulp.task('build', [
'build-htmltojsx', 'build-magic', 'build-site-misc', 'build-package'
'build-htmltojsx', 'build-magic', 'build-site-htmltojsx', 'build-site-misc',
'build-package'
]);
gulp.task('build-htmltojsx', function() {
@@ -71,6 +73,12 @@ gulp.task('build-magic', function() {
.pipe(livereload({ auto: false }));
});
gulp.task('build-site-htmltojsx', function() {
return gulp.src('src/htmltojsx-component.js')
.pipe(babel())
.pipe(gulp.dest(SITE_OUTPUT_DIR));
});
gulp.task('build-site-misc', function() {
return gulp.src(['site/*', 'test/*'])
.pipe(gulp.dest(SITE_OUTPUT_DIR))
@@ -112,5 +120,6 @@ gulp.task('clean', function(callback) {
gulp.task('watch', function() {
livereload.listen();
gulp.watch(['site/*', 'test/*'], ['build-site-misc']);
gulp.watch('src/htmltojsx.js', ['build-htmltojsx']);
gulp.watch('src/htmltojsx.js', ['build-htmltojsx', 'build-site-htmltojsx']);
gulp.watch('src/htmltojsx-component.js', ['build-site-htmltojsx']);
});
View
@@ -10,15 +10,18 @@
"jsdom-no-contextify": "~3.1.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"del": "~2.2.0",
"gulp": "~3.9.0",
"webpack": "~1.13.0",
"gulp-webpack": "~1.5.0",
"gulp-babel": "^6.1.2",
"gulp-gh-pages": "~0.5.4",
"gulp-livereload": "~3.8.1",
"gulp-rename": "~1.2.0",
"gulp-uglify": "~1.5.1",
"gulp-gh-pages": "~0.5.4",
"gulp-webpack": "~1.5.0",
"merge-stream": "~1.0.0",
"del": "~2.2.0",
"gulp-livereload": "~3.8.1"
"webpack": "~1.13.0"
},
"repository": {
"type": "git",
View
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>HTML to JSX</title>
<meta name="viewport" content="width=device-width" />
<meta property="og:title" content="HTML to JSX" />
<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" />
</head>
<body>
<div class="jsxCompiler">
<h1>HTML to JSX Compiler</h1>
<div id="jsxCompiler">Loading...</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
<script src="https://facebook.github.io/react/js/live_editor.js"></script>
<script src="htmltojsx.min.js"></script>
<script src="htmltojsx-component.js"></script>
</div>
</body>
</html>
View
@@ -0,0 +1,81 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
/**
* This is a web interface for the HTML to JSX converter.
*/
;(function() {
var HELLO_COMPONENT = "\
<!-- Hello world -->\n\
<div class=\"awesome\" style=\"border: 1px solid red\">\n\
<label for=\"name\">Enter your name: </label>\n\
<input type=\"text\" id=\"name\" />\n\
</div>\n\
<p>Enter your HTML here</p>\
";
var HTMLtoJSXComponent = React.createClass({
getInitialState: function() {
return {
outputClassName: 'NewComponent',
createClass: true
};
},
onReactClassNameChange: function(evt) {
this.setState({ outputClassName: evt.target.value });
},
onCreateClassChange: function(evt) {
this.setState({ createClass: evt.target.checked });
},
setInput: function(input) {
this.setState({ input: input });
this.convertToJsx();
},
convertToJSX: function(input) {
var converter = new HTMLtoJSX({
outputClassName: this.state.outputClassName,
createClass: this.state.createClass
});
return converter.convert(input);
},
render: function() {
return (
<div>
<div id="options">
<label>
<input
type="checkbox"
checked={this.state.createClass}
onChange={this.onCreateClassChange} />
Create class
</label>
<label style={{display: this.state.createClass ? '' : 'none'}}>
·
Class name:
<input
type="text"
value={this.state.outputClassName}
onChange={this.onReactClassNameChange} />
</label>
</div>
<ReactPlayground
codeText={HELLO_COMPONENT}
renderCode={true}
transformer={this.convertToJSX}
showCompiledJSTab={false}
editorTabTitle="Live HTML Editor"
/>
</div>
);
}
});
ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
}());

0 comments on commit 3ade7db

Please sign in to comment.