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

Merge pull request #62 from ColCh/feature/Feature-aliases

Browse Source 
Provide and use aliases to components dir and styles dir
This commit is contained in:
Simon Bailey 2015-02-20 17:51:00 +00:00
commit fbc7776a1c
9 changed files with 54 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,11 @@ module.exports = {
},
resolve: {
extensions: ['', '.js']
extensions: ['', '.js'],
alias: {
'styles': './src/styles',
'components': './src/scripts/components/'
}
},
module: {
preLoaders: [{

4
templates/common/_webpack.dist.config.js
View File

@ -34,6 +34,10 @@ module.exports = {
resolve: {
extensions: ['', '.js']
alias: {
'styles': './src/styles',
'components': './src/scripts/components/'
}
},
module: {

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

@ -42,6 +42,12 @@ module.exports = function (config) {
test: /\.css$/,
loader: 'style-loader!css-loader'
}]
},
resolve: {
alias: {
'styles': './src/styles',
'components': './src/scripts/components/'
}
}
},
webpackServer: {

4
templates/javascript/App.js
View File

@ -4,8 +4,8 @@ var React = require('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;
// CSS
require('../../styles/normalize.css');
require('../../styles/main.css');
require('styles/normalize.css');
require('styles/main.css');
var imageURL = require('../../images/yeoman.png');

10
templates/javascript/Component.js
View File

@ -2,11 +2,11 @@
var React = require('react/addons');
<% if (stylesLanguage === 'css') { %>require('../../styles/<%= classedFileName %>.css');<% } %><%
if (stylesLanguage === 'sass') { %>require('../../styles/<%= classedFileName %>.sass');<% } %><%
if (stylesLanguage === 'scss') { %>require('../../styles/<%= classedFileName %>.scss');<% } %><%
if (stylesLanguage === 'less') { %>require('../../styles/<%= classedFileName %>.less');<% } %><%
if (stylesLanguage === 'stylus') { %>require('../../styles/<%= classedFileName %>.styl');<% } %>
<% if (stylesLanguage === 'css') { %>require('styles/<%= classedFileName %>.css');<% } %><%
if (stylesLanguage === 'sass') { %>require('styles/<%= classedFileName %>.sass');<% } %><%
if (stylesLanguage === 'scss') { %>require('styles/<%= classedFileName %>.scss');<% } %><%
if (stylesLanguage === 'less') { %>require('styles/<%= classedFileName %>.less');<% } %><%
if (stylesLanguage === 'stylus') { %>require('styles/<%= classedFileName %>.styl');<% } %>
var <%= classedName %> = React.createClass({
render: function () {

2
templates/spec/App.js
View File

@ -9,7 +9,7 @@ describe('<%= classedName %>', function () {
container.id = 'content';
document.body.appendChild(container);
<%= scriptAppName %> = require('../../../src/scripts/components/<%= scriptAppName %>.js');
<%= scriptAppName %> = require('components/<%= scriptAppName %>.js');
component = React.createElement(<%= scriptAppName %>);
});

2
templates/spec/Component.js
View File

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

2
templates/spec/main.js
View File

@ -4,7 +4,7 @@ describe('main', function () {
var main, component;
beforeEach(function () {
main = require('../../../src/scripts/components/main.jsx');
main = require('components/main.jsx');
component = main();
});

33
test/test-creation.js
View File

@ -109,6 +109,22 @@ describe('react-webpack generator', function() {
});
});
it('should generate JS config with aliases', function(done) {
react.run({}, function() {
assert.fileContent([
// style aliases
['webpack.config.js', /resolve[\S\s]+alias[\S\s]+styles/m],
['karma.conf.js', /resolve[\S\s]+alias[\S\s]+styles/m],
['webpack.dist.config.js', /resolve[\S\s]+alias[\S\s]+styles/m],
// script/components aliases
['webpack.config.js', /resolve[\S\s]+alias[\S\s]+components/m],
['karma.conf.js', /resolve[\S\s]+alias[\S\s]+components/m],
['webpack.dist.config.js', /resolve[\S\s]+alias[\S\s]+components/m]
]);
done();
});
});
});
describe('Generator', function () {
@ -156,11 +172,10 @@ describe('react-webpack generator', function() {
});
describe('Subgenerators', function() {
var generatorTest = function(generatorType, specType, targetDirectory, scriptNameFn, specNameFn, suffix, done) {
var generatorTest = function(name, generatorType, specType, targetDirectory, scriptNameFn, specNameFn, suffix, done) {
var name = 'Foo';
var deps = [path.join('../..', generatorType)];
genOptions.appPath += '/scripts'
genOptions.appPath = 'src/scripts'
var reactGenerator = helpers.createGenerator('react-webpack:' + generatorType, deps, [name], genOptions);
@ -169,6 +184,9 @@ describe('react-webpack generator', function() {
helpers.assertFileContent([
[path.join('src/scripts', targetDirectory, name + '.js'), new RegExp('var ' + scriptNameFn(name) + suffix, 'g')],
[path.join('src/scripts', targetDirectory, name + '.js'), new RegExp('require\\(\'styles\\/' + name + suffix + '\\.[^\']+' + '\'\\)', 'g')],
[path.join('test/spec', targetDirectory, 'TempTestApp' + '.js'), new RegExp('require\\(\'components\\/' + 'TempTestApp' + suffix + '\\.[^\']+' + '\'\\)', 'g')],
[path.join('test/spec', targetDirectory, name + '.js'), new RegExp('require\\(\'components\\/' + name + suffix + '\\.[^\']+' + '\'\\)', 'g')],
[path.join('test/spec', targetDirectory, name + '.js'), new RegExp('describe\\(\'' + specNameFn(name) + suffix + '\'', 'g')]
]);
@ -179,7 +197,14 @@ describe('react-webpack generator', function() {
it('should generate a new component', function(done) {
react.run({}, function() {
generatorTest('component', 'component', 'components', _.capitalize, _.capitalize, '', done);
generatorTest('Foo', 'component', 'component', 'components', _.capitalize, _.capitalize, '', done);
});
});
it('should generate a subcomponent', function(done) {
react.run({}, function() {
var subComponentNameFn = function () { return 'Bar'; };
generatorTest('Foo/Bar', 'component', 'component', 'components', subComponentNameFn, subComponentNameFn, '', done);
});
});