@ngtools/webpack 12.1.0-next.6 → 12.1.3

package/README.md

@@ -37,4 +37,4 @@ The loader works with webpack plugin to compile the application's TypeScript. It
 - `jitMode` [default: `false`] - Enables JIT compilation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources.
 - `directTemplateLoading` [default: `true`] - Causes the plugin to load component templates (HTML) directly from the filesystem. This is more efficient if only using the `raw-loader` to load component templates. Do not enable this option if additional loaders are configured for component templates.
 - `fileReplacements` [default: none] - Allows replacing TypeScript files with other TypeScript files in the build. This option acts on fully resolved file paths.
-- `inlineStyleMimeType` [default: none] - When set to a valid MIME type, enables conversion of an Angular Component's inline styles into data URIs. This allows a Webpack 5 configuration rule to use the `mimetype` condition to process the inline styles. A valid MIME type is a string starting with `text/` (Example for CSS: `text/css`).
+- `inlineStyleFileExtension` [default: none] - When set inline component styles will be processed by Webpack as files with the provided extension.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngtools/webpack",
-  "version": "12.1.0-next.6",
+  "version": "12.1.3",
   "description": "Webpack plugin that AoT compiles your Angular components and modules.",
   "main": "./src/index.js",
   "typings": "src/index.d.ts",

package/src/ivy/host.js

@@ -30,7 +30,6 @@ exports.augmentHostWithCaching = exports.augmentProgramWithVersioning = exports.
 const crypto_1 = require("crypto");
 const path = __importStar(require("path"));
 const ts = __importStar(require("typescript"));
-const transformers_1 = require("../transformers");
 const paths_1 = require("./paths");
 function augmentHostWithResources(host, resourceLoader, options = {}) {
     const resourceHost = host;
@@ -248,10 +247,6 @@ function augmentHostWithCaching(host, cache) {
         }
         const file = baseGetSourceFile.call(host, fileName, languageVersion, onError, true, ...parameters);
         if (file) {
-            // Temporary workaround for upstream transform resource defect
-            if (file && !file.isDeclarationFile && file.text.includes('@Component')) {
-                transformers_1.workaroundStylePreprocessing(file);
-            }
             cache.set(fileName, file);
         }
         return file;

package/src/ivy/plugin.d.ts

@@ -16,6 +16,7 @@ export interface AngularWebpackPluginOptions {
     emitClassMetadata: boolean;
     emitNgModuleScope: boolean;
     jitMode: boolean;
+    /** @deprecated use `inlineStyleFileExtension` instead. */
     inlineStyleMimeType?: string;
     inlineStyleFileExtension?: string;
 }

package/src/ivy/plugin.js

@@ -362,17 +362,17 @@ class AngularWebpackPlugin {
                 affectedFiles.add(result.affected);
             }
         }
-        // Collect non-semantic diagnostics
+        // Collect program level diagnostics
         const diagnostics = [
             ...angularCompiler.getOptionDiagnostics(),
             ...builder.getOptionsDiagnostics(),
             ...builder.getGlobalDiagnostics(),
-            ...builder.getSyntacticDiagnostics(),
         ];
         diagnosticsReporter(diagnostics);
-        // Collect semantic diagnostics
+        // Collect source file specific diagnostics
         for (const sourceFile of builder.getSourceFiles()) {
             if (!ignoreForDiagnostics.has(sourceFile)) {
+                diagnosticsReporter(builder.getSyntacticDiagnostics(sourceFile));
                 diagnosticsReporter(builder.getSemanticDiagnostics(sourceFile));
             }
         }

package/src/resource_loader.js

@@ -188,13 +188,38 @@ class WebpackResourceLoader {
                 const parent = childCompiler.parentCompilation;
                 if (parent) {
                     parent.children = parent.children.filter((child) => child !== childCompilation);
-                    for (const fileDependency of childCompilation.fileDependencies) {
-                        if (data && containingFile && fileDependency.endsWith(entry)) {
+                    let fileDependencies;
+                    for (const dependency of childCompilation.fileDependencies) {
+                        // Skip paths that do not appear to be files (have no extension).
+                        // `fileDependencies` can contain directories and not just files which can
+                        // cause incorrect cache invalidation on rebuilds.
+                        if (!path.extname(dependency)) {
+                            continue;
+                        }
+                        if (data && containingFile && dependency.endsWith(entry)) {
                             // use containing file if the resource was inline
                             parent.fileDependencies.add(containingFile);
                         }
                         else {
-                            parent.fileDependencies.add(fileDependency);
+                            parent.fileDependencies.add(dependency);
+                        }
+                        // Save the dependencies for this resource.
+                        if (filePath) {
+                            const resolvedFile = paths_1.normalizePath(dependency);
+                            const entry = this._reverseDependencies.get(resolvedFile);
+                            if (entry) {
+                                entry.add(filePath);
+                            }
+                            else {
+                                this._reverseDependencies.set(resolvedFile, new Set([filePath]));
+                            }
+                            if (fileDependencies) {
+                                fileDependencies.add(dependency);
+                            }
+                            else {
+                                fileDependencies = new Set([dependency]);
+                                this._fileDependencies.set(filePath, fileDependencies);
+                            }
                         }
                     }
                     parent.contextDependencies.addAll(childCompilation.contextDependencies);
@@ -202,30 +227,12 @@ class WebpackResourceLoader {
                     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) {
-                    this._fileDependencies.set(filePath, new Set(childCompilation.fileDependencies));
-                    for (const file of childCompilation.fileDependencies) {
-                        const resolvedFile = paths_1.normalizePath(file);
-                        // Skip paths that do not appear to be files (have no extension).
-                        // `fileDependencies` can contain directories and not just files which can
-                        // cause incorrect cache invalidation on rebuilds.
-                        if (!path.extname(resolvedFile)) {
-                            continue;
-                        }
-                        const entry = this._reverseDependencies.get(resolvedFile);
-                        if (entry) {
-                            entry.add(filePath);
-                        }
-                        else {
-                            this._reverseDependencies.set(resolvedFile, new Set([filePath]));
+                    if (this.assetCache) {
+                        for (const { info, name, source } of childCompilation.getAssets()) {
+                            // Use the originating file as the cache key if present
+                            // Otherwise, generate a cache key based on the generated name
+                            const cacheKey = (_a = info.sourceFilename) !== null && _a !== void 0 ? _a : `!![GENERATED]:${name}`;
+                            this.assetCache.set(cacheKey, { info, name, source });
                         }
                     }
                 }

package/src/transformers/replace_resources.d.ts

@@ -8,4 +8,3 @@
 import * as ts from 'typescript';
 export declare function replaceResources(shouldTransform: (fileName: string) => boolean, getTypeChecker: () => ts.TypeChecker, directTemplateLoading?: boolean, inlineStyleMimeType?: string, inlineStyleFileExtension?: string): ts.TransformerFactory<ts.SourceFile>;
 export declare function getResourceUrl(node: ts.Node, loader?: string): string | null;
-export declare function workaroundStylePreprocessing(sourceFile: ts.SourceFile): void;

package/src/transformers/replace_resources.js

@@ -26,7 +26,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.workaroundStylePreprocessing = exports.getResourceUrl = exports.replaceResources = void 0;
+exports.getResourceUrl = exports.replaceResources = void 0;
 const ts = __importStar(require("typescript"));
 const inlineDataLoaderPath = require.resolve('../inline-data-loader');
 function replaceResources(shouldTransform, getTypeChecker, directTemplateLoading = false, inlineStyleMimeType, inlineStyleFileExtension) {
@@ -127,7 +127,7 @@ function visitComponentMetadata(nodeFactory, node, styleReplacements, directTemp
                     else if (inlineStyleFileExtension) {
                         const data = Buffer.from(node.text).toString('base64');
                         const containingFile = node.getSourceFile().fileName;
-                        url = `${containingFile}.${inlineStyleFileExtension}!=!${inlineDataLoaderPath}?data=${data}!${containingFile}`;
+                        url = `${containingFile}.${inlineStyleFileExtension}!=!${inlineDataLoaderPath}?data=${encodeURIComponent(data)}!${containingFile}`;
                     }
                     else {
                         return nodeFactory.createStringLiteral(node.text);
@@ -222,62 +222,3 @@ function getDecoratorOrigin(decorator, typeChecker) {
     }
     return null;
 }
-function workaroundStylePreprocessing(sourceFile) {
-    const visitNode = (node) => {
-        var _a;
-        if (ts.isClassDeclaration(node) && ((_a = node.decorators) === null || _a === void 0 ? void 0 : _a.length)) {
-            for (const decorator of node.decorators) {
-                visitDecoratorWorkaround(decorator);
-            }
-        }
-        return ts.forEachChild(node, visitNode);
-    };
-    ts.forEachChild(sourceFile, visitNode);
-}
-exports.workaroundStylePreprocessing = workaroundStylePreprocessing;
-function visitDecoratorWorkaround(node) {
-    if (!ts.isCallExpression(node.expression)) {
-        return;
-    }
-    const decoratorFactory = node.expression;
-    if (!ts.isIdentifier(decoratorFactory.expression) ||
-        decoratorFactory.expression.text !== 'Component') {
-        return;
-    }
-    const args = decoratorFactory.arguments;
-    if (args.length !== 1 || !ts.isObjectLiteralExpression(args[0])) {
-        // Unsupported component metadata
-        return;
-    }
-    const objectExpression = args[0];
-    // check if a `styles` property is present
-    let hasStyles = false;
-    for (const element of objectExpression.properties) {
-        if (!ts.isPropertyAssignment(element) || ts.isComputedPropertyName(element.name)) {
-            continue;
-        }
-        if (element.name.text === 'styles') {
-            hasStyles = true;
-            break;
-        }
-    }
-    if (hasStyles) {
-        return;
-    }
-    const nodeFactory = ts.factory;
-    // add a `styles` property to workaround upstream compiler defect
-    const emptyArray = nodeFactory.createArrayLiteralExpression();
-    const stylePropertyName = nodeFactory.createIdentifier('styles');
-    const styleProperty = nodeFactory.createPropertyAssignment(stylePropertyName, emptyArray);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    stylePropertyName.parent = styleProperty;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    emptyArray.parent = styleProperty;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    styleProperty.parent = objectExpression;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    objectExpression.properties = nodeFactory.createNodeArray([
-        ...objectExpression.properties,
-        styleProperty,
-    ]);
-}