refactor(ivy): remove directive references from template (#22986)

PR Close #22986

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

@@ -12,7 +12,7 @@ import {Provider} from '../../core';
 import {RendererType2} from '../../render/api';
 import {Type} from '../../type';
 import {resolveRendererType2} from '../../view/util';
-
+import {CssSelector} from './projection';
 
 
 /**
@@ -61,6 +61,9 @@ export interface DirectiveDef<T> {
   /** Function that makes a directive public to the DI system. */
   diPublic: ((def: DirectiveDef<any>) => void)|null;
 
+  /** The selector that will be used to match nodes to this directive. */
+  selector: CssSelector;
+
   /**
    * A dictionary mapping the inputs' minified property names to their public API names, which
    * are their aliases if any, or their original unminified property names
@@ -122,13 +125,6 @@ export interface DirectiveDef<T> {
  * See: {@link defineComponent}
  */
 export interface ComponentDef<T> extends DirectiveDef<T> {
-  /**
-   * The tag name which should be used by the component.
-   *
-   * NOTE: only used with component directives.
-   */
-  readonly tag: string;
-
   /**
    * The View template of the component.
    *
@@ -157,6 +153,14 @@ export interface ComponentDef<T> extends DirectiveDef<T> {
    * children only.
    */
   readonly viewProviders?: Provider[];
+
+  /**
+   * Registry of directives and components that may be found in this view.
+   *
+   * 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;
 }
 
 /**
@@ -195,6 +199,15 @@ export interface PipeDef<T> {
 export type DirectiveDefFeature = <T>(directiveDef: DirectiveDef<T>) => void;
 export type ComponentDefFeature = <T>(componentDef: ComponentDef<T>) => void;
 
+/**
+ * Type used for directiveDefs on component definition.
+ *
+ * The function is necessary to be able to support forward declarations.
+ */
+export type DirectiveDefListOrFactory = (() => DirectiveDefList) | DirectiveDefList;
+
+export type DirectiveDefList = (DirectiveDef<any>| ComponentDef<any>)[];
+
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.
 export const unusedValueExportToPlacateAjd = 1;

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

@@ -32,7 +32,19 @@ export const enum LNodeType {
  * on how to map a particular set of bits to the node's first directive index
  * (with INDX_SHIFT) or the node's directive count (with SIZE_MASK)
  */
-export const enum TNodeFlags {INDX_SHIFT = 12, SIZE_MASK = 0b00000000000000000000111111111111}
+export const enum TNodeFlags {
+  /** Whether or not this node is a component */
+  Component = 0b001,
+
+  /** How far to shift the flags to get the first directive index on this node */
+  INDX_SHIFT = 13,
+
+  /** How far to shift the flags to get the number of directives on this node */
+  SIZE_SHIFT = 1,
+
+  /** Mask to get the number of directives on this node */
+  SIZE_MASK = 0b00000000000000000001111111111110
+}
 
 /**
  * LNode is an internal data structure which is used for the incremental DOM algorithm.

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

@@ -7,7 +7,7 @@
  */
 
 import {LContainer} from './container';
-import {ComponentDef, ComponentTemplate, DirectiveDef, PipeDef} from './definition';
+import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefList, PipeDef} from './definition';
 import {LElementNode, LViewNode, TNode} from './node';
 import {LQueries} from './query';
 import {Renderer3} from './renderer';
@@ -219,19 +219,31 @@ export interface LViewOrLContainer {
  * Stored on the template function as ngPrivateData.
  */
 export interface TView {
+  /** Whether or not this template has been processed. */
+  firstTemplatePass: boolean;
+
   /** Static data equivalent of LView.data[]. Contains TNodes. */
   data: TData;
 
   /**
-   * Directive and component defs for this view
+   * Directive and component defs that have already been matched to nodes on
+   * this view.
    *
    * Defs are stored at the same index in TView.directives[] as their instances
    * are stored in LView.directives[]. This simplifies lookup in DI.
    */
-  directives: (ComponentDef<any>|DirectiveDef<any>)[]|null;
+  directives: DirectiveDefList|null;
 
-  /** Whether or not this template has been processed. */
-  firstTemplatePass: boolean;
+  /**
+   * Full registry of directives and components that may be found in this view.
+   *
+   * 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.
+   *
+   * It's necessary to keep a copy of the full def list on the TView so it's possible
+   * to render template functions without a host component.
+   */
+  directiveRegistry: DirectiveDefList|null;
 
   /**
    * Array of ngOnInit and ngDoCheck hooks that should be executed for this view in