feat(bazel): transform generated shims (in Ivy) with tsickle (#35848)

Currently, when Angular code is built with Bazel and with Ivy, generated
factory shims (.ngfactory files) are not processed via the majority of
tsickle's transforms. This is a subtle effect of the build infrastructure,
but it boils down to a TsickleHost method `shouldSkipTsickleProcessing`.

For ngc_wrapped builds (Bazel + Angular), this method is defined in the
`@bazel/typescript` (aka bazel rules_typescript) implementation of
`CompilerHost`. The default behavior is to skip tsickle processing for files
which are not present in the original `srcs[]` of the build rule. In
Angular's case, this includes all generated shim files.

For View Engine factories this is probably desirable as they're quite
complex and they've never been tested with tsickle. Ivy factories however
are smaller and very straightforward, and it makes sense to treat them like
any other output.

This commit adjusts two independent implementations of
`shouldSkipTsickleProcessing` to enable transformation of Ivy shims:

* in `@angular/bazel` aka ngc_wrapped, the upstream `@bazel/typescript`
  `CompilerHost` is patched to treat .ngfactory files the same as their
  original source file, with respect to tsickle processing.

  It is currently not possible to test this change as we don't have any test
  that inspects tsickle output with bazel. It will be extensively tested in
  g3.

* in `ngc`, Angular's own implementation is adjusted to allow for the
  processing of shims when compiling with Ivy. This enables a unit test to
  be written to validate the correct behavior of tsickle when given a host
  that's appropriately configured to process factory shims.

For ngtsc-as-a-plugin, a similar fix will need to be submitted upstream in
tsc_wrapped.

PR Close #35848
This commit is contained in:
Alex Rickabaugh 2020-03-03 17:02:39 -08:00 committed by Matias Niemelä
parent fc4c3c3eb5
commit 9ff9a072e6
3 changed files with 39 additions and 4 deletions

View File

@ -184,7 +184,7 @@ export function compile({allDepsCompiledWithBazel = true, useManifestPathsAsModu
}
// Detect from compilerOpts whether the entrypoint is being invoked in Ivy mode.
const isInIvyMode = compilerOpts.enableIvy === 'ngtsc';
const isInIvyMode = !!compilerOpts.enableIvy;
// Disable downleveling and Closure annotation if in Ivy mode.
if (isInIvyMode) {
@ -246,9 +246,18 @@ export function compile({allDepsCompiledWithBazel = true, useManifestPathsAsModu
files, compilerOpts, bazelOpts, tsHost, fileLoader, generatedFileModuleResolver);
}
// Also need to disable decorator downleveling in the BazelHost in Ivy mode.
if (isInIvyMode) {
// Also need to disable decorator downleveling in the BazelHost in Ivy mode.
bazelHost.transformDecorators = false;
const delegate = bazelHost.shouldSkipTsickleProcessing.bind(bazelHost);
bazelHost.shouldSkipTsickleProcessing = (fileName: string) => {
// The base implementation of shouldSkipTsickleProcessing checks whether `fileName` is part of
// the original `srcs[]`. For Angular (Ivy) compilations, ngfactory/ngsummary files that are
// shims for original .ts files in the program should be treated identically. Thus, strip the
// '.ngfactory' or '.ngsummary' part of the filename away before calling the delegate.
return delegate(fileName.replace(/\.(ngfactory|ngsummary)\.ts$/, '.ts'));
};
}
// Prevent tsickle adding any types at all if we don't want closure compiler annotations.

View File

@ -103,8 +103,9 @@ function createEmitCallback(options: api.CompilerOptions): api.TsEmitCallback|un
tsickle.TsickleHost, 'shouldSkipTsickleProcessing'|'pathToModuleName'|
'shouldIgnoreWarningsForPath'|'fileNameToModuleId'|'googmodule'|'untyped'|
'convertIndexImportShorthand'|'transformDecorators'|'transformTypesToClosure'> = {
shouldSkipTsickleProcessing: (fileName) =>
/\.d\.ts$/.test(fileName) || GENERATED_FILES.test(fileName),
shouldSkipTsickleProcessing: (fileName) => /\.d\.ts$/.test(fileName) ||
// View Engine's generated files were never intended to be processed with tsickle.
(!options.enableIvy && GENERATED_FILES.test(fileName)),
pathToModuleName: (context, importPath) => '',
shouldIgnoreWarningsForPath: (filePath) => false,
fileNameToModuleId: (fileName) => fileName,

View File

@ -4594,6 +4594,31 @@ runInEachFileSystem(os => {
expect(trim(jsContents).startsWith(trim(fileoverview))).toBeTruthy();
});
it('should be produced for generated factory files', () => {
env.tsconfig({
'annotateForClosureCompiler': true,
'generateNgFactoryShims': true,
});
env.write(`test.ts`, `
import {Component} from '@angular/core';
@Component({
template: '<div class="test"></div>',
})
export class SomeComp {}
`);
env.driveMain();
const jsContents = env.getContents('test.ngfactory.js');
const fileoverview = `
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
`;
expect(trim(jsContents).startsWith(trim(fileoverview))).toBeTruthy();
});
it('should always be at the very beginning of a script (if placed above imports)', () => {
env.tsconfig({
'annotateForClosureCompiler': true,