Merge pull request #3780 from Polymer/3779-kschaaf-prop-wins

Ensure properties override attributes at upgrade time. Fixes #3779.

Author: Steve Orvell

src/lib/template/dom-bind.html

@@ -71,9 +71,9 @@
       Polymer.RenderStatus.whenReady(function() {
         if (document.readyState == 'loading') {
           document.addEventListener('DOMContentLoaded', function() {
-            self._markImportsReady(); 
+            self._markImportsReady();
           });
-        } else {  
+        } else {
           self._markImportsReady();
         }
       });
@@ -123,6 +123,11 @@
       }
     },
 
+    _configureInstanceProperties: function() {
+      // We use the _prepConfigure code below to read instance values before
+      // creating instance accessors, rather than the standard method here
+    },
+
     _prepConfigure: function() {
       var config = {};
       for (var prop in this._propertyEffects) {

src/standard/configure.html

@@ -90,6 +90,8 @@
       // e.g. hand template content stored in notes to children as part of
       // configure flow so templates have their content at ready time
       this._configureAnnotationReferences();
+      // configure instance properties that may have been bound prior to upgrade
+      this._configureInstanceProperties();
       // save copy of configuration that came from above
       this._aboveConfig = this.mixin({}, this._config);
       // get individual default values from property configs
@@ -113,18 +115,23 @@
       }
     },
 
-    _configureProperties: function(properties, config) {
-      for (var i in properties) {
-        var c = properties[i];
+    _configureInstanceProperties: function() {
+      for (var i in this._propertyEffects) {
         // Allow properties set before upgrade on the instance
         // to override default values. This allows late upgrade + an early set
         // to not b0rk accessors on the prototype.
         // Perf testing has shown `hasOwnProperty` to be ok here.
-        if (!usePolyfillProto && this.hasOwnProperty(i) &&
-            this._propertyEffects && this._propertyEffects[i]) {
-          config[i] = this[i];
+        if (!usePolyfillProto && this.hasOwnProperty(i)) {
+          this._configValue(i, this[i]);
           delete this[i];
-        } else if (c.value !== undefined) {
+        }
+      }
+    },
+
+    _configureProperties: function(properties, config) {
+      for (var i in properties) {
+        var c = properties[i];
+        if (c.value !== undefined) {
           var value = c.value;
           if (typeof value == 'function') {
             // pass existing config values (this._config) to value function

test/unit/configure-elements.html

@@ -234,3 +234,53 @@
     });
   </script>
 </dom-module>
+
+<script>
+  window.XConfigLazy = {
+    is: 'x-config-lazy',
+    properties: {
+      noEffectProp: Number,
+      defaultUsesNoEffectProp: {
+        value: function() {
+          return this.noEffectProp * 2;
+        }
+      },
+      prop: {
+        observer: 'propChanged'
+      },
+      readOnlyProp: {
+        readOnly: true,
+        value: 'readOnly'
+      },
+      hadAttrProp: {
+        value: 'hadAttrProp',
+        observer: 'hadAttrPropChanged'
+      }
+    },
+    created: function() {
+      this.noEffectProp = 1;
+      this.propChanged = sinon.spy();
+      this.hadAttrPropChanged = sinon.spy();
+    }
+  };
+</script>
+
+<dom-module id="x-config-lazy-host">
+  <template>
+    <x-config-lazy id="lazy" prop="{{foo}}" read-only-prop="{{foo}}" had-attr-prop="attrValue"></x-config-lazy>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-config-lazy-host',
+      properties: {
+        foo: {
+          value: 'foo',
+          observer: 'fooChanged'
+        }
+      },
+      fooChanged: function(foo) {
+        this.$.lazy.hadAttrProp = foo;
+      }
+    })
+  </script>
+</dom-module>

test/unit/configure.html

@@ -186,6 +186,25 @@
       assert.equal(x.b, 2);
       document.body.removeChild(x);
     });
+
+    test('lazy upgrade binding use cases', function() {
+      // don't test if __proto__ is polyfilled (IE10); cannot be fixed in this case.
+      if (Polymer.Settings.usePolyfillProto) {
+        return;
+      }
+      var el = document.createElement('x-config-lazy-host');
+      document.body.appendChild(el);
+      Polymer(window.XConfigLazy);
+      assert.equal(el.$.lazy.noEffectProp, 1);
+      assert.equal(el.$.lazy.defaultUsesNoEffectProp, 2);
+      assert.equal(el.$.lazy.prop, 'foo');
+      assert.isTrue(el.$.lazy.propChanged.calledOnce);
+      assert.equal(el.$.lazy.readOnlyProp, 'readOnly');
+      assert.equal(el.$.lazy.hadAttrProp, 'foo');
+      assert.isTrue(el.$.lazy.hadAttrPropChanged.calledOnce);
+      document.body.removeChild(el);
+    });
+
   });
 
 </script>