feat(components): implement css encapsulation for transcluding components

* Extract ComponentCssLoader so it can be shared by ShadowDomComponentFactory and TranscludingComponentFactory
* Implement a CSS transformer similar to the one provided by Platform.JS
* Rename EventHandler into ShadowBoundary
* Provide a built-in implementation of WebPlatformShim

Closes dart-archive#1300

Author: vsavkin

lib/core/module.dart

@@ -39,7 +39,7 @@ export "package:angular/core_dom/module_internal.dart" show
     BoundViewFactory,
     DirectiveMap,
     ElementProbe,
-    EventHandler,
+    ShadowBoundary,
     Http,
     HttpBackend,
     HttpConfig,

lib/core_dom/component_css_loader.dart

@@ -0,0 +1,46 @@
+part of angular.core.dom_internal;
+
+class ComponentCssLoader {
+  final Http http;
+  final TemplateCache templateCache;
+  final WebPlatformShim platformShim;
+  final ComponentCssRewriter componentCssRewriter;
+  final dom.NodeTreeSanitizer treeSanitizer;
+  final Map<_ComponentAssetKey, async.Future<dom.StyleElement>> styleElementCache;
+
+  ComponentCssLoader(this.http, this.templateCache, this.platformShim,
+                      this.componentCssRewriter, this.treeSanitizer,
+                      this.styleElementCache);
+
+  async.Future<List<dom.StyleElement>> call(String tag, List<String> cssUrls) =>
+      async.Future.wait(cssUrls.map((url) => _styleElement(tag, url)));
+
+  async.Future<dom.StyleElement> _styleElement(String tag, String cssUrl) {
+    final element = styleElementCache.putIfAbsent(
+        new _ComponentAssetKey(tag, cssUrl),
+        () => _loadNewCss(tag, cssUrl));
+    return element.then((e) => e.clone(true));
+  }
+
+  async.Future _loadNewCss(String tag, String cssUrl) {
+    return _fetch(cssUrl)
+        .then((css) => _shim(css, tag, cssUrl))
+        .then(_buildStyleElement);
+  }
+
+  async.Future<String> _fetch(String cssUrl) {
+    return http.get(cssUrl, cache: templateCache)
+        .then((resp) => resp.responseText, onError: (e) => '/*\n$e\n*/\n');
+  }
+
+  String _shim(String css, String tag, String cssUrl) {
+    final shimmed = platformShim.shimCss(css, selector: tag, cssUrl: cssUrl);
+    return componentCssRewriter(shimmed, selector: tag, cssUrl: cssUrl);
+  }
+
+  dom.StyleElement _buildStyleElement(String css) {
+    var styleElement = new dom.StyleElement()..appendText(css);
+    treeSanitizer.sanitizeTree(styleElement);
+    return styleElement;
+  }
+}

lib/core_dom/component_type_id_generator.dart

@@ -0,0 +1,10 @@
+part of angular.core.dom_internal;
+
+@Injectable()
+class ComponentTypeIdGenerator {
+  final Map<Type, String> _uniqIds = {};
+  int _index = 0;
+
+  idFor(DirectiveRef ref) =>
+      _uniqIds.putIfAbsent(ref.type, () => "${ref.type}-${_index++}");
+}

lib/core_dom/css_shim.dart

@@ -0,0 +1,113 @@
+library css_shim;
+
+import 'package:angular/core/parser/characters.dart';
+
+String shimCssText(String css, String uniqId) {
+  final res = new StringBuffer();
+
+  final tokens = new _Lexer(css).parse();
+  for(var i = 0; i < tokens.length; i += 2) {
+    if (tokens.length == i + 1 ||
+        ! tokens[i].isSelector ||
+        ! tokens[i + 1].isBody
+    ) {
+      throw new InvalidCss();
+    }
+
+    res.write("${tokens[i].string}[${uniqId}] ${tokens[i + 1].string}");
+  }
+  return res.toString();
+}
+
+class InvalidCss implements Exception {}
+
+class _Token {
+  static final _Token EOF = new _Token(null);
+
+  final String string;
+  _Token(this.string);
+
+  bool get isSelector => false;
+  bool get isBody => false;
+
+  String toString() => "TOKEN: $string";
+}
+
+class _SelectorToken extends _Token {
+  _SelectorToken(str) : super(str);
+  bool get isSelector => true;
+}
+
+class _BodyToken extends _Token {
+  _BodyToken(str) : super(str);
+  bool get isBody => true;
+}
+
+class _Lexer {
+  int peek = 0;
+  int index = -1;
+  String input;
+  int length;
+
+  _Lexer(this.input) {
+    length = input.length;
+    advance();
+  }
+
+  List<_Token> parse() {
+    final res = [];
+    var t = scanToken();
+    while (t != _Token.EOF) {
+      res.add(t);
+      t = scanToken();
+    }
+    return res;
+  }
+
+  _Token scanToken() {
+    skipWhitespace();
+
+    if (peek == $EOF) return _Token.EOF;
+    if (isSelector(peek)) return scanSelector();
+    if (isBodyStart(peek)) return scanBody();
+
+    String character = new String.fromCharCode(peek);
+    throw new InvalidCss();
+  }
+
+  bool isSelector(int v) => !isWhitespace(v) && !isBodyStart(v) && v != $EOF;
+  bool isBodyStart(int v) => v == $LBRACE;
+  bool isBodyEnd(int v) => v == $RBRACE;
+
+  void skipWhitespace() {
+    while (isWhitespace(peek)) {
+      if (++index >= length) {
+        peek = $EOF;
+        return null;
+      } else {
+        peek = input.codeUnitAt(index);
+      }
+    }
+  }
+
+  _Token scanSelector() {
+    int start = index;
+    advance();
+    while (isSelector(peek)) advance();
+    String string = input.substring(start, index);
+    return new _SelectorToken(string);
+  }
+
+  _Token scanBody() {
+    int start = index;
+    advance();
+    while (!isBodyEnd(peek)) advance();
+    advance();
+    String string = input.substring(start, index);
+    return new _BodyToken(string);
+  }
+
+  void advance() {
+    peek = ++index >= length ? $EOF : input.codeUnitAt(index);
+  }
+}

lib/core_dom/directive_injector.dart

@@ -14,7 +14,7 @@ import 'package:angular/core/module.dart' show Scope, RootScope;
 import 'package:angular/core/annotation.dart' show Visibility, DirectiveBinder;
 import 'package:angular/core_dom/module_internal.dart'
   show Animate, View, ViewFactory, BoundViewFactory, ViewPort, NodeAttrs, ElementProbe,
-      NgElement, ContentPort, TemplateLoader, ShadowRootEventHandler, EventHandler;
+      NgElement, ContentPort, TemplateLoader, ShadowRootBoundary, ShadowBoundary;
 
 var _TAG_GET = new UserTag('DirectiveInjector.get()');
 var _TAG_INSTANTIATE = new UserTag('DirectiveInjector.instantiate()');
@@ -49,7 +49,7 @@ const int ELEMENT_PROBE_KEY_ID      = 13;
 const int TEMPLATE_LOADER_KEY_ID    = 14;
 const int SHADOW_ROOT_KEY_ID        = 15;
 const int CONTENT_PORT_KEY_ID       = 16;
-const int EVENT_HANDLER_KEY_ID      = 17;
+const int SHADOW_BOUNDARY_KEY_ID    = 17;
 const int KEEP_ME_LAST              = 18;
 
 class DirectiveInjector implements DirectiveBinder {
@@ -72,7 +72,7 @@ class DirectiveInjector implements DirectiveBinder {
     TEMPLATE_LOADER_KEY.uid    = TEMPLATE_LOADER_KEY_ID;
     SHADOW_ROOT_KEY.uid        = SHADOW_ROOT_KEY_ID;
     CONTENT_PORT_KEY.uid       = CONTENT_PORT_KEY_ID;
-    EVENT_HANDLER_KEY.uid      = EVENT_HANDLER_KEY_ID;
+    SHADOW_BOUNDARY_KEY.uid    = SHADOW_BOUNDARY_KEY_ID;
     ANIMATE_KEY.uid            = ANIMATE_KEY_ID;
     for(var i = 1; i < KEEP_ME_LAST; i++) {
       if (_KEYS[i].uid != i) throw 'MISSORDERED KEYS ARRAY: ${_KEYS} at $i';
@@ -96,7 +96,7 @@ class DirectiveInjector implements DirectiveBinder {
       , TEMPLATE_LOADER_KEY
       , SHADOW_ROOT_KEY
       , CONTENT_PORT_KEY
-      , EVENT_HANDLER_KEY
+      , SHADOW_BOUNDARY_KEY
       , KEEP_ME_LAST
       ];
 
@@ -105,7 +105,7 @@ class DirectiveInjector implements DirectiveBinder {
   final Node _node;
   final NodeAttrs _nodeAttrs;
   final Animate _animate;
-  final EventHandler _eventHandler;
+  final ShadowBoundary _shadowBoundary;
   Scope scope;  //TODO(misko): this should be final after we get rid of controller
 
   NgElement _ngElement;
@@ -140,15 +140,15 @@ class DirectiveInjector implements DirectiveBinder {
 
   static Binding _tempBinding = new Binding();
 
-  DirectiveInjector(parent, appInjector, this._node, this._nodeAttrs, this._eventHandler,
+  DirectiveInjector(parent, appInjector, this._node, this._nodeAttrs, this._shadowBoundary,
                     this.scope, this._animate)
       : appInjector = appInjector,
         parent = parent == null ? new DefaultDirectiveInjector(appInjector) : parent;
 
   DirectiveInjector._default(this.parent, this.appInjector)
       : _node = null,
         _nodeAttrs = null,
-        _eventHandler = null,
+        _shadowBoundary = null,
         scope = null,
         _animate = null;
 
@@ -264,7 +264,7 @@ class DirectiveInjector implements DirectiveBinder {
       case SCOPE_KEY_ID:              return scope;
       case ELEMENT_PROBE_KEY_ID:      return elementProbe;
       case NG_ELEMENT_KEY_ID:         return ngElement;
-      case EVENT_HANDLER_KEY_ID:      return _eventHandler;
+      case SHADOW_BOUNDARY_KEY_ID:    return _shadowBoundary;
       case CONTENT_PORT_KEY_ID:       return parent._getById(keyId);
       default: new NoProviderError(_KEYS[keyId]);
     }
@@ -344,9 +344,9 @@ class TemplateDirectiveInjector extends DirectiveInjector {
   BoundViewFactory _boundViewFactory;
 
   TemplateDirectiveInjector(DirectiveInjector parent, Injector appInjector,
-                       Node node, NodeAttrs nodeAttrs, EventHandler eventHandler,
+                       Node node, NodeAttrs nodeAttrs, ShadowBoundary shadowBoundary,
                        Scope scope, Animate animate, this._viewFactory)
-    : super(parent, appInjector, node, nodeAttrs, eventHandler, scope, animate);
+    : super(parent, appInjector, node, nodeAttrs, shadowBoundary, scope, animate);
 
 
   Object _getById(int keyId) {
@@ -368,9 +368,9 @@ abstract class ComponentDirectiveInjector extends DirectiveInjector {
   final ShadowRoot _shadowRoot;
 
   ComponentDirectiveInjector(DirectiveInjector parent, Injector appInjector,
-                        EventHandler eventHandler, Scope scope,
+                        ShadowBoundary shadowBoundary, Scope scope,
                         this._templateLoader, this._shadowRoot)
-      : super(parent, appInjector, parent._node, parent._nodeAttrs, eventHandler, scope,
+      : super(parent, appInjector, parent._node, parent._nodeAttrs, shadowBoundary, scope,
               parent._animate);
 
   Object _getById(int keyId) {
@@ -389,9 +389,9 @@ class ShadowlessComponentDirectiveInjector extends ComponentDirectiveInjector {
   final ContentPort _contentPort;
 
   ShadowlessComponentDirectiveInjector(DirectiveInjector parent, Injector appInjector,
-                                  EventHandler eventHandler, Scope scope,
+                                  ShadowBoundary shadowBoundary, Scope scope,
                                   templateLoader, shadowRoot, this._contentPort)
-      : super(parent, appInjector, eventHandler, scope, templateLoader, shadowRoot);
+      : super(parent, appInjector, shadowBoundary, scope, templateLoader, shadowRoot);
 
   Object _getById(int keyId) {
     switch(keyId) {
@@ -404,7 +404,7 @@ class ShadowlessComponentDirectiveInjector extends ComponentDirectiveInjector {
 class ShadowDomComponentDirectiveInjector extends ComponentDirectiveInjector {
   ShadowDomComponentDirectiveInjector(DirectiveInjector parent, Injector appInjector,
                                  Scope scope, templateLoader, shadowRoot)
-      : super(parent, appInjector, new ShadowRootEventHandler(shadowRoot,
+      : super(parent, appInjector, new ShadowRootBoundary(shadowRoot,
                                                parent.getByKey(EXPANDO_KEY),
                                                parent.getByKey(EXCEPTION_HANDLER_KEY)),
             scope, templateLoader, shadowRoot);

lib/core_dom/element_binder.dart

@@ -243,7 +243,7 @@ class ElementBinder {
 
   DirectiveInjector bind(View view, Scope scope,
                          DirectiveInjector parentInjector,
-                         dom.Node node, EventHandler eventHandler, Animate animate) {
+                         dom.Node node, ShadowBoundary shadowBoundary, Animate animate) {
     var nodeAttrs = node is dom.Element ? new NodeAttrs(node) : null;
 
     var directiveRefs = _usableDirectiveRefs;
@@ -252,11 +252,11 @@ class ElementBinder {
     DirectiveInjector nodeInjector;
     if (this is TemplateElementBinder) {
       nodeInjector = new TemplateDirectiveInjector(parentInjector, parentInjector.appInjector,
-          node, nodeAttrs, eventHandler, scope, animate,
+          node, nodeAttrs, shadowBoundary, scope, animate,
           (this as TemplateElementBinder).templateViewFactory);
     } else {
       nodeInjector = new DirectiveInjector(parentInjector, parentInjector.appInjector,
-          node, nodeAttrs, eventHandler, scope, animate);
+          node, nodeAttrs, shadowBoundary, scope, animate);
     }
 
     for(var i = 0; i < directiveRefs.length; i++) {
@@ -306,7 +306,7 @@ class ElementBinder {
 
     if (onEvents.isNotEmpty) {
       onEvents.forEach((event, value) {
-        view.registerEvent(EventHandler.attrNameToEventName(event));
+        view.registerEvent(ShadowBoundary.attrNameToEventName(event));
       });
     }
     return nodeInjector;