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

Provide and use aliases to components dir and styles dir
react-webpack-generators · Feb 20, 2015 · fbc7776 · fbc7776
2 parents 6fd793f + cbef965
commit fbc7776
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 15 deletions.
diff --git a/templates/common/_webpack.config.js b/templates/common/_webpack.config.js
@@ -28,7 +28,11 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js']
+    extensions: ['', '.js'],
+    alias: {
+      'styles': './src/styles',
+      'components': './src/scripts/components/'
+    }
   },
   module: {
     preLoaders: [{

diff --git a/templates/common/_webpack.dist.config.js b/templates/common/_webpack.dist.config.js
@@ -34,6 +34,10 @@ module.exports = {
 
   resolve: {
     extensions: ['', '.js']
+    alias: {
+      'styles': './src/styles',
+      'components': './src/scripts/components/'
+    }
   },
 
   module: {

diff --git a/templates/common/karma.conf.js b/templates/common/karma.conf.js
@@ -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: {

diff --git a/templates/javascript/App.js b/templates/javascript/App.js
@@ -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');
 

diff --git a/templates/javascript/Component.js b/templates/javascript/Component.js
@@ -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 () {

diff --git a/templates/spec/App.js b/templates/spec/App.js
@@ -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 %>);
   });
 

diff --git a/templates/spec/Component.js b/templates/spec/Component.js
@@ -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 %>);
   });
 

diff --git a/templates/spec/main.js b/templates/spec/main.js
@@ -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();
   });
 

diff --git a/test/test-creation.js b/test/test-creation.js
@@ -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);
       });
     });