feat(compiler): initial version of the compiler.

Supports: - binds text nodes, element properties and directive properties - locates decorator, component and template directives. - inline templates of components The compiler is built using a pipeline design, see core/src/compiler/pipeline package. Integration tests to show how the compiler, change_detection and DI work together: core/test/compiler/integration_spec.js

Author: tbosch

modules/benchmarks/src/compiler/selector_benchmark.js

@@ -1,4 +1,5 @@
-import {SelectorMatcher, CssSelector} from "core/compiler/selector";
+import {SelectorMatcher} from "core/compiler/selector";
+import {CssSelector} from "core/compiler/selector";
 import {StringWrapper, Math} from 'facade/lang';
 import {ListWrapper} from 'facade/collection';
 

modules/change_detection/src/watch_group.js

@@ -1,6 +1,6 @@
 import {ProtoRecord, Record} from './record';
 import {FIELD, IMPLEMENTS, isBlank, isPresent} from 'facade/lang';
-import {AST, AccessMember, ImplicitReceiver, AstVisitor} from './parser/ast';
+import {AST, AccessMember, ImplicitReceiver, AstVisitor, Binary, LiteralPrimitive} from './parser/ast';
 
 export class ProtoWatchGroup {
  @FIELD('headRecord:ProtoRecord')
@@ -126,6 +126,17 @@ class ProtoRecordCreator {
  //do nothing
  }
 
+ // TODO: add tests for this method!
+ visitLiteralPrimitive(ast:LiteralPrimitive) {
+ // do nothing
+ }
+
+ // TODO: add tests for this method!
+ visitBinary(ast:Binary) {
+ ast.left.visit(this);
+ ast.right.visit(this);
+ }
+
  visitAccessMember(ast:AccessMember) {
  ast.receiver.visit(this);
  this.add(new ProtoRecord(this.protoWatchGroup, ast.name, null));

modules/core/src/annotations/component.js

@@ -1,26 +1,29 @@
 import {Directive} from './directive';
-import {ABSTRACT, CONST} from 'facade/lang';
+import {CONST} from 'facade/lang';
 
 export class Component extends Directive {
  @CONST()
  constructor({
  selector,
+ bind,
  lightDomServices,
  implementsTypes,
  template,
  elementServices,
  componentServices
  }:{
  selector:String,
+ bind:Object,
  template:TemplateConfig,
  lightDomServices:DomServicesFunction,
  shadowDomServices:DomServicesFunction,
  componentServices:ComponentServicesFunction,
  implementsTypes:Array<Type>
- })
+ }={})
  {
  super({
  selector: selector,
+ bind: bind,
  lightDomServices: lightDomServices,
  implementsTypes: implementsTypes});
  this.template = template;

modules/core/src/annotations/decorator.js

@@ -0,0 +1,25 @@
+import {Directive} from './directive';
+import {CONST} from 'facade/lang';
+
+export class Decorator extends Directive {
+ @CONST()
+ constructor({
+ selector,
+ bind,
+ lightDomServices,
+ implementsTypes
+ }:{
+ selector:String,
+ bind:Object,
+ lightDomServices:ElementServicesFunction,
+ implementsTypes:Array<Type>
+ }={})
+ {
+ super({
+ selector: selector,
+ bind: bind,
+ lightDomServices: lightDomServices,
+ implementsTypes: implementsTypes
+ });
+ }
+}

modules/core/src/annotations/directive.js

@@ -8,16 +8,19 @@ export class Directive {
  @CONST()
  constructor({
  selector,
+ bind,
  lightDomServices,
  implementsTypes
  }:{
  selector:String,
+ bind:Object,
  lightDomServices:ElementServicesFunction,
  implementsTypes:Array<Type>
  })
  {
  this.selector = selector;
  this.lightDomServices = lightDomServices;
  this.implementsTypes = implementsTypes;
+ this.bind = bind;
  }
 }

modules/core/src/annotations/template.js

@@ -0,0 +1,25 @@
+import {Directive} from './directive';
+import {CONST} from 'facade/lang';
+
+export class Template extends Directive {
+ @CONST()
+ constructor({
+ selector,
+ bind,
+ lightDomServices,
+ implementsTypes
+ }:{
+ selector:String,
+ bind:Object,
+ lightDomServices:ElementServicesFunction,
+ implementsTypes:Array<Type>
+ }={})
+ {
+ super({
+ selector: selector,
+ bind: bind,
+ lightDomServices: lightDomServices,
+ implementsTypes: implementsTypes
+ });
+ }
+}

modules/core/src/annotations/template_config.js

@@ -5,17 +5,20 @@ export class TemplateConfig {
  @CONST()
  constructor({
  url,
+ inline,
  directives,
  formatters,
  source
  }: {
  url: String,
+ inline: String,
  directives: List<Type>,
  formatters: List<Type>,
  source: List<TemplateConfig>
  })
  {
  this.url = url;
+ this.inline = inline;
  this.directives = directives;
  this.formatters = formatters;
  this.source = source;

modules/core/src/compiler/annotated_type.js

@@ -1,8 +1,11 @@
 import {Type, FIELD} from 'facade/lang';
 import {Directive} from '../annotations/directive'
 
+/**
+ * Combination of a type with the Directive annotation
+ */
 export class AnnotatedType {
- constructor(annotation:Directive, type:Type) {
+ constructor(type:Type, annotation:Directive) {
  this.annotation = annotation;
  this.type = type;
  }

modules/core/src/compiler/annotation_extractor.js

@@ -1,28 +1,71 @@
-import {Type} from 'facade/lang';
-import {Promise} from 'facade/async';
-import {Element} from 'facade/dom';
-//import {ProtoView} from './view';
+import {Type, FIELD, isBlank, isPresent} from 'facade/lang';
+import {Promise, PromiseWrapper} from 'facade/async';
+import {List, ListWrapper} from 'facade/collection';
+import {DOM, Element} from 'facade/dom';
+
+import {Parser} from 'change_detection/parser/parser';
+import {ClosureMap} from 'change_detection/parser/closure_map';
+
+import {Reflector} from './reflector';
+import {ProtoView} from './view';
+import {CompilePipeline} from './pipeline/compile_pipeline';
+import {CompileElement} from './pipeline/compile_element';
+import {createDefaultSteps} from './pipeline/default_steps';
 import {TemplateLoader} from './template_loader';
-import {FIELD} from 'facade/lang';
+import {AnnotatedType} from './annotated_type';
 
+/**
+ * The compiler loads and translates the html templates of components into
+ * nested ProtoViews. To decompose its functionality it uses
+ * the CompilePipeline and the CompileSteps.
+ */
 export class Compiler {
-
- @FIELD('final _templateLoader:TemplateLoader')
- constructor(templateLoader:TemplateLoader) {
+ constructor(templateLoader:TemplateLoader, reflector: Reflector, parser:Parser, closureMap:ClosureMap) {
  this._templateLoader = templateLoader;
+ this._reflector = reflector;
+ this._parser = parser;
+ this._closureMap = closureMap;
  }
 
- /**
- * # Why promise?
- * - compilation will load templates. Instantiating views before templates are loaded will
- * complicate the Directive code. BENEFIT: view instantiation become synchrnous.
- * # Why result that is independent of injector?
- * - don't know about injector in deserialization
- * - compile does not need the injector, only the ViewFactory does
- */
- compile(component:Type, element:Element/* = null*/):Promise/*<ProtoView>*/ {
- return null;
+ createSteps(component:AnnotatedType):List<CompileStep> {
+ var directives = component.annotation.template.directives;
+ var annotatedDirectives = ListWrapper.create();
+ for (var i=0; i<directives.length; i++) {
+ ListWrapper.push(annotatedDirectives, this._reflector.annotatedType(directives[i]));
+ }
+ return createDefaultSteps(this._parser, this._closureMap, annotatedDirectives);
  }
 
+ compile(component:Type, templateRoot:Element = null):Promise<ProtoView> {
+ // TODO load all components transitively from the cache first
+ var cache = null;
+ return PromiseWrapper.resolve(this._compileAllCached(
+ this._reflector.annotatedType(component),
+ cache,
+ templateRoot)
+ );
+ }
 
+ _compileAllCached(component:AnnotatedType, cache, templateRoot:Element = null):ProtoView {
+ if (isBlank(templateRoot)) {
+ // TODO: read out the cache if templateRoot = null. Could contain:
+ // - templateRoot string
+ // - precompiled template
+ // - ProtoView
+ templateRoot = DOM.createTemplate(component.annotation.template.inline);
+ }
+ var pipeline = new CompilePipeline(this.createSteps(component));
+ var compileElements = pipeline.process(templateRoot);
+ var rootProtoView = compileElements[0].inheritedProtoView;
+ // TODO: put the rootProtoView into the cache to support recursive templates!
+
+ for (var i=0; i<compileElements.length; i++) {
+ var ce = compileElements[i];
+ if (isPresent(ce.componentDirective)) {
+ ce.inheritedElementBinder.nestedProtoView = this._compileAllCached(ce.componentDirective, cache, null);
+ }
+ }
+
+ return rootProtoView;
+ }
 }