feat(compiler): support component parameters.

Author: mhevery

lib/block.dart

@@ -179,9 +179,7 @@ class Block implements ElementWrapper {
       try {
         var directiveInstance = injector.get(directiveType);
         if (directiveRef.directive.isComponent) {
-          // TODO(misko): this way of getting shadowBlock is dumb!
-          Block shadowBlock = directiveRef.blockTypes['']();
-          directiveInstance = new ComponentWrapper(directiveInstance, node, shadowBlock);
+          directiveInstance = new ComponentWrapper(directiveRef, directiveInstance, node, $injector.get(Parser));
         }
         directives.add(directiveInstance);
       } catch (e,s) {
@@ -337,20 +335,52 @@ class Block implements ElementWrapper {
 }
 
 class ComponentWrapper {
+  DirectiveRef directiveRef;
   dynamic controller;
   dom.Element elementRoot;
   Block shadowBlock;
   Scope shadowScope;
+  Parser parser;
 
-  ComponentWrapper(this.controller, this.elementRoot, this.shadowBlock) {
+  ComponentWrapper(this.directiveRef, this.controller, this.elementRoot, this.parser) {
+    // TODO(misko): this way of getting shadowBlock is dumb!
+    shadowBlock = directiveRef.blockTypes['']();
     var shadowRoot = elementRoot.createShadowRoot();
+    // TODO(misko): this look should be moved into Block: shodowBlock.appendTo(shadowRoot);
     for (var i = 0, ii = shadowBlock.elements.length; i < ii; i++) {
       shadowRoot.append(shadowBlock.elements[i]);
     }
   }
 
   attach(scope) {
-    shadowScope = scope.$new();
+    shadowScope = scope.$new(true);
+    directiveRef.directive.$map.forEach((attrName, mapping) {
+      var attrValue = elementRoot.attributes[attrName];
+      if (mapping == '@') {
+        shadowScope[attrName] = attrValue;
+      } else if (mapping == '=') {
+        ParsedFn expr = parser(attrValue);
+        var shadowValue;
+        shadowScope.$watch(
+                () => expr(scope),
+                (v) => shadowScope[attrName] = shadowValue = v);
+        if (expr.assignable) {
+          shadowScope.$watch(
+                () => shadowScope[attrName],
+                (v) {
+                  if (shadowValue != v) {
+                    shadowValue = v;
+                    expr.assign(scope, v);
+                  }
+                } );
+        }
+      } else if (mapping == '&') {
+        ParsedFn fn = parser(attrValue);
+        shadowScope[attrName] = ([locals]) => fn(scope, locals);
+      } else {
+        throw "Unknown mapping $mapping for attribute $attrName.";
+      }
+    });
     controller.attach(shadowScope);
     shadowBlock.attach(shadowScope);
   }

lib/directive.dart

@@ -12,6 +12,7 @@ class Directive {
   int $priority = 0;
   Type $controllerType;
   String $template;
+  Map<String, String> $map;
 
   bool isComponent = false;
   bool isStructural = false;
@@ -41,6 +42,7 @@ class Directive {
     $transclude = reflectStaticField(type, '\$transclude');
     $template = reflectStaticField(type, '\$template');
     $priority = reflectStaticField(type, '\$priority');
+    $map = reflectStaticField(type, '\$map');
     if ($priority == null) {
       $priority = 0;
     }
@@ -49,6 +51,9 @@ class Directive {
     if ($selector != null) {
       $name = $selector;
     }
+    if (isComponent && $map == null) {
+      $map = new Map<String, String>();
+    }
   }
 }
 

lib/scope.dart

@@ -104,7 +104,11 @@ class Scope implements Map {
       this[name] = value;
       return value;
     } else {
-      super.noSuchMethod(invocation);
+      if (this[name] is Function) {
+        return this[name]();
+      } else {
+        super.noSuchMethod(invocation);
+      }
     }
   }
 

test/compiler_spec.dart

@@ -70,7 +70,7 @@ main() {
       template(element).attach($rootScope);
 
       expect(element.text()).toEqual('');
-// TODO(deboer): Digest twice until we have dirty checking in the scope.
+      // TODO(deboer): Digest twice until we have dirty checking in the scope.
       $rootScope.$digest();
       $rootScope.$digest();
       expect(element.text()).toEqual('Ab');
@@ -423,30 +423,54 @@ main() {
     describe('components', () {
       beforeEach(() {
         directives.register(SimpleComponent);
+        directives.register(IoComponent);
       });
 
       it('should create a simple component', inject((Compiler $compile) {
         $rootScope.name = 'OUTTER';
-        var element = $(r'<div>{{name}}{{$id}}:<simple>{{name}}{{$id}}</simple></div>');
+        $rootScope.sep = '-';
+        var element = $(r'<div>{{name}}{{sep}}{{$id}}:<simple>{{name}}{{sep}}{{$id}}</simple></div>');
         BlockType blockType = $compile(element);
         Block block = blockType(element);
         block.attach($rootScope);
         $rootScope.$digest();
 
-        expect(element.textWithShadow()).toEqual('OUTTER_1:INNER_2(OUTTER_1)');
+        expect(element.textWithShadow()).toEqual('OUTTER-_1:INNER_2(OUTTER-_1)');
+      }));
+
+      it('should create a component with IO', inject((Compiler $compile) {
+        var element = $(r'<div><io attr="A" expr="name" ondone="done=true"></io></div>');
+        $compile(element)(element).attach($rootScope);
+        $rootScope.name = 'misko';
+        $rootScope.$apply();
+        var component = $rootScope.ioComponent;
+        expect(component.scope.name).toEqual(null);
+        expect(component.scope.attr).toEqual('A');
+        expect(component.scope.expr).toEqual('misko');
+        component.scope.expr = 'angular';
+        $rootScope.$apply();
+        expect($rootScope.name).toEqual('angular');
+        expect($rootScope.done).toEqual(null);
+        component.scope.ondone();
+        expect($rootScope.done).toEqual(true);
       }));
     });
   });
 }
 
 class SimpleComponent {
-  static String $template = r'{{name}}{{$id}}(<content>SHADOW-CONTENT</content>)';
-
-  SimpleComponent() {
-  }
-
+  static String $template = r'{{name}}{{sep}}{{$id}}(<content>SHADOW-CONTENT</content>)';
   attach(Scope scope) {
     scope.name = 'INNER';
   }
+}
 
+class IoComponent {
+  static String $template = r'<content></content>';
+  static Map $map = {"attr": "@", "expr": "=", "ondone": "&"};
+  Scope scope;
+  attach(Scope scope) {
+    this.scope = scope;
+    scope.$root.ioComponent = this;
+  }
 }