feat(compiler): support creating template commands

Closes #4142

modules/angular2/test/compiler/command_compiler_spec.ts

@@ -0,0 +1,489 @@
+import {
+  ddescribe,
+  describe,
+  xdescribe,
+  it,
+  iit,
+  xit,
+  expect,
+  beforeEach,
+  afterEach,
+  AsyncTestCompleter,
+  inject
+} from 'angular2/test_lib';
+
+import {IS_DART} from '../platform';
+import {CONST_EXPR, stringify, isType, Type, isBlank} from 'angular2/src/core/facade/lang';
+import {PromiseWrapper, Promise} from 'angular2/src/core/facade/async';
+import {HtmlParser} from 'angular2/src/compiler/html_parser';
+import {TemplateParser} from 'angular2/src/compiler/template_parser';
+import {MockSchemaRegistry} from './template_parser_spec';
+import {Parser, Lexer} from 'angular2/src/core/change_detection/change_detection';
+import {
+  CommandVisitor,
+  TextCmd,
+  NgContentCmd,
+  BeginElementCmd,
+  BeginComponentCmd,
+  EmbeddedTemplateCmd,
+  TemplateCmd,
+  visitAllCommands,
+  CompiledTemplate
+} from 'angular2/src/core/compiler/template_commands';
+import {CommandCompiler} from 'angular2/src/compiler/command_compiler';
+import {
+  DirectiveMetadata,
+  TypeMetadata,
+  TemplateMetadata,
+  SourceModule
+} from 'angular2/src/compiler/api';
+import {ViewEncapsulation} from 'angular2/src/core/render/api';
+import {evalModule} from './eval_module';
+import {escapeSingleQuoteString} from 'angular2/src/compiler/util';
+
+const BEGIN_ELEMENT = 'BEGIN_ELEMENT';
+const END_ELEMENT = 'END_ELEMENT';
+const BEGIN_COMPONENT = 'BEGIN_COMPONENT';
+const END_COMPONENT = 'END_COMPONENT';
+const TEXT = 'TEXT';
+const NG_CONTENT = 'NG_CONTENT';
+const EMBEDDED_TEMPLATE = 'EMBEDDED_TEMPLATE';
+
+// Attention: These module names have to correspond to real modules!
+const MODULE_NAME = 'angular2/test/compiler/command_compiler_spec';
+const TEMPLATE_COMMANDS_MODULE_NAME = 'angular2/src/core/compiler/template_commands';
+
+// Attention: read by eval!
+export class RootComp {}
+export class SomeDir {}
+export class AComp {}
+
+var RootCompTypeMeta =
+    new TypeMetadata({typeName: 'RootComp', id: 1, type: RootComp, typeUrl: MODULE_NAME});
+var SomeDirTypeMeta =
+    new TypeMetadata({typeName: 'SomeDir', id: 2, type: SomeDir, typeUrl: MODULE_NAME});
+var ACompTypeMeta = new TypeMetadata({typeName: 'AComp', id: 3, type: AComp, typeUrl: MODULE_NAME});
+
+var NESTED_COMPONENT = new CompiledTemplate('someNestedComponentId', []);
+
+export function main() {
+  describe('CommandCompiler', () => {
+    var domParser: HtmlParser;
+    var parser: TemplateParser;
+    var commandCompiler: CommandCompiler;
+    var componentTemplateFactory: Function;
+
+    beforeEach(() => {
+      domParser = new HtmlParser();
+      parser = new TemplateParser(
+          new Parser(new Lexer()),
+          new MockSchemaRegistry({'invalidProp': false}, {'mappedAttr': 'mappedProp'}));
+      commandCompiler = new CommandCompiler();
+    });
+
+    function createComp({type, selector, template, encapsulation, ngContentSelectors}: {
+      type?: TypeMetadata,
+      selector?: string,
+      template?: string,
+      encapsulation?: ViewEncapsulation,
+      ngContentSelectors?: string[]
+    }): DirectiveMetadata {
+      if (isBlank(encapsulation)) {
+        encapsulation = ViewEncapsulation.None;
+      }
+      if (isBlank(selector)) {
+        selector = 'root';
+      }
+      if (isBlank(ngContentSelectors)) {
+        ngContentSelectors = [];
+      }
+      if (isBlank(template)) {
+        template = '';
+      }
+      return new DirectiveMetadata({
+        selector: selector,
+        isComponent: true,
+        type: type,
+        template: new TemplateMetadata({
+          template: template,
+          ngContentSelectors: ngContentSelectors,
+          encapsulation: encapsulation
+        })
+      });
+    }
+
+    function createDirective(type: TypeMetadata, selector: string): DirectiveMetadata {
+      return new DirectiveMetadata({selector: selector, isComponent: false, type: type});
+    }
+
+
+    function createTests(run: Function) {
+      describe('text', () => {
+
+        it('should create unbound text commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({type: RootCompTypeMeta, template: 'a'});
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual([[TEXT, 'a', false, null]]);
+                   async.done();
+                 });
+           }));
+
+        it('should create bound text commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({type: RootCompTypeMeta, template: '{{a}}'});
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual([[TEXT, null, true, null]]);
+                   async.done();
+                 });
+           }));
+
+      });
+
+      describe('elements', () => {
+
+        it('should create unbound element commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({type: RootCompTypeMeta, template: '<div a="b">'});
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [BEGIN_ELEMENT, 'div', ['a', 'b'], [], [], [], false, null],
+                     [END_ELEMENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should create bound element commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({
+               type: RootCompTypeMeta,
+               template: '<div a="b" #some-var="someValue" (click)="someHandler">'
+             });
+             var dir = createDirective(SomeDirTypeMeta, '[a]');
+             run(rootComp, [dir])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [
+                       BEGIN_ELEMENT,
+                       'div',
+                       ['a', 'b'],
+                       ['click'],
+                       ['someVar', 'someValue'],
+                       ['SomeDirType'],
+                       true,
+                       null
+                     ],
+                     [END_ELEMENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should emulate style encapsulation', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({
+               type: RootCompTypeMeta,
+               template: '<div>',
+               encapsulation: ViewEncapsulation.Emulated
+             });
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [BEGIN_ELEMENT, 'div', ['_ngcontent-1', ''], [], [], [], false, null],
+                     [END_ELEMENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should create nested nodes', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({type: RootCompTypeMeta, template: '<div>a</div>'});
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [BEGIN_ELEMENT, 'div', [], [], [], [], false, null],
+                     [TEXT, 'a', false, null],
+                     [END_ELEMENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+      });
+
+      describe('components', () => {
+
+        it('should create component commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({
+               type: RootCompTypeMeta,
+               template: '<a a="b" #some-var="someValue" (click)="someHandler">'
+             });
+             var comp = createComp({type: ACompTypeMeta, selector: 'a'});
+             run(rootComp, [comp])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [
+                       BEGIN_COMPONENT,
+                       'a',
+                       ['a', 'b'],
+                       ['click'],
+                       ['someVar', 'someValue'],
+                       ['ACompType'],
+                       false,
+                       null,
+                       'AComp'
+                     ],
+                     [END_COMPONENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should emulate style encapsulation on host elements',
+           inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({
+               type: RootCompTypeMeta,
+               template: '<a></a>',
+               encapsulation: ViewEncapsulation.Emulated
+             });
+             var comp = createComp(
+                 {type: ACompTypeMeta, selector: 'a', encapsulation: ViewEncapsulation.Emulated});
+             run(rootComp, [comp])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [
+                       BEGIN_COMPONENT,
+                       'a',
+                       ['_nghost-3', '', '_ngcontent-1', ''],
+                       [],
+                       [],
+                       ['ACompType'],
+                       false,
+                       null,
+                       'AComp'
+                     ],
+                     [END_COMPONENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should set nativeShadow flag', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({type: RootCompTypeMeta, template: '<a></a>'});
+             var comp = createComp(
+                 {type: ACompTypeMeta, selector: 'a', encapsulation: ViewEncapsulation.Native});
+             run(rootComp, [comp])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [BEGIN_COMPONENT, 'a', [], [], [], ['ACompType'], true, null, 'AComp'],
+                     [END_COMPONENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should create nested nodes and set ngContentIndex',
+           inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({type: RootCompTypeMeta, template: '<a>t</a>'});
+             var comp = createComp({type: ACompTypeMeta, selector: 'a', ngContentSelectors: ['*']});
+             run(rootComp, [comp])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [BEGIN_COMPONENT, 'a', [], [], [], ['ACompType'], false, null, 'AComp'],
+                     [TEXT, 't', false, 0],
+                     [END_COMPONENT]
+                   ]);
+                   async.done();
+                 });
+           }));
+      });
+
+      describe('embedded templates', () => {
+        it('should create embedded template commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({
+               type: RootCompTypeMeta,
+               template: '<template a="b" #some-var="someValue"></template>'
+             });
+             var dir = createDirective(SomeDirTypeMeta, '[a]');
+             run(rootComp, [dir])
+                 .then((data) => {
+                   expect(data).toEqual([
+                     [
+                       EMBEDDED_TEMPLATE,
+                       ['a', 'b'],
+                       ['someVar', 'someValue'],
+                       ['SomeDirType'],
+                       false,
+                       null,
+                       []
+                     ]
+                   ]);
+                   async.done();
+                 });
+           }));
+
+        it('should created nested nodes', inject([AsyncTestCompleter], (async) => {
+             var rootComp =
+                 createComp({type: RootCompTypeMeta, template: '<template>t</template>'});
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual(
+                       [[EMBEDDED_TEMPLATE, [], [], [], false, null, [[TEXT, 't', false, null]]]]);
+                   async.done();
+                 });
+           }));
+
+        it('should calculate wether the template is merged based on nested ng-content elements',
+           inject([AsyncTestCompleter], (async) => {
+             var rootComp = createComp({
+               type: RootCompTypeMeta,
+               template: '<template><ng-content></ng-content></template>'
+             });
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual(
+                       [[EMBEDDED_TEMPLATE, [], [], [], true, null, [[NG_CONTENT, null]]]]);
+                   async.done();
+                 });
+           }));
+
+      });
+
+      describe('ngContent', () => {
+        it('should create ng-content commands', inject([AsyncTestCompleter], (async) => {
+             var rootComp =
+                 createComp({type: RootCompTypeMeta, template: '<ng-content></ng-content>'});
+             run(rootComp, [])
+                 .then((data) => {
+                   expect(data).toEqual([[NG_CONTENT, null]]);
+                   async.done();
+                 });
+           }));
+      });
+    }
+
+    describe('compileComponentRuntime', () => {
+      beforeEach(() => {
+        componentTemplateFactory = (directiveType: TypeMetadata) => {
+          return new CompiledTemplate(directiveType.typeName, []);
+        };
+      });
+
+      function run(component: DirectiveMetadata, directives: DirectiveMetadata[]):
+          Promise<any[][]> {
+        var parsedTemplate = parser.parse(
+            domParser.parse(component.template.template, component.type.typeName), directives);
+        var commands = commandCompiler.compileComponentRuntime(component, parsedTemplate,
+                                                               componentTemplateFactory);
+        return PromiseWrapper.resolve(humanize(commands));
+      }
+
+      createTests(run);
+    });
+
+
+    describe('compileComponentCodeGen', () => {
+      beforeEach(() => {
+        componentTemplateFactory = (directiveType: TypeMetadata, imports: string[][]) => {
+          imports.push([TEMPLATE_COMMANDS_MODULE_NAME, 'tcm']);
+          return `new tcm.CompiledTemplate(${escapeSingleQuoteString(directiveType.typeName)}, [])`;
+        };
+      });
+
+      function run(component: DirectiveMetadata, directives: DirectiveMetadata[]):
+          Promise<any[][]> {
+        var parsedTemplate = parser.parse(
+            domParser.parse(component.template.template, component.type.typeName), directives);
+        var sourceModule = commandCompiler.compileComponentCodeGen(component, parsedTemplate,
+                                                                   componentTemplateFactory);
+        var testableModule = createTestableModule(sourceModule);
+        return evalModule(testableModule.source, testableModule.imports, null);
+      }
+
+      createTests(run);
+    });
+
+  });
+}
+
+// Attention: read by eval!
+export function humanize(cmds: TemplateCmd[]): any[][] {
+  var visitor = new CommandHumanizer();
+  visitAllCommands(visitor, cmds);
+  return visitor.result;
+}
+
+function checkAndStringifyType(type: Type): string {
+  expect(isType(type)).toBe(true);
+  return `${stringify(type)}Type`;
+}
+
+class CommandHumanizer implements CommandVisitor {
+  result: any[][] = [];
+  visitText(cmd: TextCmd, context: any): any {
+    this.result.push([TEXT, cmd.value, cmd.isBound, cmd.ngContentIndex]);
+    return null;
+  }
+  visitNgContent(cmd: NgContentCmd, context: any): any {
+    this.result.push([NG_CONTENT, cmd.ngContentIndex]);
+    return null;
+  }
+  visitBeginElement(cmd: BeginElementCmd, context: any): any {
+    this.result.push([
+      BEGIN_ELEMENT,
+      cmd.name,
+      cmd.attrNameAndValues,
+      cmd.eventNames,
+      cmd.variableNameAndValues,
+      cmd.directives.map(checkAndStringifyType),
+      cmd.isBound,
+      cmd.ngContentIndex
+    ]);
+    return null;
+  }
+  visitEndElement(context: any): any {
+    this.result.push([END_ELEMENT]);
+    return null;
+  }
+  visitBeginComponent(cmd: BeginComponentCmd, context: any): any {
+    this.result.push([
+      BEGIN_COMPONENT,
+      cmd.name,
+      cmd.attrNameAndValues,
+      cmd.eventNames,
+      cmd.variableNameAndValues,
+      cmd.directives.map(checkAndStringifyType),
+      cmd.nativeShadow,
+      cmd.ngContentIndex,
+      cmd.template.id
+    ]);
+    return null;
+  }
+  visitEndComponent(context: any): any {
+    this.result.push([END_COMPONENT]);
+    return null;
+  }
+  visitEmbeddedTemplate(cmd: EmbeddedTemplateCmd, context: any): any {
+    this.result.push([
+      EMBEDDED_TEMPLATE,
+      cmd.attrNameAndValues,
+      cmd.variableNameAndValues,
+      cmd.directives.map(checkAndStringifyType),
+      cmd.isMerged,
+      cmd.ngContentIndex,
+      humanize(cmd.children)
+    ]);
+    return null;
+  }
+}
+
+function createTestableModule(sourceModule: SourceModule): SourceModule {
+  var testableSource;
+  var testableImports = [[MODULE_NAME, 'mocks']].concat(sourceModule.imports);
+  if (IS_DART) {
+    testableSource = `${sourceModule.source}
+  run(_) { return mocks.humanize(COMMANDS); }`;
+  } else {
+    testableSource = `${sourceModule.source}
+  exports.run = function(_) { return mocks.humanize(COMMANDS); }`;
+  }
+  return new SourceModule(null, testableSource, testableImports);
+}

modules/angular2/test/compiler/style_compiler_spec.ts

@@ -20,12 +20,8 @@ import {PromiseWrapper, Promise} from 'angular2/src/core/facade/async';
 import {evalModule} from './eval_module';
 import {StyleCompiler} from 'angular2/src/compiler/style_compiler';
 import {UrlResolver} from 'angular2/src/core/services/url_resolver';
-import {
-  DirectiveMetadata,
-  TemplateMetadata,
-  TypeMetadata,
-  ViewEncapsulation
-} from 'angular2/src/compiler/api';
+import {DirectiveMetadata, TemplateMetadata, TypeMetadata} from 'angular2/src/compiler/api';
+import {ViewEncapsulation} from 'angular2/src/core/render/api';
 
 // Attention: These module names have to correspond to real modules!
 const MODULE_NAME = 'angular2/test/compiler/style_compiler_spec';

modules/angular2/test/compiler/template_parser_spec.ts

@@ -4,7 +4,12 @@ import {isPresent} from 'angular2/src/core/facade/lang';
 import {Parser, Lexer} from 'angular2/src/core/change_detection/change_detection';
 import {TemplateParser, splitClasses} from 'angular2/src/compiler/template_parser';
 import {HtmlParser} from 'angular2/src/compiler/html_parser';
-import {DirectiveMetadata, TypeMetadata, ChangeDetectionMetadata} from 'angular2/src/compiler/api';
+import {
+  DirectiveMetadata,
+  TypeMetadata,
+  ChangeDetectionMetadata,
+  TemplateMetadata
+} from 'angular2/src/compiler/api';
 import {
   templateVisitAll,
   TemplateAstVisitor,
@@ -62,7 +67,7 @@ export function main() {
         it('should parse elements with attributes', () => {
           expect(humanizeTemplateAsts(parse('<div a=b>', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [AttrAst, 'a', 'b', 'TestComp > div:nth-child(0)[a=b]']
               ]);
         });
@@ -71,7 +76,7 @@ export function main() {
       it('should parse ngContent', () => {
         var parsed = parse('<ng-content select="a">', []);
         expect(humanizeTemplateAsts(parsed))
-            .toEqual([[NgContentAst, 'a', 'TestComp > ng-content:nth-child(0)']]);
+            .toEqual([[NgContentAst, 'TestComp > ng-content:nth-child(0)']]);
       });
 
       it('should parse bound text nodes', () => {
@@ -84,7 +89,7 @@ export function main() {
         it('should parse and camel case bound properties', () => {
           expect(humanizeTemplateAsts(parse('<div [some-prop]="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Property,
@@ -99,7 +104,7 @@ export function main() {
         it('should normalize property names via the element schema', () => {
           expect(humanizeTemplateAsts(parse('<div [mapped-attr]="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Property,
@@ -114,7 +119,7 @@ export function main() {
         it('should parse and camel case bound attributes', () => {
           expect(humanizeTemplateAsts(parse('<div [attr.some-attr]="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Attribute,
@@ -129,7 +134,7 @@ export function main() {
         it('should parse and dash case bound classes', () => {
           expect(humanizeTemplateAsts(parse('<div [class.some-class]="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Class,
@@ -144,7 +149,7 @@ export function main() {
         it('should parse and camel case bound styles', () => {
           expect(humanizeTemplateAsts(parse('<div [style.some-style]="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Style,
@@ -159,7 +164,7 @@ export function main() {
         it('should parse bound properties via [...] and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div [prop]="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Property,
@@ -174,7 +179,7 @@ export function main() {
         it('should parse bound properties via bind- and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div bind-prop="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Property,
@@ -189,7 +194,7 @@ export function main() {
         it('should parse bound properties via {{...}} and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div prop="{{v}}">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Property,
@@ -208,7 +213,7 @@ export function main() {
         it('should parse bound events with a target', () => {
           expect(humanizeTemplateAsts(parse('<div (window:event)="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundEventAst,
                   'event',
@@ -222,7 +227,7 @@ export function main() {
         it('should parse bound events via (...) and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div (event)="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [BoundEventAst, 'event', null, 'v', 'TestComp > div:nth-child(0)[(event)=v]']
               ]);
         });
@@ -230,7 +235,7 @@ export function main() {
         it('should camel case event names', () => {
           expect(humanizeTemplateAsts(parse('<div (some-event)="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundEventAst,
                   'someEvent',
@@ -244,7 +249,7 @@ export function main() {
         it('should parse bound events via on- and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div on-event="v">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [BoundEventAst, 'event', null, 'v', 'TestComp > div:nth-child(0)[on-event=v]']
               ]);
         });
@@ -256,7 +261,7 @@ export function main() {
            () => {
              expect(humanizeTemplateAsts(parse('<div [(prop)]="v">', [])))
                  .toEqual([
-                   [ElementAst, 'TestComp > div:nth-child(0)'],
+                   [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                    [
                      BoundElementPropertyAst,
                      PropertyBindingType.Property,
@@ -279,7 +284,7 @@ export function main() {
            () => {
              expect(humanizeTemplateAsts(parse('<div bindon-prop="v">', [])))
                  .toEqual([
-                   [ElementAst, 'TestComp > div:nth-child(0)'],
+                   [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                    [
                      BoundElementPropertyAst,
                      PropertyBindingType.Property,
@@ -305,7 +310,7 @@ export function main() {
         it('should parse variables via #... and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div #a="b">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]']
               ]);
         });
@@ -313,7 +318,7 @@ export function main() {
         it('should parse variables via var-... and not report them as attributes', () => {
           expect(humanizeTemplateAsts(parse('<div var-a="b">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[var-a=b]']
               ]);
         });
@@ -321,7 +326,7 @@ export function main() {
         it('should camel case variables', () => {
           expect(humanizeTemplateAsts(parse('<div var-some-a="b">', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'someA', 'b', 'TestComp > div:nth-child(0)[var-some-a=b]']
               ]);
         });
@@ -329,7 +334,7 @@ export function main() {
         it('should use $implicit as variable name if none was specified', () => {
           expect(humanizeTemplateAsts(parse('<div var-a>', [])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'a', '$implicit', 'TestComp > div:nth-child(0)[var-a=]']
               ]);
         });
@@ -341,11 +346,15 @@ export function main() {
               {selector: '[a=b]', type: new TypeMetadata({typeName: 'DirA'})});
           var dirB =
               new DirectiveMetadata({selector: '[a]', type: new TypeMetadata({typeName: 'DirB'})});
-          var comp = new DirectiveMetadata(
-              {selector: 'div', isComponent: true, type: new TypeMetadata({typeName: 'ZComp'})});
+          var comp = new DirectiveMetadata({
+            selector: 'div',
+            isComponent: true,
+            type: new TypeMetadata({typeName: 'ZComp'}),
+            template: new TemplateMetadata({ngContentSelectors: []})
+          });
           expect(humanizeTemplateAsts(parse('<div a="b">', [dirB, dirA, comp])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [AttrAst, 'a', 'b', 'TestComp > div:nth-child(0)[a=b]'],
                 [DirectiveAst, comp, 'TestComp > div:nth-child(0)'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
@@ -360,7 +369,7 @@ export function main() {
               new DirectiveMetadata({selector: '[b]', type: new TypeMetadata({typeName: 'DirB'})});
           expect(humanizeTemplateAsts(parse('<div [a]="b">', [dirA, dirB])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
                   PropertyBindingType.Property,
@@ -380,7 +389,7 @@ export function main() {
               new DirectiveMetadata({selector: '[b]', type: new TypeMetadata({typeName: 'DirB'})});
           expect(humanizeTemplateAsts(parse('<div #a="b">', [dirA, dirB])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[#a=b]'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)']
               ]);
@@ -394,7 +403,7 @@ export function main() {
           });
           expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
                 [
                   BoundElementPropertyAst,
@@ -415,7 +424,7 @@ export function main() {
           });
           expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
                 [BoundEventAst, 'a', null, 'expr', 'TestComp > div:nth-child(0)']
               ]);
@@ -429,7 +438,7 @@ export function main() {
           });
           expect(humanizeTemplateAsts(parse('<div [a-prop]="expr"></div>', [dirA])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
                 [
                   BoundDirectivePropertyAst,
@@ -448,7 +457,7 @@ export function main() {
           });
           expect(humanizeTemplateAsts(parse('<div [a]="expr"></div>', [dirA])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
                 [BoundDirectivePropertyAst, 'b', 'expr', 'TestComp > div:nth-child(0)[[a]=expr]']
               ]);
@@ -462,7 +471,7 @@ export function main() {
           });
           expect(humanizeTemplateAsts(parse('<div a="literal"></div>', [dirA])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [AttrAst, 'a', 'literal', 'TestComp > div:nth-child(0)[a=literal]'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
                 [
@@ -482,7 +491,7 @@ export function main() {
           });
           expect(humanizeTemplateAsts(parse('<div></div>', [dirA])))
               .toEqual([
-                [ElementAst, 'TestComp > div:nth-child(0)'],
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                 [DirectiveAst, dirA, 'TestComp > div:nth-child(0)']
               ]);
         });
@@ -501,7 +510,7 @@ export function main() {
           expect(humanizeTemplateAsts(parse('<div template>', [])))
               .toEqual([
                 [EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
-                [ElementAst, 'TestComp > div:nth-child(0)']
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)']
               ]);
         });
 
@@ -516,7 +525,7 @@ export function main() {
                   'test',
                   'TestComp > div:nth-child(0)[template=ngIf test]'
                 ],
-                [ElementAst, 'TestComp > div:nth-child(0)']
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)']
               ]);
         });
 
@@ -525,7 +534,7 @@ export function main() {
               .toEqual([
                 [EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[template=ngIf #a=b]'],
-                [ElementAst, 'TestComp > div:nth-child(0)']
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)']
               ]);
         });
 
@@ -534,7 +543,7 @@ export function main() {
               .toEqual([
                 [EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
                 [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[template=ngIf var a=b]'],
-                [ElementAst, 'TestComp > div:nth-child(0)']
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)']
               ]);
         });
 
@@ -557,7 +566,7 @@ export function main() {
                     'b',
                     'TestComp > div:nth-child(0)[template=a b]'
                   ],
-                  [ElementAst, 'TestComp > div:nth-child(0)'],
+                  [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                   [AttrAst, 'b', '', 'TestComp > div:nth-child(0)[b=]'],
                   [DirectiveAst, dirB, 'TestComp > div:nth-child(0)']
                 ]);
@@ -573,7 +582,7 @@ export function main() {
                   [EmbeddedTemplateAst, 'TestComp > div:nth-child(0)'],
                   [VariableAst, 'a', 'b', 'TestComp > div:nth-child(0)[template=#a=b]'],
                   [DirectiveAst, dirA, 'TestComp > div:nth-child(0)'],
-                  [ElementAst, 'TestComp > div:nth-child(0)'],
+                  [ElementAst, 'div', 'TestComp > div:nth-child(0)'],
                   [AttrAst, 'b', '', 'TestComp > div:nth-child(0)[b=]'],
                   [DirectiveAst, dirB, 'TestComp > div:nth-child(0)']
                 ]);
@@ -592,13 +601,94 @@ export function main() {
                   'test',
                   'TestComp > div:nth-child(0)[*ng-if=test]'
                 ],
-                [ElementAst, 'TestComp > div:nth-child(0)']
+                [ElementAst, 'div', 'TestComp > div:nth-child(0)']
               ]);
         });
       });
 
     });
 
+    describe('content projection', () => {
+      function createComp(selector: string, ngContentSelectors: string[]): DirectiveMetadata {
+        return new DirectiveMetadata({
+          selector: selector,
+          isComponent: true,
+          type: new TypeMetadata({typeName: 'SomeComp'}),
+          template: new TemplateMetadata({ngContentSelectors: ngContentSelectors})
+        })
+      }
+
+      describe('project text nodes', () => {
+        it('should project text nodes with wildcard selector', () => {
+          expect(humanizeContentProjection(parse('<div>hello</div>', [createComp('div', ['*'])])))
+              .toEqual([['div', null], ['#text(hello)', 0]]);
+        });
+      });
+
+      describe('project elements', () => {
+        it('should project elements with wildcard selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><span></span></div>', [createComp('div', ['*'])])))
+              .toEqual([['div', null], ['span', 0]]);
+        });
+
+        it('should project elements with css selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><a x></a><b></b></div>', [createComp('div', ['a[x]'])])))
+              .toEqual([['div', null], ['a', 0], ['b', null]]);
+        });
+      });
+
+      describe('embedded templates', () => {
+        it('should project embedded templates with wildcard selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><template></template></div>', [createComp('div', ['*'])])))
+              .toEqual([['div', null], ['template', 0]]);
+        });
+
+        it('should project embedded templates with css selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><template x></template><template></template></div>',
+                           [createComp('div', ['template[x]'])])))
+              .toEqual([['div', null], ['template', 0], ['template', null]]);
+        });
+      });
+
+      describe('ng-content', () => {
+        it('should project ng-content with wildcard selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><ng-content></ng-content></div>', [createComp('div', ['*'])])))
+              .toEqual([['div', null], ['ng-content', 0]]);
+        });
+
+        it('should project ng-content with css selector', () => {
+          expect(humanizeContentProjection(
+                     parse('<div><ng-content x></ng-content><ng-content></ng-content></div>',
+                           [createComp('div', ['ng-content[x]'])])))
+              .toEqual([['div', null], ['ng-content', 0], ['ng-content', null]]);
+        });
+      });
+
+      it('should project into the first matching ng-content', () => {
+        expect(humanizeContentProjection(
+                   parse('<div>hello<b></b><a></a></div>', [createComp('div', ['a', 'b', '*'])])))
+            .toEqual([['div', null], ['#text(hello)', 2], ['b', 1], ['a', 0]]);
+      });
+
+      it('should only project direct child nodes', () => {
+        expect(humanizeContentProjection(
+                   parse('<div><span><a></a></span><a></a></div>', [createComp('div', ['a'])])))
+            .toEqual([['div', null], ['span', null], ['a', null], ['a', 0]]);
+      });
+
+      it('should project nodes of nested components', () => {
+        expect(humanizeContentProjection(
+                   parse('<a><b>hello</b></a>', [createComp('a', ['*']), createComp('b', ['*'])])))
+            .toEqual([['a', null], ['b', 0], ['#text(hello)', 0]]);
+      });
+
+    });
+
     describe('splitClasses', () => {
       it('should keep an empty class', () => { expect(splitClasses('a')).toEqual(['a']); });
 
@@ -629,18 +719,30 @@ Parser Error: Unexpected token 'b' at column 3 in [a b] in TestComp > div:nth-ch
          });
 
       it('should not allow more than 1 component per element', () => {
-        var dirA = new DirectiveMetadata(
-            {selector: 'div', isComponent: true, type: new TypeMetadata({typeName: 'DirA'})});
-        var dirB = new DirectiveMetadata(
-            {selector: 'div', isComponent: true, type: new TypeMetadata({typeName: 'DirB'})});
+        var dirA = new DirectiveMetadata({
+          selector: 'div',
+          isComponent: true,
+          type: new TypeMetadata({typeName: 'DirA'}),
+          template: new TemplateMetadata({ngContentSelectors: []})
+        });
+        var dirB = new DirectiveMetadata({
+          selector: 'div',
+          isComponent: true,
+          type: new TypeMetadata({typeName: 'DirB'}),
+          template: new TemplateMetadata({ngContentSelectors: []})
+        });
         expect(() => parse('<div>', [dirB, dirA])).toThrowError(`Template parse errors:
 More than one component: DirA,DirB in TestComp > div:nth-child(0)`);
       });
 
       it('should not allow components or element nor event bindings on explicit embedded templates',
          () => {
-           var dirA = new DirectiveMetadata(
-               {selector: '[a]', isComponent: true, type: new TypeMetadata({typeName: 'DirA'})});
+           var dirA = new DirectiveMetadata({
+             selector: '[a]',
+             isComponent: true,
+             type: new TypeMetadata({typeName: 'DirA'}),
+             template: new TemplateMetadata({ngContentSelectors: []})
+           });
            expect(() => parse('<template [a]="b" (e)="f"></template>', [dirA]))
                .toThrowError(`Template parse errors:
 Components on an embedded template: DirA in TestComp > template:nth-child(0)
@@ -649,8 +751,12 @@ Event binding e on an embedded template in TestComp > template:nth-child(0)[(e)=
          });
 
       it('should not allow components or element bindings on inline embedded templates', () => {
-        var dirA = new DirectiveMetadata(
-            {selector: '[a]', isComponent: true, type: new TypeMetadata({typeName: 'DirA'})});
+        var dirA = new DirectiveMetadata({
+          selector: '[a]',
+          isComponent: true,
+          type: new TypeMetadata({typeName: 'DirA'}),
+          template: new TemplateMetadata({ngContentSelectors: []})
+        });
         expect(() => parse('<div *a="b">', [dirA])).toThrowError(`Template parse errors:
 Components on an embedded template: DirA in TestComp > div:nth-child(0)
 Property binding a not used by any directive on an embedded template in TestComp > div:nth-child(0)[*a=b]`);
@@ -668,7 +774,7 @@ export function humanizeTemplateAsts(templateAsts: TemplateAst[]): any[] {
 class TemplateHumanizer implements TemplateAstVisitor {
   result: any[] = [];
   visitNgContent(ast: NgContentAst, context: any): any {
-    this.result.push([NgContentAst, ast.select, ast.sourceInfo]);
+    this.result.push([NgContentAst, ast.sourceInfo]);
     return null;
   }
   visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
@@ -680,7 +786,7 @@ class TemplateHumanizer implements TemplateAstVisitor {
     return null;
   }
   visitElement(ast: ElementAst, context: any): any {
-    this.result.push([ElementAst, ast.sourceInfo]);
+    this.result.push([ElementAst, ast.name, ast.sourceInfo]);
     templateVisitAll(this, ast.attrs);
     templateVisitAll(this, ast.properties);
     templateVisitAll(this, ast.events);
@@ -744,6 +850,44 @@ class TemplateHumanizer implements TemplateAstVisitor {
   }
 }
 
+function humanizeContentProjection(templateAsts: TemplateAst[]): any[] {
+  var humanizer = new TemplateContentProjectionHumanizer();
+  templateVisitAll(humanizer, templateAsts);
+  return humanizer.result;
+}
+
+class TemplateContentProjectionHumanizer implements TemplateAstVisitor {
+  result: any[] = [];
+  visitNgContent(ast: NgContentAst, context: any): any {
+    this.result.push(['ng-content', ast.ngContentIndex]);
+    return null;
+  }
+  visitEmbeddedTemplate(ast: EmbeddedTemplateAst, context: any): any {
+    this.result.push(['template', ast.ngContentIndex]);
+    templateVisitAll(this, ast.children);
+    return null;
+  }
+  visitElement(ast: ElementAst, context: any): any {
+    this.result.push([ast.name, ast.ngContentIndex]);
+    templateVisitAll(this, ast.children);
+    return null;
+  }
+  visitVariable(ast: VariableAst, context: any): any { return null; }
+  visitEvent(ast: BoundEventAst, context: any): any { return null; }
+  visitElementProperty(ast: BoundElementPropertyAst, context: any): any { return null; }
+  visitAttr(ast: AttrAst, context: any): any { return null; }
+  visitBoundText(ast: BoundTextAst, context: any): any {
+    this.result.push([`#text(${expressionUnparser.unparse(ast.value)})`, ast.ngContentIndex]);
+    return null;
+  }
+  visitText(ast: TextAst, context: any): any {
+    this.result.push([`#text(${ast.value})`, ast.ngContentIndex]);
+    return null;
+  }
+  visitDirective(ast: DirectiveAst, context: any): any { return null; }
+  visitDirectiveProperty(ast: BoundDirectivePropertyAst, context: any): any { return null; }
+}
+
 export class MockSchemaRegistry implements ElementSchemaRegistry {
   constructor(public existingProperties: StringMap<string, boolean>,
               public attrPropMapping: StringMap<string, string>) {}

modules/angular2/test/compiler/util_spec.ts

@@ -0,0 +1,42 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  describe,
+  el,
+  expect,
+  iit,
+  inject,
+  it,
+  xit,
+  TestComponentBuilder
+} from 'angular2/test_lib';
+
+import {escapeSingleQuoteString, escapeDoubleQuoteString} from 'angular2/src/compiler/util';
+
+export function main() {
+  describe('util', () => {
+    describe('escapeSingleQuoteString', () => {
+      it('should escape single quotes',
+         () => { expect(escapeSingleQuoteString(`'`)).toEqual(`'\\''`); });
+
+      it('should escape backslash',
+         () => { expect(escapeSingleQuoteString('\\')).toEqual(`'\\\\'`); });
+
+      it('should escape newlines',
+         () => { expect(escapeSingleQuoteString('\n')).toEqual(`'\\n'`); });
+    });
+
+    describe('escapeDoubleQuoteString', () => {
+      it('should escape double quotes',
+         () => { expect(escapeDoubleQuoteString(`"`)).toEqual(`"\\""`); });
+
+      it('should escape backslash',
+         () => { expect(escapeDoubleQuoteString('\\')).toEqual(`"\\\\"`); });
+
+      it('should escape newlines',
+         () => { expect(escapeDoubleQuoteString('\n')).toEqual(`"\\n"`); });
+    });
+
+  });
+}