*ADD* Fallback: Added .jsx suffix support for new components (Resolves newtriks/generator-react-webpack#99)

app/index.js

@@ -107,6 +107,26 @@ ReactWebpackGenerator.prototype.askForStylesLanguage = function () {
   }.bind(this));
 };
 
+// Allow to set the generated files suffix for the project when using components
+// @see https://github.com/newtriks/generator-react-webpack/issues/99
+ReactWebpackGenerator.prototype.askForComponentSuffix = function() {
+  var done = this.async();
+  this.prompt({
+    type: 'list',
+    name: 'componentSuffix',
+    message: 'Which file suffix do you want to use for actions?',
+    choices: [
+      { name: '.js (default)', value: 'js' },
+      { name: '.jsx (deprecated)', value: 'jsx' }
+    ],
+    default: 'js'
+  }, function (props) {
+    this.env.options.componentSuffix = props.componentSuffix;
+    this.config.set('component-suffix', props.componentSuffix);
+    done();
+  }.bind(this));
+};
+
 ReactWebpackGenerator.prototype.readIndex = function readIndex() {
   this.indexFile = this.engine(this.read('../../templates/common/index.html'), this);
 };

script-base.js

@@ -38,6 +38,17 @@ var Generator = module.exports = function Generator() {
   this.scriptSuffix = '.js';
   this.reactSuffix = '.js';
 
+  // Add support for generated file legacy fallback
+  // @see https://github.com/newtriks/generator-react-webpack/issues/99
+  this.reactComponentSuffix = this.config.get('component-suffix');
+  switch(this.reactComponentSuffix) {
+    case 'jsx':
+      this.reactComponentSuffix = '.jsx';
+      break;
+    default:
+      this.reactComponentSuffix = '.js';
+  }
+
   this.stylesSuffix = '.css';
 
     switch(this.stylesLanguage) {
@@ -70,7 +81,7 @@ Generator.prototype.appTemplate = function (src, dest) {
 Generator.prototype.reactComponentTemplate = function (src, dest) {
   yeoman.generators.Base.prototype.template.apply(this, [
     path.join('javascript', src + this.reactSuffix),
-		path.join(this.options.appPath, dest) + this.reactSuffix
+    path.join(this.options.appPath, dest) + this.reactComponentSuffix
   ]);
 };
 

templates/common/_webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js'],
+    extensions: ['', '.js', '.jsx'],
     alias: {
       'styles': __dirname + '/src/styles',
       'mixins': __dirname + '/src/mixins',
@@ -39,12 +39,12 @@ module.exports = {
   },
   module: {
     preLoaders: [{
-      test: /\.js$/,
+      test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       loader: 'jsxhint'
     }],
     loaders: [{
-      test: /\.js$/,
+      test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       loader: 'react-hot!babel-loader'
     },<% if (stylesLanguage === 'sass') { %> {

templates/common/karma.conf.js

@@ -13,7 +13,8 @@ module.exports = function (config) {
       'test/spec/actions/**/*.js'<% } %>
     ],
     preprocessors: {
-      'test/spec/components/**/*.js': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
+      'test/spec/components/**/*.js': ['webpack'],
+      'test/spec/components/**/*.jsx': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
       'test/spec/stores/**/*.js': ['webpack'],
       'test/spec/actions/**/*.js': ['webpack']<% } %>
     },
@@ -30,7 +31,7 @@ module.exports = function (config) {
           test: /\.png/,
           loader: 'url-loader?limit=10000&mimetype=image/png'
         }, {
-          test: /\.js$/,
+          test: /\.(js|jsx)$/,
           loader: 'babel-loader'
         },<% if (stylesLanguage === 'sass') { %> {
           test: /\.sass/,

templates/javascript/Component.js

@@ -23,7 +23,7 @@ var <%= classedName %> = React.createClass({<% if(rich){%>
 
   render: function () {
     return (
-        <div>
+        <div className="<%= classedName %>">
           <p>Content for <%= classedName %></p>
         </div>
       );

templates/spec/Component.js

@@ -5,7 +5,7 @@ describe('<%= classedName %>', function () {
   var <%= classedName %>, component;
 
   beforeEach(function () {
-    <%= classedName %> = require('components/<%= classedFileName %>.js');
+    <%= classedName %> = require('components/<%= classedFileName %><%= reactComponentSuffix %>');
     component = React.createElement(<%= classedName %>);
   });