feat(core): view engine - add debug information (#14197)

Creates debug information for the renderer,
and also reports errors relative to the
declaration place in the template.

Part of #14013

PR Close #14197
This commit is contained in:
Tobias Bosch
2017-01-26 17:07:37 -08:00
committed by Miško Hevery
parent c48dd76f5c
commit 52b21275f4
23 changed files with 1007 additions and 433 deletions

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ApplicationRef, NgModuleRef} from '@angular/core';
import {ApplicationRef, NgModuleRef, enableProdMode} from '@angular/core';
import {bindAction, profile} from '../../util';
import {buildTree, emptyTree} from '../util';
@ -40,6 +40,7 @@ export function main() {
const numberOfChecksEl = document.getElementById('numberOfChecks');
enableProdMode();
appMod = new AppModule();
appMod.bootstrap();
tree = appMod.rootComp;

View File

@ -8,7 +8,7 @@
import {NgIf} from '@angular/common';
import {Component, NgModule, TemplateRef, ViewContainerRef, ViewEncapsulation} from '@angular/core';
import {BindingType, DefaultServices, NodeFlags, NodeUpdater, ViewData, ViewDefinition, ViewFlags, anchorDef, asElementData, asProviderData, checkAndUpdateView, createRootView, elementDef, providerDef, textDef, viewDef} from '@angular/core/src/view/index';
import {BindingType, DefaultServices, NodeFlags, ViewData, ViewDefinition, ViewFlags, anchorDef, asElementData, asProviderData, checkAndUpdateView, checkNodeInline, createRootView, elementDef, providerDef, setCurrentNode, textDef, viewDef} from '@angular/core/src/view/index';
import {DomSanitizer, DomSanitizerImpl, SafeStyle} from '@angular/platform-browser/src/security/dom_sanitization_service';
import {TreeNode, emptyTree} from '../util';
@ -23,58 +23,66 @@ export class TreeComponent {
let viewFlags = ViewFlags.DirectDom;
const TreeComponent_Host: ViewDefinition = viewDef(viewFlags, [
elementDef(NodeFlags.None, null, 1, 'tree'),
providerDef(NodeFlags.None, null, 0, TreeComponent, [], null, null, () => TreeComponent_0),
]);
function TreeComponent_Host(): ViewDefinition {
return viewDef(viewFlags, [
elementDef(NodeFlags.None, null, 1, 'tree'),
providerDef(NodeFlags.None, null, 0, TreeComponent, [], null, null, TreeComponent_0),
]);
}
const TreeComponent_1: ViewDefinition = viewDef(
viewFlags,
[
elementDef(NodeFlags.None, null, 1, 'tree'),
providerDef(
NodeFlags.None, null, 0, TreeComponent, [], {data: [0, 'data']}, null,
() => TreeComponent_0),
],
(updater: NodeUpdater, view: ViewData) => {
const cmp = view.component;
updater.checkInline(view, 1, cmp.data.left);
});
function TreeComponent_0(): ViewDefinition {
const TreeComponent_1: ViewDefinition = viewDef(
viewFlags,
[
elementDef(NodeFlags.None, null, 1, 'tree'),
providerDef(
NodeFlags.None, null, 0, TreeComponent, [], {data: [0, 'data']}, null, TreeComponent_0),
],
(view: ViewData) => {
const cmp = view.component;
setCurrentNode(view, 1);
checkNodeInline(cmp.data.left);
});
const TreeComponent_2: ViewDefinition = viewDef(
viewFlags,
[
elementDef(NodeFlags.None, null, 1, 'tree'),
providerDef(
NodeFlags.None, null, 0, TreeComponent, [], {data: [0, 'data']}, null,
() => TreeComponent_0),
],
(updater: NodeUpdater, view: ViewData) => {
const cmp = view.component;
updater.checkInline(view, 1, cmp.data.right);
});
const TreeComponent_2: ViewDefinition = viewDef(
viewFlags,
[
elementDef(NodeFlags.None, null, 1, 'tree'),
providerDef(
NodeFlags.None, null, 0, TreeComponent, [], {data: [0, 'data']}, null, TreeComponent_0),
],
(view: ViewData) => {
const cmp = view.component;
setCurrentNode(view, 1);
checkNodeInline(cmp.data.right);
});
const TreeComponent_0: ViewDefinition = viewDef(
viewFlags,
[
elementDef(
NodeFlags.None, null, 1, 'span', null,
[[BindingType.ElementStyle, 'backgroundColor', null]]),
textDef([' ', ' ']),
anchorDef(NodeFlags.HasEmbeddedViews, null, 1, TreeComponent_1),
providerDef(
NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
anchorDef(NodeFlags.HasEmbeddedViews, null, 1, TreeComponent_2),
providerDef(
NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
],
(updater: NodeUpdater, view: ViewData) => {
const cmp = view.component;
updater.checkInline(view, 0, cmp.bgColor);
updater.checkInline(view, 1, cmp.data.value);
updater.checkInline(view, 3, cmp.data.left != null);
updater.checkInline(view, 5, cmp.data.right != null);
});
return viewDef(
viewFlags,
[
elementDef(
NodeFlags.None, null, 1, 'span', null,
[[BindingType.ElementStyle, 'backgroundColor', null]]),
textDef([' ', ' ']),
anchorDef(NodeFlags.HasEmbeddedViews, null, 1, TreeComponent_1),
providerDef(
NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
anchorDef(NodeFlags.HasEmbeddedViews, null, 1, TreeComponent_2),
providerDef(
NodeFlags.None, null, 0, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
],
(view: ViewData) => {
const cmp = view.component;
setCurrentNode(view, 0);
checkNodeInline(cmp.bgColor);
setCurrentNode(view, 1);
checkNodeInline(cmp.data.value);
setCurrentNode(view, 3);
checkNodeInline(cmp.data.left != null);
setCurrentNode(view, 5);
checkNodeInline(cmp.data.right != null);
});
}
export class AppModule {
public rootComp: TreeComponent;