Skip to content
Permalink
Browse files

refactor(ivy): simplify differentiation of LView, `RNode`, `LView`, `…

…LContainer`, `StylingContext` (#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 #28947
  • Loading branch information...
mhevery committed Feb 23, 2019
1 parent bd65f58 commit 3cb497c6ac07d90175684ea67b6c019da0d5e393
@@ -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,
@@ -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),
@@ -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);
@@ -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
@@ -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.
@@ -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)
@@ -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;

@@ -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') {
@@ -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;
@@ -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.
Oops, something went wrong.

0 comments on commit 3cb497c

Please sign in to comment.
You can’t perform that action at this time.