feat(compiler): DOM adapters + html5lib implementation; misc fixes

Author: yjbanov

gulpfile.js

@@ -618,19 +618,31 @@ gulp.task('tests/transform.dart', function() {
  .pipe(gulp.dest('dist/dart/angular2/test/transform'));
 });
 
+
+
 // -----------------
 // orchestrated targets
-gulp.task('build.dart', function(done) {
+
+// Builds all Dart packages, but does not compile them
+gulp.task('build/packages.dart', function(done) {
  runSequence(
  ['build/transpile.dart', 'build/html.dart', 'build/copy.dart', 'build/multicopy.dart'],
  'tests/transform.dart',
  'build/format.dart',
  'build/pubspec.dart',
+ done
+ );
+});
+
+// Builds and compiles all Dart packages
+gulp.task('build.dart', function(done) {
+ runSequence(
+ 'build/packages.dart',
+ 'build/analyze.dart',
  'build/pubbuild.dart',
  // Note: pubbuild.dart will clear the dart2js folder, so we need to copy
  // our files after this :-(
  'build/multicopy.js.dart2js',
- 'build/analyze.dart',
  done
  );
 });

modules/angular2/e2e_test/test_util.es6

@@ -17,12 +17,10 @@ function verifyNoBrowserErrors() {
  browser.executeScript('1+1');
  browser.manage().logs().get('browser').then(function(browserLog) {
  var filteredLog = browserLog.filter(function(logEntry) {
+ console.log('>> ' + require('util').inspect(logEntry));
  return logEntry.level.value > webdriver.logging.Level.WARNING.value;
  });
  expect(filteredLog.length).toEqual(0);
- if (filteredLog.length) {
- console.log('browser console errors: ' + require('util').inspect(filteredLog));
- }
  });
 }
 

modules/angular2/pubspec.yaml

@@ -13,6 +13,7 @@ dependencies:
  barback: '^0.15.2+2'
  code_transformers: '^0.2.5'
  dart_style: '^0.1.3'
+ html5lib: '^0.12.0'
  stack_trace: '^1.1.1'
 dev_dependencies:
  guinness: "^0.1.16"

modules/angular2/src/core/application.js

@@ -1,6 +1,7 @@
 import {Injector, bind, OpaqueToken} from 'angular2/di';
 import {Type, FIELD, isBlank, isPresent, BaseException, assertionsEnabled, print} from 'angular2/src/facade/lang';
-import {DOM, Element} from 'angular2/src/facade/dom';
+import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {Compiler, CompilerCache} from './compiler/compiler';
 import {ProtoView} from './compiler/view';
 import {Reflector, reflector} from 'angular2/src/reflection/reflection';
@@ -117,6 +118,7 @@ function _createVmZone(givenReporter:Function): VmTurnZone {
 // Multiple calls to this method are allowed. Each application would only share
 // _rootInjector, which is not user-configurable by design, thus safe to share.
 export function bootstrap(appComponentType: Type, bindings: List<Binding>=null, givenBootstrapErrorReporter: Function=null): Promise {
+ BrowserDomAdapter.makeCurrent();
  var bootstrapProcess = PromiseWrapper.completer();
 
  var zone = _createVmZone(givenBootstrapErrorReporter);

modules/angular2/src/core/compiler/compiler.js

@@ -1,7 +1,6 @@
 import {Type, isBlank, isPresent, BaseException, normalizeBlank, stringify} from 'angular2/src/facade/lang';
 import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
 import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-import {DOM, Element} from 'angular2/src/facade/dom';
 
 import {ChangeDetection, Parser} from 'angular2/change_detection';
 
@@ -149,7 +148,7 @@ export class Compiler {
  }
 
  // TODO(vicb): union type return ProtoView or Promise<ProtoView>
- _compileTemplate(template: Template, tplElement: Element, component: Type) {
+ _compileTemplate(template: Template, tplElement, component: Type) {
  var pipeline = new CompilePipeline(this.createSteps(component, template));
  var compilationCtxtDescription = stringify(this._reader.read(component).type);
  var compileElements;

modules/angular2/src/core/compiler/pipeline/compile_element.js

@@ -1,5 +1,5 @@
 import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
-import {Element, DOM} from 'angular2/src/facade/dom';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {int, isBlank, isPresent, Type, StringJoiner, assertionsEnabled} from 'angular2/src/facade/lang';
 import {DirectiveMetadata} from '../directive_metadata';
 import {Decorator, Component, Viewport} from '../../annotations/annotations';
@@ -15,7 +15,7 @@ import {AST} from 'angular2/change_detection';
  * by the CompileSteps starting out with the pure HTMLElement.
  */
 export class CompileElement {
- element:Element;
+ element;
  _attrs:Map;
  _classList:List;
  textNodeBindings:Map;
@@ -40,7 +40,7 @@ export class CompileElement {
  ignoreBindings: boolean;
  elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of error
 
- constructor(element:Element, compilationUnit = '') {
+ constructor(element, compilationUnit = '') {
  this.element = element;
  this._attrs = null;
  this._classList = null;
@@ -177,7 +177,7 @@ export class CompileElement {
 
 // 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:Element):string {
+function getElementDescription(domElement):string {
  var buf = new StringJoiner();
  var atts = DOM.attributeMap(domElement);
 

modules/angular2/src/core/compiler/pipeline/compile_pipeline.js

@@ -1,6 +1,6 @@
 import {isPresent} from 'angular2/src/facade/lang';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Element, DOM} from 'angular2/src/facade/dom';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {CompileElement} from './compile_element';
 import {CompileControl} from './compile_control';
 import {CompileStep} from './compile_step';
@@ -15,7 +15,7 @@ export class CompilePipeline {
  this._control = new CompileControl(steps);
  }
 
- process(rootElement:Element, compilationCtxtDescription:string = ''):List {
+ process(rootElement, compilationCtxtDescription:string = ''):List {
  var results = ListWrapper.create();
  this._process(results, null, new CompileElement(rootElement, compilationCtxtDescription), compilationCtxtDescription);
  return results;

modules/angular2/src/core/compiler/pipeline/directive_parser.js

@@ -1,6 +1,6 @@
 import {isPresent, isBlank, BaseException, assertionsEnabled, RegExpWrapper} from 'angular2/src/facade/lang';
 import {List, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/facade/dom';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {SelectorMatcher} from '../selector';
 import {CssSelector} from '../selector';
 

modules/angular2/src/core/compiler/pipeline/element_binder_builder.js

@@ -1,5 +1,5 @@
 import {int, isPresent, isBlank, Type, BaseException, StringWrapper, RegExpWrapper, isString, stringify} from 'angular2/src/facade/lang';
-import {Element, DOM, attrToPropMap} from 'angular2/src/facade/dom';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {ListWrapper, List, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
 
 import {reflector} from 'angular2/src/reflection/reflection';
@@ -21,7 +21,7 @@ function ariaSetterFactory(attrName:string) {
  var setterFn = StringMapWrapper.get(ariaSettersCache, attrName);
 
  if (isBlank(setterFn)) {
- setterFn = function(element:Element, value) {
+ setterFn = function(element, value) {
  if (isPresent(value)) {
  DOM.setAttribute(element, attrName, stringify(value));
  } else {
@@ -42,7 +42,7 @@ function classSetterFactory(className:string) {
  var setterFn = StringMapWrapper.get(classSettersCache, className);
 
  if (isBlank(setterFn)) {
- setterFn = function(element:Element, value) {
+ setterFn = function(element, value) {
  if (value) {
  DOM.addClass(element, className);
  } else {
@@ -64,7 +64,7 @@ function styleSetterFactory(styleName:string, stylesuffix:string) {
  var setterFn = StringMapWrapper.get(styleSettersCache, cacheKey);
 
  if (isBlank(setterFn)) {
- setterFn = function(element:Element, value) {
+ setterFn = function(element, value) {
  var valAsStr;
  if (isPresent(value)) {
  valAsStr = stringify(value);
@@ -80,7 +80,7 @@ function styleSetterFactory(styleName:string, stylesuffix:string) {
 }
 
 const ROLE_ATTR = 'role';
-function roleSetter(element:Element, value) {
+function roleSetter(element, value) {
  if (isString(value)) {
  DOM.setAttribute(element, ROLE_ATTR, value);
  } else {
@@ -92,18 +92,25 @@ function roleSetter(element:Element, value) {
 }
 
 // special mapping for cases where attribute name doesn't match property name
-var attrToProp = StringMapWrapper.merge({
- "inner-html": "innerHTML",
- "readonly": "readOnly",
- "tabindex": "tabIndex",
-}, attrToPropMap);
+var _lazyAttrToProp;
+
+function attrToProp() {
+ if (!isPresent(_lazyAttrToProp)) {
+ _lazyAttrToProp = StringMapWrapper.merge({
+ "inner-html": "innerHTML",
+ "readonly": "readOnly",
+ "tabindex": "tabIndex",
+ }, DOM.attrToPropMap);
+ }
+ return _lazyAttrToProp;
+}
 
 // tells if an attribute is handled by the ElementBinderBuilder step
 export function isSpecialProperty(propName:string) {
  return StringWrapper.startsWith(propName, ARIA_PREFIX)
  || StringWrapper.startsWith(propName, CLASS_PREFIX)
  || StringWrapper.startsWith(propName, STYLE_PREFIX)
- || StringMapWrapper.contains(attrToProp, propName);
+ || StringMapWrapper.contains(attrToProp(), propName);
 }
 
 /**
@@ -250,7 +257,7 @@ export class ElementBinderBuilder extends CompileStep {
  }
 
  _resolvePropertyName(attrName:string) {
- var mappedPropName = StringMapWrapper.get(attrToProp, attrName);
+ var mappedPropName = StringMapWrapper.get(attrToProp(), attrName);
  return isPresent(mappedPropName) ? mappedPropName : attrName;
  }
 }

modules/angular2/src/core/compiler/pipeline/element_binding_marker.js

@@ -1,6 +1,6 @@
 import {isPresent} from 'angular2/src/facade/lang';
 import {MapWrapper} from 'angular2/src/facade/collection';
-import {DOM} from 'angular2/src/facade/dom';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 
 import {CompileStep} from './compile_step';
 import {CompileElement} from './compile_element';