Merge pull request #3383 from Polymer/3288-kschaaf-attr-config-fix

Configure attr's with property effects. More robust fix for #3288.

src/lib/annotations/annotations.html

@@ -351,12 +351,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         // (properties) are case sensitive. Gambit is to map dash-case to
         // camel-case: `foo-bar` becomes `fooBar`.
         // Attribute bindings are excepted.
+        var propertyName = Polymer.CaseMap.dashToCamelCase(name);
         if (kind === 'property') {
-          name = Polymer.CaseMap.dashToCamelCase(name);
+          name = propertyName;
         }
         return {
           kind: kind,
           name: name,
+          propertyName: propertyName,
           parts: parts,
           literal: literal,
           isCompound: parts.length !== 1
@@ -372,7 +374,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         Polymer.Annotations.findAnnotatedNode(root, annote.parent);
       // unwind the stack, returning the indexed node at each level
       if (parent) {
-        // note: marginally faster than indexing via childNodes 
+        // note: marginally faster than indexing via childNodes
         // (http://jsperf.com/childnodes-lookup)
         for (var n=parent.firstChild, i=0; n; n=n.nextSibling) {
           if (annote.index === i++) {

src/standard/configure.html

@@ -136,15 +136,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             for (var i=0, l=fx.length, x; (i<l) && (x=fx[i]); i++) {
               // TODO(kschaaf): compound bindings (as well as computed effects)
               // are excluded from top-down configure for now; to be revisited
-              if (x.kind === 'annotation' &&
+              if (x.kind === 'annotation' && !x.isCompound) {
-                  x.effect.kind !== 'attribute' &&
-                  !x.isCompound) {
                 var node = this._nodes[x.effect.index];
+                var name = x.effect.propertyName;
                 // seeding configuration only
-                if (node._configValue) {
+                if (node._propertyEffects && node._propertyEffects[name]) {
                   var value = (p === x.effect.value) ? config[p] :
                     this._get(x.effect.value, config);
-                  node._configValue(x.effect.name, value);
+                  if (x.effect.kind == 'attribute') {
+                    value = node.deserialize(value,
+                      node._propertyInfo[name].type);
+                  }
+                  node._configValue(name, value);
                 }
               }
             }

src/standard/effectBuilder.html

@@ -148,6 +148,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             kind: note.kind,
             index: index,
             name: note.name,
+            propertyName: note.propertyName,
             value: part.value,
             isCompound: note.isCompound,
             compoundIndex: part.compoundIndex,

test/unit/attributes.html

@@ -283,11 +283,7 @@ suite('hostAttributes', function() {
     // applied to property with effect
     assert.strictEqual(compose.$.basic.prop, 'compose');
     assert.equal(compose.$.basic.propChangedCount, 1);
-    // Note: Attribute binding does not participate in efficient configuration
+    assert.equal(compose.$.basic.attr1ChangedCount, 1);
-    // per #3288.  As such, a property bound with an attribute binding will
-    // see its default value first, then be overwritten when the attribute
-    // binding runs and re-deserializes to the property, hence 2 observer calls
-    assert.equal(compose.$.basic.attr1ChangedCount, 2);
     assert.equal(compose.prop2, 'hi');
   });
 

test/unit/configure-elements.html

@@ -119,7 +119,21 @@
         },
         stomp: {
           value: 5
+        },
+        attrDash: {
+          observer: 'attrDashChanged',
+          value: 'default'
+        },
+        attrNumber: {
+          type: Number,
+          observer: 'attrNumberChanged',
+          value: 0
         }
+      },
+
+      created: function() {
+        this.attrDashChanged = sinon.spy();
+        this.attrNumberChanged = sinon.spy();
       }
 
     });
@@ -128,7 +142,7 @@
 
 <dom-module id="x-configure-host">
   <template>
-    <x-configure-child id="child" content="{{content}}" object="{{object.goo}}" attr$="{{attrValue}}"></x-configure-child>
+    <x-configure-child id="child" content="{{content}}" object="{{object.goo}}" attr$="{{attrValue}}" attr-dash$="{{attrValue}}" attr-number$="{{attrNumber}}"></x-configure-child>
   </template>
   <script>
     Polymer({
@@ -158,7 +172,10 @@
           value: 5
         },
         attrValue: {
-          value: 'attrValue'
+          value: 'attrValue',
+        },
+        attrNumber: {
+          value: '42'
         }
       }
 

test/unit/configure.html

@@ -81,12 +81,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       assert.equal(e.readOnly, 'default');
     });
 
-    test('properties for attribute bindings not configured', function() {
+    test('attribute bindings to properties without effects not configured', function() {
       var e = document.querySelector('x-configure-host');
       assert.equal(e.$.child.getAttribute('attr'), 'attrValue');
       assert.equal(e.$.child.attr, undefined);
     });
 
+    test('attribute bindings to properties with effects configured', function() {
+      var e = document.createElement('x-configure-host');
+
+      assert.equal(e.$.child.getAttribute('attr-dash'), 'attrValue');
+      assert.notProperty(e.$.child, 'attr-dash');
+      assert.equal(e.$.child.attrDash, 'attrValue');
+      assert.isTrue(e.$.child.attrDashChanged.calledOnce);
+      assert.equal(e.$.child.attrDashChanged.getCall(0).args[0], 'attrValue');
+
+      assert.equal(e.$.child.getAttribute('attr-number'), '42');
+      assert.notProperty(e.$.child, 'attr-number');
+      assert.strictEqual(e.$.child.attrNumber, 42);
+      assert.isTrue(e.$.child.attrNumberChanged.calledOnce);
+      assert.equal(e.$.child.attrNumberChanged.getCall(0).args[0], 42);
+    });
+
   });
 
 </script>