archive-gh-me/generator-react-webpack
1
0
Fork 0
mirror of https://github.com/react-webpack-generators/generator-react-webpack.git synced 2025-12-08 18:01:59 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Chris 2015-05-12 16:28:11 +02:00
parent 9fd0f0ae54
commit 6b22f18bfc
6 changed files with 83 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/index.js
View File

@ -107,6 +107,26 @@ ReactWebpackGenerator.prototype.askForStylesLanguage = function () {
}.bind(this)); }.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() { ReactWebpackGenerator.prototype.readIndex = function readIndex() {
this.indexFile = this.engine(this.read('../../templates/common/index.html'), this); this.indexFile = this.engine(this.read('../../templates/common/index.html'), this);
}; };

99
script-base.js
View File

@ -5,40 +5,51 @@ var yeoman = require('yeoman-generator');
var generalUtils = require('./util.js'); var generalUtils = require('./util.js');
var Generator = module.exports = function Generator() { var Generator = module.exports = function Generator() {
yeoman.generators.NamedBase.apply(this, arguments); yeoman.generators.NamedBase.apply(this, arguments);
// Add capitalize mixin // Add capitalize mixin
this._.mixin({ 'capitalize': generalUtils.capitalize }); this._.mixin({ 'capitalize': generalUtils.capitalize });
this._.mixin({ 'capitalizeFile': generalUtils.capitalizeFile }); this._.mixin({ 'capitalizeFile': generalUtils.capitalizeFile });
this._.mixin({ 'capitalizeClass': generalUtils.capitalizeClass }); this._.mixin({ 'capitalizeClass': generalUtils.capitalizeClass });
this._.mixin({ 'lowercase': generalUtils.lowercase }); this._.mixin({ 'lowercase': generalUtils.lowercase });
this.appname = path.basename(process.cwd()); this.appname = path.basename(process.cwd());
this.appname = this._.slugify(this._.humanize(this.appname)); this.appname = this._.slugify(this._.humanize(this.appname));
this.scriptAppName = this._.camelize(this._.capitalize(this.appname)) + generalUtils.appName(this); this.scriptAppName = this._.camelize(this._.capitalize(this.appname)) + generalUtils.appName(this);
this.classedFileName = this._.capitalizeFile(this.name); this.classedFileName = this._.capitalizeFile(this.name);
this.classedName = this._.capitalizeClass(this.name); this.classedName = this._.capitalizeClass(this.name);
this.stylesLanguage = this.config.get('styles-language'); this.stylesLanguage = this.config.get('styles-language');
this.architecture = this.config.get('architecture'); this.architecture = this.config.get('architecture');
if (typeof this.options.appPath === 'undefined') { if (typeof this.options.appPath === 'undefined') {
this.options.appPath = this.options.appPath || 'src'; this.options.appPath = this.options.appPath || 'src';
} }
if (typeof this.options.testPath === 'undefined') { if (typeof this.options.testPath === 'undefined') {
this.options.testPath = this.options.testPath || 'test/spec'; this.options.testPath = this.options.testPath || 'test/spec';
} }
if (typeof this.options.stylesPath === 'undefined') { if (typeof this.options.stylesPath === 'undefined') {
this.options.stylesPath = this.options.stylesPath || 'src/styles'; this.options.stylesPath = this.options.stylesPath || 'src/styles';
} }
var sourceRoot = '/templates/'; var sourceRoot = '/templates/';
this.scriptSuffix = '.js'; this.scriptSuffix = '.js';
this.reactSuffix = '.js'; this.reactSuffix = '.js';
this.stylesSuffix = '.css'; // 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) { switch(this.stylesLanguage) {
case 'sass': case 'sass':
@ -55,49 +66,49 @@ var Generator = module.exports = function Generator() {
break; break;
} }
this.sourceRoot(path.join(__dirname, sourceRoot)); this.sourceRoot(path.join(__dirname, sourceRoot));
}; };
util.inherits(Generator, yeoman.generators.NamedBase); util.inherits(Generator, yeoman.generators.NamedBase);
Generator.prototype.appTemplate = function (src, dest) { Generator.prototype.appTemplate = function (src, dest) {
yeoman.generators.Base.prototype.template.apply(this, [ yeoman.generators.Base.prototype.template.apply(this, [
path.join('javascript', src + this.scriptSuffix), path.join('javascript', src + this.scriptSuffix),
path.join(this.options.appPath, dest) + this.scriptSuffix path.join(this.options.appPath, dest) + this.scriptSuffix
]); ]);
}; };
Generator.prototype.reactComponentTemplate = function (src, dest) { Generator.prototype.reactComponentTemplate = function (src, dest) {
yeoman.generators.Base.prototype.template.apply(this, [ yeoman.generators.Base.prototype.template.apply(this, [
path.join('javascript', src + this.reactSuffix), path.join('javascript', src + this.reactSuffix),
path.join(this.options.appPath, dest) + this.reactSuffix path.join(this.options.appPath, dest) + this.reactComponentSuffix
]); ]);
}; };
Generator.prototype.testTemplate = function (src, dest) { Generator.prototype.testTemplate = function (src, dest) {
yeoman.generators.Base.prototype.template.apply(this, [ yeoman.generators.Base.prototype.template.apply(this, [
src + this.scriptSuffix, src + this.scriptSuffix,
path.join(this.options.testPath, dest) + this.scriptSuffix path.join(this.options.testPath, dest) + this.scriptSuffix
]); ]);
}; };
Generator.prototype.stylesTemplate = function (src, dest) { Generator.prototype.stylesTemplate = function (src, dest) {
yeoman.generators.Base.prototype.template.apply(this, [ yeoman.generators.Base.prototype.template.apply(this, [
src + this.stylesSuffix, src + this.stylesSuffix,
path.join(this.options.stylesPath, dest) + this.stylesSuffix path.join(this.options.stylesPath, dest) + this.stylesSuffix
]); ]);
}; };
Generator.prototype.htmlTemplate = function (src, dest) { Generator.prototype.htmlTemplate = function (src, dest) {
yeoman.generators.Base.prototype.template.apply(this, [ yeoman.generators.Base.prototype.template.apply(this, [
src, src,
path.join(this.options.appPath, dest.toLowerCase()) path.join(this.options.appPath, dest.toLowerCase())
]); ]);
}; };
Generator.prototype.generateSourceAndTest = function (appTemplate, testTemplate, targetDirectory) { Generator.prototype.generateSourceAndTest = function (appTemplate, testTemplate, targetDirectory) {
this.appTemplate(appTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name))); this.appTemplate(appTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
this.testTemplate(testTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name))); this.testTemplate(testTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
}; };
Generator.prototype.generateComponentTestAndStyle = function (componentTemplate, testTemplate, stylesTemplate, targetDirectory) { Generator.prototype.generateComponentTestAndStyle = function (componentTemplate, testTemplate, stylesTemplate, targetDirectory) {

6
templates/common/_webpack.config.js
View File

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

5
templates/common/karma.conf.js
View File

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

2
templates/javascript/Component.js
View File

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

2
templates/spec/Component.js
View File

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