refactor(bundler): use typescript rollup plugin

Use the typescript rollup plugin instead of spawning tsc. This cuts dev
build times by 1 to 2 seconds per save. Additionally, remove the
ngTemplate from the rollup config and have dev builds automatically
receive the required plugins for template inlining and TS compiling.

Author: adamdbradley

config/rollup.config.js

@@ -1,10 +1,10 @@
-var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;
 var nodeResolve = require('rollup-plugin-node-resolve');
 var commonjs = require('rollup-plugin-commonjs');
 var globals = require('rollup-plugin-node-globals');
 var builtins = require('rollup-plugin-node-builtins');
 var json = require('rollup-plugin-json');
 
+
 // https://github.com/rollup/rollup/wiki/JavaScript-API
 
 var rollupConfig = {
@@ -13,7 +13,7 @@ var rollupConfig = {
    * be included, along with the minimum necessary code
    * from its dependencies
    */
-  entry: './.tmp/app/main.dev.js',
+  entry: 'src/app/main.dev.ts',
 
   /**
    * sourceMap: If true, a separate sourcemap file will
@@ -36,7 +36,6 @@ var rollupConfig = {
    * See https://github.com/rollup/rollup/wiki/Plugins for more info.
    */
   plugins: [
-    ngTemplate(),
     builtins(),
     commonjs(),
     nodeResolve({
@@ -55,7 +54,7 @@ var rollupConfig = {
 
 if (process.env.IONIC_ENV == 'prod') {
   // production mode
-  rollupConfig.entry = '.tmp/app/main.prod.js';
+  rollupConfig.entry = '{{TMP}}/app/main.prod.ts';
   rollupConfig.sourceMap = false;
 }
 

package.json

@@ -40,6 +40,7 @@
     "rollup-pluginutils": "1.5.2",
     "tslint": "3.15.1",
     "tslint-eslint-rules": "1.5.0",
+    "typescript": "^2.0.3",
     "uglify-js": "2.7.3"
   },
   "devDependencies": {
@@ -49,9 +50,9 @@
     "@types/node": "6.0.38",
     "@types/uglify-js": "2.0.27",
     "jasmine": "^2.5.2",
+    "tippex": "^2.2.0",
     "tslint": "3.15.1",
-    "tslint-ionic-rules": "0.0.5",
-    "typescript": "^2.0.3"
+    "tslint-ionic-rules": "0.0.5"
   },
   "repository": {
     "type": "git",

src/build.ts

@@ -1,12 +1,13 @@
-import { BuildContext, BuildOptions, generateContext, generateBuildOptions, Logger } from './util';
+import { BuildContext, BuildOptions } from './util/interfaces';
+import { generateContext, generateBuildOptions } from './util/config';
 import { bundle, bundleUpdate } from './bundle';
 import { clean } from './clean';
 import { minify } from './minify';
 import { copy } from './copy';
 import { lint } from './lint';
+import { Logger } from './util/logger';
 import { ngc } from './ngc';
 import { sass, sassUpdate } from './sass';
-import { tsc } from './tsc';
 
 
 export function build(context: BuildContext, options: BuildOptions) {
@@ -74,10 +75,7 @@ function buildDev(context: BuildContext, options: BuildOptions) {
   const copyPromise = copy(context);
   const lintPromise = lint(context);
 
-  return tsc(context, options).then(() => {
-    return bundle(context, options);
-
-  }).then(() => {
+  return bundle(context, options).then(() => {
     return sass(context);
 
   }).then(() => {

src/bundle.ts

@@ -1,5 +1,9 @@
-import { BuildContext, BuildOptions, fillConfigDefaults, generateContext, generateBuildOptions, Logger, TaskInfo } from './util';
+import { BuildContext, BuildOptions, TaskInfo } from './util/interfaces';
+import { endsWith } from './util/helpers';
+import { fillConfigDefaults, generateContext, generateBuildOptions, replacePathVars } from './util/config';
+import ionCompiler from './plugins/ion-compiler';
 import { join, isAbsolute } from 'path';
+import { Logger } from './util/logger';
 import { outputJson, readJsonSync } from 'fs-extra';
 import { tmpdir } from 'os';
 
@@ -14,7 +18,7 @@ export function bundle(context?: BuildContext, options?: BuildOptions, rollupCon
   return runBundle(context, options, rollupConfig, useCache).then(() => {
     return logger.finish();
   }).catch((err: Error) => {
-    logger.fail(err, err.message);
+    logger.fail(err);
     return Promise.reject(err);
   });
 }
@@ -29,7 +33,7 @@ export function bundleUpdate(event: string, path: string, context: BuildContext,
     return logger.finish();
 
   }).catch((err: Error) => {
-    logger.fail(err, err.message);
+    logger.fail(err);
     return Promise.reject(err);
   });
 }
@@ -39,20 +43,37 @@ function runBundle(context: BuildContext, options: BuildOptions, rollupConfig: R
   rollupConfig = fillConfigDefaults(context, rollupConfig, ROLLUP_TASK_INFO);
 
   if (!isAbsolute(rollupConfig.dest)) {
+    // user can pass in absolute paths
+    // otherwise save it in the build directory
     rollupConfig.dest = join(context.buildDir, rollupConfig.dest);
   }
 
+  // replace any path vars like {{TMP}} with the real path
+  rollupConfig.entry = replacePathVars(context, rollupConfig.entry);
+  rollupConfig.dest = replacePathVars(context, rollupConfig.dest);
+
+  if (!options.isProd) {
+    // dev mode should auto add the ion-compiler plugin
+    // this will do template inlining and transpile TS
+    // ngc does full production builds itself and the bundler
+    // will already receive transpiled and AoT templates
+    rollupConfig.plugins.unshift(ionCompiler());
+  }
+
   if (useCache) {
     // tell rollup to use a previous bundle as its starting point
     rollupConfig.cache = bundleCache;
   }
 
   if (!rollupConfig.onwarn) {
+    // use our own logger if one wasn't already provided
     rollupConfig.onwarn = createOnWarnFn();
   }
 
   Logger.debug(`entry: ${rollupConfig.entry}, dest: ${rollupConfig.dest}, cache: ${rollupConfig.cache}, format: ${rollupConfig.format}`);
 
+  checkDeprecations(options, rollupConfig);
+
   // bundle the app then create create css
   const rollup = require('rollup').rollup;
   return rollup(rollupConfig).then((bundle: RollupBundle) => {
@@ -67,15 +88,36 @@ function runBundle(context: BuildContext, options: BuildOptions, rollupConfig: R
     // to always bundle to know which modules are used
     setModulePathsCache(context.moduleFiles);
 
-    // Cache our bundle for later use
+    // cache our bundle for later use
     bundleCache = bundle;
 
+    // clean up any references
+    rollupConfig.cache = rollupConfig.onwarn = rollupConfig.plugins = null;
+
     // write the bundle
     return bundle.write(rollupConfig);
+
+  }).catch((err: any) => {
+    // ensure references are cleared up when there's an error
+    bundleCache = rollupConfig.cache = rollupConfig.onwarn = rollupConfig.plugins = null;
+    return Promise.reject(err);
   });
 }
 
 
+function checkDeprecations(options: BuildOptions, rollupConfig: RollupConfig) {
+  if (!options.isProd) {
+    if (rollupConfig.entry.indexOf('.tmp') > -1 || endsWith(rollupConfig.entry, '.js')) {
+      // warning added 2016-10-05, v0.0.29
+      throw new Error('\nDev builds no longer use the ".tmp" directory. Please update your rollup config\'s\n' +
+                      'entry to use your "src" directory\'s "main.dev.ts" TypeScript file.\n' +
+                      'For example, the entry for dev builds should be: "src/app/main.dev.ts"');
+
+    }
+  }
+}
+
+
 export function getModulePathsCache(): string[] {
   // sync get the cached array of module paths (if they exist)
   let modulePaths: string[] = null;
@@ -150,8 +192,7 @@ function createOnWarnFn() {
 }
 
 const IGNORE_WARNS = [
-  'keyword is equivalent to',
-  'plugin (\'ng-template\') was used to transform files'
+  'keyword is equivalent to'
 ];
 
 

src/ngc.ts

@@ -1,7 +1,10 @@
 import { basename, join } from 'path';
-import { BuildContext, BuildOptions, TaskInfo, fillConfigDefaults, generateContext, generateBuildOptions, getNodeBinExecutable, isTsFilename, Logger } from './util';
+import { BuildContext, BuildOptions, TaskInfo } from './util/interfaces';
 import { copy as fsCopy, emptyDirSync, outputJsonSync, statSync } from 'fs-extra';
-import { getSrcTsConfig } from './tsc';
+import { fillConfigDefaults, generateContext, generateBuildOptions, getNodeBinExecutable } from './util/config';
+import { endsWith } from './util/helpers';
+import { Logger } from './util/logger';
+import { getTsConfig } from './transpile';
 
 
 export function ngc(context?: BuildContext, options?: BuildOptions, ngcConfig?: NgcConfig) {
@@ -20,6 +23,7 @@ export function ngc(context?: BuildContext, options?: BuildOptions, ngcConfig?:
 
   }).then(() => {
     return logger.finish();
+
   }).catch((err: Error) => {
     logger.fail(err);
     return Promise.reject(err);
@@ -43,7 +47,7 @@ function runNgc(context: BuildContext, options: BuildOptions, ngcConfig: NgcConf
 
     const ngcCmd = getNodeBinExecutable(context, 'ngc');
     if (!ngcCmd) {
-      reject(new Error(`Unable to find Angular Compiler "ngc" command: ${ngcCmd}`));
+      reject(new Error(`Unable to find Angular Compiler "ngc" command: ${ngcCmd}. Please ensure @angular/compiler-cli has been installed with NPM.`));
       return;
     }
 
@@ -64,7 +68,7 @@ function runNgc(context: BuildContext, options: BuildOptions, ngcConfig: NgcConf
     });
 
     cp.stderr.on('data', (data: string) => {
-      Logger.error(`ngc error: ${data}`);
+      Logger.error(`ngc: ${data}`);
       hadAnError = true;
     });
 
@@ -81,17 +85,12 @@ function runNgc(context: BuildContext, options: BuildOptions, ngcConfig: NgcConf
 
 function createTmpTsConfig(context: BuildContext, ngcConfig: NgcConfig) {
   // create the tsconfig from the original src
-  const tsConfig = getSrcTsConfig(context);
+  const tsConfig = getTsConfig();
 
   // delete outDir if it's set since we only want
   // to compile to the same directory we're in
   delete tsConfig.compilerOptions.outDir;
 
-  // downstream, we have a dependency on es5 code and
-  // es2015 modules, so force them
-  tsConfig.compilerOptions.module = 'es2015';
-  tsConfig.compilerOptions.target = 'es5';
-
   // force where to look for ts files
   tsConfig.include = ngcConfig.include;
 
@@ -136,20 +135,14 @@ function filterCopyFiles(filePath: any, hoop: any) {
       shouldInclude = (EXCLUDE_DIRS.indexOf(basename(filePath)) < 0);
 
     } else {
-      if (isTsFilename(filePath)) {
-        shouldInclude = true;
-      }
-
-      if (filePath.substr(filePath.length - 5) === '.html') {
-        shouldInclude = true;
-      }
+      shouldInclude = (endsWith(filePath, '.ts') || endsWith(filePath, '.html'));
     }
-
   } catch (e) {}
 
   return shouldInclude;
 }
 
+
 export function getTmpTsConfigPath(context: BuildContext) {
   return join(context.tmpDir, 'tsconfig.json');
 }

src/plugins/ion-compiler.ts

@@ -0,0 +1,43 @@
+// Ported from 'rollup-plugin-typescript':
+// https://github.com/rollup/rollup-plugin-typescript
+// MIT Licenced
+
+import { helperFns, helpersId } from '../util/typescript-helpers';
+import { getCompilerOptions, resolveId, transpile, IonCompilerPluginOptions } from '../transpile';
+import { inlineTemplate } from '../template';
+
+
+export default function ionCompiler(options?: IonCompilerPluginOptions) {
+  options = options || {};
+
+  const pluginutils = require('rollup-pluginutils');
+
+  const filter = pluginutils.createFilter(
+    options.include || ['*.ts+(|x)', '**/*.ts+(|x)'],
+    options.exclude || ['*.d.ts', '**/*.d.ts']);
+
+  const compilerOptions = getCompilerOptions();
+
+  return {
+    resolveId(importee: string, importer: string) {
+      return resolveId(importee, importer, compilerOptions);
+    },
+
+    load(id: string) {
+      if (id === helpersId) {
+        return helperFns;
+      }
+    },
+
+    transform(sourceText: string, sourcePath: string): any {
+      if (filter(sourcePath)) {
+        // inline templates
+        sourceText = inlineTemplate(sourceText, sourcePath);
+
+        // transpile typescirpt
+        return transpile(sourceText, sourcePath, compilerOptions, true);
+      }
+    }
+  };
+}
+