fix(core): view engine - fix perf regressions (#14345)
- Make sure `NodeDef`s don’t fall into dictionary mode. - Use strategy pattern to add debug information / checks, instead of constantly checking for `isDevMode`. - introduce a very light weight `RendererV2` interface to not have duplicate code paths for direct and non direct rendering The strategy pattern is implemented via the new `Services` object. Part of #14013 PR Close #14345
This commit is contained in:
Tobias Bosch
committed by
Miško Hevery
Miško Hevery
parent
f6b5965a63
commit
24af51a623
@ -9,8 +9,8 @@
|
||||
import {isDevMode} from '../application_ref';
|
||||
import {SecurityContext} from '../security';
|
||||
|
||||
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';
|
||||
import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementOutputDef, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, Services, ViewData, ViewDefinition, ViewFlags, asElementData} from './types';
|
||||
import {checkAndUpdateBinding, dispatchEvent, sliceErrorStack, unwrapValue} from './util';
|
||||
|
||||
export function anchorDef(
|
||||
flags: NodeFlags, matchedQueries: [string, QueryValueType][], ngContentIndex: number,
|
||||
@ -65,7 +65,7 @@ export function elementDef(
|
||||
matchedQueries.forEach(([queryId, valueType]) => { matchedQueryDefs[queryId] = valueType; });
|
||||
}
|
||||
bindings = bindings || [];
|
||||
const bindingDefs = new Array(bindings.length);
|
||||
const bindingDefs: BindingDef[] = new Array(bindings.length);
|
||||
for (let i = 0; i < bindings.length; i++) {
|
||||
const entry = bindings[i];
|
||||
let bindingDef: BindingDef;
|
||||
@ -82,7 +82,7 @@ export function elementDef(
|
||||
securityContext = <SecurityContext>entry[2];
|
||||
break;
|
||||
}
|
||||
bindingDefs[i] = {type: bindingType, name, nonMinfiedName: name, securityContext, suffix};
|
||||
bindingDefs[i] = {type: bindingType, name, nonMinifiedName: name, securityContext, suffix};
|
||||
}
|
||||
outputs = outputs || [];
|
||||
const outputDefs: ElementOutputDef[] = new Array(outputs.length);
|
||||
@ -130,68 +130,30 @@ export function elementDef(
|
||||
|
||||
export function createElement(view: ViewData, renderHost: any, def: NodeDef): ElementData {
|
||||
const elDef = def.element;
|
||||
const rootSelectorOrNode = view.root.selectorOrNode;
|
||||
const rootElement = view.root.element;
|
||||
const renderer = view.root.renderer;
|
||||
let el: any;
|
||||
if (view.parent || !rootSelectorOrNode) {
|
||||
if (view.parent || !rootElement) {
|
||||
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);
|
||||
}
|
||||
el = elDef.name ? renderer.createElement(elDef.name) : renderer.createComment('');
|
||||
if (parentNode) {
|
||||
renderer.appendChild(parentNode, el);
|
||||
}
|
||||
} else {
|
||||
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 = '';
|
||||
}
|
||||
el = rootElement;
|
||||
}
|
||||
if (elDef.attrs) {
|
||||
for (let attrName in elDef.attrs) {
|
||||
if (view.renderer) {
|
||||
view.renderer.setElementAttribute(el, attrName, elDef.attrs[attrName]);
|
||||
} else {
|
||||
el.setAttribute(attrName, elDef.attrs[attrName]);
|
||||
}
|
||||
renderer.setAttribute(el, attrName, elDef.attrs[attrName]);
|
||||
}
|
||||
}
|
||||
if (elDef.outputs.length) {
|
||||
for (let i = 0; i < elDef.outputs.length; i++) {
|
||||
const output = elDef.outputs[i];
|
||||
let disposable: DisposableFn;
|
||||
if (view.renderer) {
|
||||
const handleEventClosure = renderEventHandlerClosure(view, def.index, output.eventName);
|
||||
if (output.target) {
|
||||
disposable =
|
||||
<any>view.renderer.listenGlobal(output.target, output.eventName, handleEventClosure);
|
||||
} else {
|
||||
disposable = <any>view.renderer.listen(el, output.eventName, handleEventClosure);
|
||||
}
|
||||
} else {
|
||||
let target: any;
|
||||
switch (output.target) {
|
||||
case 'window':
|
||||
target = window;
|
||||
break;
|
||||
case 'document':
|
||||
target = document;
|
||||
break;
|
||||
default:
|
||||
target = el;
|
||||
}
|
||||
const handleEventClosure = directDomEventHandlerClosure(view, def.index, output.eventName);
|
||||
target.addEventListener(output.eventName, handleEventClosure);
|
||||
disposable = target.removeEventListener.bind(target, output.eventName, handleEventClosure);
|
||||
}
|
||||
const handleEventClosure = renderEventHandlerClosure(view, def.index, output.eventName);
|
||||
const disposable =
|
||||
<any>renderer.listen(output.target || el, output.eventName, handleEventClosure);
|
||||
view.disposables[def.disposableIndex + i] = disposable;
|
||||
}
|
||||
}
|
||||
@ -203,21 +165,10 @@ export function createElement(view: ViewData, renderHost: any, def: NodeDef): El
|
||||
}
|
||||
|
||||
function renderEventHandlerClosure(view: ViewData, index: number, eventName: string) {
|
||||
return entryAction(
|
||||
EntryAction.HandleEvent, (event: any) => dispatchEvent(view, index, eventName, event));
|
||||
return (event: any) => dispatchEvent(view, index, eventName, event);
|
||||
}
|
||||
|
||||
|
||||
function directDomEventHandlerClosure(view: ViewData, index: number, eventName: string) {
|
||||
return entryAction(EntryAction.HandleEvent, (event: any) => {
|
||||
const result = dispatchEvent(view, index, eventName, event);
|
||||
if (result === false) {
|
||||
event.preventDefault();
|
||||
}
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
export function checkAndUpdateElementInline(
|
||||
view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
|
||||
v7: any, v8: any, v9: any) {
|
||||
@ -282,26 +233,20 @@ function setElementAttribute(
|
||||
const securityContext = binding.securityContext;
|
||||
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);
|
||||
const renderer = view.root.renderer;
|
||||
if (value != null) {
|
||||
renderer.setAttribute(renderNode, name, renderValue);
|
||||
} else {
|
||||
if (value != null) {
|
||||
renderNode.setAttribute(name, renderValue);
|
||||
} else {
|
||||
renderNode.removeAttribute(name);
|
||||
}
|
||||
renderer.removeAttribute(renderNode, name);
|
||||
}
|
||||
}
|
||||
|
||||
function setElementClass(view: ViewData, renderNode: any, name: string, value: boolean) {
|
||||
if (view.renderer) {
|
||||
view.renderer.setElementClass(renderNode, name, value);
|
||||
const renderer = view.root.renderer;
|
||||
if (value) {
|
||||
renderer.addClass(renderNode, name);
|
||||
} else {
|
||||
if (value) {
|
||||
renderNode.classList.add(name);
|
||||
} else {
|
||||
renderNode.classList.remove(name);
|
||||
}
|
||||
renderer.removeClass(renderNode, name);
|
||||
}
|
||||
}
|
||||
|
||||
@ -317,16 +262,11 @@ function setElementStyle(
|
||||
} else {
|
||||
renderValue = null;
|
||||
}
|
||||
if (view.renderer) {
|
||||
view.renderer.setElementStyle(renderNode, name, renderValue);
|
||||
const renderer = view.root.renderer;
|
||||
if (renderValue != null) {
|
||||
renderer.setStyle(renderNode, name, renderValue);
|
||||
} else {
|
||||
if (renderValue != null) {
|
||||
renderNode.style[name] = renderValue;
|
||||
} else {
|
||||
// IE requires '' instead of null
|
||||
// see https://github.com/angular/angular/issues/7916
|
||||
(renderNode.style as any)[name] = '';
|
||||
}
|
||||
renderer.removeStyle(renderNode, name);
|
||||
}
|
||||
}
|
||||
|
||||
@ -334,12 +274,5 @@ function setElementProperty(
|
||||
view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
|
||||
const securityContext = binding.securityContext;
|
||||
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) {
|
||||
setBindingDebugInfo(view.renderer, renderNode, name, renderValue);
|
||||
}
|
||||
} else {
|
||||
renderNode[name] = renderValue;
|
||||
}
|
||||
view.root.renderer.setProperty(renderNode, name, renderValue);
|
||||
}
|
||||
|
||||
@ -7,12 +7,12 @@
|
||||
*/
|
||||
|
||||
import {ERROR_DEBUG_CONTEXT, ERROR_ORIGINAL_ERROR, getDebugContext} from '../errors';
|
||||
import {DebugContext, EntryAction, ViewState} from './types';
|
||||
import {DebugContext, ViewState} from './types';
|
||||
|
||||
export function expressionChangedAfterItHasBeenCheckedError(
|
||||
context: DebugContext, oldValue: any, currValue: any, isFirstCheck: boolean): Error {
|
||||
let msg =
|
||||
`Expression has changed after it was checked. Previous value: '${oldValue}'. Current value: '${currValue}'.`;
|
||||
`ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '${oldValue}'. Current value: '${currValue}'.`;
|
||||
if (isFirstCheck) {
|
||||
msg +=
|
||||
` It seems like the view has been created after its parent and its children have been dirty checked.` +
|
||||
@ -39,6 +39,6 @@ export function isViewDebugError(err: Error): boolean {
|
||||
return !!getDebugContext(err);
|
||||
}
|
||||
|
||||
export function viewDestroyedError(action: EntryAction): Error {
|
||||
return new Error(`View has been used after destroy for ${EntryAction[action]}`);
|
||||
export function viewDestroyedError(action: string): Error {
|
||||
return new Error(`ViewDestroyedError: Attempt to use a destroyed view: ${action}`);
|
||||
}
|
||||
|
||||
@ -11,16 +11,11 @@ export {ngContentDef} from './ng_content';
|
||||
export {directiveDef, providerDef} from './provider';
|
||||
export {pureArrayDef, pureObjectDef, purePipeDef} from './pure_expression';
|
||||
export {queryDef} from './query';
|
||||
export {createComponentFactory} from './refs';
|
||||
export {initServicesIfNeeded} from './services';
|
||||
export {textDef} from './text';
|
||||
export {rootRenderNodes, setCurrentNode} from './util';
|
||||
export {checkAndUpdateView, checkNoChangesView, checkNodeDynamic, checkNodeInline, createEmbeddedView, createRootView, destroyView, viewDef} from './view';
|
||||
export {rootRenderNodes} from './util';
|
||||
export {viewDef} from './view';
|
||||
export {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView} from './view_attach';
|
||||
|
||||
export * from './types';
|
||||
|
||||
import {createRefs} from './refs';
|
||||
import {Refs} from './types';
|
||||
|
||||
Refs.setInstance(createRefs());
|
||||
|
||||
export const createComponentFactory: typeof Refs.createComponentFactory =
|
||||
Refs.createComponentFactory;
|
||||
|
||||
@ -46,13 +46,6 @@ export function appendNgContent(view: ViewData, renderHost: any, def: NodeDef) {
|
||||
return;
|
||||
}
|
||||
const ngContentIndex = def.ngContent.index;
|
||||
if (view.renderer) {
|
||||
const projectedNodes: any[] = [];
|
||||
visitProjectedRenderNodes(
|
||||
view, ngContentIndex, RenderNodeAction.Collect, undefined, undefined, projectedNodes);
|
||||
view.renderer.projectNodes(parentEl, projectedNodes);
|
||||
} else {
|
||||
visitProjectedRenderNodes(
|
||||
view, ngContentIndex, RenderNodeAction.AppendChild, parentEl, undefined, undefined);
|
||||
}
|
||||
visitProjectedRenderNodes(
|
||||
view, ngContentIndex, RenderNodeAction.AppendChild, parentEl, undefined, undefined);
|
||||
}
|
||||
|
||||
@ -6,23 +6,19 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {isDevMode} from '../application_ref';
|
||||
import {ChangeDetectorRef, SimpleChange, SimpleChanges} from '../change_detection/change_detection';
|
||||
import {Injector} from '../di';
|
||||
import {stringify} from '../facade/lang';
|
||||
import {ElementRef} from '../linker/element_ref';
|
||||
import {TemplateRef} from '../linker/template_ref';
|
||||
import {ViewContainerRef} from '../linker/view_container_ref';
|
||||
import {Renderer} from '../render/api';
|
||||
import * as v1renderer 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, Refs, RootData, ViewData, ViewDefinition, ViewFlags, ViewState, asElementData, asProviderData} from './types';
|
||||
import {checkAndUpdateBinding, dispatchEvent, entryAction, findElementDef, parentDiIndex, setBindingDebugInfo, setCurrentNode, unwrapValue} from './util';
|
||||
import {createChangeDetectorRef, createInjector, createTemplateRef, createViewContainerRef} from './refs';
|
||||
import {BindingDef, BindingType, DepDef, DepFlags, DisposableFn, NodeData, NodeDef, NodeFlags, NodeType, ProviderData, ProviderOutputDef, ProviderType, QueryBindingType, QueryDef, QueryValueType, RootData, Services, ViewData, ViewDefinition, ViewFlags, ViewState, asElementData, asProviderData} from './types';
|
||||
import {checkAndUpdateBinding, dispatchEvent, findElementDef, isComponentView, parentDiIndex, tokenKey, unwrapValue} from './util';
|
||||
|
||||
const _tokenKeyCache = new Map<any, string>();
|
||||
|
||||
const RendererTokenKey = tokenKey(Renderer);
|
||||
const RendererV1TokenKey = tokenKey(v1renderer.Renderer);
|
||||
const ElementRefTokenKey = tokenKey(ElementRef);
|
||||
const ViewContainerRefTokenKey = tokenKey(ViewContainerRef);
|
||||
const TemplateRefTokenKey = tokenKey(TemplateRef);
|
||||
@ -119,23 +115,13 @@ export function _providerDef(
|
||||
};
|
||||
}
|
||||
|
||||
export function tokenKey(token: any): string {
|
||||
let key = _tokenKeyCache.get(token);
|
||||
if (!key) {
|
||||
key = stringify(token) + '_' + _tokenKeyCache.size;
|
||||
_tokenKeyCache.set(token, key);
|
||||
}
|
||||
return key;
|
||||
}
|
||||
|
||||
export function createProviderInstance(view: ViewData, def: NodeDef): any {
|
||||
const providerDef = def.provider;
|
||||
return def.flags & NodeFlags.LazyProvider ? NOT_CREATED : createInstance(view, def);
|
||||
}
|
||||
|
||||
function eventHandlerClosure(view: ViewData, index: number, eventName: string) {
|
||||
return entryAction(
|
||||
EntryAction.HandleEvent, (event: any) => dispatchEvent(view, index, eventName, event));
|
||||
return (event: any) => dispatchEvent(view, index, eventName, event);
|
||||
}
|
||||
|
||||
export function checkAndUpdateProviderInline(
|
||||
@ -310,18 +296,24 @@ export function resolveDep(
|
||||
while (view) {
|
||||
const elDef = view.def.nodes[elIndex];
|
||||
switch (tokenKey) {
|
||||
case RendererTokenKey:
|
||||
if (view.renderer) {
|
||||
return view.renderer;
|
||||
} else {
|
||||
return Injector.NULL.get(depDef.token, notFoundValue);
|
||||
case RendererV1TokenKey: {
|
||||
let compView = view;
|
||||
while (compView && !isComponentView(compView)) {
|
||||
compView = compView.parent;
|
||||
}
|
||||
const rootRenderer: v1renderer.RootRenderer =
|
||||
view.root.injector.get(v1renderer.RootRenderer);
|
||||
|
||||
// Note: Don't fill in the styles as they have been installed already!
|
||||
return rootRenderer.renderComponent(new v1renderer.RenderComponentType(
|
||||
view.def.component.id, '', 0, view.def.component.encapsulation, [], {}));
|
||||
}
|
||||
case ElementRefTokenKey:
|
||||
return new ElementRef(asElementData(view, elIndex).renderElement);
|
||||
case ViewContainerRefTokenKey:
|
||||
return Refs.createViewContainerRef(view, elIndex);
|
||||
return createViewContainerRef(view, elIndex);
|
||||
case TemplateRefTokenKey:
|
||||
return Refs.createTemplateRef(view, elDef);
|
||||
return createTemplateRef(view, elDef);
|
||||
case ChangeDetectorRefTokenKey:
|
||||
let cdView = view;
|
||||
// If we are still checking dependencies on the initial element...
|
||||
@ -331,10 +323,9 @@ export function resolveDep(
|
||||
cdView = asProviderData(view, requestNodeIndex).componentView;
|
||||
}
|
||||
}
|
||||
// A ViewRef is also a ChangeDetectorRef
|
||||
return Refs.createViewRef(cdView);
|
||||
return createChangeDetectorRef(cdView);
|
||||
case InjectorRefTokenKey:
|
||||
return Refs.createInjector(view, elIndex);
|
||||
return createInjector(view, elIndex);
|
||||
default:
|
||||
const providerIndex = elDef.element.providerIndices[tokenKey];
|
||||
if (providerIndex != null) {
|
||||
@ -374,12 +365,6 @@ function checkAndUpdateProp(
|
||||
// the user passed in the property name as an object has to `providerDef`,
|
||||
// so Closure Compiler will have renamed the property correctly already.
|
||||
provider[propName] = value;
|
||||
|
||||
if (isDevMode() && (view.def.flags & ViewFlags.DirectDom) === 0) {
|
||||
setBindingDebugInfo(
|
||||
view.renderer, asElementData(view, def.parent).renderElement, binding.nonMinifiedName,
|
||||
value);
|
||||
}
|
||||
if (change) {
|
||||
changes = changes || {};
|
||||
changes[binding.nonMinifiedName] = change;
|
||||
@ -399,7 +384,7 @@ export function callLifecycleHooksChildrenFirst(view: ViewData, lifecycles: Node
|
||||
const nodeIndex = nodeDef.index;
|
||||
if (nodeDef.flags & lifecycles) {
|
||||
// a leaf
|
||||
setCurrentNode(view, nodeIndex);
|
||||
Services.setCurrentNode(view, nodeIndex);
|
||||
callProviderLifecycles(asProviderData(view, nodeIndex).instance, nodeDef.flags & lifecycles);
|
||||
} else if ((nodeDef.childFlags & lifecycles) === 0) {
|
||||
// a parent with leafs
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {resolveDep, tokenKey} from './provider';
|
||||
import {BindingDef, BindingType, DepDef, DepFlags, NodeData, NodeDef, NodeType, ProviderData, PureExpressionData, PureExpressionType, ViewData, asPureExpressionData} from './types';
|
||||
import {checkAndUpdateBinding, unwrapValue} from './util';
|
||||
import {BindingDef, BindingType, DepDef, DepFlags, NodeData, NodeDef, NodeType, ProviderData, PureExpressionData, PureExpressionType, Services, ViewData, asPureExpressionData} from './types';
|
||||
import {checkAndUpdateBinding, tokenKey, unwrapValue} from './util';
|
||||
|
||||
export function purePipeDef(pipeToken: any, argCount: number): NodeDef {
|
||||
return _pureExpressionDef(
|
||||
@ -64,7 +63,7 @@ function _pureExpressionDef(
|
||||
|
||||
export function createPureExpression(view: ViewData, def: NodeDef): PureExpressionData {
|
||||
const pipe = def.pureExpression.pipeDep ?
|
||||
resolveDep(view, def.index, def.parent, def.pureExpression.pipeDep) :
|
||||
Services.resolveDep(view, def.index, def.parent, def.pureExpression.pipeDep) :
|
||||
undefined;
|
||||
return {value: undefined, pipe};
|
||||
}
|
||||
@ -98,6 +97,7 @@ export function checkAndUpdatePureExpressionInline(
|
||||
if (checkAndUpdateBinding(view, def, 0, v0)) changed = true;
|
||||
}
|
||||
|
||||
const data = asPureExpressionData(view, def.index);
|
||||
if (changed) {
|
||||
v0 = unwrapValue(v0);
|
||||
v1 = unwrapValue(v1);
|
||||
@ -110,7 +110,6 @@ export function checkAndUpdatePureExpressionInline(
|
||||
v8 = unwrapValue(v8);
|
||||
v9 = unwrapValue(v9);
|
||||
|
||||
const data = asPureExpressionData(view, def.index);
|
||||
let value: any;
|
||||
switch (def.pureExpression.type) {
|
||||
case PureExpressionType.Array:
|
||||
@ -202,6 +201,7 @@ export function checkAndUpdatePureExpressionInline(
|
||||
}
|
||||
data.value = value;
|
||||
}
|
||||
return data.value;
|
||||
}
|
||||
|
||||
export function checkAndUpdatePureExpressionDynamic(view: ViewData, def: NodeDef, values: any[]) {
|
||||
@ -214,8 +214,8 @@ export function checkAndUpdatePureExpressionDynamic(view: ViewData, def: NodeDef
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
const data = asPureExpressionData(view, def.index);
|
||||
if (changed) {
|
||||
const data = asPureExpressionData(view, def.index);
|
||||
let value: any;
|
||||
switch (def.pureExpression.type) {
|
||||
case PureExpressionType.Array:
|
||||
@ -240,4 +240,5 @@ export function checkAndUpdatePureExpressionDynamic(view: ViewData, def: NodeDef
|
||||
}
|
||||
data.value = value;
|
||||
}
|
||||
return data.value;
|
||||
}
|
||||
|
||||
@ -11,7 +11,8 @@ 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, Refs, ViewData, asElementData, asProviderData, asQueryList} from './types';
|
||||
import {createTemplateRef, createViewContainerRef} from './refs';
|
||||
import {NodeDef, NodeFlags, NodeType, QueryBindingDef, QueryBindingType, QueryDef, QueryValueType, Services, ViewData, asElementData, asProviderData, asQueryList} from './types';
|
||||
import {declaredViewContainer} from './util';
|
||||
|
||||
export function queryDef(
|
||||
@ -158,10 +159,10 @@ export function getQueryValue(view: ViewData, nodeDef: NodeDef, queryId: string)
|
||||
value = new ElementRef(asElementData(view, nodeDef.index).renderElement);
|
||||
break;
|
||||
case QueryValueType.TemplateRef:
|
||||
value = Refs.createTemplateRef(view, nodeDef);
|
||||
value = createTemplateRef(view, nodeDef);
|
||||
break;
|
||||
case QueryValueType.ViewContainerRef:
|
||||
value = Refs.createViewContainerRef(view, nodeDef.index);
|
||||
value = createViewContainerRef(view, nodeDef.index);
|
||||
break;
|
||||
case QueryValueType.Provider:
|
||||
value = asProviderData(view, nodeDef.index).instance;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {isDevMode} from '../application_ref';
|
||||
import {ChangeDetectorRef} from '../change_detection/change_detection';
|
||||
import {Injectable, Injector} from '../di';
|
||||
import {ComponentFactory, ComponentRef} from '../linker/component_factory';
|
||||
@ -13,67 +14,32 @@ import {ElementRef} from '../linker/element_ref';
|
||||
import {TemplateRef} from '../linker/template_ref';
|
||||
import {ViewContainerRef} from '../linker/view_container_ref';
|
||||
import {EmbeddedViewRef, ViewRef} from '../linker/view_ref';
|
||||
import {RenderComponentType, Renderer, RootRenderer} from '../render/api';
|
||||
import * as v1renderer from '../render/api';
|
||||
import {Sanitizer, SecurityContext} from '../security';
|
||||
import {Type} from '../type';
|
||||
|
||||
import {resolveDep, tokenKey} from './provider';
|
||||
import {getQueryValue} from './query';
|
||||
import {DebugContext, DepFlags, ElementData, NodeData, NodeDef, NodeType, Refs, RootData, ViewData, ViewDefinition, ViewDefinitionFactory, ViewState, asElementData, asProviderData} from './types';
|
||||
import {findElementDef, isComponentView, parentDiIndex, renderNode, resolveViewDefinition, rootRenderNodes} from './util';
|
||||
import {checkAndUpdateView, checkNoChangesView, createEmbeddedView, createRootView, destroyView} from './view';
|
||||
import {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView} from './view_attach';
|
||||
import {DirectDomRenderer, LegacyRendererAdapter} from './renderer';
|
||||
import {ArgumentType, BindingType, DebugContext, DepFlags, ElementData, NodeCheckFn, NodeData, NodeDef, NodeType, RendererV2, RootData, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewState, asElementData, asProviderData} from './types';
|
||||
import {findElementDef, isComponentView, parentDiIndex, renderNode, resolveViewDefinition, rootRenderNodes, tokenKey} from './util';
|
||||
|
||||
const EMPTY_CONTEXT = new Object();
|
||||
|
||||
export function createRefs() {
|
||||
return new Refs_();
|
||||
}
|
||||
|
||||
export class Refs_ implements Refs {
|
||||
createComponentFactory(selector: string, viewDefFactory: ViewDefinitionFactory):
|
||||
ComponentFactory<any> {
|
||||
return new ComponentFactory_(selector, viewDefFactory);
|
||||
}
|
||||
createViewRef(data: ViewData): ViewRef { return new ViewRef_(data); }
|
||||
createViewContainerRef(view: ViewData, elIndex: number): ViewContainerRef {
|
||||
return new ViewContainerRef_(view, elIndex);
|
||||
}
|
||||
createTemplateRef(parentView: ViewData, def: NodeDef): TemplateRef<any> {
|
||||
return new TemplateRef_(parentView, def);
|
||||
}
|
||||
createInjector(view: ViewData, elIndex: number): Injector { return new Injector_(view, elIndex); }
|
||||
createDebugContext(view: ViewData, nodeIndex: number): DebugContext {
|
||||
return new DebugContext_(view, nodeIndex);
|
||||
}
|
||||
export function createComponentFactory(
|
||||
selector: string, componentType: Type<any>,
|
||||
viewDefFactory: ViewDefinitionFactory): ComponentFactory<any> {
|
||||
return new ComponentFactory_(selector, componentType, viewDefFactory);
|
||||
}
|
||||
|
||||
class ComponentFactory_ implements ComponentFactory<any> {
|
||||
/**
|
||||
* Only needed so that we can implement ComponentFactory
|
||||
* We are not renaming this field as the old ComponentFactory is using it.
|
||||
* @internal */
|
||||
_viewClass: any;
|
||||
|
||||
private _viewDef: ViewDefinition;
|
||||
private _componentNodeIndex: number;
|
||||
|
||||
constructor(public selector: string, viewDefFactory: ViewDefinitionFactory) {
|
||||
const viewDef = this._viewDef = resolveViewDefinition(viewDefFactory);
|
||||
const len = viewDef.nodes.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
const nodeDef = viewDef.nodes[i];
|
||||
if (nodeDef.provider && nodeDef.provider.component) {
|
||||
this._componentNodeIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this._componentNodeIndex == null) {
|
||||
throw new Error(`Illegal State: Could not find a component in the view definition!`);
|
||||
}
|
||||
}
|
||||
|
||||
get componentType(): Type<any> {
|
||||
return this._viewDef.nodes[this._componentNodeIndex].provider.value;
|
||||
constructor(
|
||||
public selector: string, public componentType: Type<any>,
|
||||
_viewDefFactory: ViewDefinitionFactory) {
|
||||
this._viewClass = _viewDefFactory;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -82,29 +48,28 @@ class ComponentFactory_ implements ComponentFactory<any> {
|
||||
create(
|
||||
injector: Injector, projectableNodes: any[][] = null,
|
||||
rootSelectorOrNode: string|any = null): ComponentRef<any> {
|
||||
if (!projectableNodes) {
|
||||
projectableNodes = [];
|
||||
const viewDef = resolveViewDefinition(this._viewClass);
|
||||
let componentNodeIndex: number;
|
||||
const len = viewDef.nodes.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
const nodeDef = viewDef.nodes[i];
|
||||
if (nodeDef.provider && nodeDef.provider.component) {
|
||||
componentNodeIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!rootSelectorOrNode) {
|
||||
rootSelectorOrNode = this.selector;
|
||||
if (componentNodeIndex == null) {
|
||||
throw new Error(`Illegal State: Could not find a component in the view definition!`);
|
||||
}
|
||||
const renderer = injector.get(RootRenderer);
|
||||
const sanitizer = injector.get(Sanitizer);
|
||||
|
||||
const root: RootData =
|
||||
{injector, projectableNodes, selectorOrNode: rootSelectorOrNode, sanitizer, renderer};
|
||||
|
||||
const view = createRootView(root, this._viewDef, EMPTY_CONTEXT);
|
||||
const component = asProviderData(view, this._componentNodeIndex).instance;
|
||||
return new ComponentRef_(view, component);
|
||||
const view = Services.createRootView(
|
||||
injector, projectableNodes || [], rootSelectorOrNode, viewDef, EMPTY_CONTEXT);
|
||||
const component = asProviderData(view, componentNodeIndex).instance;
|
||||
return new ComponentRef_(view, new ViewRef_(view), component);
|
||||
}
|
||||
}
|
||||
|
||||
class ComponentRef_ implements ComponentRef<any> {
|
||||
private _viewRef: ViewRef_;
|
||||
constructor(private _view: ViewData, private _component: any) {
|
||||
this._viewRef = new ViewRef_(_view);
|
||||
}
|
||||
constructor(private _view: ViewData, private _viewRef: ViewRef, private _component: any) {}
|
||||
get location(): ElementRef { return new ElementRef(asElementData(this._view, 0).renderElement); }
|
||||
get injector(): Injector { return new Injector_(this._view, 0); }
|
||||
get instance(): any { return this._component; };
|
||||
@ -116,6 +81,10 @@ class ComponentRef_ implements ComponentRef<any> {
|
||||
onDestroy(callback: Function): void { this._viewRef.onDestroy(callback); }
|
||||
}
|
||||
|
||||
export function createViewContainerRef(view: ViewData, elIndex: number): ViewContainerRef {
|
||||
return new ViewContainerRef_(view, elIndex);
|
||||
}
|
||||
|
||||
class ViewContainerRef_ implements ViewContainerRef {
|
||||
private _data: ElementData;
|
||||
constructor(private _view: ViewData, private _elIndex: number) {
|
||||
@ -139,8 +108,8 @@ class ViewContainerRef_ implements ViewContainerRef {
|
||||
clear(): void {
|
||||
const len = this._data.embeddedViews.length;
|
||||
for (let i = len - 1; i >= 0; i--) {
|
||||
const view = detachEmbeddedView(this._data, i);
|
||||
destroyView(view);
|
||||
const view = Services.detachEmbeddedView(this._data, i);
|
||||
Services.destroyView(view);
|
||||
}
|
||||
}
|
||||
|
||||
@ -166,13 +135,13 @@ class ViewContainerRef_ implements ViewContainerRef {
|
||||
|
||||
insert(viewRef: ViewRef, index?: number): ViewRef {
|
||||
const viewData = (<ViewRef_>viewRef)._view;
|
||||
attachEmbeddedView(this._data, index, viewData);
|
||||
Services.attachEmbeddedView(this._data, index, viewData);
|
||||
return viewRef;
|
||||
}
|
||||
|
||||
move(viewRef: ViewRef_, currentIndex: number): ViewRef {
|
||||
const previousIndex = this._data.embeddedViews.indexOf(viewRef._view);
|
||||
moveEmbeddedView(this._data, previousIndex, currentIndex);
|
||||
Services.moveEmbeddedView(this._data, previousIndex, currentIndex);
|
||||
return viewRef;
|
||||
}
|
||||
|
||||
@ -181,17 +150,21 @@ class ViewContainerRef_ implements ViewContainerRef {
|
||||
}
|
||||
|
||||
remove(index?: number): void {
|
||||
const viewData = detachEmbeddedView(this._data, index);
|
||||
destroyView(viewData);
|
||||
const viewData = Services.detachEmbeddedView(this._data, index);
|
||||
Services.destroyView(viewData);
|
||||
}
|
||||
|
||||
detach(index?: number): ViewRef {
|
||||
const view = this.get(index);
|
||||
detachEmbeddedView(this._data, index);
|
||||
Services.detachEmbeddedView(this._data, index);
|
||||
return view;
|
||||
}
|
||||
}
|
||||
|
||||
export function createChangeDetectorRef(view: ViewData): ChangeDetectorRef {
|
||||
return new ViewRef_(view);
|
||||
}
|
||||
|
||||
class ViewRef_ implements EmbeddedViewRef<any> {
|
||||
/** @internal */
|
||||
_view: ViewData;
|
||||
@ -206,20 +179,24 @@ class ViewRef_ implements EmbeddedViewRef<any> {
|
||||
|
||||
markForCheck(): void { this.reattach(); }
|
||||
detach(): void { this._view.state &= ~ViewState.ChecksEnabled; }
|
||||
detectChanges(): void { checkAndUpdateView(this._view); }
|
||||
checkNoChanges(): void { checkNoChangesView(this._view); }
|
||||
detectChanges(): void { Services.checkAndUpdateView(this._view); }
|
||||
checkNoChanges(): void { Services.checkNoChangesView(this._view); }
|
||||
|
||||
reattach(): void { this._view.state |= ViewState.ChecksEnabled; }
|
||||
onDestroy(callback: Function) { this._view.disposables.push(<any>callback); }
|
||||
|
||||
destroy() { destroyView(this._view); }
|
||||
destroy() { Services.destroyView(this._view); }
|
||||
}
|
||||
|
||||
export function createTemplateRef(view: ViewData, def: NodeDef): TemplateRef<any> {
|
||||
return new TemplateRef_(view, def);
|
||||
}
|
||||
|
||||
class TemplateRef_ implements TemplateRef<any> {
|
||||
constructor(private _parentView: ViewData, private _def: NodeDef) {}
|
||||
|
||||
createEmbeddedView(context: any): EmbeddedViewRef<any> {
|
||||
return new ViewRef_(createEmbeddedView(this._parentView, this._def, context));
|
||||
return new ViewRef_(Services.createEmbeddedView(this._parentView, this._def, context));
|
||||
}
|
||||
|
||||
get elementRef(): ElementRef {
|
||||
@ -227,91 +204,15 @@ class TemplateRef_ implements TemplateRef<any> {
|
||||
}
|
||||
}
|
||||
|
||||
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 = Injector.THROW_IF_NOT_FOUND): any {
|
||||
return resolveDep(
|
||||
return Services.resolveDep(
|
||||
this.view, undefined, this.elIndex,
|
||||
{flags: DepFlags.None, token, tokenKey: tokenKey(token)}, notFoundValue);
|
||||
}
|
||||
}
|
||||
|
||||
class DebugContext_ implements DebugContext {
|
||||
private nodeDef: NodeDef;
|
||||
private elDef: NodeDef;
|
||||
constructor(public view: ViewData, public nodeIndex: number) {
|
||||
if (nodeIndex == null) {
|
||||
this.nodeIndex = nodeIndex = view.parentIndex;
|
||||
this.view = view = view.parent;
|
||||
}
|
||||
this.nodeDef = view.def.nodes[nodeIndex];
|
||||
this.elDef = findElementDef(view, nodeIndex);
|
||||
}
|
||||
get injector(): Injector { return new Injector_(this.view, this.elDef.index); }
|
||||
get component(): any { return this.view.component; }
|
||||
get providerTokens(): any[] {
|
||||
const tokens: any[] = [];
|
||||
if (this.elDef) {
|
||||
for (let i = this.elDef.index + 1; i <= this.elDef.index + this.elDef.childCount; i++) {
|
||||
const childDef = this.view.def.nodes[i];
|
||||
if (childDef.type === NodeType.Provider) {
|
||||
tokens.push(childDef.provider.token);
|
||||
} else {
|
||||
i += childDef.childCount;
|
||||
}
|
||||
}
|
||||
}
|
||||
return tokens;
|
||||
}
|
||||
get references(): {[key: string]: any} {
|
||||
const references: {[key: string]: any} = {};
|
||||
if (this.elDef) {
|
||||
collectReferences(this.view, this.elDef, references);
|
||||
|
||||
for (let i = this.elDef.index + 1; i <= this.elDef.index + this.elDef.childCount; i++) {
|
||||
const childDef = this.view.def.nodes[i];
|
||||
if (childDef.type === NodeType.Provider) {
|
||||
collectReferences(this.view, childDef, references);
|
||||
} else {
|
||||
i += childDef.childCount;
|
||||
}
|
||||
}
|
||||
}
|
||||
return references;
|
||||
}
|
||||
get context(): any { return this.view.context; }
|
||||
get source(): string {
|
||||
if (this.nodeDef.type === NodeType.Text) {
|
||||
return this.nodeDef.text.source;
|
||||
} else {
|
||||
return this.elDef.element.source;
|
||||
}
|
||||
}
|
||||
get componentRenderElement() {
|
||||
const elData = findHostElement(this.view);
|
||||
return elData ? elData.renderElement : undefined;
|
||||
}
|
||||
get renderNode(): any {
|
||||
let nodeDef = this.nodeDef.type === NodeType.Text ? this.nodeDef : this.elDef;
|
||||
return renderNode(this.view, nodeDef);
|
||||
}
|
||||
}
|
||||
|
||||
function findHostElement(view: ViewData): ElementData {
|
||||
while (view && !isComponentView(view)) {
|
||||
view = view.parent;
|
||||
}
|
||||
if (view.parent) {
|
||||
const hostData = asElementData(view.parent, view.parentIndex);
|
||||
return hostData;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function collectReferences(view: ViewData, nodeDef: NodeDef, references: {[key: string]: any}) {
|
||||
for (let queryId in nodeDef.matchedQueries) {
|
||||
if (queryId.startsWith('#')) {
|
||||
references[queryId.slice(1)] = getQueryValue(view, nodeDef, queryId);
|
||||
}
|
||||
}
|
||||
}
|
||||
136
modules/@angular/core/src/view/renderer.ts
Normal file
136
modules/@angular/core/src/view/renderer.ts
Normal file
@ -0,0 +1,136 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ViewEncapsulation} from '../metadata/view';
|
||||
import * as v1 from '../render/api';
|
||||
|
||||
import {DebugContext, RendererV2} from './types';
|
||||
|
||||
export class DirectDomRenderer implements RendererV2 {
|
||||
createElement(name: string): any { return document.createElement(name); }
|
||||
createComment(value: string): any { return document.createComment(value); }
|
||||
createText(value: string): any { return document.createTextNode(value); }
|
||||
appendChild(parent: any, newChild: any): void { parent.appendChild(newChild); }
|
||||
insertBefore(parent: any, newChild: any, refChild: any): void {
|
||||
if (parent) {
|
||||
parent.insertBefore(newChild, refChild);
|
||||
}
|
||||
}
|
||||
removeChild(parent: any, oldChild: any): void {
|
||||
if (parent) {
|
||||
parent.removeChild(oldChild);
|
||||
}
|
||||
}
|
||||
selectRootElement(selectorOrNode: string|any, debugInfo?: DebugContext): any {
|
||||
let el: any;
|
||||
if (typeof selectorOrNode === 'string') {
|
||||
el = document.querySelector(selectorOrNode);
|
||||
} else {
|
||||
el = selectorOrNode;
|
||||
}
|
||||
el.textContent = '';
|
||||
return el;
|
||||
}
|
||||
parentNode(node: any): any { return node.parentNode; }
|
||||
nextSibling(node: any): any { return node.nextSiblibng; }
|
||||
setAttribute(el: any, name: string, value: string): void { return el.setAttribute(name, value); }
|
||||
removeAttribute(el: any, name: string): void { el.removeAttribute(name); }
|
||||
addClass(el: any, name: string): void { el.classList.add(name); }
|
||||
removeClass(el: any, name: string): void { el.classList.remove(name); }
|
||||
setStyle(el: any, style: string, value: any): void { el.style[style] = value; }
|
||||
removeStyle(el: any, style: string): void {
|
||||
// IE requires '' instead of null
|
||||
// see https://github.com/angular/angular/issues/7916
|
||||
(el.style as any)[style] = '';
|
||||
}
|
||||
setProperty(el: any, name: string, value: any): void { el[name] = value; }
|
||||
setText(node: any, value: string): void { node.nodeValue = value; }
|
||||
listen(target: any, eventName: string, callback: (event: any) => boolean): () => void {
|
||||
let renderTarget: any;
|
||||
switch (target) {
|
||||
case 'window':
|
||||
renderTarget = window;
|
||||
break;
|
||||
case 'document':
|
||||
renderTarget = document;
|
||||
break;
|
||||
default:
|
||||
renderTarget = target;
|
||||
}
|
||||
const closure = (event: any) => {
|
||||
if (callback(event) === false) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
renderTarget.addEventListener(eventName, closure);
|
||||
return () => renderTarget.removeEventListener(eventName, closure);
|
||||
}
|
||||
}
|
||||
|
||||
const EMPTY_V1_RENDER_COMPONENT_TYPE =
|
||||
new v1.RenderComponentType('EMPTY', '', 0, ViewEncapsulation.None, [], {});
|
||||
|
||||
/**
|
||||
* A temporal implementation of `Renderer` until we migrated our current renderer
|
||||
* in all packages to the new API.
|
||||
*
|
||||
* Note that this is not complete, e.g. does not support shadow dom, view encapsulation, ...!
|
||||
*/
|
||||
export class LegacyRendererAdapter implements RendererV2 {
|
||||
private _delegate: v1.Renderer;
|
||||
constructor(rootDelegate: v1.RootRenderer) {
|
||||
this._delegate = rootDelegate.renderComponent(EMPTY_V1_RENDER_COMPONENT_TYPE);
|
||||
}
|
||||
createElement(name: string, debugInfo?: DebugContext): any {
|
||||
return this._delegate.createElement(null, name, debugInfo);
|
||||
}
|
||||
createComment(value: string, debugInfo?: DebugContext): any {
|
||||
return this._delegate.createTemplateAnchor(null, debugInfo);
|
||||
}
|
||||
createText(value: string, debugInfo?: DebugContext): any {
|
||||
return this._delegate.createText(null, value, debugInfo);
|
||||
}
|
||||
appendChild(parent: any, newChild: any): void { this._delegate.projectNodes(parent, [newChild]); }
|
||||
insertBefore(parent: any, newChild: any, refChild: any): void {
|
||||
const beforeSibling = refChild.nextSiblingOf ? refChild.nextSiblingOf : refChild;
|
||||
this._delegate.attachViewAfter(beforeSibling, [newChild]);
|
||||
}
|
||||
removeChild(parent: any, oldChild: any): void {
|
||||
if (parent) {
|
||||
this._delegate.detachView([oldChild]);
|
||||
}
|
||||
}
|
||||
selectRootElement(selectorOrNode: any, debugInfo?: DebugContext): any {
|
||||
return this._delegate.selectRootElement(selectorOrNode, debugInfo);
|
||||
}
|
||||
parentNode(node: any): any { return {parentOf: node}; }
|
||||
nextSibling(node: any): any { return {nextSiblingOf: node}; }
|
||||
setAttribute(el: any, name: string, value: string): void {
|
||||
this._delegate.setElementAttribute(el, name, value);
|
||||
}
|
||||
removeAttribute(el: any, name: string): void {
|
||||
this._delegate.setElementAttribute(el, name, null);
|
||||
}
|
||||
addClass(el: any, name: string): void { this._delegate.setElementClass(el, name, true); }
|
||||
removeClass(el: any, name: string): void { this._delegate.setElementClass(el, name, false); }
|
||||
setStyle(el: any, style: string, value: any): void {
|
||||
this._delegate.setElementStyle(el, style, value);
|
||||
}
|
||||
removeStyle(el: any, style: string): void { this._delegate.setElementStyle(el, style, null); }
|
||||
setProperty(el: any, name: string, value: any): void {
|
||||
this._delegate.setElementProperty(el, name, value);
|
||||
}
|
||||
setText(node: any, value: string): void { this._delegate.setText(node, value); }
|
||||
listen(target: any, eventName: string, callback: (event: any) => boolean): () => void {
|
||||
if (typeof target === 'string') {
|
||||
return <any>this._delegate.listenGlobal(target, eventName, callback);
|
||||
} else {
|
||||
return <any>this._delegate.listen(target, eventName, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
360
modules/@angular/core/src/view/services.ts
Normal file
360
modules/@angular/core/src/view/services.ts
Normal file
@ -0,0 +1,360 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {isDevMode} from '../application_ref';
|
||||
import {Injectable, Injector} from '../di';
|
||||
import {looseIdentical} from '../facade/lang';
|
||||
import {ElementRef} from '../linker/element_ref';
|
||||
import * as v1renderer from '../render/api';
|
||||
import {Sanitizer, SecurityContext} from '../security';
|
||||
import {Type} from '../type';
|
||||
|
||||
import {isViewDebugError, viewDestroyedError, viewWrappedDebugError} from './errors';
|
||||
import {resolveDep} from './provider';
|
||||
import {getQueryValue} from './query';
|
||||
import {createInjector} from './refs';
|
||||
import {DirectDomRenderer, LegacyRendererAdapter} from './renderer';
|
||||
import {ArgumentType, BindingType, DebugContext, DepFlags, ElementData, NodeCheckFn, NodeData, NodeDef, NodeType, RendererV2, RootData, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewState, asElementData, asProviderData} from './types';
|
||||
import {checkBinding, findElementDef, isComponentView, parentDiIndex, renderNode, resolveViewDefinition, rootRenderNodes} from './util';
|
||||
import {checkAndUpdateView, checkNoChangesView, createEmbeddedView, createRootView, destroyView} from './view';
|
||||
import {attachEmbeddedView, detachEmbeddedView, moveEmbeddedView} from './view_attach';
|
||||
|
||||
let initialized = false;
|
||||
|
||||
export function initServicesIfNeeded() {
|
||||
if (initialized) {
|
||||
return;
|
||||
}
|
||||
initialized = true;
|
||||
const services = isDevMode() ? createDebugServices() : createProdServices();
|
||||
Services.setCurrentNode = services.setCurrentNode;
|
||||
Services.createRootView = services.createRootView;
|
||||
Services.createEmbeddedView = services.createEmbeddedView;
|
||||
Services.checkAndUpdateView = services.checkAndUpdateView;
|
||||
Services.checkNoChangesView = services.checkNoChangesView;
|
||||
Services.destroyView = services.destroyView;
|
||||
Services.attachEmbeddedView = services.attachEmbeddedView,
|
||||
Services.detachEmbeddedView = services.detachEmbeddedView,
|
||||
Services.moveEmbeddedView = services.moveEmbeddedView;
|
||||
Services.resolveDep = services.resolveDep;
|
||||
Services.createDebugContext = services.createDebugContext;
|
||||
Services.handleEvent = services.handleEvent;
|
||||
Services.updateView = services.updateView;
|
||||
}
|
||||
|
||||
function createProdServices() {
|
||||
return {
|
||||
setCurrentNode: () => {},
|
||||
createRootView: createProdRootView,
|
||||
createEmbeddedView: createEmbeddedView,
|
||||
checkAndUpdateView: checkAndUpdateView,
|
||||
checkNoChangesView: checkNoChangesView,
|
||||
destroyView: destroyView,
|
||||
attachEmbeddedView: attachEmbeddedView,
|
||||
detachEmbeddedView: detachEmbeddedView,
|
||||
moveEmbeddedView: moveEmbeddedView,
|
||||
resolveDep: resolveDep,
|
||||
createDebugContext: (view: ViewData, nodeIndex: number) => new DebugContext_(view, nodeIndex),
|
||||
handleEvent: (view: ViewData, nodeIndex: number, eventName: string, event: any) =>
|
||||
view.def.handleEvent(view, nodeIndex, eventName, event),
|
||||
updateView: (check: NodeCheckFn, view: ViewData) => view.def.update(check, view)
|
||||
};
|
||||
}
|
||||
|
||||
function createDebugServices() {
|
||||
return {
|
||||
setCurrentNode: debugSetCurrentNode,
|
||||
createRootView: debugCreateRootView,
|
||||
createEmbeddedView: debugCreateEmbeddedView,
|
||||
checkAndUpdateView: debugCheckAndUpdateView,
|
||||
checkNoChangesView: debugCheckNoChangesView,
|
||||
destroyView: debugDestroyView,
|
||||
attachEmbeddedView: attachEmbeddedView,
|
||||
detachEmbeddedView: detachEmbeddedView,
|
||||
moveEmbeddedView: moveEmbeddedView,
|
||||
resolveDep: resolveDep,
|
||||
createDebugContext: (view: ViewData, nodeIndex: number) => new DebugContext_(view, nodeIndex),
|
||||
handleEvent: debugHandleEvent,
|
||||
updateView: debugUpdateView
|
||||
};
|
||||
}
|
||||
|
||||
function createProdRootView(
|
||||
injector: Injector, projectableNodes: any[][], rootSelectorOrNode: string | any,
|
||||
def: ViewDefinition, context?: any): ViewData {
|
||||
return createRootView(
|
||||
createRootData(injector, projectableNodes, rootSelectorOrNode), def, context);
|
||||
}
|
||||
|
||||
function debugCreateRootView(
|
||||
injector: Injector, projectableNodes: any[][], rootSelectorOrNode: string | any,
|
||||
def: ViewDefinition, context?: any): ViewData {
|
||||
const root = createRootData(injector, projectableNodes, rootSelectorOrNode);
|
||||
const debugRoot: RootData = {
|
||||
injector: root.injector,
|
||||
projectableNodes: root.projectableNodes,
|
||||
element: root.element,
|
||||
renderer: new DebugRenderer(root.renderer),
|
||||
sanitizer: root.sanitizer
|
||||
};
|
||||
return callWithDebugContext('create', createRootView, null, [debugRoot, def, context]);
|
||||
}
|
||||
|
||||
function createRootData(
|
||||
injector: Injector, projectableNodes: any[][], rootSelectorOrNode: any): RootData {
|
||||
const sanitizer = injector.get(Sanitizer);
|
||||
// TODO(tbosch): once the new renderer interface is implemented via platform-browser,
|
||||
// just get it via the injector and drop LegacyRendererAdapter and DirectDomRenderer.
|
||||
const renderer = isDevMode() ? new LegacyRendererAdapter(injector.get(v1renderer.RootRenderer)) :
|
||||
new DirectDomRenderer();
|
||||
const rootElement =
|
||||
rootSelectorOrNode ? renderer.selectRootElement(rootSelectorOrNode) : undefined;
|
||||
return {injector, projectableNodes, element: rootElement, sanitizer, renderer};
|
||||
}
|
||||
|
||||
function debugCreateEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData {
|
||||
return callWithDebugContext('create', createEmbeddedView, null, [parent, anchorDef, context]);
|
||||
}
|
||||
|
||||
function debugCheckAndUpdateView(view: ViewData) {
|
||||
return callWithDebugContext('detectChanges', checkAndUpdateView, null, [view]);
|
||||
}
|
||||
|
||||
function debugCheckNoChangesView(view: ViewData) {
|
||||
return callWithDebugContext('checkNoChanges', checkNoChangesView, null, [view]);
|
||||
}
|
||||
|
||||
function debugDestroyView(view: ViewData) {
|
||||
return callWithDebugContext('destroyView', destroyView, null, [view]);
|
||||
}
|
||||
|
||||
|
||||
let _currentAction: string;
|
||||
let _currentView: ViewData;
|
||||
let _currentNodeIndex: number;
|
||||
|
||||
function debugSetCurrentNode(view: ViewData, nodeIndex: number) {
|
||||
_currentView = view;
|
||||
_currentNodeIndex = nodeIndex;
|
||||
}
|
||||
|
||||
function debugHandleEvent(view: ViewData, nodeIndex: number, eventName: string, event: any) {
|
||||
if (view.state & ViewState.Destroyed) {
|
||||
throw viewDestroyedError(_currentAction);
|
||||
}
|
||||
debugSetCurrentNode(view, nodeIndex);
|
||||
return callWithDebugContext(
|
||||
'handleEvent', view.def.handleEvent, null, [view, nodeIndex, eventName, event]);
|
||||
}
|
||||
|
||||
function debugUpdateView(check: NodeCheckFn, view: ViewData) {
|
||||
if (view.state & ViewState.Destroyed) {
|
||||
throw viewDestroyedError(_currentAction);
|
||||
}
|
||||
debugSetCurrentNode(view, nextNodeIndexWithBinding(view, 0));
|
||||
return view.def.update(debugCheckFn, view);
|
||||
|
||||
function debugCheckFn(
|
||||
view: ViewData, nodeIndex: number, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
|
||||
v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any) {
|
||||
const values = argStyle === ArgumentType.Dynamic ? v0 : [].slice.call(arguments, 3);
|
||||
const nodeDef = view.def.nodes[nodeIndex];
|
||||
for (let i = 0; i < nodeDef.bindings.length; i++) {
|
||||
const binding = nodeDef.bindings[i];
|
||||
const value = values[i];
|
||||
if ((binding.type === BindingType.ElementProperty ||
|
||||
binding.type === BindingType.ProviderProperty) &&
|
||||
checkBinding(view, nodeDef, i, value)) {
|
||||
const elIndex = nodeDef.type === NodeType.Provider ? nodeDef.parent : nodeDef.index;
|
||||
setBindingDebugInfo(
|
||||
view.root.renderer, asElementData(view, elIndex).renderElement, binding.nonMinifiedName,
|
||||
value);
|
||||
}
|
||||
}
|
||||
const result = check(view, nodeIndex, <any>argStyle, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
|
||||
debugSetCurrentNode(view, nextNodeIndexWithBinding(view, nodeIndex));
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
function setBindingDebugInfo(renderer: RendererV2, renderNode: any, propName: string, value: any) {
|
||||
try {
|
||||
renderer.setAttribute(
|
||||
renderNode, `ng-reflect-${camelCaseToDashCase(propName)}`, value ? value.toString() : null);
|
||||
} catch (e) {
|
||||
renderer.setAttribute(
|
||||
renderNode, `ng-reflect-${camelCaseToDashCase(propName)}`,
|
||||
'[ERROR] Exception while trying to serialize the value');
|
||||
}
|
||||
}
|
||||
|
||||
const CAMEL_CASE_REGEXP = /([A-Z])/g;
|
||||
|
||||
function camelCaseToDashCase(input: string): string {
|
||||
return input.replace(CAMEL_CASE_REGEXP, (...m: any[]) => '-' + m[1].toLowerCase());
|
||||
}
|
||||
|
||||
function nextNodeIndexWithBinding(view: ViewData, nodeIndex: number): number {
|
||||
for (let i = nodeIndex; i < view.def.nodes.length; i++) {
|
||||
const nodeDef = view.def.nodes[i];
|
||||
if (nodeDef.bindings && nodeDef.bindings.length) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
||||
class DebugRenderer implements RendererV2 {
|
||||
constructor(private _delegate: RendererV2) {}
|
||||
createElement(name: string): any {
|
||||
return this._delegate.createElement(name, getCurrentDebugContext());
|
||||
}
|
||||
createComment(value: string): any {
|
||||
return this._delegate.createComment(value, getCurrentDebugContext());
|
||||
}
|
||||
createText(value: string): any {
|
||||
return this._delegate.createText(value, getCurrentDebugContext());
|
||||
}
|
||||
appendChild(parent: any, newChild: any): void {
|
||||
return this._delegate.appendChild(parent, newChild);
|
||||
}
|
||||
insertBefore(parent: any, newChild: any, refChild: any): void {
|
||||
return this._delegate.insertBefore(parent, newChild, refChild);
|
||||
}
|
||||
removeChild(parent: any, oldChild: any): void {
|
||||
return this._delegate.removeChild(parent, oldChild);
|
||||
}
|
||||
selectRootElement(selectorOrNode: string|any): any {
|
||||
return this._delegate.selectRootElement(selectorOrNode, getCurrentDebugContext());
|
||||
}
|
||||
parentNode(node: any): any { return this._delegate.parentNode(node); }
|
||||
nextSibling(node: any): any { return this._delegate.nextSibling(node); }
|
||||
setAttribute(el: any, name: string, value: string): void {
|
||||
return this._delegate.setAttribute(el, name, value);
|
||||
}
|
||||
removeAttribute(el: any, name: string): void { return this._delegate.removeAttribute(el, name); }
|
||||
addClass(el: any, name: string): void { return this._delegate.addClass(el, name); }
|
||||
removeClass(el: any, name: string): void { return this._delegate.removeClass(el, name); }
|
||||
setStyle(el: any, style: string, value: any): void {
|
||||
return this._delegate.setStyle(el, style, value);
|
||||
}
|
||||
removeStyle(el: any, style: string): void { return this._delegate.removeStyle(el, style); }
|
||||
setProperty(el: any, name: string, value: any): void {
|
||||
return this._delegate.setProperty(el, name, value);
|
||||
}
|
||||
setText(node: any, value: string): void { return this._delegate.setText(node, value); }
|
||||
listen(target: 'window'|'document'|any, eventName: string, callback: (event: any) => boolean):
|
||||
() => void {
|
||||
return this._delegate.listen(target, eventName, callback);
|
||||
}
|
||||
}
|
||||
|
||||
class DebugContext_ implements DebugContext {
|
||||
private nodeDef: NodeDef;
|
||||
private elDef: NodeDef;
|
||||
constructor(public view: ViewData, public nodeIndex: number) {
|
||||
if (nodeIndex == null) {
|
||||
this.nodeIndex = nodeIndex = view.parentIndex;
|
||||
this.view = view = view.parent;
|
||||
}
|
||||
this.nodeDef = view.def.nodes[nodeIndex];
|
||||
this.elDef = findElementDef(view, nodeIndex);
|
||||
}
|
||||
get injector(): Injector { return createInjector(this.view, this.elDef.index); }
|
||||
get component(): any { return this.view.component; }
|
||||
get providerTokens(): any[] {
|
||||
const tokens: any[] = [];
|
||||
if (this.elDef) {
|
||||
for (let i = this.elDef.index + 1; i <= this.elDef.index + this.elDef.childCount; i++) {
|
||||
const childDef = this.view.def.nodes[i];
|
||||
if (childDef.type === NodeType.Provider) {
|
||||
tokens.push(childDef.provider.token);
|
||||
} else {
|
||||
i += childDef.childCount;
|
||||
}
|
||||
}
|
||||
}
|
||||
return tokens;
|
||||
}
|
||||
get references(): {[key: string]: any} {
|
||||
const references: {[key: string]: any} = {};
|
||||
if (this.elDef) {
|
||||
collectReferences(this.view, this.elDef, references);
|
||||
|
||||
for (let i = this.elDef.index + 1; i <= this.elDef.index + this.elDef.childCount; i++) {
|
||||
const childDef = this.view.def.nodes[i];
|
||||
if (childDef.type === NodeType.Provider) {
|
||||
collectReferences(this.view, childDef, references);
|
||||
} else {
|
||||
i += childDef.childCount;
|
||||
}
|
||||
}
|
||||
}
|
||||
return references;
|
||||
}
|
||||
get context(): any { return this.view.context; }
|
||||
get source(): string {
|
||||
if (this.nodeDef.type === NodeType.Text) {
|
||||
return this.nodeDef.text.source;
|
||||
} else {
|
||||
return this.elDef.element.source;
|
||||
}
|
||||
}
|
||||
get componentRenderElement() {
|
||||
const elData = findHostElement(this.view);
|
||||
return elData ? elData.renderElement : undefined;
|
||||
}
|
||||
get renderNode(): any {
|
||||
let nodeDef = this.nodeDef.type === NodeType.Text ? this.nodeDef : this.elDef;
|
||||
return renderNode(this.view, nodeDef);
|
||||
}
|
||||
}
|
||||
|
||||
function findHostElement(view: ViewData): ElementData {
|
||||
while (view && !isComponentView(view)) {
|
||||
view = view.parent;
|
||||
}
|
||||
if (view.parent) {
|
||||
const hostData = asElementData(view.parent, view.parentIndex);
|
||||
return hostData;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function collectReferences(view: ViewData, nodeDef: NodeDef, references: {[key: string]: any}) {
|
||||
for (let queryId in nodeDef.matchedQueries) {
|
||||
if (queryId.startsWith('#')) {
|
||||
references[queryId.slice(1)] = getQueryValue(view, nodeDef, queryId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function callWithDebugContext(action: string, fn: any, self: any, args: any[]) {
|
||||
const oldAction = _currentAction;
|
||||
const oldView = _currentView;
|
||||
const oldNodeIndex = _currentNodeIndex;
|
||||
try {
|
||||
_currentAction = action;
|
||||
const result = fn.apply(self, args);
|
||||
_currentView = oldView;
|
||||
_currentNodeIndex = oldNodeIndex;
|
||||
_currentAction = oldAction;
|
||||
return result;
|
||||
} catch (e) {
|
||||
if (isViewDebugError(e) || !_currentView) {
|
||||
throw e;
|
||||
}
|
||||
throw viewWrappedDebugError(e, getCurrentDebugContext());
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentDebugContext() {
|
||||
return new DebugContext_(_currentView, _currentNodeIndex);
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
import {isDevMode} from '../application_ref';
|
||||
import {looseIdentical} from '../facade/lang';
|
||||
|
||||
import {BindingDef, BindingType, DebugContext, NodeData, NodeDef, NodeFlags, NodeType, Refs, RootData, TextData, ViewData, ViewFlags, asElementData, asTextData} from './types';
|
||||
import {BindingDef, BindingType, DebugContext, NodeData, NodeDef, NodeFlags, NodeType, RootData, Services, TextData, ViewData, ViewFlags, asElementData, asTextData} from './types';
|
||||
import {checkAndUpdateBinding, sliceErrorStack, unwrapValue} from './util';
|
||||
|
||||
export function textDef(ngContentIndex: number, constants: string[]): NodeDef {
|
||||
@ -53,14 +53,10 @@ export function createText(view: ViewData, renderHost: any, def: NodeDef): TextD
|
||||
const parentNode =
|
||||
def.parent != null ? asElementData(view, def.parent).renderElement : renderHost;
|
||||
let renderNode: any;
|
||||
if (view.renderer) {
|
||||
const debugContext = isDevMode() ? Refs.createDebugContext(view, def.index) : undefined;
|
||||
renderNode = view.renderer.createText(parentNode, def.text.prefix, debugContext);
|
||||
} else {
|
||||
renderNode = document.createTextNode(def.text.prefix);
|
||||
if (parentNode) {
|
||||
parentNode.appendChild(renderNode);
|
||||
}
|
||||
const renderer = view.root.renderer;
|
||||
renderNode = renderer.createText(def.text.prefix);
|
||||
if (parentNode) {
|
||||
renderer.appendChild(parentNode, renderNode);
|
||||
}
|
||||
return {renderText: renderNode};
|
||||
}
|
||||
@ -121,11 +117,7 @@ export function checkAndUpdateTextInline(
|
||||
}
|
||||
value = def.text.prefix + value;
|
||||
const renderNode = asTextData(view, def.index).renderText;
|
||||
if (view.renderer) {
|
||||
view.renderer.setText(renderNode, value);
|
||||
} else {
|
||||
renderNode.nodeValue = value;
|
||||
}
|
||||
view.root.renderer.setText(renderNode, value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -146,11 +138,7 @@ export function checkAndUpdateTextDynamic(view: ViewData, def: NodeDef, values:
|
||||
}
|
||||
value = def.text.prefix + value;
|
||||
const renderNode = asTextData(view, def.index).renderText;
|
||||
if (view.renderer) {
|
||||
view.renderer.setText(renderNode, value);
|
||||
} else {
|
||||
renderNode.nodeValue = value;
|
||||
}
|
||||
view.root.renderer.setText(renderNode, value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,12 +8,12 @@
|
||||
|
||||
import {PipeTransform} from '../change_detection/change_detection';
|
||||
import {Injector} from '../di';
|
||||
import {ComponentFactory} from '../linker/component_factory';
|
||||
import {ComponentRef} from '../linker/component_factory';
|
||||
import {QueryList} from '../linker/query_list';
|
||||
import {TemplateRef} from '../linker/template_ref';
|
||||
import {ViewContainerRef} from '../linker/view_container_ref';
|
||||
import {ViewRef} from '../linker/view_ref';
|
||||
import {RenderComponentType, RenderDebugInfo, Renderer, RootRenderer} from '../render/api';
|
||||
import {ViewEncapsulation} from '../metadata/view';
|
||||
import {Sanitizer, SecurityContext} from '../security';
|
||||
|
||||
// -------------------------------------
|
||||
@ -22,7 +22,7 @@ import {Sanitizer, SecurityContext} from '../security';
|
||||
|
||||
export interface ViewDefinition {
|
||||
flags: ViewFlags;
|
||||
componentType: RenderComponentType;
|
||||
component: ComponentDefinition;
|
||||
update: ViewUpdateFn;
|
||||
handleEvent: ViewHandleEventFn;
|
||||
/**
|
||||
@ -49,10 +49,24 @@ export interface ViewDefinition {
|
||||
|
||||
export type ViewDefinitionFactory = () => ViewDefinition;
|
||||
|
||||
export type ViewUpdateFn = (view: ViewData) => void;
|
||||
export type ViewUpdateFn = (check: NodeCheckFn, view: ViewData) => void;
|
||||
|
||||
export type ViewHandleEventFn =
|
||||
(view: ViewData, nodeIndex: number, eventName: string, event: any) => boolean;
|
||||
// helper functions to create an overloaded function type.
|
||||
export declare function _nodeCheckFn(
|
||||
view: ViewData, nodeIndex: number, argStyle: ArgumentType.Dynamic, values: any[]): any;
|
||||
export declare function _nodeCheckFn(
|
||||
view: ViewData, nodeIndex: number, argStyle: ArgumentType.Inline, v0?: any, v1?: any,
|
||||
v2?: any, v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any):
|
||||
any;
|
||||
|
||||
export type NodeCheckFn = typeof _nodeCheckFn;
|
||||
|
||||
export type ViewHandleEventFn =
|
||||
(view: ViewData, nodeIndex: number, eventName: string, event: any) => boolean;
|
||||
|
||||
export enum ArgumentType {
|
||||
Inline, Dynamic
|
||||
}
|
||||
|
||||
/**
|
||||
* Bitmask for ViewDefintion.flags.
|
||||
@ -63,6 +77,12 @@ export enum ViewFlags {
|
||||
OnPush = 1 << 2
|
||||
}
|
||||
|
||||
export interface ComponentDefinition {
|
||||
id: string;
|
||||
encapsulation: ViewEncapsulation;
|
||||
styles: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* A node definition in the view.
|
||||
*
|
||||
@ -265,7 +285,6 @@ export interface NgContentDef {
|
||||
*/
|
||||
export interface ViewData {
|
||||
def: ViewDefinition;
|
||||
renderer: Renderer;
|
||||
root: RootData;
|
||||
// index of parent element / anchor. Not the index
|
||||
// of the provider with the component view.
|
||||
@ -389,59 +408,103 @@ export function asQueryList(view: ViewData, index: number): QueryList<any> {
|
||||
export interface RootData {
|
||||
injector: Injector;
|
||||
projectableNodes: any[][];
|
||||
selectorOrNode: string|any;
|
||||
renderer: RootRenderer;
|
||||
element: any;
|
||||
renderer: RendererV2;
|
||||
sanitizer: Sanitizer;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO(tbosch): move this interface into @angular/core/src/render/api,
|
||||
* and implement it in @angular/platform-browser, ...
|
||||
*/
|
||||
export interface RendererV2 {
|
||||
createElement(name: string, debugInfo?: RenderDebugContext): any;
|
||||
createComment(value: string, debugInfo?: RenderDebugContext): any;
|
||||
createText(value: string, debugInfo?: RenderDebugContext): any;
|
||||
appendChild(parent: any, newChild: any): void;
|
||||
insertBefore(parent: any, newChild: any, refChild: any): void;
|
||||
removeChild(parent: any, oldChild: any): void;
|
||||
selectRootElement(selectorOrNode: string|any, debugInfo?: RenderDebugContext): any;
|
||||
/**
|
||||
* Attention: On WebWorkers, this will always return a value,
|
||||
* as we are asking for a result synchronously. I.e.
|
||||
* the caller can't rely on checking whether this is null or not.
|
||||
*/
|
||||
parentNode(node: any): any;
|
||||
/**
|
||||
* Attention: On WebWorkers, this will always return a value,
|
||||
* as we are asking for a result synchronously. I.e.
|
||||
* the caller can't rely on checking whether this is null or not.
|
||||
*/
|
||||
nextSibling(node: any): any;
|
||||
setAttribute(el: any, name: string, value: string): void;
|
||||
removeAttribute(el: any, name: string): void;
|
||||
addClass(el: any, name: string): void;
|
||||
removeClass(el: any, name: string): void;
|
||||
setStyle(el: any, style: string, value: any): void;
|
||||
removeStyle(el: any, style: string): void;
|
||||
setProperty(el: any, name: string, value: any): void;
|
||||
setText(node: any, value: string): void;
|
||||
listen(target: 'window'|'document'|any, eventName: string, callback: (event: any) => boolean):
|
||||
() => void;
|
||||
}
|
||||
|
||||
export abstract class RenderDebugContext {
|
||||
abstract get injector(): Injector;
|
||||
abstract get component(): any;
|
||||
abstract get providerTokens(): any[];
|
||||
abstract get references(): {[key: string]: any};
|
||||
abstract get context(): any;
|
||||
abstract get source(): string;
|
||||
abstract get componentRenderElement(): any;
|
||||
abstract get renderNode(): any;
|
||||
}
|
||||
|
||||
export abstract class DebugContext extends RenderDebugContext {
|
||||
abstract get view(): ViewData;
|
||||
abstract get nodeIndex(): number;
|
||||
}
|
||||
|
||||
// -------------------------------------
|
||||
// Other
|
||||
// -------------------------------------
|
||||
export enum EntryAction {
|
||||
CheckAndUpdate,
|
||||
CheckNoChanges,
|
||||
Create,
|
||||
Destroy,
|
||||
HandleEvent
|
||||
}
|
||||
|
||||
export interface DebugContext extends RenderDebugInfo {
|
||||
view: ViewData;
|
||||
nodeIndex: number;
|
||||
componentRenderElement: any;
|
||||
renderNode: any;
|
||||
export interface Services {
|
||||
setCurrentNode(view: ViewData, nodeIndex: number): void;
|
||||
createRootView(
|
||||
injector: Injector, projectableNodes: any[][], rootSelectorOrNode: string|any,
|
||||
def: ViewDefinition, context?: any): ViewData;
|
||||
createEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData;
|
||||
checkAndUpdateView(view: ViewData): void;
|
||||
checkNoChangesView(view: ViewData): void;
|
||||
attachEmbeddedView(elementData: ElementData, viewIndex: number, view: ViewData): void;
|
||||
detachEmbeddedView(elementData: ElementData, viewIndex: number): ViewData;
|
||||
moveEmbeddedView(elementData: ElementData, oldViewIndex: number, newViewIndex: number): ViewData;
|
||||
destroyView(view: ViewData): void;
|
||||
resolveDep(
|
||||
view: ViewData, requestNodeIndex: number, elIndex: number, depDef: DepDef,
|
||||
notFoundValue?: any): any;
|
||||
createDebugContext(view: ViewData, nodeIndex: number): DebugContext;
|
||||
handleEvent: ViewHandleEventFn;
|
||||
updateView: ViewUpdateFn;
|
||||
}
|
||||
|
||||
/**
|
||||
* This class is used to prevent cycles in the source files.
|
||||
* This object is used to prevent cycles in the source files and to have a place where
|
||||
* debug mode can hook it. It is lazily filled when `isDevMode` is known.
|
||||
*/
|
||||
export abstract class Refs {
|
||||
private static instance: Refs;
|
||||
|
||||
static setInstance(instance: Refs) { Refs.instance = instance; }
|
||||
static createComponentFactory(selector: string, viewDefFactory: ViewDefinitionFactory):
|
||||
ComponentFactory<any> {
|
||||
return Refs.instance.createComponentFactory(selector, viewDefFactory);
|
||||
}
|
||||
static createViewRef(data: ViewData): ViewRef { return Refs.instance.createViewRef(data); }
|
||||
static createViewContainerRef(view: ViewData, elIndex: number): ViewContainerRef {
|
||||
return Refs.instance.createViewContainerRef(view, elIndex);
|
||||
}
|
||||
static createTemplateRef(parentView: ViewData, def: NodeDef): TemplateRef<any> {
|
||||
return Refs.instance.createTemplateRef(parentView, def);
|
||||
}
|
||||
static createInjector(view: ViewData, elIndex: number): Injector {
|
||||
return Refs.instance.createInjector(view, elIndex);
|
||||
}
|
||||
static createDebugContext(view: ViewData, nodeIndex: number): DebugContext {
|
||||
return Refs.instance.createDebugContext(view, nodeIndex);
|
||||
}
|
||||
|
||||
abstract createComponentFactory(selector: string, viewDefFactory: ViewDefinitionFactory):
|
||||
ComponentFactory<any>;
|
||||
abstract createViewRef(data: ViewData): ViewRef;
|
||||
abstract createViewContainerRef(view: ViewData, elIndex: number): ViewContainerRef;
|
||||
abstract createTemplateRef(parentView: ViewData, def: NodeDef): TemplateRef<any>;
|
||||
abstract createInjector(view: ViewData, elIndex: number): Injector;
|
||||
abstract createDebugContext(view: ViewData, nodeIndex: number): DebugContext;
|
||||
}
|
||||
export const Services: Services = {
|
||||
setCurrentNode: undefined,
|
||||
createRootView: undefined,
|
||||
createEmbeddedView: undefined,
|
||||
checkAndUpdateView: undefined,
|
||||
checkNoChangesView: undefined,
|
||||
destroyView: undefined,
|
||||
attachEmbeddedView: undefined,
|
||||
detachEmbeddedView: undefined,
|
||||
moveEmbeddedView: undefined,
|
||||
resolveDep: undefined,
|
||||
createDebugContext: undefined,
|
||||
handleEvent: undefined,
|
||||
updateView: undefined,
|
||||
};
|
||||
|
||||
@ -10,31 +10,30 @@ import {isDevMode} from '../application_ref';
|
||||
import {WrappedValue, devModeEqual} from '../change_detection/change_detection';
|
||||
import {SimpleChange} from '../change_detection/change_detection_util';
|
||||
import {Injector} from '../di';
|
||||
import {looseIdentical} from '../facade/lang';
|
||||
import {looseIdentical, stringify} from '../facade/lang';
|
||||
import {TemplateRef} from '../linker/template_ref';
|
||||
import {ViewContainerRef} from '../linker/view_container_ref';
|
||||
import {ViewRef} from '../linker/view_ref';
|
||||
import {Renderer} from '../render/api';
|
||||
|
||||
import {expressionChangedAfterItHasBeenCheckedError, isViewDebugError, viewDestroyedError, viewWrappedDebugError} from './errors';
|
||||
import {DebugContext, ElementData, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, Refs, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewState, asElementData, asProviderData, asTextData} from './types';
|
||||
import {DebugContext, ElementData, NodeData, NodeDef, NodeFlags, NodeType, Services, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewState, asElementData, asProviderData, asTextData} from './types';
|
||||
|
||||
export function setBindingDebugInfo(
|
||||
renderer: Renderer, renderNode: any, propName: string, value: any) {
|
||||
try {
|
||||
renderer.setBindingDebugInfo(
|
||||
renderNode, `ng-reflect-${camelCaseToDashCase(propName)}`, value ? value.toString() : null);
|
||||
} catch (e) {
|
||||
renderer.setBindingDebugInfo(
|
||||
renderNode, `ng-reflect-${camelCaseToDashCase(propName)}`,
|
||||
'[ERROR] Exception while trying to serialize the value');
|
||||
const _tokenKeyCache = new Map<any, string>();
|
||||
|
||||
export function tokenKey(token: any): string {
|
||||
let key = _tokenKeyCache.get(token);
|
||||
if (!key) {
|
||||
key = stringify(token) + '_' + _tokenKeyCache.size;
|
||||
_tokenKeyCache.set(token, key);
|
||||
}
|
||||
return key;
|
||||
}
|
||||
|
||||
const CAMEL_CASE_REGEXP = /([A-Z])/g;
|
||||
|
||||
function camelCaseToDashCase(input: string): string {
|
||||
return input.replace(CAMEL_CASE_REGEXP, (...m: any[]) => '-' + m[1].toLowerCase());
|
||||
export function checkBinding(
|
||||
view: ViewData, def: NodeDef, bindingIdx: number, value: any): boolean {
|
||||
const oldValue = view.oldValues[def.bindingIndex + bindingIdx];
|
||||
return !!(view.state & ViewState.FirstCheck) || !devModeEqual(oldValue, value);
|
||||
}
|
||||
|
||||
export function checkBindingNoChanges(
|
||||
@ -42,7 +41,7 @@ export function checkBindingNoChanges(
|
||||
const oldValue = view.oldValues[def.bindingIndex + bindingIdx];
|
||||
if ((view.state & ViewState.FirstCheck) || !devModeEqual(oldValue, value)) {
|
||||
throw expressionChangedAfterItHasBeenCheckedError(
|
||||
Refs.createDebugContext(view, def.index), oldValue, value,
|
||||
Services.createDebugContext(view, def.index), oldValue, value,
|
||||
(view.state & ViewState.FirstCheck) !== 0);
|
||||
}
|
||||
}
|
||||
@ -66,7 +65,6 @@ export function checkAndUpdateBinding(
|
||||
|
||||
export function dispatchEvent(
|
||||
view: ViewData, nodeIndex: number, eventName: string, event: any): boolean {
|
||||
setCurrentNode(view, nodeIndex);
|
||||
let currView = view;
|
||||
while (currView) {
|
||||
if (currView.def.flags & ViewFlags.OnPush) {
|
||||
@ -74,7 +72,7 @@ export function dispatchEvent(
|
||||
}
|
||||
currView = currView.parent;
|
||||
}
|
||||
return view.def.handleEvent(view, nodeIndex, eventName, event);
|
||||
return Services.handleEvent(view, nodeIndex, eventName, event);
|
||||
}
|
||||
|
||||
export function unwrapValue(value: any): any {
|
||||
@ -159,68 +157,6 @@ export function sliceErrorStack(start: number, end: number): string {
|
||||
return lines.slice(start, end).join('\n');
|
||||
}
|
||||
|
||||
let _currentAction: EntryAction;
|
||||
let _currentView: ViewData;
|
||||
let _currentNodeIndex: number;
|
||||
|
||||
export function currentView() {
|
||||
return _currentView;
|
||||
}
|
||||
|
||||
export function currentNodeIndex() {
|
||||
return _currentNodeIndex;
|
||||
}
|
||||
|
||||
export function currentAction() {
|
||||
return _currentAction;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the node that is currently worked on.
|
||||
* It needs to be called whenever we call user code,
|
||||
* or code of the framework that might throw as a valid use case.
|
||||
*/
|
||||
export function setCurrentNode(view: ViewData, nodeIndex: number) {
|
||||
if (view.state & ViewState.Destroyed) {
|
||||
throw viewDestroyedError(_currentAction);
|
||||
}
|
||||
_currentView = view;
|
||||
_currentNodeIndex = nodeIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a try/catch handler around the given function to wrap all
|
||||
* errors that occur into new errors that contain the current debug info
|
||||
* set via setCurrentNode.
|
||||
*/
|
||||
export function entryAction<A, R>(action: EntryAction, fn: (arg: A) => R): (arg: A) => R {
|
||||
return <any>function(arg: any) {
|
||||
const oldAction = _currentAction;
|
||||
const oldView = _currentView;
|
||||
const oldNodeIndex = _currentNodeIndex;
|
||||
_currentAction = action;
|
||||
// Note: We can't call `isDevMode()` outside of this closure as
|
||||
// it might not have been initialized.
|
||||
const result = isDevMode() ? callWithTryCatch(fn, arg) : fn(arg);
|
||||
_currentAction = oldAction;
|
||||
_currentView = oldView;
|
||||
_currentNodeIndex = oldNodeIndex;
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
function callWithTryCatch(fn: (a: any) => any, arg: any): any {
|
||||
try {
|
||||
return fn(arg);
|
||||
} catch (e) {
|
||||
if (isViewDebugError(e) || !_currentView) {
|
||||
throw e;
|
||||
}
|
||||
const debugContext = Refs.createDebugContext(_currentView, _currentNodeIndex);
|
||||
throw viewWrappedDebugError(e, debugContext);
|
||||
}
|
||||
}
|
||||
|
||||
export function rootRenderNodes(view: ViewData): any[] {
|
||||
const renderNodes: any[] = [];
|
||||
visitRootRenderNodes(view, RenderNodeAction.Collect, undefined, undefined, renderNodes);
|
||||
@ -269,7 +205,7 @@ export function visitProjectedRenderNodes(
|
||||
const projectedNodes = view.root.projectableNodes[ngContentIndex];
|
||||
if (projectedNodes) {
|
||||
for (let i = 0; i < projectedNodes.length; i++) {
|
||||
execRenderNodeAction(projectedNodes[i], action, parentNode, nextSibling, target);
|
||||
execRenderNodeAction(view, projectedNodes[i], action, parentNode, nextSibling, target);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -283,7 +219,7 @@ function visitRenderNode(
|
||||
view, nodeDef.ngContent.index, action, parentNode, nextSibling, target);
|
||||
} else {
|
||||
const rn = renderNode(view, nodeDef);
|
||||
execRenderNodeAction(rn, action, parentNode, nextSibling, target);
|
||||
execRenderNodeAction(view, rn, action, parentNode, nextSibling, target);
|
||||
if (nodeDef.flags & NodeFlags.HasEmbeddedViews) {
|
||||
const embeddedViews = asElementData(view, nodeDef.index).embeddedViews;
|
||||
if (embeddedViews) {
|
||||
@ -296,16 +232,18 @@ function visitRenderNode(
|
||||
}
|
||||
|
||||
function execRenderNodeAction(
|
||||
renderNode: any, action: RenderNodeAction, parentNode: any, nextSibling: any, target: any[]) {
|
||||
view: ViewData, renderNode: any, action: RenderNodeAction, parentNode: any, nextSibling: any,
|
||||
target: any[]) {
|
||||
const renderer = view.root.renderer;
|
||||
switch (action) {
|
||||
case RenderNodeAction.AppendChild:
|
||||
parentNode.appendChild(renderNode);
|
||||
renderer.appendChild(parentNode, renderNode);
|
||||
break;
|
||||
case RenderNodeAction.InsertBefore:
|
||||
parentNode.insertBefore(renderNode, nextSibling);
|
||||
renderer.insertBefore(parentNode, renderNode, nextSibling);
|
||||
break;
|
||||
case RenderNodeAction.RemoveChild:
|
||||
parentNode.removeChild(renderNode);
|
||||
renderer.removeChild(parentNode, renderNode);
|
||||
break;
|
||||
case RenderNodeAction.Collect:
|
||||
target.push(renderNode);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {RenderComponentType, Renderer} from '../render/api';
|
||||
import {ViewEncapsulation} from '../metadata/view';
|
||||
import {checkAndUpdateElementDynamic, checkAndUpdateElementInline, createElement} from './element';
|
||||
import {expressionChangedAfterItHasBeenCheckedError} from './errors';
|
||||
import {appendNgContent} from './ng_content';
|
||||
@ -14,14 +14,15 @@ import {callLifecycleHooksChildrenFirst, checkAndUpdateProviderDynamic, checkAnd
|
||||
import {checkAndUpdatePureExpressionDynamic, checkAndUpdatePureExpressionInline, createPureExpression} from './pure_expression';
|
||||
import {checkAndUpdateQuery, createQuery, queryDef} from './query';
|
||||
import {checkAndUpdateTextDynamic, checkAndUpdateTextInline, createText} from './text';
|
||||
import {ElementDef, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, ProviderData, ProviderDef, Refs, RootData, TextDef, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewHandleEventFn, ViewState, ViewUpdateFn, asElementData, asProviderData, asPureExpressionData, asQueryList} from './types';
|
||||
import {checkBindingNoChanges, currentAction, currentNodeIndex, currentView, entryAction, isComponentView, resolveViewDefinition, setCurrentNode} from './util';
|
||||
import {ArgumentType, ComponentDefinition, ElementDef, NodeData, NodeDef, NodeFlags, NodeType, ProviderData, ProviderDef, RootData, Services, TextDef, ViewData, ViewDefinition, ViewDefinitionFactory, ViewFlags, ViewHandleEventFn, ViewState, ViewUpdateFn, asElementData, asProviderData, asPureExpressionData, asQueryList} from './types';
|
||||
import {checkBindingNoChanges, isComponentView, resolveViewDefinition} from './util';
|
||||
|
||||
const NOOP = (): any => undefined;
|
||||
|
||||
export function viewDef(
|
||||
flags: ViewFlags, nodesWithoutIndices: NodeDef[], update?: ViewUpdateFn,
|
||||
handleEvent?: ViewHandleEventFn, componentType?: RenderComponentType): ViewDefinition {
|
||||
handleEvent?: ViewHandleEventFn, compId?: string, encapsulation?: ViewEncapsulation,
|
||||
styles?: string[]): ViewDefinition {
|
||||
// clone nodes and set auto calculated values
|
||||
if (nodesWithoutIndices.length === 0) {
|
||||
throw new Error(`Illegal State: Views without nodes are not allowed!`);
|
||||
@ -99,13 +100,15 @@ export function viewDef(
|
||||
}
|
||||
currentParent = newParent;
|
||||
}
|
||||
|
||||
const componentDef =
|
||||
compId ? <ComponentDefinition>{id: compId, encapsulation, styles} : undefined;
|
||||
return {
|
||||
nodeFlags: viewNodeFlags,
|
||||
nodeMatchedQueries: viewMatchedQueries, flags,
|
||||
nodes: nodes, reverseChildNodes,
|
||||
update: update || NOOP,
|
||||
handleEvent: handleEvent || NOOP, componentType,
|
||||
handleEvent: handleEvent || NOOP,
|
||||
component: componentDef,
|
||||
bindingCount: viewBindingCount,
|
||||
disposableCount: viewDisposableCount, lastRootNode
|
||||
};
|
||||
@ -196,27 +199,44 @@ function cloneAndModifyNode(nodeDef: NodeDef, values: {
|
||||
bindingIndex: number,
|
||||
disposableIndex: number,
|
||||
}): NodeDef {
|
||||
const clonedNode: NodeDef = <any>{};
|
||||
copyInto(nodeDef, clonedNode);
|
||||
|
||||
clonedNode.index = values.index;
|
||||
clonedNode.bindingIndex = values.bindingIndex;
|
||||
clonedNode.disposableIndex = values.disposableIndex;
|
||||
clonedNode.parent = values.parent;
|
||||
clonedNode.reverseChildIndex = values.reverseChildIndex;
|
||||
|
||||
// Note: We can't set the value immediately, as we need to walk the children first.
|
||||
clonedNode.childFlags = 0;
|
||||
clonedNode.childMatchedQueries = {};
|
||||
return clonedNode;
|
||||
// Attention: don't use copyInto here to prevent v8 from treating this object
|
||||
// as a dictionary!
|
||||
return {
|
||||
type: nodeDef.type,
|
||||
index: values.index,
|
||||
reverseChildIndex: values.reverseChildIndex,
|
||||
parent: values.parent,
|
||||
childFlags: 0,
|
||||
childMatchedQueries: {},
|
||||
bindingIndex: values.bindingIndex,
|
||||
disposableIndex: values.disposableIndex,
|
||||
flags: nodeDef.flags,
|
||||
matchedQueries: nodeDef.matchedQueries,
|
||||
ngContentIndex: nodeDef.ngContentIndex,
|
||||
childCount: nodeDef.childCount,
|
||||
bindings: nodeDef.bindings,
|
||||
disposableCount: nodeDef.disposableCount,
|
||||
element: nodeDef.element,
|
||||
provider: nodeDef.provider,
|
||||
text: nodeDef.text,
|
||||
pureExpression: nodeDef.pureExpression,
|
||||
query: nodeDef.query,
|
||||
ngContent: nodeDef.ngContent
|
||||
};
|
||||
}
|
||||
|
||||
function cloneAndModifyElement(
|
||||
elementDef: ElementDef, values: {providerIndices: {[tokenKey: string]: number}}): ElementDef {
|
||||
const clonedElement: ElementDef = <any>{};
|
||||
copyInto(elementDef, clonedElement);
|
||||
clonedElement.providerIndices = values.providerIndices;
|
||||
return clonedElement;
|
||||
// Attention: don't use copyInto here to prevent v8 from treating this object
|
||||
// as a dictionary!
|
||||
return {
|
||||
name: elementDef.name,
|
||||
attrs: elementDef.attrs,
|
||||
outputs: elementDef.outputs,
|
||||
template: elementDef.template,
|
||||
providerIndices: values.providerIndices,
|
||||
source: elementDef.source
|
||||
};
|
||||
}
|
||||
|
||||
export function createEmbeddedView(parent: ViewData, anchorDef: NodeDef, context?: any): ViewData {
|
||||
@ -238,13 +258,6 @@ export function createRootView(root: RootData, def: ViewDefinition, context?: an
|
||||
function createView(
|
||||
root: RootData, parent: ViewData, parentIndex: number, def: ViewDefinition): ViewData {
|
||||
const nodes: NodeData[] = new Array(def.nodes.length);
|
||||
let renderer: Renderer;
|
||||
if (def.flags != null && (def.flags & ViewFlags.DirectDom)) {
|
||||
renderer = null;
|
||||
} else {
|
||||
renderer =
|
||||
def.componentType ? root.renderer.renderComponent(def.componentType) : parent.renderer;
|
||||
}
|
||||
const disposables = def.disposableCount ? new Array(def.disposableCount) : undefined;
|
||||
const view: ViewData = {
|
||||
def,
|
||||
@ -252,7 +265,7 @@ function createView(
|
||||
parentIndex,
|
||||
context: undefined,
|
||||
component: undefined, nodes,
|
||||
state: ViewState.FirstCheck | ViewState.ChecksEnabled, renderer, root,
|
||||
state: ViewState.FirstCheck | ViewState.ChecksEnabled, root,
|
||||
oldValues: new Array(def.bindingCount), disposables
|
||||
};
|
||||
return view;
|
||||
@ -263,25 +276,17 @@ function initView(view: ViewData, component: any, context: any) {
|
||||
view.context = context;
|
||||
}
|
||||
|
||||
const createViewNodes: (view: ViewData) => void =
|
||||
entryAction(EntryAction.CheckNoChanges, _createViewNodes);
|
||||
|
||||
function _createViewNodes(view: ViewData) {
|
||||
function createViewNodes(view: ViewData) {
|
||||
let renderHost: any;
|
||||
if (isComponentView(view)) {
|
||||
renderHost = asElementData(view.parent, view.parentIndex).renderElement;
|
||||
if (view.renderer) {
|
||||
renderHost = view.renderer.createViewRoot(renderHost);
|
||||
}
|
||||
}
|
||||
|
||||
const def = view.def;
|
||||
const nodes = view.nodes;
|
||||
for (let i = 0; i < def.nodes.length; i++) {
|
||||
const nodeDef = def.nodes[i];
|
||||
// As the current node is being created, we have to use
|
||||
// the parent node as the current node for error messages, ...
|
||||
setCurrentNode(view, nodeDef.parent);
|
||||
Services.setCurrentNode(view, i);
|
||||
switch (nodeDef.type) {
|
||||
case NodeType.Element:
|
||||
nodes[i] = createElement(view, renderHost, nodeDef) as any;
|
||||
@ -324,22 +329,16 @@ function _createViewNodes(view: ViewData) {
|
||||
execComponentViewsAction(view, ViewAction.CreateViewNodes);
|
||||
}
|
||||
|
||||
export const checkNoChangesView: (view: ViewData) => void =
|
||||
entryAction(EntryAction.CheckNoChanges, _checkNoChangesView);
|
||||
|
||||
function _checkNoChangesView(view: ViewData) {
|
||||
view.def.update(view);
|
||||
export function checkNoChangesView(view: ViewData) {
|
||||
Services.updateView(checkNoChangesNode, view);
|
||||
execEmbeddedViewsAction(view, ViewAction.CheckNoChanges);
|
||||
execQueriesAction(view, NodeFlags.HasContentQuery, QueryAction.CheckNoChanges);
|
||||
execComponentViewsAction(view, ViewAction.CheckNoChanges);
|
||||
execQueriesAction(view, NodeFlags.HasViewQuery, QueryAction.CheckNoChanges);
|
||||
}
|
||||
|
||||
export const checkAndUpdateView: (view: ViewData) => void =
|
||||
entryAction(EntryAction.CheckAndUpdate, _checkAndUpdateView);
|
||||
|
||||
function _checkAndUpdateView(view: ViewData) {
|
||||
view.def.update(view);
|
||||
export function checkAndUpdateView(view: ViewData) {
|
||||
Services.updateView(checkAndUpdateNode, view);
|
||||
execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
|
||||
execQueriesAction(view, NodeFlags.HasContentQuery, QueryAction.CheckAndUpdate);
|
||||
|
||||
@ -359,73 +358,58 @@ function _checkAndUpdateView(view: ViewData) {
|
||||
view.state &= ~ViewState.FirstCheck;
|
||||
}
|
||||
|
||||
export function checkNodeInline(
|
||||
v0?: any, v1?: any, v2?: any, v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any,
|
||||
v9?: any): any {
|
||||
const action = currentAction();
|
||||
const view = currentView();
|
||||
const nodeIndex = currentNodeIndex();
|
||||
const nodeDef = view.def.nodes[nodeIndex];
|
||||
switch (action) {
|
||||
case EntryAction.CheckNoChanges:
|
||||
checkNodeNoChangesInline(view, nodeIndex, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
break;
|
||||
case EntryAction.CheckAndUpdate:
|
||||
switch (nodeDef.type) {
|
||||
case NodeType.Element:
|
||||
checkAndUpdateElementInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
break;
|
||||
case NodeType.Text:
|
||||
checkAndUpdateTextInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
break;
|
||||
case NodeType.Provider:
|
||||
checkAndUpdateProviderInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
break;
|
||||
case NodeType.PureExpression:
|
||||
checkAndUpdatePureExpressionInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Illegal State: In action ${EntryAction[action]}`);
|
||||
function checkAndUpdateNode(
|
||||
view: ViewData, nodeIndex: number, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
|
||||
v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any {
|
||||
if (argStyle === ArgumentType.Inline) {
|
||||
return checkAndUpdateNodeInline(view, nodeIndex, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
} else {
|
||||
return checkAndUpdateNodeDynamic(view, nodeIndex, v0);
|
||||
}
|
||||
return nodeDef.type === NodeType.PureExpression ? asPureExpressionData(view, nodeIndex).value :
|
||||
undefined;
|
||||
}
|
||||
|
||||
export function checkNodeDynamic(values: any[]): any {
|
||||
const action = currentAction();
|
||||
const view = currentView();
|
||||
const nodeIndex = currentNodeIndex();
|
||||
function checkAndUpdateNodeInline(
|
||||
view: ViewData, nodeIndex: number, v0?: any, v1?: any, v2?: any, v3?: any, v4?: any, v5?: any,
|
||||
v6?: any, v7?: any, v8?: any, v9?: any): any {
|
||||
const nodeDef = view.def.nodes[nodeIndex];
|
||||
switch (action) {
|
||||
case EntryAction.CheckNoChanges:
|
||||
checkNodeNoChangesDynamic(view, nodeIndex, values);
|
||||
break;
|
||||
case EntryAction.CheckAndUpdate:
|
||||
switch (nodeDef.type) {
|
||||
case NodeType.Element:
|
||||
checkAndUpdateElementDynamic(view, nodeDef, values);
|
||||
break;
|
||||
case NodeType.Text:
|
||||
checkAndUpdateTextDynamic(view, nodeDef, values);
|
||||
break;
|
||||
case NodeType.Provider:
|
||||
checkAndUpdateProviderDynamic(view, nodeDef, values);
|
||||
break;
|
||||
case NodeType.PureExpression:
|
||||
checkAndUpdatePureExpressionDynamic(view, nodeDef, values);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Illegal State: In action ${EntryAction[action]}`);
|
||||
switch (nodeDef.type) {
|
||||
case NodeType.Element:
|
||||
return checkAndUpdateElementInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
case NodeType.Text:
|
||||
return checkAndUpdateTextInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
case NodeType.Provider:
|
||||
return checkAndUpdateProviderInline(view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
case NodeType.PureExpression:
|
||||
return checkAndUpdatePureExpressionInline(
|
||||
view, nodeDef, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
}
|
||||
return nodeDef.type === NodeType.PureExpression ? asPureExpressionData(view, nodeIndex).value :
|
||||
undefined;
|
||||
}
|
||||
|
||||
function checkNodeNoChangesInline(
|
||||
function checkAndUpdateNodeDynamic(view: ViewData, nodeIndex: number, values: any[]): any {
|
||||
const nodeDef = view.def.nodes[nodeIndex];
|
||||
switch (nodeDef.type) {
|
||||
case NodeType.Element:
|
||||
return checkAndUpdateElementDynamic(view, nodeDef, values);
|
||||
case NodeType.Text:
|
||||
return checkAndUpdateTextDynamic(view, nodeDef, values);
|
||||
case NodeType.Provider:
|
||||
return checkAndUpdateProviderDynamic(view, nodeDef, values);
|
||||
case NodeType.PureExpression:
|
||||
return checkAndUpdatePureExpressionDynamic(view, nodeDef, values);
|
||||
}
|
||||
}
|
||||
|
||||
function checkNoChangesNode(
|
||||
view: ViewData, nodeIndex: number, argStyle: ArgumentType, v0?: any, v1?: any, v2?: any,
|
||||
v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any {
|
||||
if (argStyle === ArgumentType.Inline) {
|
||||
return checkNoChangesNodeInline(view, nodeIndex, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9);
|
||||
} else {
|
||||
return checkNoChangesNodeDynamic(view, nodeIndex, v0);
|
||||
}
|
||||
}
|
||||
|
||||
function checkNoChangesNodeInline(
|
||||
view: ViewData, nodeIndex: number, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any,
|
||||
v6: any, v7: any, v8: any, v9: any): void {
|
||||
const nodeDef = view.def.nodes[nodeIndex];
|
||||
@ -452,28 +436,29 @@ function checkNodeNoChangesInline(
|
||||
case 1:
|
||||
checkBindingNoChanges(view, nodeDef, 0, v0);
|
||||
}
|
||||
return undefined;
|
||||
return nodeDef.type === NodeType.PureExpression ? asPureExpressionData(view, nodeIndex).value :
|
||||
undefined;
|
||||
}
|
||||
|
||||
function checkNodeNoChangesDynamic(view: ViewData, nodeIndex: number, values: any[]): void {
|
||||
function checkNoChangesNodeDynamic(view: ViewData, nodeIndex: number, values: any[]): void {
|
||||
const nodeDef = view.def.nodes[nodeIndex];
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
checkBindingNoChanges(view, nodeDef, i, values[i]);
|
||||
}
|
||||
return nodeDef.type === NodeType.PureExpression ? asPureExpressionData(view, nodeIndex).value :
|
||||
undefined;
|
||||
}
|
||||
|
||||
function checkNoChangesQuery(view: ViewData, nodeDef: NodeDef) {
|
||||
const queryList = asQueryList(view, nodeDef.index);
|
||||
if (queryList.dirty) {
|
||||
throw expressionChangedAfterItHasBeenCheckedError(
|
||||
Refs.createDebugContext(view, nodeDef.index), `Query ${nodeDef.query.id} not dirty`,
|
||||
Services.createDebugContext(view, nodeDef.index), `Query ${nodeDef.query.id} not dirty`,
|
||||
`Query ${nodeDef.query.id} dirty`, (view.state & ViewState.FirstCheck) !== 0);
|
||||
}
|
||||
}
|
||||
|
||||
export const destroyView: (view: ViewData) => void = entryAction(EntryAction.Destroy, _destroyView);
|
||||
|
||||
function _destroyView(view: ViewData) {
|
||||
export function destroyView(view: ViewData) {
|
||||
callLifecycleHooksChildrenFirst(view, NodeFlags.OnDestroy);
|
||||
if (view.disposables) {
|
||||
for (let i = 0; i < view.disposables.length; i++) {
|
||||
@ -542,20 +527,20 @@ function callViewAction(view: ViewData, action: ViewAction) {
|
||||
case ViewAction.CheckNoChanges:
|
||||
if ((viewState & ViewState.ChecksEnabled) &&
|
||||
(viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
|
||||
_checkNoChangesView(view);
|
||||
checkNoChangesView(view);
|
||||
}
|
||||
break;
|
||||
case ViewAction.CheckAndUpdate:
|
||||
if ((viewState & ViewState.ChecksEnabled) &&
|
||||
(viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
|
||||
_checkAndUpdateView(view);
|
||||
checkAndUpdateView(view);
|
||||
}
|
||||
break;
|
||||
case ViewAction.Destroy:
|
||||
_destroyView(view);
|
||||
destroyView(view);
|
||||
break;
|
||||
case ViewAction.CreateViewNodes:
|
||||
_createViewNodes(view);
|
||||
createViewNodes(view);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -573,7 +558,7 @@ function execQueriesAction(view: ViewData, queryFlags: NodeFlags, action: QueryA
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
const nodeDef = view.def.nodes[i];
|
||||
if (nodeDef.flags & queryFlags) {
|
||||
setCurrentNode(view, nodeDef.index);
|
||||
Services.setCurrentNode(view, nodeDef.index);
|
||||
switch (action) {
|
||||
case QueryAction.CheckAndUpdate:
|
||||
checkAndUpdateQuery(view, nodeDef);
|
||||
|
||||
@ -83,27 +83,16 @@ export function moveEmbeddedView(
|
||||
function renderAttachEmbeddedView(elementData: ElementData, prevView: ViewData, view: ViewData) {
|
||||
const prevRenderNode =
|
||||
prevView ? renderNode(prevView, prevView.def.lastRootNode) : elementData.renderElement;
|
||||
if (view.renderer) {
|
||||
view.renderer.attachViewAfter(prevRenderNode, rootRenderNodes(view));
|
||||
} else {
|
||||
const parentNode = prevRenderNode.parentNode;
|
||||
const nextSibling = prevRenderNode.nextSibling;
|
||||
if (parentNode) {
|
||||
const action = nextSibling ? RenderNodeAction.InsertBefore : RenderNodeAction.AppendChild;
|
||||
visitRootRenderNodes(view, action, parentNode, nextSibling, undefined);
|
||||
}
|
||||
}
|
||||
const parentNode = view.root.renderer.parentNode(prevRenderNode);
|
||||
const nextSibling = view.root.renderer.nextSibling(prevRenderNode);
|
||||
// Note: We can't check if `nextSibling` is present, as on WebWorkers it will always be!
|
||||
// However, browsers automatically do `appendChild` when there is no `nextSibling`.
|
||||
visitRootRenderNodes(view, RenderNodeAction.InsertBefore, parentNode, nextSibling, undefined);
|
||||
}
|
||||
|
||||
function renderDetachEmbeddedView(elementData: ElementData, view: ViewData) {
|
||||
if (view.renderer) {
|
||||
view.renderer.detachView(rootRenderNodes(view));
|
||||
} else {
|
||||
const parentNode = elementData.renderElement.parentNode;
|
||||
if (parentNode) {
|
||||
visitRootRenderNodes(view, RenderNodeAction.RemoveChild, parentNode, null, undefined);
|
||||
}
|
||||
}
|
||||
const parentNode = view.root.renderer.parentNode(elementData.renderElement);
|
||||
visitRootRenderNodes(view, RenderNodeAction.RemoveChild, parentNode, null, undefined);
|
||||
}
|
||||
|
||||
function addToArray(arr: any[], index: number, value: any) {
|
||||
|
||||
Reference in New Issue
Block a user