Merge pull request #1580 from Polymer/serialize-distribute

serializeValueToAttribute always provokes distribute if necessary

Author: kevinpschaaf

src/lib/dom-api.html

@@ -42,13 +42,10 @@
       },
 
       _lazyDistribute: function(host) {
-        if (host.shadyRoot) {
+        // note: only try to distribute if the root is not clean; this ensures
+        // we don't distribute before initial distribution
+        if (host.shadyRoot && host.shadyRoot._distributionClean) {
           host.shadyRoot._distributionClean = false;
-        }
-        // TODO(sorvell): optimize debounce so it does less work by default
-        // and then remove these checks...
-        // need to dirty distribution once.
-        if (!host.isDebouncerActive('_distribute')) {
           host.debounce('_distribute', host._distributeContent);
           dirtyRoots.push(host);
         }
@@ -200,7 +197,7 @@
       },
 
       _parentNeedsDistribution: function(parent) {
-        return parent.shadyRoot && hasInsertionPoint(parent.shadyRoot);
+        return parent && parent.shadyRoot && hasInsertionPoint(parent.shadyRoot);
       },
 
       // TODO(sorvell): technically we should check non-fragment nodes for
@@ -379,7 +376,7 @@
       },
 
       _distributeParent: function() {
-        if (this.parentNode && this.parentNode.shadyRoot) {
+        if (this._parentNeedsDistribution(this.parentNode)) {
           this._lazyDistribute(this.parentNode);
         }
       }

src/mini/ready.html

@@ -93,15 +93,15 @@
     _ready: function() {
       // extension point
       this._beforeClientsReady();
+      // prepare root
+      this._setupRoot();
       this._readyClients();
       // extension point
       this._afterClientsReady();
       this._readySelf();
     },
 
     _readyClients: function() {
-      // prepare root
-      this._setupRoot();
       // logically distribute self
       this._beginDistribute();
       // now fully prepare localChildren

src/standard/x-styling.html

@@ -162,6 +162,9 @@
             value = host._scopeElementClass(node, value);
           }
         }
+        // note: using Polymer.dom here ensures that any attribute sets
+        // will provoke distribution if necessary
+        node = Polymer.dom(node || this);
         serializeValueToAttribute.call(this, value, attribute, node);
       },
 

test/unit/polymer-dom-elements.html

@@ -133,4 +133,49 @@
     <x-echo id="echo2"><content select=".b"></content></x-echo>
   </template>
   <script>Polymer({is: 'x-redistribute-a-b'});</script>
-</dom-module>
+</dom-module>
+
+<dom-module id="x-attr">
+  <template>Attr1</template>
+  <script>Polymer({
+    is: 'x-attr',
+    hostAttributes: {
+      bar: 'bar'
+    },
+    properties: {
+      foo: {type: Boolean, reflectToAttribute: true, value: false}
+    }
+
+  });</script>
+</dom-module>
+
+<dom-module id="x-attr2">
+  <template>Attr2</template>
+  <script>Polymer({
+    is: 'x-attr2',
+    properties: {
+      foo: {type: Boolean, reflectToAttribute: true, value: true}
+    }
+
+  });</script>
+</dom-module>
+
+<dom-module id="x-select-attr">
+  <template>
+    Foo: [<content select="[foo]"></content>]
+    Bar: [<content select="[bar]"></content>]
+  </template>
+  <script>Polymer({is: 'x-select-attr'});</script>
+</dom-module>
+
+<dom-module id="x-compose-select-attr">
+  <template>
+    <x-select-attr id="select">
+      <x-attr id="attr1"></x-attr>
+      <x-attr2 id="attr2"></x-attr2>
+    </x-select-attr>
+  </template>
+  <script>Polymer({is: 'x-compose-select-attr'});</script>
+</dom-module>
+
+

test/unit/polymer-dom-shadow.html

@@ -39,6 +39,12 @@
   <div></div>
 </x-select-class1>
 
+<x-select-attr>
+  <x-attr></x-attr>
+</x-select-attr>
+
+<x-compose-select-attr></x-compose-select-attr>
+
 <x-redistribute-a-b></x-redistribute-a-b>
 
 <script src="polymer-dom.js"></script>

test/unit/polymer-dom.html

@@ -38,6 +38,12 @@
   <div></div>
 </x-select-class1>
 
+<x-select-attr>
+  <x-attr></x-attr>
+</x-select-attr>
+
+<x-compose-select-attr></x-compose-select-attr>
+
 <x-redistribute-a-b></x-redistribute-a-b>
 
 <script src="polymer-dom.js"></script>

test/unit/polymer-dom.js

@@ -264,6 +264,36 @@ suite('Polymer.dom', function() {
     assert.deepEqual(Polymer.dom(ec2).getDistributedNodes(), []);
   });
 
+  test('without a host setting hostAttributes/reflecting properties provokes distribution', function() {
+    var e = document.querySelector('x-select-attr');
+    var ip$ = Polymer.dom(e.root).querySelectorAll('content');
+    var c = Polymer.dom(e).firstElementChild;
+    assert.equal(Polymer.dom(c).getDestinationInsertionPoints()[0], ip$[1], 'child not distributed based on host attribute');
+    c.foo = true;
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(c).getDestinationInsertionPoints()[0], ip$[0], 'child not distributed based on reflecting attribute')
+    c.foo = false;
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(c).getDestinationInsertionPoints()[0], ip$[1], 'child not distributed based on reflecting attribute')
+  });
+
+  test('within a host setting hostAttributes/reflecting properties provokes distribution', function() {
+    var e = document.querySelector('x-compose-select-attr');
+    var ip$ = Polymer.dom(e.$.select.root).querySelectorAll('content');
+    var c1 = e.$.attr1;
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(c1).getDestinationInsertionPoints()[0], ip$[1], 'child not distributed based on host attribute');
+    c1.foo = true;
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(c1).getDestinationInsertionPoints()[0], ip$[0], 'child not distributed based on reflecting attribute')
+    c1.foo = false;
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(c1).getDestinationInsertionPoints()[0], ip$[1], 'child not distributed based on reflecting attribute')
+    var c2 = e.$.attr2;
+    Polymer.dom.flush();
+    assert.equal(Polymer.dom(c2).getDestinationInsertionPoints()[0], ip$[0], 'child not distributed based on default value');
+  });
+
   test('appendChild (light)', function() {
     var rere = Polymer.dom(testElement.root).querySelector('x-rereproject');
     var s = document.createElement('span');