feat(render): add initial implementation of render layer

modules/angular2/src/render/dom/compiler/compile_control.js

@@ -0,0 +1,58 @@
+import {isBlank} from 'angular2/src/facade/lang';
+import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {CompileElement} from './compile_element';
+import {CompileStep} from './compile_step';
+
+/**
+ * Controls the processing order of elements.
+ * Right now it only allows to add a parent element.
+ */
+export class CompileControl {
+  _steps:List<CompileStep>;
+  _currentStepIndex:number;
+  _parent:CompileElement;
+  _results;
+  _additionalChildren;
+  constructor(steps) {
+    this._steps = steps;
+    this._currentStepIndex = 0;
+    this._parent = null;
+    this._results = null;
+    this._additionalChildren = null;
+  }
+
+  // only public so that it can be used by compile_pipeline
+  internalProcess(results, startStepIndex, parent:CompileElement, current:CompileElement) {
+    this._results = results;
+    var previousStepIndex = this._currentStepIndex;
+    var previousParent = this._parent;
+
+    for (var i=startStepIndex; i<this._steps.length; i++) {
+      var step = this._steps[i];
+      this._parent = parent;
+      this._currentStepIndex = i;
+      step.process(parent, current, this);
+      parent = this._parent;
+    }
+    ListWrapper.push(results, current);
+
+    this._currentStepIndex = previousStepIndex;
+    this._parent = previousParent;
+
+    var localAdditionalChildren = this._additionalChildren;
+    this._additionalChildren = null;
+    return localAdditionalChildren;
+  }
+
+  addParent(newElement:CompileElement) {
+    this.internalProcess(this._results, this._currentStepIndex+1, this._parent, newElement);
+    this._parent = newElement;
+  }
+
+  addChild(element:CompileElement) {
+    if (isBlank(this._additionalChildren)) {
+      this._additionalChildren = ListWrapper.create();
+    }
+    ListWrapper.push(this._additionalChildren, element);
+  }
+}

modules/angular2/src/render/dom/compiler/compile_element.js

@@ -0,0 +1,124 @@
+import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {int, isBlank, isPresent, Type, StringJoiner, assertionsEnabled} from 'angular2/src/facade/lang';
+
+import {ProtoViewBuilder, ElementBinderBuilder} from '../view/proto_view_builder';
+
+/**
+ * Collects all data that is needed to process an element
+ * in the compile process. Fields are filled
+ * by the CompileSteps starting out with the pure HTMLElement.
+ */
+export class CompileElement {
+  element;
+  _attrs:Map;
+  _classList:List;
+  isViewRoot:boolean;
+  inheritedProtoView:ProtoViewBuilder;
+  distanceToInheritedBinder:number;
+  inheritedElementBinder:ElementBinderBuilder;
+  compileChildren: boolean;
+  ignoreBindings: boolean;
+  elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of error
+
+  constructor(element, compilationUnit = '') {
+    this.element = element;
+    this._attrs = null;
+    this._classList = null;
+    this.isViewRoot = false;
+    // inherited down to children if they don't have
+    // an own protoView
+    this.inheritedProtoView = null;
+    // inherited down to children if they don't have
+    // an own elementBinder
+    this.inheritedElementBinder = null;
+    this.distanceToInheritedBinder = 0;
+    this.compileChildren = true;
+    // set to true to ignore all the bindings on the element
+    this.ignoreBindings = false;
+    // description is calculated here as compilation steps may change the element
+    var tplDesc = assertionsEnabled()? getElementDescription(element) : null;
+    if (compilationUnit !== '') {
+      this.elementDescription = compilationUnit;
+      if (isPresent(tplDesc)) this.elementDescription += ": " + tplDesc;
+    } else {
+      this.elementDescription = tplDesc;
+    }
+  }
+
+  isBound() {
+    return isPresent(this.inheritedElementBinder) && this.distanceToInheritedBinder === 0;
+  }
+
+  bindElement() {
+    if (!this.isBound()) {
+      var parentBinder = this.inheritedElementBinder;
+      this.inheritedElementBinder = this.inheritedProtoView.bindElement(this.element, this.elementDescription);
+      if (isPresent(parentBinder)) {
+        this.inheritedElementBinder.setParent(parentBinder, this.distanceToInheritedBinder);
+      }
+      this.distanceToInheritedBinder = 0;
+    }
+    return this.inheritedElementBinder;
+  }
+
+  refreshAttrs() {
+    this._attrs = null;
+  }
+
+  attrs():Map<string,string> {
+    if (isBlank(this._attrs)) {
+      this._attrs = DOM.attributeMap(this.element);
+    }
+    return this._attrs;
+  }
+
+  refreshClassList() {
+    this._classList = null;
+  }
+
+  classList():List<string> {
+    if (isBlank(this._classList)) {
+      this._classList = ListWrapper.create();
+      var elClassList = DOM.classList(this.element);
+      for (var i = 0; i < elClassList.length; i++) {
+        ListWrapper.push(this._classList, elClassList[i]);
+      }
+    }
+    return this._classList;
+  }
+
+}
+
+// return an HTML representation of an element start tag - without its content
+// this is used to give contextual information in case of errors
+function getElementDescription(domElement):string {
+  var buf = new StringJoiner();
+  var atts = DOM.attributeMap(domElement);
+
+  buf.add("<");
+  buf.add(DOM.tagName(domElement).toLowerCase());
+
+  // show id and class first to ease element identification
+  addDescriptionAttribute(buf, "id", MapWrapper.get(atts, "id"));
+  addDescriptionAttribute(buf, "class", MapWrapper.get(atts, "class"));
+  MapWrapper.forEach(atts, (attValue, attName) => {
+      if (attName !== "id" && attName !== "class") {
+          addDescriptionAttribute(buf, attName, attValue);
+      }
+  });
+
+  buf.add(">");
+  return buf.toString();
+}
+
+
+function addDescriptionAttribute(buffer:StringJoiner, attName:string, attValue) {
+  if (isPresent(attValue)) {
+      if (attValue.length === 0) {
+          buffer.add(' ' + attName);
+      } else {
+          buffer.add(' ' + attName + '="' + attValue + '"');
+      }
+  }
+}

modules/angular2/src/render/dom/compiler/compile_pipeline.js

@@ -0,0 +1,56 @@
+import {isPresent} from 'angular2/src/facade/lang';
+import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {CompileElement} from './compile_element';
+import {CompileControl} from './compile_control';
+import {CompileStep} from './compile_step';
+import {ProtoViewBuilder} from '../view/proto_view_builder';
+
+/**
+ * CompilePipeline for executing CompileSteps recursively for
+ * all elements in a template.
+ */
+export class CompilePipeline {
+  _control:CompileControl;
+  constructor(steps:List<CompileStep>) {
+    this._control = new CompileControl(steps);
+  }
+
+  process(rootElement, compilationCtxtDescription:string = ''):List {
+    var results = ListWrapper.create();
+    var rootCompileElement = new CompileElement(rootElement, compilationCtxtDescription);
+    rootCompileElement.inheritedProtoView = new ProtoViewBuilder(rootElement);
+    rootCompileElement.isViewRoot = true;
+    this._process(results, null, rootCompileElement,
+      compilationCtxtDescription
+    );
+    return results;
+  }
+
+  _process(results, parent:CompileElement, current:CompileElement, compilationCtxtDescription:string = '') {
+    var additionalChildren = this._control.internalProcess(results, 0, parent, current);
+
+    if (current.compileChildren) {
+      var node = DOM.firstChild(DOM.templateAwareRoot(current.element));
+      while (isPresent(node)) {
+        // compiliation can potentially move the node, so we need to store the
+        // next sibling before recursing.
+        var nextNode = DOM.nextSibling(node);
+        if (DOM.isElementNode(node)) {
+          var childCompileElement = new CompileElement(node, compilationCtxtDescription);
+          childCompileElement.inheritedProtoView = current.inheritedProtoView;
+          childCompileElement.inheritedElementBinder = current.inheritedElementBinder;
+          childCompileElement.distanceToInheritedBinder = current.distanceToInheritedBinder+1;
+          this._process(results, current, childCompileElement);
+        }
+        node = nextNode;
+      }
+    }
+
+    if (isPresent(additionalChildren)) {
+      for (var i=0; i<additionalChildren.length; i++) {
+        this._process(results, current, additionalChildren[i]);
+      }
+    }
+  }
+}

modules/angular2/src/render/dom/compiler/compile_step.js

@@ -0,0 +1,10 @@
+import {CompileElement} from './compile_element';
+import * as compileControlModule from './compile_control';
+
+/**
+ * One part of the compile process.
+ * Is guaranteed to be called in depth first order
+ */
+export class CompileStep {
+  process(parent:CompileElement, current:CompileElement, control:compileControlModule.CompileControl) {}
+}

modules/angular2/src/render/dom/compiler/compile_step_factory.js

@@ -0,0 +1,39 @@
+import {List} from 'angular2/src/facade/collection';
+import {Promise} from 'angular2/src/facade/async';
+
+import {Parser} from 'angular2/change_detection';
+import {Template} from '../../api';
+import {CompileStep} from './compile_step';
+import {PropertyBindingParser} from './property_binding_parser';
+import {TextInterpolationParser} from './text_interpolation_parser';
+import {DirectiveParser} from './directive_parser';
+import {ViewSplitter} from './view_splitter';
+import {ShadowDomCompileStep} from '../shadow_dom/shadow_dom_compile_step';
+import {ShadowDomStrategy} from '../shadow_dom/shadow_dom_strategy';
+
+export class CompileStepFactory {
+  createSteps(template: Template, subTaskPromises: List<Promise>):List<CompileStep> {
+    return null;
+  }
+}
+
+export class DefaultStepFactory extends CompileStepFactory {
+  _parser: Parser;
+  _shadowDomStrategy: ShadowDomStrategy;
+
+  constructor(parser: Parser, shadowDomStrategy) {
+    super();
+    this._parser = parser;
+    this._shadowDomStrategy = shadowDomStrategy;
+  }
+
+  createSteps(template: Template, subTaskPromises: List<Promise>) {
+    return [
+      new ViewSplitter(this._parser),
+      new PropertyBindingParser(this._parser),
+      new DirectiveParser(this._parser, template.directives),
+      new TextInterpolationParser(this._parser),
+      new ShadowDomCompileStep(this._shadowDomStrategy, template, subTaskPromises)
+    ];
+  }
+}

modules/angular2/src/render/dom/compiler/compiler.js

@@ -0,0 +1,41 @@
+import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
+import {BaseException} from 'angular2/src/facade/lang';
+
+import {Template, ProtoView} from '../../api';
+import {CompilePipeline} from './compile_pipeline';
+import {TemplateLoader} from './template_loader';
+import {CompileStepFactory} from './compile_step_factory';
+
+export class Compiler {
+  _templateLoader: TemplateLoader;
+  _stepFactory: CompileStepFactory;
+
+  constructor(stepFactory: CompileStepFactory, templateLoader: TemplateLoader) {
+    this._templateLoader = templateLoader;
+    this._stepFactory = stepFactory;
+  }
+
+  compile(template: Template):Promise<ProtoView> {
+    var tplPromise = this._templateLoader.load(template);
+    return PromiseWrapper.then(tplPromise,
+      (el) => this._compileTemplate(template, el),
+      (_) => { throw new BaseException(`Failed to load the template "${template.componentId}"`); }
+    );
+  }
+
+  _compileTemplate(template: Template, tplElement):Promise<ProtoView> {
+    var subTaskPromises = [];
+    var pipeline = new CompilePipeline(this._stepFactory.createSteps(template, subTaskPromises));
+    var compileElements;
+
+    compileElements = pipeline.process(tplElement, template.componentId);
+
+    var protoView = compileElements[0].inheritedProtoView.build();
+
+    if (subTaskPromises.length > 0) {
+      return PromiseWrapper.all(subTaskPromises).then((_) => protoView);
+    } else {
+      return PromiseWrapper.resolve(protoView);
+    }
+  }
+}

modules/angular2/src/render/dom/compiler/directive_parser.js

@@ -0,0 +1,139 @@
+import {isPresent, isBlank, BaseException, assertionsEnabled, RegExpWrapper} from 'angular2/src/facade/lang';
+import {List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {Parser} from 'angular2/change_detection';
+
+import {SelectorMatcher, CssSelector} from './selector';
+
+import {CompileStep} from './compile_step';
+import {CompileElement} from './compile_element';
+import {CompileControl} from './compile_control';
+
+import {setterFactory} from './property_setter_factory';
+
+import {DirectiveMetadata} from '../../api';
+import {dashCaseToCamelCase, camelCaseToDashCase} from '../util';
+
+/**
+ * Parses the directives on a single element. Assumes ViewSplitter has already created
+ * <template> elements for template directives.
+ */
+export class DirectiveParser extends CompileStep {
+  _selectorMatcher:SelectorMatcher;
+  _directives:List<DirectiveMetadata>;
+  _parser:Parser;
+
+  constructor(parser: Parser, directives:List<DirectiveMetadata>) {
+    super();
+    this._parser = parser;
+    this._selectorMatcher = new SelectorMatcher();
+    this._directives = directives;
+    for (var i=0; i<directives.length; i++) {
+      var selector = CssSelector.parse(directives[i].selector);
+      this._selectorMatcher.addSelectables(selector, i);
+    }
+  }
+
+  process(parent:CompileElement, current:CompileElement, control:CompileControl) {
+    var attrs = current.attrs();
+    var classList = current.classList();
+
+    var cssSelector = new CssSelector();
+    var nodeName = DOM.nodeName(current.element);
+    cssSelector.setElement(nodeName);
+    for (var i=0; i < classList.length; i++) {
+      cssSelector.addClassName(classList[i]);
+    }
+
+    MapWrapper.forEach(attrs, (attrValue, attrName) => {
+      cssSelector.addAttribute(attrName, attrValue);
+    });
+
+    var viewportDirective;
+    var componentDirective;
+    // Note: We assume that the ViewSplitter already did its work, i.e. template directive should
+    // only be present on <template> elements!
+    var isTemplateElement = DOM.isTemplateElement(current.element);
+
+    this._selectorMatcher.match(cssSelector, (selector, directiveIndex) => {
+      var elementBinder = current.bindElement();
+      var directive = this._directives[directiveIndex];
+      var directiveBinder = elementBinder.bindDirective(directiveIndex);
+      current.compileChildren = current.compileChildren && directive.compileChildren;
+      if (isPresent(directive.bind)) {
+        MapWrapper.forEach(directive.bind, (bindConfig, dirProperty) => {
+          this._bindDirectiveProperty(dirProperty, bindConfig, current, directiveBinder);
+        });
+      }
+      if (isPresent(directive.events)) {
+        MapWrapper.forEach(directive.events, (action, eventName) => {
+          this._bindDirectiveEvent(eventName, action, current, directiveBinder);
+        });
+      }
+      if (isPresent(directive.setters)) {
+        ListWrapper.forEach(directive.setters, (propertyName) => {
+          directiveBinder.bindPropertySetter(propertyName, setterFactory(propertyName));
+        });
+      }
+      if (directive.type === DirectiveMetadata.VIEWPORT_TYPE) {
+        if (!isTemplateElement) {
+          throw new BaseException(`Viewport directives need to be placed on <template> elements or elements ` +
+            `with template attribute - check ${current.elementDescription}`);
+        }
+        if (isPresent(viewportDirective)) {
+          throw new BaseException(`Only one viewport directive is allowed per element - check ${current.elementDescription}`);
+        }
+        viewportDirective = directive;
+      } else {
+        if (isTemplateElement) {
+          throw new BaseException(`Only template directives are allowed on template elements - check ${current.elementDescription}`);
+        }
+        if (directive.type === DirectiveMetadata.COMPONENT_TYPE) {
+          if (isPresent(componentDirective)) {
+            throw new BaseException(`Only one component directive is allowed per element - check ${current.elementDescription}`);
+          }
+          componentDirective = directive;
+          elementBinder.setComponentId(directive.id);
+        }
+      }
+    });
+  }
+
+  _bindDirectiveProperty(dirProperty, bindConfig, compileElement, directiveBinder) {
+    var pipes = this._splitBindConfig(bindConfig);
+    var elProp = ListWrapper.removeAt(pipes, 0);
+
+    var bindingAst = MapWrapper.get(
+      compileElement.bindElement().propertyBindings,
+      dashCaseToCamelCase(elProp)
+    );
+
+    if (isBlank(bindingAst)) {
+      var attributeValue = MapWrapper.get(compileElement.attrs(), camelCaseToDashCase(elProp));
+      if (isPresent(attributeValue)) {
+        bindingAst = this._parser.wrapLiteralPrimitive(
+          attributeValue,
+          compileElement.elementDescription
+        );
+      }
+    }
+
+    // Bindings are optional, so this binding only needs to be set up if an expression is given.
+    if (isPresent(bindingAst)) {
+      var fullExpAstWithBindPipes = this._parser.addPipes(bindingAst, pipes);
+      directiveBinder.bindProperty(
+        dirProperty, fullExpAstWithBindPipes
+      );
+    }
+  }
+
+  _bindDirectiveEvent(eventName, action, compileElement, directiveBinder) {
+    var ast = this._parser.parseAction(action, compileElement.elementDescription);
+    directiveBinder.bindEvent(eventName, ast);
+  }
+
+  _splitBindConfig(bindConfig:string) {
+    return ListWrapper.map(bindConfig.split('|'), (s) => s.trim());
+  }
+}
+

modules/angular2/src/render/dom/compiler/property_binding_parser.js

@@ -0,0 +1,110 @@
+import {isPresent, isBlank, RegExpWrapper, BaseException, StringWrapper} from 'angular2/src/facade/lang';
+import {MapWrapper} from 'angular2/src/facade/collection';
+
+import {Parser, AST, ExpressionWithSource} from 'angular2/change_detection';
+
+import {CompileStep} from './compile_step';
+import {CompileElement} from './compile_element';
+import {CompileControl} from './compile_control';
+
+import {dashCaseToCamelCase} from '../util';
+import {setterFactory} from './property_setter_factory';
+
+// Group 1 = "bind"
+// Group 2 = "var"
+// Group 3 = "on"
+// Group 4 = the identifier after "bind", "var", or "on"
+// Group 5 = idenitifer inside square braces
+// Group 6 = identifier inside parenthesis
+// Group 7 = "#"
+// Group 8 = identifier after "#"
+var BIND_NAME_REGEXP = RegExpWrapper.create(
+    '^(?:(?:(?:(bind)|(var)|(on))-(.+))|\\[([^\\]]+)\\]|\\(([^\\)]+)\\)|(#)(.+))$');
+
+/**
+ * Parses the property bindings on a single element.
+ */
+export class PropertyBindingParser extends CompileStep {
+  _parser:Parser;
+
+  constructor(parser:Parser) {
+    super();
+    this._parser = parser;
+  }
+
+  process(parent:CompileElement, current:CompileElement, control:CompileControl) {
+    if (current.ignoreBindings) {
+      return;
+    }
+
+    var attrs = current.attrs();
+    var newAttrs = MapWrapper.create();
+
+    MapWrapper.forEach(attrs, (attrValue, attrName) => {
+      var bindParts = RegExpWrapper.firstMatch(BIND_NAME_REGEXP, attrName);
+      if (isPresent(bindParts)) {
+        if (isPresent(bindParts[1])) {
+          // match: bind-prop
+          this._bindProperty(bindParts[4], attrValue, current, newAttrs);
+        } else if (isPresent(bindParts[2]) || isPresent(bindParts[7])) {
+          // match: var-name / var-name="iden" / #name / #name="iden"
+          var identifier = (isPresent(bindParts[4]) && bindParts[4] !== '') ?
+              bindParts[4] : bindParts[8];
+          var value = attrValue == '' ? '\$implicit' : attrValue;
+          this._bindVariable(identifier, value, current, newAttrs);
+        } else if (isPresent(bindParts[3])) {
+          // match: on-event
+          this._bindEvent(bindParts[4], attrValue, current, newAttrs);
+        } else if (isPresent(bindParts[5])) {
+          // match: [prop]
+          this._bindProperty(bindParts[5], attrValue, current, newAttrs);
+        } else if (isPresent(bindParts[6])) {
+          // match: (event)
+          this._bindEvent(bindParts[6], attrValue, current, newAttrs);
+        }
+      } else {
+        var expr = this._parser.parseInterpolation(
+          attrValue, current.elementDescription
+        );
+        if (isPresent(expr)) {
+          this._bindPropertyAst(attrName, expr, current, newAttrs);
+        }
+      }
+    });
+
+    MapWrapper.forEach(newAttrs, (attrValue, attrName) => {
+      MapWrapper.set(attrs, attrName, attrValue);
+    });
+  }
+
+  _bindVariable(identifier, value, current:CompileElement, newAttrs) {
+    current.bindElement().bindVariable(dashCaseToCamelCase(identifier), value);
+    MapWrapper.set(newAttrs, identifier, value);
+  }
+
+  _bindProperty(name, expression, current:CompileElement, newAttrs) {
+    this._bindPropertyAst(
+      name,
+      this._parser.parseBinding(expression, current.elementDescription),
+      current,
+      newAttrs
+    );
+  }
+
+  _bindPropertyAst(name, ast, current:CompileElement, newAttrs) {
+    var binder = current.bindElement();
+    var camelCaseName = dashCaseToCamelCase(name);
+    binder.bindProperty(camelCaseName, ast);
+    binder.bindPropertySetter(camelCaseName, setterFactory(camelCaseName));
+    MapWrapper.set(newAttrs, name, ast.source);
+  }
+
+  _bindEvent(name, expression, current:CompileElement, newAttrs) {
+    current.bindElement().bindEvent(
+      dashCaseToCamelCase(name), this._parser.parseAction(expression, current.elementDescription)
+    );
+    // Don't detect directives for event names for now,
+    // so don't add the event name to the CompileElement.attrs
+  }
+
+}

modules/angular2/src/render/dom/compiler/property_setter_factory.js

@@ -0,0 +1,138 @@
+import {StringWrapper, RegExpWrapper, BaseException, isPresent, isBlank, isString, stringify} from 'angular2/src/facade/lang';
+import {ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {reflector} from 'angular2/src/reflection/reflection';
+
+var DASH_CASE_REGEXP = RegExpWrapper.create('-([a-z])');
+var CAMEL_CASE_REGEXP = RegExpWrapper.create('([A-Z])');
+
+export function dashCaseToCamelCase(input:string): string {
+  return StringWrapper.replaceAllMapped(input, DASH_CASE_REGEXP, (m) => {
+    return m[1].toUpperCase();
+  });
+}
+
+export function camelCaseToDashCase(input:string): string {
+  return StringWrapper.replaceAllMapped(input, CAMEL_CASE_REGEXP, (m) => {
+    return '-' + m[1].toLowerCase();
+  });
+}
+
+const STYLE_SEPARATOR = '.';
+var propertySettersCache = StringMapWrapper.create();
+var innerHTMLSetterCache;
+
+export function setterFactory(property: string): Function {
+  var setterFn, styleParts, styleSuffix;
+  if (StringWrapper.startsWith(property, ATTRIBUTE_PREFIX)) {
+    setterFn = attributeSetterFactory(StringWrapper.substring(property, ATTRIBUTE_PREFIX.length));
+  } else if (StringWrapper.startsWith(property, CLASS_PREFIX)) {
+    setterFn = classSetterFactory(StringWrapper.substring(property, CLASS_PREFIX.length));
+  } else if (StringWrapper.startsWith(property, STYLE_PREFIX)) {
+    styleParts = property.split(STYLE_SEPARATOR);
+    styleSuffix = styleParts.length > 2 ? ListWrapper.get(styleParts, 2) : '';
+    setterFn = styleSetterFactory(ListWrapper.get(styleParts, 1), styleSuffix);
+  } else if (StringWrapper.equals(property, 'innerHtml')) {
+    if (isBlank(innerHTMLSetterCache)) {
+       innerHTMLSetterCache = (el, value) => DOM.setInnerHTML(el, value);
+    }
+    setterFn = innerHTMLSetterCache;
+  } else {
+    property = resolvePropertyName(property);
+    setterFn = StringMapWrapper.get(propertySettersCache, property);
+    if (isBlank(setterFn)) {
+      var propertySetterFn = reflector.setter(property);
+      setterFn = function(receiver, value) {
+        if (DOM.hasProperty(receiver, property)) {
+          return propertySetterFn(receiver, value);
+        }
+      }
+      StringMapWrapper.set(propertySettersCache, property, setterFn);
+    }
+  }
+  return setterFn;
+}
+
+const ATTRIBUTE_PREFIX = 'attr.';
+var attributeSettersCache = StringMapWrapper.create();
+
+function _isValidAttributeValue(attrName:string, value: any): boolean {
+  if (attrName == "role") {
+    return isString(value);
+  } else {
+    return isPresent(value);
+  }
+}
+
+function attributeSetterFactory(attrName:string): Function {
+  var setterFn = StringMapWrapper.get(attributeSettersCache, attrName);
+  var dashCasedAttributeName;
+
+  if (isBlank(setterFn)) {
+    dashCasedAttributeName = camelCaseToDashCase(attrName);
+    setterFn = function(element, value) {
+      if (_isValidAttributeValue(dashCasedAttributeName, value)) {
+        DOM.setAttribute(element, dashCasedAttributeName, stringify(value));
+      } else {
+        if (isPresent(value)) {
+          throw new BaseException("Invalid " + dashCasedAttributeName +
+            " attribute, only string values are allowed, got '" + stringify(value) + "'");
+        }
+        DOM.removeAttribute(element, dashCasedAttributeName);
+      }
+    };
+    StringMapWrapper.set(attributeSettersCache, attrName, setterFn);
+  }
+
+  return setterFn;
+}
+
+const CLASS_PREFIX = 'class.';
+var classSettersCache = StringMapWrapper.create();
+
+function classSetterFactory(className:string): Function {
+  var setterFn = StringMapWrapper.get(classSettersCache, className);
+
+  if (isBlank(setterFn)) {
+    setterFn = function(element, value) {
+      if (value) {
+        DOM.addClass(element, className);
+      } else {
+        DOM.removeClass(element, className);
+      }
+    };
+    StringMapWrapper.set(classSettersCache, className, setterFn);
+  }
+
+  return setterFn;
+}
+
+const STYLE_PREFIX = 'style.';
+var styleSettersCache = StringMapWrapper.create();
+
+function styleSetterFactory(styleName:string, styleSuffix:string): Function {
+  var cacheKey = styleName + styleSuffix;
+  var setterFn = StringMapWrapper.get(styleSettersCache, cacheKey);
+  var dashCasedStyleName;
+
+  if (isBlank(setterFn)) {
+    dashCasedStyleName = camelCaseToDashCase(styleName);
+    setterFn = function(element, value) {
+      var valAsStr;
+      if (isPresent(value)) {
+        valAsStr = stringify(value);
+        DOM.setStyle(element, dashCasedStyleName, valAsStr + styleSuffix);
+      } else {
+        DOM.removeStyle(element, dashCasedStyleName);
+      }
+    };
+    StringMapWrapper.set(styleSettersCache, cacheKey, setterFn);
+  }
+
+  return setterFn;
+}
+
+function resolvePropertyName(attrName:string): string {
+  var mappedPropName = StringMapWrapper.get(DOM.attrToPropMap, attrName);
+  return isPresent(mappedPropName) ? mappedPropName : attrName;
+}

modules/angular2/src/render/dom/compiler/selector.js

@@ -0,0 +1,352 @@
+import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {isPresent, isBlank, RegExpWrapper, RegExpMatcherWrapper, StringWrapper, BaseException} from 'angular2/src/facade/lang';
+
+const _EMPTY_ATTR_VALUE = '';
+
+// TODO: Can't use `const` here as
+// in Dart this is not transpiled into `final` yet...
+var _SELECTOR_REGEXP =
+    RegExpWrapper.create('(\\:not\\()|' + //":not("
+    '([-\\w]+)|' +    // "tag"
+    '(?:\\.([-\\w]+))|' +                   // ".class"
+    '(?:\\[([-\\w*]+)(?:=([^\\]]*))?\\])|' + // "[name]", "[name=value]" or "[name*=value]"
+    '(?:\\))|' + // ")"
+    '(\\s*,\\s*)');  // ","
+
+/**
+ * A css selector contains an element name,
+ * css classes and attribute/value pairs with the purpose
+ * of selecting subsets out of them.
+ */
+export class CssSelector {
+  element:string;
+  classNames:List;
+  attrs:List;
+  notSelector: CssSelector;
+  static parse(selector:string): List<CssSelector> {
+    var results = ListWrapper.create();
+    var _addResult = (res, cssSel) => {
+      if (isPresent(cssSel.notSelector) && isBlank(cssSel.element)
+        && ListWrapper.isEmpty(cssSel.classNames) && ListWrapper.isEmpty(cssSel.attrs)) {
+        cssSel.element = "*";
+      }
+      ListWrapper.push(res, cssSel);
+    }
+    var cssSelector = new CssSelector();
+    var matcher = RegExpWrapper.matcher(_SELECTOR_REGEXP, selector);
+    var match;
+    var current = cssSelector;
+    while (isPresent(match = RegExpMatcherWrapper.next(matcher))) {
+      if (isPresent(match[1])) {
+        if (isPresent(cssSelector.notSelector)) {
+          throw new BaseException('Nesting :not is not allowed in a selector');
+        }
+        current.notSelector = new CssSelector();
+        current = current.notSelector;
+      }
+      if (isPresent(match[2])) {
+        current.setElement(match[2]);
+      }
+      if (isPresent(match[3])) {
+        current.addClassName(match[3]);
+      }
+      if (isPresent(match[4])) {
+        current.addAttribute(match[4], match[5]);
+      }
+      if (isPresent(match[6])) {
+        _addResult(results, cssSelector);
+        cssSelector = current = new CssSelector();
+      }
+    }
+    _addResult(results, cssSelector);
+    return results;
+  }
+
+  constructor() {
+    this.element = null;
+    this.classNames = ListWrapper.create();
+    this.attrs = ListWrapper.create();
+    this.notSelector = null;
+  }
+
+  setElement(element:string = null) {
+    if (isPresent(element)) {
+      element = element.toLowerCase();
+    }
+    this.element = element;
+  }
+
+  addAttribute(name:string, value:string = _EMPTY_ATTR_VALUE) {
+    ListWrapper.push(this.attrs, name.toLowerCase());
+    if (isPresent(value)) {
+      value = value.toLowerCase();
+    } else {
+      value = _EMPTY_ATTR_VALUE;
+    }
+    ListWrapper.push(this.attrs, value);
+  }
+
+  addClassName(name:string) {
+    ListWrapper.push(this.classNames, name.toLowerCase());
+  }
+
+  toString():string {
+    var res = '';
+    if (isPresent(this.element)) {
+      res += this.element;
+    }
+    if (isPresent(this.classNames)) {
+      for (var i=0; i<this.classNames.length; i++) {
+        res += '.' + this.classNames[i];
+      }
+    }
+    if (isPresent(this.attrs)) {
+      for (var i=0; i<this.attrs.length;) {
+        var attrName = this.attrs[i++];
+        var attrValue = this.attrs[i++]
+        res += '[' + attrName;
+        if (attrValue.length > 0) {
+          res += '=' + attrValue;
+        }
+        res += ']';
+      }
+    }
+    if (isPresent(this.notSelector)) {
+      res += ":not(" + this.notSelector.toString() + ")";
+    }
+    return res;
+  }
+}
+
+/**
+ * Reads a list of CssSelectors and allows to calculate which ones
+ * are contained in a given CssSelector.
+ */
+export class SelectorMatcher {
+  _elementMap:Map;
+  _elementPartialMap:Map;
+  _classMap:Map;
+  _classPartialMap:Map;
+  _attrValueMap:Map;
+  _attrValuePartialMap:Map;
+  _listContexts:List;
+  constructor() {
+    this._elementMap = MapWrapper.create();
+    this._elementPartialMap = MapWrapper.create();
+
+    this._classMap = MapWrapper.create();
+    this._classPartialMap = MapWrapper.create();
+
+    this._attrValueMap = MapWrapper.create();
+    this._attrValuePartialMap = MapWrapper.create();
+
+    this._listContexts = ListWrapper.create();
+  }
+
+  addSelectables(cssSelectors:List<CssSelector>, callbackCtxt) {
+    var listContext = null;
+    if (cssSelectors.length > 1) {
+      listContext= new SelectorListContext(cssSelectors);
+      ListWrapper.push(this._listContexts, listContext);
+    }
+    for (var i = 0; i < cssSelectors.length; i++) {
+      this.addSelectable(cssSelectors[i], callbackCtxt, listContext);
+    }
+  }
+
+  /**
+   * Add an object that can be found later on by calling `match`.
+   * @param cssSelector A css selector
+   * @param callbackCtxt An opaque object that will be given to the callback of the `match` function
+   */
+  addSelectable(cssSelector, callbackCtxt, listContext: SelectorListContext) {
+    var matcher = this;
+    var element = cssSelector.element;
+    var classNames = cssSelector.classNames;
+    var attrs = cssSelector.attrs;
+    var selectable = new SelectorContext(cssSelector, callbackCtxt, listContext);
+
+
+    if (isPresent(element)) {
+      var isTerminal = attrs.length === 0 && classNames.length === 0;
+      if (isTerminal) {
+        this._addTerminal(matcher._elementMap, element, selectable);
+      } else {
+        matcher = this._addPartial(matcher._elementPartialMap, element);
+      }
+    }
+
+    if (isPresent(classNames)) {
+      for (var index = 0; index<classNames.length; index++) {
+        var isTerminal = attrs.length === 0 && index === classNames.length - 1;
+        var className = classNames[index];
+        if (isTerminal) {
+          this._addTerminal(matcher._classMap, className, selectable);
+        } else {
+          matcher = this._addPartial(matcher._classPartialMap, className);
+        }
+      }
+    }
+
+    if (isPresent(attrs)) {
+      for (var index = 0; index<attrs.length; ) {
+        var isTerminal = index === attrs.length - 2;
+        var attrName = attrs[index++];
+        var attrValue = attrs[index++];
+        var map = isTerminal ? matcher._attrValueMap : matcher._attrValuePartialMap;
+        var valuesMap = MapWrapper.get(map, attrName)
+        if (isBlank(valuesMap)) {
+          valuesMap = MapWrapper.create();
+          MapWrapper.set(map, attrName, valuesMap);
+        }
+        if (isTerminal) {
+          this._addTerminal(valuesMap, attrValue, selectable);
+        } else {
+          matcher = this._addPartial(valuesMap, attrValue);
+        }
+      }
+    }
+  }
+
+  _addTerminal(map:Map<string,string>, name:string, selectable) {
+    var terminalList = MapWrapper.get(map, name)
+    if (isBlank(terminalList)) {
+      terminalList = ListWrapper.create();
+      MapWrapper.set(map, name, terminalList);
+    }
+    ListWrapper.push(terminalList, selectable);
+  }
+
+  _addPartial(map:Map<string,string>, name:string) {
+    var matcher = MapWrapper.get(map, name)
+    if (isBlank(matcher)) {
+      matcher = new SelectorMatcher();
+      MapWrapper.set(map, name, matcher);
+    }
+    return matcher;
+  }
+
+  /**
+   * Find the objects that have been added via `addSelectable`
+   * whose css selector is contained in the given css selector.
+   * @param cssSelector A css selector
+   * @param matchedCallback This callback will be called with the object handed into `addSelectable`
+   * @return boolean true if a match was found
+  */
+  match(cssSelector:CssSelector, matchedCallback:Function):boolean {
+    var result = false;
+    var element = cssSelector.element;
+    var classNames = cssSelector.classNames;
+    var attrs = cssSelector.attrs;
+
+    for (var i = 0; i < this._listContexts.length; i++) {
+      this._listContexts[i].alreadyMatched = false;
+    }
+
+    result = this._matchTerminal(this._elementMap, element, cssSelector, matchedCallback) || result;
+    result = this._matchPartial(this._elementPartialMap, element, cssSelector, matchedCallback) || result;
+
+    if (isPresent(classNames)) {
+      for (var index = 0; index<classNames.length; index++) {
+        var className = classNames[index];
+        result = this._matchTerminal(this._classMap, className, cssSelector, matchedCallback) || result;
+        result = this._matchPartial(this._classPartialMap, className, cssSelector, matchedCallback) || result;
+      }
+    }
+
+    if (isPresent(attrs)) {
+      for (var index = 0; index<attrs.length;) {
+        var attrName = attrs[index++];
+        var attrValue = attrs[index++];
+
+        var valuesMap = MapWrapper.get(this._attrValueMap, attrName);
+        if (!StringWrapper.equals(attrValue, _EMPTY_ATTR_VALUE)) {
+          result = this._matchTerminal(valuesMap, _EMPTY_ATTR_VALUE, cssSelector, matchedCallback) || result;
+        }
+        result = this._matchTerminal(valuesMap, attrValue, cssSelector, matchedCallback) || result;
+
+        valuesMap = MapWrapper.get(this._attrValuePartialMap, attrName)
+        result = this._matchPartial(valuesMap, attrValue, cssSelector, matchedCallback) || result;
+      }
+    }
+    return result;
+  }
+
+  _matchTerminal(map:Map<string,string> = null, name, cssSelector, matchedCallback):boolean {
+    if (isBlank(map) || isBlank(name)) {
+      return false;
+    }
+
+    var selectables = MapWrapper.get(map, name);
+    var starSelectables = MapWrapper.get(map, "*");
+    if (isPresent(starSelectables)) {
+      selectables = ListWrapper.concat(selectables, starSelectables);
+    }
+    if (isBlank(selectables)) {
+      return false;
+    }
+    var selectable;
+    var result = false;
+    for (var index=0; index<selectables.length; index++) {
+      selectable = selectables[index];
+      result = selectable.finalize(cssSelector, matchedCallback) || result;
+    }
+    return result;
+  }
+
+  _matchPartial(map:Map<string,string> = null, name, cssSelector, matchedCallback):boolean {
+    if (isBlank(map) || isBlank(name)) {
+      return false;
+    }
+    var nestedSelector = MapWrapper.get(map, name)
+    if (isBlank(nestedSelector)) {
+      return false;
+    }
+    // TODO(perf): get rid of recursion and measure again
+    // TODO(perf): don't pass the whole selector into the recursion,
+    // but only the not processed parts
+    return nestedSelector.match(cssSelector, matchedCallback);
+  }
+}
+
+
+class SelectorListContext {
+  selectors: List<CssSelector>;
+  alreadyMatched: boolean;
+
+  constructor(selectors:List<CssSelector>) {
+    this.selectors = selectors;
+    this.alreadyMatched = false;
+  }
+}
+
+// Store context to pass back selector and context when a selector is matched
+class SelectorContext {
+  selector:CssSelector;
+  notSelector:CssSelector;
+  cbContext; // callback context
+  listContext: SelectorListContext;
+
+  constructor(selector:CssSelector, cbContext, listContext: SelectorListContext) {
+    this.selector = selector;
+    this.notSelector = selector.notSelector;
+    this.cbContext = cbContext;
+    this.listContext = listContext;
+  }
+
+  finalize(cssSelector: CssSelector, callback) {
+    var result = true;
+    if (isPresent(this.notSelector) && (isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
+      var notMatcher = new SelectorMatcher();
+      notMatcher.addSelectable(this.notSelector, null, null);
+      result = !notMatcher.match(cssSelector, null);
+    }
+    if (result && isPresent(callback) && (isBlank(this.listContext) || !this.listContext.alreadyMatched)) {
+      if (isPresent(this.listContext)) {
+        this.listContext.alreadyMatched = true;
+      }
+      callback(this.selector, this.cbContext);
+    }
+    return result;
+  }
+}

modules/angular2/src/render/dom/compiler/template_loader.js

@@ -0,0 +1,45 @@
+import {isBlank, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
+import {Map, MapWrapper, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
+import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {XHR} from 'angular2/src/services/xhr';
+
+import {Template} from '../../api';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+
+/**
+ * Strategy to load component templates.
+ * @publicModule angular2/angular2
+ */
+export class TemplateLoader {
+  _xhr: XHR;
+  _htmlCache: StringMap;
+
+  constructor(xhr: XHR, urlResolver: UrlResolver) {
+    this._xhr = xhr;
+    this._htmlCache = StringMapWrapper.create();
+  }
+
+  load(template: Template):Promise {
+    if (isPresent(template.inline)) {
+      return PromiseWrapper.resolve(DOM.createTemplate(template.inline));
+    }
+    var url = template.absUrl;
+    if (isPresent(url)) {
+      var promise = StringMapWrapper.get(this._htmlCache, url);
+
+      if (isBlank(promise)) {
+        promise = this._xhr.get(url).then(function (html) {
+          var template = DOM.createTemplate(html);
+          return template;
+        });
+        StringMapWrapper.set(this._htmlCache, url, promise);
+      }
+
+      return promise;
+    }
+
+    throw new BaseException('Templates should have either their url or inline property set');
+  }
+}

modules/angular2/src/render/dom/compiler/text_interpolation_parser.js

@@ -0,0 +1,39 @@
+import {RegExpWrapper, StringWrapper, isPresent} from 'angular2/src/facade/lang';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {Parser} from 'angular2/change_detection';
+
+import {CompileStep} from './compile_step';
+import {CompileElement} from './compile_element';
+import {CompileControl} from './compile_control';
+
+/**
+ * Parses interpolations in direct text child nodes of the current element.
+ */
+export class TextInterpolationParser extends CompileStep {
+  _parser:Parser;
+
+  constructor(parser:Parser) {
+    super();
+    this._parser = parser;
+  }
+
+  process(parent:CompileElement, current:CompileElement, control:CompileControl) {
+    if (!current.compileChildren || current.ignoreBindings) {
+      return;
+    }
+    var element = current.element;
+    var childNodes = DOM.childNodes(DOM.templateAwareRoot(element));
+    for (var i=0; i<childNodes.length; i++) {
+      var node = childNodes[i];
+      if (DOM.isTextNode(node)) {
+        var text = DOM.nodeValue(node);
+        var expr = this._parser.parseInterpolation(text, current.elementDescription);
+        if (isPresent(expr)) {
+          DOM.setText(node, ' ');
+          current.bindElement().bindText(i, expr);
+        }
+      }
+    }
+  }
+}

modules/angular2/src/render/dom/compiler/view_splitter.js

@@ -0,0 +1,118 @@
+import {isBlank, isPresent, BaseException, StringWrapper} from 'angular2/src/facade/lang';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
+import {Parser} from 'angular2/change_detection';
+
+import {CompileStep} from './compile_step';
+import {CompileElement} from './compile_element';
+import {CompileControl} from './compile_control';
+
+/**
+ * Splits views at `<template>` elements or elements with `template` attribute:
+ * For `<template>` elements:
+ * - moves the content into a new and disconnected `<template>` element
+ *   that is marked as view root.
+ *
+ * For elements with a `template` attribute:
+ * - replaces the element with an empty `<template>` element,
+ *   parses the content of the `template` attribute and adds the information to that
+ *   `<template>` element. Marks the elements as view root.
+ *
+ * Note: In both cases the root of the nested view is disconnected from its parent element.
+ * This is needed for browsers that don't support the `<template>` element
+ * as we want to do locate elements with bindings using `getElementsByClassName` later on,
+ * which should not descend into the nested view.
+ */
+export class ViewSplitter extends CompileStep {
+  _parser:Parser;
+
+  constructor(parser:Parser) {
+    super();
+    this._parser = parser;
+  }
+
+  process(parent:CompileElement, current:CompileElement, control:CompileControl) {
+    var attrs = current.attrs();
+    var templateBindings = MapWrapper.get(attrs, 'template');
+    var hasTemplateBinding = isPresent(templateBindings);
+
+    // look for template shortcuts such as *if="condition" and treat them as template="if condition"
+    MapWrapper.forEach(attrs, (attrValue, attrName) => {
+      if (StringWrapper.startsWith(attrName, '*')) {
+        var key = StringWrapper.substring(attrName, 1);  // remove the star
+        if (hasTemplateBinding) {
+          // 2nd template binding detected
+          throw new BaseException(`Only one template directive per element is allowed: ` +
+            `${templateBindings} and ${key} cannot be used simultaneously ` +
+            `in ${current.elementDescription}`);
+        } else {
+          templateBindings = (attrValue.length == 0) ? key : key + ' ' + attrValue;
+          hasTemplateBinding = true;
+        }
+      }
+    });
+
+    if (isPresent(parent)) {
+      if (DOM.isTemplateElement(current.element)) {
+        if (!current.isViewRoot) {
+          var viewRoot = new CompileElement(DOM.createTemplate(''));
+          viewRoot.inheritedProtoView = current.bindElement().bindNestedProtoView(viewRoot.element);
+          // viewRoot doesn't appear in the original template, so we associate
+          // the current element description to get a more meaningful message in case of error
+          viewRoot.elementDescription = current.elementDescription;
+          viewRoot.isViewRoot = true;
+
+          this._moveChildNodes(DOM.content(current.element), DOM.content(viewRoot.element));
+          control.addChild(viewRoot);
+        }
+      } if (hasTemplateBinding) {
+        var newParent = new CompileElement(DOM.createTemplate(''));
+        newParent.inheritedProtoView = current.inheritedProtoView;
+        newParent.inheritedElementBinder = current.inheritedElementBinder;
+        newParent.distanceToInheritedBinder = current.distanceToInheritedBinder;
+        // newParent doesn't appear in the original template, so we associate
+        // the current element description to get a more meaningful message in case of error
+        newParent.elementDescription = current.elementDescription;
+
+        current.inheritedProtoView = newParent.bindElement().bindNestedProtoView(current.element);
+        current.inheritedElementBinder = null;
+        current.distanceToInheritedBinder = 0;
+        current.isViewRoot = true;
+        this._parseTemplateBindings(templateBindings, newParent);
+
+        this._addParentElement(current.element, newParent.element);
+        control.addParent(newParent);
+        DOM.remove(current.element);
+      }
+    }
+  }
+
+  _moveChildNodes(source, target) {
+    var next = DOM.firstChild(source);
+    while (isPresent(next)) {
+      DOM.appendChild(target, next);
+      next = DOM.firstChild(source);
+    }
+  }
+
+  _addParentElement(currentElement, newParentElement) {
+    DOM.insertBefore(currentElement, newParentElement);
+    DOM.appendChild(newParentElement, currentElement);
+  }
+
+  _parseTemplateBindings(templateBindings:string, compileElement:CompileElement) {
+    var bindings = this._parser.parseTemplateBindings(templateBindings, compileElement.elementDescription);
+    for (var i=0; i<bindings.length; i++) {
+      var binding = bindings[i];
+      if (binding.keyIsVar) {
+        compileElement.bindElement().bindVariable(binding.key, binding.name);
+        MapWrapper.set(compileElement.attrs(), binding.key, binding.name);
+      } else if (isPresent(binding.expression)) {
+        compileElement.bindElement().bindProperty(binding.key, binding.expression);
+        MapWrapper.set(compileElement.attrs(), binding.key, binding.expression.source);
+      } else {
+        DOM.setAttribute(compileElement.element, binding.key, '');
+      }
+    }
+  }
+}