Defer creation related work via disable-upgrade

Polymer · Jan 10, 2018 · a7eb975 · a7eb975
1 parent de0ac5a
commit a7eb975
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 8 deletions.
diff --git a/lib/legacy/legacy-element-mixin.html b/lib/legacy/legacy-element-mixin.html
@@ -73,14 +73,12 @@
 
       constructor() {
         super();
-        this.root = this;
         /** @type {boolean} */
         this.isAttached;
         /** @type {WeakMap<!Element, !Object<string, !Function>>} */
         this.__boundListeners;
         /** @type {Object<string, Function>} */
         this._debouncers;
-        this.created();
         // Ensure listeners are applied immediately so that they are
         // added before declarative event listeners. This allows an element to
         // decorate itself via an event prior to any declarative listeners
@@ -166,6 +164,8 @@
           this._registered();
         }
         super._initializeProperties();
+        this.root = this;
+        this.created();
       }
 
       /**

diff --git a/lib/mixins/disable-upgrade-mixin.html b/lib/mixins/disable-upgrade-mixin.html
@@ -55,20 +55,26 @@
         }
       }
 
-      __shouldEnable() {
-        return this.__dataEnabled || !this.hasAttribute(DISABLED_ATTR);
-      }
+      /*
+        NOTE: cannot gate on attribute because this is called before
+        attributes are delivered. Therefore, we stub this out and
+        call `super._initializeProperties()` manually.
+      */
+      _initializeProperties() {}
 
       // prevent user code in connected from running
       connectedCallback() {
-        if (this.__shouldEnable()) {
+        if (this.__dataEnabled || !this.hasAttribute(DISABLED_ATTR)) {
           super.connectedCallback();
         }
       }
 
       // prevent element from turning on properties
       _enableProperties() {
-        if (this.__shouldEnable()) {
+        if (!this.hasAttribute(DISABLED_ATTR)) {
+          if (!this.__dataEnabled) {
+            super._initializeProperties();
+          }
           super._enableProperties();
         }
       }

diff --git a/test/unit/disable-upgrade.html b/test/unit/disable-upgrade.html
@@ -57,6 +57,65 @@ <h2 id="element">[[prop]]</h2>
 
   </dom-module>
 
+  <dom-module id="x-disabled-legacy">
+      <template>
+        <style>
+          :host {
+            display: block;
+          }
+
+          h2 {
+            letter-spacing: 1em;
+          }
+        </style>
+        <h2 id="element">[[prop]]</h2>
+      </template>
+
+      <script>
+        (function() {
+
+          // enable disable upgrade!
+          const polymerClass = Polymer.Class;
+          Polymer.Class = function(info) {
+            const ctor = polymerClass(info);
+            return Polymer.DisableUpgradeMixin(ctor);
+          }
+
+          Polymer({
+            is: 'x-disabled-legacy',
+            properties: {
+              prop: {
+                type: String
+              }
+            },
+            created() {
+              this.hasCreated = true;
+              this.prop = 'enabled!';
+            },
+            ready() {
+              this.enabled = true;
+            }
+          });
+
+          Polymer({
+            is: 'x-disabled-legacy-reg1',
+            registered() {
+              this.hasRegistered = true;
+            }
+          });
+
+          Polymer({
+            is: 'x-disabled-legacy-reg2',
+            registered() {
+              this.hasRegistered = true;
+            }
+          });
+
+        })();
+      </script>
+
+    </dom-module>
+
   <dom-module id="my-element">
 
     <template>
@@ -84,6 +143,33 @@ <h2 id="element">[[prop]]</h2>
 
   </dom-module>
 
+  <dom-module id="my-element-legacy">
+
+    <template>
+      <x-disabled-legacy id="enabledEl">Disabled</x-disabled-legacy>
+      <x-disabled-legacy id="disabledEl" disable-upgrade>Disabled</x-disabled-legacy>
+      <x-disabled-legacy id="disabledBoundEl" disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled-legacy>
+      <x-disabled-legacy-reg1 id="disabledRegEl" disable-upgrade>Disabled</x-disabled-legacy-reg1>
+      <x-disabled-legacy-reg2 id="disabledRegBoundEl" disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled-legacy-reg2>
+
+    </template>
+
+    <script>
+      Polymer({
+        is: 'my-element-legacy',
+        properties: {
+          upgradeDisabled: { type: String, value: true }
+        },
+        enable() {
+          this.$.disabledEl.removeAttribute('disable-upgrade');
+          this.$.disabledRegEl.removeAttribute('disable-upgrade');
+          this.upgradeDisabled = false;
+        }
+      });
+    </script>
+
+  </dom-module>
+
   <script>
     suite('disable-upgrade', function() {
       let el;
@@ -122,6 +208,60 @@ <h2 id="element">[[prop]]</h2>
 
 
     });
-  </script>
+
+    suite('disable-upgrade-legacy', function() {
+      let el;
+
+      setup(() => {
+        el = document.createElement('my-element-legacy');
+        document.body.appendChild(el);
+      });
+      teardown(function() {
+        document.body.removeChild(el);
+      });
+
+      test('elements call `registered` as expected with `disable-upgrade`', function() {
+        assert.notOk(el.$.disabledRegEl.hasRegistered);
+        assert.notOk(el.$.disabledRegBoundEl.hasRegistered);
+        el.enable();
+        assert.ok(el.$.disabledRegEl.hasRegistered);
+        assert.ok(el.$.disabledRegBoundEl.hasRegistered);
+      });
+
+
+      test('elements upgrade as expected with and without `disable-upgrade`', function() {
+        assert.ok(el.$.enabledEl.hasCreated);
+        assert.ok(el.$.enabledEl.enabled);
+        assert.ok(el.$.enabledEl.$.element);
+        assert.equal(el.$.enabledEl.$.element.textContent, 'enabled!');
+        assert.notOk(el.$.disabledEl.hasCreated);
+        assert.notOk(el.$.disabledEl.enabled);
+        assert.notOk(el.$.disabledEl.$);
+        assert.notOk(el.$.disabledBoundEl.hasCreated);
+        assert.notOk(el.$.disabledBoundEl.enabled);
+        assert.notOk(el.$.disabledBoundEl.$);
+      });
+
+      test('elements upgrade when `disable-upgrade` removed', function() {
+        assert.notOk(el.$.disabledEl.hasCreated);
+        assert.notOk(el.$.disabledEl.enabled);
+        assert.notOk(el.$.disabledEl.$);
+        assert.notOk(el.$.disabledBoundEl.hasCreated);
+        assert.notOk(el.$.disabledBoundEl.enabled);
+        assert.notOk(el.$.disabledBoundEl.$);
+        el.enable();
+        assert.ok(el.$.disabledEl.hasCreated);
+        assert.ok(el.$.disabledEl.enabled);
+        assert.ok(el.$.disabledEl.$.element);
+        assert.equal(el.$.disabledEl.$.element.textContent, 'enabled!');
+        assert.ok(el.$.disabledBoundEl.hasCreated);
+        assert.ok(el.$.disabledBoundEl.enabled);
+        assert.ok(el.$.disabledBoundEl.$.element);
+        assert.equal(el.$.disabledBoundEl.$.element.textContent, 'enabled!');
+      });
+
+
+    });
+</script>
 </body>
 </html>