refactor(ivy): align compiler with runtime (#22921)

Remove `containerRefreshStart` and `containerRefreshEnd` instruction
from the output.

Generate directives as a list in `componentDef` rather than inline into
instructions. This is consistent in making selector resolution runtime
so that translation of templates can follow locality.

PR Close #22921

packages/core/src/core_render3_private_export.ts

@@ -14,6 +14,7 @@ export {
   detectChanges as ɵdetectChanges,
   renderComponent as ɵrenderComponent,
   ComponentType as ɵComponentType,
+  DirectiveType as ɵDirectiveType,
   directiveInject as ɵdirectiveInject,
   injectTemplateRef as ɵinjectTemplateRef,
   injectViewContainerRef as ɵinjectViewContainerRef,
@@ -73,6 +74,9 @@ export {
   st as ɵst,
   ld as ɵld,
   Pp as ɵPp,
+  ComponentDef as ɵComponentDef,
+  DirectiveDef as ɵDirectiveDef,
+  PipeDef as ɵPipeDef,
 } from './render3/index';
 export {
   bypassSanitizationTrustHtml as ɵbypassSanitizationTrustHtml,

packages/core/src/render3/assert.ts

@@ -62,5 +62,6 @@ export function assertComponentType(
 }
 
 function throwError(msg: string): never {
+  debugger;  // Left intentionally for better debugger experience.
   throw new Error(`ASSERTION ERROR: ${msg}`);
 }

packages/core/src/render3/definition.ts

@@ -16,7 +16,7 @@ import {Type} from '../type';
 import {resolveRendererType2} from '../view/util';
 
 import {diPublic} from './di';
-import {ComponentDef, ComponentDefFeature, ComponentTemplate, DirectiveDef, DirectiveDefFeature, DirectiveDefListOrFactory, PipeDef, PipeDefListOrFactory} from './interfaces/definition';
+import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFeature, DirectiveDefListOrFactory, DirectiveType, DirectiveTypesOrFactory, PipeDef, PipeType, PipeTypesOrFactory} from './interfaces/definition';
 import {CssSelectorList, SelectorFlags} from './interfaces/projection';
 
 
@@ -153,7 +153,7 @@ export function defineComponent<T>(componentDefinition: {
    * The property is either an array of `DirectiveDef`s or a function which returns the array of
    * `DirectiveDef`s. The function is necessary to be able to support forward declarations.
    */
-  directiveDefs?: DirectiveDefListOrFactory | null;
+  directives?: DirectiveTypesOrFactory | null;
 
   /**
    * Registry of pipes that may be found in this component's view.
@@ -161,9 +161,11 @@ export function defineComponent<T>(componentDefinition: {
    * The property is either an array of `PipeDefs`s or a function which returns the array of
    * `PipeDefs`s. The function is necessary to be able to support forward declarations.
    */
-  pipeDefs?: PipeDefListOrFactory | null;
+  pipes?: PipeTypesOrFactory | null;
 }): ComponentDef<T> {
   const type = componentDefinition.type;
+  const pipeTypes = componentDefinition.pipes !;
+  const directiveTypes = componentDefinition.directives !;
   const def = <ComponentDef<any>>{
     type: type,
     diPublic: null,
@@ -183,8 +185,13 @@ export function defineComponent<T>(componentDefinition: {
     afterViewChecked: type.prototype.ngAfterViewChecked || null,
     onDestroy: type.prototype.ngOnDestroy || null,
     onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
-    directiveDefs: componentDefinition.directiveDefs || null,
-    pipeDefs: componentDefinition.pipeDefs || null,
+    directiveDefs: directiveTypes ?
+        () => (typeof directiveTypes === 'function' ? directiveTypes() : directiveTypes)
+                  .map(extractDirectiveDef) :
+        null,
+    pipeDefs: pipeTypes ?
+        () => (typeof pipeTypes === 'function' ? pipeTypes() : pipeTypes).map(extractPipeDef) :
+        null,
     selectors: componentDefinition.selectors
   };
   const feature = componentDefinition.features;
@@ -192,6 +199,24 @@ export function defineComponent<T>(componentDefinition: {
   return def;
 }
 
+export function extractDirectiveDef(type: DirectiveType<any>& ComponentType<any>):
+    DirectiveDef<any>|ComponentDef<any> {
+  const def = type.ngComponentDef || type.ngDirectiveDef;
+  if (ngDevMode && !def) {
+    throw new Error(`'${type.name}' is neither 'ComponentType' or 'DirectiveType'.`);
+  }
+  return def;
+}
+
+export function extractPipeDef(type: PipeType<any>): PipeDef<any> {
+  const def = type.ngPipeDef;
+  if (ngDevMode && !def) {
+    throw new Error(`'${type.name}' is not a 'PipeType'.`);
+  }
+  return def;
+}
+
+
 
 const PRIVATE_PREFIX = '__ngOnChanges_';
 

packages/core/src/render3/index.ts

@@ -9,7 +9,7 @@
 import {LifecycleHooksFeature, createComponentRef, getHostElement, getRenderedText, renderComponent, whenRendered} from './component';
 import {NgOnChangesFeature, PublicFeature, defineComponent, defineDirective, definePipe} from './definition';
 import {InjectFlags} from './di';
-import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFlags, DirectiveType} from './interfaces/definition';
+import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFlags, DirectiveType, PipeDef} from './interfaces/definition';
 
 export {InjectFlags, QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, directiveInject, injectAttribute, injectChangeDetectorRef, injectElementRef, injectTemplateRef, injectViewContainerRef} from './di';
 export {CssSelectorList} from './interfaces/projection';
@@ -111,6 +111,7 @@ export {
   DirectiveType,
   NgOnChangesFeature,
   PublicFeature,
+  PipeDef,
   LifecycleHooksFeature,
   defineComponent,
   defineDirective,

packages/core/src/render3/instructions.ts

@@ -400,7 +400,8 @@ function resetApplicationState() {
  * @param context to pass into the template.
  * @param providedRendererFactory renderer factory to use
  * @param host The host element node to use
- * @param defs Any directive or pipe defs that should be used for matching
+ * @param directives Directive defs that should be used for matching
+ * @param pipes Pipe defs that should be used for matching
  */
 export function renderTemplate<T>(
     hostNode: RElement, template: ComponentTemplate<T>, context: T,

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

@@ -223,6 +223,12 @@ export type DirectiveDefListOrFactory = (() => DirectiveDefList) | DirectiveDefL
 
 export type DirectiveDefList = (DirectiveDef<any>| ComponentDef<any>)[];
 
+export type DirectiveTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
+
+export type DirectiveTypeList =
+    (DirectiveDef<any>| ComponentDef<any>|
+     Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
+
 /**
  * Type used for PipeDefs on component definition.
  *
@@ -232,6 +238,12 @@ export type PipeDefListOrFactory = (() => PipeDefList) | PipeDefList;
 
 export type PipeDefList = PipeDef<any>[];
 
+export type PipeTypesOrFactory = (() => DirectiveTypeList) | DirectiveTypeList;
+
+export type PipeTypeList =
+    (PipeDef<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
 // failure based on types.
 export const unusedValueExportToPlacateAjd = 1;