feat(compiler): Add a TSConfig option useTemplatePipeline

The Template Pipeline is a brand new backend for the Angular compiler, replacing `TemplateDefinitionBuilder`. It generates the Ivy instructions corresponding to an input template (or host binding). The Template Pipeline has an all-new design based on an intermediate representation compiled over many phases, which will allow us to experiment with compiler changes more easily in the future. With this commit, the template pipeline can now be enabled in any project via the `useTemplatePipeline` TSConfig option. However, it is still disabled by default.
dylhunn · Jan 24, 2024 · 65b4e43 · 65b4e43
1 parent a3787bd
commit 65b4e43
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 39 deletions.
diff --git a/goldens/public-api/compiler-cli/compiler_options.md b/goldens/public-api/compiler-cli/compiler_options.md
@@ -57,6 +57,7 @@ export interface MiscOptions {
     compileNonExportedClasses?: boolean;
     disableTypeScriptVersionCheck?: boolean;
     forbidOrphanComponents?: boolean;
+    useTemplatePipeline?: boolean;
 }
 
 // @public

diff --git a/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_component_linker_1.ts b/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_component_linker_1.ts
@@ -16,7 +16,7 @@ import {GetSourceFileFn} from '../get_source_file';
 
 import {toR3DirectiveMeta} from './partial_directive_linker_1';
 import {LinkedDefinition, PartialLinker} from './partial_linker';
-import {extractForwardRef, PLACEHOLDER_VERSION} from './util';
+import {extractForwardRef, PLACEHOLDER_VERSION, SHOULD_USE_TEMPLATE_PIPELINE_FOR_LINKER} from './util';
 
 function makeDirectiveMetadata<TExpression>(
     directiveExpr: AstObject<R3DeclareDirectiveDependencyMetadata, TExpression>,
@@ -196,6 +196,7 @@ export class PartialComponentLinkerVersion1<TStatement, TExpression> implements
       relativeContextFilePath: this.sourceUrl,
       i18nUseExternalIds: false,
       declarations,
+      useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_LINKER,
     };
   }
 

diff --git a/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts b/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts
@@ -13,7 +13,7 @@ import {AstObject, AstValue} from '../../ast/ast_value';
 import {FatalLinkerError} from '../../fatal_linker_error';
 
 import {LinkedDefinition, PartialLinker} from './partial_linker';
-import {extractForwardRef, wrapReference} from './util';
+import {extractForwardRef, SHOULD_USE_TEMPLATE_PIPELINE_FOR_LINKER, wrapReference} from './util';
 
 /**
  * A `PartialLinker` that is designed to process `ɵɵngDeclareDirective()` call expressions.
@@ -145,6 +145,7 @@ function toHostMetadata<TExpression>(metaObj: AstObject<R3DeclareDirectiveMetada
       listeners: {},
       properties: {},
       specialAttributes: {},
+      useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_LINKER,
     };
   }
 
@@ -169,6 +170,7 @@ function toHostMetadata<TExpression>(metaObj: AstObject<R3DeclareDirectiveMetada
         host.getObject('properties').toLiteral(value => value.getString()) :
         {},
     specialAttributes,
+    useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_LINKER,
   };
 }
 

diff --git a/packages/compiler-cli/linker/src/file_linker/partial_linkers/util.ts b/packages/compiler-cli/linker/src/file_linker/partial_linkers/util.ts
@@ -12,6 +12,8 @@ import {FatalLinkerError} from '../../fatal_linker_error';
 
 export const PLACEHOLDER_VERSION = '0.0.0-PLACEHOLDER';
 
+export const SHOULD_USE_TEMPLATE_PIPELINE_FOR_LINKER = false;
+
 export function wrapReference<TExpression>(wrapped: o.WrappedNodeExpr<TExpression>): R3Reference {
   return {value: wrapped, type: wrapped};
 }

diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -86,8 +86,8 @@ export class ComponentDecoratorHandler implements
       private hostDirectivesResolver: HostDirectivesResolver, private includeClassMetadata: boolean,
       private readonly compilationMode: CompilationMode,
       private readonly deferredSymbolTracker: DeferredSymbolTracker,
-      private readonly forbidOrphanRendering: boolean,
-      private readonly enableBlockSyntax: boolean) {
+      private readonly forbidOrphanRendering: boolean, private readonly enableBlockSyntax: boolean,
+      private readonly useTemplatePipeline: boolean) {
     this.extractTemplateOptions = {
       enableI18nLegacyMessageIdFormat: this.enableI18nLegacyMessageIdFormat,
       i18nNormalizeLineEndingsInICUs: this.i18nNormalizeLineEndingsInICUs,
@@ -225,7 +225,7 @@ export class ComponentDecoratorHandler implements
     const directiveResult = extractDirectiveMetadata(
         node, decorator, this.reflector, this.evaluator, this.refEmitter, this.referencesRegistry,
         this.isCore, this.annotateForClosureCompiler, this.compilationMode,
-        this.elementSchemaRegistry.getDefaultComponentElementName());
+        this.elementSchemaRegistry.getDefaultComponentElementName(), this.useTemplatePipeline);
     if (directiveResult === undefined) {
       // `extractDirectiveMetadata` returns undefined when the @Directive has `jit: true`. In this
       // case, compilation of the decorator is skipped. Returning an empty object signifies
@@ -514,6 +514,7 @@ export class ComponentDecoratorHandler implements
           i18nUseExternalIds: this.i18nUseExternalIds,
           relativeContextFilePath,
           rawImports: rawImports !== null ? new WrappedNodeExpr(rawImports) : undefined,
+          useTemplatePipeline: this.useTemplatePipeline,
         },
         typeCheckMeta: extractDirectiveTypeCheckMeta(node, inputs, this.reflector),
         classMetadata: this.includeClassMetadata ?

diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts
@@ -70,41 +70,24 @@ function setup(
   const resourceLoader = new StubResourceLoader();
 
   const handler = new ComponentDecoratorHandler(
-      reflectionHost,
-      evaluator,
-      metaRegistry,
-      metaReader,
-      scopeRegistry,
-      dtsResolver,
-      scopeRegistry,
-      typeCheckScopeRegistry,
-      resourceRegistry,
+      reflectionHost, evaluator, metaRegistry, metaReader, scopeRegistry, dtsResolver,
+      scopeRegistry, typeCheckScopeRegistry, resourceRegistry,
       /* isCore */ false,
-      /* strictCtorDeps */ false,
-      resourceLoader,
+      /* strictCtorDeps */ false, resourceLoader,
       /* rootDirs */['/'],
       /* defaultPreserveWhitespaces */ false,
       /* i18nUseExternalIds */ true,
-      /* enableI18nLegacyMessageIdFormat */ false,
-      !!usePoisonedData,
-      /* i18nNormalizeLineEndingsInICUs */ false,
-      moduleResolver,
-      cycleAnalyzer,
-      CycleHandlingStrategy.UseRemoteScoping,
-      refEmitter,
-      referencesRegistry,
-      /* depTracker */ null,
-      injectableRegistry,
+      /* enableI18nLegacyMessageIdFormat */ false, !!usePoisonedData,
+      /* i18nNormalizeLineEndingsInICUs */ false, moduleResolver, cycleAnalyzer,
+      CycleHandlingStrategy.UseRemoteScoping, refEmitter, referencesRegistry,
+      /* depTracker */ null, injectableRegistry,
       /* semanticDepGraphUpdater */ null,
-      /* annotateForClosureCompiler */ false,
-      NOOP_PERF_RECORDER,
-      hostDirectivesResolver,
-      true,
+      /* annotateForClosureCompiler */ false, NOOP_PERF_RECORDER, hostDirectivesResolver, true,
       compilationMode,
       new DeferredSymbolTracker(checker, /* onlyExplicitDeferDependencyImports */ false),
       /* forbidOrphanRenderering */ false,
       /* enableBlockSyntax */ true,
-  );
+      /* useTemplatePipeline */ true);
   return {reflectionHost, handler, resourceLoader, metaRegistry};
 }
 

diff --git a/packages/compiler-cli/src/ngtsc/annotations/directive/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/directive/src/handler.ts
@@ -64,6 +64,7 @@ export class DirectiveDecoratorHandler implements
       private perf: PerfRecorder,
       private includeClassMetadata: boolean,
       private readonly compilationMode: CompilationMode,
+      private readonly useTemplatePipeline: boolean,
   ) {}
 
   readonly precedence = HandlerPrecedence.PRIMARY;
@@ -103,7 +104,8 @@ export class DirectiveDecoratorHandler implements
 
     const directiveResult = extractDirectiveMetadata(
         node, decorator, this.reflector, this.evaluator, this.refEmitter, this.referencesRegistry,
-        this.isCore, this.annotateForClosureCompiler, this.compilationMode);
+        this.isCore, this.annotateForClosureCompiler, this.compilationMode,
+        /* defaultSelector */ null, this.useTemplatePipeline);
     if (directiveResult === undefined) {
       return {};
     }

diff --git a/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts b/packages/compiler-cli/src/ngtsc/annotations/directive/src/shared.ts
@@ -36,7 +36,7 @@ export function extractDirectiveMetadata(
     clazz: ClassDeclaration, decorator: Readonly<Decorator>, reflector: ReflectionHost,
     evaluator: PartialEvaluator, refEmitter: ReferenceEmitter,
     referencesRegistry: ReferencesRegistry, isCore: boolean, annotateForClosureCompiler: boolean,
-    compilationMode: CompilationMode, defaultSelector: string|null = null): {
+    compilationMode: CompilationMode, defaultSelector: string|null, useTemplatePipeline: boolean): {
   decorator: Map<string, ts.Expression>,
   metadata: R3DirectiveMetadata,
   inputs: ClassPropertyMapping<InputMapping>,
@@ -204,7 +204,10 @@ export function extractDirectiveMetadata(
   const metadata: R3DirectiveMetadata = {
     name: clazz.name.text,
     deps: ctorDeps,
-    host,
+    host: {
+      ...host,
+      useTemplatePipeline,
+    },
     lifecycle: {
       usesOnChanges,
     },

diff --git a/packages/compiler-cli/src/ngtsc/annotations/directive/test/directive_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/directive/test/directive_spec.ts
@@ -181,7 +181,7 @@ runInEachFileSystem(() => {
         /*strictCtorDeps*/ false,
         /*semanticDepGraphUpdater*/ null,
         /*annotateForClosureCompiler*/ false, NOOP_PERF_RECORDER, /*includeClassMetadata*/ true,
-        /*compilationMode */ CompilationMode.FULL);
+        /*compilationMode */ CompilationMode.FULL, /* useTemplatePipeline */ true);
 
     const DirNode = getDeclaration(program, _('/entry.ts'), dirName, isNamedClassDeclaration);
 

diff --git a/packages/compiler-cli/src/ngtsc/core/api/src/public_options.ts b/packages/compiler-cli/src/ngtsc/core/api/src/public_options.ts
@@ -431,4 +431,9 @@ export interface MiscOptions {
    * another library without option set will not issue error if rendered in orphan way.
    */
   forbidOrphanComponents?: boolean;
+
+  /**
+   * Whether to use TemplateDefinitionBuilder as the code generator, or Template Pipeline.
+   */
+  useTemplatePipeline?: boolean;
 }
diff --git a/packages/compiler-cli/src/ngtsc/core/src/compiler.ts b/packages/compiler-cli/src/ngtsc/core/src/compiler.ts
@@ -37,6 +37,8 @@ import {getSourceFileOrNull, isDtsPath, toUnredirectedSourceFile} from '../../ut
 import {Xi18nContext} from '../../xi18n';
 import {DiagnosticCategoryLabel, NgCompilerAdapter, NgCompilerOptions} from '../api';
 
+const SHOULD_USE_TEMPLATE_PIPELINE = false;
+
 /**
  * State information about a compilation which is only generated once some data is requested from
  * the `NgCompiler` (for example, by calling `getDiagnostics`).
@@ -1131,7 +1133,8 @@ export class NgCompiler {
           this.incrementalCompilation.depGraph, injectableRegistry, semanticDepGraphUpdater,
           this.closureCompilerEnabled, this.delegatingPerfRecorder, hostDirectivesResolver,
           supportTestBed, compilationMode, deferredSymbolsTracker,
-          !!this.options.forbidOrphanComponents, this.enableBlockSyntax),
+          !!this.options.forbidOrphanComponents, this.enableBlockSyntax,
+          this.options.useTemplatePipeline ?? SHOULD_USE_TEMPLATE_PIPELINE),
 
       // TODO(alxhub): understand why the cast here is necessary (something to do with `null`
       // not being assignable to `unknown` when wrapped in `Readonly`).
@@ -1142,6 +1145,7 @@ export class NgCompiler {
           this.closureCompilerEnabled,
           this.delegatingPerfRecorder,
           supportTestBed, compilationMode,
+          this.options.useTemplatePipeline ?? SHOULD_USE_TEMPLATE_PIPELINE,
         ) as Readonly<DecoratorHandler<unknown, unknown, SemanticSymbol | null,unknown>>,
       // clang-format on
       // Pipe handler must be before injectable handler in list so pipe factories are printed

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/TEST_CASES.json
@@ -246,6 +246,22 @@
           "failureMessage": "Incorrect template"
         }
       ]
+    },
+    {
+      "description": "generates different names for deps fns inside conditionals",
+      "inputFiles": ["deps_fn_names.ts"],
+      "compilationModeFilter": ["full compile"],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "deps_fn_names_template.js",
+              "generated": "deps_fn_names.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
     }
   ]
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deps_fn_names.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deps_fn_names.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+
+import {CmpA} from './defer_deps_ext';
+
+@Component({
+  selector: 'local-dep',
+  standalone: true,
+  template: 'Local dependency',
+})
+export class LocalDep {
+}
+
+@Component({
+  selector: 'test-cmp',
+  standalone: true,
+  imports: [CmpA, LocalDep],
+  template: `
+  <ng-container>
+    @if (true) {
+        @defer {
+            <div></div>
+        }
+    } @else {
+        <div></div>
+    }
+  </ng-container>
+`,
+})
+export class TestCmp {
+  array: any;
+}
diff --git a/...mpiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deps_fn_names_template.js b/...mpiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deps_fn_names_template.js
@@ -0,0 +1,18 @@
+const TestCmp_Defer_1_DepsFn = () => [import("./defer_deps_ext").then(m => m.CmpA), LocalDep];
+
+function TestCmp_Defer_0_Template(rf, ctx) {
+	if (rf & 1) {
+		i0.ɵɵelement(0, "cmp-a")(1, "local-dep");
+	}
+}
+
+export class LocalDep {
+}
+
+…
+
+function TestCmp_Template(rf, ctx) { if (rf & 1) {
+	i0.ɵɵtemplate(0, TestCmp_Defer_0_Template, 2, 0);
+	i0.ɵɵdefer(1, 0, TestCmp_Defer_1_DepsFn);
+	i0.ɵɵdeferOnIdle();
+} }
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
@@ -30,6 +30,8 @@ import {ResourceLoader} from './resource_loader';
 import {DomElementSchemaRegistry} from './schema/dom_element_schema_registry';
 import {SelectorMatcher} from './selector';
 
+export const SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT = false;
+
 export class CompilerFacadeImpl implements CompilerFacade {
   FactoryTarget = FactoryTarget;
   ResourceLoader = ResourceLoader;
@@ -206,6 +208,7 @@ export class CompilerFacadeImpl implements CompilerFacade {
                                                     null,
       relativeContextFilePath: '',
       i18nUseExternalIds: true,
+      useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
     };
     const jitExpressionSourceMap = `ng:///${facade.name}.js`;
     return this.compileComponentFromMeta(angularCoreEnv, jitExpressionSourceMap, meta);
@@ -356,7 +359,10 @@ function convertDirectiveFacadeToMetadata(facade: R3DirectiveMetadataFacade): R3
     typeSourceSpan: facade.typeSourceSpan,
     type: wrapReference(facade.type),
     deps: null,
-    host: extractHostBindings(facade.propMetadata, facade.typeSourceSpan, facade.host),
+    host: {
+      ...extractHostBindings(facade.propMetadata, facade.typeSourceSpan, facade.host),
+      useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
+    },
     inputs: {...inputsFromMetadata, ...inputsFromType},
     outputs: {...outputsFromMetadata, ...outputsFromType},
     queries: facade.queries.map(convertToR3QueryMetadata),
@@ -403,6 +409,7 @@ function convertHostDeclarationToMetadata(host: R3DeclareDirectiveFacade['host']
       classAttr: host.classAttribute,
       styleAttr: host.styleAttribute,
     },
+    useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
   };
 }
 
@@ -489,6 +496,7 @@ function convertDeclareComponentFacadeToMetadata(
     declarationListEmitMode: DeclarationListEmitMode.ClosureResolved,
     relativeContextFilePath: '',
     i18nUseExternalIds: true,
+    useTemplatePipeline: SHOULD_USE_TEMPLATE_PIPELINE_FOR_JIT,
   };
 }
 

diff --git a/packages/compiler/src/render3/view/api.ts b/packages/compiler/src/render3/view/api.ts
@@ -347,6 +347,8 @@ export interface R3ComponentMetadata<DeclarationT extends R3TemplateDependency>
    * not be set. If component has empty array imports then this field is not set.
    */
   rawImports?: o.Expression;
+
+  useTemplatePipeline: boolean;
 }
 
 /**
@@ -519,6 +521,8 @@ export interface R3HostMetadata {
   properties: {[key: string]: string};
 
   specialAttributes: {styleAttr?: string; classAttr?: string;};
+
+  useTemplatePipeline: boolean;
 }
 
 /**

diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
@@ -216,7 +216,7 @@ export function compileComponentFromMetadata(
   const templateName = templateTypeName ? `${templateTypeName}_Template` : null;
 
   // Template compilation is currently conditional as we're in the process of rewriting it.
-  if (!USE_TEMPLATE_PIPELINE) {
+  if (!USE_TEMPLATE_PIPELINE && !meta.useTemplatePipeline) {
     // This is the main path currently used in compilation, which compiles the template with the
     // legacy `TemplateDefinitionBuilder`.
 
@@ -594,7 +594,7 @@ function createHostBindingsFunction(
   const eventBindings =
       bindingParser.createDirectiveHostEventAsts(hostBindingsMetadata.listeners, typeSourceSpan);
 
-  if (USE_TEMPLATE_PIPELINE) {
+  if (USE_TEMPLATE_PIPELINE || hostBindingsMetadata.useTemplatePipeline) {
     // The parser for host bindings treats class and style attributes specially -- they are
     // extracted into these separate fields. This is not the case for templates, so the compiler can
     // actually already handle these special attributes internally. Therefore, we just drop them