resource_loader.ts

/**
 * @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.dev/license
 */

importassertfrom'node:assert';
import{Buffer}from'node:buffer';
import*aspathfrom'node:path';
import*asvmfrom'node:vm';
importtype{Asset,Compilation}from'webpack';
import{addError}from'./ivy/diagnostics';
import{normalizePath}from'./ivy/paths';
import{
CompilationWithInlineAngularResource,
InlineAngularResourceLoaderPath,
InlineAngularResourceSymbol,
}from'./loaders/inline-resource';
import{NG_COMPONENT_RESOURCE_QUERY}from'./transformers/replace_resources';

interfaceCompilationOutput{
content: string;
map?: string;
success: boolean;
}

exportclassWebpackResourceLoader{
private_parentCompilation?: Compilation;
private_fileDependencies=newMap<string,Set<string>>();
private_reverseDependencies=newMap<string,Set<string>>();

privatefileCache?: Map<string,CompilationOutput>;
privateassetCache?: Map<string,Asset>;

privatemodifiedResources=newSet<string>();
privateoutputPathCounter=1;

privatereadonlyinlineDataLoaderPath=InlineAngularResourceLoaderPath;

constructor(shouldCache: boolean){
if(shouldCache){
this.fileCache=newMap();
this.assetCache=newMap();
}
}

update(parentCompilation: Compilation,changedFiles?: Iterable<string>): void{
this._parentCompilation=parentCompilation;

// Update resource cache and modified resources
this.modifiedResources.clear();

if(changedFiles){
for(constchangedFileofchangedFiles){
constchangedFileNormalized=normalizePath(changedFile);
this.assetCache?.delete(changedFileNormalized);

for(constaffectedResourceofthis.getAffectedResources(changedFile)){
constaffectedResourceNormalized=normalizePath(affectedResource);
this.fileCache?.delete(affectedResourceNormalized);
this.modifiedResources.add(affectedResource);

for(consteffectedDependenciesofthis.getResourceDependencies(
affectedResourceNormalized,
)){
this.assetCache?.delete(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 }]ofthis.assetCache){
this._parentCompilation.emitAsset(name,source,info);
}
}
}

clearParentCompilation(): void{
this._parentCompilation=undefined;
}

getModifiedResourceFiles(): Set<string>{
returnthis.modifiedResources;
}

getResourceDependencies(filePath: string): Iterable<string>{
returnthis._fileDependencies.get(filePath)||[];
}

getAffectedResources(file: string): Iterable<string>{
returnthis._reverseDependencies.get(file)||[];
}

setAffectedResources(file: string,resources: Iterable<string>): void{
this._reverseDependencies.set(file,newSet(resources));
}

// eslint-disable-next-line max-lines-per-function
privateasync_compile(
filePath?: string,
data?: string,
fileExtension?: string,
resourceType?: 'style'|'template',
containingFile?: string,
): Promise<CompilationOutput>{
if(!this._parentCompilation){
thrownewError('WebpackResourceLoader cannot be used without parentCompilation');
}

const{ context, webpack }=this._parentCompilation.compiler;
const{
 EntryPlugin,
 NormalModule,
 library,
 node,
 sources,
util: { createHash },
}=webpack;

constgetEntry=(): string=>{
if(filePath){
return`${filePath}?${NG_COMPONENT_RESOURCE_QUERY}`;
}elseif(resourceType){
return(
// app.component.ts-2.css?ngResource!=!@ngtools/webpack/src/loaders/inline-resource.js!app.component.ts
`${containingFile}-${this.outputPathCounter}.${fileExtension}`+
`?${NG_COMPONENT_RESOURCE_QUERY}!=!${this.inlineDataLoaderPath}!${containingFile}`
);
}elseif(data){
// Create a special URL for reading the resource from memory
return`angular-resource:${resourceType},${createHash('xxhash64')
.update(data)
.digest('hex')}`;
}

thrownewError(`"filePath", "resourceType" or "data" must be specified.`);
};

constentry=getEntry();

// Simple sanity check.
if(filePath?.match(/\.[jt]s$/)){
thrownewError(
`Cannot use a JavaScript or TypeScript file (${filePath}) in a component's styleUrls or templateUrl.`,
);
}

constoutputFilePath=
filePath||
`${containingFile}-angular-inline--${this.outputPathCounter++}.${
resourceType==='template' ? 'html' : 'css'
}`;
constoutputOptions={
filename: outputFilePath,
library: {
type: 'var',
name: 'resource',
},
};

constchildCompiler=this._parentCompilation.createChildCompiler(
'angular-compiler:resource',
outputOptions,
[
newnode.NodeTemplatePlugin(),
newnode.NodeTargetPlugin(),
newEntryPlugin(context,entry,{name: 'resource'}),
newlibrary.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;
}

returntrue;
});
NormalModule.getCompilationHooks(compilation)
.readResourceForScheme.for('angular-resource')
.tap('angular-compiler',()=>data);

(compilationasCompilationWithInlineAngularResource)[InlineAngularResourceSymbol]=data;
}

compilation.hooks.additionalAssets.tap('angular-compiler',()=>{
constasset=compilation.assets[outputFilePath];
if(!asset){
return;
}

try{
constoutput=this._evaluate(outputFilePath,asset.source().toString());

if(typeofoutput==='string'){
compilation.assets[outputFilePath]=newsources.RawSource(output);
}
}catch(error){
assert(errorinstanceofError,'catch clause variable is not an Error instance');
// Use compilation errors, as otherwise webpack will choke
addError(compilation,error.message);
}
});
},
);

letfinalContent: string|undefined;
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 }ofchildCompilation.chunks){
for(constfileoffiles){
childCompilation.deleteAsset(file);
}
}
},
);
});

returnnewPromise<CompilationOutput>((resolve,reject)=>{
childCompiler.runAsChild((error,_,childCompilation)=>{
if(error){
reject(error);

return;
}elseif(!childCompilation){
reject(newError('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.
constparent=childCompiler.parentCompilation;
if(parent){
parent.children=parent.children.filter((child)=>child!==childCompilation);
letfileDependencies: Set<string>|undefined;

for(constdependencyofchildCompilation.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){
constresolvedFile=normalizePath(dependency);
constentry=this._reverseDependencies.get(resolvedFile);
if(entry){
entry.add(filePath);
}else{
this._reverseDependencies.set(resolvedFile,newSet([filePath]));
}

if(fileDependencies){
fileDependencies.add(dependency);
}else{
fileDependencies=newSet([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 }ofchildCompilation.getAssets()){
// Use the originating file as the cache key if present
// Otherwise, generate a cache key based on the generated name
constcacheKey=info.sourceFilename??`!![GENERATED]:${name}`;

this.assetCache.set(cacheKey,{ info, name, source });
}
}
}

resolve({
content: finalContent??'',
success: childCompilation.errors?.length===0,
});
});
});
}

private_evaluate(filename: string,source: string): string|null{
// Evaluate code

// css-loader requires the btoa function to exist to correctly generate inline sourcemaps
constcontext: {btoa: (input: string)=>string;resource?: string|{default?: string}}={
btoa(input){
returnBuffer.from(input).toString('base64');
},
};

try{
vm.runInNewContext(source,context,{ filename });
}catch{
// Error are propagated through the child compilation.
returnnull;
}

if(typeofcontext.resource==='string'){
returncontext.resource;
}elseif(typeofcontext.resource?.default==='string'){
returncontext.resource.default;
}

thrownewError(`The loader "${filename}" didn't return a string.`);
}

asyncget(filePath: string): Promise<string>{
constnormalizedFile=normalizePath(filePath);
letcompilationResult=this.fileCache?.get(normalizedFile);

if(compilationResult===undefined){
// cache miss so compile resource
compilationResult=awaitthis._compile(filePath);

// Only cache if compilation was successful
if(this.fileCache&&compilationResult.success){
this.fileCache.set(normalizedFile,compilationResult);
}
}

returncompilationResult.content;
}

asyncprocess(
data: string,
fileExtension: string|undefined,
resourceType: 'template'|'style',
containingFile?: string,
): Promise<string>{
if(data.trim().length===0){
return'';
}

constcompilationResult=awaitthis._compile(
undefined,
data,
fileExtension,
resourceType,
containingFile,
);

returncompilationResult.content;
}
}