Merge pull request #4399 from Polymer/2.x-disable-upgrade

Implements `disable-upgrade`

lib/legacy/legacy-element-mixin.html

@@ -57,6 +57,7 @@
 
       constructor() {
         super();
+        this.root = this;
         this.created();
       }
 

lib/mixins/element-mixin.html

@@ -119,6 +119,8 @@
 
     let caseMap = Polymer.CaseMap;
 
+    const DISABLED = 'disable-upgrade';
+
     /**
      * Returns the `properties` object specifically on `klass`. Use for:
      * (1) super chain mixes togther to make `propertiesForClass` which is
@@ -421,6 +423,8 @@
       proto._bindTemplate(template, propertiesForClass(proto.constructor));
     }
 
+    function flushPropertiesStub() {}
+
     /**
      * @polymerMixinClass
      * @unrestricted
@@ -437,7 +441,7 @@
        */
       static get observedAttributes() {
         if (!this.hasOwnProperty(goog.reflect.objectProperty('__observedAttributes', this))) {
-          let list = [];
+          let list = [DISABLED];
           let properties = propertiesForClass(this);
           for (let prop in properties) {
             list.push(Polymer.CaseMap.camelToDashCase(prop));
@@ -533,17 +537,6 @@
         return this._importPath;
       }
 
-      constructor() {
-        super();
-        Polymer.telemetry.instanceCount++;
-        // Stamp template
-        if (this._template) {
-          this.root = this._stampTemplate(this._template);
-        } else {
-          this.root = this;
-        }
-      }
-
       /**
        * Overrides the default `Polymer.PropertyAccessors` to ensure class
        * metaprogramming related to property accessors and effects has
@@ -555,6 +548,7 @@
        * @override
        */
       _initializeProperties() {
+        Polymer.telemetry.instanceCount++;
         this.constructor.finalize();
         const importPath = this.constructor.importPath;
         // note: finalize template when we have access to `localName` to
@@ -615,6 +609,18 @@
        */
       disconnectedCallback() {}
 
+      /**
+       * Stamps the element template.
+       *
+       * @override
+       */
+      ready() {
+        if (this._template) {
+          this.root = this._stampTemplate(this._template);
+        }
+        super.ready();
+      }
+
       /**
        * Implements `PropertyEffects`'s `_readyClients` call. Attaches
        * element dom by calling `_attachDom` with the dom stamped from the
@@ -673,7 +679,19 @@
        * @override
        */
       attributeChangedCallback(name, old, value) {
-        if (old !== value) {
+        // process `disable-upgrade` specially:
+        // First we see `disable-upgrade` added and disable `_flushProperties`,
+        // then when it's removed, restore regular flushing and flush.
+        // This should only be allowed before "readying".
+        if (name === DISABLED && !this.__dataInitialized) {
+          if (value !== null) {
+            this.__flushProperties = this._flushProperties;
+            this._flushProperties = flushPropertiesStub;
+          } else {
+            this._flushProperties = this.__flushProperties;
+            this._flushProperties();
+          }
+        } else if (old !== value) {
           let property = caseMap.dashToCamelCase(name);
           let type = propertiesForClass(this.constructor)[property].type;
           if (!this._hasReadOnlyEffect(property)) {

lib/mixins/template-stamp.html

@@ -114,8 +114,8 @@
 
     return class TemplateStamp extends superClass {
 
-      constructor() {
-        super();
+      _initializeProperties() {
+        super._initializeProperties();
         this.$ = null;
         this.__templateNodes = null;
       }

lib/utils/render-status.html

@@ -26,24 +26,33 @@
       flushQueue(beforeRenderQueue);
       // after the render
       setTimeout(function() {
-        flushQueue(afterRenderQueue);
+        runQueue(afterRenderQueue);
       });
     });
   }
 
   function flushQueue(queue) {
     while (queue.length) {
-      const q = queue.shift();
-      const context = q[0];
-      const callback = q[1];
-      const args = q[2];
-      try {
-        callback.apply(context, args);
-      } catch(e) {
-        setTimeout(() => {
-          throw e;
-        })
-      }
+      callMethod(queue.shift());
+    }
+  }
+
+  function runQueue(queue) {
+    for (let i=0, l=queue.length; i < l; i++) {
+      callMethod(queue.shift());
+    }
+  }
+
+  function callMethod(info) {
+    const context = info[0];
+    const callback = info[1];
+    const args = info[2];
+    try {
+      callback.apply(context, args);
+    } catch(e) {
+      setTimeout(() => {
+        throw e;
+      })
     }
   }
 
@@ -52,6 +61,7 @@
       flushQueue(beforeRenderQueue);
       flushQueue(afterRenderQueue);
     }
+    scheduled = false;
   }
 
   /**

test/runner.html

@@ -68,7 +68,8 @@
       'unit/logging.html',
       'unit/mixin-utils.html',
       'unit/mixin-behaviors.html',
-      'unit/render-status.html'
+      'unit/render-status.html',
+      'unit/disable-upgrade.html'
     ];
 
     // http://eddmann.com/posts/cartesian-product-in-javascript/

test/smoke/disable-upgrade.html

@@ -0,0 +1,98 @@
+ <!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+
+<dom-module id="x-child">
+  <template>
+    <style>
+      :host {
+        display: block;
+        border: 2px solid lightgreen;
+        margin: 2px;
+        padding: 2px;
+      };
+    </style>
+    <div>I'm a child, yo!</div>
+  </template>
+  <script>
+    HTMLImports.whenReady(function() {
+      class XChild extends Polymer.Element {
+        static get is() { return 'x-child'}
+        static get properties() {
+          return {
+            prop: { value: 'hi'}
+          }
+        }
+      }
+      customElements.define(XChild.is, XChild);
+    });
+  </script>
+</dom-module>
+
+
+<dom-module id="x-test">
+  <template>
+    <style>
+      :host {
+        display: block;
+        border: 2px solid orange;
+        padding: 2px;
+      };
+    </style>
+    <div>element says: {{prop}}</div>
+    <x-child id="child" disable-upgrade$="[[disabled]]"></x-child>
+  </template>
+  <script>
+    HTMLImports.whenReady(function() {
+      class XTest extends Polymer.Element {
+        static get is() { return 'x-test'}
+        static get properties() {
+          return {
+            prop: { value: 'hi'},
+            disabled: {value: true}
+          }
+        }
+
+        ready() {
+          super.ready();
+          setTimeout(() => {
+            // this.$.child.removeAttribute('disable-upgrade');
+            this.disabled = false;
+          }, 1000)
+        }
+      }
+      customElements.define(XTest.is, XTest);
+    });
+  </script>
+</dom-module>
+
+
+<h2>Enabled</h2>
+<x-test></x-test>
+<x-test></x-test>
+<h2>Disabled</h2>
+<script>
+  function go() {
+    Array.from(document.querySelectorAll('[disable-upgrade]'))
+      .forEach((e) => e.removeAttribute('disable-upgrade'));
+  }
+</script>
+<button onclick="go()">Go</button>
+<x-test id="one" disable-upgrade></x-test>
+<x-test id="two" disable-upgrade></x-test>
+
+</body>
+</html>