From 83454b58860a785e7ae1716a4f3f9cbaaafb78bd Mon Sep 17 00:00:00 2001 From: andrewliebchen Date: Tue, 6 Jan 2015 21:43:19 -0800 Subject: [PATCH] Update to React 0.12.2 --- README.md | 14 ++++---------- script-base.js | 2 +- templates/common/_package.json | 18 +++++++++--------- templates/common/_webpack.config.js | 6 +++--- templates/common/_webpack.dist.config.js | 6 +++--- templates/common/karma.conf.js | 2 +- templates/javascript/{App.jsx => App.js} | 6 +----- .../javascript/{Component.jsx => Component.js} | 4 ---- templates/javascript/{main.jsx => main.js} | 2 -- templates/spec/Component.js | 2 +- test/test-creation.js | 6 +++--- 11 files changed, 26 insertions(+), 42 deletions(-) rename templates/javascript/{App.jsx => App.js} (83%) rename templates/javascript/{Component.jsx => Component.js} (96%) rename templates/javascript/{main.jsx => main.js} (93%) diff --git a/README.md b/README.md index 79c7d67..adfef91 100644 --- a/README.md +++ b/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 diff --git a/script-base.js b/script-base.js index 37e4a73..cdf008c 100644 --- a/script-base.js +++ b/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'; diff --git a/templates/common/_package.json b/templates/common/_package.json index cf22820..6e11b9e 100644 --- a/templates/common/_package.json +++ b/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" } } diff --git a/templates/common/_webpack.config.js b/templates/common/_webpack.config.js index 93f550f..38522f3 100644 --- a/templates/common/_webpack.config.js +++ b/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/, diff --git a/templates/common/_webpack.dist.config.js b/templates/common/_webpack.dist.config.js index 1bb78c7..d0946fa 100644 --- a/templates/common/_webpack.dist.config.js +++ b/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$/, diff --git a/templates/common/karma.conf.js b/templates/common/karma.conf.js index abedc4c..d47acfb 100644 --- a/templates/common/karma.conf.js +++ b/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' }] } diff --git a/templates/javascript/App.jsx b/templates/javascript/App.js similarity index 83% rename from templates/javascript/App.jsx rename to templates/javascript/App.js index d355251..091014d 100644 --- a/templates/javascript/App.jsx +++ b/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 %>; diff --git a/templates/javascript/Component.jsx b/templates/javascript/Component.js similarity index 96% rename from templates/javascript/Component.jsx rename to templates/javascript/Component.js index fe84508..6676e2f 100644 --- a/templates/javascript/Component.jsx +++ b/templates/javascript/Component.js @@ -1,7 +1,3 @@ -/** - * @jsx React.DOM - */ - 'use strict'; var React = require('react/addons'); diff --git a/templates/javascript/main.jsx b/templates/javascript/main.js similarity index 93% rename from templates/javascript/main.jsx rename to templates/javascript/main.js index 428dba4..73c3462 100644 --- a/templates/javascript/main.jsx +++ b/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'); diff --git a/templates/spec/Component.js b/templates/spec/Component.js index 9ae1e14..dabcd13 100644 --- a/templates/spec/Component.js +++ b/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 %>(); }); diff --git a/test/test-creation.js b/test/test-creation.js index dbbfa44..5d70a50 100644 --- a/test/test-creation.js +++ b/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')] ]);