refactor(angular2app): separate tree creation for each step of the build

Author: cironunes

lib/broccoli/angular2-app.js

@@ -8,96 +8,39 @@ var Funnel = require('broccoli-funnel');
 var mergeTrees = require('broccoli-merge-trees');
 var uglify = require('broccoli-uglify-js');
 var Project = require('ember-cli/lib/models/project');
+var sourceDir = 'src';
 
 module.exports = Angular2App;
 
 function Angular2App(defaults, options) {
   this._initProject();
   this._notifyAddonIncluded();
-  this.options = options;
+  this.options = options || {};
 }
 
-Angular2App.prototype.toTree = function () {
-  var sourceDir = 'src';
-
-  var sourceTree = new Funnel('src', {
-    include: ['*.ts', '**/*.ts', '**/*.d.ts'],
-    destDir: 'src'
-  });
-
-  var typingsTree = new Funnel('typings', {
-    include: ['browser.d.ts', 'browser/**'],
-    destDir: 'typings'
-  });
-
-  var vendorNpmFiles = [
-    'systemjs/dist/system-polyfills.js',
-    'systemjs/dist/system.src.js',
-    'es6-shim/es6-shim.js',
-    'angular2/bundles/angular2-polyfills.js',
-    'rxjs/bundles/Rx.js',
-    'angular2/bundles/angular2.dev.js',
-    'angular2/bundles/http.dev.js',
-    'angular2/bundles/router.dev.js',
-    'angular2/bundles/upgrade.dev.js'
-  ];
-
-  if (this.options && this.options.vendorNpmFiles) {
-    vendorNpmFiles = vendorNpmFiles.concat(this.options.vendorNpmFiles);
-  }
-
-  var tsconfig = JSON.parse(fs.readFileSync('src/tsconfig.json', 'utf-8'));
-  // Add all spec files to files. We need this because spec files are their own entry
-  // point.
-  fs.readdirSync(sourceDir).forEach(function addPathRecursive(name) {
-    const filePath = path.join(sourceDir, name);
-    if (filePath.match(/\.spec\.[jt]s$/)) {
-      tsconfig.files.push(name);
-    } else if (fs.statSync(filePath).isDirectory()) {
-      // Recursively call this function with the full sub-path.
-      fs.readdirSync(filePath).forEach(function (n) {
-        addPathRecursive(path.join(name, n));
-      });
-    }
-  });
-
-  // Because the tsconfig does not include the source directory, add this as the first path
-  // element.
-  tsconfig.files = tsconfig.files.map(name => path.join(sourceDir, name));
-
-  var srcAndTypingsTree = mergeTrees([sourceTree, typingsTree]);
-  var tsTree = new compileWithTypescript(srcAndTypingsTree, tsconfig);
-
-  var tsTreeExcludes = ['*.d.ts', 'tsconfig.json'];
-  var excludeSpecFiles = '**/*.spec.*';
 
-  if (isProduction) {
-    tsTreeExcludes.push(excludeSpecFiles);
-    tsTree = uglify(tsTree);
-  }
-
-  tsTree = new Funnel(tsTree, {
-    srcDir: 'src',
-    exclude: tsTreeExcludes
-  });
-
-  var tsSrcTree = new Funnel(sourceDir, {
-    include: ['**/*.ts'],
-    allowEmpty: true
-  });
-
-  var assetTree = new Funnel(sourceDir, {
-    include: ['**/*.*'],
-    exclude: ['**/*.ts', '**/*.js'],
-    allowEmpty: true
-  });
-
-  var vendorNpmTree = new Funnel('node_modules', {
-    include: vendorNpmFiles,
-    destDir: 'vendor'
-  });
+/**
+ Create and return the app build system tree that:
+ - Get the `assets` tree
+ - Get the TS tree
+ - Get the TS src tree
+ - Get the index.html tree
+ - Get the NPM modules tree
+ - Apply/remove stuff based on the environment (dev|prod)
+ - Return the app trees to be extended
+
+ @public
+ @method toTree
+ @return {Array<Tree>} The app trees that can be used to extend the build
+ */
+Angular2App.prototype.toTree = function () {
+  var assetTree = this._getAssetsTree();
+  var tsTree = this._getTsTree();
+  var tsSrcTree = this._getTsSrcTree();
+  var indexTree = this._getIndexTree();
+  var vendorNpmTree = this._getVendorNpmTree();
 
-  var buildTrees = [assetTree, tsTree, this.index(), vendorNpmTree];
+  var buildTrees = [assetTree, tsTree, indexTree, vendorNpmTree];
 
   if (!isProduction) {
     buildTrees.push(tsSrcTree);
@@ -108,17 +51,14 @@ Angular2App.prototype.toTree = function () {
   return mergeTrees([merged, new SwManifest([merged])]);
 };
 
+
 /**
  @private
  @method _initProject
  @param {Object} options
  */
 Angular2App.prototype._initProject = function () {
   this.project = Project.closestSync(process.cwd());
-
-  /*if (options.configPath) {
-   this.project.configPath = function() { return options.configPath; };
-   }*/
 };
 
 /**
@@ -140,6 +80,7 @@ Angular2App.prototype._notifyAddonIncluded = function () {
   }, this);
 };
 
+
 /**
  Loads and initializes addons for this project.
  Calls initializeAddons on the Project.
@@ -151,6 +92,7 @@ Angular2App.prototype.initializeAddons = function () {
   this.project.initializeAddons();
 };
 
+
 /**
  Returns the content for a specific type (section) for index.html.
 
@@ -167,12 +109,12 @@ Angular2App.prototype.initializeAddons = function () {
  types (eg. 'some-addon-section').
 
  @private
- @method contentFor
+ @method _contentFor
  @param  {RegExP} match  Regular expression to match against
  @param  {String} type   Type of content
  @return {String}        The content.
  */
-Angular2App.prototype.contentFor = function (match, type) {
+Angular2App.prototype._contentFor = function (match, type) {
   var content = [];
 
   /*switch (type) {
@@ -194,15 +136,16 @@ Angular2App.prototype.contentFor = function (match, type) {
   return content.join('\n');
 };
 
+
 /**
  @private
- @method _configReplacePatterns
- @return
+ @method _getReplacePatterns
+ @return Array<Pattern> Replace patterns
  */
-Angular2App.prototype._configReplacePatterns = function () {
+Angular2App.prototype._getReplacePatterns = function () {
   return [{
     match: /\{\{content-for ['"](.+)["']\}\}/g,
-    replacement: isProduction ? '' : this.contentFor.bind(this)
+    replacement: isProduction ? '' : this._contentFor.bind(this)
   }];
 };
 
@@ -211,10 +154,10 @@ Angular2App.prototype._configReplacePatterns = function () {
  Returns the tree for app/index.html
 
  @private
- @method index
+ @method _getIndexTree
  @return {Tree} Tree for app/index.html
  */
-Angular2App.prototype.index = function () {
+Angular2App.prototype._getIndexTree = function () {
   var htmlName = 'index.html';
   var files = [
     'index.html'
@@ -228,6 +171,152 @@ Angular2App.prototype.index = function () {
 
   return configReplace(index, {
     files: [htmlName],
-    patterns: this._configReplacePatterns()
+    patterns: this._getReplacePatterns()
+  });
+};
+
+
+/**
+ Returns the source root dir tree
+
+ @private
+ @method _getSourceTree
+ @return {Tree} Tree for the src dir
+ */
+Angular2App.prototype._getSourceTree = function () {
+  return new Funnel('src', {
+    include: ['*.ts', '**/*.ts', '**/*.d.ts'],
+    destDir: 'src'
   });
 };
+
+
+/**
+ Returns the typings tree
+
+ @private
+ @method _getTypingsTree
+ @return {Tree} Tree for the src dir
+ */
+Angular2App.prototype._getTypingsTree = function () {
+  return new Funnel('typings', {
+    include: ['browser.d.ts', 'browser/**'],
+    destDir: 'typings'
+  });
+};
+
+
+/**
+Returns the TS tree
+
+ @private
+ @method _getTsTree
+ @return {Tree} Tree for TypeScript files
+ */
+Angular2App.prototype._getTsTree = function () {
+  var typingsTree = this._getTypingsTree();
+  var sourceTree = this._getSourceTree();
+
+  var tsconfig = JSON.parse(fs.readFileSync('src/tsconfig.json', 'utf-8'));
+  // Add all spec files to files. We need this because spec files are their own entry
+  // point.
+  fs.readdirSync(sourceDir).forEach(function addPathRecursive(name) {
+    const filePath = path.join(sourceDir, name);
+    if (filePath.match(/\.spec\.[jt]s$/)) {
+      tsconfig.files.push(name);
+    } else if (fs.statSync(filePath).isDirectory()) {
+      // Recursively call this function with the full sub-path.
+      fs.readdirSync(filePath).forEach(function (n) {
+        addPathRecursive(path.join(name, n));
+      });
+    }
+  });
+
+  // Because the tsconfig does not include the source directory, add this as the first path
+  // element.
+  tsconfig.files = tsconfig.files.map(name => path.join(sourceDir, name));
+
+  var srcAndTypingsTree = mergeTrees([sourceTree, typingsTree]);
+  var tsTree = new compileWithTypescript(srcAndTypingsTree, tsconfig);
+
+  var tsTreeExcludes = ['*.d.ts', 'tsconfig.json'];
+  var excludeSpecFiles = '**/*.spec.*';
+
+  if (isProduction) {
+    tsTreeExcludes.push(excludeSpecFiles);
+    tsTree = uglify(tsTree);
+  }
+
+  tsTree = new Funnel(tsTree, {
+    srcDir: 'src',
+    exclude: tsTreeExcludes
+  });
+
+  return tsTree;
+};
+
+
+/**
+ Returns the `vendorNpm` tree by merging the CLI dependencies plus the ones
+ passed by the user
+
+ @private
+ @method getVendorNpmTree
+ @return {Tree} The NPM tree.
+ */
+Angular2App.prototype._getVendorNpmTree = function () {
+  var vendorNpmFiles = [
+    'systemjs/dist/system-polyfills.js',
+    'systemjs/dist/system.src.js',
+    'es6-shim/es6-shim.js',
+    'angular2/bundles/angular2-polyfills.js',
+    'rxjs/bundles/Rx.js',
+    'angular2/bundles/angular2.dev.js',
+    'angular2/bundles/http.dev.js',
+    'angular2/bundles/router.dev.js',
+    'angular2/bundles/upgrade.dev.js'
+  ];
+
+  if (this.options.vendorNpmFiles) {
+    vendorNpmFiles = vendorNpmFiles.concat(this.options.vendorNpmFiles);
+  }
+
+  var vendorNpmTree = new Funnel('node_modules', {
+    include: vendorNpmFiles,
+    destDir: 'vendor'
+  });
+
+  return vendorNpmTree;
+};
+
+
+/**
+ Returns the `assets` tree
+
+ @private
+ @method getAssetsTree
+ @return {Tree} The assets tree.
+ */
+Angular2App.prototype._getAssetsTree = function () {
+  return new Funnel(sourceDir, {
+    include: ['**/*.*'],
+    exclude: ['**/*.ts', '**/*.js'],
+    allowEmpty: true
+  });
+};
+
+
+/**
+ Returns the `tsSrc` tree
+
+ @private
+ @method getTsSrcTree
+ @return {Tree} The TS src tree.
+ */
+Angular2App.prototype._getTsSrcTree = function () {
+  return new Funnel(sourceDir, {
+    include: ['**/*.ts'],
+    allowEmpty: true
+  });
+};
+

tests/e2e/e2e_workflow.spec.js

@@ -73,6 +73,22 @@ describe('Basic end-to-end Workflow', function () {
       });
   });
 
+  it('Supports production builds via `ng build --envinroment=production`', function() {
+    this.timeout(420000);
+
+    return ng(['build', '--environment=production', '--silent'])
+      .then(function () {
+        expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true);
+      })
+      .then(function () {
+        // Also does not create new things in GIT.
+        expect(sh.exec('git status --porcelain').output).to.be.equal('');
+      })
+      .catch(() => {
+        throw new Error('Build failed.');
+      });
+  });
+
   it('Produces a service worker manifest after initial build', function () {
     var manifestPath = path.join(process.cwd(), 'dist', 'manifest.appcache');
     expect(existsSync(manifestPath)).to.be.equal(true);