Merge branch 'master' into closure-warnings

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## [v2.0.1](https://github.com/Polymer/polymer/tree/v2.0.1) (2017-05-25)
+- [ci skip] Prepare 2.0.1 ([commit](https://github.com/Polymer/polymer/commit/061b1048))
+
+- Improve comment more ([commit](https://github.com/Polymer/polymer/commit/39877086))
+
+- Improve comment ([commit](https://github.com/Polymer/polymer/commit/fa1469a9))
+
+- Add comment. ([commit](https://github.com/Polymer/polymer/commit/250067b3))
+
+- * Improve clarity: change `__dataInitialized` to `__dataReady` * When `_flushClients` is called, ensure that clients are always enabled or flushed as appropriate. This ensures that (1) clients that are enabled before the host is enabled flush properly, and (2) clients that are stamped but not enabled properly enable when the host flushes. ([commit](https://github.com/Polymer/polymer/commit/8e8692f7))
+
+- Fix typo in  runBindingEffect documentation ([commit](https://github.com/Polymer/polymer/commit/6bd8dcfa))
+
+- Fixes #4601. Client elements can be readied that have already enabled properties. This can happen when templatize is used to create instances with no properties. In this case, in order for properties to flush properly to clients, clients must be flushed. ([commit](https://github.com/Polymer/polymer/commit/06df53d9))
+
+- [ci skip] Update Changelog ([commit](https://github.com/Polymer/polymer/commit/c4e516f6))
+
 ## [v2.0.0](https://github.com/Polymer/polymer/tree/v2.0.0) (2017-05-15)
 - [ci skip] bump version to 2.0.0 ([commit](https://github.com/Polymer/polymer/commit/712230fc))
 

README.md

@@ -19,12 +19,13 @@ Check out [polymer-project.org](https://www.polymer-project.org) for all of the
 
 Or if you'd just like to download the library, check out our [releases page](https://github.com/polymer/polymer/releases).
 
-## Polymer 2.0 now at Release Candidate!
-Polymer 2.0 is now at Release Candidate stage, and will be the future focus of Polymer development going forward.  We intend to keep the 2.x public API stable barring critical feedback or issues during the release candidate period.  For background and migration information on the 2.x see the [2.0 documentation](https://www.polymer-project.org/2.0/docs/about_20) on the website or the [2.0 section below](#release-candidate), and we welcome your feedback via [issues](https://github.com/Polymer/polymer/issues/new) or [Slack](https://polymer-slack.herokuapp.com/).
+## Polymer 2.0 is out!
 
-**To evaluate Polymer 2.0**, please point your bower at the latest `2.0.0-rc.x` tag for polymer, and be sure load to the `webcomponentsjs/webcomponents-lite.js` or `webcomponentsjs/webcomponents-loader.js` polyfills from the latest `v1.0.0-rc.x` tag of [`webcomponentsjs`](https://github.com/webcomponents/webcomponentsjs)
+Polymer 2.0 is released, and will be the future focus of Polymer development going forward.  We intend to keep the 2.x public API stable barring critical issues.  For background and migration information on the 2.x see the [2.0 documentation](https://www.polymer-project.org/2.0/docs/about_20) on the website or the [2.0 section below](#2-0), and we welcome your feedback via [issues](https://github.com/Polymer/polymer/issues/new) or [Slack](https://polymer-slack.herokuapp.com/).
 
-👀 **Looking for Polymer v1.x?** Please see the [the v1 branch](https://github.com/Polymer/polymer/tree/1.x)
+**To evaluate Polymer 2.0**, please point your bower at the latest `2.0.0` tag for polymer, and be sure load to the `webcomponentsjs/webcomponents-lite.js` or `webcomponentsjs/webcomponents-loader.js` polyfills from the latest `v1.0.0` tag of [`webcomponentsjs`](https://github.com/webcomponents/webcomponentsjs).
+
+👀 **Looking for Polymer v1.x?** Please see the [the v1 branch](https://github.com/Polymer/polymer/tree/1.x).
 
 ## Overview
 
@@ -238,7 +239,8 @@ The Polymer library uses a BSD-like license that is available [here](./LICENSE.t
 -----------
 
 <a name="release-candidate"></a>
-# Polymer 2.0 (release candidate)
+<a name="2-0"></a>
+# Polymer 2.0
 
 Polymer 2.0 is a major new release of Polymer that is compatible with the latest web components standards and web platform APIs, and makes significant improvements over the 1.x version of the library.  The following section provides context and migration information for existing users of Polymer 1.x:
 

lib/mixins/property-accessors.html

@@ -147,7 +147,7 @@
         this.__serializing = false;
         this.__dataCounter = 0;
         this.__dataEnabled = false;
-        this.__dataInitialized = false;
+        this.__dataReady = false;
         this.__dataInvalid = false;
         this.__data = {};
         this.__dataPending = null;
@@ -478,7 +478,7 @@
        * @protected
        */
       _invalidateProperties() {
-        if (!this.__dataInvalid && this.__dataInitialized) {
+        if (!this.__dataInvalid && this.__dataReady) {
           this.__dataInvalid = true;
           microtask.run(() => {
             if (this.__dataInvalid) {
@@ -542,7 +542,7 @@
        * @public
        */
       ready() {
-        this.__dataInitialized = true;
+        this.__dataReady = true;
         // Run normal flush
         this._flushProperties();
       }

lib/mixins/property-effects.html

@@ -1081,7 +1081,7 @@
       _initializeProperties() {
         super._initializeProperties();
         hostStack.registerHost(this);
-        this.__dataClientsInitialized = false;
+        this.__dataClientsReady = false;
         this.__dataPendingClients = null;
         this.__dataToNotify = null;
         this.__dataLinkedPaths = null;
@@ -1395,14 +1395,14 @@
 
       /**
        * Overrides `PropertyAccessor`'s default async queuing of
-       * `_propertiesChanged`: if `__dataInitialized` is false (has not yet been
+       * `_propertiesChanged`: if `__dataReady` is false (has not yet been
        * manually flushed), the function no-ops; otherwise flushes
        * `_propertiesChanged` synchronously.
        *
        * @override
        */
       _invalidateProperties() {
-        if (this.__dataInitialized) {
+        if (this.__dataReady) {
           this._flushProperties();
         }
       }
@@ -1429,48 +1429,56 @@
        * @protected
        */
       _flushClients() {
-        if (!this.__dataClientsInitialized) {
-          this.__dataClientsInitialized = true;
+        if (!this.__dataClientsReady) {
+          this.__dataClientsReady = true;
           this._readyClients();
           // Override point where accessors are turned on; importantly,
           // this is after clients have fully readied, providing a guarantee
           // that any property effects occur only after all clients are ready.
-          this.__dataInitialized = true;
+          this.__dataReady = true;
         } else {
-          // Flush all clients
-          let clients = this.__dataPendingClients;
-          if (clients) {
-            this.__dataPendingClients = null;
-            for (let i=0; i < clients.length; i++) {
-              let client = clients[i];
-              if (client.__dataPending) {
-                client._flushProperties();
-              }
-            }
-          }
+          this.__enableOrFlushClients();
         }
       }
 
-      /**
-       * Perform any initial setup on client dom. Called before the first
-       * `_flushProperties` call on client dom and before any element
-       * observers are called.
-       *
-       * @protected
-       */
-      _readyClients() {
+      // NOTE: We ensure clients either enable or flush as appropriate. This
+      // handles two corner cases:
+      // (1) clients flush properly when connected/enabled before the host
+      // enables; e.g.
+      //   (a) Templatize stamps with no properties and does not flush and
+      //   (b) the instance is inserted into dom and
+      //   (c) then the instance flushes.
+      // (2) clients enable properly when not connected/enabled when the host
+      // flushes; e.g.
+      //   (a) a template is runtime stamped and not yet connected/enabled
+      //   (b) a host sets a property, causing stamped dom to flush
+      //   (c) the stamped dom enables.
+      __enableOrFlushClients() {
         let clients = this.__dataPendingClients;
         if (clients) {
           this.__dataPendingClients = null;
           for (let i=0; i < clients.length; i++) {
             let client = clients[i];
             if (!client.__dataEnabled) {
               client._enableProperties();
+            } else if (client.__dataPending) {
+              client._flushProperties();
             }
           }
         }
       }
 
+      /**
+       * Perform any initial setup on client dom. Called before the first
+       * `_flushProperties` call on client dom and before any element
+       * observers are called.
+       *
+       * @protected
+       */
+      _readyClients() {
+        this.__enableOrFlushClients();
+      }
+
       /**
        * Sets a bag of property changes to this instance, and
        * synchronously processes all effects of the properties as a batch.
@@ -1514,7 +1522,7 @@
         this._flushProperties();
         // If no data was pending, `_flushProperties` will not `flushClients`
         // so ensure this is done.
-        if (!this.__dataClientsInitialized) {
+        if (!this.__dataClientsReady) {
           this._flushClients();
         }
         // Before ready, client notifications do not trigger _flushProperties.
@@ -2245,7 +2253,7 @@
         // Setup compound storage, 2-way listeners, and dataHost for bindings
         setupBindings(this, templateInfo);
         // Flush properties into template nodes if already booted
-        if (this.__dataInitialized) {
+        if (this.__dataReady) {
           runEffects(this, templateInfo.propertyEffects, this.__data, null,
             false, templateInfo.nodeList);
         }

lib/mixins/template-stamp.html

@@ -97,9 +97,9 @@
     return handler;
   }
 
-  // type for HTMLTemplateElement with `__templateInfo`
+  // type for HTMLTemplateElement with `_templateInfo`
   function HTMLTemplateElementWithInfo() {}
-  HTMLTemplateElementWithInfo.prototype.__templateInfo = null;
+  HTMLTemplateElementWithInfo.prototype._templateInfo = null;
 
   /**
    * Element mixin that provides basic template parsing and stamping, including
@@ -385,7 +385,7 @@
        * @return {DocumentFragment} Content fragment
        */
       static _contentForTemplate(template) {
-        let templateInfo = /** @type HTMLTemplateElementWithInfo */ (template).__templateInfo;
+        let templateInfo = /** @type HTMLTemplateElementWithInfo */ (template)._templateInfo;
         return (templateInfo && templateInfo.content) || template.content;
       }
 

lib/utils/boot.html

@@ -49,7 +49,7 @@
   }
   /* eslint-enable */
 
-  window.Polymer.version = '2.0.0';
+  window.Polymer.version = '2.0.1';
 
   /* eslint-disable no-unused-vars */
   /*

lib/utils/flattened-nodes-observer.html

@@ -191,7 +191,7 @@
       }
       if (this._nativeChildrenObserver) {
         this._processSlotMutations(this._nativeChildrenObserver.takeRecords());
-      } else if (this.shadyChildrenObserver) {
+      } else if (this._shadyChildrenObserver) {
         this._processSlotMutations(this._shadyChildrenObserver.takeRecords());
       }
       this._scheduled = false;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymer/polymer",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to write",
   "main": "polymer.html",
   "directories": {
@@ -11,7 +11,7 @@
     "@polymer/gen-closure-declarations": "0.0.4",
     "@webcomponents/shadycss": "^1.0.0",
     "@webcomponents/webcomponentsjs": "^1.0.0",
-    "babel-preset-babili": "0.0.12",
+    "babel-preset-babili": "0.1.2",
     "del": "^2.2.1",
     "dom5": "^1.3.1",
     "eslint-plugin-html": "^2.0.1",

test/runner.html

@@ -26,6 +26,7 @@
     var suites = [
       'unit/globals.html',
       'unit/property-accessors.html',
+      'unit/template-stamp.html',
       'unit/property-effects.html',
       'unit/property-effects-template.html',
       'unit/path-effects.html',

test/unit/property-effects-template.html

@@ -78,7 +78,7 @@
     </template>
     <!-- Nested template in Shadow DOM for runtime stamping -->
     <template id="templateFromShadowDom">
-      <x-element id="first"></x-element>
+      <x-element early="[[earlyProp]]" id="first"></x-element>
       <x-element id="events" on-click="handleClick" on-tap="handleTap"></x-element>
       <template id="domIf" is="dom-if" if="[[prop]]">
         <x-element id="ifElementSD" prop="{{prop}}" path="{{obj.path}}"></x-element>
@@ -131,6 +131,12 @@
         this.shadowRoot.appendChild(dom);
         return dom;
       }
+      stampTemplateAndSetPropFromShadow() {
+        let dom = this._stampTemplate(this.$.templateFromShadowDom);
+        this.earlyProp = 'early';
+        this.shadowRoot.appendChild(dom);
+        return dom;
+      }
       stampTemplateFromLight() {
         let dom = this._stampTemplate(Polymer.DomModule.import(this.localName, '#templateFromLightDom'));
         this.shadowRoot.appendChild(dom);
@@ -430,6 +436,90 @@
     assert.equal(stamped[0], el.$.first);
   });
 
+  test('runtime stamp template and set prop before attaching (from shadow dom)', () => {
+    let dom = el.stampTemplateAndSetPropFromShadow();
+    assertStampingCorrect(el, el.$);
+    assertStampingCorrect(el, dom.$, 'SD');
+    let stamped = el.shadowRoot.querySelectorAll('x-element#first');
+    assert.equal(stamped.length, 2);
+    assert.equal(stamped[0], el.$.first);
+    assert.equal(stamped[1], dom.$.first);
+    assert.deepEqual(Polymer.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-runtime',
+      'x-element#shadow|x-element-child#noBinding',
+      'x-element#shadow|x-element-child#hasBinding',
+      'x-element#shadow'
+    ]);
+  });
+
+  test('runtime stamp and remove multiple templates and set prop before attaching (from shadow dom)', () => {
+    let stamped;
+    // Stamp template
+    let dom1 = el.stampTemplateAndSetPropFromShadow();
+    assertStampingCorrect(el, el.$);
+    assertStampingCorrect(el, dom1.$, 'SD');
+    stamped = el.shadowRoot.querySelectorAll('x-element#first');
+    assert.equal(stamped.length, 2);
+    assert.equal(stamped[0], el.$.first);
+    assert.equal(stamped[1], dom1.$.first);
+    // Unstamp
+    el._removeBoundDom(dom1);
+    for (let n in dom1.$) {
+      assert.notOk(dom1.$[n].parentNode, null);
+    }
+    stamped = el.shadowRoot.querySelectorAll('x-element#first');
+    assert.equal(stamped.length, 1);
+    assert.equal(stamped[0], el.$.first);
+    // Stamp again
+    let dom2 = el.stampTemplateAndSetPropFromShadow();
+    assertStampingCorrect(el, el.$);
+    assertStampingCorrect(el, dom2.$, 'SD');
+    stamped = el.shadowRoot.querySelectorAll('x-element#first');
+    assert.equal(stamped.length, 2);
+    assert.equal(stamped[0], el.$.first);
+    assert.equal(stamped[1], dom2.$.first);
+    // Stamp again
+    let dom3 = el.stampTemplateAndSetPropFromShadow();
+    assertStampingCorrect(el, el.$);
+    assertStampingCorrect(el, dom2.$, 'SD');
+    assertStampingCorrect(el, dom3.$, 'SD');
+    stamped = el.shadowRoot.querySelectorAll('x-element#first');
+    assert.equal(stamped.length, 3);
+    assert.equal(stamped[0], el.$.first);
+    assert.equal(stamped[1], dom2.$.first);
+    assert.equal(stamped[2], dom3.$.first);
+    assert.deepEqual(Polymer.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-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'
+    ]);
+    // Unstamp
+    el._removeBoundDom(dom2);
+    el._removeBoundDom(dom3);
+    for (let n in dom2.$) {
+      assert.notOk(dom1.$[n].parentNode, null);
+    }
+    for (let n in dom3.$) {
+      assert.notOk(dom1.$[n].parentNode, null);
+    }
+    stamped = el.shadowRoot.querySelectorAll('x-element#first');
+    assert.equal(stamped.length, 1);
+    assert.equal(stamped[0], el.$.first);
+  });
+
   test('runtime stamp template (from light dom)', () => {
     let dom = el.stampTemplateFromLight();
     assertStampingCorrect(el, el.$);