feat(compiler): Shadow DOM-less components

Author: jbdeboer

lib/core_dom/module_internal.dart

@@ -34,9 +34,11 @@ part 'mustache.dart';
 part 'node_cursor.dart';
 part 'selector.dart';
 part 'shadow_dom_component_factory.dart';
+part 'shadowless_shadow_root.dart';
 part 'tagging_compiler.dart';
 part 'tagging_view_factory.dart';
 part 'template_cache.dart';
+part 'transcluding_component_factory.dart';
 part 'tree_sanitizer.dart';
 part 'walking_compiler.dart';
 part 'ng_element.dart';
@@ -53,7 +55,11 @@ class CoreDomModule extends Module {
     type(AttrMustache);
 
     type(Compiler, implementedBy: TaggingCompiler);
+
     type(ComponentFactory, implementedBy: ShadowDomComponentFactory);
+    type(_Content);
+    value(_ContentPort, null);
+
     type(Http);
     type(UrlRewriter);
     type(HttpBackend);

lib/core_dom/shadow_dom_component_factory.dart

@@ -2,6 +2,26 @@ part of angular.core.dom_internal;
 
 abstract class ComponentFactory {
   FactoryFn call(dom.Node node, DirectiveRef ref);
+
+  static async.Future<ViewFactory> _viewFuture(
+        Component component, ViewCache viewCache, DirectiveMap directives) {
+    if (component.template != null) {
+      return new async.Future.value(viewCache.fromHtml(component.template, directives));
+    }
+    if (component.templateUrl != null) {
+      return viewCache.fromUrl(component.templateUrl, directives);
+    }
+    return null;
+  }
+
+  static TemplateLoader _setupOnShadowDomAttach(controller, templateLoader, shadowScope) {
+    if (controller is ShadowRootAware) {
+      templateLoader.template.then((shadowDom) {
+        if (!shadowScope.isAttached) return;
+        (controller as ShadowRootAware).onShadowRoot(shadowDom);
+      });
+    }
+  }
 }
 
 class ShadowDomComponentFactory implements ComponentFactory {
@@ -12,7 +32,6 @@ class ShadowDomComponentFactory implements ComponentFactory {
   FactoryFn call(dom.Node node, DirectiveRef ref) {
     return (Injector injector) {
         var component = ref.annotation as Component;
-        Compiler compiler = injector.get(Compiler);
         Scope scope = injector.get(Scope);
         ViewCache viewCache = injector.get(ViewCache);
         Http http = injector.get(Http);
@@ -78,13 +97,7 @@ class _ComponentFactory implements Function {
     } else {
       cssFutures.add(new async.Future.value(null));
     }
-    var viewFuture;
-    if (component.template != null) {
-      viewFuture = new async.Future.value(viewCache.fromHtml(
-          component.template, directives));
-    } else if (component.templateUrl != null) {
-      viewFuture = viewCache.fromUrl(component.templateUrl, directives);
-    }
+    var viewFuture = ComponentFactory._viewFuture(component, viewCache, directives);
     TemplateLoader templateLoader = new TemplateLoader(
         async.Future.wait(cssFutures).then((Iterable<String> cssList) {
           if (cssList != null) {
@@ -98,19 +111,14 @@ class _ComponentFactory implements Function {
           if (viewFuture != null) {
             return viewFuture.then((ViewFactory viewFactory) {
               return (!shadowScope.isAttached) ?
-              shadowDom :
-              attachViewToShadowDom(viewFactory);
+                shadowDom :
+                attachViewToShadowDom(viewFactory);
             });
           }
           return shadowDom;
         }));
     controller = createShadowInjector(injector, templateLoader).get(type);
-    if (controller is ShadowRootAware) {
-      templateLoader.template.then((_) {
-        if (!shadowScope.isAttached) return;
-        (controller as ShadowRootAware).onShadowRoot(shadowDom);
-      });
-    }
+    ComponentFactory._setupOnShadowDomAttach(controller, templateLoader, shadowScope);
     return controller;
   }
 

lib/core_dom/shadowless_shadow_root.dart

@@ -0,0 +1,12 @@
+part of angular.core.dom_internal;
+
+@proxy
+class ShadowlessShadowRoot implements dom.ShadowRoot {
+  dom.Element _element;
+
+  ShadowlessShadowRoot(this._element);
+
+  noSuchMethod(Invocation invocation) {
+    throw new UnimplementedError("Not yet implemented in ShadowlessShadowRoot.");
+  }
+}

lib/core_dom/transcluding_component_factory.dart

@@ -0,0 +1,121 @@
+part of angular.core.dom_internal;
+
+@Decorator(
+   selector: 'content')
+class _Content implements AttachAware, DetachAware {
+  final _ContentPort _port;
+  final dom.Element _element;
+  dom.Comment _beginComment;
+  _Content(this._port, this._element);
+
+  void attach() {
+    if (_port == null) return;
+    _beginComment = _port.content(_element);
+  }
+  
+  void detach() {
+    if (_port == null) return;
+    _port.detachContent(_beginComment);
+  }
+}
+
+class _ContentPort {
+  dom.Element _element;
+  var _childNodes = [];
+
+  _ContentPort(this._element);
+
+  void pullNodes() {
+    _childNodes.addAll(_element.nodes);
+    _element.nodes = [];
+  }
+
+  content(dom.Element elt) {
+    var hash = elt.hashCode;
+    var beginComment = new dom.Comment("content $hash");
+
+    if (_childNodes.isNotEmpty) {
+      elt.parent.insertBefore(beginComment, elt);
+      elt.parent.insertAllBefore(_childNodes, elt);
+      elt.parent.insertBefore(new dom.Comment("end-content $hash"), elt);
+      _childNodes = [];
+    }
+    elt.remove();
+    return beginComment;
+  }
+
+  void detachContent(dom.Comment _beginComment) {
+    // Search for endComment and extract everything in between.
+    // TODO optimize -- there may be a better way of pulling out nodes.
+
+    var endCommentText = "end-${_beginComment.text}";
+
+    var next;
+    for (next = _beginComment.nextNode;
+         next.nodeType != dom.Node.COMMENT_NODE && next.text != endCommentText;
+         next = _beginComment.nextNode) {
+      _childNodes.add(next);
+      next.remove();
+    }
+    assert(next.nodeType == dom.Node.COMMENT_NODE && next.text == endCommentText);
+    next.remove();
+  }
+}
+
+class TranscludingComponentFactory implements ComponentFactory {
+  final Expando _expando;
+
+  TranscludingComponentFactory(this._expando);
+
+  FactoryFn call(dom.Node node, DirectiveRef ref) {
+    // CSS is not supported.
+    assert((ref.annotation as Component).cssUrls == null ||
+           (ref.annotation as Component).cssUrls.isEmpty);
+
+    var element = node as dom.Element;
+    return (Injector injector) {
+      var childInjector;
+      var component = ref.annotation as Component;
+      Scope scope = injector.get(Scope);
+      ViewCache viewCache = injector.get(ViewCache);
+      Http http = injector.get(Http);
+      TemplateCache templateCache = injector.get(TemplateCache);
+      DirectiveMap directives = injector.get(DirectiveMap);
+      NgBaseCss baseCss = injector.get(NgBaseCss);
+
+      var contentPort = new _ContentPort(element);
+
+      // Append the component's template as children
+      var viewFuture = ComponentFactory._viewFuture(component, viewCache, directives);
+
+      if (viewFuture != null) {
+        viewFuture = viewFuture.then((ViewFactory viewFactory) {
+          contentPort.pullNodes();
+          element.nodes.addAll(viewFactory(childInjector).nodes);
+          return element;
+        });
+      } else {
+        viewFuture = new async.Future.microtask(() => contentPort.pullNodes());
+      }
+      TemplateLoader templateLoader = new TemplateLoader(viewFuture);
+
+      Scope shadowScope = scope.createChild({});
+
+      var probe;
+      var childModule = new Module()
+          ..type(ref.type)
+          ..type(NgElement)
+          ..value(_ContentPort, contentPort)
+          ..value(Scope, shadowScope)
+          ..value(TemplateLoader, templateLoader)
+          ..value(dom.ShadowRoot, new ShadowlessShadowRoot(element))
+          ..factory(ElementProbe, (_) => probe);
+      childInjector = injector.createChild([childModule], name: SHADOW_DOM_INJECTOR_NAME);
+
+      var controller = childInjector.get(ref.type);
+      shadowScope.context[component.publishAs] = controller;
+      ComponentFactory._setupOnShadowDomAttach(controller, templateLoader, shadowScope);
+      return controller;
+    };
+  }
+}

lib/directive/ng_template.dart

@@ -35,3 +35,5 @@ class NgTemplate {
           ? (element as dom.TemplateElement).content.innerHtml
           : element.innerHtml));
 }
+
+

pubspec.lock

@@ -12,7 +12,7 @@ packages:
   barback:
     description: barback
     source: hosted
-    version: "0.13.0"
+    version: "0.12.0"
   benchmark_harness:
     description: benchmark_harness
     source: hosted