@ngtools/webpack 12.0.0-rc.3 → 12.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "12.0.0-rc.3",
+  "version": "12.0.3",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",
@@ -28,12 +28,12 @@
     "enhanced-resolve": "5.7.0"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^12.0.0-next",
+    "@angular/compiler-cli": "^12.0.0",
     "typescript": "~4.2.3",
     "webpack": "^5.30.0"
   },
   "engines": {
-    "node": "^12.14.1 || ^14.0.0",
+    "node": "^12.14.1 || >=14.0.0",
     "npm": "^6.11.0 || ^7.5.6",
     "yarn": ">= 1.13.0"
   }

package/src/ivy/host.js

@@ -42,7 +42,7 @@ function augmentHostWithResources(host, resourceLoader, options = {}) {
             return null;
         }
         if (options.inlineStyleMimeType) {
-            const content = await resourceLoader.process(data, options.inlineStyleMimeType);
+            const content = await resourceLoader.process(data, options.inlineStyleMimeType, context.type, context.containingFile);
             return { content };
         }
         return null;

package/src/ivy/plugin.js

@@ -171,8 +171,9 @@ class AngularWebpackPlugin {
                 if (internalFiles === null || internalFiles === void 0 ? void 0 : internalFiles.has(sourceFile)) {
                     continue;
                 }
-                // Ensure all program files are considered part of the compilation and will be watched
-                compilation.fileDependencies.add(sourceFile.fileName);
+                // Ensure all program files are considered part of the compilation and will be watched.
+                // Webpack does not normalize paths. Therefore, we need to normalize the path with FS seperators.
+                compilation.fileDependencies.add(paths_1.externalizePath(sourceFile.fileName));
                 // Add all non-declaration files to the initial set of unused files. The set will be
                 // analyzed and pruned after all Webpack modules are finished building.
                 if (!sourceFile.isDeclarationFile) {
@@ -258,7 +259,7 @@ class AngularWebpackPlugin {
         this.requiredFilesToEmitCache.clear();
     }
     loadConfiguration(compilation) {
-        const { options: compilerOptions, rootNames, errors } = compiler_cli_1.readConfiguration(this.pluginOptions.tsconfig, this.pluginOptions.compilerOptions);
+        const { options: compilerOptions, rootNames, errors, } = compiler_cli_1.readConfiguration(this.pluginOptions.tsconfig, this.pluginOptions.compilerOptions);
         compilerOptions.enableIvy = true;
         compilerOptions.noEmitOnError = false;
         compilerOptions.suppressOutputPathCheck = true;
@@ -287,39 +288,46 @@ class AngularWebpackPlugin {
         // The wrapped host inside NgtscProgram adds additional files that will not have versions.
         const typeScriptProgram = angularProgram.getTsProgram();
         host_1.augmentProgramWithVersioning(typeScriptProgram);
-        const builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, this.builder);
-        // Save for next rebuild
+        let builder;
         if (this.watchMode) {
-            this.builder = builder;
+            builder = this.builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, this.builder);
             this.ngtscNextProgram = angularProgram;
         }
+        else {
+            // When not in watch mode, the startup cost of the incremental analysis can be avoided by
+            // using an abstract builder that only wraps a TypeScript program.
+            builder = ts.createAbstractBuilder(typeScriptProgram, host);
+        }
         // Update semantic diagnostics cache
         const affectedFiles = new Set();
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-            const result = builder.getSemanticDiagnosticsOfNextAffectedFile(undefined, (sourceFile) => {
-                // If the affected file is a TTC shim, add the shim's original source file.
-                // This ensures that changes that affect TTC are typechecked even when the changes
-                // are otherwise unrelated from a TS perspective and do not result in Ivy codegen changes.
-                // For example, changing @Input property types of a directive used in another component's
-                // template.
-                if (ignoreForDiagnostics.has(sourceFile) &&
-                    sourceFile.fileName.endsWith('.ngtypecheck.ts')) {
-                    // This file name conversion relies on internal compiler logic and should be converted
-                    // to an official method when available. 15 is length of `.ngtypecheck.ts`
-                    const originalFilename = sourceFile.fileName.slice(0, -15) + '.ts';
-                    const originalSourceFile = builder.getSourceFile(originalFilename);
-                    if (originalSourceFile) {
-                        affectedFiles.add(originalSourceFile);
+        // Analyze affected files when in watch mode for incremental type checking
+        if ('getSemanticDiagnosticsOfNextAffectedFile' in builder) {
+            // eslint-disable-next-line no-constant-condition
+            while (true) {
+                const result = builder.getSemanticDiagnosticsOfNextAffectedFile(undefined, (sourceFile) => {
+                    // If the affected file is a TTC shim, add the shim's original source file.
+                    // This ensures that changes that affect TTC are typechecked even when the changes
+                    // are otherwise unrelated from a TS perspective and do not result in Ivy codegen changes.
+                    // For example, changing @Input property types of a directive used in another component's
+                    // template.
+                    if (ignoreForDiagnostics.has(sourceFile) &&
+                        sourceFile.fileName.endsWith('.ngtypecheck.ts')) {
+                        // This file name conversion relies on internal compiler logic and should be converted
+                        // to an official method when available. 15 is length of `.ngtypecheck.ts`
+                        const originalFilename = sourceFile.fileName.slice(0, -15) + '.ts';
+                        const originalSourceFile = builder.getSourceFile(originalFilename);
+                        if (originalSourceFile) {
+                            affectedFiles.add(originalSourceFile);
+                        }
+                        return true;
                     }
-                    return true;
+                    return false;
+                });
+                if (!result) {
+                    break;
                 }
-                return false;
-            });
-            if (!result) {
-                break;
+                affectedFiles.add(result.affected);
             }
-            affectedFiles.add(result.affected);
         }
         // Collect non-semantic diagnostics
         const diagnostics = [
@@ -399,10 +407,14 @@ class AngularWebpackPlugin {
         };
     }
     updateJitProgram(compilerOptions, rootNames, host, diagnosticsReporter) {
-        const builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, this.builder);
-        // Save for next rebuild
+        let builder;
         if (this.watchMode) {
-            this.builder = builder;
+            builder = this.builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, this.builder);
+        }
+        else {
+            // When not in watch mode, the startup cost of the incremental analysis can be avoided by
+            // using an abstract builder that only wraps a TypeScript program.
+            builder = ts.createAbstractBuilder(rootNames, compilerOptions, host);
         }
         const diagnostics = [
             ...builder.getOptionsDiagnostics(),

package/src/resource_loader.d.ts

@@ -11,7 +11,7 @@ export declare class WebpackResourceLoader {
     private _fileDependencies;
     private _reverseDependencies;
     private fileCache?;
-    private inlineCache?;
+    private assetCache?;
     private modifiedResources;
     private outputPathCounter;
     constructor(shouldCache: boolean);
@@ -24,5 +24,5 @@ export declare class WebpackResourceLoader {
     private _compile;
     private _evaluate;
     get(filePath: string): Promise<string>;
-    process(data: string, mimeType: string): Promise<string>;
+    process(data: string, mimeType: string, resourceType: 'template' | 'style', containingFile?: string): Promise<string>;
 }

package/src/resource_loader.js

@@ -21,24 +21,37 @@ class WebpackResourceLoader {
         this.outputPathCounter = 1;
         if (shouldCache) {
             this.fileCache = new Map();
-            this.inlineCache = new Map();
+            this.assetCache = new Map();
         }
     }
     update(parentCompilation, changedFiles) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         this._parentCompilation = parentCompilation;
         // Update resource cache and modified resources
         this.modifiedResources.clear();
         if (changedFiles) {
             for (const changedFile of changedFiles) {
+                const changedFileNormalized = paths_1.normalizePath(changedFile);
+                (_a = this.assetCache) === null || _a === void 0 ? void 0 : _a.delete(changedFileNormalized);
                 for (const affectedResource of this.getAffectedResources(changedFile)) {
-                    (_a = this.fileCache) === null || _a === void 0 ? void 0 : _a.delete(paths_1.normalizePath(affectedResource));
+                    const affectedResourceNormalized = paths_1.normalizePath(affectedResource);
+                    (_b = this.fileCache) === null || _b === void 0 ? void 0 : _b.delete(affectedResourceNormalized);
                     this.modifiedResources.add(affectedResource);
+                    for (const effectedDependencies of this.getResourceDependencies(affectedResourceNormalized)) {
+                        (_c = this.assetCache) === null || _c === void 0 ? void 0 : _c.delete(paths_1.normalizePath(effectedDependencies));
+                    }
                 }
             }
         }
         else {
-            (_b = this.fileCache) === null || _b === void 0 ? void 0 : _b.clear();
+            (_d = this.fileCache) === null || _d === void 0 ? void 0 : _d.clear();
+            (_e = this.assetCache) === null || _e === void 0 ? void 0 : _e.clear();
+        }
+        // Re-emit all assets for un-effected files
+        if (this.assetCache) {
+            for (const [, { name, source, info }] of this.assetCache) {
+                this._parentCompilation.emitAsset(name, source, info);
+            }
         }
     }
     clearParentCompilation() {
@@ -56,12 +69,14 @@ class WebpackResourceLoader {
     setAffectedResources(file, resources) {
         this._reverseDependencies.set(file, new Set(resources));
     }
-    async _compile(filePath, data, mimeType) {
+    async _compile(filePath, data, mimeType, resourceType, containingFile) {
         if (!this._parentCompilation) {
             throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
         }
         // Create a special URL for reading the resource from memory
-        const entry = data ? 'angular-resource://' : filePath;
+        const entry = data
+            ? `angular-resource:${resourceType},${crypto_1.createHash('md5').update(data).digest('hex')}`
+            : filePath;
         if (!entry) {
             throw new Error(`"filePath" or "data" must be specified.`);
         }
@@ -69,7 +84,8 @@ class WebpackResourceLoader {
         if (filePath === null || filePath === void 0 ? void 0 : filePath.match(/\.[jt]s$/)) {
             throw new Error(`Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.`);
         }
-        const outputFilePath = filePath || `angular-resource-output-${this.outputPathCounter++}.css`;
+        const outputFilePath = filePath ||
+            `${containingFile}-angular-inline--${this.outputPathCounter++}.${resourceType === 'template' ? 'html' : 'css'}`;
         const outputOptions = {
             filename: outputFilePath,
             library: {
@@ -133,7 +149,7 @@ class WebpackResourceLoader {
         });
         return new Promise((resolve, reject) => {
             childCompiler.runAsChild((error, _, childCompilation) => {
-                var _a;
+                var _a, _b;
                 if (error) {
                     reject(error);
                     return;
@@ -148,12 +164,26 @@ class WebpackResourceLoader {
                 const parent = childCompiler.parentCompilation;
                 if (parent) {
                     parent.children = parent.children.filter((child) => child !== childCompilation);
-                    parent.fileDependencies.addAll(childCompilation.fileDependencies);
+                    for (const fileDependency of childCompilation.fileDependencies) {
+                        if (data && containingFile && fileDependency.endsWith(entry)) {
+                            // use containing file if the resource was inline
+                            parent.fileDependencies.add(containingFile);
+                        }
+                        else {
+                            parent.fileDependencies.add(fileDependency);
+                        }
+                    }
                     parent.contextDependencies.addAll(childCompilation.contextDependencies);
                     parent.missingDependencies.addAll(childCompilation.missingDependencies);
                     parent.buildDependencies.addAll(childCompilation.buildDependencies);
                     parent.warnings.push(...childCompilation.warnings);
                     parent.errors.push(...childCompilation.errors);
+                    for (const { info, name, source } of childCompilation.getAssets()) {
+                        if (info.sourceFilename === undefined) {
+                            throw new Error(`'${name}' asset info 'sourceFilename' is 'undefined'.`);
+                        }
+                        (_a = this.assetCache) === null || _a === void 0 ? void 0 : _a.set(info.sourceFilename, { info, name, source });
+                    }
                 }
                 // Save the dependencies for this resource.
                 if (filePath) {
@@ -177,7 +207,7 @@ class WebpackResourceLoader {
                 }
                 resolve({
                     content: finalContent !== null && finalContent !== void 0 ? finalContent : '',
-                    success: ((_a = childCompilation.errors) === null || _a === void 0 ? void 0 : _a.length) === 0,
+                    success: ((_b = childCompilation.errors) === null || _b === void 0 ? void 0 : _b.length) === 0,
                 });
             });
         });
@@ -215,19 +245,11 @@ class WebpackResourceLoader {
         }
         return compilationResult.content;
     }
-    async process(data, mimeType) {
-        var _a;
+    async process(data, mimeType, resourceType, containingFile) {
         if (data.trim().length === 0) {
             return '';
         }
-        const cacheKey = crypto_1.createHash('md5').update(data).digest('hex');
-        let compilationResult = (_a = this.inlineCache) === null || _a === void 0 ? void 0 : _a.get(cacheKey);
-        if (compilationResult === undefined) {
-            compilationResult = await this._compile(undefined, data, mimeType);
-            if (this.inlineCache && compilationResult.success) {
-                this.inlineCache.set(cacheKey, compilationResult);
-            }
-        }
+        const compilationResult = await this._compile(undefined, data, mimeType, resourceType, containingFile);
         return compilationResult.content;
     }
 }