feat(vars): assignment of component or element instance to vars.

modules/angular2/test/core/compiler/integration_spec.js

@@ -133,6 +133,62 @@ export function main() {
           done();
         });
       });
+
+      it('should assign the component instance to a var-', (done) => {
+        compiler.compile(MyComp, el('<p><child-cmp var-alice></child-cmp></p>')).then((pv) => {
+          createView(pv);
+
+          expect(view.contextWithLocals).not.toBe(null);
+          expect(view.contextWithLocals.get('alice')).toBeAnInstanceOf(ChildComp);
+
+          done();
+        })
+      });
+
+      it('should assign two component instances each with a var-', (done) => {
+        var element = el('<p><child-cmp var-alice></child-cmp><child-cmp var-bob></p>');
+
+        compiler.compile(MyComp, element).then((pv) => {
+          createView(pv);
+
+          expect(view.contextWithLocals).not.toBe(null);
+          expect(view.contextWithLocals.get('alice')).toBeAnInstanceOf(ChildComp);
+          expect(view.contextWithLocals.get('bob')).toBeAnInstanceOf(ChildComp);
+          expect(view.contextWithLocals.get('alice')).not.toBe(view.contextWithLocals.get('bob'));
+
+          done();
+        })
+      });
+
+      it('should assign the component instance to a var- with shorthand syntax', (done) => {
+        compiler.compile(MyComp, el('<child-cmp #alice></child-cmp>')).then((pv) => {
+          createView(pv);
+
+          expect(view.contextWithLocals).not.toBe(null);
+          expect(view.contextWithLocals.get('alice')).toBeAnInstanceOf(ChildComp);
+
+          done();
+        })
+      });
+
+      it('should assign the element instance to a user-defined variable', (done) => {
+        // How is this supposed to work?
+        var element = el('<p></p>');
+        var div = el('<div var-alice></div>');
+        DOM.appendChild(div, el('<i>Hello</i>'));
+        DOM.appendChild(element, div);
+
+        compiler.compile(MyComp, element).then((pv) => {
+          createView(pv);
+          expect(view.contextWithLocals).not.toBe(null);
+
+          var value = view.contextWithLocals.get('alice');
+          expect(value).not.toBe(null);
+          expect(value.tagName).toEqual('DIV');
+
+          done();
+        })
+      });
     });
   });
 }

modules/angular2/test/core/compiler/pipeline/property_binding_parser_spec.js

@@ -34,10 +34,24 @@ export function main() {
       expect(MapWrapper.get(results[0].variableBindings, 'b')).toEqual('a');
     });
 
-    it('should not allow var- syntax on non template elements', () => {
-      expect( () => {
-        createPipeline().process(el('<div var-a="b"></div>'))
-      }).toThrowError('var-* is only allowed on <template> elements!');
+    it('should store variable binding for a non-template element', () => {
+      var results = createPipeline().process(el('<p var-george="washington"></p>'));
+      expect(MapWrapper.get(results[0].variableBindings, 'washington')).toEqual('george');
+    });
+
+    it('should store variable binding for a non-template element using shorthand syntax', () => {
+      var results = createPipeline().process(el('<p #george="washington"></p>'));
+      expect(MapWrapper.get(results[0].variableBindings, 'washington')).toEqual('george');
+    });
+
+    it('should store a variable binding with an implicit value', () => {
+      var results = createPipeline().process(el('<p var-george></p>'));
+      expect(MapWrapper.get(results[0].variableBindings, '\$implicit')).toEqual('george');
+    });
+
+    it('should store a variable binding with an implicit value using shorthand syntax', () => {
+      var results = createPipeline().process(el('<p #george></p>'));
+      expect(MapWrapper.get(results[0].variableBindings, '\$implicit')).toEqual('george');
     });
 
     it('should detect () syntax', () => {

modules/angular2/test/core/compiler/pipeline/proto_element_injector_builder_spec.js

@@ -1,7 +1,7 @@
 import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
 import {isPresent, isBlank} from 'angular2/src/facade/lang';
 import {DOM} from 'angular2/src/facade/dom';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 
 import {ProtoElementInjectorBuilder} from 'angular2/src/core/compiler/pipeline/proto_element_injector_builder';
 import {CompilePipeline} from 'angular2/src/core/compiler/pipeline/compile_pipeline';
@@ -21,6 +21,11 @@ export function main() {
       protoView = new ProtoView(null, null, null);
     });
 
+    // Create consts for an elements with a var- so that we can fake parsing the var into
+    // the CompileElement's variableBindings without actually doing any parsing.
+    var ELEMENT_WITH_VAR = el('<div var-name></div>');
+    var DIRECTIVE_ELEMENT_WITH_VAR = el('<div var-name directives></div>');
+
     function createPipeline(directives = null) {
       if (isBlank(directives)) {
         directives = [];
@@ -30,12 +35,20 @@ export function main() {
         if (isPresent(current.element.getAttribute('viewroot'))) {
           current.isViewRoot = true;
         }
+
         if (isPresent(current.element.getAttribute('directives'))) {
           for (var i=0; i<directives.length; i++) {
             var dirMetadata = reader.read(directives[i]);
             current.addDirective(dirMetadata);
           }
         }
+
+        // Check only for the hard-coded var- attribute from ELEMENT_WITH_VAR test element.
+        if (isPresent(current.element.getAttribute('var-name'))) {
+          current.variableBindings = MapWrapper.create();
+          MapWrapper.set(current.variableBindings, '\$implicit', 'name');
+        }
+
         current.inheritedProtoView = protoView;
       }), protoElementInjectorBuilder]);
     }
@@ -44,11 +57,16 @@ export function main() {
       return protoElementInjectorBuilder.findArgsFor(protoElementInjector);
     }
 
-    it('should not create a ProtoElementInjector for elements without directives', () => {
+    it('should not create a ProtoElementInjector for elements without directives or vars', () => {
       var results = createPipeline().process(el('<div></div>'));
       expect(results[0].inheritedProtoElementInjector).toBe(null);
     });
 
+    it('should create a ProtoElementInjector for elements with a variable binding', () => {
+      var results = createPipeline().process(ELEMENT_WITH_VAR);
+      expect(results[0].inheritedProtoElementInjector).toBeAnInstanceOf(ProtoElementInjector);
+    });
+
     it('should create a ProtoElementInjector for elements directives', () => {
       var directives = [SomeComponentDirective, SomeTemplateDirective, SomeDecoratorDirective];
       var results = createPipeline(directives).process(el('<div directives></div>'));
@@ -57,7 +75,22 @@ export function main() {
       expect(boundDirectives).toEqual(directives);
     });
 
-    it('should mark ProtoElementInjector for elements with component directives and use the ComponentDirective as first binding', () => {
+    it('should flag the ProtoElementInjector for exporting the component instance when a' +
+        'component has a var- declaration', () => {
+      var results = createPipeline([SomeComponentDirective]).process(DIRECTIVE_ELEMENT_WITH_VAR);
+      expect(results[0].inheritedProtoElementInjector.exportComponent).toBe(true);
+      expect(results[0].inheritedProtoElementInjector.exportElement).toBe(false);
+    });
+
+    it('should flag the ProtoElementInjector for exporting the element when a' +
+        'non-component element has a var- declaration', () => {
+      var results = createPipeline([SomeComponentDirective]).process(ELEMENT_WITH_VAR);
+      expect(results[0].inheritedProtoElementInjector.exportComponent).toBe(false);
+      expect(results[0].inheritedProtoElementInjector.exportElement).toBe(true);
+    });
+
+    it('should mark ProtoElementInjector for elements with component directives and use the ' +
+        'ComponentDirective as first binding', () => {
       var directives = [SomeDecoratorDirective, SomeComponentDirective];
       var results = createPipeline(directives).process(el('<div directives></div>'));
       var creationArgs = getCreationArgs(results[0].inheritedProtoElementInjector);

modules/angular2/test/core/compiler/pipeline/proto_view_builder_spec.js

@@ -62,6 +62,21 @@ export function main() {
       }));
     });
 
+    it('should mark variables in the proto view context locals', () => {
+      var element = el('<div viewroot><p var-binding></p></div>');
+
+      var results = createPipeline({
+        'var1': 'map1',
+        'var2': 'map2'
+      }).process(element);
+
+      var protoView = results[0].inheritedProtoView;
+      expect(protoView.protoContextLocals).toEqual(MapWrapper.createFromStringMap({
+        'map2': null,
+        'map1': null
+      }));
+    });
+
     describe('errors', () => {
 
       it('should not allow multiple nested ProtoViews for the same parent element', () => {
@@ -84,4 +99,4 @@ class MockStep extends CompileStep {
   process(parent:CompileElement, current:CompileElement, control:CompileControl) {
     this.processClosure(parent, current, control);
   }
-}
+}