Skip to content

Commit 6b22f18

Browse files
weblogixxweblogixx
committed
*ADD* Fallback: Added .jsx suffix support for new components (Resolves #99)
1 parent 9fd0f0a commit 6b22f18

File tree

6 files changed

+83
-51
lines changed

6 files changed

+83
-51
lines changed

‎app/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,26 @@ ReactWebpackGenerator.prototype.askForStylesLanguage = function () {
107107
}.bind(this));
108108
};
109109

110+
// Allow to set the generated files suffix for the project when using components
111+
// @see https://github.com/newtriks/generator-react-webpack/issues/99
112+
ReactWebpackGenerator.prototype.askForComponentSuffix = function() {
113+
var done = this.async();
114+
this.prompt({
115+
type: 'list',
116+
name: 'componentSuffix',
117+
message: 'Which file suffix do you want to use for actions?',
118+
choices: [
119+
{ name: '.js (default)', value: 'js' },
120+
{ name: '.jsx (deprecated)', value: 'jsx' }
121+
],
122+
default: 'js'
123+
}, function (props) {
124+
this.env.options.componentSuffix = props.componentSuffix;
125+
this.config.set('component-suffix', props.componentSuffix);
126+
done();
127+
}.bind(this));
128+
};
129+
110130
ReactWebpackGenerator.prototype.readIndex = function readIndex() {
111131
this.indexFile = this.engine(this.read('../../templates/common/index.html'), this);
112132
};

‎script-base.js

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,51 @@ var yeoman = require('yeoman-generator');
55
var generalUtils = require('./util.js');
66

77
var Generator = module.exports = function Generator() {
8-
yeoman.generators.NamedBase.apply(this, arguments);
8+
yeoman.generators.NamedBase.apply(this, arguments);
99

10-
// Add capitalize mixin
10+
// Add capitalize mixin
1111
this._.mixin({ 'capitalize': generalUtils.capitalize });
1212
this._.mixin({ 'capitalizeFile': generalUtils.capitalizeFile });
13-
this._.mixin({ 'capitalizeClass': generalUtils.capitalizeClass });
14-
this._.mixin({ 'lowercase': generalUtils.lowercase });
13+
this._.mixin({ 'capitalizeClass': generalUtils.capitalizeClass });
14+
this._.mixin({ 'lowercase': generalUtils.lowercase });
1515

16-
this.appname = path.basename(process.cwd());
16+
this.appname = path.basename(process.cwd());
1717

18-
this.appname = this._.slugify(this._.humanize(this.appname));
19-
this.scriptAppName = this._.camelize(this._.capitalize(this.appname)) + generalUtils.appName(this);
20-
this.classedFileName = this._.capitalizeFile(this.name);
18+
this.appname = this._.slugify(this._.humanize(this.appname));
19+
this.scriptAppName = this._.camelize(this._.capitalize(this.appname)) + generalUtils.appName(this);
20+
this.classedFileName = this._.capitalizeFile(this.name);
2121
this.classedName = this._.capitalizeClass(this.name);
2222
this.stylesLanguage = this.config.get('styles-language');
2323
this.architecture = this.config.get('architecture');
2424

25-
if (typeof this.options.appPath === 'undefined') {
26-
this.options.appPath = this.options.appPath || 'src';
27-
}
25+
if (typeof this.options.appPath === 'undefined') {
26+
this.options.appPath = this.options.appPath || 'src';
27+
}
2828

29-
if (typeof this.options.testPath === 'undefined') {
30-
this.options.testPath = this.options.testPath || 'test/spec';
31-
}
29+
if (typeof this.options.testPath === 'undefined') {
30+
this.options.testPath = this.options.testPath || 'test/spec';
31+
}
3232

33-
if (typeof this.options.stylesPath === 'undefined') {
34-
this.options.stylesPath = this.options.stylesPath || 'src/styles';
35-
}
33+
if (typeof this.options.stylesPath === 'undefined') {
34+
this.options.stylesPath = this.options.stylesPath || 'src/styles';
35+
}
3636

37-
var sourceRoot = '/templates/';
38-
this.scriptSuffix = '.js';
39-
this.reactSuffix = '.js';
37+
var sourceRoot = '/templates/';
38+
this.scriptSuffix = '.js';
39+
this.reactSuffix = '.js';
4040

41-
this.stylesSuffix = '.css';
41+
// Add support for generated file legacy fallback
42+
// @see https://github.com/newtriks/generator-react-webpack/issues/99
43+
this.reactComponentSuffix = this.config.get('component-suffix');
44+
switch(this.reactComponentSuffix) {
45+
case 'jsx':
46+
this.reactComponentSuffix = '.jsx';
47+
break;
48+
default:
49+
this.reactComponentSuffix = '.js';
50+
}
51+
52+
this.stylesSuffix = '.css';
4253

4354
switch(this.stylesLanguage) {
4455
case 'sass':
@@ -55,49 +66,49 @@ var Generator = module.exports = function Generator() {
5566
break;
5667
}
5768

58-
this.sourceRoot(path.join(__dirname, sourceRoot));
69+
this.sourceRoot(path.join(__dirname, sourceRoot));
5970
};
6071

6172
util.inherits(Generator, yeoman.generators.NamedBase);
6273

6374
Generator.prototype.appTemplate = function (src, dest) {
64-
yeoman.generators.Base.prototype.template.apply(this, [
65-
path.join('javascript', src + this.scriptSuffix),
66-
path.join(this.options.appPath, dest) + this.scriptSuffix
67-
]);
75+
yeoman.generators.Base.prototype.template.apply(this, [
76+
path.join('javascript', src + this.scriptSuffix),
77+
path.join(this.options.appPath, dest) + this.scriptSuffix
78+
]);
6879
};
6980

7081
Generator.prototype.reactComponentTemplate = function (src, dest) {
71-
yeoman.generators.Base.prototype.template.apply(this, [
72-
path.join('javascript', src + this.reactSuffix),
73-
path.join(this.options.appPath, dest) + this.reactSuffix
74-
]);
82+
yeoman.generators.Base.prototype.template.apply(this, [
83+
path.join('javascript', src + this.reactSuffix),
84+
path.join(this.options.appPath, dest) + this.reactComponentSuffix
85+
]);
7586
};
7687

7788
Generator.prototype.testTemplate = function (src, dest) {
78-
yeoman.generators.Base.prototype.template.apply(this, [
79-
src + this.scriptSuffix,
80-
path.join(this.options.testPath, dest) + this.scriptSuffix
81-
]);
89+
yeoman.generators.Base.prototype.template.apply(this, [
90+
src + this.scriptSuffix,
91+
path.join(this.options.testPath, dest) + this.scriptSuffix
92+
]);
8293
};
8394

8495
Generator.prototype.stylesTemplate = function (src, dest) {
85-
yeoman.generators.Base.prototype.template.apply(this, [
86-
src + this.stylesSuffix,
87-
path.join(this.options.stylesPath, dest) + this.stylesSuffix
88-
]);
96+
yeoman.generators.Base.prototype.template.apply(this, [
97+
src + this.stylesSuffix,
98+
path.join(this.options.stylesPath, dest) + this.stylesSuffix
99+
]);
89100
};
90101

91102
Generator.prototype.htmlTemplate = function (src, dest) {
92-
yeoman.generators.Base.prototype.template.apply(this, [
93-
src,
94-
path.join(this.options.appPath, dest.toLowerCase())
95-
]);
103+
yeoman.generators.Base.prototype.template.apply(this, [
104+
src,
105+
path.join(this.options.appPath, dest.toLowerCase())
106+
]);
96107
};
97108

98109
Generator.prototype.generateSourceAndTest = function (appTemplate, testTemplate, targetDirectory) {
99-
this.appTemplate(appTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
100-
this.testTemplate(testTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
110+
this.appTemplate(appTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
111+
this.testTemplate(testTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
101112
};
102113

103114
Generator.prototype.generateComponentTestAndStyle = function (componentTemplate, testTemplate, stylesTemplate, targetDirectory) {

‎templates/common/_webpack.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = {
2828
},
2929

3030
resolve: {
31-
extensions: ['', '.js'],
31+
extensions: ['', '.js', '.jsx'],
3232
alias: {
3333
'styles': __dirname + '/src/styles',
3434
'mixins': __dirname + '/src/mixins',
@@ -39,12 +39,12 @@ module.exports = {
3939
},
4040
module: {
4141
preLoaders: [{
42-
test: /\.js$/,
42+
test: /\.(js|jsx)$/,
4343
exclude: /node_modules/,
4444
loader: 'jsxhint'
4545
}],
4646
loaders: [{
47-
test: /\.js$/,
47+
test: /\.(js|jsx)$/,
4848
exclude: /node_modules/,
4949
loader: 'react-hot!babel-loader'
5050
},<% if (stylesLanguage === 'sass') { %> {

‎templates/common/karma.conf.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ module.exports = function (config) {
1313
'test/spec/actions/**/*.js'<% } %>
1414
],
1515
preprocessors: {
16-
'test/spec/components/**/*.js': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
16+
'test/spec/components/**/*.js': ['webpack'],
17+
'test/spec/components/**/*.jsx': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
1718
'test/spec/stores/**/*.js': ['webpack'],
1819
'test/spec/actions/**/*.js': ['webpack']<% } %>
1920
},
@@ -30,7 +31,7 @@ module.exports = function (config) {
3031
test: /\.png/,
3132
loader: 'url-loader?limit=10000&mimetype=image/png'
3233
}, {
33-
test: /\.js$/,
34+
test: /\.(js|jsx)$/,
3435
loader: 'babel-loader'
3536
},<% if (stylesLanguage === 'sass') { %> {
3637
test: /\.sass/,

‎templates/javascript/Component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ var <%= classedName %> = React.createClass({<% if(rich){%>
2323

2424
render: function () {
2525
return (
26-
<div>
26+
<div className="<%= classedName %>">
2727
<p>Content for <%= classedName %></p>
2828
</div>
2929
);

‎templates/spec/Component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('<%= classedName %>', function () {
55
var <%= classedName %>, component;
66

77
beforeEach(function () {
8-
<%= classedName %> = require('components/<%= classedFileName %>.js');
8+
<%= classedName %> = require('components/<%= classedFileName %><%= reactComponentSuffix %>');
99
component = React.createElement(<%= classedName %>);
1010
});
1111

0 commit comments

Comments
 (0)