@ngtools/webpack 11.1.0 → 11.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "11.1.0",
+  "version": "11.1.4",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",
@@ -25,18 +25,18 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/core": "11.1.0",
+    "@angular-devkit/core": "11.1.4",
     "enhanced-resolve": "5.6.0",
     "webpack-sources": "2.2.0"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^11.0.0 || ^11.1.0-next",
+    "@angular/compiler-cli": "^11.0.0",
     "typescript": "~4.0.0 || ~4.1.0",
     "webpack": "^4.0.0"
   },
   "engines": {
     "node": ">= 10.13.0",
-    "npm": ">= 6.11.0",
+    "npm": "^6.11.0",
     "yarn": ">= 1.13.0"
   }
 }

package/src/ivy/plugin.d.ts

@@ -16,6 +16,7 @@ export interface AngularPluginOptions {
     emitClassMetadata: boolean;
     emitNgModuleScope: boolean;
     suppressZoneJsIncompatibilityWarning: boolean;
+    jitMode: boolean;
 }
 export declare class AngularWebpackPlugin {
     private readonly pluginOptions;

package/src/ivy/plugin.js

@@ -42,6 +42,7 @@ class AngularWebpackPlugin {
         this.pluginOptions = {
             emitClassMetadata: false,
             emitNgModuleScope: false,
+            jitMode: false,
             fileReplacements: {},
             substitutions: {},
             directTemplateLoading: true,
@@ -136,7 +137,7 @@ class AngularWebpackPlugin {
             host_1.augmentHostWithReplacements(host, this.pluginOptions.fileReplacements, moduleResolutionCache);
             host_1.augmentHostWithSubstitutions(host, this.pluginOptions.substitutions);
             // Create the file emitter used by the webpack loader
-            const { fileEmitter, builder, internalFiles } = compilerOptions.skipTemplateCodegen
+            const { fileEmitter, builder, internalFiles } = this.pluginOptions.jitMode
                 ? this.updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter)
                 : this.updateAotProgram(compilerOptions, rootNames, host, diagnosticsReporter, resourceLoader);
             const allProgramFiles = builder

package/src/ivy/transformation.js

@@ -23,7 +23,7 @@ function createAotTransformers(builder, options) {
     const removeNgModuleScope = !options.emitNgModuleScope;
     if (removeClassMetadata || removeNgModuleScope) {
         // tslint:disable-next-line: no-non-null-assertion
-        transformers.after.push(remove_ivy_jit_support_calls_1.removeIvyJitSupportCalls(removeClassMetadata, removeNgModuleScope, getTypeChecker));
+        transformers.before.push(remove_ivy_jit_support_calls_1.removeIvyJitSupportCalls(removeClassMetadata, removeNgModuleScope, getTypeChecker));
     }
     return transformers;
 }

package/src/resource_loader.d.ts

@@ -1,11 +1,9 @@
 export declare class WebpackResourceLoader {
     private _parentCompilation;
-    private _context;
     private _fileDependencies;
     private _reverseDependencies;
-    private _cachedSources;
-    private _cachedEvaluatedSources;
-    changedFiles?: Iterable<string>;
+    private cache;
+    private modifiedResources;
     update(parentCompilation: import('webpack').compilation.Compilation, changedFiles?: Iterable<string>): void;
     getModifiedResourceFiles(): Set<string>;
     getResourceDependencies(filePath: string): never[] | Set<string>;

package/src/resource_loader.js

@@ -21,27 +21,29 @@ const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
 class WebpackResourceLoader {
     constructor() {
-        this._context = '';
         this._fileDependencies = new Map();
         this._reverseDependencies = new Map();
-        this._cachedSources = new Map();
-        this._cachedEvaluatedSources = new Map();
+        this.cache = new Map();
+        this.modifiedResources = new Set();
     }
     update(parentCompilation, changedFiles) {
         this._parentCompilation = parentCompilation;
-        this._context = parentCompilation.context;
-        // Update changed file list
-        this.changedFiles = changedFiles;
-    }
-    getModifiedResourceFiles() {
-        const modifiedResources = new Set();
-        if (!this.changedFiles) {
-            return modifiedResources;
+        // Update resource cache and modified resources
+        this.modifiedResources.clear();
+        if (changedFiles) {
+            for (const changedFile of changedFiles) {
+                for (const affectedResource of this.getAffectedResources(changedFile)) {
+                    this.cache.delete(paths_1.normalizePath(affectedResource));
+                    this.modifiedResources.add(affectedResource);
+                }
+            }
         }
-        for (const changedFile of this.changedFiles) {
-            this.getAffectedResources(changedFile).forEach((affected) => modifiedResources.add(affected));
+        else {
+            this.cache.clear();
         }
-        return modifiedResources;
+    }
+    getModifiedResourceFiles() {
+        return this.modifiedResources;
     }
     getResourceDependencies(filePath) {
         return this._fileDependencies.get(filePath) || [];
@@ -53,6 +55,7 @@ class WebpackResourceLoader {
         this._reverseDependencies.set(file, new Set(resources));
     }
     async _compile(filePath) {
+        var _a;
         if (!this._parentCompilation) {
             throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
         }
@@ -61,34 +64,29 @@ class WebpackResourceLoader {
             return Promise.reject(`Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.`);
         }
         const outputOptions = { filename: filePath };
-        const relativePath = path.relative(this._context || '', filePath);
+        const context = this._parentCompilation.context;
+        const relativePath = path.relative(context || '', filePath);
         const childCompiler = this._parentCompilation.createChildCompiler(relativePath, outputOptions);
-        childCompiler.context = this._context;
+        childCompiler.context = context;
         new NodeTemplatePlugin(outputOptions).apply(childCompiler);
         new NodeTargetPlugin().apply(childCompiler);
-        new SingleEntryPlugin(this._context, filePath).apply(childCompiler);
+        new SingleEntryPlugin(context, filePath).apply(childCompiler);
         new LibraryTemplatePlugin('resource', 'var').apply(childCompiler);
         childCompiler.hooks.thisCompilation.tap('ngtools-webpack', (compilation) => {
-            compilation.hooks.additionalAssets.tapAsync('ngtools-webpack', (callback) => {
-                if (this._cachedEvaluatedSources.has(compilation.fullHash)) {
-                    const cachedEvaluatedSource = this._cachedEvaluatedSources.get(compilation.fullHash);
-                    compilation.assets[filePath] = cachedEvaluatedSource;
-                    callback();
+            compilation.hooks.additionalAssets.tap('ngtools-webpack', () => {
+                const asset = compilation.assets[filePath];
+                if (!asset) {
                     return;
                 }
-                const asset = compilation.assets[filePath];
-                if (asset) {
-                    this._evaluate({ outputName: filePath, source: asset.source() })
-                        .then(output => {
-                        const evaluatedSource = new webpack_sources_1.RawSource(output);
-                        this._cachedEvaluatedSources.set(compilation.fullHash, evaluatedSource);
-                        compilation.assets[filePath] = evaluatedSource;
-                        callback();
-                    })
-                        .catch(err => callback(err));
+                try {
+                    const output = this._evaluate(filePath, asset.source());
+                    if (typeof output === 'string') {
+                        compilation.assets[filePath] = new webpack_sources_1.RawSource(output);
+                    }
                 }
-                else {
-                    callback();
+                catch (error) {
+                    // Use compilation errors, as otherwise webpack will choke
+                    compilation.errors.push(error);
                 }
             });
         });
@@ -111,12 +109,12 @@ class WebpackResourceLoader {
         if (errors && errors.length) {
             this._parentCompilation.errors.push(...errors);
         }
-        Object.keys(childCompilation.assets).forEach(assetName => {
+        Object.keys(childCompilation.assets).forEach((assetName) => {
             // Add all new assets to the parent compilation, with the exception of
             // the file we're loading and its sourcemap.
-            if (assetName !== filePath
-                && assetName !== `${filePath}.map`
-                && this._parentCompilation.assets[assetName] == undefined) {
+            if (assetName !== filePath &&
+                assetName !== `${filePath}.map` &&
+                this._parentCompilation.assets[assetName] == undefined) {
                 this._parentCompilation.assets[assetName] = childCompilation.assets[assetName];
             }
         });
@@ -132,33 +130,41 @@ class WebpackResourceLoader {
                 this._reverseDependencies.set(resolvedFile, new Set([filePath]));
             }
         }
-        const compilationHash = childCompilation.fullHash;
-        const maybeSource = this._cachedSources.get(compilationHash);
-        if (maybeSource) {
-            return { outputName: filePath, source: maybeSource };
-        }
-        else {
-            const source = childCompilation.assets[filePath].source();
-            this._cachedSources.set(compilationHash, source);
-            return { outputName: filePath, source };
-        }
+        const finalOutput = (_a = childCompilation.assets[filePath]) === null || _a === void 0 ? void 0 : _a.source();
+        return { outputName: filePath, source: finalOutput !== null && finalOutput !== void 0 ? finalOutput : '', success: !(errors === null || errors === void 0 ? void 0 : errors.length) };
     }
-    async _evaluate({ outputName, source }) {
+    _evaluate(filename, source) {
         var _a;
         // Evaluate code
         const context = {};
-        vm.runInNewContext(source, context, { filename: outputName });
+        try {
+            vm.runInNewContext(source, context, { filename });
+        }
+        catch (_b) {
+            // Error are propagated through the child compilation.
+            return null;
+        }
         if (typeof context.resource === 'string') {
             return context.resource;
         }
         else if (typeof ((_a = context.resource) === null || _a === void 0 ? void 0 : _a.default) === 'string') {
             return context.resource.default;
         }
-        throw new Error(`The loader "${outputName}" didn't return a string.`);
+        throw new Error(`The loader "${filename}" didn't return a string.`);
     }
-    get(filePath) {
-        return this._compile(filePath)
-            .then((result) => result.source);
+    async get(filePath) {
+        const normalizedFile = paths_1.normalizePath(filePath);
+        let data = this.cache.get(normalizedFile);
+        if (data === undefined) {
+            // cache miss so compile resource
+            const compilationResult = await this._compile(filePath);
+            data = compilationResult.source;
+            // Only cache if compilation was successful
+            if (compilationResult.success) {
+                this.cache.set(normalizedFile, data);
+            }
+        }
+        return data;
     }
 }
 exports.WebpackResourceLoader = WebpackResourceLoader;

package/src/transformers/elide_imports.js

@@ -102,6 +102,10 @@ function elideImports(sourceFile, removedNodes, getTypeChecker, compilerOptions)
         return [];
     }
     const isUnused = (node) => {
+        // Do not remove JSX factory imports
+        if (node.text === compilerOptions.jsxFactory) {
+            return false;
+        }
         const symbol = typeChecker.getSymbolAtLocation(node);
         return symbol && !usedSymbols.has(symbol);
     };

package/src/transformers/spec_helpers.d.ts

@@ -1,6 +1,6 @@
 import * as ts from 'typescript';
 import { WebpackCompilerHost } from '../compiler_host';
-export declare function createTypescriptContext(content: string, additionalFiles?: Record<string, string>, useLibs?: boolean, extraCompilerOptions?: ts.CompilerOptions): {
+export declare function createTypescriptContext(content: string, additionalFiles?: Record<string, string>, useLibs?: boolean, extraCompilerOptions?: ts.CompilerOptions, jsxFile?: boolean): {
     compilerHost: WebpackCompilerHost;
     program: ts.Program;
 };

package/src/transformers/spec_helpers.js

@@ -15,10 +15,11 @@ const ts = require("typescript");
 const compiler_host_1 = require("../compiler_host");
 // Test transform helpers.
 const basePath = '/project/src/';
-const fileName = basePath + 'test-file.ts';
+const basefileName = basePath + 'test-file.ts';
 const typeScriptLibFiles = loadTypeScriptLibFiles();
 const tsLibFiles = loadTsLibFiles();
-function createTypescriptContext(content, additionalFiles, useLibs = false, extraCompilerOptions = {}) {
+function createTypescriptContext(content, additionalFiles, useLibs = false, extraCompilerOptions = {}, jsxFile = false) {
+    const fileName = basefileName + (jsxFile ? 'x' : '');
     // Set compiler options.
     const compilerOptions = {
         noEmitOnError: useLibs,
@@ -81,7 +82,7 @@ function transformTypescript(content, transformers, program, compilerHost) {
         throw new Error(ts.formatDiagnostics(diagnostics, compilerHost));
     }
     // Return the transpiled js.
-    return compilerHost.readFile(fileName.replace(/\.tsx?$/, '.js'));
+    return compilerHost.readFile(basefileName.replace(/\.tsx?$/, '.js'));
 }
 exports.transformTypescript = transformTypescript;
 function loadTypeScriptLibFiles() {