Add canonical compiler examples

modules/benchmarks/src/largetable/render3/table.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵC as C, ɵE as E, ɵT as T, ɵV as V, ɵb as b, ɵc as c, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as detectChanges, ɵe as e, ɵs as s, ɵt as t, ɵv as v} from '@angular/core';
+import {ɵC as C, ɵE as E, ɵT as T, ɵV as V, ɵb as b, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as detectChanges, ɵe as e, ɵs as s, ɵt as t, ɵv as v} from '@angular/core';
 import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
 
 import {TableCell, buildTable, emptyTable} from '../util';
@@ -16,17 +16,13 @@ export class LargeTableComponent {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<LargeTableComponent> = defineComponent({
-    type: LargeTableComponent,
     tag: 'largetable',
     template: function(ctx: LargeTableComponent, cm: boolean) {
       if (cm) {
         E(0, 'table');
         {
           E(1, 'tbody');
-          {
-            C(2);
-            c();
-          }
+          { C(2); }
           e();
         }
         e();
@@ -39,7 +35,6 @@ export class LargeTableComponent {
             if (cm1) {
               E(0, 'tr');
               C(1);
-              c();
               e();
             }
             cR(1);

modules/benchmarks/src/tree/render3/tree.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵC as C, ɵD as D, ɵE as E, ɵT as T, ɵV as V, ɵb as b, ɵb1 as b1, ɵc as c, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as _detectChanges, ɵe as e, ɵp as p, ɵs as s, ɵt as t, ɵv as v} from '@angular/core';
+import {ɵC as C, ɵD as D, ɵE as E, ɵT as T, ɵV as V, ɵb as b, ɵb1 as b1, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as _detectChanges, ɵe as e, ɵp as p, ɵs as s, ɵt as t, ɵv as v} from '@angular/core';
 import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
 
 import {TreeNode, buildTree, emptyTree} from '../util';
@@ -36,17 +36,14 @@ export class TreeComponent {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<TreeComponent> = defineComponent({
-    type: TreeComponent,
     tag: 'tree',
     template: function(ctx: TreeComponent, cm: boolean) {
       if (cm) {
         E(0, 'span');
         { T(1); }
         e();
         C(2);
-        c();
         C(3);
-        c();
       }
       s(0, 'background-color', b(ctx.data.depth % 2 ? '' : 'grey'));
       t(1, b1(' ', ctx.data.value, ' '));
@@ -56,8 +53,7 @@ export class TreeComponent {
           let cm0 = V(0);
           {
             if (cm0) {
-              E(0, TreeComponent.ngComponentDef);
-              { D(1, TreeComponent.ngComponentDef.n(), TreeComponent.ngComponentDef); }
+              E(0, TreeComponent);
               e();
             }
             p(0, 'data', b(ctx.data.left));
@@ -74,8 +70,7 @@ export class TreeComponent {
           let cm0 = V(0);
           {
             if (cm0) {
-              E(0, TreeComponent.ngComponentDef);
-              { D(1, TreeComponent.ngComponentDef.n(), TreeComponent.ngComponentDef); }
+              E(0, TreeComponent);
               e();
             }
             p(0, 'data', b(ctx.data.right));
@@ -97,7 +92,6 @@ export class TreeFunction extends TreeComponent {
 
   /** @nocollapse */
   static ngComponentDef: ComponentDef<TreeFunction> = defineComponent({
-    type: TreeFunction,
     tag: 'tree',
     template: function(ctx: TreeFunction, cm: boolean) {
       // bit of a hack
@@ -114,9 +108,7 @@ export function TreeTpl(ctx: TreeNode, cm: boolean) {
     { T(1); }
     e();
     C(2);
-    c();
     C(3);
-    c();
   }
   s(0, 'background-color', b(ctx.depth % 2 ? '' : 'grey'));
   t(1, b1(' ', ctx.value, ' '));

packages/core/src/core_render3_private_export.ts

@@ -18,7 +18,6 @@ export {
   V as ɵV,
   b as ɵb,
   b1 as ɵb1,
-  c as ɵc,
   cR as ɵcR,
   cr as ɵcr,
   e as ɵe,

packages/core/src/render3/assert.ts

@@ -21,7 +21,10 @@
  * @returns The stringified value
  */
 function stringifyValueForError(value: any): string {
-  return typeof value === 'string' ? `"${value}"` : '' + value;
+  if (value && value.native && value.native.outerHTML) {
+    return value.native.outerHTML;
+  }
+  return typeof value === 'string' ? `"${value}"` : value;
 }
 
 export function assertNumber(actual: any, name: string) {
@@ -57,6 +60,8 @@ export function assertNotEqual<T>(actual: T, expected: T, name: string) {
 export function assertThrow<T>(
     actual: T, expected: T, name: string, operator: string,
     serializer: ((v: T) => string) = stringifyValueForError): never {
-  throw new Error(
-      `ASSERT: expected ${name} ${operator} ${serializer(expected)} but was ${serializer(actual)}!`);
+  const error =
+      `ASSERT: expected ${name} ${operator} ${serializer(expected)} but was ${serializer(actual)}!`;
+  debugger;  // leave `debugger` here to aid in debugging.
+  throw new Error(error);
 }

packages/core/src/render3/component.ts

@@ -13,10 +13,10 @@ import {ComponentRef as viewEngine_ComponentRef} from '../linker/component_facto
 import {EmbeddedViewRef as viewEngine_EmbeddedViewRef} from '../linker/view_ref';
 
 import {assertNotNull} from './assert';
-import {NG_HOST_SYMBOL, createError, createLView, directive, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions';
-import {ComponentDef, ComponentType} from './interfaces/definition';
+import {NG_HOST_SYMBOL, createError, createLView, directive, directiveCreate, enterView, hostElement, leaveView, locateHostElement, renderComponentOrTemplate} from './instructions';
+import {ComponentDef, ComponentType, TypedComponentDef} from './interfaces/definition';
 import {LElementNode} from './interfaces/node';
-import {RElement, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
+import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
 import {notImplemented, stringify} from './util';
 
 
@@ -166,7 +166,8 @@ export const NULL_INJECTOR: Injector = {
 export function renderComponent<T>(
     componentType: ComponentType<T>, opts: CreateComponentOptions = {}): T {
   const rendererFactory = opts.rendererFactory || domRendererFactory3;
-  const componentDef = componentType.ngComponentDef;
+  const componentDef = componentType.ngComponentDef as TypedComponentDef<T>;
+  if (componentDef.type != componentType) componentDef.type = componentType;
   let component: T;
   const hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag);
   const oldView = enterView(
@@ -176,7 +177,7 @@ export function renderComponent<T>(
     // Create element node at index 0 in data array
     hostElement(hostNode, componentDef);
     // Create directive instance with n() and store at index 1 in data array (el is 0)
-    component = directive(1, componentDef.n(), componentDef);
+    component = directiveCreate(1, componentDef.n(), componentDef);
   } finally {
     leaveView(oldView);
   }

packages/core/src/render3/definition.ts

@@ -32,7 +32,6 @@ import {ComponentDef, ComponentDefArgs, DirectiveDef, DirectiveDefArgs} from './
  */
 export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): ComponentDef<T> {
   const def = <ComponentDef<any>>{
-    type: componentDefinition.type,
     diPublic: null,
     n: componentDefinition.factory,
     tag: (componentDefinition as ComponentDefArgs<T>).tag || null !,
@@ -44,6 +43,7 @@ export function defineComponent<T>(componentDefinition: ComponentDefArgs<T>): Co
     outputs: invertObject(componentDefinition.outputs),
     methods: invertObject(componentDefinition.methods),
     rendererType: resolveRendererType2(componentDefinition.rendererType) || null,
+    exportAs: componentDefinition.exportAs,
   };
   const feature = componentDefinition.features;
   feature && feature.forEach((fn) => fn(def));

packages/core/src/render3/di.ts

@@ -17,7 +17,7 @@ import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_co
 import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, ViewRef as viewEngine_ViewRef} from '../linker/view_ref';
 import {Type} from '../type';
 
-import {ComponentTemplate, DirectiveDef} from './interfaces/definition';
+import {ComponentTemplate, DirectiveDef, TypedDirectiveDef} from './interfaces/definition';
 import {LInjector} from './interfaces/injector';
 import {LContainerNode, LElementNode, LNodeFlags} from './interfaces/node';
 import {assertNodeType} from './node_assert';
@@ -147,7 +147,7 @@ function createInjectionError(text: string, token: any) {
  * @param di The node injector in which a directive will be added
  * @param def The definition of the directive to be made public
  */
-export function diPublicInInjector(di: LInjector, def: DirectiveDef<any>): void {
+export function diPublicInInjector(di: LInjector, def: TypedDirectiveDef<any>): void {
   bloomAdd(di, def.type);
 }
 
@@ -211,7 +211,7 @@ export function getOrCreateInjectable<T>(di: LInjector, token: Type<T>, flags?:
         for (let i = start, ii = start + size; i < ii; i++) {
           // Get the definition for the directive at this index and, if it is injectable (diPublic),
           // and matches the given token, return the directive instance.
-          const directiveDef = ngStaticData[i] as DirectiveDef<any>;
+          const directiveDef = ngStaticData[i] as TypedDirectiveDef<any>;
           if (directiveDef.diPublic && directiveDef.type == token) {
             return node.view.data[i];
           }

packages/core/src/render3/index.ts

@@ -39,8 +39,7 @@ export {
 
   componentRefresh as r,
 
-  containerStart as C,
-  containerEnd as c,
+  container as C,
   containerRefreshStart as cR,
   containerRefreshEnd as cr,
 
@@ -84,3 +83,4 @@ export {
   defineDirective,
 };
 export {createComponentRef, detectChanges, getHostElement, markDirty, renderComponent};
+export {InjectFlags} from './di';