├── .babelrc
├── .editorconfig
├── .gitignore
├── .travis.yml
├── LICENSE
├── PATENTS
├── README-htmltojsx.md
├── README.md
├── gulpfile.js
├── package.json
├── site
    ├── CNAME
    ├── htmltojsx.htm
    ├── index.htm
    ├── live_editor.js
    ├── magic-loader.js
    ├── react.css
    └── syntax.css
├── src
    ├── cli.js
    ├── htmltojsx-component.js
    ├── htmltojsx.js
    └── magic.js
└── test
    ├── htmltojsx-test.js
    ├── test-helpers.js
    └── test.htm


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | temp
4 | .DS_Store
5 | *.sublime-project
6 | *.sublime-workspace
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 6
4 | script: gulp build
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD License for React-Magic
 2 | 
 3 | Copyright (c) 2014, Facebook, Inc. All rights reserved.
 4 | 
 5 | Redistribution and use in source and binary forms, with or without modification,
 6 | are permitted provided that the following conditions are met:
 7 | 
 8 |  * Redistributions of source code must retain the above copyright notice, this
 9 |    list of conditions and the following disclaimer.
10 | 
11 |  * Redistributions in binary form must reproduce the above copyright notice,
12 |    this list of conditions and the following disclaimer in the documentation
13 |    and/or other materials provided with the distribution.
14 | 
15 |  * Neither the name Facebook nor the names of its contributors may be used to
16 |    endorse or promote products derived from this software without specific
17 |    prior written permission.
18 | 
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
23 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
24 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
25 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
26 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
28 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 | 


--------------------------------------------------------------------------------
/PATENTS:
--------------------------------------------------------------------------------
 1 | Additional Grant of Patent Rights Version 2
 2 | 
 3 | "Software" means the React-Magic software distributed by Facebook, Inc.
 4 | 
 5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
 6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
 7 | (subject to the termination provision below) license under any Necessary
 8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise
 9 | transfer the Software. For avoidance of doubt, no license is granted under
10 | Facebook's rights in any patent claims that are infringed by (i) modifications
11 | to the Software made by you or any third party or (ii) the Software in
12 | combination with any software or other technology.
13 | 
14 | The license granted hereunder will terminate, automatically and without notice,
15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate
16 | directly or indirectly, or take a direct financial interest in, any Patent
17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate
18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or
19 | in part from any software, technology, product or service of Facebook or any of
20 | its subsidiaries or corporate affiliates, or (iii) against any party relating
21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its
22 | subsidiaries or corporate affiliates files a lawsuit alleging patent
23 | infringement against you in the first instance, and you respond by filing a
24 | patent infringement counterclaim in that lawsuit against that party that is
25 | unrelated to the Software, the license granted hereunder will not terminate
26 | under section (i) of this paragraph due to such counterclaim.
27 | 
28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is
29 | necessarily infringed by the Software standing alone.
30 | 
31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
32 | or contributory infringement or inducement to infringe any patent, including a
33 | cross-claim or counterclaim.
34 | 


--------------------------------------------------------------------------------
/README-htmltojsx.md:
--------------------------------------------------------------------------------
 1 | HTMLtoJSX
 2 | =========
 3 | 
 4 | HTMLtoJSX converts HTML to JSX for use with [React](facebook.github.io/react/).
 5 | 
 6 | Installation
 7 | ============
 8 | 
 9 | ```
10 | npm install htmltojsx
11 | ```
12 | 
13 | Alternatively, a web-based version is available at http://magic.reactjs.net/htmltojsx.htm
14 | 
15 | Usage
16 | =====
17 | HTMLtoJSX can be used either as a command-line application or as a Node.js module. To use the command-line version, invoke the `htmltojsx` command:
18 | 
19 | ```
20 | $ htmltojsx --help
21 | Converts HTML to JSX for use with React.
22 | Usage: htmltojsx [-c ComponentName] file.htm
23 | 
24 | Examples:
25 |   htmltojsx -c AwesomeComponent awesome.htm    Creates React component "AwesomeComponent" based on awesome.htm
26 | 
27 | 
28 | Options:
29 |   --className, -c  Create a React component (wraps JSX in React.createClass call)
30 |   --help           Show help
31 | ```
32 | 
33 | To use the Node.js module, `require('htmltojsx')` and create a new instance. This is the same interface as the web-based version:
34 | 
35 | ```js
36 | var HTMLtoJSX = require('htmltojsx');
37 | var converter = new HTMLtoJSX({
38 |   createClass: true,
39 |   outputClassName: 'AwesomeComponent'
40 | });
41 | var output = converter.convert('<div>Hello world!</div>');
42 | ```
43 | 
44 | Changelog
45 | =========
46 | 0.3.0 - 4th September 2017
47 | --------------------------
48 |  - [#97](https://github.com/reactjs/react-magic/pull/97) - Update to React 15
49 |  - [#100](https://github.com/reactjs/react-magic/pull/100) - Remove JSX class-level indention when transforming HTML into JSX
50 |  - [#136](https://github.com/reactjs/react-magic/pull/136) and [#138](https://github.com/reactjs/react-magic/pull/138) - Handle SVG attributes
51 | 0.2.6 - 28th November 2016
52 | --------------------------
53 |  - [#55](https://github.com/reactjs/react-magic/pull/55) - Handle braces in text. *Thanks to [Solar Olugebefola](https://github.com/solugebefola)*
54 |  - [#49](https://github.com/reactjs/react-magic/pull/49) - Fix quotation mark replacement. *Thanks to [Geoffrey Challen](https://github.com/gchallen)*
55 | 
56 | 0.2.5 - 26th October 2015
57 | -------------------------
58 |  - [#33](https://github.com/reactjs/react-magic/issues/33) - Correctly handle `<textarea>`s and `<pre>`s
59 |  - [#35](https://github.com/reactjs/react-magic/issues/35) - Handle internal stylesheets (`<style>` tags). *Thanks to [Trevor Copeland](https://github.com/sickslives)*
60 | 
61 | 0.2.4 - 6th August 2015
62 | -----------------------
63 |  - [#31](https://github.com/reactjs/react-magic/issues/31) - Fixed `jsdom`
64 |    dependency
65 | 
66 | 0.2.3 - 5th August 2015
67 | -----------------------
68 |  - [#8](https://github.com/reactjs/react-magic/issues/8) - Handle 
69 |    case-insensitive attributes and style names
70 |  - [#29](https://github.com/reactjs/react-magic/pull/29) - Switch to 
71 |    `jsdom-no-contextify` to support older versions of Node.js
72 | 
73 | 0.2.2 - 4th May 2015
74 | --------------------
75 |  - [#21](https://github.com/reactjs/react-magic/issues/21) - Allow output of 
76 |    React classes without class name
77 |  - [#25](https://github.com/reactjs/react-magic/pull/25) - Update version of 
78 |    JSDOM
79 | 
80 | 0.2.1 - 1st February 2015
81 | -------------------------
82 |  - [#10](https://github.com/reactjs/react-magic/pull/10) - Handle inline CSS
83 |    shorthand style values
84 |  - [#13](https://github.com/reactjs/react-magic/pull/13) - Maintain valueless
85 |    attributes handled by JSX
86 |  - [#15](https://github.com/reactjs/react-magic/pull/15) - Use uncontrolled
87 |    input fields so they can still be edited
88 |  - [#11](https://github.com/reactjs/react-magic/issues/11) - Ensure HTML
89 |    entities are handled correctly
90 | 
91 | 0.2.0 - 7th September 2014
92 | --------------------------
93 |  - Initial release
94 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React-Magic and HTMLtoJSX
 2 | =========================
 3 | 
 4 | React-Magic is an experimental library that uses the power of Facebook's
 5 | [React](http://facebook.github.io/react/) library to inject AJAX-loading
 6 | goodness into plain old HTML webpages, without having to write any custom
 7 | JavaScript. You can even use CSS transitions between the pages. Simply add a
 8 | single script tag (or click a bookmarklet) and "it just works".
 9 | 
10 | [HTMLtoJSX](README-htmltojsx.md) is a component of React-Magic that converts
11 | HTML to JSX. It can be used standalone, either on the web or via Node.js.
12 | 
13 | Under the covers
14 | ================
15 | 
16 | React-Magic intercepts all navigation (link clicks and form posts) and loads
17 | the requested page via an AJAX request. React is then used to "diff" the old
18 | HTML with the new HTML, and only update the parts of the DOM that have been
19 | changed.
20 | 
21 | Demos
22 | =====
23 | 
24 | * [Page transitions](http://stuff.dan.cx/facebook/react-hacks/magic/red.php)
25 | * [Form submission](http://stuff.dan.cx/facebook/react-hacks/magic/feedback1.htm)
26 | 
27 | Usage
28 | =====
29 | 
30 | To use React-Magic, add a `<script>` tag to the bottom of your page, right above
31 | the `</body>`:
32 | 
33 | ```html
34 | <script src="http://magic.reactjs.net/magic-loader.js"></script>
35 | ```
36 | 
37 | This handles loading all the required scripts. Alternatively, you can put all
38 | the required scripts instead:
39 | 
40 | ```html
41 | <script src="http://fb.me/react-0.13.3.min.js"></script>
42 | <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
43 | <script src="http://magic.reactjs.net/magic.min.js"></script>
44 | ```
45 | 
46 | The end result is the same.
47 | 
48 | A fun party trick is adding a bookmarklet to your browser which can be used to
49 | Reactify *any* plain HTML site. Click it and mystify your friends:
50 | 
51 | ```javascript
52 | javascript:(function(b){function c(){if(0!==d.length){var e=d.shift(),a=b.createElement("script");a.src=e;a.onload=c;b.body.appendChild(a)}}var d=["http://fb.me/react-0.13.3.min.js","http://fb.me/JSXTransformer-0.13.3.js","http://magic.reactjs.net/magic.min.js"];c();return!1})(document);
53 | ```
54 | 
55 | This just loads the same scripts as referenced above.
56 | 
57 | Caveat Emptor
58 | =============
59 | Even magic comes with its limitations. Since this project is experimental, it may not
60 | work properly in all browsers. If you're looking for something that works in
61 | IE6, you've come to the wrong place.
62 | 
63 | Development
64 | ===========
65 | Run `gulp watch` from the root to automatically rebuild the compiled JavaScript
66 | files as you edit them. To run the unit tests, point a web server to 
67 | `build/site` then navigate to `test.htm`. If you use the LiveReload browser 
68 | extension, the tests will automatically reload and rerun when you modify any of 
69 | the JavaScript.
70 | 
71 | Similar Projects
72 | ================
73 | This project has been inspired by the
74 | [Ajaxify](https://github.com/browserstate/ajaxify) project, which achieves a
75 | similar outcome but using jQuery. What makes React-Magic different is that it
76 | only updates the DOM nodes that have changed, whereas Ajaxify and similar
77 | solutions just blow away the whole document.body on every page load.
78 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *  Copyright (c) 2014, Facebook, Inc.
  3 |  *  All rights reserved.
  4 |  *
  5 |  *  This source code is licensed under the BSD-style license found in the
  6 |  *  LICENSE file in the root directory of this source tree. An additional grant
  7 |  *  of patent rights can be found in the PATENTS file in the same directory.
  8 |  *
  9 |  */
 10 | 
 11 | var babel = require('gulp-babel');
 12 | var del = require('del');
 13 | var githubPages = require('gulp-gh-pages');
 14 | var gulp = require('gulp');
 15 | var gulpWebpack = require('gulp-webpack');
 16 | var livereload = require('gulp-livereload');
 17 | var merge = require('merge-stream');
 18 | var rename = require('gulp-rename');
 19 | var spawn = require('child_process').spawn;
 20 | var webpack = require('webpack');
 21 | var uglify = require('gulp-uglify');
 22 | 
 23 | var SITE_OUTPUT_DIR = 'build/site/';
 24 | var PACKAGE_OUTPUT_DIR = 'build/package/';
 25 | 
 26 | gulp.task('default', ['build']);
 27 | gulp.task('build', [
 28 |   'build-htmltojsx', 'build-magic', 'build-site-htmltojsx', 'build-site-misc',
 29 |   'build-package'
 30 | ]);
 31 | 
 32 | gulp.task('build-htmltojsx', function() {
 33 |   return gulp.src('src/htmltojsx.js')
 34 |     .pipe(gulpWebpack({
 35 |       output: {
 36 |         library: 'HTMLtoJSX',
 37 |         libraryTarget: 'umd',
 38 |         filename: 'htmltojsx.js',
 39 |       },
 40 |       plugins: [
 41 |         new webpack.DefinePlugin({
 42 |           IN_BROWSER: true,
 43 |           'process.env.NODE_ENV': '"production"'
 44 |         }),
 45 |       ],
 46 |     }))
 47 |     .pipe(gulp.dest(SITE_OUTPUT_DIR))
 48 |     .pipe(uglify({ preserveComments: 'some' }))
 49 |     .pipe(rename({ extname: '.min.js' }))
 50 |     .pipe(gulp.dest(SITE_OUTPUT_DIR))
 51 |     .pipe(livereload({ auto: false }));
 52 | });
 53 | 
 54 | gulp.task('build-magic', function() {
 55 |   return gulp.src('src/magic.js')
 56 |     .pipe(gulpWebpack({
 57 |       output: {
 58 |         library: 'ReactMagic',
 59 |         libraryTarget: 'umd',
 60 |         filename: 'magic.js',
 61 |       },
 62 |       plugins: [
 63 |         new webpack.DefinePlugin({
 64 |           IN_BROWSER: true,
 65 |           'process.env.NODE_ENV': '"production"'
 66 |         }),
 67 |       ],
 68 |     }))
 69 |     .pipe(gulp.dest(SITE_OUTPUT_DIR))
 70 |     .pipe(uglify({ preserveComments: 'some' }))
 71 |     .pipe(rename({ extname: '.min.js' }))
 72 |     .pipe(gulp.dest(SITE_OUTPUT_DIR))
 73 |     .pipe(livereload({ auto: false }));
 74 | });
 75 | 
 76 | gulp.task('build-site-htmltojsx', function() {
 77 |   return gulp.src('src/htmltojsx-component.js')
 78 |     .pipe(babel())
 79 |     .pipe(gulp.dest(SITE_OUTPUT_DIR));
 80 | });
 81 | 
 82 | gulp.task('build-site-misc', function() {
 83 |   return gulp.src(['site/*', 'test/*'])
 84 |     .pipe(gulp.dest(SITE_OUTPUT_DIR))
 85 |     .pipe(livereload({ auto: false }));
 86 | });
 87 | 
 88 | gulp.task('build-package', function() {
 89 |   var main = gulp
 90 |     .src([
 91 |       '**/*', '!README*.md', '!node_modules{,/**}', '!build{,/**}',
 92 |       '!site{,/**}', '!temp{,/**}',
 93 |     ])
 94 |     .pipe(gulp.dest(PACKAGE_OUTPUT_DIR));
 95 | 
 96 |   var readme = gulp.src('README-htmltojsx.md')
 97 |     .pipe(rename('README.md'))
 98 |     .pipe(gulp.dest(PACKAGE_OUTPUT_DIR));
 99 | 
100 |   return merge(main, readme);
101 | });
102 | 
103 | gulp.task('publish-site', ['build'], function() {
104 |   return gulp.src('build/site/**/*')
105 |     .pipe(githubPages({}));
106 | });
107 | 
108 | gulp.task('publish-package', ['build'], function(callback) {
109 |   spawn(
110 |     'npm',
111 |     ['publish', PACKAGE_OUTPUT_DIR],
112 |     { stdio: 'inherit' }
113 |   ).on('close', callback);
114 | });
115 | 
116 | gulp.task('clean', function(callback) {
117 |   del(['build'], callback);
118 | });
119 | 
120 | gulp.task('watch', function() {
121 |   livereload.listen();
122 |   gulp.watch(['site/*', 'test/*'], ['build-site-misc']);
123 |   gulp.watch('src/htmltojsx.js', ['build-htmltojsx', 'build-site-htmltojsx']);
124 |   gulp.watch('src/htmltojsx-component.js', ['build-site-htmltojsx']);
125 | });
126 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "htmltojsx",
 3 |   "version": "0.3.1-dev",
 4 |   "description": "Converts HTML to JSX for use with React",
 5 |   "main": "src/htmltojsx.js",
 6 |   "bin": "src/cli.js",
 7 |   "dependencies": {
 8 |     "react": "~15.4.1",
 9 |     "react-dom": "~15.4.1",
10 |     "yargs": "~4.6.0",
11 |     "jsdom-no-contextify": "~3.1.0"
12 |   },
13 |   "devDependencies": {
14 |     "babel-preset-es2015": "^6.6.0",
15 |     "babel-preset-react": "^6.5.0",
16 |     "del": "~2.2.0",
17 |     "gulp": "~3.9.0",
18 |     "gulp-babel": "^6.1.2",
19 |     "gulp-gh-pages": "~0.5.4",
20 |     "gulp-livereload": "~3.8.1",
21 |     "gulp-rename": "~1.2.0",
22 |     "gulp-uglify": "~1.5.1",
23 |     "gulp-webpack": "~1.5.0",
24 |     "merge-stream": "~1.0.0",
25 |     "webpack": "~1.13.0"
26 |   },
27 |   "repository": {
28 |     "type": "git",
29 |     "url": "git://github.com/reactjs/react-magic.git"
30 |   },
31 |   "keywords": [
32 |     "react",
33 |     "jsx",
34 |     "htmltojsx",
35 |     "html",
36 |     "react-component"
37 |   ],
38 |   "author": "Daniel Lo Nigro <daniel@dan.cx> (http://dan.cx/)",
39 |   "license": "BSD-3-Clause",
40 |   "bugs": {
41 |     "url": "https://github.com/reactjs/react-magic/issues"
42 |   },
43 |   "homepage": "https://github.com/reactjs/react-magic"
44 | }
45 | 


--------------------------------------------------------------------------------
/site/CNAME:
--------------------------------------------------------------------------------
1 | magic.reactjs.net


--------------------------------------------------------------------------------
/site/htmltojsx.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 |   <title>HTML to JSX</title>
 7 |   <meta name="viewport" content="width=device-width" />
 8 |   <meta property="og:title" content="HTML to JSX" />
 9 |   <meta property="og:type" content="website" />
10 |   <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png" />
11 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.css" />
12 |   <link rel="stylesheet" href="react.css" />
13 |   <link rel="stylesheet" href="syntax.css" />
14 | </head>
15 | <body>
16 |   <div class="jsxCompiler">
17 |     <h1>HTML to JSX Compiler</h1>
18 |     <div id="jsxCompiler">Loading...</div>
19 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
20 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
21 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.js"></script>
22 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
23 |     <script src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.0/create-react-class.min.js"></script>
24 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
25 |     <script src="live_editor.js"></script>
26 |     <script src="htmltojsx.min.js"></script>
27 |     <script src="htmltojsx-component.js"></script>
28 |   </div>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/site/index.htm:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <meta http-equiv="refresh" content="0; url=https://github.com/reactjs/react-magic" />
3 | 


--------------------------------------------------------------------------------
/site/live_editor.js:
--------------------------------------------------------------------------------
  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 | });
303 | 


--------------------------------------------------------------------------------
/site/magic-loader.js:
--------------------------------------------------------------------------------
 1 | /** @preserve
 2 |  *  Copyright (c) 2014, Facebook, Inc.
 3 |  *  All rights reserved.
 4 |  *
 5 |  *  This source code is licensed under the BSD-style license found in the
 6 |  *  LICENSE file in the root directory of this source tree. An additional grant
 7 |  *  of patent rights can be found in the PATENTS file in the same directory.
 8 |  *
 9 |  */
10 | 
11 | (function(document) {
12 |   var scripts = [
13 |     'http://fb.me/react-0.13.3.min.js',
14 |     'http://fb.me/JSXTransformer-0.13.3.js',
15 |     'http://reactjs.github.io/react-magic/magic.min.js'
16 |   ];
17 | 
18 |   // Sometimes Chrome was loading the scripts in the wrong order (lolwat)
19 |   // We need to enforce order, so manually chain the loading.
20 |   function loadNext() {
21 |     if (scripts.length === 0) {
22 |       return;
23 |     }
24 |     var nextScript = scripts.shift();
25 |     var script = document.createElement('script');
26 |     script.src = nextScript;
27 |     script.onload = loadNext;
28 |     document.body.appendChild(script);
29 |   }
30 |   loadNext();
31 | 
32 |   return false;
33 | })(document);
34 | 


--------------------------------------------------------------------------------
/site/react.css:
--------------------------------------------------------------------------------
1 | html{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:16px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}input{font-family:inherit}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#859900}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#657b83}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#268bd2}.cm-s-solarized-light span.cm-tag{color:#268bd2}.cm-s-solarized-light span.cm-attribute{color:#586e75}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;width:100%}.wrap{max-width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}@media (max-width: 960px){.wrap{padding-left:10px;padding-right:10px}}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}li+li{margin-top:10px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none;padding-left:8px}.nav-main{background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:after{content:"";display:table;clear:both}@media (max-width: 960px){.nav-main{height:auto}}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{display:inline-flex;display:-ms-flexbox;flex:1;-ms-flex:1}.nav-main .nav-site li{margin:0}.nav-main .nav-site li>a{box-sizing:content-box;padding:0 10px;line-height:50px;display:inline-block;height:50px;color:#ddd;white-space:nowrap}@media (max-width: 960px){.nav-main .nav-site li>a{display:flex;display:-ms-flex;justify-content:center;align-items:center;padding:0 5px;line-height:inherit}}.nav-main .nav-site li>a:hover{color:#fff}.nav-main .nav-site li>a.active{position:relative;color:#fafafa;background:#333}.nav-main .nav-site li>a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:3px solid #cc7a6f}@media (max-width: 960px){.nav-main .nav-site li>a.active{background:inherit}}@media (max-width: 960px){.nav-main .nav-site .nav-site-item--hidden-sm{display:none}}@media (max-width: 960px){.nav-main .nav-site .nav-site-search{position:absolute;z-index:1;right:0;top:0;margin:0 10px}.nav-main .nav-site .nav-site-search:focus{width:170px}}.nav-main .nav-site-internal{margin:0 0 0 20px}@media (max-width: 960px){.nav-main .nav-site-internal{margin:0}}.nav-main .nav-site-external{float:right;margin:0}@media (max-width: 960px){.nav-main .nav-site-external{position:absolute;top:0;right:55px;float:none}}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px;height:50px;display:inline-block}@media (max-width: 960px){.nav-main .nav-home{font-size:20px}}.nav-main .nav-logo{vertical-align:middle;display:inline-block}@media (max-width: 960px){.nav-main .nav-logo{height:30px;width:auto}}.nav-main ul{display:inline-block;vertical-align:top}.nav-main li{display:inline}.nav-lists{display:inline-block;vertical-align:top;width:calc(100% - 120px)}@media (max-width: 960px){.nav-lists{display:flex;display:-ms-flex;width:calc(100% + 20px);margin:0 -10px;font-size:0.9em}.nav-lists li{display:flex;display:-ms-flex;-ms-flex:1 0 auto;align-items:center}.nav-lists li a{-ms-flex:1;text-align:center;line-height:1.2}}.hero{min-height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{display:flex;display:flex;justify-content:center;flex-wrap:wrap;margin-top:60px;text-align:center;font-size:1em}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}@media (max-width: 960px){.buttons-unit .button{margin:5px;font-size:1em}}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}@media (max-width: 640px){.nav-docs{width:100%;padding-bottom:40px}}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin:0 0 6px 20px}.nav-docs li{line-height:16px;margin:0 0 6px}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs a.external:after{content:"";display:inline-block;width:10px;height:10px;padding-left:5px;background-image:url("/web/20170925222548im_/https://facebook.github.io/react/img/external.png");background-position:100% 0;background-repeat:no-repeat;font-size:10px;line-height:1em;opacity:0.5}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-docs a.external:after{background-image:url("/web/20170925222548im_/https://facebook.github.io/react/img/external_2x.png");background-size:10px 10px}}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}@media (max-width: 640px){.nav-docs .nav-docs-section>ul{columns:2}}@media (max-width: 480px){.nav-docs .nav-docs-section>ul{columns:1}}.nav-docs .nav-docs-section>ul li{margin:0}.nav-docs .nav-docs-section>ul li a{padding:0;line-height:1.6}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:100%;max-width:400px}.skinny-row:after{content:"";display:table;clear:both}.skinny-col{float:left;margin-left:40px;width:305px}.skinny-col:first-child{margin-left:0}.marketing-row{margin:50px 0}.marketing-row:after{content:"";display:table;clear:both}.marketing-col{float:left;margin-left:40px;width:280px}@media (max-width: 960px){.marketing-col{margin:0;width:100%}}.marketing-col h3{color:#2d2d2d;font-size:24px;line-height:28px;font-weight:normal}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev:after{content:"";display:table;clear:both}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler label.compiler-option{display:block;margin-top:5px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px;word-wrap:break-word}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.jsxCompiler .playgroundError{padding:15px 20px}.docs-prev{float:left}.docs-next{float:right}section.black content{padding-bottom:18px}.blogContent{padding-top:20px;padding-bottom:80px}.blogContent:after{content:"";display:table;clear:both}@media (max-width: 640px){.blogContent{padding-bottom:0}}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.blogContent h2>code{font-size:inherit;line-height:inherit;color:#555;background-color:rgba(0,0,0,0.04)}.documentationContent{padding-top:20px;padding-bottom:80px}.documentationContent:after{content:"";display:table;clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}@media (max-width: 640px){.documentationContent{padding-bottom:0}}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(248,245,236,0.5);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.button{background:-webkit-linear-gradient(#9a9a9a, #646464);background:linear-gradient(#9a9a9a, #646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient(#77a3d2, #4783c2);background:linear-gradient(#77a3d2, #4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:100%;max-width:650px}@media (max-width: 960px){.inner-content{width:calc(100% - 240px);max-width:100%}}@media (max-width: 640px){.inner-content{width:100%}}.nosidebar .inner-content{float:none;margin:0 auto}h1:after{content:"";display:table;clear:both}.edit-page-link{float:right;font-size:16px;font-weight:normal;line-height:20px;margin-top:17px}@media (max-width: 640px){.edit-page-link{float:left;width:100%}}.communityContent{padding-top:20px}.communityContent:after{content:"";display:table;clear:both}.communityContent h3{margin-top:30px}.communityContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.communityContent th{padding-right:6px;text-align:right;vertical-align:top;font-weight:normal;font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.communityContent td{vertical-align:top;text-align:left}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}div.CodeMirror-linenumber{text-align:right}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}small a code,li a code,p a code{color:inherit}.cm-s-default span.cm-string-2{color:inherit}.playground:after{content:"";display:table;clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:100%;max-width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px;word-wrap:break-word}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.MarkdownEditor .content{white-space:pre-wrap;word-break:break-word}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0;float:left;min-width:100%}.highlight pre code{display:block;background:none;padding:0}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media (max-width: 960px){.nav-main{position:relative}.container{padding-top:0}}.post{margin-bottom:30px}.post img{max-width:100%;height:auto}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !important;width:100% !important}.fb_iframe_widget{max-width:100%}.fb_iframe_widget *{max-width:100%}@media (max-width: 960px){#twitter-widget-0{display:none !important}}.three-column:after{content:"";display:table;clear:both}.three-column>ul{float:left;margin-left:30px;width:190px}.three-column>ul:first-child{margin-left:20px}input#algolia-doc-search{background:transparent url("/web/20170925222548im_/https://facebook.github.io/react/img/search.png") no-repeat 10px center;background-size:16px 16px;position:relative;vertical-align:top;margin-left:10px;padding:0 10px;padding-left:35px;height:30px;margin-top:10px;font-size:16px;line-height:20px;background-color:#333;border-radius:4px;color:white;outline:none;width:170px;transition:width .2s ease}input#algolia-doc-search:focus{width:240px}@media (max-width: 960px){input#algolia-doc-search{background-color:transparent;width:0;cursor:pointer}input#algolia-doc-search:focus{width:200px;background-color:#333}}.algolia-autocomplete .aa-dropdown-menu{margin-left:-110px;margin-top:-4px}.algolia-autocomplete{vertical-align:top;height:53px}.algolia-docsearch-suggestion{border-bottom-color:#c05b4d}.algolia-docsearch-suggestion--category-header{background-color:#cc7a6f}.algolia-docsearch-suggestion--highlight{color:#c05b4d}.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion--content{color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion{background:#f1f3f5}footer.nav-footer{box-sizing:border-box;border:none;font-weight:300;color:#202020;font-size:15px;line-height:24px;background:#2D2D2D;box-shadow:inset 0 10px 10px -5px #0d1116;padding-top:2em;padding-bottom:2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}footer .sitemap{display:flex;display:-ms-flexbox;justify-content:space-between;max-width:1080px;margin:0 auto 3em}footer .sitemap div{flex:1;-ms-flex:1}footer .sitemap .nav-home{display:table;margin:-12px 20px 0 0;padding:10px;width:60px;height:60px;transition:opacity 0.15s ease-in-out;background:url("/web/20170925222548im_/https://facebook.github.io/react/img/logo_small_gray.png") no-repeat content-box}footer .sitemap .nav-home:hover,footer .sitemap .nav-home:focus{background-image:url("/web/20170925222548im_/https://facebook.github.io/react/img/logo_small.png")}@media screen and (max-width: 740px){footer .sitemap{display:none}}footer .sitemap a{color:white;display:table;margin:2px -10px;padding:3px 10px}footer .sitemap a:hover,footer .sitemap a:focus{color:#61dafb;text-decoration:none}footer .sitemap h6>a:hover,footer .sitemap h6>a:focus{color:#61dafb;text-decoration:none}footer .sitemap h5,footer .sitemap h6{margin:0 0 10px}footer .sitemap h5,footer .sitemap h6,footer .sitemap h5>a,footer .sitemap h6>a{color:white}footer .sitemap h5>a,footer .sitemap h6>a{margin:0 -10px}footer .fbOpenSource{display:block;margin:1em auto;opacity:0.4;transition:opacity 0.15s ease-in-out;width:170px}footer .fbOpenSource:hover{opacity:1.0}footer .copyright{color:rgba(255,255,255,0.4);text-align:center}
2 | 


--------------------------------------------------------------------------------
/site/syntax.css:
--------------------------------------------------------------------------------
  1 | .highlight pre code {
  2 |   color: #637c84;
  3 | }
  4 | 
  5 | .highlight {
  6 |   color: #333333;
  7 |   background: #f8f5ec;
  8 | }
  9 | 
 10 | .highlight .c {
 11 |   color: #93a1a1;
 12 | }
 13 | 
 14 | 
 15 | .highlight .g {
 16 |   color: #637c84;
 17 | }
 18 | 
 19 | /* Generic */
 20 | 
 21 | .highlight .k {
 22 |   color: #859900;
 23 | }
 24 | 
 25 | /* Keyword */
 26 | 
 27 | .highlight .l {
 28 |   color: #637c84;
 29 | }
 30 | 
 31 | /* Literal */
 32 | 
 33 | .highlight .n {
 34 |   color: #637c84;
 35 | }
 36 | 
 37 | /* Name */
 38 | 
 39 | .highlight .o {
 40 |   color: #859900;
 41 | }
 42 | 
 43 | /* Operator */
 44 | 
 45 | .highlight .x {
 46 |   color: #cc7a6f;
 47 | }
 48 | 
 49 | /* Other */
 50 | 
 51 | .highlight .p {
 52 |   color: #637c84;
 53 | }
 54 | 
 55 | /* Punctuation */
 56 | 
 57 | .highlight .cm {
 58 |   color: #93a1a1;
 59 | }
 60 | 
 61 | /* Comment.Multiline */
 62 | 
 63 | .highlight .cp {
 64 |   color: #859900;
 65 | }
 66 | 
 67 | /* Comment.Preproc */
 68 | 
 69 | .highlight .c1 {
 70 |   color: #93a1a1;
 71 | }
 72 | 
 73 | /* Comment.Single */
 74 | 
 75 | .highlight .cs {
 76 |   color: #859900;
 77 | }
 78 | 
 79 | /* Comment.Special */
 80 | 
 81 | .highlight .gd {
 82 |   color: #36958e;
 83 | }
 84 | 
 85 | /* Generic.Deleted */
 86 | 
 87 | .highlight .ge {
 88 |   font-style: italic;
 89 |   color: #637c84;
 90 | }
 91 | 
 92 | /* Generic.Emph */
 93 | 
 94 | .highlight .gr {
 95 |   color: #dc322f;
 96 | }
 97 | 
 98 | /* Generic.Error */
 99 | 
100 | .highlight .gh {
101 |   color: #cc7a6f;
102 | }
103 | 
104 | /* Generic.Heading */
105 | 
106 | .highlight .gi {
107 |   color: #859900;
108 | }
109 | 
110 | /* Generic.Inserted */
111 | 
112 | .highlight .go {
113 |   color: #637c84;
114 | }
115 | 
116 | /* Generic.Output */
117 | 
118 | .highlight .gp {
119 |   color: #637c84;
120 | }
121 | 
122 | /* Generic.Prompt */
123 | 
124 | .highlight .gs {
125 |   font-weight: bold;
126 |   color: #637c84;
127 | }
128 | 
129 | /* Generic.Strong */
130 | 
131 | .highlight .gu {
132 |   color: #cc7a6f;
133 | }
134 | 
135 | /* Generic.Subheading */
136 | 
137 | .highlight .gt {
138 |   color: #637c84;
139 | }
140 | 
141 | /* Generic.Traceback */
142 | 
143 | .highlight .kc {
144 |   color: #cc7a6f;
145 | }
146 | 
147 | /* Keyword.Constant */
148 | 
149 | .highlight .kd {
150 |   color: #268bd2;
151 | }
152 | 
153 | /* Keyword.Declaration */
154 | 
155 | .highlight .kn {
156 |   color: #859900;
157 | }
158 | 
159 | /* Keyword.Namespace */
160 | 
161 | .highlight .kp {
162 |   color: #859900;
163 | }
164 | 
165 | /* Keyword.Pseudo */
166 | 
167 | .highlight .kr {
168 |   color: #268bd2;
169 | }
170 | 
171 | /* Keyword.Reserved */
172 | 
173 | .highlight .kt {
174 |   color: #dc322f;
175 | }
176 | 
177 | /* Keyword.Type */
178 | 
179 | .highlight .ld {
180 |   color: #637c84;
181 | }
182 | 
183 | /* Literal.Date */
184 | 
185 | .highlight .m {
186 |   color: #36958e;
187 | }
188 | 
189 | /* Literal.Number */
190 | 
191 | .highlight .s {
192 |   color: #36958e;
193 | }
194 | 
195 | /* Literal.String */
196 | 
197 | .highlight .na {
198 |   color: #637c84;
199 | }
200 | 
201 | /* Name.Attribute */
202 | 
203 | .highlight .nb {
204 |   color: #b58900;
205 | }
206 | 
207 | /* Name.Builtin */
208 | 
209 | .highlight .nc {
210 |   color: #268bd2;
211 | }
212 | 
213 | /* Name.Class */
214 | 
215 | .highlight .no {
216 |   color: #cc7a6f;
217 | }
218 | 
219 | /* Name.Constant */
220 | 
221 | .highlight .nd {
222 |   color: #268bd2;
223 | }
224 | 
225 | /* Name.Decorator */
226 | 
227 | .highlight .ni {
228 |   color: #cc7a6f;
229 | }
230 | 
231 | /* Name.Entity */
232 | 
233 | .highlight .ne {
234 |   color: #cc7a6f;
235 | }
236 | 
237 | /* Name.Exception */
238 | 
239 | .highlight .nf {
240 |   color: #268bd2;
241 | }
242 | 
243 | /* Name.Function */
244 | 
245 | .highlight .nl {
246 |   color: #637c84;
247 | }
248 | 
249 | /* Name.Label */
250 | 
251 | .highlight .nn {
252 |   color: #637c84;
253 | }
254 | 
255 | /* Name.Namespace */
256 | 
257 | .highlight .nx {
258 |   color: #637c84;
259 | }
260 | 
261 | /* Name.Other */
262 | 
263 | .highlight .py {
264 |   color: #637c84;
265 | }
266 | 
267 | /* Name.Property */
268 | 
269 | .highlight .nt {
270 |   color: #268bd2;
271 | }
272 | 
273 | /* Name.Tag */
274 | 
275 | .highlight .nv {
276 |   color: #268bd2;
277 | }
278 | 
279 | /* Name.Variable */
280 | 
281 | .highlight .ow {
282 |   color: #859900;
283 | }
284 | 
285 | /* Operator.Word */
286 | 
287 | .highlight .w {
288 |   color: #637c84;
289 | }
290 | 
291 | /* Text.Whitespace */
292 | 
293 | .highlight .mf {
294 |   color: #36958e;
295 | }
296 | 
297 | /* Literal.Number.Float */
298 | 
299 | .highlight .mh {
300 |   color: #36958e;
301 | }
302 | 
303 | /* Literal.Number.Hex */
304 | 
305 | .highlight .mi {
306 |   color: #36958e;
307 | }
308 | 
309 | /* Literal.Number.Integer */
310 | 
311 | .highlight .mo {
312 |   color: #36958e;
313 | }
314 | 
315 | /* Literal.Number.Oct */
316 | 
317 | .highlight .sb {
318 |   color: #93a1a1;
319 | }
320 | 
321 | /* Literal.String.Backtick */
322 | 
323 | .highlight .sc {
324 |   color: #36958e;
325 | }
326 | 
327 | /* Literal.String.Char */
328 | 
329 | .highlight .sd {
330 |   color: #637c84;
331 | }
332 | 
333 | /* Literal.String.Doc */
334 | 
335 | .highlight .s2 {
336 |   color: #36958e;
337 | }
338 | 
339 | /* Literal.String.Double */
340 | 
341 | .highlight .se {
342 |   color: #cc7a6f;
343 | }
344 | 
345 | /* Literal.String.Escape */
346 | 
347 | .highlight .sh {
348 |   color: #637c84;
349 | }
350 | 
351 | /* Literal.String.Heredoc */
352 | 
353 | .highlight .si {
354 |   color: #36958e;
355 | }
356 | 
357 | /* Literal.String.Interpol */
358 | 
359 | .highlight .sx {
360 |   color: #36958e;
361 | }
362 | 
363 | /* Literal.String.Other */
364 | 
365 | .highlight .sr {
366 |   color: #dc322f;
367 | }
368 | 
369 | /* Literal.String.Regex */
370 | 
371 | .highlight .s1 {
372 |   color: #36958e;
373 | }
374 | 
375 | /* Literal.String.Single */
376 | 
377 | .highlight .ss {
378 |   color: #36958e;
379 | }
380 | 
381 | /* Literal.String.Symbol */
382 | 
383 | .highlight .bp {
384 |   color: #268bd2;
385 | }
386 | 
387 | /* Name.Builtin.Pseudo */
388 | 
389 | .highlight .vc {
390 |   color: #268bd2;
391 | }
392 | 
393 | /* Name.Variable.Class */
394 | 
395 | .highlight .vg {
396 |   color: #268bd2;
397 | }
398 | 
399 | /* Name.Variable.Global */
400 | 
401 | .highlight .vi {
402 |   color: #268bd2;
403 | }
404 | 
405 | /* Name.Variable.Instance */
406 | 
407 | .highlight .il {
408 |   color: #36958e;
409 | }
410 | 


--------------------------------------------------------------------------------
/src/cli.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 'use strict';
 3 | 
 4 | var fs = require('fs');
 5 | var HTMLtoJSX = require('./htmltojsx.js');
 6 | var yargs = require('yargs');
 7 | 
 8 | function getArgs() {
 9 |   var args = yargs
10 |     .usage(
11 |       'Converts HTML to JSX for use with React.\n' +
12 |       'Usage: $0 [-c ComponentName] file.htm'
13 |     )
14 |     .describe('className', 'Create a React component (wraps JSX in React.createClass call)')
15 |     .alias('className', 'c')
16 |     .help('help')
17 |     .example(
18 |       '$0 -c AwesomeComponent awesome.htm',
19 |       'Creates React component "AwesomeComponent" based on awesome.htm'
20 |     )
21 |     .strict();
22 | 
23 |   var files = args.argv._;
24 |   if (!files || files.length === 0) {
25 |     console.error('Please provide a file name');
26 |     args.showHelp();
27 |     process.exit(1);
28 |   }
29 |   return args.argv;
30 | }
31 | 
32 | function main() {
33 |   var argv = getArgs();
34 |   fs.readFile(argv._[0], 'utf-8', function(err, input) {
35 |     if (err) {
36 |       console.error(err.stack);
37 |       process.exit(2);
38 |     }
39 |     var converter = new HTMLtoJSX({
40 |       createClass: !!argv.className,
41 |       outputClassName: argv.className
42 |     });
43 |     var output = converter.convert(input);
44 |     console.log(output);
45 |   });
46 | }
47 | 
48 | main();
49 | 


--------------------------------------------------------------------------------
/src/htmltojsx-component.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | /**
11 |  * This is a web interface for the HTML to JSX converter.
12 |  */
13 | ;(function() {
14 | 
15 | var HELLO_COMPONENT = "\
16 | <!-- Hello world -->\n\
17 | <div class=\"awesome\" style=\"border: 1px solid red\">\n\
18 |   <label for=\"name\">Enter your name: </label>\n\
19 |   <input type=\"text\" id=\"name\" />\n\
20 | </div>\n\
21 | <p>Enter your HTML here</p>\
22 | ";
23 | 
24 |   var HTMLtoJSXComponent = React.createClass({
25 |     getInitialState: function() {
26 |       return {
27 |         outputClassName: 'NewComponent',
28 |         createClass: true
29 |       };
30 |     },
31 |     onReactClassNameChange: function(evt) {
32 |       this.setState({ outputClassName: evt.target.value });
33 |     },
34 |     onCreateClassChange: function(evt) {
35 |       this.setState({ createClass: evt.target.checked });
36 |     },
37 |     setInput: function(input) {
38 |       this.setState({ input: input });
39 |       this.convertToJsx();
40 |     },
41 |     convertToJSX: function(input) {
42 |       var converter = new HTMLtoJSX({
43 |         outputClassName: this.state.outputClassName,
44 |         createClass: this.state.createClass
45 |       });
46 |       return converter.convert(input);
47 |     },
48 |   	render: function() {
49 |       return (
50 |         <div>
51 |           <div id="options">
52 |             <label>
53 |               <input
54 |                 type="checkbox"
55 |                 checked={this.state.createClass}
56 |                 onChange={this.onCreateClassChange} />
57 |                 Create class
58 |             </label>
59 |             <label style={{display: this.state.createClass ? '' : 'none'}}>
60 |               ·
61 |               Class name:
62 |               <input
63 |                 type="text"
64 |                 value={this.state.outputClassName}
65 |                 onChange={this.onReactClassNameChange} />
66 |             </label>
67 |           </div>
68 |           <ReactPlayground
69 |             codeText={HELLO_COMPONENT}
70 |             renderCode={true}
71 |             transformer={this.convertToJSX}
72 |             showCompiledJSTab={false}
73 |             editorTabTitle="Live HTML Editor"
74 |             />
75 |         </div>
76 |       );
77 |     }
78 |   });
79 | 
80 |   ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
81 | }());
82 | 


--------------------------------------------------------------------------------
/src/htmltojsx.js:
--------------------------------------------------------------------------------
  1 | /** @preserve
  2 |  *  Copyright (c) 2014, Facebook, Inc.
  3 |  *  All rights reserved.
  4 |  *
  5 |  *  This source code is licensed under the BSD-style license found in the
  6 |  *  LICENSE file in the root directory of this source tree. An additional grant
  7 |  *  of patent rights can be found in the PATENTS file in the same directory.
  8 |  *
  9 |  */
 10 | 'use strict';
 11 | 
 12 | /**
 13 |  * This is a very simple HTML to JSX converter. It turns out that browsers
 14 |  * have good HTML parsers (who would have thought?) so we utilise this by
 15 |  * inserting the HTML into a temporary DOM node, and then do a breadth-first
 16 |  * traversal of the resulting DOM tree.
 17 |  */
 18 | 
 19 | // https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
 20 | var NODE_TYPE = {
 21 |   ELEMENT: 1,
 22 |   TEXT: 3,
 23 |   COMMENT: 8
 24 | };
 25 | 
 26 | var ATTRIBUTE_MAPPING = {
 27 |   'for': 'htmlFor',
 28 |   'class': 'className'
 29 | };
 30 | 
 31 | var ELEMENT_ATTRIBUTE_MAPPING = {
 32 |   'input': {
 33 |     'checked': 'defaultChecked',
 34 |     'value': 'defaultValue',
 35 |     'autofocus': 'autoFocus'
 36 |   }
 37 | };
 38 | 
 39 | // Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements
 40 | var ELEMENT_TAG_NAME_MAPPING = {
 41 |   a: 'a',
 42 |   altglyph: 'altGlyph',
 43 |   altglyphdef: 'altGlyphDef',
 44 |   altglyphitem: 'altGlyphItem',
 45 |   animate: 'animate',
 46 |   animatecolor: 'animateColor',
 47 |   animatemotion: 'animateMotion',
 48 |   animatetransform: 'animateTransform',
 49 |   audio: 'audio',
 50 |   canvas: 'canvas',
 51 |   circle: 'circle',
 52 |   clippath: 'clipPath',
 53 |   'color-profile': 'colorProfile',
 54 |   cursor: 'cursor',
 55 |   defs: 'defs',
 56 |   desc: 'desc',
 57 |   discard: 'discard',
 58 |   ellipse: 'ellipse',
 59 |   feblend: 'feBlend',
 60 |   fecolormatrix: 'feColorMatrix',
 61 |   fecomponenttransfer: 'feComponentTransfer',
 62 |   fecomposite: 'feComposite',
 63 |   feconvolvematrix: 'feConvolveMatrix',
 64 |   fediffuselighting: 'feDiffuseLighting',
 65 |   fedisplacementmap: 'feDisplacementMap',
 66 |   fedistantlight: 'feDistantLight',
 67 |   fedropshadow: 'feDropShadow',
 68 |   feflood: 'feFlood',
 69 |   fefunca: 'feFuncA',
 70 |   fefuncb: 'feFuncB',
 71 |   fefuncg: 'feFuncG',
 72 |   fefuncr: 'feFuncR',
 73 |   fegaussianblur: 'feGaussianBlur',
 74 |   feimage: 'feImage',
 75 |   femerge: 'feMerge',
 76 |   femergenode: 'feMergeNode',
 77 |   femorphology: 'feMorphology',
 78 |   feoffset: 'feOffset',
 79 |   fepointlight: 'fePointLight',
 80 |   fespecularlighting: 'feSpecularLighting',
 81 |   fespotlight: 'feSpotLight',
 82 |   fetile: 'feTile',
 83 |   feturbulence: 'feTurbulence',
 84 |   filter: 'filter',
 85 |   font: 'font',
 86 |   'font-face': 'fontFace',
 87 |   'font-face-format': 'fontFaceFormat',
 88 |   'font-face-name': 'fontFaceName',
 89 |   'font-face-src': 'fontFaceSrc',
 90 |   'font-face-uri': 'fontFaceUri',
 91 |   foreignobject: 'foreignObject',
 92 |   g: 'g',
 93 |   glyph: 'glyph',
 94 |   glyphref: 'glyphRef',
 95 |   hatch: 'hatch',
 96 |   hatchpath: 'hatchpath',
 97 |   hkern: 'hkern',
 98 |   iframe: 'iframe',
 99 |   image: 'image',
100 |   line: 'line',
101 |   lineargradient: 'linearGradient',
102 |   marker: 'marker',
103 |   mask: 'mask',
104 |   mesh: 'mesh',
105 |   meshgradient: 'meshgradient',
106 |   meshpatch: 'meshpatch',
107 |   meshrow: 'meshrow',
108 |   metadata: 'metadata',
109 |   'missing-glyph': 'missingGlyph',
110 |   mpath: 'mpath',
111 |   path: 'path',
112 |   pattern: 'pattern',
113 |   polygon: 'polygon',
114 |   polyline: 'polyline',
115 |   radialgradient: 'radialGradient',
116 |   rect: 'rect',
117 |   script: 'script',
118 |   set: 'set',
119 |   solidcolor: 'solidcolor',
120 |   stop: 'stop',
121 |   style: 'style',
122 |   svg: 'svg',
123 |   switch: 'switch',
124 |   symbol: 'symbol',
125 |   text: 'text',
126 |   textpath: 'textPath',
127 |   title: 'title',
128 |   tref: 'tref',
129 |   tspan: 'tspan',
130 |   unknown: 'unknown',
131 |   use: 'use',
132 |   video: 'video',
133 |   view: 'view',
134 |   vkern: 'vkern'
135 | };
136 | 
137 | var HTMLDOMPropertyConfig = require('react-dom/lib/HTMLDOMPropertyConfig');
138 | var SVGDOMPropertyConfig = require('react-dom/lib/SVGDOMPropertyConfig');
139 | 
140 | /**
141 |  * Iterates over elements of object invokes iteratee for each element
142 |  *
143 |  * @param {object}   obj        Collection object
144 |  * @param {function} iteratee   Callback function called in iterative processing
145 |  * @param {any}      context    This arg (aka Context)
146 |  */
147 | function eachObj(obj, iteratee, context) {
148 |   for (var key in obj) {
149 |     if (obj.hasOwnProperty(key)) {
150 |       iteratee.call(context || obj, key, obj[key]);
151 |     }
152 |   }
153 | }
154 | 
155 | // Populate property map with ReactJS's attribute and property mappings
156 | // TODO handle/use .Properties value eg: MUST_USE_PROPERTY is not HTML attr
157 | function mappingAttributesFromReactConfig(config) {
158 |   eachObj(config.Properties, function(propname) {
159 |     var mapFrom = config.DOMAttributeNames[propname] || propname.toLowerCase();
160 | 
161 |     if (!ATTRIBUTE_MAPPING[mapFrom])
162 |       ATTRIBUTE_MAPPING[mapFrom] = propname;
163 |   });
164 | }
165 | 
166 | mappingAttributesFromReactConfig(HTMLDOMPropertyConfig);
167 | mappingAttributesFromReactConfig(SVGDOMPropertyConfig);
168 | 
169 | /**
170 |  * Convert tag name to tag name suitable for JSX.
171 |  *
172 |  * @param  {string} tagName  String of tag name
173 |  * @return {string}
174 |  */
175 | function jsxTagName(tagName) {
176 |   var name = tagName.toLowerCase();
177 | 
178 |   if (ELEMENT_TAG_NAME_MAPPING.hasOwnProperty(name)) {
179 |     name = ELEMENT_TAG_NAME_MAPPING[name];
180 |   }
181 | 
182 |   return name;
183 | }
184 | 
185 | /**
186 |  * Repeats a string a certain number of times.
187 |  * Also: the future is bright and consists of native string repetition:
188 |  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
189 |  *
190 |  * @param {string} string  String to repeat
191 |  * @param {number} times   Number of times to repeat string. Integer.
192 |  * @see http://jsperf.com/string-repeater/2
193 |  */
194 | function repeatString(string, times) {
195 |   if (times === 1) {
196 |     return string;
197 |   }
198 |   if (times < 0) { throw new Error(); }
199 |   var repeated = '';
200 |   while (times) {
201 |     if (times & 1) {
202 |       repeated += string;
203 |     }
204 |     if (times >>= 1) {
205 |       string += string;
206 |     }
207 |   }
208 |   return repeated;
209 | }
210 | 
211 | /**
212 |  * Determine if the string ends with the specified substring.
213 |  *
214 |  * @param {string} haystack String to search in
215 |  * @param {string} needle   String to search for
216 |  * @return {boolean}
217 |  */
218 | function endsWith(haystack, needle) {
219 |   return haystack.slice(-needle.length) === needle;
220 | }
221 | 
222 | /**
223 |  * Trim the specified substring off the string. If the string does not end
224 |  * with the specified substring, this is a no-op.
225 |  *
226 |  * @param {string} haystack String to search in
227 |  * @param {string} needle   String to search for
228 |  * @return {string}
229 |  */
230 | function trimEnd(haystack, needle) {
231 |   return endsWith(haystack, needle)
232 |     ? haystack.slice(0, -needle.length)
233 |     : haystack;
234 | }
235 | 
236 | /**
237 |  * Convert a hyphenated string to camelCase.
238 |  */
239 | function hyphenToCamelCase(string) {
240 |   return string.replace(/-(.)/g, function(match, chr) {
241 |     return chr.toUpperCase();
242 |   });
243 | }
244 | 
245 | /**
246 |  * Determines if the specified string consists entirely of whitespace.
247 |  */
248 | function isEmpty(string) {
249 |    return !/[^\s]/.test(string);
250 | }
251 | 
252 | /**
253 |  * Determines if the CSS value can be converted from a
254 |  * 'px' suffixed string to a numeric value
255 |  *
256 |  * @param {string} value CSS property value
257 |  * @return {boolean}
258 |  */
259 | function isConvertiblePixelValue(value) {
260 |   return /^\d+px$/.test(value);
261 | }
262 | 
263 | /**
264 |  * Determines if the specified string consists entirely of numeric characters.
265 |  */
266 | function isNumeric(input) {
267 |   return input !== undefined
268 |     && input !== null
269 |     && (typeof input === 'number' || parseInt(input, 10) == input);
270 | }
271 | 
272 | var createElement;
273 | if (typeof IN_BROWSER !== 'undefined' && IN_BROWSER) {
274 |   // Browser environment, use document.createElement directly.
275 |   createElement = function(tag) {
276 |     return document.createElement(tag);
277 |   };
278 | } else {
279 |   // Node.js-like environment, use jsdom.
280 |   var jsdom = require('jsdom-no-contextify').jsdom;
281 |   var window = jsdom().defaultView;
282 |   createElement = function(tag) {
283 |     return window.document.createElement(tag);
284 |   };
285 | }
286 | 
287 | var tempEl = createElement('div');
288 | /**
289 |  * Escapes special characters by converting them to their escaped equivalent
290 |  * (eg. "<" to "&lt;"). Only escapes characters that absolutely must be escaped.
291 |  *
292 |  * @param {string} value
293 |  * @return {string}
294 |  */
295 | function escapeSpecialChars(value) {
296 |   // Uses this One Weird Trick to escape text - Raw text inserted as textContent
297 |   // will have its escaped version in innerHTML.
298 |   tempEl.textContent = value;
299 |   return tempEl.innerHTML;
300 | }
301 | 
302 | var HTMLtoJSX = function(config) {
303 |   this.config = config || {};
304 | 
305 |   if (this.config.createClass === undefined) {
306 |     this.config.createClass = true;
307 |   }
308 |   if (!this.config.indent) {
309 |     this.config.indent = '  ';
310 |   }
311 | };
312 | HTMLtoJSX.prototype = {
313 |   /**
314 |    * Reset the internal state of the converter
315 |    */
316 |   reset: function() {
317 |     this.output = '';
318 |     this.level = 0;
319 |     this._inPreTag = false;
320 |   },
321 |   /**
322 |    * Main entry point to the converter. Given the specified HTML, returns a
323 |    * JSX object representing it.
324 |    * @param {string} html HTML to convert
325 |    * @return {string} JSX
326 |    */
327 |   convert: function(html) {
328 |     this.reset();
329 | 
330 |     var containerEl = createElement('div');
331 |     containerEl.innerHTML = '\n' + this._cleanInput(html) + '\n';
332 | 
333 |     if (this.config.createClass) {
334 |       if (this.config.outputClassName) {
335 |         this.output = 'var ' + this.config.outputClassName + ' = React.createClass({\n';
336 |       } else {
337 |         this.output = 'React.createClass({\n';
338 |       }
339 |       this.output += this.config.indent + 'render: function() {' + "\n";
340 |       this.output += this.config.indent + this.config.indent + 'return (\n';
341 |     }
342 | 
343 |     if (this._onlyOneTopLevel(containerEl)) {
344 |       // Only one top-level element, the component can return it directly
345 |       // No need to actually visit the container element
346 |       this._traverse(containerEl);
347 |     } else {
348 |       // More than one top-level element, need to wrap the whole thing in a
349 |       // container.
350 |       this.output += this.config.indent + this.config.indent + this.config.indent;
351 |       this.level++;
352 |       this._visit(containerEl);
353 |     }
354 |     this.output = this.output.trim() + '\n';
355 |     if (this.config.createClass) {
356 |       this.output += this.config.indent + this.config.indent + ');\n';
357 |       this.output += this.config.indent + '}\n';
358 |       this.output += '});';
359 |     } else {
360 |       this.output = this._removeJSXClassIndention(this.output, this.config.indent);
361 |     }
362 |     return this.output;
363 |   },
364 | 
365 |   /**
366 |    * Cleans up the specified HTML so it's in a format acceptable for
367 |    * converting.
368 |    *
369 |    * @param {string} html HTML to clean
370 |    * @return {string} Cleaned HTML
371 |    */
372 |   _cleanInput: function(html) {
373 |     // Remove unnecessary whitespace
374 |     html = html.trim();
375 |     // Ugly method to strip script tags. They can wreak havoc on the DOM nodes
376 |     // so let's not even put them in the DOM.
377 |     html = html.replace(/<script([\s\S]*?)<\/script>/g, '');
378 |     return html;
379 |   },
380 | 
381 |   /**
382 |    * Determines if there's only one top-level node in the DOM tree. That is,
383 |    * all the HTML is wrapped by a single HTML tag.
384 |    *
385 |    * @param {DOMElement} containerEl Container element
386 |    * @return {boolean}
387 |    */
388 |   _onlyOneTopLevel: function(containerEl) {
389 |     // Only a single child element
390 |     if (
391 |       containerEl.childNodes.length === 1
392 |       && containerEl.childNodes[0].nodeType === NODE_TYPE.ELEMENT
393 |     ) {
394 |       return true;
395 |     }
396 |     // Only one element, and all other children are whitespace
397 |     var foundElement = false;
398 |     for (var i = 0, count = containerEl.childNodes.length; i < count; i++) {
399 |       var child = containerEl.childNodes[i];
400 |       if (child.nodeType === NODE_TYPE.ELEMENT) {
401 |         if (foundElement) {
402 |           // Encountered an element after already encountering another one
403 |           // Therefore, more than one element at root level
404 |           return false;
405 |         } else {
406 |           foundElement = true;
407 |         }
408 |       } else if (child.nodeType === NODE_TYPE.TEXT && !isEmpty(child.textContent)) {
409 |         // Contains text content
410 |         return false;
411 |       }
412 |     }
413 |     return true;
414 |   },
415 | 
416 |   /**
417 |    * Gets a newline followed by the correct indentation for the current
418 |    * nesting level
419 |    *
420 |    * @return {string}
421 |    */
422 |   _getIndentedNewline: function() {
423 |     return '\n' + repeatString(this.config.indent, this.level + 2);
424 |   },
425 | 
426 |   /**
427 |    * Handles processing the specified node
428 |    *
429 |    * @param {Node} node
430 |    */
431 |   _visit: function(node) {
432 |     this._beginVisit(node);
433 |     this._traverse(node);
434 |     this._endVisit(node);
435 |   },
436 | 
437 |   /**
438 |    * Traverses all the children of the specified node
439 |    *
440 |    * @param {Node} node
441 |    */
442 |   _traverse: function(node) {
443 |     this.level++;
444 |     for (var i = 0, count = node.childNodes.length; i < count; i++) {
445 |       this._visit(node.childNodes[i]);
446 |     }
447 |     this.level--;
448 |   },
449 | 
450 |   /**
451 |    * Handle pre-visit behaviour for the specified node.
452 |    *
453 |    * @param {Node} node
454 |    */
455 |   _beginVisit: function(node) {
456 |     switch (node.nodeType) {
457 |       case NODE_TYPE.ELEMENT:
458 |         this._beginVisitElement(node);
459 |         break;
460 | 
461 |       case NODE_TYPE.TEXT:
462 |         this._visitText(node);
463 |         break;
464 | 
465 |       case NODE_TYPE.COMMENT:
466 |         this._visitComment(node);
467 |         break;
468 | 
469 |       default:
470 |         console.warn('Unrecognised node type: ' + node.nodeType);
471 |     }
472 |   },
473 | 
474 |   /**
475 |    * Handles post-visit behaviour for the specified node.
476 |    *
477 |    * @param {Node} node
478 |    */
479 |   _endVisit: function(node) {
480 |     switch (node.nodeType) {
481 |       case NODE_TYPE.ELEMENT:
482 |         this._endVisitElement(node);
483 |         break;
484 |       // No ending tags required for these types
485 |       case NODE_TYPE.TEXT:
486 |       case NODE_TYPE.COMMENT:
487 |         break;
488 |     }
489 |   },
490 | 
491 |   /**
492 |    * Handles pre-visit behaviour for the specified element node
493 |    *
494 |    * @param {DOMElement} node
495 |    */
496 |   _beginVisitElement: function(node) {
497 |     var tagName = jsxTagName(node.tagName);
498 |     var attributes = [];
499 |     for (var i = 0, count = node.attributes.length; i < count; i++) {
500 |       attributes.push(this._getElementAttribute(node, node.attributes[i]));
501 |     }
502 | 
503 |     if (tagName === 'textarea') {
504 |       // Hax: textareas need their inner text moved to a "defaultValue" attribute.
505 |       attributes.push('defaultValue={' + JSON.stringify(node.value) + '}');
506 |     }
507 |     if (tagName === 'style') {
508 |       // Hax: style tag contents need to be dangerously set due to liberal curly brace usage
509 |       attributes.push('dangerouslySetInnerHTML={{__html: ' + JSON.stringify(node.textContent) + ' }}');
510 |     }
511 |     if (tagName === 'pre') {
512 |       this._inPreTag = true;
513 |     }
514 | 
515 |     this.output += '<' + tagName;
516 |     if (attributes.length > 0) {
517 |       this.output += ' ' + attributes.join(' ');
518 |     }
519 |     if (!this._isSelfClosing(node)) {
520 |       this.output += '>';
521 |     }
522 |   },
523 | 
524 |   /**
525 |    * Handles post-visit behaviour for the specified element node
526 |    *
527 |    * @param {Node} node
528 |    */
529 |   _endVisitElement: function(node) {
530 |     var tagName = jsxTagName(node.tagName);
531 |     // De-indent a bit
532 |     // TODO: It's inefficient to do it this way :/
533 |     this.output = trimEnd(this.output, this.config.indent);
534 |     if (this._isSelfClosing(node)) {
535 |       this.output += ' />';
536 |     } else {
537 |       this.output += '</' + tagName + '>';
538 |     }
539 | 
540 |     if (tagName === 'pre') {
541 |       this._inPreTag = false;
542 |     }
543 |   },
544 | 
545 |   /**
546 |    * Determines if this element node should be rendered as a self-closing
547 |    * tag.
548 |    *
549 |    * @param {Node} node
550 |    * @return {boolean}
551 |    */
552 |   _isSelfClosing: function(node) {
553 |     var tagName = jsxTagName(node.tagName);
554 |     // If it has children, it's not self-closing
555 |     // Exception: All children of a textarea are moved to a "defaultValue" attribute, style attributes are dangerously set.
556 |     return !node.firstChild || tagName === 'textarea' || tagName === 'style';
557 |   },
558 | 
559 |   /**
560 |    * Handles processing of the specified text node
561 |    *
562 |    * @param {TextNode} node
563 |    */
564 |   _visitText: function(node) {
565 |     var parentTag = node.parentNode && jsxTagName(node.parentNode.tagName);
566 |     if (parentTag === 'textarea' || parentTag === 'style') {
567 |       // Ignore text content of textareas and styles, as it will have already been moved
568 |       // to a "defaultValue" attribute and "dangerouslySetInnerHTML" attribute respectively.
569 |       return;
570 |     }
571 | 
572 |     var text = escapeSpecialChars(node.textContent);
573 | 
574 |     if (this._inPreTag) {
575 |       // If this text is contained within a <pre>, we need to ensure the JSX
576 |       // whitespace coalescing rules don't eat the whitespace. This means
577 |       // wrapping newlines and sequences of two or more spaces in variables.
578 |       text = text
579 |         .replace(/\r/g, '')
580 |         .replace(/( {2,}|\n|\t|\{|\})/g, function(whitespace) {
581 |           return '{' + JSON.stringify(whitespace) + '}';
582 |         });
583 |     } else {
584 |       // Handle any curly braces.
585 |       text = text
586 |         .replace(/(\{|\})/g, function(brace) {
587 |             return '{\'' + brace + '\'}';
588 |         });
589 |       // If there's a newline in the text, adjust the indent level
590 |       if (text.indexOf('\n') > -1) {
591 |         text = text.replace(/\n\s*/g, this._getIndentedNewline());
592 |       }
593 |     }
594 |     this.output += text;
595 |   },
596 | 
597 |   /**
598 |    * Handles processing of the specified text node
599 |    *
600 |    * @param {Text} node
601 |    */
602 |   _visitComment: function(node) {
603 |     this.output += '{/*' + node.textContent.replace('*/', '* /') + '*/}';
604 |   },
605 | 
606 |   /**
607 |    * Gets a JSX formatted version of the specified attribute from the node
608 |    *
609 |    * @param {DOMElement} node
610 |    * @param {object}     attribute
611 |    * @return {string}
612 |    */
613 |   _getElementAttribute: function(node, attribute) {
614 |     switch (attribute.name) {
615 |       case 'style':
616 |         return this._getStyleAttribute(attribute.value);
617 |       default:
618 |         var tagName = jsxTagName(node.tagName);
619 |         var name =
620 |           (ELEMENT_ATTRIBUTE_MAPPING[tagName] &&
621 |             ELEMENT_ATTRIBUTE_MAPPING[tagName][attribute.name]) ||
622 |           ATTRIBUTE_MAPPING[attribute.name] ||
623 |           attribute.name;
624 |         var result = name;
625 | 
626 |         // Numeric values should be output as {123} not "123"
627 |         if (isNumeric(attribute.value)) {
628 |           result += '={' + attribute.value + '}';
629 |         } else if (attribute.value.length > 0) {
630 |           result += '="' + attribute.value.replace(/"/gm, '&quot;') + '"';
631 |         } else if(attribute.value.length === 0 && attribute.name === 'alt') {
632 |           result += '=""';
633 |         }
634 |         return result;
635 |     }
636 |   },
637 | 
638 |   /**
639 |    * Gets a JSX formatted version of the specified element styles
640 |    *
641 |    * @param {string} styles
642 |    * @return {string}
643 |    */
644 |   _getStyleAttribute: function(styles) {
645 |     var jsxStyles = new StyleParser(styles).toJSXString();
646 |     return 'style={{' + jsxStyles + '}}';
647 |   },
648 | 
649 |   /**
650 |    * Removes class-level indention in the JSX output. To be used when the JSX
651 |    * output is configured to not contain a class deifinition.
652 |    *
653 |    * @param {string} output JSX output with class-level indention
654 |    * @param {string} indent Configured indention
655 |    * @return {string} JSX output wihtout class-level indention
656 |    */
657 |   _removeJSXClassIndention: function(output, indent) {
658 |     var classIndention = new RegExp('\\n' + indent + indent + indent,  'g');
659 |     return output.replace(classIndention, '\n');
660 |   }
661 | };
662 | 
663 | /**
664 |  * Handles parsing of inline styles
665 |  *
666 |  * @param {string} rawStyle Raw style attribute
667 |  * @constructor
668 |  */
669 | var StyleParser = function(rawStyle) {
670 |   this.parse(rawStyle);
671 | };
672 | StyleParser.prototype = {
673 |   /**
674 |    * Parse the specified inline style attribute value
675 |    * @param {string} rawStyle Raw style attribute
676 |    */
677 |   parse: function(rawStyle) {
678 |     this.styles = {};
679 |     rawStyle.split(';').forEach(function(style) {
680 |       style = style.trim();
681 |       var firstColon = style.indexOf(':');
682 |       var key = style.substr(0, firstColon);
683 |       var value = style.substr(firstColon + 1).trim();
684 |       if (key !== '') {
685 |         // Style key should be case insensitive
686 |         key = key.toLowerCase();
687 |         this.styles[key] = value;
688 |       }
689 |     }, this);
690 |   },
691 | 
692 |   /**
693 |    * Convert the style information represented by this parser into a JSX
694 |    * string
695 |    *
696 |    * @return {string}
697 |    */
698 |   toJSXString: function() {
699 |     var output = [];
700 |     eachObj(this.styles, function(key, value) {
701 |       output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(value));
702 |     }, this);
703 |     return output.join(', ');
704 |   },
705 | 
706 |   /**
707 |    * Convert the CSS style key to a JSX style key
708 |    *
709 |    * @param {string} key CSS style key
710 |    * @return {string} JSX style key
711 |    */
712 |   toJSXKey: function(key) {
713 |     // Don't capitalize -ms- prefix
714 |     if(/^-ms-/.test(key)) {
715 |       key = key.substr(1);
716 |     }
717 |     return hyphenToCamelCase(key);
718 |   },
719 | 
720 |   /**
721 |    * Convert the CSS style value to a JSX style value
722 |    *
723 |    * @param {string} value CSS style value
724 |    * @return {string} JSX style value
725 |    */
726 |   toJSXValue: function(value) {
727 |     if (isNumeric(value)) {
728 |       // If numeric, no quotes
729 |       return value;
730 |     } else {
731 |       // Probably a string, wrap it in quotes
732 |       return '\'' + value.replace(/'/g, '"') + '\'';
733 |     }
734 |   }
735 | };
736 | 
737 | module.exports = HTMLtoJSX;
738 | 


--------------------------------------------------------------------------------
/src/magic.js:
--------------------------------------------------------------------------------
  1 | /** @preserve
  2 |  *  Copyright (c) 2014, Facebook, Inc.
  3 |  *  All rights reserved.
  4 |  *
  5 |  *  This source code is licensed under the BSD-style license found in the
  6 |  *  LICENSE file in the root directory of this source tree. An additional grant
  7 |  *  of patent rights can be found in the PATENTS file in the same directory.
  8 |  *
  9 |  */
 10 | 'use strict';
 11 | 
 12 | var HTMLtoJSX = require('./htmltojsx');
 13 | 
 14 | var converter;
 15 | 
 16 | var ALLOWED_CONTENT_TYPES = ['text/html', 'text/plain'];
 17 | 
 18 | /**
 19 |  * Does an AJAX load of the specified URL.
 20 |  *
 21 |  * @param {String} url        URL to load
 22 |  * @param {Object} rawData    Object containing data to send in request. If
 23 |  *                            specified, a post is done. Otherwise, a get is
 24 |  *                            done.
 25 |  * @param {Function} callback Function to call once request returns
 26 |  */
 27 | function load(url, rawData, callback) {
 28 |   var xhr = new XMLHttpRequest();
 29 |   var data;
 30 |   if (rawData) {
 31 |     // Assume anything with data is a POST request
 32 |     xhr.open('post', url, true);
 33 |     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 34 | 
 35 |     data = Object.keys(rawData)
 36 |       .map(function(key) {
 37 |         return encodeURIComponent(key) + '=' + encodeURIComponent(rawData[key]);
 38 |       })
 39 |       .join('&');
 40 |   } else {
 41 |     // No data, use a GET request
 42 |     xhr.open('get', url + '?cachebust=' + Date.now(), true);
 43 |   }
 44 | 
 45 |   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 46 |   xhr.onreadystatechange = function() {
 47 |     if (xhr.readyState === 4) {
 48 |       callback(xhr.responseText, xhr);
 49 |     }
 50 |   }
 51 |   xhr.send(data);
 52 |   return xhr;
 53 | }
 54 | 
 55 | /**
 56 |  * Creates a React component from the specified HTML. First converts the HTML
 57 |  * to JSX, then executes the JSX to create the virtual DOM.
 58 |  *
 59 |  * @param {String} html HTML to convert
 60 |  * @return {Object} React virtual DOM representation
 61 |  */
 62 | function reactComponentFromHTML(html) {
 63 |   var jsx = '/** @jsx React.DOM */ ' + converter.convert(html);
 64 |   try {
 65 |     return JSXTransformer.exec(jsx);
 66 |   } catch (ex) {
 67 |     throw new Error('Something bad happened when transforming HTML to JSX: ' + ex);
 68 |     console.log(jsx);
 69 |     window.location.reload()
 70 |   }
 71 | }
 72 | 
 73 | /**
 74 |  * Renders the specified HTML to the body, by converting it to a React
 75 |  * component then rendering the component. Rather than blowing away and
 76 |  * overwriting the body, React will handle state transition from the existing
 77 |  * state to the new state.
 78 |  *
 79 |  * @param {String} html HTML to render
 80 |  */
 81 | function render(html) {
 82 |   var processed = reactComponentFromHTML(html);
 83 |   React.render(processed, document.body);
 84 | }
 85 | 
 86 | /**
 87 |  * Handles a click event on the body. Uses pushState to change the current
 88 |  * page state, and trigger the AJAX load of the next page.
 89 |  *
 90 |  * @param {MouseEvent} event
 91 |  */
 92 | function handleClick(event) {
 93 |   // We only care about clicks on links
 94 |   if (
 95 |     !event.target
 96 |     || !event.target.tagName
 97 |     || event.target.tagName.toLowerCase() != 'a'
 98 |   ) {
 99 |     return;
100 |   }
101 |   history.pushState(null, null, event.target.href);
102 |   handleStateChange();
103 |   event.preventDefault();
104 | }
105 | 
106 | /**
107 |  * Handles a form submission. For now, assumes all forms are POST forms.
108 |  *
109 |  * @param {Event} event
110 |  */
111 | function handleSubmit(event) {
112 |   var formValues = serialiseForm(event.target);
113 |   history.pushState({ formValues: formValues }, null, event.target.action);
114 |   handleStateChange();
115 |   event.preventDefault();
116 | }
117 | 
118 | /**
119 |  * Called when the page state is changed, either through clicking a link,
120 |  * submitting a form, or the user using the browser's Back/Forward navigation
121 |  */
122 | function handleStateChange() {
123 |   document.title = 'Loading...';
124 |   document.body.classList.add('react-loading');
125 |   load(
126 |     window.location.href,
127 |     history.state && history.state.formValues,
128 |     loadComplete
129 |   );
130 | }
131 | 
132 | /**
133 |  * Called when a page is successfully AJAX loaded.
134 |  *
135 |  * @param {String} content Response from the server
136 |  * @param {XMLHttpRequest} xhr
137 |  */
138 | function loadComplete(content, xhr) {
139 |   // Force a full page load if it's not a compatible content type or a
140 |   // non-2xx status code
141 |   var contentType = xhr.getResponseHeader('Content-Type').split(';')[0];
142 |   var shouldDoFullLoad =
143 |     ALLOWED_CONTENT_TYPES.indexOf(contentType) === -1 ||
144 |     xhr.status < 200 ||
145 |     xhr.status > 299;
146 |   if (shouldDoFullLoad) {
147 |     window.location.reload();
148 |     return;
149 |   }
150 | 
151 |   var body = getTagContent(content, 'body');
152 |   var title = getTagContent(content, 'title');
153 |   document.title = title;
154 |   render(body);
155 |   document.body.classList.remove('react-loading');
156 | }
157 | 
158 | /**
159 |  * Serlialises all the fields in the specified form, for posting in an AJAX
160 |  * request.
161 |  *
162 |  * @param {FormElement} form
163 |  * @return {Object} Form data
164 |  */
165 | function serialiseForm(form) {
166 |   var values = {};
167 |   var inputs = form.getElementsByTagName('input');
168 |   for (var i = 0, count = inputs.length; i < count; i++) {
169 |     var input = inputs[i];
170 |     // Ignore unselected checkboxes or radio buttons
171 |     if ((input.type === 'checkbox' || input.type === 'radio') && !input.checked) {
172 |       continue;
173 |     }
174 |     values[inputs[i].name] = inputs[i].value;
175 |   }
176 |   return values;
177 | }
178 | 
179 | /**
180 |  * Ugly hacky way to find the body of the response. ಠ_ಠ
181 |  *
182 |  * @param {String} content Response from the server
183 |  * @param {String} tag     HTML tag to look for
184 |  * @return {String} Content contained within the specified HTML tag
185 |  */
186 | function getTagContent(content, tag) {
187 |   var tagStart = '<' + tag;
188 |   var tagEnd = '</' + tag;
189 |   var tagStartPos = content.indexOf(tagStart);
190 |   var tagStartPos2 = content.indexOf('>', tagStartPos);
191 |   var tagEndPos = content.lastIndexOf(tagEnd);
192 | 
193 |   var tagContent = content.slice(tagStartPos2 + 1, tagEndPos);
194 |   return tagContent;
195 | }
196 | 
197 | /**
198 |  * Initialise the magic.
199 |  */
200 | function init() {
201 |   converter = new HTMLtoJSX({
202 |     createClass: false
203 |   });
204 |   var initialHTML = document.body.innerHTML;
205 | 
206 |   // Re-render existing content using React, so state transitions work
207 |   // correctly.
208 |   render(initialHTML);
209 |   // Temporary hack
210 |   // TODO: Figure out why doing this twice behaves slightly
211 |   // differently (extra DIV wrapper for first render??)
212 |   render(initialHTML);
213 | 
214 |   initEvents();
215 | }
216 | 
217 | function initEvents() {
218 |   document.body.addEventListener('click', handleClick, false);
219 |   document.body.addEventListener('submit', handleSubmit, false);
220 |   window.addEventListener('popstate', handleStateChange, false);
221 | }
222 | 
223 | init();
224 | 


--------------------------------------------------------------------------------
/test/htmltojsx-test.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *  Copyright (c) 2014, Facebook, Inc.
  3 |  *  All rights reserved.
  4 |  *
  5 |  *  This source code is licensed under the BSD-style license found in the
  6 |  *  LICENSE file in the root directory of this source tree. An additional grant
  7 |  *  of patent rights can be found in the PATENTS file in the same directory.
  8 |  *
  9 |  */
 10 | 'use strict';
 11 | 
 12 | describe('htmltojsx', function() {
 13 |   it('should handle basic HTML', function() {
 14 |     var converter = new HTMLtoJSX({ createClass: false });
 15 |     expect(converter.convert('<div>Hello world!</div>').trim())
 16 |       .toBe('<div>Hello world!</div>');
 17 |   });
 18 | 
 19 |   it('should handle HTML comments', function() {
 20 |     var converter = new HTMLtoJSX({ createClass: false });
 21 |     expect(converter.convert('<!-- Hello World -->').trim())
 22 |       .toBe('{/* Hello World */}');
 23 |   });
 24 | 
 25 |   it('should convert tags to lowercase', function() {
 26 |     var converter = new HTMLtoJSX({ createClass: false });
 27 |     expect(converter.convert('<DIV>Hello world!</DIV>').trim())
 28 |       .toBe('<div>Hello world!</div>');
 29 |   });
 30 | 
 31 |   it('should strip single-line script tag', function() {
 32 |     var converter = new HTMLtoJSX({ createClass: false });
 33 |     expect(converter.convert('<div>foo<script>lol</script>bar</div>').trim())
 34 |       .toBe('<div>foobar</div>');
 35 |   });
 36 | 
 37 |   it('should strip multi-line script tag', function() {
 38 |     var converter = new HTMLtoJSX({ createClass: false });
 39 |     expect(converter.convert(
 40 | '<div>foo<script>\n' +
 41 | 'lol\n' +
 42 | 'lolz\n' +
 43 | '</script>bar</div>').trim())
 44 |       .toBe('<div>foobar</div>');
 45 |   });
 46 | 
 47 |   it('should create a new React component', function() {
 48 |     var converter = new HTMLtoJSX({
 49 |       createClass: true,
 50 |       outputClassName: 'FooComponent'
 51 |     });
 52 |     var result = converter.convert('<div>Hello world!</div>');
 53 |     expect(result).toBe(
 54 |       'var FooComponent = React.createClass({\n' +
 55 |       '  render: function() {\n' +
 56 |       '    return (\n' +
 57 |       '\n' +
 58 |       '      <div>Hello world!</div>\n' +
 59 |       '    );\n' +
 60 |       '  }\n' +
 61 |       '});'
 62 |     );
 63 |   });
 64 | 
 65 |   it('should create a new React without var name', function() {
 66 |     var converter = new HTMLtoJSX({
 67 |       createClass: true
 68 |     });
 69 |     var result = converter.convert('<div>Hello world!</div>');
 70 |     expect(result).toBe(
 71 |       'React.createClass({\n' +
 72 |       '  render: function() {\n' +
 73 |       '    return (\n' +
 74 |       '\n' +
 75 |       '      <div>Hello world!</div>\n' +
 76 |       '    );\n' +
 77 |       '  }\n' +
 78 |       '});'
 79 |     );
 80 |   });
 81 | 
 82 |   it('should wrap HTML with a div when multiple top-level', function() {
 83 |     var converter = new HTMLtoJSX({
 84 |       createClass: true,
 85 |       outputClassName: 'FooComponent'
 86 |     });
 87 |     var result = converter.convert('<span>1</span><span>2</span>');
 88 |     expect(result).toBe([
 89 |       'var FooComponent = React.createClass({',
 90 |       '  render: function() {',
 91 |       '    return (',
 92 |       '      <div>',
 93 |       '        <span>1</span><span>2</span>',
 94 |       '      </div>',
 95 |       '    );',
 96 |       '  }',
 97 |       '});'
 98 |     ].join('\n'));
 99 |   });
100 | 
101 |   describe('escaped characters', function() {
102 |     it('should handle escaped < symbols', function() {
103 |       var converter = new HTMLtoJSX({ createClass: false });
104 |       expect(converter.convert('<div>&lt;</div>').trim())
105 |         .toBe('<div>&lt;</div>');
106 |     });
107 | 
108 |     it('should handle unescaped copyright symbols', function() {
109 |       var converter = new HTMLtoJSX({ createClass: false });
110 |       expect(converter.convert('<div>©</div>').trim())
111 |         .toBe('<div>©</div>');
112 |     });
113 |   });
114 | 
115 |   describe('Attribute transformations', function() {
116 |     it('should convert basic "style" attributes', function() {
117 |       var converter = new HTMLtoJSX({ createClass: false });
118 |       expect(converter.convert('<div style="color: red">Test</div>').trim())
119 |         .toBe('<div style={{color: \'red\'}}>Test</div>');
120 |     });
121 | 
122 |     it('should convert CSS shorthand "style" values', function() {
123 |       var converter = new HTMLtoJSX({ createClass: false });
124 |       expect(converter.convert('<div style="padding: 10px 15px 20px 25px;">Test</div>').trim())
125 |         .toBe('<div style={{padding: \'10px 15px 20px 25px\'}}>Test</div>');
126 |     });
127 | 
128 |     it('should convert numeric "style" attributes', function() {
129 |       var converter = new HTMLtoJSX({ createClass: false });
130 |       expect(converter.convert('<div style="width: 100px">Test</div>').trim())
131 |         .toBe('<div style={{width: 100}}>Test</div>');
132 |     });
133 | 
134 |     it('should convert dashed "style" attributes', function() {
135 |       var converter = new HTMLtoJSX({ createClass: false });
136 |       expect(converter.convert('<div style="font-size: 12pt">Test</div>').trim())
137 |         .toBe('<div style={{fontSize: \'12pt\'}}>Test</div>');
138 |     });
139 | 
140 |     it('should convert vendor-prefix "style" attributes', function() {
141 |       var converter = new HTMLtoJSX({ createClass: false });
142 |       expect(converter.convert('<div style="-moz-hyphens: auto; -webkit-hyphens: auto">Test</div>').trim())
143 |         .toBe('<div style={{MozHyphens: \'auto\', WebkitHyphens: \'auto\'}}>Test</div>');
144 |     });
145 | 
146 |     it('should convert uppercase vendor-prefix "style" attributes', function() {
147 |       var converter = new HTMLtoJSX({ createClass: false });
148 |       expect(converter.convert('<div style="-MOZ-HYPHENS: auto; -WEBKIT-HYPHENS: auto">Test</div>').trim())
149 |         .toBe('<div style={{MozHyphens: \'auto\', WebkitHyphens: \'auto\'}}>Test</div>');
150 |     });
151 | 
152 |     it('should convert "style" attributes with vendor prefix-like strings in the middle and mixed case', function() {
153 |       var converter = new HTMLtoJSX({ createClass: false });
154 |       expect(converter.convert('<div style="myclass-MOZ-HYPHENS: auto; myclass-WEBKIT-HYPHENS: auto">Test</div>').trim())
155 |         .toBe('<div style={{myclassMozHyphens: \'auto\', myclassWebkitHyphens: \'auto\'}}>Test</div>');
156 |     });
157 | 
158 |     it('should convert -ms- prefix "style" attributes', function() {
159 |       var converter = new HTMLtoJSX({ createClass: false });
160 |       expect(converter.convert('<div style="-ms-hyphens: auto">Test</div>').trim())
161 |         .toBe('<div style={{msHyphens: \'auto\'}}>Test</div>');
162 |     });
163 | 
164 |     it('should convert "style" attributes with -ms- in the middle', function() {
165 |       var converter = new HTMLtoJSX({ createClass: false });
166 |       expect(converter.convert('<div style="myclass-ms-hyphens: auto">Test</div>').trim())
167 |         .toBe('<div style={{myclassMsHyphens: \'auto\'}}>Test</div>');
168 |     });
169 | 
170 |     it('should convert uppercase "style" attributes', function() {
171 |       var converter = new HTMLtoJSX({ createClass: false });
172 |       expect(converter.convert('<div style="TEXT-ALIGN: center">Test</div>').trim())
173 |         .toBe('<div style={{textAlign: \'center\'}}>Test</div>');
174 |     });
175 | 
176 |     it('should convert "class" attribute', function() {
177 |       var converter = new HTMLtoJSX({ createClass: false });
178 |       expect(converter.convert('<div class="awesome">Test</div>').trim())
179 |         .toBe('<div className="awesome">Test</div>');
180 |     });
181 | 
182 |     it('should convert "for" attribute', function() {
183 |       var converter = new HTMLtoJSX({ createClass: false });
184 |       expect(converter.convert('<label for="potato">Test</label>').trim())
185 |         .toBe('<label htmlFor="potato">Test</label>');
186 |     });
187 | 
188 |     it('should convert "maxlength" attribute to "maxLength"', function() {
189 |       var converter = new HTMLtoJSX({ createClass: false });
190 |       expect(converter.convert('<input maxlength=2></input>').trim())
191 |         .toBe('<input maxLength={2} />');
192 |     });
193 | 
194 |     it('should convert "http-equiv" attribute to "httpEquiv"', function() {
195 |       var converter = new HTMLtoJSX({ createClass: false });
196 |       expect(converter.convert('<meta http-equiv="refresh">').trim())
197 |         .toBe('<meta httpEquiv="refresh" />');
198 |     });
199 | 
200 |     it('should convert "accept-charset" attribute to "acceptCharset"', function() {
201 |       var converter = new HTMLtoJSX({ createClass: false });
202 |       expect(converter.convert('<form accept-charset="UTF-8">Test</form>').trim())
203 |         .toBe('<form acceptCharset="UTF-8">Test</form>');
204 |     });
205 | 
206 |     it('should convert "enctype" attribute to "encType"', function() {
207 |       var converter = new HTMLtoJSX({ createClass: false });
208 |       expect(converter.convert('<form method="post" enctype="application/x-www-form-urlencoded">Test</form>').trim())
209 |         .toBe('<form method="post" encType="application/x-www-form-urlencoded">Test</form>');
210 |     });
211 | 
212 |     it('should maintain value-less attributes', function() {
213 |       var converter = new HTMLtoJSX({ createClass: false });
214 |       expect(converter.convert('<input disabled>').trim())
215 |         .toBe('<input disabled />');
216 |     });
217 | 
218 |     it('should set <input> "value" to "defaultValue" to allow input editing', function() {
219 |       var converter = new HTMLtoJSX({ createClass: false });
220 |         expect(converter.convert('<input value="Darth Vader">').trim())
221 |           .toBe('<input defaultValue="Darth Vader" />');
222 |     });
223 | 
224 |     it('should not set "value" to "defaultValue" for non-<input> elements', function() {
225 |       var converter = new HTMLtoJSX({ createClass: false });
226 |         expect(converter.convert('<select><option value="Hans"></select>').trim())
227 |           .toBe('<select><option value="Hans" /></select>');
228 |     });
229 | 
230 |     it('should set <input> "checked" to "defaultChecked" to allow box checking', function() {
231 |       var converter = new HTMLtoJSX({ createClass: false });
232 |         expect(converter.convert('<input type="checkbox" checked>').trim())
233 |           .toBe('<input type="checkbox" defaultChecked />');
234 |     });
235 | 
236 |     it('should convert SVG attributes', function() {
237 |       var converter = new HTMLtoJSX({ createClass: false });
238 |         expect(converter.convert('<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fill-rule="evenodd"/></svg>').trim())
239 |           .toBe('<svg height={100} width={100}><circle cx={50} cy={50} r={40} stroke="black" strokeWidth={3} fill="red" fillRule="evenodd" /></svg>');
240 |     });
241 |   });
242 | 
243 |   describe('special tags', function() {
244 |     it('should use "defaultValue" for textareas', function() {
245 |       var converter = new HTMLtoJSX({ createClass: false });
246 |       expect(converter.convert('<textarea>hello\nworld</textarea>').trim())
247 |         .toBe('<textarea defaultValue={"hello\\nworld"} />');
248 |     });
249 | 
250 |     it('should do magic voodoo for <pre>', function() {
251 |       var converter = new HTMLtoJSX({ createClass: false });
252 |       expect(converter.convert('<pre>hello\nworld{foo}</pre>').trim())
253 |         .toBe('<pre>hello{"\\n"}world{"{"}foo{"}"}</pre>');
254 |     });
255 | 
256 |     it('should handle <pre> tags with children', function() {
257 |       var converter = new HTMLtoJSX({ createClass: false });
258 |       expect(converter.convert(
259 |         '<pre><b>Hello world  yo</b>this   is   a<i>   test</i></pre>'
260 |       ).trim()).toBe(
261 |         '<pre><b>Hello world{"  "}yo</b>this{"   "}is{"   "}a<i>{"   "}test</i></pre>'
262 |       );
263 |     });
264 | 
265 |     it('should dangerously set <style> tag contents', function() {
266 |       var converter = new HTMLtoJSX({ createClass: false });
267 |       expect(converter.convert('<style>\nh1 {\n    background: url(\'http://foo.bar/img.jpg\';\n}\n</style>').trim())
268 |         .toBe('<style dangerouslySetInnerHTML={{__html: "\\nh1 {\\n    background: url(\'http://foo.bar/img.jpg\';\\n}\\n" }} />');
269 |     });
270 | 
271 |     it('should convert svg tag names', function() {
272 |       var converter = new HTMLtoJSX({ createClass: false });
273 |       expect(converter.convert('<svg><clipPath><feSpotLight><linearGradient></linearGradient></feSpotLight></clipPath></svg>').trim())
274 |         .toBe('<svg><clipPath><feSpotLight><linearGradient /></feSpotLight></clipPath></svg>');
275 |     });
276 |   });
277 | });
278 | 


--------------------------------------------------------------------------------
/test/test-helpers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  Copyright (c) 2014, Facebook, Inc.
 3 |  *  All rights reserved.
 4 |  *
 5 |  *  This source code is licensed under the BSD-style license found in the
 6 |  *  LICENSE file in the root directory of this source tree. An additional grant
 7 |  *  of patent rights can be found in the PATENTS file in the same directory.
 8 |  *
 9 |  */
10 | 'use strict';
11 | 
12 | // IE you kill me :'(
13 | if (!String.prototype.trim) {
14 |   String.prototype.trim = function () {
15 |     return this.replace(/^[\s\xA0]+|[\s\xA0]+$/g, '');
16 |   };
17 | }
18 | 


--------------------------------------------------------------------------------
/test/test.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |   <meta http-equiv="Content-Type" charset="UTF-8" />
 5 |   <title>React-Magic Tests</title>
 6 |   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css" />
 7 | </head>
 8 | <body>
 9 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
10 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
11 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>
12 | 
13 |   <!-- Source files -->
14 |   <script src="htmltojsx.js"></script>
15 | 
16 |   <!-- Spec files -->
17 |   <script src="test-helpers.js"></script>
18 |   <script src="htmltojsx-test.js"></script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------