feature(minification): add basic experimental support for closure compiler and babili

Author: danbucholtz

config/babili.config.js

@@ -0,0 +1,14 @@
+
+// https://www.npmjs.com/package/babili
+
+module.exports = {
+  /**
+   * sourceFile: The javascript file to minify
+   */
+  sourceFile: process.env.IONIC_OUTPUT_JS_FILE_NAME,
+
+  /**
+   * destFileName: file name for the minified js in the build dir
+   */
+  destFileName: process.env.IONIC_OUTPUT_JS_FILE_NAME,
+}

config/closure.config.js

@@ -9,5 +9,9 @@ module.exports = {
    * `java` will suffice. Verify by running `java --version`
    */
   pathToJavaExecutable: 'java',
-  pathToClosureJar: process.env.IONIC_CLOSURE_JAR
+  pathToClosureJar: process.env.IONIC_CLOSURE_JAR,
+  optimization: 'ADVANCED_OPTIMIZATIONS',
+  languageIn: `ECMASCRIPT6`,
+  languageOut: 'ECMASCRIPT5',
+  debug: false
 };

config/rollup.config.js

@@ -19,7 +19,7 @@ var rollupConfig = {
    * sourceMap: If true, a separate sourcemap file will
    * be created.
    */
-  sourceMap: process.env.IONIC_GENERATE_SOURCE_MAP ? true : false,
+  sourceMap: process.env.IONIC_GENERATE_SOURCE_MAP === 'true' ? true : false,
 
   /**
    * format: The format of the generated bundle

config/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
     filename: '[name].js',
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
-  devtool: process.env.IONIC_GENERATE_SOURCE_MAP ? process.env.IONIC_SOURCE_MAP_TYPE : '',
+  devtool: process.env.IONIC_GENERATE_SOURCE_MAP === 'true' ? process.env.IONIC_SOURCE_MAP_TYPE : '',
 
   resolve: {
     extensions: ['.ts', '.js', '.json'],
@@ -33,8 +33,8 @@ module.exports = {
 
   plugins: [
     ionicWebpackFactory.getIonicEnvironmentPlugin(),
-    ionicWebpackFactory.getNonIonicCommonChunksPlugin(),
-    ionicWebpackFactory.getIonicCommonChunksPlugin()
+    // ionicWebpackFactory.getNonIonicCommonChunksPlugin(),
+    // ionicWebpackFactory.getIonicCommonChunksPlugin()
   ],
 
   // Some libraries import Node modules but don't use them in the browser.

package.json

@@ -83,6 +83,7 @@
     "@types/uglify-js": "^2.0.27",
     "@types/webpack": "^1.12.35",
     "@types/ws": "^0.0.34",
+    "babili": "0.0.10",
     "conventional-changelog-cli": "1.2.0",
     "github": "0.2.4",
     "ionic-cz-conventional-changelog": "1.0.0",

src/aot/aot-compiler.ts

@@ -2,7 +2,7 @@ import { mkdirpSync, readFileSync, writeFileSync } from 'fs-extra';
 import { basename, dirname, extname, join, normalize, relative, resolve } from 'path';
 
 import 'reflect-metadata';
-import { CallExpression, CompilerOptions, createProgram, createSourceFile, Decorator, Identifier, ParsedCommandLine, Program, ScriptTarget, SyntaxKind, transpileModule, TranspileOptions, TranspileOutput } from 'typescript';
+import { CompilerOptions, createProgram, ParsedCommandLine, Program,  transpileModule, TranspileOptions, TranspileOutput } from 'typescript';
 import { CodeGenerator, NgcCliOptions, NodeReflectorHostContext, ReflectorHost, StaticReflector }from '@angular/compiler-cli';
 import { tsc } from '@angular/tsc-wrapped/src/tsc';
 import AngularCompilerOptions from '@angular/tsc-wrapped/src/options';
@@ -12,13 +12,11 @@ import { getInstance as getHybridFileSystem } from '../util/hybrid-file-system-f
 import { getInstance } from './compiler-host-factory';
 import { NgcCompilerHost } from './compiler-host';
 import { patchReflectorHost } from './reflector-host';
-import { findNodes, getNodeStringContent, getTypescriptSourceFile, removeDecorators } from '../util/typescript-utils';
 import { getFallbackMainContent, replaceBootstrap } from './utils';
 import { Logger } from '../logger/logger';
 import { printDiagnostics, clearDiagnostics, DiagnosticsType } from '../logger/logger-diagnostics';
 import { runTypeScriptDiagnostics } from '../logger/logger-typescript';
 import { isDebugMode } from '../util/config';
-import * as Constants from '../util/constants';
 import { BuildError } from '../util/errors';
 import { changeExtension } from '../util/helpers';
 import { BuildContext } from '../util/interfaces';
@@ -32,7 +30,6 @@ export class AotCompiler {
   private reflectorHost: ReflectorHost;
   private compilerHost: NgcCompilerHost;
   private fileSystem: HybridFileSystem;
-  private appLevelNgModuleFilePath: string;
   private lazyLoadedModuleDictionary: any;
 
   constructor(private context: BuildContext, private options: AotOptions) {
@@ -96,9 +93,7 @@ export class AotCompiler {
       if (!mainFile) {
         throw new BuildError(new Error(`Could not find entry point (bootstrap file) ${this.options.entryPoint}`));
       }
-      const mainSourceFile = getTypescriptSourceFile(mainFile.path, mainFile.content, ScriptTarget.Latest, false);
       Logger.debug('[AotCompiler] compile: Resolving NgModule from entry point');
-      this.appLevelNgModuleFilePath = this.options.appNgModulePath
       let modifiedFileContent: string = null;
       try {
         Logger.debug('[AotCompiler] compile: Dynamically changing entry point content to AOT mode content');

src/babili.ts

@@ -0,0 +1,89 @@
+import { join } from 'path';
+import { spawn } from 'cross-spawn';
+
+import { fillConfigDefaults, getUserConfigFile } from './util/config';
+import { BuildContext, TaskInfo } from './util/interfaces';
+import { Logger } from './logger/logger';
+import { writeFileAsync } from './util/helpers';
+
+export function babili(context: BuildContext, configFile?: string) {
+
+  configFile = getUserConfigFile(context, taskInfo, configFile);
+  const logger = new Logger('babili - experimental');
+
+  return babiliWorker(context, configFile).then(() => {
+    logger.finish();
+  })
+  .catch(err => {
+    throw logger.fail(err);
+  });
+}
+
+
+export function babiliWorker(context: BuildContext, configFile: string): Promise<any> {
+  const babiliConfig: BabiliConfig = fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
+  // TODO - figure out source maps??
+  return runBabili(context, babiliConfig).then((minifiedCode: string) => {
+    // write the file back to disk
+    const fileToWrite = join(context.buildDir, babiliConfig.destFileName);
+    return writeFileAsync(fileToWrite, minifiedCode);
+  });
+}
+
+function runBabili(context: BuildContext, config: BabiliConfig) {
+  const babiliPath = join(context.rootDir, 'node_modules', '.bin', 'babili');
+  const bundlePath = join(context.buildDir, config.sourceFile);
+  return runBabiliImpl(babiliPath, bundlePath);
+}
+
+function runBabiliImpl(pathToBabili: string, pathToBundle: string) {
+  // TODO - is there a better way to run this?
+  let chunks: string[] = [];
+  return new Promise((resolve, reject) => {
+    const command = spawn(pathToBabili, [pathToBundle]);
+    command.stdout.on('data', (buffer: Buffer) => {
+      const stringRepresentation = buffer.toString();
+      Logger.debug(`[Babili] ${stringRepresentation}`);
+      chunks.push(stringRepresentation);
+    });
+
+    command.stderr.on('data', (buffer: Buffer) => {
+      Logger.warn(`[Babili] ${buffer.toString()}`);
+    });
+
+    command.on('close', (code: number) => {
+      if ( code !== 0) {
+        return reject(new Error('Babili failed with a non-zero status code'));
+      }
+      return resolve(chunks.join(''));
+    });
+
+
+    /*exec(`${pathToBabili} ${pathToBundle}`, (err: Error, stdout: string, stderr: string) => {
+      console.log('err: ', err.message);
+      console.log('stdout: ', stdout);
+      console.log('stderr: ', stderr);
+      if (err) {
+        reject(err);
+      } else {
+        resolve(stdout);
+      }
+    });
+    */
+  });
+}
+
+export const taskInfo: TaskInfo = {
+  fullArg: '--babili',
+  shortArg: null,
+  envVar: 'IONIC_EXP_BABILI',
+  packageConfig: 'ionic_exp_babili',
+  defaultConfigFile: 'babili.config'
+};
+
+
+export interface BabiliConfig {
+  // https://www.npmjs.com/package/uglify-js
+  sourceFile: string;
+  destFileName: string;
+}

src/build.ts

@@ -10,7 +10,7 @@ import { lint, lintUpdate } from './lint';
 import { Logger } from './logger/logger';
 import { minifyCss, minifyJs } from './minify';
 import { ngc } from './ngc';
-import { preprocess } from './preprocess';
+import { preprocess, preprocessUpdate } from './preprocess';
 import { sass, sassUpdate } from './sass';
 import { templateUpdate } from './template';
 import { transpile, transpileUpdate, transpileDiagnosticsOnly } from './transpile';
@@ -211,9 +211,10 @@ function buildUpdateTasks(changedFiles: ChangedFile[], context: BuildContext) {
     changedFiles: []
   };
 
-  return Promise.resolve()
+  return loadFiles(changedFiles, context)
     .then(() => {
-      return loadFiles(changedFiles, context);
+      // PREPROCESS
+      return preprocessUpdate(changedFiles, context);
     })
     .then(() => {
       // TEMPLATE

src/closure.ts

@@ -1,9 +1,14 @@
-import { execSync } from 'child_process';
+import { join } from 'path';
+import { spawn } from 'cross-spawn';
+
+import * as Constants from './util/constants';
+import { copyFileAsync, getBooleanPropertyValue, generateRandomHexString, unlinkAsync } from './util/helpers';
 import { BuildContext, TaskInfo } from './util/interfaces';
 import { fillConfigDefaults, generateContext, getUserConfigFile } from './util/config';
 import { Logger } from './logger/logger';
 import { runWorker } from './worker-client';
 
+
 export function closure(context: BuildContext, configFile?: string) {
   configFile = getUserConfigFile(context, taskInfo, configFile);
 
@@ -14,33 +19,110 @@ export function closure(context: BuildContext, configFile?: string) {
       logger.finish();
     })
     .catch(err => {
+      console.log('err: ', err);
       throw logger.fail(err);
     });
 }
 
 export function closureWorker(context: BuildContext, configFile: string): Promise<any> {
+  context = generateContext(context);
+  const tempFileName = generateRandomHexString(10) + '.js';
+  const tempFilePath = join(context.buildDir, tempFileName);
+  const closureConfig = getClosureConfig(context, configFile);
+  const bundleFilePath = join(context.buildDir, process.env[Constants.ENV_OUTPUT_JS_FILE_NAME]);
+  return runClosure(closureConfig, bundleFilePath, tempFilePath, context.buildDir, closureConfig.debug)
+  .then(() => {
+    const promises: Promise<any>[] = [];
+    promises.push(copyFileAsync(tempFilePath, bundleFilePath));
+    promises.push(copyFileAsync(tempFilePath + '.map', bundleFilePath + '.map'));
+    return Promise.all(promises);
+  }).then(() => {
+    // delete the temp bundle either way
+    const promises: Promise<any>[] = [];
+    promises.push(unlinkAsync(tempFilePath));
+    promises.push(unlinkAsync(tempFilePath + '.map'));
+    return Promise.all(promises);
+  }).catch(err => {
+    // delete the temp bundle either way
+    unlinkAsync(tempFilePath);
+    unlinkAsync(tempFilePath + '.map');
+    throw err;
+  });
+}
+
+function checkIfJavaIsAvailable(closureConfig: ClosureConfig) {
   return new Promise((resolve, reject) => {
-    context = generateContext(context);
-    Logger.warn('Closer Compiler unsupported at this time.');
-    resolve();
+    const command = spawn(`${closureConfig.pathToJavaExecutable}`, ['-version']);
+
+     command.stdout.on('data', (buffer: Buffer) => {
+      Logger.debug(`[Closure]: ${buffer.toString()}`);
+    });
+
+    command.stderr.on('data', (buffer: Buffer) => {
+      Logger.warn(`[Closure]: ${buffer.toString()}`);
+    });
+
+    command.on('close', (code: number) => {
+      if (code === 0) {
+        return resolve();
+      }
+      reject();
+    });
   });
 }
 
+function runClosure(closureConfig: ClosureConfig, nonMinifiedBundlePath: string, minifiedBundleFileName: string, outputDir: string, isDebug: boolean) {
+  return new Promise((resolve, reject) => {
+    const closureArgs = ['-jar', `${closureConfig.pathToClosureJar}`,
+                        '--js', `${nonMinifiedBundlePath}`,
+                        '--js_output_file', `${minifiedBundleFileName}`,
+                        `--language_out=${closureConfig.languageOut}`,
+                        '--language_in', `${closureConfig.languageIn}`,
+                        '--compilation_level', `${closureConfig.optimization}`,
+                        `--create_source_map=%outname%.map`,
+                        `--variable_renaming_report=${outputDir}/variable_renaming_report`,
+                        `--property_renaming_report=${outputDir}/property_renaming_report`,
+                        `--rewrite_polyfills=false`,
+                      ];
 
-export function isClosureSupported(context: BuildContext): boolean{
-  /*const config = getClosureConfig(context, '');
-  try {
-    execSync(`${config.pathToJavaExecutable} --version`);
-    return true;
-  } catch (ex) {
-    Logger.debug('[Closure] isClosureSupported: Failed to execute java command');
-    return false;
+    if (isDebug) {
+      closureArgs.push('--debug');
+    }
+    const closureCommand = spawn(`${closureConfig.pathToJavaExecutable}`, closureArgs);
+
+    closureCommand.stdout.on('data', (buffer: Buffer) => {
+      Logger.debug(`[Closure] ${buffer.toString()}`);
+    });
+
+    closureCommand.stderr.on('data', (buffer: Buffer) => {
+      Logger.debug(`[Closure] ${buffer.toString()}`);
+    });
+
+    closureCommand.on('close', (code: number) => {
+      if (code === 0) {
+        return resolve();
+      }
+      reject(new Error('Closure failed with a non-zero status code'));
+    });
+  });
+}
+
+
+export function isClosureSupported(context: BuildContext): Promise<boolean> {
+  if (!getBooleanPropertyValue(Constants.ENV_USE_EXPERIMENTAL_CLOSURE)) {
+    return Promise.resolve(false);
   }
-  */
-  return false;
+  Logger.debug('[Closure] isClosureSupported: Checking if Closure Compiler is available');
+  const config = getClosureConfig(context);
+  return checkIfJavaIsAvailable(config).then(() => {
+    return Promise.resolve(true);
+  }).catch(() => {
+    Logger.warn(`Closure Compiler support is enabled but Java cannot be started. Try running the build again with the "--debug" argument for more information.`);
+    return Promise.resolve(false);
+  });
 }
 
-function getClosureConfig(context: BuildContext, configFile: string): ClosureConfig {
+function getClosureConfig(context: BuildContext, configFile?: string): ClosureConfig {
   configFile = getUserConfigFile(context, taskInfo, configFile);
 
   return fillConfigDefaults(configFile, taskInfo.defaultConfigFile);
@@ -59,4 +141,8 @@ export interface ClosureConfig {
   // https://developers.google.com/closure/compiler/docs/gettingstarted_app
   pathToJavaExecutable: string;
   pathToClosureJar: string;
+  optimization: string;
+  languageOut: string;
+  languageIn: string;
+  debug: boolean;
 }

src/copy.ts

@@ -5,7 +5,7 @@ import { fillConfigDefaults, generateContext, getUserConfigFile, replacePathVars
 import * as Constants from './util/constants';
 import { emit, EventType } from './util/events';
 import { generateGlobTasks, globAll, GlobObject, GlobResult } from './util/glob-util';
-import { copyFileAsync, rimRafAsync, unlinkAsync } from './util/helpers';
+import { copyFileAsync, getBooleanPropertyValue, rimRafAsync, unlinkAsync } from './util/helpers';
 import { BuildContext, ChangedFile, TaskInfo } from './util/interfaces';
 import { Watcher, copyUpdate as watchCopyUpdate } from './watch';
 
@@ -41,7 +41,7 @@ export function copyWorker(context: BuildContext, configFile: string) {
     // basically, we've got a stew goin'
     return populateFileAndDirectoryInfo(resultMap, copyConfig, toCopyList, directoriesToCreate);
   }).then(() => {
-    if (process.env[Constants.ENV_CLEAN_BEFORE_COPY]) {
+    if (getBooleanPropertyValue(Constants.ENV_CLEAN_BEFORE_COPY)) {
       cleanDirectories(context, directoriesToCreate);
     }
   }).then(() => {

src/declarations.d.ts

@@ -1,4 +1,5 @@
 declare module 'autoprefixer';
+declare module 'cross-spawn';
 declare module 'mime-types';
 declare module 'proxyquire';
 declare module 'os-name';