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));
};
// 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);
};

99
script-base.js
View File

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

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

@ -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') { %> {

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

@ -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/,

2
templates/javascript/Component.js
View File

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

2
templates/spec/Component.js
View File

@ -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 %>);
});