@ngtools/webpack
Version:
Webpack plugin that AoT compiles your Angular components and modules.
311 lines (310 loc) • 14.6 kB
JavaScript
;
/**
* @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
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebpackResourceLoader = void 0;
const node_assert_1 = __importDefault(require("node:assert"));
const node_buffer_1 = require("node:buffer");
const path = __importStar(require("node:path"));
const vm = __importStar(require("node:vm"));
const diagnostics_1 = require("./ivy/diagnostics");
const paths_1 = require("./ivy/paths");
const inline_resource_1 = require("./loaders/inline-resource");
const replace_resources_1 = require("./transformers/replace_resources");
class WebpackResourceLoader {
_parentCompilation;
_fileDependencies = new Map();
_reverseDependencies = new Map();
fileCache;
assetCache;
modifiedResources = new Set();
outputPathCounter = 1;
inlineDataLoaderPath = inline_resource_1.InlineAngularResourceLoaderPath;
constructor(shouldCache) {
if (shouldCache) {
this.fileCache = new Map();
this.assetCache = new Map();
}
}
update(parentCompilation, changedFiles) {
this._parentCompilation = parentCompilation;
// Update resource cache and modified resources
this.modifiedResources.clear();
if (changedFiles) {
for (const changedFile of changedFiles) {
const changedFileNormalized = (0, paths_1.normalizePath)(changedFile);
this.assetCache?.delete(changedFileNormalized);
for (const affectedResource of this.getAffectedResources(changedFile)) {
const affectedResourceNormalized = (0, paths_1.normalizePath)(affectedResource);
this.fileCache?.delete(affectedResourceNormalized);
this.modifiedResources.add(affectedResource);
for (const effectedDependencies of this.getResourceDependencies(affectedResourceNormalized)) {
this.assetCache?.delete((0, paths_1.normalizePath)(effectedDependencies));
}
}
}
}
else {
this.fileCache?.clear();
this.assetCache?.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() {
this._parentCompilation = undefined;
}
getModifiedResourceFiles() {
return this.modifiedResources;
}
getResourceDependencies(filePath) {
return this._fileDependencies.get(filePath) || [];
}
getAffectedResources(file) {
return this._reverseDependencies.get(file) || [];
}
setAffectedResources(file, resources) {
this._reverseDependencies.set(file, new Set(resources));
}
// eslint-disable-next-line max-lines-per-function
async _compile(filePath, data, fileExtension, resourceType, containingFile) {
if (!this._parentCompilation) {
throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
}
const { context, webpack } = this._parentCompilation.compiler;
const { EntryPlugin, NormalModule, library, node, sources, util: { createHash }, } = webpack;
const getEntry = () => {
if (filePath) {
return `${filePath}?${replace_resources_1.NG_COMPONENT_RESOURCE_QUERY}`;
}
else if (resourceType) {
return (
// app.component.ts-2.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js!app.component.ts
`${containingFile}-${this.outputPathCounter}.${fileExtension}` +
`?${replace_resources_1.NG_COMPONENT_RESOURCE_QUERY}!=!${this.inlineDataLoaderPath}!${containingFile}`);
}
else if (data) {
// Create a special URL for reading the resource from memory
return `angular-resource:${resourceType},${createHash('xxhash64')
.update(data)
.digest('hex')}`;
}
throw new Error(`"filePath", "resourceType" or "data" must be specified.`);
};
const entry = getEntry();
// Simple sanity check.
if (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 ||
`${containingFile}-angular-inline--${this.outputPathCounter++}.${resourceType === 'template' ? 'html' : 'css'}`;
const outputOptions = {
filename: outputFilePath,
library: {
type: 'var',
name: 'resource',
},
};
const childCompiler = this._parentCompilation.createChildCompiler('angular-compiler:resource', outputOptions, [
new node.NodeTemplatePlugin(),
new node.NodeTargetPlugin(),
new EntryPlugin(context, entry, { name: 'resource' }),
new library.EnableLibraryPlugin('var'),
]);
childCompiler.hooks.thisCompilation.tap('angular-compiler', (compilation, { normalModuleFactory }) => {
// If no data is provided, the resource will be read from the filesystem
if (data !== undefined) {
normalModuleFactory.hooks.resolveForScheme
.for('angular-resource')
.tap('angular-compiler', (resourceData) => {
if (filePath) {
resourceData.path = filePath;
resourceData.resource = filePath;
}
return true;
});
NormalModule.getCompilationHooks(compilation)
.readResourceForScheme.for('angular-resource')
.tap('angular-compiler', () => data);
compilation[inline_resource_1.InlineAngularResourceSymbol] = data;
}
compilation.hooks.additionalAssets.tap('angular-compiler', () => {
const asset = compilation.assets[outputFilePath];
if (!asset) {
return;
}
try {
const output = this._evaluate(outputFilePath, asset.source().toString());
if (typeof output === 'string') {
compilation.assets[outputFilePath] = new sources.RawSource(output);
}
}
catch (error) {
(0, node_assert_1.default)(error instanceof Error, 'catch clause variable is not an Error instance');
// Use compilation errors, as otherwise webpack will choke
(0, diagnostics_1.addError)(compilation, error.message);
}
});
});
let finalContent;
childCompiler.hooks.compilation.tap('angular-compiler', (childCompilation) => {
childCompilation.hooks.processAssets.tap({ name: 'angular-compiler', stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT }, () => {
finalContent = childCompilation.assets[outputFilePath]?.source().toString();
for (const { files } of childCompilation.chunks) {
for (const file of files) {
childCompilation.deleteAsset(file);
}
}
});
});
return new Promise((resolve, reject) => {
childCompiler.runAsChild((error, _, childCompilation) => {
if (error) {
reject(error);
return;
}
else if (!childCompilation) {
reject(new Error('Unknown child compilation error'));
return;
}
// Workaround to attempt to reduce memory usage of child compilations.
// This removes the child compilation from the main compilation and manually propagates
// all dependencies, warnings, and errors.
const parent = childCompiler.parentCompilation;
if (parent) {
parent.children = parent.children.filter((child) => child !== childCompilation);
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(dependency);
}
// Save the dependencies for this resource.
if (filePath) {
const resolvedFile = (0, 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);
parent.missingDependencies.addAll(childCompilation.missingDependencies);
parent.buildDependencies.addAll(childCompilation.buildDependencies);
parent.warnings.push(...childCompilation.warnings);
parent.errors.push(...childCompilation.errors);
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 = info.sourceFilename ?? `!![GENERATED]:${name}`;
this.assetCache.set(cacheKey, { info, name, source });
}
}
}
resolve({
content: finalContent ?? '',
success: childCompilation.errors?.length === 0,
});
});
});
}
_evaluate(filename, source) {
// Evaluate code
// css-loader requires the btoa function to exist to correctly generate inline sourcemaps
const context = {
btoa(input) {
return node_buffer_1.Buffer.from(input).toString('base64');
},
};
try {
vm.runInNewContext(source, context, { filename });
}
catch {
// Error are propagated through the child compilation.
return null;
}
if (typeof context.resource === 'string') {
return context.resource;
}
else if (typeof context.resource?.default === 'string') {
return context.resource.default;
}
throw new Error(`The loader "${filename}" didn't return a string.`);
}
async get(filePath) {
const normalizedFile = (0, paths_1.normalizePath)(filePath);
let compilationResult = this.fileCache?.get(normalizedFile);
if (compilationResult === undefined) {
// cache miss so compile resource
compilationResult = await this._compile(filePath);
// Only cache if compilation was successful
if (this.fileCache && compilationResult.success) {
this.fileCache.set(normalizedFile, compilationResult);
}
}
return compilationResult.content;
}
async process(data, fileExtension, resourceType, containingFile) {
if (data.trim().length === 0) {
return '';
}
const compilationResult = await this._compile(undefined, data, fileExtension, resourceType, containingFile);
return compilationResult.content;
}
}
exports.WebpackResourceLoader = WebpackResourceLoader;