Make propagation of attribute changes at configure time more efficient

Polymer · Aug 4, 2015 · b269c1d · b269c1d
1 parent 7c83df5
commit b269c1d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/src/lib/base.html b/src/lib/base.html
@@ -49,10 +49,14 @@
 
     // reserved for canonical behavior
     attributeChangedCallback: function(name) {
-      this._setAttributeToProperty(this, name); // abstract
+      this._attributeChangedImpl(name); // abstract
       this._doBehavior('attributeChanged', arguments); // abstract
     },
 
+    _attributeChangedImpl: function(name) {
+      this._setAttributeToProperty(this, name);
+    },
+
     /**
      * Copies own properties (including accessor descriptors) from a source
      * object to a target object.

diff --git a/src/standard/configure.html b/src/standard/configure.html
@@ -60,6 +60,11 @@
       this._takeAttributesToModel(this._config);
     },
 
+    _attributeChangedImpl: function(name) {
+      var model = this._readied ? this : this._config;
+      this._setAttributeToProperty(model, name);
+    },
+
     // at configure time values are stored in _config
     _configValue: function(name, value) {
       this._config[name] = value;

diff --git a/test/unit/attributes-elements.html b/test/unit/attributes-elements.html
@@ -51,8 +51,28 @@
         type: String,
         value: 'default',
         readOnly: true
+      },
+      prop: {
+        value: 'prop',
+        observer: 'propChanged'
+      },
+
+      attr1: {
+        observer: 'attr1Changed'
       }
+    },
+
+    propChangedCount: 0,
+    attr1ChangedCount: 0,
+
+    propChanged: function(prop) {
+      this.propChangedCount++;
+    },
+
+    attr1Changed: function(prop) {
+      this.attr1ChangedCount++;
     }
+
   });
 </script>
 
@@ -114,11 +134,14 @@
 
 <dom-module id="x-compose">
   <template>
-    <x-basic id="basic" class="should-not-override"></x-basic>
+    <x-basic id="basic" prop="{{attr1}}" attr1$="{{attr1}}" class="should-not-override"></x-basic>
   </template>
 </dom-module>
 <script>
   Polymer({
+    hostAttributes: {
+      attr1: 'compose'
+    },
     is: 'x-compose'
   });
 </script>
diff --git a/test/unit/attributes.html b/test/unit/attributes.html
@@ -267,7 +267,7 @@
   });
 
   test('hostAttributes set correctly in composed element', function() {
-    assert.strictEqual(compose.$.basic.getAttribute('attr1'), 'this is attr 1');
+    assert.strictEqual(compose.$.basic.getAttribute('attr1'), 'compose');
     assert.strictEqual(compose.$.basic.getAttribute('attr2'), '42');
     assert.strictEqual(compose.$.basic.getAttribute('aria-role'), 'button');
     assert.strictEqual(compose.$.basic.getAttribute('title'), 'awesome');
@@ -280,6 +280,10 @@
     assert.notOk(compose.$.basic.classList.contains('bar'));
     assert.notOk(compose.$.basic.classList.contains('baz'));
     assert(compose.$.basic.classList.contains('should-not-override'));
+    // applied to property with effect
+    assert.strictEqual(compose.$.basic.prop, 'compose');
+    assert.equal(compose.$.basic.propChangedCount, 1);
+    assert.equal(compose.$.basic.attr1ChangedCount, 1);
   });
 
 });