refactor(@ngtools/webpack): use Webpack inline resource matching for inline resources

Webpack provides a method to construct a special request string that will remap a loader chain to appear to be from a specific resource path. This requires a custom loader, however, it allows rule matching to leverage the existing file extension based approach and allows providing a path to other loaders which simplifies relative request handling.

Author: clydin

packages/ngtools/webpack/src/inline-data-loader.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { Compilation, LoaderContext } from 'webpack';
+
+export const InlineAngularResourceSymbol = Symbol();
+
+export interface CompilationWithInlineAngularResource extends Compilation {
+  [InlineAngularResourceSymbol]: string;
+}
+
+export default function (this: LoaderContext<{ data?: string }>) {
+  const callback = this.async();
+  const { data } = this.getOptions();
+
+  if (data) {
+    callback(undefined, Buffer.from(data, 'base64').toString());
+  } else {
+    const content = (this._compilation as CompilationWithInlineAngularResource)[
+      InlineAngularResourceSymbol
+    ];
+    callback(undefined, content);
+  }
+}

packages/ngtools/webpack/src/ivy/host.ts

@@ -19,7 +19,11 @@ import { normalizePath } from './paths';
 export function augmentHostWithResources(
   host: ts.CompilerHost,
   resourceLoader: WebpackResourceLoader,
-  options: { directTemplateLoading?: boolean; inlineStyleMimeType?: string } = {},
+  options: {
+    directTemplateLoading?: boolean;
+    inlineStyleMimeType?: string;
+    inlineStyleFileExtension?: string;
+  } = {},
 ) {
   const resourceHost = host as CompilerHost;
 
@@ -57,10 +61,11 @@ export function augmentHostWithResources(
       return null;
     }
 
-    if (options.inlineStyleMimeType) {
+    if (options.inlineStyleMimeType || options.inlineStyleFileExtension) {
       const content = await resourceLoader.process(
         data,
         options.inlineStyleMimeType,
+        options.inlineStyleFileExtension,
         context.type,
         context.containingFile,
       );

packages/ngtools/webpack/src/ivy/plugin.ts

@@ -55,6 +55,7 @@ export interface AngularWebpackPluginOptions {
   emitNgModuleScope: boolean;
   jitMode: boolean;
   inlineStyleMimeType?: string;
+  inlineStyleFileExtension?: string;
 }
 
 // Add support for missing properties in Webpack types as well as the loader's file emitter
@@ -241,6 +242,7 @@ export class AngularWebpackPlugin {
       augmentHostWithResources(host, resourceLoader, {
         directTemplateLoading: this.pluginOptions.directTemplateLoading,
         inlineStyleMimeType: this.pluginOptions.inlineStyleMimeType,
+        inlineStyleFileExtension: this.pluginOptions.inlineStyleFileExtension,
       });
 
       // Setup source file adjustment options

packages/ngtools/webpack/src/ivy/transformation.ts

@@ -36,7 +36,11 @@ export function createAotTransformers(
 
 export function createJitTransformers(
   builder: ts.BuilderProgram,
-  options: { directTemplateLoading?: boolean; inlineStyleMimeType?: string },
+  options: {
+    directTemplateLoading?: boolean;
+    inlineStyleMimeType?: string;
+    inlineStyleFileExtension?: string;
+  },
 ): ts.CustomTransformers {
   const getTypeChecker = () => builder.getProgram().getTypeChecker();
 
@@ -47,6 +51,7 @@ export function createJitTransformers(
         getTypeChecker,
         options.directTemplateLoading,
         options.inlineStyleMimeType,
+        options.inlineStyleFileExtension,
       ),
       constructorParametersDownlevelTransform(builder.getProgram()),
     ],

packages/ngtools/webpack/src/resource_loader.ts

@@ -10,6 +10,10 @@ import { createHash } from 'crypto';
 import * as path from 'path';
 import * as vm from 'vm';
 import { Asset, Compilation, EntryPlugin, NormalModule, library, node, sources } from 'webpack';
+import {
+  CompilationWithInlineAngularResource,
+  InlineAngularResourceSymbol,
+} from './inline-data-loader';
 import { normalizePath } from './ivy/paths';
 
 interface CompilationOutput {
@@ -30,6 +34,8 @@ export class WebpackResourceLoader {
   private modifiedResources = new Set<string>();
   private outputPathCounter = 1;
 
+  private readonly inlineDataLoaderPath = require.resolve('./inline-data-loader');
+
   constructor(shouldCache: boolean) {
     if (shouldCache) {
       this.fileCache = new Map();
@@ -98,6 +104,7 @@ export class WebpackResourceLoader {
     filePath?: string,
     data?: string,
     mimeType?: string,
+    fileExtension?: string,
     resourceType?: 'style' | 'template',
     hash?: string,
     containingFile?: string,
@@ -107,7 +114,12 @@ export class WebpackResourceLoader {
     }
 
     // Create a special URL for reading the resource from memory
-    const entry = data ? `angular-resource:${resourceType},${hash}` : filePath;
+    const entry =
+      filePath ||
+      (resourceType
+        ? `${containingFile}-${this.outputPathCounter}.${fileExtension}!=!${this.inlineDataLoaderPath}!${containingFile}`
+        : `angular-resource:${resourceType},${hash}`);
+
     if (!entry) {
       throw new Error(`"filePath" or "data" must be specified.`);
     }
@@ -166,6 +178,8 @@ export class WebpackResourceLoader {
           NormalModule.getCompilationHooks(compilation)
             .readResourceForScheme.for('angular-resource')
             .tap('angular-compiler', () => data);
+
+          (compilation as CompilationWithInlineAngularResource)[InlineAngularResourceSymbol] = data;
         }
 
         compilation.hooks.additionalAssets.tap('angular-compiler', () => {
@@ -314,7 +328,8 @@ export class WebpackResourceLoader {
 
   async process(
     data: string,
-    mimeType: string,
+    mimeType: string | undefined,
+    fileExtension: string | undefined,
     resourceType: 'template' | 'style',
     containingFile?: string,
   ): Promise<string> {
@@ -330,6 +345,7 @@ export class WebpackResourceLoader {
         undefined,
         data,
         mimeType,
+        fileExtension,
         resourceType,
         cacheKey,
         containingFile,

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

@@ -8,11 +8,14 @@
 
 import * as ts from 'typescript';
 
+const inlineDataLoaderPath = require.resolve('../inline-data-loader');
+
 export function replaceResources(
   shouldTransform: (fileName: string) => boolean,
   getTypeChecker: () => ts.TypeChecker,
   directTemplateLoading = false,
   inlineStyleMimeType?: string,
+  inlineStyleFileExtension?: string,
 ): ts.TransformerFactory<ts.SourceFile> {
   if (inlineStyleMimeType && !/^text\/[-.\w]+$/.test(inlineStyleMimeType)) {
     throw new Error('Invalid inline style MIME type.');
@@ -36,6 +39,7 @@ export function replaceResources(
                 resourceImportDeclarations,
                 moduleKind,
                 inlineStyleMimeType,
+                inlineStyleFileExtension,
               )
             : node,
         );
@@ -87,6 +91,7 @@ function visitDecorator(
   resourceImportDeclarations: ts.ImportDeclaration[],
   moduleKind?: ts.ModuleKind,
   inlineStyleMimeType?: string,
+  inlineStyleFileExtension?: string,
 ): ts.Decorator {
   if (!isComponentDecorator(node, typeChecker)) {
     return node;
@@ -117,6 +122,7 @@ function visitDecorator(
           resourceImportDeclarations,
           moduleKind,
           inlineStyleMimeType,
+          inlineStyleFileExtension,
         )
       : node,
   );
@@ -150,6 +156,7 @@ function visitComponentMetadata(
   resourceImportDeclarations: ts.ImportDeclaration[],
   moduleKind?: ts.ModuleKind,
   inlineStyleMimeType?: string,
+  inlineStyleFileExtension?: string,
 ): ts.ObjectLiteralElementLike | undefined {
   if (!ts.isPropertyAssignment(node) || ts.isComputedPropertyName(node.name)) {
     return node;
@@ -198,6 +205,10 @@ function visitComponentMetadata(
           if (inlineStyleMimeType) {
             const data = Buffer.from(node.text).toString('base64');
             url = `data:${inlineStyleMimeType};charset=utf-8;base64,${data}`;
+          } else if (inlineStyleFileExtension) {
+            const data = Buffer.from(node.text).toString('base64');
+            const containingFile = node.getSourceFile().fileName;
+            url = `${containingFile}.${inlineStyleFileExtension}!=!${inlineDataLoaderPath}?data=${data}!${containingFile}`;
           } else {
             return nodeFactory.createStringLiteral(node.text);
           }