test(@ngtools/webpack): add transformer tests

Author: filipesilva

packages/@ngtools/webpack/package.json

@@ -28,6 +28,7 @@
     "loader-utils": "^1.0.2",
     "enhanced-resolve": "^3.1.0",
     "magic-string": "^0.22.3",
+    "semver": "^5.3.0",
     "source-map": "^0.5.6"
   },
   "peerDependencies": {

packages/@ngtools/webpack/src/angular_compiler_plugin.ts

@@ -42,16 +42,16 @@ import {
   SOURCE,
   Program,
   CompilerHost,
-  createProgram as createProgramInterface,
-  createCompilerHost as createCompilerHostInterface,
+  CreateProgramInterface,
+  CreateCompilerHostInterface,
   Diagnostics,
-  formatDiagnostics as formatDiagnosticsInterface,
+  FormatDiagnosticsInterface,
   CustomTransformers as CustomTransformers,
-} from './ngtools_api2.d';
+} from './ngtools_api2';
 
-const createProgram: createProgramInterface = compilerCliNgtools.createProgram;
-const createCompilerHost: createCompilerHostInterface = compilerCliNgtools.createCompilerHost;
-const formatDiagnostics: formatDiagnosticsInterface = compilerCliNgtools.formatDiagnostics;
+const createProgram: CreateProgramInterface = compilerCliNgtools.createProgram;
+const createCompilerHost: CreateCompilerHostInterface = compilerCliNgtools.createCompilerHost;
+const formatDiagnostics: FormatDiagnosticsInterface = compilerCliNgtools.formatDiagnostics;
 const EmitFlags: any = compilerCliNgtools.EmitFlags;
 
 /**
@@ -665,9 +665,6 @@ export class AngularCompilerPlugin implements Tapable {
 
   getFile(fileName: string) {
     const outputFile = fileName.replace(/.ts$/, '.js');
-    if (!this._compilerHost.fileExists(outputFile)) {
-      return null;
-    }
     return {
       outputText: this._compilerHost.readFile(outputFile),
       sourceMap: this._compilerHost.readFile(outputFile + '.map')

packages/@ngtools/webpack/src/loader.ts

@@ -539,12 +539,6 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
       plugin.done
         .then(() => {
           const result = plugin.getFile(sourceFileName);
-          if (result === null && !plugin.failedCompilation) {
-            throw new Error(
-              `${sourceFileName} is loaded but is not part of the TypeScript compilation. ` +
-              'Please add it to your tsconfig file.'
-            );
-          }
           if (plugin.failedCompilation) {
             // Return an empty string if there is no result to prevent extra loader errors.
             // Plugin errors were already pushed to the compilation errors.

packages/@ngtools/webpack/src/ngtools_api2.d.ts renamed to packages/@ngtools/webpack/src/ngtools_api2.ts

@@ -1,15 +1,14 @@
 /**
  * This is a copy of @compiler-cli/src/ngtools_api.d.ts file.
  */
-import { ParseSourceSpan } from '@angular/compiler';
 import * as ts from 'typescript';
 
 export const DEFAULT_ERROR_CODE = 100;
 export const UNKNOWN_ERROR_CODE = 500;
 export const SOURCE = 'angular' as 'angular';
 export interface Diagnostic {
   messageText: string;
-  span?: ParseSourceSpan;
+  span?: any;
   category: ts.DiagnosticCategory;
   code: number;
   source: 'angular';
@@ -99,20 +98,20 @@ export declare type Diagnostics = Array<ts.Diagnostic | Diagnostic>;
 export declare function formatDiagnostics(options: CompilerOptions, diags: Diagnostics): string;
 
 // Interfaces for the function declarations.
-export interface createProgram {
+export interface CreateProgramInterface {
   ({ rootNames, options, host, oldProgram }: {
     rootNames: string[];
     options: CompilerOptions;
     host: CompilerHost;
     oldProgram?: Program;
   }): Program;
 }
-export interface createCompilerHost {
+export interface CreateCompilerHostInterface {
   ({ options, tsHost }: {
     options: CompilerOptions;
     tsHost?: ts.CompilerHost;
   }): CompilerHost;
 }
-export interface formatDiagnostics {
+export interface FormatDiagnosticsInterface {
   (options: CompilerOptions, diags: Diagnostics): string;
 }

packages/@ngtools/webpack/src/transformers/ast_helpers.ts

@@ -1,4 +1,6 @@
 import * as ts from 'typescript';
+import { WebpackCompilerHost } from '../compiler_host';
+import { makeTransform, TransformOperation } from './make_transform';
 
 
 /**
@@ -70,3 +72,50 @@ export function getLastNode(sourceFile: ts.SourceFile): ts.Node | null {
   }
   return null;
 }
+
+
+export function transformTypescript(
+  content: string,
+  transformOpsCb: (SourceFile: ts.SourceFile) => TransformOperation[]
+) {
+
+  // Set compiler options.
+  const compilerOptions: ts.CompilerOptions = {
+    noEmitOnError: false,
+    allowJs: true,
+    newLine: ts.NewLineKind.LineFeed,
+    target: ts.ScriptTarget.ESNext,
+    skipLibCheck: true,
+    sourceMap: false,
+    importHelpers: true
+  };
+
+  // Create compiler host.
+  const basePath = '/project/src/';
+  const compilerHost = new WebpackCompilerHost(compilerOptions, basePath);
+
+  // Add a dummy file to host content.
+  const fileName = basePath + 'test-file.ts';
+  compilerHost.writeFile(fileName, content, false);
+
+  // Create the TypeScript program.
+  const program = ts.createProgram([fileName], compilerOptions, compilerHost);
+
+  // Get the transform operations.
+  const sourceFile = program.getSourceFile(fileName);
+  const transformOps = transformOpsCb(sourceFile);
+
+  // Emit.
+  const { emitSkipped, diagnostics } = program.emit(
+    undefined, undefined, undefined, undefined, { before: [makeTransform(transformOps)] }
+  );
+
+  // Log diagnostics if emit wasn't successfull.
+  if (emitSkipped) {
+    console.log(diagnostics);
+    return null;
+  }
+
+  // Return the transpiled js.
+  return compilerHost.readFile(fileName.replace(/\.ts$/, '.js'));
+}

packages/@ngtools/webpack/src/transformers/export_lazy_module_map.spec.ts

@@ -0,0 +1,30 @@
+import * as ts from 'typescript';
+import { oneLine, stripIndent } from 'common-tags';
+import { transformTypescript } from './ast_helpers';
+import { exportLazyModuleMap } from './export_lazy_module_map';
+
+describe('@ngtools/webpack transformers', () => {
+  describe('replace_resources', () => {
+    it('should replace resources', () => {
+      const input = stripIndent`
+        export { AppModule } from './app/app.module';
+      `;
+      // tslint:disable:max-line-length
+      const output = stripIndent`
+        import * as __lazy_0__ from "app/lazy/lazy.module.ts";
+        import * as __lazy_1__ from "app/lazy2/lazy2.module.ts";
+        export { AppModule } from './app/app.module';
+        export var LAZY_MODULE_MAP = { "./lazy/lazy.module#LazyModule": __lazy_0__.LazyModule, "./lazy2/lazy2.module#LazyModule2": __lazy_1__.LazyModule2 };
+      `;
+      // tslint:enable:max-line-length
+
+      const transformOpsCb = (sourceFile: ts.SourceFile) => exportLazyModuleMap(sourceFile, {
+        './lazy/lazy.module#LazyModule': '/project/src/app/lazy/lazy.module.ts',
+        './lazy2/lazy2.module#LazyModule2': '/project/src/app/lazy2/lazy2.module.ts',
+      });
+      const result = transformTypescript(input, transformOpsCb);
+
+      expect(oneLine`${result}`).toEqual(oneLine`${output}`);
+    });
+  });
+});

packages/@ngtools/webpack/src/transformers/export_ngfactory.spec.ts

@@ -0,0 +1,24 @@
+import * as ts from 'typescript';
+import { oneLine, stripIndent } from 'common-tags';
+import { transformTypescript } from './ast_helpers';
+import { exportNgFactory } from './export_ngfactory';
+
+describe('@ngtools/webpack transformers', () => {
+  describe('replace_resources', () => {
+    it('should replace resources', () => {
+      const input = stripIndent`
+        export { AppModule } from './app/app.module';
+      `;
+      const output = stripIndent`
+        export { AppModuleNgFactory } from "./app/app.module.ngfactory";
+        export { AppModule } from './app/app.module';
+      `;
+
+      const transformOpsCb = (sourceFile: ts.SourceFile) =>
+        exportNgFactory(sourceFile, { path: '/app.module', className: 'AppModule' });
+      const result = transformTypescript(input, transformOpsCb);
+
+      expect(oneLine`${result}`).toEqual(oneLine`${output}`);
+    });
+  });
+});

packages/@ngtools/webpack/src/transformers/make_transform.ts

@@ -1,6 +1,12 @@
 import * as ts from 'typescript';
+import { satisfies } from 'semver';
 
 
+// Typescript below 2.5.0 needs a workaround.
+const visitEachChild = satisfies(ts.version, '^2.5.0')
+  ? ts.visitEachChild
+  : visitEachChildWorkaround;
+
 export enum OPERATION_KIND {
   Remove,
   Add,
@@ -35,9 +41,6 @@ export class ReplaceNodeOperation extends TransformOperation {
   }
 }
 
-// TODO: add symbol workaround for https://github.com/Microsoft/TypeScript/issues/17551 and
-// https://github.com/Microsoft/TypeScript/issues/17384
-
 export function makeTransform(ops: TransformOperation[]): ts.TransformerFactory<ts.SourceFile> {
 
   const sourceFiles = ops.reduce((prev, curr) =>
@@ -83,7 +86,7 @@ export function makeTransform(ops: TransformOperation[]): ts.TransformerFactory<
           return modifiedNodes;
         } else {
           // Otherwise return node as is and visit children.
-          return ts.visitEachChild(node, visitor, context);
+          return visitEachChild(node, visitor, context);
         }
       };
 
@@ -94,3 +97,34 @@ export function makeTransform(ops: TransformOperation[]): ts.TransformerFactory<
     return transformer;
   };
 }
+
+/**
+ * This is a version of `ts.visitEachChild` that works that calls our version
+ * of `updateSourceFileNode`, so that typescript doesn't lose type information
+ * for property decorators.
+ * See https://github.com/Microsoft/TypeScript/issues/17384 and
+ * https://github.com/Microsoft/TypeScript/issues/17551, fixed by
+ * https://github.com/Microsoft/TypeScript/pull/18051 and released on TS 2.5.0.
+ *
+ * @param sf
+ * @param statements
+ */
+function visitEachChildWorkaround(node: ts.Node, visitor: ts.Visitor,
+  context: ts.TransformationContext) {
+
+  if (node.kind === ts.SyntaxKind.SourceFile) {
+    const sf = node as ts.SourceFile;
+    const statements = ts.visitLexicalEnvironment(sf.statements, visitor, context);
+
+    if (statements === sf.statements) {
+      return sf;
+    }
+    // Note: Need to clone the original file (and not use `ts.updateSourceFileNode`)
+    // as otherwise TS fails when resolving types for decorators.
+    const sfClone = ts.getMutableClone(sf);
+    sfClone.statements = statements;
+    return sfClone;
+  }
+
+  return ts.visitEachChild(node, visitor, context);
+}

packages/@ngtools/webpack/src/transformers/replace_bootrap.spec.ts

@@ -0,0 +1,43 @@
+import * as ts from 'typescript';
+import { oneLine, stripIndent } from 'common-tags';
+import { transformTypescript } from './ast_helpers';
+import { replaceBootstrap } from './replace_bootstrap';
+
+describe('@ngtools/webpack transformers', () => {
+  describe('replace_bootstrap', () => {
+    it('should replace bootstrap', () => {
+      const input = stripIndent`
+        import { enableProdMode } from '@angular/core';
+        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+        import { AppModule } from './app/app.module';
+        import { environment } from './environments/environment';
+
+        if (environment.production) {
+          enableProdMode();
+        }
+
+        platformBrowserDynamic().bootstrapModule(AppModule);
+      `;
+      const output = stripIndent`
+        import { enableProdMode } from '@angular/core';
+        import { environment } from './environments/environment';
+
+        import { AppModuleNgFactory } from "./app/app.module.ngfactory";
+        import { platformBrowser } from "@angular/platform-browser";
+
+        if (environment.production) {
+          enableProdMode();
+        }
+
+        platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
+      `;
+
+      const transformOpsCb = (sourceFile: ts.SourceFile) =>
+        replaceBootstrap(sourceFile, { path: '/app.module', className: 'AppModule' });
+      const result = transformTypescript(input, transformOpsCb);
+
+      expect(oneLine`${result}`).toEqual(oneLine`${output}`);
+    });
+  });
+});

packages/@ngtools/webpack/src/transformers/replace_resources.spec.ts

@@ -0,0 +1,45 @@
+import * as ts from 'typescript';
+import { oneLine, stripIndent } from 'common-tags';
+import { transformTypescript } from './ast_helpers';
+import { replaceResources } from './replace_resources';
+
+describe('@ngtools/webpack transformers', () => {
+  describe('replace_resources', () => {
+    it('should replace resources', () => {
+      const input = stripIndent`
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: ['./app.component.css', './app.component.2.css']
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `;
+      const output = stripIndent`
+        import * as tslib_1 from "tslib";
+        import { Component } from '@angular/core';
+        let AppComponent = class AppComponent {
+            constructor() {
+                this.title = 'app';
+            }
+        };
+        AppComponent = tslib_1.__decorate([
+            Component({
+                selector: 'app-root',
+                template: require("./app.component.html"),
+                styles: [require("./app.component.css"), require("./app.component.2.css")]
+            })
+        ], AppComponent);
+        export { AppComponent };
+      `;
+
+      const transformOpsCb = (sourceFile: ts.SourceFile) => replaceResources(sourceFile);
+      const result = transformTypescript(input, transformOpsCb);
+
+      expect(oneLine`${result}`).toEqual(oneLine`${output}`);
+    });
+  });
+});