From 7e7febc3b61184b13b25080137414072897a428a Mon Sep 17 00:00:00 2001 From: Kevin Schaaf Date: Wed, 21 Aug 2019 18:01:40 -0700 Subject: [PATCH] Ensure clients are flushed when runtime stamping via `_stampTemplate`. Maintains flush semantics with Templatizer stamping (relevant to fastDomIf, which is a switch between Templatizer-based stamping and runtime _stampTemplate-based stamping). Works around an issue with `noPatch` where nested undistributed dom-if's won't stamp. The changes to the tests are to remove testing that the full host tree is correct since the host doing the runtime stamping will no longer be the DOM getRootNode().host at ready time (this is exactly the case with Templatizer, whose semantics we intend to match). --- lib/mixins/property-effects.js | 1 + test/unit/property-effects-template.html | 118 ++++++++++++----------- 2 files changed, 65 insertions(+), 54 deletions(-) diff --git a/lib/mixins/property-effects.js b/lib/mixins/property-effects.js index 71e16d7bf7..2e2cddb150 100644 --- a/lib/mixins/property-effects.js +++ b/lib/mixins/property-effects.js @@ -2845,6 +2845,7 @@ export const PropertyEffects = dedupingMixin(superClass => { // are run at this point during the initial element boot-up. if (this.__dataClientsReady) { this._runEffectsForTemplate(templateInfo, this.__data, null, false); + this._flushClients(); } return dom; } diff --git a/test/unit/property-effects-template.html b/test/unit/property-effects-template.html index f7e39d87c2..395a5060ad 100644 --- a/test/unit/property-effects-template.html +++ b/test/unit/property-effects-template.html @@ -55,6 +55,7 @@ } ready() { super.ready(); + this.readied = true; window.lifecycleOrder.log(this, 'ready'); } } @@ -154,6 +155,9 @@ this.shadowRoot.appendChild(dom); return dom; } + stampNoAppend() { + return this._stampTemplate(this.$.templateFromShadowDom); + } } customElements.define('x-runtime', XRuntime); @@ -304,6 +308,7 @@ }, idFor(el) { let host = el.getRootNode().host; + host = host && host.localName !== 'x-runtime' ? host : null; let id = el.getAttribute('log') || el.id; return (host ? this.idFor(host) + '|' : '') + el.localName + (id ? '#' + id : ''); } @@ -356,9 +361,9 @@ assert.equal(stamped[0], el.$.first); // Lifecycle order correct assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime' ]); }); @@ -372,13 +377,13 @@ assert.equal(stamped[0], el.$.first); assert.equal(stamped[1], dom.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow' + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow' ]); }); @@ -419,19 +424,19 @@ assert.equal(stamped[1], dom2.$.first); assert.equal(stamped[2], dom3.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow' + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow', + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow', + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow' ]); // Unstamp el._removeBoundDom(dom2); @@ -456,9 +461,9 @@ assert.equal(stamped[0], el.$.first); assert.equal(stamped[1], dom.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', 'x-element#shadow|x-element-child#noBinding', 'x-element#shadow|x-element-child#hasBinding', @@ -503,19 +508,19 @@ assert.equal(stamped[1], dom2.$.first); assert.equal(stamped[2], dom3.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', 'x-element#shadow|x-element-child#noBinding', 'x-element#shadow|x-element-child#hasBinding', 'x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow' + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow', + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow' ]); // Unstamp el._removeBoundDom(dom2); @@ -540,13 +545,13 @@ assert.equal(stamped[0], el.$.first); assert.equal(stamped[1], dom.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light' + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light' ]); }); @@ -584,19 +589,19 @@ assert.equal(stamped[1], dom2.$.first); assert.equal(stamped[2], dom3.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light' + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light', + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light', + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light' ]); // Unstamp el._removeBoundDom(dom2); @@ -688,13 +693,18 @@ assert.equal(stamped[0], el.$.first); // Lifecycle order correct assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime' ]); }); + test('runtime stamped templates ready before append', () => { + const dom = el.stampNoAppend(); + assert.isTrue(dom.querySelector('x-element').readied); + }); + }); suite('template parsing hooks', () => {