refactor(core): initial implementation of {#defer} block runtime

This commit adds an initial implementation of the `{#defer}` block runtime, which supports the `when` conditions. More conditions and basic prefetching support will be added in followup PRs.

packages/core/src/core_render3_private_export.ts

@@ -68,6 +68,8 @@ export {
   setClassMetadataAsync as ɵsetClassMetadataAsync,
   setLocaleId as ɵsetLocaleId,
   store as ɵstore,
+  ɵDeferBlockDependencyInterceptor,
+  ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
   ɵɵadvance,
   ɵɵattribute,
   ɵɵattributeInterpolate1,

packages/core/src/render3/index.ts

@@ -150,7 +150,10 @@ export {
   ɵgetUnknownElementStrictMode,
   ɵsetUnknownElementStrictMode,
   ɵgetUnknownPropertyStrictMode,
-  ɵsetUnknownPropertyStrictMode
+  ɵsetUnknownPropertyStrictMode,
+
+  DeferBlockDependencyInterceptor as ɵDeferBlockDependencyInterceptor,
+  DEFER_BLOCK_DEPENDENCY_INTERCEPTOR as ɵDEFER_BLOCK_DEPENDENCY_INTERCEPTOR,
 } from './instructions/all';
 export {ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp,ɵɵi18nPostprocess, ɵɵi18nStart} from './instructions/i18n';
 export {RenderFlags} from './interfaces/definition';

packages/core/src/render3/instructions/shared.ts

@@ -31,7 +31,7 @@ import {CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
 import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefListOrFactory, HostBindingsFunction, HostDirectiveBindingMap, HostDirectiveDefs, PipeDefListOrFactory, RenderFlags, ViewQueriesFunction} from '../interfaces/definition';
 import {NodeInjectorFactory} from '../interfaces/injector';
 import {getUniqueLViewId} from '../interfaces/lview_tracking';
-import {AttributeMarker, InitialInputData, InitialInputs, LocalRefExtractor, PropertyAliases, PropertyAliasValue, TAttributes, TConstantsOrFactory, TContainerNode, TDirectiveHostNode, TElementContainerNode, TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from '../interfaces/node';
+import {AttributeMarker, InitialInputData, InitialInputs, LocalRefExtractor, PropertyAliases, PropertyAliasValue, TAttributes, TConstantsOrFactory, TContainerNode, TDeferBlockDetails, TDirectiveHostNode, TElementContainerNode, TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from '../interfaces/node';
 import {Renderer} from '../interfaces/renderer';
 import {RComment, RElement, RNode, RText} from '../interfaces/renderer_dom';
 import {SanitizerFn} from '../interfaces/sanitization';
@@ -140,7 +140,7 @@ export function getOrCreateTNode(
     tView: TView, index: number, type: TNodeType.Element|TNodeType.Text, name: string|null,
     attrs: TAttributes|null): TElementNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType.Container, name: string|null,
+    tView: TView, index: number, type: TNodeType.Container, value: string|TDeferBlockDetails|null,
     attrs: TAttributes|null): TContainerNode;
 export function getOrCreateTNode(
     tView: TView, index: number, type: TNodeType.Projection, name: null,
@@ -152,16 +152,17 @@ export function getOrCreateTNode(
     tView: TView, index: number, type: TNodeType.Icu, name: null,
     attrs: TAttributes|null): TElementContainerNode;
 export function getOrCreateTNode(
-    tView: TView, index: number, type: TNodeType, name: string|null, attrs: TAttributes|null):
-    TElementNode&TContainerNode&TElementContainerNode&TProjectionNode&TIcuContainerNode {
+    tView: TView, index: number, type: TNodeType, value: string|TDeferBlockDetails|null,
+    attrs: TAttributes|null): TElementNode&TContainerNode&TElementContainerNode&TProjectionNode&
+    TIcuContainerNode {
   ngDevMode && index !== 0 &&  // 0 are bogus nodes and they are OK. See `createContainerRef` in
                                // `view_engine_compatibility` for additional context.
       assertGreaterThanOrEqual(index, HEADER_OFFSET, 'TNodes can\'t be in the LView header.');
   // Keep this function short, so that the VM will inline it.
   ngDevMode && assertPureTNodeType(type);
   let tNode = tView.data[index] as TNode;
   if (tNode === null) {
-    tNode = createTNodeAtIndex(tView, index, type, name, attrs);
+    tNode = createTNodeAtIndex(tView, index, type, value, attrs);
     if (isInI18nBlock()) {
       // If we are in i18n block then all elements should be pre declared through `Placeholder`
       // See `TNodeType.Placeholder` and `LFrame.inI18n` for more context.
@@ -171,7 +172,7 @@ export function getOrCreateTNode(
     }
   } else if (tNode.type & TNodeType.Placeholder) {
     tNode.type = type;
-    tNode.value = name;
+    tNode.value = value;
     tNode.attrs = attrs;
     const parent = getCurrentParentTNode();
     tNode.injectorIndex = parent === null ? -1 : parent.injectorIndex;
@@ -184,13 +185,14 @@ export function getOrCreateTNode(
 }
 
 export function createTNodeAtIndex(
-    tView: TView, index: number, type: TNodeType, name: string|null, attrs: TAttributes|null) {
+    tView: TView, index: number, type: TNodeType, value: string|TDeferBlockDetails|null,
+    attrs: TAttributes|null) {
   const currentTNode = getCurrentTNodePlaceholderOk();
   const isParent = isCurrentTNodeParent();
   const parent = isParent ? currentTNode : currentTNode && currentTNode.parent;
   // Parents cannot cross component boundaries because components will be used in multiple places.
   const tNode = tView.data[index] =
-      createTNode(tView, parent as TElementNode | TContainerNode, type, index, name, attrs);
+      createTNode(tView, parent as TElementNode | TContainerNode, type, index, value, attrs);
   // Assign a pointer to the first child node of a given view. The first node is not always the one
   // at index 0, in case of i18n, index 0 can be the instruction `i18nStart` and the first node has
   // the index 1 or more, so we can't just check node index.
@@ -558,7 +560,7 @@ export function storeCleanupWithContext(
  */
 export function createTNode(
     tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.Container,
-    index: number, tagName: string|null, attrs: TAttributes|null): TContainerNode;
+    index: number, value: string|TDeferBlockDetails|null, attrs: TAttributes|null): TContainerNode;
 export function createTNode(
     tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType.Element|TNodeType.Text,
     index: number, tagName: string|null, attrs: TAttributes|null): TElementNode;
@@ -573,10 +575,10 @@ export function createTNode(
     index: number, tagName: string|null, attrs: TAttributes|null): TProjectionNode;
 export function createTNode(
     tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType, index: number,
-    tagName: string|null, attrs: TAttributes|null): TNode;
+    value: string|TDeferBlockDetails|null, attrs: TAttributes|null): TNode;
 export function createTNode(
     tView: TView, tParent: TElementNode|TContainerNode|null, type: TNodeType, index: number,
-    value: string|null, attrs: TAttributes|null): TNode {
+    value: string|TDeferBlockDetails|null, attrs: TAttributes|null): TNode {
   ngDevMode && index !== 0 &&  // 0 are bogus nodes and they are OK. See `createContainerRef` in
                                // `view_engine_compatibility` for additional context.
       assertGreaterThanOrEqual(index, HEADER_OFFSET, 'TNodes can\'t be in the LView header.');
@@ -600,8 +602,8 @@ export function createTNode(
     propertyBindings: null,
     flags,
     providerIndexes: 0,
-    value: value,
-    attrs: attrs,
+    value,
+    attrs,
     mergedAttrs: null,
     localNames: null,
     initialInputs: undefined,
@@ -1411,6 +1413,7 @@ export function createLContainer(
     null,         // view refs
     null,         // moved views
     null,         // dehydrated views
+    null,         // defer block details
   ];
   ngDevMode &&
       assertEqual(

packages/core/src/render3/instructions/template.ts

@@ -14,7 +14,7 @@ import {assertFirstCreatePass} from '../assert';
 import {attachPatchData} from '../context_discovery';
 import {registerPostOrderHooks} from '../hooks';
 import {ComponentTemplate} from '../interfaces/definition';
-import {LocalRefExtractor, TAttributes, TContainerNode, TNode, TNodeType} from '../interfaces/node';
+import {LocalRefExtractor, TAttributes, TContainerNode, TDeferBlockDetails, TNode, TNodeType} from '../interfaces/node';
 import {RComment} from '../interfaces/renderer_dom';
 import {isDirectiveHost} from '../interfaces/type_checks';
 import {HEADER_OFFSET, HYDRATION, LView, RENDERER, TView, TViewType} from '../interfaces/view';
@@ -26,15 +26,15 @@ import {addToViewTree, createDirectivesInstances, createLContainer, createTView,
 
 function templateFirstCreatePass(
     index: number, tView: TView, lView: LView, templateFn: ComponentTemplate<any>|null,
-    decls: number, vars: number, tagName?: string|null, attrsIndex?: number|null,
+    decls: number, vars: number, value?: string|TDeferBlockDetails|null, attrsIndex?: number|null,
     localRefsIndex?: number|null): TContainerNode {
   ngDevMode && assertFirstCreatePass(tView);
   ngDevMode && ngDevMode.firstCreatePass++;
   const tViewConsts = tView.consts;
 
   // TODO(pk): refactor getOrCreateTNode to have the "create" only version
   const tNode = getOrCreateTNode(
-      tView, index, TNodeType.Container, tagName || null,
+      tView, index, TNodeType.Container, value || null,
       getConstant<TAttributes>(tViewConsts, attrsIndex));
 
   resolveDirectives(tView, lView, tNode, getConstant<string[]>(tViewConsts, localRefsIndex));
@@ -75,14 +75,26 @@ export function ɵɵtemplate(
     index: number, templateFn: ComponentTemplate<any>|null, decls: number, vars: number,
     tagName?: string|null, attrsIndex?: number|null, localRefsIndex?: number|null,
     localRefExtractor?: LocalRefExtractor) {
+  templateInternal(
+      index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor);
+}
+
+export function templateInternal(
+    index: number, templateFn: ComponentTemplate<any>|null, decls: number, vars: number,
+    value?: string|(() => TDeferBlockDetails)|null, attrsIndex?: number|null,
+    localRefsIndex?: number|null, localRefExtractor?: LocalRefExtractor) {
   const lView = getLView();
   const tView = getTView();
-  const adjustedIndex = index + HEADER_OFFSET;
 
-  const tNode = tView.firstCreatePass ? templateFirstCreatePass(
-                                            adjustedIndex, tView, lView, templateFn, decls, vars,
-                                            tagName, attrsIndex, localRefsIndex) :
-                                        tView.data[adjustedIndex] as TContainerNode;
+  const adjustedIndex = index + HEADER_OFFSET;
+  const tNode = tView.firstCreatePass ?
+      templateFirstCreatePass(
+          adjustedIndex, tView, lView, templateFn, decls, vars,
+          // Defer block details are needed only once during the first creation pass,
+          // so we pass a function and invoke it here to avoid re-constructing the same
+          // object for each subsequent creation run.
+          (typeof value === 'function' ? value() : value), attrsIndex, localRefsIndex) :
+      tView.data[adjustedIndex] as TContainerNode;
   setCurrentTNode(tNode, false);
 
   const comment = _locateOrCreateContainerAnchor(tView, lView, tNode, index) as RComment;

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

@@ -47,6 +47,7 @@ export const NATIVE = 7;
 export const VIEW_REFS = 8;
 export const MOVED_VIEWS = 9;
 export const DEHYDRATED_VIEWS = 10;
+export const DEFER_BLOCK_DETAILS = 11;
 
 
 /**
@@ -55,7 +56,38 @@ export const DEHYDRATED_VIEWS = 10;
  * 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.
  */
-export const CONTAINER_HEADER_OFFSET = 11;
+export const CONTAINER_HEADER_OFFSET = 12;
+
+/**
+ * Describes the current state of this {#defer} block instance.
+ */
+export const enum DeferBlockInstanceState {
+  /** Initial state, nothing is rendered yet */
+  INITIAL,
+
+  /** The {:placeholder} block content is rendered */
+  PLACEHOLDER,
+
+  /** The {:loading} block content is rendered */
+  LOADING,
+
+  /** The main content block content is rendered */
+  COMPLETE,
+
+  /** The {:error} block content is rendered */
+  ERROR
+}
+
+/**
+ * Describes instance-specific {#defer} block data.
+ *
+ * Note: currently there is only the `state` field, but more fields
+ * would be added later to keep track of `after` and `maximum` features
+ * (which would require per-instance state).
+ */
+export interface LDeferBlockDetails {
+  state: DeferBlockInstanceState;
+}
 
 /**
  * The state associated with a container.
@@ -144,6 +176,12 @@ export interface LContainer extends Array<any> {
    * logic finishes.
    */
   [DEHYDRATED_VIEWS]: DehydratedContainerView[]|null;
+
+  /**
+   * If this LContainer represents an instance of a `{#defer}` block -
+   * this field contains instance-specific information about the block.
+   */
+  [DEFER_BLOCK_DETAILS]: LDeferBlockDetails|null;
 }
 
 // Note: This hack is necessary so we don't erroneously get a circular dependency

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

@@ -491,7 +491,11 @@ export type DirectiveTypeList =
     (DirectiveType<any>|ComponentType<any>|
      Type<any>/* Type as workaround for: Microsoft/TypeScript/issues/4881 */)[];
 
-export type DependencyTypeList = (DirectiveType<any>|ComponentType<any>|PipeType<any>|Type<any>)[];
+export type DependencyType = DirectiveType<any>|ComponentType<any>|PipeType<any>|Type<any>;
+
+export type DependencyTypeList = Array<DependencyType>;
+
+export type DependencyResolverFn = () => Array<Promise<DependencyType>>;
 
 export type TypeOrFactory<T> = T|(() => T);
 

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

@@ -8,6 +8,7 @@
 import {KeyValueArray} from '../../util/array_utils';
 import {TStylingRange} from '../interfaces/styling';
 
+import type {DependencyResolverFn} from './definition';
 import {TIcu} from './i18n';
 import {CssSelector} from './projection';
 import {RNode} from './renderer_dom';
@@ -858,6 +859,88 @@ export interface TProjectionNode extends TNode {
   value: null;
 }
 
+/**
+ * Describes the state of defer block dependency loading.
+ */
+export const enum DeferDependenciesLoadingState {
+  /** Initial state, dependency loading is not yet triggered */
+  NOT_STARTED,
+
+  /** Dependency loading is in progress */
+  IN_PROGRESS,
+
+  /** Dependency loading has completed successfully */
+  COMPLETE,
+
+  /** Dependency loading has failed */
+  FAILED,
+}
+
+/** Configuration object for a `{:loading}` block as it is stored in the component constants. */
+export type DeferredLoadingBlockConfig = [minimumTime: number|null, afterTime: number|null];
+
+/** Configuration object for a `{:placeholder}` block as it is stored in the component constants. */
+export type DeferredPlaceholderBlockConfig = [afterTime: number|null];
+
+
+/**
+ * Describes the data shared across all instances of a {#defer} block.
+ */
+export interface TDeferBlockDetails {
+  /**
+   * Index in an LView and TData arrays where a template for the primary content
+   * can be found.
+   */
+  primaryTmplIndex: number;
+
+  /**
+   * Index in an LView and TData arrays where a template for the `{:loading}`
+   * block can be found.
+   */
+  loadingTmplIndex: number|null;
+
+  /**
+   * Extra configuration parameters (such as `after` and `minimum`)
+   * for the `{:loading}` block.
+   */
+  loadingBlockConfig: DeferredLoadingBlockConfig|null;
+
+  /**
+   * Index in an LView and TData arrays where a template for the `{:placeholder}`
+   * block can be found.
+   */
+  placeholderTmplIndex: number|null;
+
+  /**
+   * Extra configuration parameters (such as `after` and `minimum`)
+   * for the `{:placeholder}` block.
+   */
+  placeholderBlockConfig: DeferredPlaceholderBlockConfig|null;
+
+  /**
+   * Index in an LView and TData arrays where a template for the `{:error}`
+   * block can be found.
+   */
+  errorTmplIndex: number|null;
+
+  /**
+   * Compiler-generated function that loads all dependencies for a `{#defer}` block.
+   */
+  dependencyResolverFn: DependencyResolverFn|null;
+
+  /**
+   * Keeps track of the current loading state of defer block dependencies.
+   */
+  loadingState: DeferDependenciesLoadingState;
+
+  /**
+   * Dependency loading Promise. This Promise is helpful for cases when there
+   * are multiple instances of a defer block (e.g. if it was used inside of an *ngFor),
+   * which all await the same set of dependencies.
+   */
+  loadingPromise: Promise<unknown>|null;
+}
+
 /**
  * A union type representing all TNode types that can host a directive.
  */

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

@@ -56,3 +56,7 @@ export function isProjectionTNode(tNode: TNode): boolean {
 export function hasI18n(lView: LView): boolean {
   return (lView[FLAGS] & LViewFlags.HasI18n) === LViewFlags.HasI18n;
 }
+
+export function isDestroyed(lView: LView): boolean {
+  return (lView[FLAGS] & LViewFlags.Destroyed) === LViewFlags.Destroyed;
+}