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

Added ability to create stateless components

Browse Source 
Cleaned up unittests
This commit is contained in:
Chris 2015-10-19 08:11:22 +02:00
parent 432d5d00de
commit 63f1b74fe7
6 changed files with 196 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -1,5 +1,12 @@
# generator-react-webpack - Changelog # generator-react-webpack - Changelog
## 2.2.5
___Upgrades:___
1. Added ability to create stateless components
2. Updated README with new installation instructions (need to install globally)
3. Added new tests for components (should be easier to handle in the future)
## 2.2.4 ## 2.2.4
___Upgrades:___ ___Upgrades:___

12
README.md
View File

@ -27,8 +27,9 @@ If you have built a generator using generator-react-webpack, tell us and we will
## Installation ## Installation
```bash ```bash
# Make sure both is installed globally
npm install -g yo npm install -g yo
npm install generator-react-webpack npm install -g generator-react-webpack
``` ```
## Setting up projects ## Setting up projects
@ -51,6 +52,15 @@ yo react-webpack:component my/namespaced/components/name
The above command will create a new component, as well as its stylesheet and a basic testcase. The above command will create a new component, as well as its stylesheet and a basic testcase.
## Generating new stateless functional components
```
yo react-webpack:component:stateless my/namespaced/components/name
```
Stateless functional components where introduced in React v0.14. They have a much shorter syntax than regular ones and no state or lifecycle methods at all. Please read the [React 0.14 release notes](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html) to get more information about those components.
___Note___: You will still be able to set properties for stateless components!
## Usage ## Usage
The following commands are available in your project: The following commands are available in your project:
```bash ```bash

8
generators/component/index.js
View File

@ -6,11 +6,17 @@ module.exports = generator.NamedBase.extend({
constructor: function() { constructor: function() {
generator.NamedBase.apply(this, arguments); generator.NamedBase.apply(this, arguments);
this.option('stateless', {
desc: 'Create a stateless component instead of a full one',
defaults: false
});
}, },
writing: function() { writing: function() {
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';
// Create the style template // Create the style template
this.fs.copyTpl( this.fs.copyTpl(
@ -21,7 +27,7 @@ module.exports = generator.NamedBase.extend({
// Create the component // Create the component
this.fs.copyTpl( this.fs.copyTpl(
this.templatePath('components/Base.js'), this.templatePath(`components/${componentType}.js`),
this.destinationPath(settings.component.path + settings.component.fileName), this.destinationPath(settings.component.path + settings.component.fileName),
settings settings
); );

1
generators/component/templates/components/Base.js
View File

@ -20,5 +20,4 @@ class <%= component.className %> extends React.Component {
// <%= component.className %>.propTypes = {}; // <%= component.className %>.propTypes = {};
// <%= component.className %>.defaultProps = {}; // <%= component.className %>.defaultProps = {};
export default <%= component.className %>; export default <%= component.className %>;

19
generators/component/templates/components/Stateless.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
import React from 'react';
require('<%= style.webpackPath %>');
let <%= component.className %> = (props) => (
<div className="<%= style.className %>">
Please edit <%= component.path %>/<%= component.fileName %> to update this component!
</div>
);
<%= component.className %>.displayName = '<%= component.displayName %>';
// Uncomment properties you need
// <%= component.className %>.propTypes = {};
// <%= component.className %>.defaultProps = {};
export default <%= component.className %>;

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

@ -7,31 +7,96 @@ describe('react-webpack:component', () => {
let generatorComponent = path.join(__dirname, '../../../generators/component'); let generatorComponent = path.join(__dirname, '../../../generators/component');
// List of available style types. Please add a line that says
// testComponentWithStyle(styleTypes.KEY); to the bottom of the file
// to run all unit tests for this filetype.
const styleTypes = {
css: {
type: 'css',
fileName: 'src/styles/Mycomponent.css',
expandedFileName: 'src/styles/my/littleSpecial/Test.css',
assertions: {
componentImport: 'require(\'styles//Mycomponent.css\');',
styleContent: '.mycomponent-component'
}
},
sass: {
type: 'sass',
fileName: 'src/styles/Mycomponent.sass',
expandedFileName: 'src/styles/my/littleSpecial/Test.sass',
assertions: {
componentImport: 'require(\'styles//Mycomponent.sass\');',
styleContent: '.mycomponent-component'
}
},
scss: {
type: 'scss',
fileName: 'src/styles/Mycomponent.scss',
expandedFileName: 'src/styles/my/littleSpecial/Test.scss',
assertions: {
componentImport: 'require(\'styles//Mycomponent.scss\');',
styleContent: '.mycomponent-component'
}
},
less: {
type: 'less',
fileName: 'src/styles/Mycomponent.less',
expandedFileName: 'src/styles/my/littleSpecial/Test.less',
assertions: {
componentImport: 'require(\'styles//Mycomponent.less\');',
styleContent: '.mycomponent-component'
}
},
stylus: {
type: 'stylus',
fileName: 'src/styles/Mycomponent.styl',
expandedFileName: 'src/styles/my/littleSpecial/Test.styl',
assertions: {
componentImport: 'require(\'styles//Mycomponent.styl\');',
styleContent: '.mycomponent-component'
}
}
};
/** /**
* Return a newly generated component with given name and style * Return a newly generated component with given name and style
* @param {String} name * @param {String} name Name of the component
* @param {String} styleType * @param {String} styleType Styling language to use
* @param {Function} callback * @param {Object} options Options to use for the generator
* @param {Function} callback Test callback to run
*/ */
function createGeneratedComponent(name, styleType, callback) { function createGeneratedComponent(name, styleType, options, callback) {
helpers.run(generatorComponent) helpers.run(generatorComponent)
.withArguments([name]) .withArguments([name])
.withOptions(options)
.on('ready', (instance) => { .on('ready', (instance) => {
instance.config.set('style', styleType); instance.config.set('style', styleType);
}) })
.on('end', callback); .on('end', callback);
} }
describe('When using style type "css"', () => { /**
* Test a component with styling applied
* @param {Object} style The style to apply (see styleTypes above)
* @param {Object} options Options to use [optional]
*/
function testComponentWithStyle(style, options) {
describe('Setup', () => { // Make sure we always have options
if(!options) {
options = {};
}
it('should create the react component, its stylesheet and test file', (done) => { describe(`When using style type "${style.type}"`, () => {
createGeneratedComponent('mycomponent', 'css', () => {
describe('When writing is called', () => {
it(`should create the react component, its ${style.type}-stylesheet and test file`, (done) => {
createGeneratedComponent('mycomponent', style.type, options, () => {
assert.file([ assert.file([
'src/components/MycomponentComponent.js', 'src/components/MycomponentComponent.js',
'src/styles/Mycomponent.css', style.fileName,
'test/components/MycomponentComponentTest.js' 'test/components/MycomponentComponentTest.js'
]); ]);
done(); done();
@ -39,95 +104,54 @@ describe('react-webpack:component', () => {
}); });
}); });
describe('Component', () => { describe('When creating a component', () => {
it('should require the created css file', (done) => { it('should always import REACT', (done) => {
createGeneratedComponent('mycomponent', 'css', () => { createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.css\');'); assert.fileContent('src/components/MycomponentComponent.js', `import React from 'react';`);
done();
});
});
it(`should require the created ${style.type} file`, (done) => {
createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('src/components/MycomponentComponent.js', style.assertions.componentImport);
done(); done();
}); });
}); });
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', 'css', () => {
assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`); assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`);
done(); done();
}); });
}); });
});
describe('Style', () => { it('should export the created component', (done) => {
createGeneratedComponent('mycomponent', style.type, options, () => {
it('should add the components css class to the stylesheet', (done) => { assert.fileContent('src/components/MycomponentComponent.js', `export default MycomponentComponent`);
createGeneratedComponent('mycomponent', 'css', () => {
assert.fileContent('src/styles/Mycomponent.css', '.mycomponent-component');
done(); done();
}); });
}); });
});
describe('Test', () => { it(`should be possible to create components in a subfolder`, (done) => {
createGeneratedComponent('my/little !special/test', style.type, options, () => {
it('should import the react component', (done) => {
createGeneratedComponent('mycomponent', 'css', () => {
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
done();
});
});
});
}); // End css
describe('When creating a component in a subfolder', () => {
describe('Setup', () => {
it('should create the react component, its stylesheet and test file', (done) => {
createGeneratedComponent('my/little !special/test', 'css', () => {
assert.file([ assert.file([
'src/components/my/littleSpecial/TestComponent.js', 'src/components/my/littleSpecial/TestComponent.js',
'src/styles/my/littleSpecial/Test.css', style.expandedFileName,
'test/components/my/littleSpecial/TestComponentTest.js' 'test/components/my/littleSpecial/TestComponentTest.js'
]); ]);
done(); done();
}); });
}); });
}); });
}); // End css (subfolder)
describe('When using style type "sass"', () => {
describe('Setup', () => {
it('should create the react component, its stylesheet and test file', (done) => {
createGeneratedComponent('mycomponent', 'sass', () => {
assert.file([
'src/components/MycomponentComponent.js',
'src/styles/Mycomponent.sass',
'test/components/MycomponentComponentTest.js'
]);
done();
});
});
});
describe('Component', () => {
it('should require the created sass file', (done) => {
createGeneratedComponent('mycomponent', 'sass', () => {
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.sass\');');
done();
});
});
});
describe('Style', () => { describe('Style', () => {
it('should add the components sass class to the stylesheet', (done) => { it(`should add the components ${style.type} class to the stylesheet`, (done) => {
createGeneratedComponent('mycomponent', 'sass', () => { createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('src/styles/Mycomponent.sass', '.mycomponent-component'); assert.fileContent(style.fileName, style.assertions.styleContent);
done(); done();
}); });
}); });
@ -136,156 +160,22 @@ describe('react-webpack:component', () => {
describe('Test', () => { describe('Test', () => {
it('should import the react component', (done) => { it('should import the react component', (done) => {
createGeneratedComponent('mycomponent', 'sass', () => { createGeneratedComponent('mycomponent', style.type, options, () => {
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';'); assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
done(); done();
}); });
}); });
}); });
}); // End sass });
}
describe('When using style type "scss"', () => { // Run all tests for all available style types.
testComponentWithStyle(styleTypes.css);
describe('Setup', () => { testComponentWithStyle(styleTypes.sass);
testComponentWithStyle(styleTypes.scss);
it('should create the react component, its stylesheet and test file', (done) => { testComponentWithStyle(styleTypes.less);
createGeneratedComponent('mycomponent', 'scss', () => { testComponentWithStyle(styleTypes.stylus);
assert.file([
'src/components/MycomponentComponent.js',
'src/styles/Mycomponent.scss',
'test/components/MycomponentComponentTest.js'
]);
done();
});
});
});
describe('Component', () => {
it('should require the created scss file', (done) => {
createGeneratedComponent('mycomponent', 'scss', () => {
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.scss\');');
done();
});
});
});
describe('Style', () => {
it('should add the components scss class to the stylesheet', (done) => {
createGeneratedComponent('mycomponent', 'scss', () => {
assert.fileContent('src/styles/Mycomponent.scss', '.mycomponent-component');
done();
});
});
});
describe('Test', () => {
it('should import the react component', (done) => {
createGeneratedComponent('mycomponent', 'scss', () => {
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
done();
});
});
});
}); // End scss
describe('When using style type "less"', () => {
describe('Setup', () => {
it('should create the react component, its stylesheet and test file', (done) => {
createGeneratedComponent('mycomponent', 'less', () => {
assert.file([
'src/components/MycomponentComponent.js',
'src/styles/Mycomponent.less',
'test/components/MycomponentComponentTest.js'
]);
done();
});
});
});
describe('Component', () => {
it('should require the created less file', (done) => {
createGeneratedComponent('mycomponent', 'less', () => {
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.less\');');
done();
});
});
});
describe('Style', () => {
it('should add the components less class to the stylesheet', (done) => {
createGeneratedComponent('mycomponent', 'less', () => {
assert.fileContent('src/styles/Mycomponent.less', '.mycomponent-component');
done();
});
});
});
describe('Test', () => {
it('should import the react component', (done) => {
createGeneratedComponent('mycomponent', 'less', () => {
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
done();
});
});
});
}); // End less
describe('When using style type "stylus"', () => {
describe('Setup', () => {
it('should create the react component, its stylesheet and test file', (done) => {
createGeneratedComponent('mycomponent', 'stylus', () => {
assert.file([
'src/components/MycomponentComponent.js',
'src/styles/Mycomponent.styl',
'test/components/MycomponentComponentTest.js'
]);
done();
});
});
});
describe('Component', () => {
it('should require the created stylus file', (done) => {
createGeneratedComponent('mycomponent', 'stylus', () => {
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.styl\');');
done();
});
});
});
describe('Style', () => {
it('should add the components stylus class to the stylesheet', (done) => {
createGeneratedComponent('mycomponent', 'stylus', () => {
assert.fileContent('src/styles/Mycomponent.styl', '.mycomponent-component');
done();
});
});
});
describe('Test', () => {
it('should import the react component', (done) => {
createGeneratedComponent('mycomponent', 'less', () => {
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
done();
});
});
});
}); // End stylus
// Test stateless components (should be enough when testing with defaults)
testComponentWithStyle(styleTypes.css, { stateless: true });
}); });