refactor(ivy): move directives into separate array (#22918)

PR Close #22918

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

@@ -7,12 +7,13 @@
  */
 
 import {LContainer} from './container';
-import {ComponentTemplate, DirectiveDef, PipeDef} from './definition';
+import {ComponentDef, ComponentTemplate, DirectiveDef, PipeDef} from './definition';
 import {LElementNode, LViewNode, TNode} from './node';
 import {LQueries} from './query';
 import {Renderer3} from './renderer';
 
 
+
 /**
  * `LView` stores all of the information needed to process the instructions as
  * they are invoked from the template. Each embedded view and component view has its
@@ -131,7 +132,7 @@ export interface LView {
    * This array stores all element/text/container nodes created inside this view
    * and their bindings. Stored as an array rather than a linked list so we can
    * look up nodes directly in the case of forward declaration or bindings
-   * (e.g. E(1))..
+   * (e.g. E(1)).
    *
    * All bindings for a given view are stored in the order in which they
    * appear in the template, starting with `bindingStartIndex`.
@@ -140,6 +141,14 @@ export interface LView {
    */
   readonly data: any[];
 
+  /**
+   * An array of directive instances in the current view.
+   *
+   * These must be stored separately from LNodes because their presence is
+   * unknown at compile-time and thus space cannot be reserved in data[].
+   */
+  directives: any[]|null;
+
   /**
    * The static data for this view. We need a reference to this so we can easily walk up the
    * node tree in DI and get the TView.data array associated with a node (where the
@@ -210,9 +219,17 @@ export interface LViewOrLContainer {
  * Stored on the template function as ngPrivateData.
  */
 export interface TView {
-  /** Static data equivalent of LView.data[]. Contains TNodes and directive defs. */
+  /** Static data equivalent of LView.data[]. Contains TNodes. */
   data: TData;
 
+  /**
+   * Directive and component defs for 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;
+
   /** Whether or not this template has been processed. */
   firstTemplatePass: boolean;
 
@@ -278,8 +295,22 @@ export interface TView {
   destroyHooks: HookData|null;
 
   /**
-   * A list of element indices for child components that will need to be refreshed when the
-   * current view has finished its check.
+   * Array of pipe ngOnDestroy hooks that should be executed when this view is destroyed.
+   *
+   * Even indices: Index of pipe in data
+   * Odd indices: Hook function
+   *
+   * These must be stored separately from directive destroy hooks because their contexts
+   * are stored in data.
+   */
+  pipeDestroyHooks: HookData|null;
+
+  /**
+   * A list of directive and element indices for child components that will need to be
+   * refreshed when the current view has finished its check.
+   *
+   * Even indices: Directive indices
+   * Odd indices: Element indices
    */
   components: number[]|null;
 
@@ -340,11 +371,11 @@ export const enum LifecycleStage {
  * Static data that corresponds to the instance-specific data array on an LView.
  *
  * Each node's static data is stored in tData at the same index that it's stored
- * in the data array. Each directive/pipe's definition is stored here at the same index
- * as its directive/pipe instance in the data array. Any nodes that do not have static
+ * in the data array. Each pipe's definition is stored here at the same index
+ * 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 | DirectiveDef<any>| PipeDef<any>| null)[];
+export type TData = (TNode | PipeDef<any>| null)[];
 
 // Note: This hack is necessary so we don't erroneously get a circular dependency
 // failure based on types.