Merge pull request #38 from andrewliebchen/update-react

Update to React 0.12.2

README.md

@@ -54,12 +54,8 @@ Example:
 yo react-webpack:component foo
 ```
 
-Produces `src/scripts/components/Foo.jsx` (*javascript - JSX*):
+Produces `src/scripts/components/Foo.js` (*javascript - JSX*):
 ```
-/**
- * @jsx React.DOM
- */
-
 'use strict';
 
 var React = require('react/addons');
@@ -79,7 +75,6 @@ module.exports = Foo;
 
 And `test/spec/components/Foo.js` (*javascript - jasmine*):
 ```
-
 'use strict';
 
 describe('Foo', function () {
@@ -98,7 +93,6 @@ describe('Foo', function () {
 
 And `src/styles/Foo.css`:
 ```
-
 .Foo{
   border: 1px dashed #f00;
 }
@@ -146,7 +140,7 @@ project
   karma.conf.js
 ```
 
-I have tried to keep the project structure as simple as possible and understand it may not suit everyone. 
+I have tried to keep the project structure as simple as possible and understand it may not suit everyone.
 
 ### Naming Components
 
@@ -160,10 +154,10 @@ Each component is a module and can be required using the [Webpack](http://webpac
 
 Out the box the [Gruntfile](http://gruntjs.com/api/grunt.file) is configured with the following:
 
-1. **webpack**: uses the [grunt-webpack](https://github.com/webpack/grunt-webpack) plugin to load all required modules and output to a single JS file `src/scripts/main.js`. This is included in the `src/index.html` file by default and will reload in the browser as and when it is recompiled. 
+1. **webpack**: uses the [grunt-webpack](https://github.com/webpack/grunt-webpack) plugin to load all required modules and output to a single JS file `src/scripts/main.js`. This is included in the `src/index.html` file by default and will reload in the browser as and when it is recompiled.
 2. **webpack-dev-server**: uses the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to watch for file changes and also serve the webpack app in development.
 3. **connect**: uses the [grunt-connect](https://github.com/gruntjs/grunt-contrib-connect) plugin to start a webserver at [localhost](http://localhost:8000).
-4. **karma**: uses the [grunt-karma](https://github.com/karma-runner/grunt-karma) plugin to load the Karma configuration file `karma.conf.js` located in the project root. This will run all tests using [PhantomJS](http://phantomjs.org/) by default but supports many other browsers. 
+4. **karma**: uses the [grunt-karma](https://github.com/karma-runner/grunt-karma) plugin to load the Karma configuration file `karma.conf.js` located in the project root. This will run all tests using [PhantomJS](http://phantomjs.org/) by default but supports many other browsers.
 
 ### CSS
 

script-base.js

@@ -35,7 +35,7 @@ var Generator = module.exports = function Generator() {
 
 	var sourceRoot = '/templates/';
 	this.scriptSuffix = '.js';
-	this.reactSuffix = '.jsx';
+	this.reactSuffix = '.js';
 
 	this.stylesSuffix = '.css';
 

templates/common/_package.json

@@ -10,15 +10,15 @@
   "mainInput": "<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>",
   "mainOutput": "main",
   "dependencies": {<% if (reactRouter) { %>
-    "react-router": "^0.7.0",<% } %>
-    "react": "~0.11.2"
+    "react-router": "^0.11.6",<% } %>
+    "react": "~0.12.2"
   },
   "devDependencies": {
     "grunt": "~0.4.5",
     "load-grunt-tasks": "~0.6.0",
     "grunt-contrib-connect": "~0.8.0",
     "webpack": "~1.4.3",
-    "jsx-loader": "~0.11.0",
+    "jsx-loader": "~0.12.2",
     "grunt-webpack": "~1.0.8",
     "style-loader": "~0.8.0",
     "url-loader": "~0.5.5",
@@ -35,12 +35,12 @@
     "grunt-open": "~0.2.3",
     "jshint-loader": "~0.8.0",
     "grunt-contrib-copy": "~0.5.0",<% if (es6) { %>
-    "6to5": "^1.10.10",
-    "6to5-loader": "^0.2.3",<% } %>
+    "6to5": "^2.7.1",
+    "6to5-loader": "^1.0.0",<% } %>
     "grunt-contrib-clean": "~0.6.0",<% if (stylesLanguage === 'sass') { %>
-    "sass-loader": "^0.2.0",<% } %><% if (stylesLanguage === 'less') { %>
-    "less-loader": "^0.7.7",<% } %><% if (stylesLanguage === 'stylus') { %>
-    "stylus-loader": "^0.4.0",<% } %>
-    "react-hot-loader": "^0.4.5"
+    "sass-loader": "^0.3.1",<% } %><% if (stylesLanguage === 'less') { %>
+    "less-loader": "^2.0.0",<% } %><% if (stylesLanguage === 'stylus') { %>
+    "stylus-loader": "^0.5.0",<% } %>
+    "react-hot-loader": "^1.0.7"
   }
 }

templates/common/_webpack.config.js

@@ -19,7 +19,7 @@ module.exports = {
   devtool: false,
   entry: [
       'webpack/hot/only-dev-server',
-      './src/scripts/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.jsx'
+      './src/scripts/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js'
   ],
 
   stats: {
@@ -28,7 +28,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['', '.js']
   },
   module: {
     preLoaders: [{
@@ -37,7 +37,7 @@ module.exports = {
       loader: 'jshint'
     }],
     loaders: [{
-      test: /\.jsx$/,
+      test: /\.js$/,
       loader: 'react-hot!<% if (es6) { %>6to5!<% }%>jsx-loader?harmony'
     },<% if (stylesLanguage === 'sass') { %> {
       test: /\.sass/,

templates/common/_webpack.dist.config.js

@@ -18,7 +18,7 @@ module.exports = {
 
   debug: false,
   devtool: false,
-  entry: './src/scripts/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.jsx',
+  entry: './src/scripts/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js',
 
   stats: {
     colors: true,
@@ -33,7 +33,7 @@ module.exports = {
   ],
 
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['', '.js']
   },
 
   module: {
@@ -44,7 +44,7 @@ module.exports = {
     }],
 
     loaders: [{
-      test: /\.jsx$/,
+      test: /\.js$/,
       loader: '<% if (es6) { %>6to5!<% }%>jsx-loader?harmony'
     }, {
       test: /\.css$/,

templates/common/karma.conf.js

@@ -27,7 +27,7 @@ module.exports = function (config) {
           test: /\.png/,
           loader: 'url-loader?limit=10000&mimetype=image/png'
         }, {
-          test: /\.jsx$/,
+          test: /\.js$/,
           loader: '<% if (es6) { %>6to5!<% }%>jsx-loader'
         }]
       }

templates/javascript/App.js

@@ -1,7 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
 'use strict';
 
 var React = require('react/addons');
@@ -28,6 +24,6 @@ var <%= scriptAppName %> = React.createClass({
   }
 });
 <% if (!reactRouter) {
-%>React.renderComponent(<<%= scriptAppName %> />, document.getElementById('content')); // jshint ignore:line
+%>React.render(<<%= scriptAppName %> />, document.getElementById('content')); // jshint ignore:line
 <% } %>
 module.exports = <%= scriptAppName %>;

templates/javascript/Component.js

@@ -1,7 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
 'use strict';
 
 var React = require('react/addons');

templates/javascript/main.js

@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var <%= scriptAppName %> = require('./<%= scriptAppName %>');
 var React = require('react');
 var {DefaultRoute, Route, Routes} = require('react-router');

templates/spec/Component.js

@@ -4,7 +4,7 @@ describe('<%= classedName %>', function () {
   var <%= classedName %>, component;
 
   beforeEach(function () {
-    <%= classedName %> = require('../../../src/scripts/components/<%= classedFileName %>.jsx');
+    <%= classedName %> = require('../../../src/scripts/components/<%= classedFileName %>.js');
     component = <%= classedName %>();
   });
 

test/test-creation.js

@@ -72,8 +72,8 @@ describe('react-webpack generator', function() {
       react.run({}, function() {
         setTimeout(function() {
           helpers.assertFile([].concat(expected, [
-            'src/scripts/components/TempTestApp.jsx',
-            'src/scripts/components/main.jsx'
+            'src/scripts/components/TempTestApp.js',
+            'src/scripts/components/main.js'
           ]));
           done();
         });
@@ -164,7 +164,7 @@ describe('react-webpack generator', function() {
         reactGenerator.run([], function() {
           helpers.assertFileContent([
 
-            [path.join('src/scripts', targetDirectory, name + '.jsx'), new RegExp('var ' + scriptNameFn(name) + suffix, 'g')],
+            [path.join('src/scripts', targetDirectory, name + '.js'), new RegExp('var ' + scriptNameFn(name) + suffix, 'g')],
             [path.join('test/spec', targetDirectory, name + '.js'), new RegExp('describe\\(\'' + specNameFn(name) + suffix + '\'', 'g')]
 
           ]);