add a new babel branch. deprecating JSTransform and react-tools

ruanyf · Aug 18, 2015 · 1f4f21e · 1f4f21e
1 parent 887591b
commit 1f4f21e
Show file tree

Hide file tree

Showing 19 changed files with 123 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 example/
+node_modules
diff --git a/README.md b/README.md
@@ -19,11 +19,11 @@ Then play with the source files under the repo's demo* directories.
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 
       // ** Our code goes here! **
 
@@ -59,7 +59,7 @@ React.render(
 );
 ```
 
-Please be minded that you have to use `<script type="text/jsx">` to indicate JSX codes, and include `JSXTransformer.js` to actually perform the transformation in the browser.
+Please be minded that you have to use `<script type="text/babel">` to indicate JSX codes, and include `browser.min.js` to actually perform the transformation in the browser. `browser.min.js` is a browser version of Babel which could be get inside a babel-core npm release.
 
 ## Demo02: Use JavaScript in JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html))
 

diff --git a/build/browser.min.js b/build/browser.min.js
diff --git a/demo01/index.html b/demo01/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       React.render(
         <h1>Hello, world!</h1>,
         document.getElementById('example')

diff --git a/demo02/index.html b/demo02/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       var names = ['Alice', 'Emily', 'Kate'];
 
       React.render(

diff --git a/demo03/index.html b/demo03/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       var arr = [
         <h1>Hello world!</h1>,
         <h2>React is awesome</h2>,

diff --git a/demo04/index.html b/demo04/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
       var HelloMessage = React.createClass({
         render: function() {
           return <h1>Hello {this.props.name}</h1>;

diff --git a/demo05/index.html b/demo05/index.html
@@ -2,10 +2,10 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
-    <script type="text/jsx">
+    <script type="text/babel">
       var NotesList = React.createClass({
         render: function() {
           return (

diff --git a/demo06/index.html b/demo06/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 var MyComponent = React.createClass({
   handleClick: function() {
     React.findDOMNode(this.refs.myTextInput).focus();

diff --git a/demo07/index.html b/demo07/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
-    <script type="text/jsx">
+    <script type="text/babel">
 var LikeButton = React.createClass({
   getInitialState: function() {
     return {liked: false};

diff --git a/demo08/index.html b/demo08/index.html
@@ -2,10 +2,10 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
-    <script type="text/jsx">
+    <script type="text/babel">
       var Input = React.createClass({
         getInitialState: function() {
           return {value: 'Hello!'};

diff --git a/demo09/index.html b/demo09/index.html
@@ -2,10 +2,10 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
   </head>
   <body>
-    <script type="text/jsx">
+    <script type="text/babel">
       var Hello = React.createClass({
         getInitialState: function () {
           return {

diff --git a/demo10/index.html b/demo10/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <script src="../build/react.js"></script>
-    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/browser.min.js"></script>
     <script src="../build/jquery.min.js"></script>
   </head>
   <body>
-    <script type="text/jsx">
+    <script type="text/babel">
 var UserGist = React.createClass({
   getInitialState: function() {
     return {

diff --git a/demo11/README.md b/demo11/README.md
@@ -5,7 +5,7 @@ This demo is copied from [github.com/mhart/react-server-example](https://github.
 $ npm install
 
 # translate all jsx file in src subdirectory to js file
-$ jsx src/ .
+$ npm run build
 
 # launch http server
 $ node server.js

diff --git a/demo11/app.js b/demo11/app.js
@@ -1,38 +1,49 @@
+'use strict';
+
 var React = require('react');
 
-module.exports = React.createClass({displayName: "exports",
+module.exports = React.createClass({
+  displayName: 'exports',
 
-  getInitialState: function() {
+  getInitialState: function getInitialState() {
     return {
       items: this.props.items,
       disabled: true
-    }
+    };
   },
 
-  componentDidMount: function() {
+  componentDidMount: function componentDidMount() {
     this.setState({
       disabled: false
-    })
+    });
   },
 
-  handleClick: function() {
+  handleClick: function handleClick() {
     this.setState({
       items: this.state.items.concat('Item ' + this.state.items.length)
-    })
+    });
   },
 
-  render: function() {
-    return (
-      React.createElement("div", null, 
-        React.createElement("button", {onClick: this.handleClick, disabled: this.state.disabled}, "Add Item"), 
-        React.createElement("ul", null, 
-
-          this.state.items.map(function(item) {
-            return React.createElement("li", null, item)
-          })
-
-        )
+  render: function render() {
+    return React.createElement(
+      'div',
+      null,
+      React.createElement(
+        'button',
+        { onClick: this.handleClick, disabled: this.state.disabled },
+        'Add Item'
+      ),
+      React.createElement(
+        'ul',
+        null,
+        this.state.items.map(function (item) {
+          return React.createElement(
+            'li',
+            null,
+            item
+          );
+        })
       )
-    )
-  },
-});
+    );
+  }
+});
diff --git a/demo11/browser.js b/demo11/browser.js
@@ -1,4 +1,6 @@
+'use strict';
+
 var React = require('react');
 var App = require('./app');
 
-React.render(React.createElement(App, {items: window.APP_PROPS.items}), document.getElementById('content'));
+React.render(React.createElement(App, { items: window.APP_PROPS.items }), document.getElementById('content'));
diff --git a/demo11/package.json b/demo11/package.json
@@ -4,6 +4,7 @@
   "description": "an example of react.js in server",
   "main": "server.js",
   "scripts": {
+    "build": "babel -d . src/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "ruanyf",
@@ -14,6 +15,6 @@
     "react": "~0.13.1"
   },
   "devDependencies": {
-    "react-tools": "~0.13.1"
+    "babel": "~5.8.21"
   }
 }
diff --git a/demo11/server.js b/demo11/server.js
@@ -1,48 +1,38 @@
+'use strict';
+
 var http = require('http'),
     browserify = require('browserify'),
     literalify = require('literalify'),
     React = require('react');
 
 var App = require('./app');
 
-http.createServer(function(req, res) {
+http.createServer(function (req, res) {
   if (req.url == '/') {
     res.setHeader('Content-Type', 'text/html');
     var props = {
-      items: [
-        'Item 0',
-        'Item 1'
-      ]
+      items: ['Item 0', 'Item 1']
     };
-    var html = React.renderToStaticMarkup(
-      React.createElement("body", null, 
-        React.createElement("div", {id: "content", dangerouslySetInnerHTML: {__html:
-          React.renderToString(React.createElement(App, {items: props.items}))
-        }}), ",", 
-
-        React.createElement("script", {dangerouslySetInnerHTML: {__html:
-        'var APP_PROPS = ' + JSON.stringify(props) + ';'
-        }}), 
-        React.createElement("script", {src: "//fb.me/react-0.13.1.min.js"}), 
-        React.createElement("script", {src: "/bundle.js"})
-      )
-    );
+    var html = React.renderToStaticMarkup(React.createElement(
+      'body',
+      null,
+      React.createElement('div', { id: 'content', dangerouslySetInnerHTML: { __html: React.renderToString(React.createElement(App, { items: props.items }))
+        } }),
+      ',',
+      React.createElement('script', { dangerouslySetInnerHTML: { __html: 'var APP_PROPS = ' + JSON.stringify(props) + ';'
+        } }),
+      React.createElement('script', { src: '//fb.me/react-0.13.3.min.js' }),
+      React.createElement('script', { src: '/bundle.js' })
+    ));
     res.end(html);
-
   } else if (req.url == '/bundle.js') {
     res.setHeader('Content-Type', 'text/javascript');
-    browserify()
-      .add('./browser.js')
-      .transform(literalify.configure({react: 'window.React'}))
-      .bundle()
-      .pipe(res);
-
+    browserify().add('./browser.js').transform(literalify.configure({ react: 'window.React' })).bundle().pipe(res);
   } else {
     res.statusCode = 404;
     res.end();
   }
-}).listen(3000, function(err) {
+}).listen(3000, function (err) {
   if (err) throw err;
   console.log('Listening on 3000...');
-})
-
+});
diff --git a/demo11/src/server.js b/demo11/src/server.js
@@ -23,7 +23,7 @@ http.createServer(function(req, res) {
         <script dangerouslySetInnerHTML={{__html:
         'var APP_PROPS = ' + JSON.stringify(props) + ';'
         }}/>
-        <script src="//fb.me/react-0.13.1.min.js"/>
+        <script src="//fb.me/react-0.13.3.min.js"/>
         <script src="/bundle.js"/>
       </body>
     );