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

Refactored component subgenerator to use es2015 classes

Browse Source
This commit is contained in:
Chris 2016-06-14 10:28:09 +02:00
parent 1ad51f4166
commit 9867271cbb
6 changed files with 101 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
generators/app/postcss.js
View File

@ -1,39 +1,75 @@
'use strict'; 'use strict';
let fs = require('fs'); const fs = require('fs');
let esprima = require('esprima'); const esprima = require('esprima');
let walk = require('esprima-walk'); const walk = require('esprima-walk');
let escodegen = require('escodegen'); const escodegen = require('escodegen');
module.exports = { module.exports = {
/**
* Add postcss support to the given webpack base configuration object
* @param {String} path The config file name
*/
write: function(path) { write: function(path) {
let baseConfigPath = path;
let cssDialects = ['/\\.css$/', '/\\.sass/', '/\\.scss/', '/\\.less/', '/\\.styl/'];
let postcss = 'var postcss = { postcss: function() { return []; } }'; const data = fs.readFileSync(path, 'utf8');
postcss = esprima.parse(postcss); const ast = esprima.parse(data);
postcss = postcss.body[0].declarations[0].init.properties[0];
let data = fs.readFileSync(baseConfigPath, 'utf8'); // List of css dialects we want to add postCSS for
let parsed = esprima.parse(data); const cssDialects = [
'/\\.css$/',
'/\\.sass$/',
'/\\.scss$/',
'/\\.less$/',
'/\\.styl$/'
];
walk.walkAddParent(parsed, function(node) { // Prepare postCSS statement for inclusion
if(node.type === 'AssignmentExpression' && node.left.object.name === 'module') { const postcssFunction = 'var postcss = { postcss: function() { return []; } }';
node.right.properties.push(postcss); const postcssAst = esprima.parse(postcssFunction);
const postcss = postcssAst.body[0].declarations[0].init.properties[0];
// Add postcss to the loaders array
walk.walkAddParent(ast, (node) => {
// Add the postcss key to the global configuration
if(
node.type === 'MethodDefinition' &&
node.key.name === 'defaultSettings'
) {
const returnStatement = node.value.body.body[0];
returnStatement.argument.properties.push(postcss);
} }
if(node.type === 'Property' && node.key.name === 'test') { // Parse all property nodes that use a regex.
if(cssDialects.indexOf(node.value.raw) > -1) { // This should only be available under module.(pre)loaders
let current = node.parent.properties[1].value.value; if(
let position = current.split('!', 2).join('!').length; node.type === 'Property' &&
current = [current.slice(0, position), '!postcss-loader', current.slice(position)].join(''); node.key.type === 'Identifier' &&
node.key.name === 'test' &&
typeof node.value.regex !== 'undefined'
) {
node.parent.properties[1].value.value = current; // Make sure we only parse style based items!
if(cssDialects.indexOf(node.value.raw) !== -1) {
const loaderData = node.parent.properties[1];
loaderData.value.elements[1].value += '!postcss';
} }
} }
}); });
let options = { format: { indent: { style: ' ' } } }; // Prepare the final code and write it back
let code = escodegen.generate(parsed, options); const finalCode = escodegen.generate(ast, {
fs.writeFileSync(baseConfigPath, code, 'utf8'); format: {
indent: {
adjustMultilineComment: true,
style: ' '
}
},
comment: true
});
fs.writeFileSync(path, finalCode, 'utf8');
} }
} }

17
generators/component/index.js
View File

@ -1,19 +1,20 @@
'use strict'; 'use strict';
let generator = require('yeoman-generator'); const Generators = require('yeoman-generator');
let utils = require('../../utils/all'); let utils = require('../../utils/all');
module.exports = generator.Base.extend({ class ComponentGenerator extends Generators.Base {
constructor: function() { constructor(args, options) {
generator.Base.apply(this, arguments);
super(args, options);
this.argument('name', { type: String, required: true }); this.argument('name', { type: String, required: true });
this.option('stateless', { this.option('stateless', {
desc: 'Create a stateless component instead of a full one', desc: 'Create a stateless component instead of a full one',
defaults: false defaults: false
}); });
}, }
writing: function() { writing() {
let settings = utils.yeoman.getAllSettingsFromComponentName(this.name, this.config.get('style')); let settings = utils.yeoman.getAllSettingsFromComponentName(this.name, this.config.get('style'));
let componentType = this.options.stateless ? 'Stateless' : 'Base'; let componentType = this.options.stateless ? 'Stateless' : 'Base';
@ -39,4 +40,6 @@ module.exports = generator.Base.extend({
settings settings
); );
} }
}); }
module.exports = ComponentGenerator;

1
package.json
View File

@ -39,6 +39,7 @@
}, },
"scripts": { "scripts": {
"test": "mocha", "test": "mocha",
"test:watch": "mocha -w",
"release:major": "npm version major && npm publish && git push --follow-tags", "release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags", "release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags" "release:patch": "npm version patch && npm publish && git push --follow-tags"

31
test/generators/app/indexTest.js
View File

@ -122,9 +122,12 @@ describe.skip('react-webpack:app with PostCSS support', () => {
for(let p of defaultPrompts) { for(let p of defaultPrompts) {
prompts[p.name] = p.default; prompts[p.name] = p.default;
} }
prompts.postcss = true; prompts.postcss = true;
before(() => {
return beforeLoad(prompts);
});
describe('#config', () => { describe('#config', () => {
it('should set the generatedWith key to the current generator major version', () => { it('should set the generatedWith key to the current generator major version', () => {
@ -163,18 +166,15 @@ describe.skip('react-webpack:app with PostCSS support', () => {
it('should generate the webpack configuration', () => { it('should generate the webpack configuration', () => {
assert.file([ assert.file([
'cfg/base.js', 'conf/webpack/Base.js',
'cfg/defaults.js', 'conf/webpack/Dev.js',
'cfg/dev.js', 'conf/webpack/Dist.js',
'cfg/dist.js', 'conf/webpack/Test.js',
'cfg/test.js',
'server.js',
'webpack.config.js' 'webpack.config.js'
]); ]);
}); });
it('should insert the postcss loader into the style pipes', () => { it('should insert the postcss loader into the style pipes', () => {
assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader\''); assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader\'');
assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax\''); assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax\'');
assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded\''); assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded\'');
@ -182,7 +182,7 @@ describe.skip('react-webpack:app with PostCSS support', () => {
assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!stylus-loader\''); assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!stylus-loader\'');
}); });
it('should append the postcss function to the base config', () => { it.skip('should append the postcss function to the base config', () => {
assert.fileContent('cfg/defaults.js', ',\n postcss: function () {\n return [];\n }'); assert.fileContent('cfg/defaults.js', ',\n postcss: function () {\n return [];\n }');
}); });
@ -192,13 +192,13 @@ describe.skip('react-webpack:app with PostCSS support', () => {
assert.file([ assert.file([
'src/actions/README.md', 'src/actions/README.md',
'src/index.js', 'src/index.js',
'src/components/Main.js', 'src/components/App.js',
'src/components/app.css',
'src/favicon.ico', 'src/favicon.ico',
'src/images/yeoman.png', 'src/images/yeoman.png',
'src/index.html', 'src/index.html',
'src/sources/README.md', 'src/sources/README.md',
'src/stores/README.md', 'src/stores/README.md'
'src/styles/App.css'
]); ]);
}); });
@ -206,9 +206,10 @@ describe.skip('react-webpack:app with PostCSS support', () => {
assert.file([ assert.file([
'karma.conf.js', 'karma.conf.js',
'test/components/MainTest.js', 'test/components/AppTest.js',
'test/helpers/shallowRenderHelper.js', 'test/config/ConfigTest.js',
'test/loadtests.js' 'test/loadtests.js',
'test/.eslintrc'
]); ]);
}); });
}); });

8
test/generators/component/indexTest.js
View File

@ -108,7 +108,7 @@ describe('react-webpack:component', () => {
it('should always import REACT', (done) => { it('should always import REACT', (done) => {
createGeneratedComponent('mycomponent', style.type, options, () => { createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('src/components/MycomponentComponent.js', `import React from 'react';`); assert.fileContent('src/components/MycomponentComponent.js', 'import React from \'react\';');
done(); done();
}); });
}); });
@ -122,19 +122,19 @@ describe('react-webpack:component', () => {
it('should have its displayName set per default', (done) => { it('should have its displayName set per default', (done) => {
createGeneratedComponent('mycomponent', style.type, options, () => { createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`); assert.fileContent('src/components/MycomponentComponent.js', 'displayName = \'MycomponentComponent\';');
done(); done();
}); });
}); });
it('should export the created component', (done) => { it('should export the created component', (done) => {
createGeneratedComponent('mycomponent', style.type, options, () => { createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('src/components/MycomponentComponent.js', `export default MycomponentComponent`); assert.fileContent('src/components/MycomponentComponent.js', 'export default MycomponentComponent');
done(); done();
}); });
}); });
it(`should be possible to create components in a subfolder`, (done) => { it('should be possible to create components in a subfolder', (done) => {
createGeneratedComponent('my/little !special/test', style.type, options, () => { createGeneratedComponent('my/little !special/test', style.type, options, () => {
assert.file([ assert.file([

22
utils/configopts.json
View File

@ -45,8 +45,8 @@
"name": "postcss", "name": "postcss",
"value": "postcss", "value": "postcss",
"packages": [ "packages": [
{ "name": "postcss", "version": "^5.0.11" }, { "name": "postcss", "version": "^5.0.21" },
{ "name": "postcss-loader", "version": "^0.8.0" } { "name": "postcss-loader", "version": "^0.9.1" }
] ]
} }
] ]
@ -63,8 +63,8 @@
"value": "sass", "value": "sass",
"suffix": ".sass", "suffix": ".sass",
"packages": [ "packages": [
{ "name": "sass-loader", "version": "^3.1.2" }, { "name": "sass-loader", "version": "^3.2.0" },
{ "name": "node-sass", "version": "^3.4.2" } { "name": "node-sass", "version": "^3.7.0" }
] ]
}, },
{ {
@ -72,8 +72,8 @@
"value": "scss", "value": "scss",
"suffix": ".scss", "suffix": ".scss",
"packages": [ "packages": [
{ "name": "sass-loader", "version": "^3.1.2" }, { "name": "sass-loader", "version": "^3.2.0" },
{ "name": "node-sass", "version": "^3.4.2" } { "name": "node-sass", "version": "^3.7.0" }
] ]
}, },
{ {
@ -81,8 +81,8 @@
"value": "less", "value": "less",
"suffix": ".less", "suffix": ".less",
"packages": [ "packages": [
{ "name": "less-loader", "version": "^2.0.0" }, { "name": "less-loader", "version": "^2.2.3" },
{ "name": "less", "version": "^2.5.3" } { "name": "less", "version": "^2.7.1" }
] ]
}, },
{ {
@ -90,9 +90,9 @@
"value": "stylus", "value": "stylus",
"suffix": ".styl", "suffix": ".styl",
"packages": [ "packages": [
{ "name": "stylus-loader", "version": "^0.5.0" }, { "name": "stylus-loader", "version": "^2.1.0" },
{ "name": "stylus", "version": "~0.49.2" }, { "name": "stylus", "version": "^0.54.5" },
{ "name": "nib", "version": "~1.0.4" } { "name": "nib", "version": "~1.1.0" }
] ]
} }
], ],