refactor(ivy): simplify differentiation of LView, RNode, LView, LContainer, StylingContext (angular#28947)

For efficiency reasons we often put several different data types (`RNode`, `LView`, `LContainer`,
`StylingContext`) in same location in `LView`. This is because we don't want to pre-allocate
space
for it because the storage is sparse. This file contains utilities for dealing with such data
types.
How do we know what is stored at a given location in `LView`.
- `Array.isArray(value) === false` => `RNode` (The normal storage value)
- `Array.isArray(value) === true` => than the `value[0]` represents the wrapped value.
  - `typeof value[TYPE] === 'object'` => `LView`
     - This happens when we have a component at a given location
  - `typeof value[TYPE] === 'number'` => `StylingContext`
     - This happens when we have style/class binding at a given location.
  - `typeof value[TYPE] === true` => `LContainer`
     - This happens when we have `LContainer` binding at a given location.
NOTE: it is assumed that `Array.isArray` and `typeof` operations are very efficient.

PR Close angular#28947

Author: mhevery

packages/core/src/render3/context_discovery.ts

@@ -12,9 +12,9 @@ import {assertDomNode} from '../util/assert';
 import {EMPTY_ARRAY} from './empty';
 import {LContext, MONKEY_PATCH_KEY_NAME} from './interfaces/context';
 import {TNode, TNodeFlags} from './interfaces/node';
-import {RElement} from './interfaces/renderer';
+import {RElement, RNode} from './interfaces/renderer';
 import {CONTEXT, HEADER_OFFSET, HOST, LView, TVIEW} from './interfaces/view';
-import {getComponentViewByIndex, getNativeByTNode, readElementValue, readPatchedData} from './util/view_utils';
+import {getComponentViewByIndex, getNativeByTNode, readPatchedData, unwrapRNode} from './util/view_utils';
 
 
 
@@ -71,7 +71,7 @@ export function getLContext(target: any): LContext|null {
       // are expensive. Instead, only the target data (the element, component, container, ICU
       // expression or directive details) are filled into the context. If called multiple times
       // with different target values then the missing target data will be filled in.
-      const native = readElementValue(lView[nodeIndex]);
+      const native = unwrapRNode(lView[nodeIndex]);
       const existingCtx = readPatchedData(native);
       const context: LContext = (existingCtx && !Array.isArray(existingCtx)) ?
           existingCtx :
@@ -119,7 +119,7 @@ export function getLContext(target: any): LContext|null {
 
         const index = findViaNativeElement(lView, rElement);
         if (index >= 0) {
-          const native = readElementValue(lView[index]);
+          const native = unwrapRNode(lView[index]);
           const context = createLContext(lView, index, native);
           attachPatchData(native, context);
           mpValue = context;
@@ -134,7 +134,7 @@ export function getLContext(target: any): LContext|null {
 /**
  * Creates an empty instance of a `LContext` context
  */
-function createLContext(lView: LView, nodeIndex: number, native: RElement): LContext {
+function createLContext(lView: LView, nodeIndex: number, native: RNode): LContext {
   return {
     lView,
     nodeIndex,

packages/core/src/render3/debug.ts

@@ -14,7 +14,7 @@ import {LQueries} from './interfaces/query';
 import {RComment, RElement} from './interfaces/renderer';
 import {StylingContext} from './interfaces/styling';
 import {BINDING_INDEX, CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTENT_QUERIES, CONTEXT, DECLARATION_VIEW, FLAGS, HEADER_OFFSET, HOST, INJECTOR, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, SANITIZER, TVIEW, TView, T_HOST} from './interfaces/view';
-import {readElementValue} from './util/view_utils';
+import {unwrapRNode} from './util/view_utils';
 
 /*
  * This file contains conditionally attached classes which provide human readable (debug) level
@@ -77,7 +77,7 @@ export function toDebug(obj: any): any {
  * (will not serialize child elements).
  */
 function toHtml(value: any, includeChildren: boolean = false): string|null {
-  const node: HTMLElement|null = readElementValue(value) as any;
+  const node: HTMLElement|null = unwrapRNode(value) as any;
   if (node) {
     const isTextNode = node.nodeType === Node.TEXT_NODE;
     const outerHTML = (isTextNode ? node.textContent : node.outerHTML) || '';
@@ -182,7 +182,7 @@ export function toDebugNodes(tNode: TNode | null, lView: LView): DebugNode[]|nul
     let tNodeCursor: TNode|null = tNode;
     while (tNodeCursor) {
       const rawValue = lView[tNode.index];
-      const native = readElementValue(rawValue);
+      const native = unwrapRNode(rawValue);
       const componentLViewDebug = toDebug(readLViewValue(rawValue));
       debugNodes.push({
         html: toHtml(native),

packages/core/src/render3/instructions.ts

@@ -47,7 +47,7 @@ import {ANIMATION_PROP_PREFIX, allocateDirectiveIntoContext, createEmptyStylingC
 import {NO_CHANGE} from './tokens';
 import {INTERPOLATION_DELIMITER, renderStringify} from './util/misc_utils';
 import {findComponentView, getLViewParent, getRootContext, getRootView} from './util/view_traversal_utils';
-import {getComponentViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isComponent, isComponentDef, isContentQueryHost, isRootView, loadInternal, readElementValue, readPatchedLView} from './util/view_utils';
+import {getComponentViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isComponent, isComponentDef, isContentQueryHost, isRootView, loadInternal, readPatchedLView, unwrapRNode} from './util/view_utils';
 
 
 
@@ -139,7 +139,7 @@ export function setHostBindings(tView: TView, viewData: LView): void {
         if (instruction !== null) {
           viewData[BINDING_INDEX] = bindingRootIndex;
           instruction(
-              RenderFlags.Update, readElementValue(viewData[currentDirectiveIndex]),
+              RenderFlags.Update, unwrapRNode(viewData[currentDirectiveIndex]),
               currentElementIndex);
         }
         currentDirectiveIndex++;
@@ -1018,7 +1018,7 @@ function listenerInternal(
     }
 
     const idxOrTargetGetter = eventTargetResolver ?
-        (_lView: LView) => eventTargetResolver(readElementValue(_lView[tNode.index])).target :
+        (_lView: LView) => eventTargetResolver(unwrapRNode(_lView[tNode.index])).target :
         tNode.index;
     tCleanup && tCleanup.push(eventName, idxOrTargetGetter, lCleanupIndex, useCaptureOrSubIdx);
   }
@@ -1147,7 +1147,7 @@ export function elementAttribute(
     ngDevMode && validateAgainstEventAttributes(name);
     const lView = getLView();
     const renderer = lView[RENDERER];
-    const element = getNativeByIndex(index, lView);
+    const element = getNativeByIndex(index, lView) as RElement;
     if (value == null) {
       ngDevMode && ngDevMode.rendererRemoveAttribute++;
       isProceduralRenderer(renderer) ? renderer.removeAttribute(element, name, namespace) :
@@ -2216,12 +2216,13 @@ export function createLContainer(
   ngDevMode && assertDomNode(native);
   ngDevMode && assertLView(currentView);
   const lContainer: LContainer = [
-    hostNative,                      // host native
+    hostNative,  // host native
+    true,        // Boolean `true` in this position signifies that this is an `LContainer`
     isForViewContainerRef ? -1 : 0,  // active index
-    [],                              // views
     currentView,                     // parent
     null,                            // next
     null,                            // queries
+    [],                              // views
     native,                          // native
   ];
   ngDevMode && attachLContainerDebug(lContainer);

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

@@ -11,25 +11,22 @@ import {RComment, RElement} from './renderer';
 import {StylingContext} from './styling';
 import {HOST, LView, NEXT, PARENT, QUERIES} from './view';
 
-
+/**
+ * Special location which allows easy identification of type. If we have an array which was
+ * retrieved from the `LView` and that array has `true` at `TYPE` location, we know it is
+ * `LContainer`.
+ */
+export const TYPE = 1;
 /**
  * Below are constants for LContainer indices to help us look up LContainer members
  * without having to remember the specific indices.
  * Uglify will inline these when minifying so there shouldn't be a cost.
  */
-export const ACTIVE_INDEX = 1;
-export const VIEWS = 2;
-// PARENT, NEXT, QUERIES, and HOST are indices 2, 3, 4, and 5.
+export const ACTIVE_INDEX = 2;
+// PARENT, NEXT, and QUERIES are indices 3, 4, and 5.
 // As we already have these constants in LView, we don't need to re-create them.
-export const NATIVE = 6;
-// Because interfaces in TS/JS cannot be instanceof-checked this means that we
-// need to rely on predictable characteristics of data-structures to check if they
-// are what we expect for them to be. The `LContainer` interface code below has a
-// fixed length and the constant value below references that. Using the length value
-// below we can predictably gaurantee that we are dealing with an `LContainer` array.
-// This value MUST be kept up to date with the length of the `LContainer` array
-// interface below so that runtime type checking can work.
-export const LCONTAINER_LENGTH = 7;
+export const VIEWS = 6;
+export const NATIVE = 7;
 
 /**
  * The state associated with a container.
@@ -51,6 +48,12 @@ export interface LContainer extends Array<any> {
    */
   readonly[HOST]: RElement|RComment|StylingContext|LView;
 
+  /**
+   * This is a type field which allows us to differentiate `LContainer` from `StylingContext` in an
+   * efficient way. The value is always set to `true`
+   */
+  [TYPE]: true;
+
   /**
    * The next active index in the views array to read or write to. This helps us
    * keep track of where we are in the views array.
@@ -60,15 +63,6 @@ export interface LContainer extends Array<any> {
    */
   [ACTIVE_INDEX]: number;
 
-  /**
-   * A list of the container's currently active child views. Views will be inserted
-   * here as they are added and spliced from here when they are removed. We need
-   * to keep a record of current views so we know which views are already in the DOM
-   * (and don't need to be re-added) and so we can remove views from the DOM when they
-   * are no longer required.
-   */
-  [VIEWS]: LView[];
-
   /**
    * Access to the parent view is necessary so we can propagate back
    * up from inside a container to parent[NEXT].
@@ -85,10 +79,21 @@ export interface LContainer extends Array<any> {
    * Queries active for this container - all the views inserted to / removed from
    * this container are reported to queries referenced here.
    */
-  [QUERIES]: LQueries|null;
+  [QUERIES]: LQueries|null;  // TODO(misko): This is abuse of `LContainer` since we are storing
+  // `[QUERIES]` in it which are not needed for `LContainer` (only needed for Template)
+
+  /**
+   * A list of the container's currently active child views. Views will be inserted
+   * here as they are added and spliced from here when they are removed. We need
+   * to keep a record of current views so we know which views are already in the DOM
+   * (and don't need to be re-added) and so we can remove views from the DOM when they
+   * are no longer required.
+   */
+  [VIEWS]: LView[];
 
   /** The comment element that serves as an anchor for this LContainer. */
-  readonly[NATIVE]: RComment;
+  readonly[NATIVE]:
+      RComment;  // TODO(misko): remove as this value can be gotten by unwrapping `[HOST]`
 }
 
 // Note: This hack is necessary so we don't erroneously get a circular dependency

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

@@ -7,7 +7,7 @@
  */
 
 
-import {RElement} from './renderer';
+import {RNode} from './renderer';
 import {LView} from './view';
 
 /**
@@ -39,7 +39,7 @@ export interface LContext {
   /**
    * The instance of the DOM node that is attached to the lNode.
    */
-  native: RElement;
+  native: RNode;
 
   /**
    * The instance of the Component node.

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

@@ -7,7 +7,10 @@
  */
 import {StyleSanitizeFn} from '../../sanitization/style_sanitizer';
 import {RElement} from '../interfaces/renderer';
+import {LContainer} from './container';
 import {PlayerContext} from './player';
+import {LView} from './view';
+
 
 /**
  * The styling context acts as a styling manifest (shaped as an array) for determining which
@@ -263,7 +266,7 @@ export interface StylingContext extends
   /**
    * Location of element that is used as a target for this context.
    */
-  [StylingIndex.ElementPosition]: RElement|null;
+  [StylingIndex.ElementPosition]: LContainer|LView|RElement|null;
 
   /**
    * A numeric value representing the configuration status (whether the context is dirty or not)

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

@@ -72,6 +72,9 @@ export interface LView extends Array<any> {
    * The host node for this LView instance, if this is a component view.
    *
    * If this is an embedded view, HOST will be null.
+   *
+   * If the component uses host bindings for styling that the `RElement` will be wrapped with
+   * `StylingContext`.
    */
   [HOST]: RElement|StylingContext|null;
 

packages/core/src/render3/node_manipulation.ts

@@ -21,7 +21,7 @@ import {CHILD_HEAD, CLEANUP, FLAGS, HEADER_OFFSET, HookData, LView, LViewFlags,
 import {assertNodeType} from './node_assert';
 import {renderStringify} from './util/misc_utils';
 import {findComponentView, getLViewParent} from './util/view_traversal_utils';
-import {getNativeByTNode, isComponent, isLContainer, isLView, isRootView, readElementValue} from './util/view_utils';
+import {getNativeByTNode, isComponent, isLContainer, isLView, isRootView, unwrapRNode} from './util/view_utils';
 
 const unusedValueToPlacateAjd = unused1 + unused2 + unused3 + unused4 + unused5;
 
@@ -200,8 +200,8 @@ function walkTNodeTree(
  * being passed as an argument.
  */
 function executeNodeAction(
-    action: WalkTNodeTreeAction, renderer: Renderer3, parent: RElement | null,
-    node: RComment | RElement | RText, tNode: TNode, beforeNode?: RNode | null) {
+    action: WalkTNodeTreeAction, renderer: Renderer3, parent: RElement | null, node: RNode,
+    tNode: TNode, beforeNode?: RNode | null) {
   if (action === WalkTNodeTreeAction.Insert) {
     nativeInsertBefore(renderer, parent !, node, beforeNode || null);
   } else if (action === WalkTNodeTreeAction.Detach) {
@@ -454,7 +454,7 @@ function removeListeners(lView: LView): void {
         const idxOrTargetGetter = tCleanup[i + 1];
         const target = typeof idxOrTargetGetter === 'function' ?
             idxOrTargetGetter(lView) :
-            readElementValue(lView[idxOrTargetGetter]);
+            unwrapRNode(lView[idxOrTargetGetter]);
         const listener = lCleanup[tCleanup[i + 2]];
         const useCaptureOrSubIdx = tCleanup[i + 3];
         if (typeof useCaptureOrSubIdx === 'boolean') {

packages/core/src/render3/styling/util.ts

@@ -9,25 +9,25 @@ import '../../util/ng_dev_mode';
 
 import {StyleSanitizeFn} from '../../sanitization/style_sanitizer';
 import {getLContext} from '../context_discovery';
-import {LCONTAINER_LENGTH, LContainer} from '../interfaces/container';
+import {LContainer} from '../interfaces/container';
 import {LContext} from '../interfaces/context';
 import {AttributeMarker, TAttributes, TNode, TNodeFlags} from '../interfaces/node';
 import {PlayState, Player, PlayerContext, PlayerIndex} from '../interfaces/player';
 import {RElement} from '../interfaces/renderer';
-import {InitialStylingValues, InitialStylingValuesIndex, StylingContext, StylingFlags, StylingIndex} from '../interfaces/styling';
+import {InitialStylingValues, StylingContext, StylingFlags, StylingIndex} from '../interfaces/styling';
 import {HEADER_OFFSET, HOST, LView, RootContext} from '../interfaces/view';
-import {getTNode} from '../util/view_utils';
+import {getTNode, isStylingContext} from '../util/view_utils';
 
 import {CorePlayerHandler} from './core_player_handler';
 
 export const ANIMATION_PROP_PREFIX = '@';
 
 export function createEmptyStylingContext(
-    element?: RElement | null, sanitizer?: StyleSanitizeFn | null,
+    wrappedElement?: LContainer | LView | RElement | null, sanitizer?: StyleSanitizeFn | null,
     initialStyles?: InitialStylingValues | null,
     initialClasses?: InitialStylingValues | null): StylingContext {
   const context: StylingContext = [
-    element || null,                 // Element
+    wrappedElement || null,          // Element
     0,                               // MasterFlags
     [] as any,                       // DirectiveRefs (this gets filled below)
     initialStyles || [null, null],   // InitialStyles
@@ -95,7 +95,7 @@ export function getStylingContext(index: number, viewData: LView): StylingContex
   }
 
   if (isStylingContext(wrapper)) {
-    return wrapper as StylingContext;
+    return wrapper;
   } else {
     // This is an LView or an LContainer
     const stylingTemplate = getTNode(index - HEADER_OFFSET, viewData).stylingTemplate;
@@ -110,15 +110,6 @@ export function getStylingContext(index: number, viewData: LView): StylingContex
   }
 }
 
-export function isStylingContext(value: any): boolean {
-  // Not an LView or an LContainer
-  if (Array.isArray(value) && value.length >= StylingIndex.SingleStylesStartPosition) {
-    return typeof value[StylingIndex.MasterFlagPosition] === 'number' &&
-        value[StylingIndex.InitialClassValuesPosition]
-             [InitialStylingValuesIndex.DefaultNullValuePosition] === null;
-  }
-  return false;
-}
 
 export function isAnimationProp(name: string): boolean {
   return name[0] === ANIMATION_PROP_PREFIX;

packages/core/src/render3/util/discovery_utils.ts

@@ -17,7 +17,7 @@ import {TElementNode, TNode, TNodeProviderIndexes} from '../interfaces/node';
 import {CLEANUP, CONTEXT, FLAGS, HOST, LView, LViewFlags, TVIEW} from '../interfaces/view';
 import {renderStringify} from './misc_utils';
 import {getLViewParent, getRootContext} from './view_traversal_utils';
-import {readElementValue} from './view_utils';
+import {unwrapRNode} from './view_utils';
 
 
 
@@ -297,7 +297,7 @@ export function getListeners(element: Element): Listener[] {
       const secondParam = tCleanup[i++];
       if (typeof firstParam === 'string') {
         const name: string = firstParam;
-        const listenerElement = readElementValue(lView[secondParam]) as any as Element;
+        const listenerElement = unwrapRNode(lView[secondParam]) as any as Element;
         const callback: (value: any) => any = lCleanup[tCleanup[i++]];
         const useCaptureOrIndx = tCleanup[i++];
         // if useCaptureOrIndx is boolean then report it as is.