Skip to content

Commit b74c8d6

Browse files
clydinclydin
committed
refactor(@ngtools/webpack): initial ivy-only Webpack plugin/loader
This change introduces a new Ivy-only Webpack plugin. The plugin is based on the design introduced by `tsc_wrapped` within Bazel’s `rules_typescript` and leverages the newly added ngtsc plugin from within the `@angular/compiler-cli` package. By leveraging the same plugin interface that it used by Bazel, a common interface can be used to access the Angular compiler. This has benefits to both major build systems and dramatically reduces the necessary code infrastructure to integrate the Angular compiler. The plugin also simplifies and reduces the amount of code within the plugin by leveraging newer TypeScript features and capabilities. The need for the virtual filesystem has also been removed. The file replacements capability was the primary driver for the previous need for the virtual filesystem. File replacements are now implemented using a two-pronged approach. The first, for TypeScript, is to hook TypeScript module resolution and adjust the resolved modules based on the configured file replacements. This is similar in behavior to TypeScript path mapping. The second, for Webpack, is the use of the `NormalModuleReplacementPlugin` to facilitate bundling of the configured file replacements. An advantage to this approach is that the build system (both TypeScript and Webpack) are now aware of the replacements and can operate without augmenting multiple aspects of system as was needed previously. The plugin also introduces the use of TypeScript’s builder programs. The current primary benefit is more accurate and simplified dependency discovery. Further, they also provide for the potential future introduction of incremental build support and incremental type checking. NOTE: The deprecated string format for lazy routes is not supported by this plugin. Dynamic imports are recommended for use with Ivy and are required when using the new plugin.
1 parent 03fc4af commit b74c8d6

File tree

9 files changed

+1028
-2
lines changed

9 files changed

+1028
-2
lines changed

‎packages/ngtools/webpack/src/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,8 @@ export const NgToolsLoader = __filename;
1414

1515
// We shouldn't need to export this, but webpack-rollup-loader uses it.
1616
export type { VirtualFileSystemDecorator } from './virtual_file_system_decorator';
17+
18+
import * as ivy from './ivy';
19+
export {
20+
ivy,
21+
};

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

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import { CompilerHost } from '@angular/compiler-cli';
9+
import { createHash } from 'crypto';
10+
import * as path from 'path';
11+
import * as ts from 'typescript';
12+
import { NgccProcessor } from '../ngcc_processor';
13+
import { WebpackResourceLoader } from '../resource_loader';
14+
import { forwardSlashPath } from '../utils';
15+
16+
export function augmentHostWithResources(
17+
host: ts.CompilerHost,
18+
resourceLoader: WebpackResourceLoader,
19+
options: { directTemplateLoading?: boolean } = {},
20+
) {
21+
const resourceHost = host as CompilerHost;
22+
23+
resourceHost.readResource = function (fileName: string) {
24+
const filePath = forwardSlashPath(fileName);
25+
26+
if (
27+
options.directTemplateLoading &&
28+
(filePath.endsWith('.html') || filePath.endsWith('.svg'))
29+
) {
30+
const content = this.readFile(filePath);
31+
if (content === undefined) {
32+
throw new Error('Unable to locate component resource: ' + fileName);
33+
}
34+
35+
resourceLoader.setAffectedResources(filePath, [filePath]);
36+
37+
return content;
38+
} else {
39+
return resourceLoader.get(filePath);
40+
}
41+
};
42+
43+
resourceHost.resourceNameToFileName = function (resourceName: string, containingFile: string) {
44+
return forwardSlashPath(path.join(path.dirname(containingFile), resourceName));
45+
};
46+
47+
resourceHost.getModifiedResourceFiles = function () {
48+
return resourceLoader.getModifiedResourceFiles();
49+
};
50+
}
51+
52+
function augmentResolveModuleNames(
53+
host: ts.CompilerHost,
54+
resolvedModuleModifier: (
55+
resolvedModule: ts.ResolvedModule | undefined,
56+
moduleName: string,
57+
) => ts.ResolvedModule | undefined,
58+
): void {
59+
if (host.resolveModuleNames) {
60+
const baseResolveModuleNames = host.resolveModuleNames;
61+
host.resolveModuleNames = function (moduleNames: string[], ...parameters) {
62+
return moduleNames.map((name) => {
63+
const result = baseResolveModuleNames.call(host, [name], ...parameters);
64+
65+
return resolvedModuleModifier(result[0], name);
66+
});
67+
};
68+
} else {
69+
host.resolveModuleNames = function (
70+
moduleNames: string[],
71+
containingFile: string,
72+
_reusedNames: string[] | undefined,
73+
redirectedReference: ts.ResolvedProjectReference | undefined,
74+
options: ts.CompilerOptions,
75+
) {
76+
return moduleNames.map((name) => {
77+
const result = ts.resolveModuleName(
78+
name,
79+
containingFile,
80+
options,
81+
host,
82+
undefined,
83+
redirectedReference,
84+
).resolvedModule;
85+
86+
return resolvedModuleModifier(result, name);
87+
});
88+
};
89+
}
90+
}
91+
92+
export function augmentHostWithNgcc(host: ts.CompilerHost, ngcc: NgccProcessor): void {
93+
augmentResolveModuleNames(host, (resolvedModule, moduleName) => {
94+
if (resolvedModule && ngcc) {
95+
ngcc.processModule(moduleName, resolvedModule);
96+
}
97+
98+
return resolvedModule;
99+
});
100+
101+
if (host.resolveTypeReferenceDirectives) {
102+
const baseResolveTypeReferenceDirectives = host.resolveTypeReferenceDirectives;
103+
host.resolveTypeReferenceDirectives = function (names: string[], ...parameters) {
104+
return names.map((name) => {
105+
const result = baseResolveTypeReferenceDirectives.call(host, [name], ...parameters);
106+
107+
if (result[0] && ngcc) {
108+
ngcc.processModule(name, result[0]);
109+
}
110+
111+
return result[0];
112+
});
113+
};
114+
} else {
115+
host.resolveTypeReferenceDirectives = function (
116+
moduleNames: string[],
117+
containingFile: string,
118+
redirectedReference: ts.ResolvedProjectReference | undefined,
119+
options: ts.CompilerOptions,
120+
) {
121+
return moduleNames.map((name) => {
122+
const result = ts.resolveTypeReferenceDirective(
123+
name,
124+
containingFile,
125+
options,
126+
host,
127+
redirectedReference,
128+
).resolvedTypeReferenceDirective;
129+
130+
if (result && ngcc) {
131+
ngcc.processModule(name, result);
132+
}
133+
134+
return result;
135+
});
136+
};
137+
}
138+
}
139+
140+
export function augmentHostWithReplacements(
141+
host: ts.CompilerHost,
142+
replacements: Record<string, string>,
143+
): void {
144+
if (Object.keys(replacements).length === 0) {
145+
return;
146+
}
147+
148+
const tryReplace = (resolvedModule: ts.ResolvedModule | undefined) => {
149+
const replacement = resolvedModule && replacements[resolvedModule.resolvedFileName];
150+
if (replacement) {
151+
return {
152+
resolvedFileName: replacement,
153+
isExternalLibraryImport: /[\/\\]node_modules[\/\\]/.test(replacement),
154+
};
155+
} else {
156+
return resolvedModule;
157+
}
158+
};
159+
160+
augmentResolveModuleNames(host, tryReplace);
161+
}
162+
163+
export function augmentHostWithSubstitutions(
164+
host: ts.CompilerHost,
165+
substitutions: Record<string, string>,
166+
): void {
167+
const regexSubstitutions: [RegExp, string][] = [];
168+
for (const [key, value] of Object.entries(substitutions)) {
169+
regexSubstitutions.push([new RegExp(`\\b${key}\\b`, 'g'), value]);
170+
}
171+
172+
if (regexSubstitutions.length === 0) {
173+
return;
174+
}
175+
176+
const baseReadFile = host.readFile;
177+
host.readFile = function (...parameters) {
178+
let file: string | undefined = baseReadFile.call(host, ...parameters);
179+
if (file) {
180+
for (const entry of regexSubstitutions) {
181+
file = file.replace(entry[0], entry[1]);
182+
}
183+
}
184+
185+
return file;
186+
};
187+
}
188+
189+
export function augmentHostWithVersioning(host: ts.CompilerHost): void {
190+
const baseGetSourceFile = host.getSourceFile;
191+
host.getSourceFile = function (...parameters) {
192+
const file = baseGetSourceFile.call(host, ...parameters);
193+
if (file && file.version === undefined) {
194+
file.version = createHash('sha256').update(file.text).digest('hex');
195+
}
196+
197+
return file;
198+
};
199+
}
200+
201+
export function augmentHostWithCaching(
202+
host: ts.CompilerHost,
203+
cache: Map<string, ts.SourceFile>,
204+
): void {
205+
const baseGetSourceFile = host.getSourceFile;
206+
host.getSourceFile = function (
207+
fileName,
208+
languageVersion,
209+
onError,
210+
shouldCreateNewSourceFile,
211+
// tslint:disable-next-line: trailing-comma
212+
...parameters
213+
) {
214+
const normalizedFileName = forwardSlashPath(fileName);
215+
if (!shouldCreateNewSourceFile && cache.has(normalizedFileName)) {
216+
return cache.get(normalizedFileName);
217+
}
218+
219+
const file = baseGetSourceFile.call(
220+
host,
221+
fileName,
222+
languageVersion,
223+
onError,
224+
true,
225+
...parameters,
226+
);
227+
if (file && file.version === undefined) {
228+
file.version = createHash('sha256').update(file.text).digest('hex');
229+
}
230+
cache.set(normalizedFileName, file);
231+
232+
return file;
233+
};
234+
}

‎packages/ngtools/webpack/src/ivy/index.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
export { angularWebpackLoader as default } from './loader';
9+
export { AngularPluginOptions, AngularWebpackPlugin } from './plugin';
10+
11+
export const AngularWebpackLoaderPath = __filename;

‎packages/ngtools/webpack/src/ivy/loader.ts

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import { formatDiagnostics } from '@angular/compiler-cli';
9+
import * as path from 'path';
10+
import * as ts from 'typescript';
11+
import { AngularPluginSymbol, FileEmitter } from './symbol';
12+
13+
export function angularWebpackLoader(
14+
this: import('webpack').loader.LoaderContext,
15+
content: string,
16+
// Source map types are broken in the webpack type definitions
17+
// tslint:disable-next-line: no-any
18+
map: any,
19+
) {
20+
if (this.loaderIndex !== this.loaders.length - 1) {
21+
this.emitWarning('The Angular Webpack loader does not support chaining prior to the loader.');
22+
}
23+
24+
const callback = this.async();
25+
if (!callback) {
26+
throw new Error('Invalid webpack version');
27+
}
28+
29+
const emitFile = this._compilation[AngularPluginSymbol] as FileEmitter;
30+
if (typeof emitFile !== 'function') {
31+
if (this.resourcePath.endsWith('.js')) {
32+
// Passthrough for JS files when no plugin is used
33+
this.callback(undefined, content, map);
34+
35+
return;
36+
}
37+
38+
callback(new Error('The Angular Webpack loader requires the AngularWebpackPlugin'));
39+
40+
return;
41+
}
42+
43+
emitFile(this.resourcePath)
44+
.then((result) => {
45+
if (!result) {
46+
if (this.resourcePath.endsWith('.js')) {
47+
// Return original content for JS files if not compiled by TypeScript ("allowJs")
48+
this.callback(undefined, content, map);
49+
} else {
50+
// File is not part of the compilation
51+
const message =
52+
`${this.resourcePath} is missing from the TypeScript compilation. ` +
53+
`Please make sure it is in your tsconfig via the 'files' or 'include' property.`;
54+
callback(new Error(message));
55+
}
56+
57+
return;
58+
}
59+
60+
for (const diagnostic of result.diagnostics) {
61+
const text = formatDiagnostics([diagnostic]);
62+
if (diagnostic.category === ts.DiagnosticCategory.Error) {
63+
this.emitError(new Error(text));
64+
} else {
65+
this.emitWarning(text);
66+
}
67+
}
68+
69+
result.dependencies.forEach((dependency) => this.addDependency(dependency));
70+
71+
let resultContent = result.content || '';
72+
let resultMap;
73+
if (result.map) {
74+
resultContent = resultContent.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '');
75+
resultMap = JSON.parse(result.map);
76+
resultMap.sources = resultMap.sources.map((source: string) =>
77+
path.join(path.dirname(this.resourcePath), source),
78+
);
79+
}
80+
81+
callback(undefined, resultContent, resultMap);
82+
})
83+
.catch((err) => {
84+
callback(err);
85+
});
86+
}
87+
88+
export { angularWebpackLoader as default };

0 commit comments

Comments
 (0)