feat(ivy): support pipe compilation from local metadata (#24703)

This updates the r3_pipe_compiler to not depend on global analysis,
and to produce ngPipeDef instructions in the same way that the other
compilers do. It's a precursor to JIT and AOT implementations of
@Pipe compilation.

PR Close #24703

packages/compiler/src/aot/compiler.ts

@@ -23,7 +23,7 @@ import {OutputEmitter} from '../output/abstract_emitter';
 import * as o from '../output/output_ast';
 import {ParseError} from '../parse_util';
 import {compileNgModuleFromRender2 as compileR3Module} from '../render3/r3_module_compiler';
-import {compilePipe as compileR3Pipe} from '../render3/r3_pipe_compiler';
+import {compilePipeFromRender2 as compileR3Pipe} from '../render3/r3_pipe_compiler';
 import {htmlAstToRender3Ast} from '../render3/r3_template_transform';
 import {compileComponentFromRender2 as compileR3Component, compileDirectiveFromRender2 as compileR3Directive} from '../render3/view/compiler';
 import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';

packages/compiler/src/compiler.ts

@@ -84,6 +84,7 @@ export * from './render3/view/api';
 export {jitExpression} from './render3/r3_jit';
 export {R3DependencyMetadata, R3FactoryMetadata, R3ResolvedDependencyType} from './render3/r3_factory';
 export {compileInjector, compileNgModule, R3InjectorMetadata, R3NgModuleMetadata} from './render3/r3_module_compiler';
+export {compilePipeFromMetadata, R3PipeMetadata} from './render3/r3_pipe_compiler';
 export {makeBindingParser, parseTemplate} from './render3/view/template';
 export {compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings} from './render3/view/compiler';
 // This file only reexports content of the `src` folder. Keep it that way.

packages/compiler/src/render3/r3_identifiers.ts

@@ -131,6 +131,8 @@ export class Identifiers {
 
   static defineNgModule: o.ExternalReference = {name: 'ɵdefineNgModule', moduleName: CORE};
 
+  static PipeDef: o.ExternalReference = {name: 'ɵPipeDef', moduleName: CORE};
+
   static definePipe: o.ExternalReference = {name: 'ɵdefinePipe', moduleName: CORE};
 
   static query: o.ExternalReference = {name: 'ɵQ', moduleName: CORE};

packages/compiler/src/render3/r3_pipe_compiler.ts

@@ -12,54 +12,83 @@ import {DefinitionKind} from '../constant_pool';
 import * as o from '../output/output_ast';
 import {OutputContext, error} from '../util';
 
-import {compileFactoryFunction, dependenciesFromGlobalMetadata} from './r3_factory';
+import {R3DependencyMetadata, compileFactoryFunction, dependenciesFromGlobalMetadata} from './r3_factory';
 import {Identifiers as R3} from './r3_identifiers';
 
+export interface R3PipeMetadata {
+  name: string;
+  type: o.Expression;
+  pipeName: string;
+  deps: R3DependencyMetadata[];
+  pure: boolean;
+}
 
-/**
- * Write a pipe definition to the output context.
- */
-export function compilePipe(
-    outputCtx: OutputContext, pipe: CompilePipeMetadata, reflector: CompileReflector) {
+export interface R3PipeDef {
+  expression: o.Expression;
+  type: o.Type;
+}
+
+export function compilePipeFromMetadata(metadata: R3PipeMetadata) {
   const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
 
   // e.g. `name: 'myPipe'`
-  definitionMapValues.push({key: 'name', value: o.literal(pipe.name), quoted: false});
+  definitionMapValues.push({key: 'name', value: o.literal(metadata.pipeName), quoted: false});
 
   // e.g. `type: MyPipe`
-  definitionMapValues.push(
-      {key: 'type', value: outputCtx.importExpr(pipe.type.reference), quoted: false});
+  definitionMapValues.push({key: 'type', value: metadata.type, quoted: false});
 
-  // e.g. `factory: function MyPipe_Factory() { return new MyPipe(); }`
-  const deps = dependenciesFromGlobalMetadata(pipe.type, outputCtx, reflector);
   const templateFactory = compileFactoryFunction({
-    name: identifierName(pipe.type) !,
-    fnOrClass: outputCtx.importExpr(pipe.type.reference), deps,
+    name: metadata.name,
+    fnOrClass: metadata.type,
+    deps: metadata.deps,
     useNew: true,
     injectFn: R3.directiveInject,
   });
   definitionMapValues.push({key: 'factory', value: templateFactory, quoted: false});
 
   // e.g. `pure: true`
-  if (pipe.pure) {
-    definitionMapValues.push({key: 'pure', value: o.literal(true), quoted: false});
+  definitionMapValues.push({key: 'pure', value: o.literal(metadata.pure), quoted: false});
+
+  const expression = o.importExpr(R3.definePipe).callFn([o.literalMap(definitionMapValues)]);
+  const type = new o.ExpressionType(o.importExpr(R3.PipeDef, [
+    new o.ExpressionType(metadata.type),
+    new o.ExpressionType(new o.LiteralExpr(metadata.pipeName)),
+  ]));
+  return {expression, type};
+}
+
+/**
+ * Write a pipe definition to the output context.
+ */
+export function compilePipeFromRender2(
+    outputCtx: OutputContext, pipe: CompilePipeMetadata, reflector: CompileReflector) {
+  const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
+
+  const name = identifierName(pipe.type);
+  if (!name) {
+    return error(`Cannot resolve the name of ${pipe.type}`);
   }
 
-  const className = identifierName(pipe.type) !;
-  className || error(`Cannot resolve the name of ${pipe.type}`);
+  const metadata: R3PipeMetadata = {
+    name,
+    pipeName: pipe.name,
+    type: outputCtx.importExpr(pipe.type.reference),
+    deps: dependenciesFromGlobalMetadata(pipe.type, outputCtx, reflector),
+    pure: pipe.pure,
+  };
+
+  const res = compilePipeFromMetadata(metadata);
 
   const definitionField = outputCtx.constantPool.propertyNameOf(DefinitionKind.Pipe);
-  const definitionFunction =
-      o.importExpr(R3.definePipe).callFn([o.literalMap(definitionMapValues)]);
 
   outputCtx.statements.push(new o.ClassStmt(
-      /* name */ className,
+      /* name */ name,
       /* parent */ null,
       /* fields */[new o.ClassField(
           /* name */ definitionField,
           /* type */ o.INFERRED_TYPE,
           /* modifiers */[o.StmtModifier.Static],
-          /* initializer */ definitionFunction)],
+          /* initializer */ res.expression)],
       /* getters */[],
       /* constructorMethod */ new o.ClassMethod(null, [], []),
       /* methods */[]));

packages/compiler/test/render3/mock_compile.ts

@@ -15,7 +15,7 @@ import {ConstantPool} from '../../src/constant_pool';
 import * as html from '../../src/ml_parser/ast';
 import {removeWhitespaces} from '../../src/ml_parser/html_whitespaces';
 import * as o from '../../src/output/output_ast';
-import {compilePipe} from '../../src/render3/r3_pipe_compiler';
+import {compilePipeFromRender2} from '../../src/render3/r3_pipe_compiler';
 import {htmlAstToRender3Ast} from '../../src/render3/r3_template_transform';
 import {compileComponentFromRender2, compileDirectiveFromRender2} from '../../src/render3/view/compiler';
 import {BindingParser} from '../../src/template_parser/binding_parser';
@@ -320,7 +320,7 @@ export function compile(
           } else if (resolver.isPipe(pipeOrDirective)) {
             const metadata = resolver.getPipeMetadata(pipeOrDirective);
             if (metadata) {
-              compilePipe(outputCtx, metadata, reflector);
+              compilePipeFromRender2(outputCtx, metadata, reflector);
             }
           }
         }

packages/compiler/test/render3/r3_compiler_compliance_spec.ts

@@ -1072,7 +1072,7 @@ describe('compiler compliance', () => {
       it('should render pipes', () => {
         const MyPipeDefinition = `
             static ngPipeDef = $r3$.ɵdefinePipe(
-                {name: 'myPipe', type: MyPipe, factory: function MyPipe_Factory() { return new MyPipe(); }});
+                {name: 'myPipe', type: MyPipe, factory: function MyPipe_Factory() { return new MyPipe(); }, pure: false});
         `;
 
         const MyPurePipeDefinition = `

packages/core/src/render3/definition.ts

@@ -16,7 +16,7 @@ import {Type} from '../type';
 import {resolveRendererType2} from '../view/util';
 
 import {diPublic} from './di';
-import {ComponentDefFeature, ComponentDefInternal, ComponentQuery, ComponentTemplate, ComponentType, DirectiveDefFeature, DirectiveDefInternal, DirectiveDefListOrFactory, DirectiveType, DirectiveTypesOrFactory, PipeDef, PipeType, PipeTypesOrFactory} from './interfaces/definition';
+import {ComponentDefFeature, ComponentDefInternal, ComponentQuery, ComponentTemplate, ComponentType, DirectiveDefFeature, DirectiveDefInternal, DirectiveDefListOrFactory, DirectiveType, DirectiveTypesOrFactory, PipeDefInternal, PipeType, PipeTypesOrFactory} from './interfaces/definition';
 import {CssSelectorList, SelectorFlags} from './interfaces/projection';
 
 
@@ -255,7 +255,7 @@ export function extractDirectiveDef(type: DirectiveType<any>& ComponentType<any>
   return def;
 }
 
-export function extractPipeDef(type: PipeType<any>): PipeDef<any> {
+export function extractPipeDef(type: PipeType<any>): PipeDefInternal<any> {
   const def = type.ngPipeDef;
   if (ngDevMode && !def) {
     throw new Error(`'${type.name}' is not a 'PipeType'.`);
@@ -483,7 +483,7 @@ export function definePipe<T>(pipeDef: {
   /** Whether the pipe is pure. */
   pure?: boolean
 }): never {
-  return (<PipeDef<T>>{
+  return (<PipeDefInternal<T>>{
     name: pipeDef.name,
     factory: pipeDef.factory,
     pure: pipeDef.pure !== false,

packages/core/src/render3/interfaces/definition.ts

@@ -226,13 +226,13 @@ export interface ComponentDef<T, Selector extends string> extends DirectiveDef<T
  *
  * See: {@link definePipe}
  */
-export interface PipeDef<T> {
+export interface PipeDef<T, S extends string> {
   /**
    * Pipe name.
    *
    * Used to resolve pipe in templates.
    */
-  name: string;
+  name: S;
 
   /**
    * Factory function used to create a new pipe instance.
@@ -251,6 +251,8 @@ export interface PipeDef<T> {
   onDestroy: (() => void)|null;
 }
 
+export type PipeDefInternal<T> = PipeDef<T, string>;
+
 export type DirectiveDefFeature = <T>(directiveDef: DirectiveDef<T, string>) => void;
 export type ComponentDefFeature = <T>(componentDef: ComponentDef<T, string>) => void;
 
@@ -276,12 +278,13 @@ export type DirectiveTypeList =
  */
 export type PipeDefListOrFactory = (() => PipeDefList) | PipeDefList;
 
-export type PipeDefList = PipeDef<any>[];
+export type PipeDefList = PipeDefInternal<any>[];
 
 export type PipeTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
 
 export type PipeTypeList =
-    (PipeDef<any>| Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
+    (PipeDefInternal<any>|
+     Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
 
 
 // Note: This hack is necessary so we don't erroneously get a circular dependency

packages/core/src/render3/interfaces/view.ts

@@ -10,7 +10,7 @@ import {Injector} from '../../di/injector';
 import {Sanitizer} from '../../sanitization/security';
 
 import {LContainer} from './container';
-import {ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefList, PipeDef, PipeDefList} from './definition';
+import {ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefList, PipeDefInternal, PipeDefList} from './definition';
 import {LContainerNode, LElementNode, LViewNode, TNode} from './node';
 import {LQueries} from './query';
 import {Renderer3} from './renderer';
@@ -456,7 +456,7 @@ export type HookData = (number | (() => void))[];
  * as its pipe instance in the data array. Any nodes that do not have static
  * data store a null value in tData to avoid a sparse array.
  */
-export type TData = (TNode | PipeDef<any>| null)[];
+export type TData = (TNode | PipeDefInternal<any>| null)[];
 
 /** Type for TView.currentMatches */
 export type CurrentMatchesList = [DirectiveDefInternal<any>, (string | number | null)];

packages/core/src/render3/pipe.ts

@@ -9,7 +9,7 @@
 import {PipeTransform} from '../change_detection/pipe_transform';
 
 import {getTView, load, store} from './instructions';
-import {PipeDef, PipeDefList} from './interfaces/definition';
+import {PipeDefInternal, PipeDefList} from './interfaces/definition';
 import {HEADER_OFFSET} from './interfaces/view';
 import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunctionV} from './pure_function';
 
@@ -22,7 +22,7 @@ import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunction
  */
 export function pipe(index: number, pipeName: string): any {
   const tView = getTView();
-  let pipeDef: PipeDef<any>;
+  let pipeDef: PipeDefInternal<any>;
   const adjustedIndex = index + HEADER_OFFSET;
 
   if (tView.firstTemplatePass) {
@@ -33,7 +33,7 @@ export function pipe(index: number, pipeName: string): any {
        ])).push(adjustedIndex, pipeDef.onDestroy);
     }
   } else {
-    pipeDef = tView.data[adjustedIndex] as PipeDef<any>;
+    pipeDef = tView.data[adjustedIndex] as PipeDefInternal<any>;
   }
 
   const pipeInstance = pipeDef.factory();
@@ -49,7 +49,7 @@ export function pipe(index: number, pipeName: string): any {
  * @param registry Full list of available pipes
  * @returns Matching PipeDef
  */
-function getPipeDef(name: string, registry: PipeDefList | null): PipeDef<any> {
+function getPipeDef(name: string, registry: PipeDefList | null): PipeDefInternal<any> {
   if (registry) {
     for (let i = 0; i < registry.length; i++) {
       const pipeDef = registry[i];
@@ -151,5 +151,5 @@ export function pipeBindV(index: number, slotOffset: number, values: any[]): any
 }
 
 function isPure(index: number): boolean {
-  return (<PipeDef<any>>getTView().data[index + HEADER_OFFSET]).pure;
+  return (<PipeDefInternal<any>>getTView().data[index + HEADER_OFFSET]).pure;
 }

packages/core/test/render3/render_util.ts

@@ -13,7 +13,7 @@ import {CreateComponentOptions} from '../../src/render3/component';
 import {extractDirectiveDef, extractPipeDef} from '../../src/render3/definition';
 import {ComponentTemplate, ComponentType, DirectiveDefInternal, DirectiveType, PublicFeature, RenderFlags, defineComponent, defineDirective, renderComponent as _renderComponent, tick} from '../../src/render3/index';
 import {NG_HOST_SYMBOL, renderTemplate} from '../../src/render3/instructions';
-import {DirectiveDefList, DirectiveDefListOrFactory, DirectiveTypesOrFactory, PipeDef, PipeDefList, PipeDefListOrFactory, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
+import {DirectiveDefList, DirectiveDefListOrFactory, DirectiveTypesOrFactory, PipeDefInternal, PipeDefList, PipeDefListOrFactory, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
 import {LElementNode} from '../../src/render3/interfaces/node';
 import {RElement, RText, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
 import {Sanitizer} from '../../src/sanitization/security';
@@ -183,10 +183,10 @@ function toDefs(
     mapFn: (type: Type<any>) => DirectiveDefInternal<any>): DirectiveDefList|null;
 function toDefs(
     types: PipeTypesOrFactory | undefined | null,
-    mapFn: (type: Type<any>) => PipeDef<any>): PipeDefList|null;
+    mapFn: (type: Type<any>) => PipeDefInternal<any>): PipeDefList|null;
 function toDefs(
     types: PipeTypesOrFactory | DirectiveTypesOrFactory | undefined | null,
-    mapFn: (type: Type<any>) => PipeDef<any>| DirectiveDefInternal<any>): any {
+    mapFn: (type: Type<any>) => PipeDefInternal<any>| DirectiveDefInternal<any>): any {
   if (!types) return null;
   if (typeof types == 'function') {
     types = types();