feat(core): view engine - integrate with ComponentFactory (angular#14237)

`ComponentFactory`s can now be created from a `ViewDefinitionFactory` via
`RefFactory.createComponentFactory`.

This commit also:
- splits `Services` into `Refs` and `RootData`
- changes `ViewState` into a bitmask
- implements `ViewContainerRef.move`

Part of angular#14013

PR Close angular#14237

Author: tbosch

modules/@angular/core/src/linker/component_factory.ts

@@ -95,12 +95,10 @@ export class ComponentFactory<C> {
   /** @internal */
   _viewClass: Type<AppView<any>>;
   constructor(
-      public selector: string, _viewClass: Type<AppView<any>>, private _componentType: Type<any>) {
+      public selector: string, _viewClass: Type<AppView<any>>, public componentType: Type<any>) {
     this._viewClass = _viewClass;
   }
 
-  get componentType(): Type<any> { return this._componentType; }
-
   /**
    * Creates a new component.
    */

modules/@angular/core/src/view/element.ts

@@ -9,7 +9,7 @@
 import {isDevMode} from '../application_ref';
 import {SecurityContext} from '../security';
 
-import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementOutputDef, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, ViewData, ViewDefinition, ViewFlags, asElementData} from './types';
+import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementOutputDef, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, Refs, ViewData, ViewDefinition, ViewFlags, asElementData} from './types';
 import {checkAndUpdateBinding, dispatchEvent, entryAction, setBindingDebugInfo, setCurrentNode, sliceErrorStack, unwrapValue} from './util';
 
 export function anchorDef(
@@ -129,19 +129,30 @@ export function elementDef(
 }
 
 export function createElement(view: ViewData, renderHost: any, def: NodeDef): ElementData {
-  const parentNode =
-      def.parent != null ? asElementData(view, def.parent).renderElement : renderHost;
   const elDef = def.element;
+  const rootSelectorOrNode = view.root.selectorOrNode;
   let el: any;
-  if (view.renderer) {
-    const debugContext =
-        isDevMode() ? view.services.createDebugContext(view, def.index) : undefined;
-    el = elDef.name ? view.renderer.createElement(parentNode, elDef.name, debugContext) :
-                      view.renderer.createTemplateAnchor(parentNode, debugContext);
+  if (view.parent || !rootSelectorOrNode) {
+    const parentNode =
+        def.parent != null ? asElementData(view, def.parent).renderElement : renderHost;
+    if (view.renderer) {
+      const debugContext = isDevMode() ? Refs.createDebugContext(view, def.index) : undefined;
+      el = elDef.name ? view.renderer.createElement(parentNode, elDef.name, debugContext) :
+                        view.renderer.createTemplateAnchor(parentNode, debugContext);
+    } else {
+      el = elDef.name ? document.createElement(elDef.name) : document.createComment('');
+      if (parentNode) {
+        parentNode.appendChild(el);
+      }
+    }
   } else {
-    el = elDef.name ? document.createElement(elDef.name) : document.createComment('');
-    if (parentNode) {
-      parentNode.appendChild(el);
+    if (view.renderer) {
+      const debugContext = isDevMode() ? Refs.createDebugContext(view, def.index) : undefined;
+      el = view.renderer.selectRootElement(rootSelectorOrNode, debugContext);
+    } else {
+      el = typeof rootSelectorOrNode === 'string' ? document.querySelector(rootSelectorOrNode) :
+                                                    rootSelectorOrNode;
+      el.textContent = '';
     }
   }
   if (elDef.attrs) {
@@ -269,7 +280,7 @@ function checkAndUpdateElementValue(view: ViewData, def: NodeDef, bindingIdx: nu
 function setElementAttribute(
     view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
   const securityContext = binding.securityContext;
-  let renderValue = securityContext ? view.services.sanitize(securityContext, value) : value;
+  let renderValue = securityContext ? view.root.sanitizer.sanitize(securityContext, value) : value;
   renderValue = renderValue != null ? renderValue.toString() : null;
   if (view.renderer) {
     view.renderer.setElementAttribute(renderNode, name, renderValue);
@@ -296,7 +307,7 @@ function setElementClass(view: ViewData, renderNode: any, name: string, value: b
 
 function setElementStyle(
     view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
-  let renderValue = view.services.sanitize(SecurityContext.STYLE, value);
+  let renderValue = view.root.sanitizer.sanitize(SecurityContext.STYLE, value);
   if (renderValue != null) {
     renderValue = renderValue.toString();
     const unit = binding.suffix;
@@ -322,7 +333,7 @@ function setElementStyle(
 function setElementProperty(
     view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
   const securityContext = binding.securityContext;
-  let renderValue = securityContext ? view.services.sanitize(securityContext, value) : value;
+  let renderValue = securityContext ? view.root.sanitizer.sanitize(securityContext, value) : value;
   if (view.renderer) {
     view.renderer.setElementProperty(renderNode, name, renderValue);
     if (isDevMode() && (view.def.flags & ViewFlags.DirectDom) === 0) {

modules/@angular/core/src/view/errors.ts

@@ -35,7 +35,7 @@ export function viewDebugError(msg: string, context: DebugContext): ViewDebugErr
   const err = new Error(msg) as any;
   err.context = context;
   err.stack = context.source;
-  context.view.state = ViewState.Errored;
+  context.view.state |= ViewState.Errored;
   return err;
 }
 

modules/@angular/core/src/view/index.ts

@@ -14,7 +14,13 @@ export {queryDef} from './query';
 export {textDef} from './text';
 export {rootRenderNodes, setCurrentNode} from './util';
 export {checkAndUpdateView, checkNoChangesView, checkNodeDynamic, checkNodeInline, createEmbeddedView, createRootView, destroyView, viewDef} from './view';
-export {attachEmbeddedView, detachEmbeddedView} from './view_attach';
-
+export {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView} from './view_attach';
 export * from './types';
-export {DefaultServices} from './services';
+
+import {createRefs} from './refs';
+import {Refs} from './types';
+
+Refs.setInstance(createRefs());
+
+export const createComponentFactory: typeof Refs.createComponentFactory =
+    Refs.createComponentFactory;

modules/@angular/core/src/view/provider.ts

@@ -17,8 +17,8 @@ import {Renderer} from '../render/api';
 import {Type} from '../type';
 
 import {queryDef} from './query';
-import {BindingDef, BindingType, DepDef, DepFlags, DisposableFn, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, ProviderData, ProviderOutputDef, ProviderType, QueryBindingType, QueryDef, QueryValueType, Services, ViewData, ViewDefinition, ViewFlags, ViewState, asElementData, asProviderData} from './types';
-import {checkAndUpdateBinding, dispatchEvent, entryAction, findElementDef, setBindingDebugInfo, setCurrentNode, unwrapValue} from './util';
+import {BindingDef, BindingType, DepDef, DepFlags, DisposableFn, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, ProviderData, ProviderOutputDef, ProviderType, QueryBindingType, QueryDef, QueryValueType, Refs, RootData, ViewData, ViewDefinition, ViewFlags, ViewState, asElementData, asProviderData} from './types';
+import {checkAndUpdateBinding, dispatchEvent, entryAction, findElementDef, parentDiIndex, setBindingDebugInfo, setCurrentNode, unwrapValue} from './util';
 
 const _tokenKeyCache = new Map<any, string>();
 
@@ -169,7 +169,7 @@ export function checkAndUpdateProviderInline(
   if (changes) {
     provider.ngOnChanges(changes);
   }
-  if (view.state === ViewState.FirstCheck && (def.flags & NodeFlags.OnInit)) {
+  if ((view.state & ViewState.FirstCheck) && (def.flags & NodeFlags.OnInit)) {
     provider.ngOnInit();
   }
   if (def.flags & NodeFlags.DoCheck) {
@@ -186,7 +186,7 @@ export function checkAndUpdateProviderDynamic(view: ViewData, def: NodeDef, valu
   if (changes) {
     provider.ngOnChanges(changes);
   }
-  if (view.state === ViewState.FirstCheck && (def.flags & NodeFlags.OnInit)) {
+  if ((view.state & ViewState.FirstCheck) && (def.flags & NodeFlags.OnInit)) {
     provider.ngOnInit();
   }
   if (def.flags & NodeFlags.DoCheck) {
@@ -290,16 +290,18 @@ function callFactory(
 }
 
 export function resolveDep(
-    view: ViewData, requestNodeIndex: number, elIndex: number, depDef: DepDef): any {
-  const notFoundValue = depDef.flags & DepFlags.Optional ? null : Injector.THROW_IF_NOT_FOUND;
+    view: ViewData, requestNodeIndex: number, elIndex: number, depDef: DepDef,
+    notFoundValue = Injector.THROW_IF_NOT_FOUND): any {
+  const startView = view;
+  if (depDef.flags & DepFlags.Optional) {
+    notFoundValue = null;
+  }
   const tokenKey = depDef.tokenKey;
 
   if (depDef.flags & DepFlags.SkipSelf) {
     requestNodeIndex = null;
-    const elDef = view.def.nodes[elIndex];
-    if (elDef.parent != null) {
-      elIndex = elDef.parent;
-    } else {
+    elIndex = view.def.nodes[elIndex].parent;
+    while (elIndex == null && view) {
       elIndex = parentDiIndex(view);
       view = view.parent;
     }
@@ -317,9 +319,9 @@ export function resolveDep(
       case ElementRefTokenKey:
         return new ElementRef(asElementData(view, elIndex).renderElement);
       case ViewContainerRefTokenKey:
-        return view.services.createViewContainerRef(asElementData(view, elIndex));
+        return Refs.createViewContainerRef(view, elIndex);
       case TemplateRefTokenKey:
-        return view.services.createTemplateRef(view, elDef);
+        return Refs.createTemplateRef(view, elDef);
       case ChangeDetectorRefTokenKey:
         let cdView = view;
         // If we are still checking dependencies on the initial element...
@@ -330,9 +332,9 @@ export function resolveDep(
           }
         }
         // A ViewRef is also a ChangeDetectorRef
-        return view.services.createViewRef(cdView);
+        return Refs.createViewRef(cdView);
       case InjectorRefTokenKey:
-        return createInjector(view, elIndex);
+        return Refs.createInjector(view, elIndex);
       default:
         const providerIndex = elDef.element.providerIndices[tokenKey];
         if (providerIndex != null) {
@@ -347,34 +349,7 @@ export function resolveDep(
     elIndex = parentDiIndex(view);
     view = view.parent;
   }
-  return Injector.NULL.get(depDef.token, notFoundValue);
-}
-
-/**
- * for component views, this is the same as parentIndex.
- * for embedded views, this is the index of the parent node
- * that contains the view container.
- */
-function parentDiIndex(view: ViewData): number {
-  if (view.parent) {
-    const parentNodeDef = view.def.nodes[view.parentIndex];
-    return parentNodeDef.element && parentNodeDef.element.template ? parentNodeDef.parent :
-                                                                     parentNodeDef.index;
-  }
-  return view.parentIndex;
-}
-
-export function createInjector(view: ViewData, elIndex: number): Injector {
-  return new Injector_(view, elIndex);
-}
-
-class Injector_ implements Injector {
-  constructor(private view: ViewData, private elIndex: number) {}
-  get(token: any, notFoundValue?: any): any {
-    return resolveDep(
-        this.view, undefined, this.elIndex,
-        {flags: DepFlags.None, token, tokenKey: tokenKey(token)});
-  }
+  return startView.root.injector.get(depDef.token, notFoundValue);
 }
 
 function checkAndUpdateProp(
@@ -385,8 +360,9 @@ function checkAndUpdateProp(
   if (def.flags & NodeFlags.OnChanges) {
     const oldValue = view.oldValues[def.bindingIndex + bindingIdx];
     changed = checkAndUpdateBinding(view, def, bindingIdx, value);
-    change =
-        changed ? new SimpleChange(oldValue, value, view.state === ViewState.FirstCheck) : null;
+    change = changed ?
+        new SimpleChange(oldValue, value, (view.state & ViewState.FirstCheck) !== 0) :
+        null;
   } else {
     changed = checkAndUpdateBinding(view, def, bindingIdx, value);
   }

modules/@angular/core/src/view/query.ts

@@ -11,7 +11,7 @@ import {QueryList} from '../linker/query_list';
 import {TemplateRef} from '../linker/template_ref';
 import {ViewContainerRef} from '../linker/view_container_ref';
 
-import {NodeDef, NodeFlags, NodeType, QueryBindingDef, QueryBindingType, QueryDef, QueryValueType, ViewData, asElementData, asProviderData, asQueryList} from './types';
+import {NodeDef, NodeFlags, NodeType, QueryBindingDef, QueryBindingType, QueryDef, QueryValueType, Refs, ViewData, asElementData, asProviderData, asQueryList} from './types';
 import {declaredViewContainer} from './util';
 
 export function queryDef(
@@ -158,10 +158,10 @@ export function getQueryValue(view: ViewData, nodeDef: NodeDef, queryId: string)
         value = new ElementRef(asElementData(view, nodeDef.index).renderElement);
         break;
       case QueryValueType.TemplateRef:
-        value = view.services.createTemplateRef(view, nodeDef);
+        value = Refs.createTemplateRef(view, nodeDef);
         break;
       case QueryValueType.ViewContainerRef:
-        value = view.services.createViewContainerRef(asElementData(view, nodeDef.index));
+        value = Refs.createViewContainerRef(view, nodeDef.index);
         break;
       case QueryValueType.Provider:
         value = asProviderData(view, nodeDef.index).instance;