Merge pull request #5097 from Polymer/shouldPropertiesChange

[PropertiesChanged]: adds _shouldPropertiesChange
Polymer · Feb 8, 2018 · 0e564ae · 0e564ae
2 parents 2e39cf6 + 74907b9
commit 0e564ae
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 4 deletions.
diff --git a/externs/closure-types.js b/externs/closure-types.js
@@ -78,6 +78,15 @@ Polymer_PropertiesChanged.prototype._enableProperties = function(){};
 Polymer_PropertiesChanged.prototype._flushProperties = function(){};
 /**
 * @param {!Object} currentProps Bag of all current accessor values
+* @param {!Object} changedProps Bag of properties changed since the last
+  call to `_propertiesChanged`
+* @param {!Object} oldProps Bag of previous values for each property
+  in `changedProps`
+* @return {boolean}
+*/
+Polymer_PropertiesChanged.prototype._shouldPropertiesChange = function(currentProps, changedProps, oldProps){};
+/**
+* @param {!Object} currentProps Bag of all current accessor values
 * @param {!Object} changedProps Bag of properties changed since the last
   call to `_propertiesChanged`
 * @param {!Object} oldProps Bag of previous values for each property

diff --git a/lib/mixins/properties-changed.html b/lib/mixins/properties-changed.html
@@ -143,7 +143,7 @@
             /* eslint-disable valid-jsdoc */
             /** @this {PropertiesChanged} */
             get() {
-              return this.__data[property];
+              return this._getProperty(property);
             },
             /** @this {PropertiesChanged} */
             set: readOnly ? function () {} : function (value) {
@@ -332,13 +332,32 @@
          * @protected
          */
         _flushProperties() {
-          if (this.__dataPending && this.__dataOld) {
-            let changedProps = this.__dataPending;
+          const props = this.__data;
+          const changedProps = this.__dataPending;
+          const old = this.__dataOld;
+          if (this._shouldPropertiesChange(props, changedProps, old)) {
             this.__dataPending = null;
-            this._propertiesChanged(this.__data, changedProps, this.__dataOld);
+            this.__dataOld = null;
+            this._propertiesChanged(props, changedProps, old);
           }
         }
 
+        /**
+         * Called in `_flushProperties` to determine if `_propertiesChanged`
+         * should be called. The default implementation returns true if
+         * properties are pending. Override to customize when
+         * `_propertiesChanged` is called.
+         * @param {!Object} currentProps Bag of all current accessor values
+         * @param {!Object} changedProps Bag of properties changed since the last
+         *   call to `_propertiesChanged`
+         * @param {!Object} oldProps Bag of previous values for each property
+         *   in `changedProps`
+         * @return {boolean} true if changedProps is truthy
+         */
+        _shouldPropertiesChange(currentProps, changedProps, oldProps) { // eslint-disable-line no-unused-vars
+          return changedProps;
+        }
+
         /**
          * Callback called when any properties with accessors created via
          * `_createPropertyAccessor` have been set.

diff --git a/test/unit/properties-changed.html b/test/unit/properties-changed.html
@@ -56,6 +56,24 @@
     }
     window.XFoo = XFoo;
     customElements.define('x-foo', XFoo);
+
+    class ShouldPropertiesChange extends Polymer.PropertiesChanged(HTMLElement) {
+      constructor() {
+        super();
+        this._propertiesChanged = sinon.spy();
+      }
+
+      connectedCallback() {
+        this._enableProperties();
+        //this._flushProperties();
+      }
+
+      _shouldPropertiesChange() {
+        return true;
+      }
+    }
+
+    customElements.define('should-properties-change', ShouldPropertiesChange);
   });
 </script>
 
@@ -129,6 +147,20 @@
     });
   });
 
+  test('shouldPropertiesChange', function(done) {
+    const el = document.createElement('should-properties-change');
+    document.body.appendChild(el);
+    assert.isTrue(el._propertiesChanged.calledOnce);
+    el._invalidateProperties();
+    setTimeout(function() {
+      assert.isTrue(el._propertiesChanged.calledTwice);
+      el._setProperty('foo', true);
+      setTimeout(function() {
+        assert.isTrue(el._propertiesChanged.calledThrice);
+        done();
+      });
+    });
+  });
 });
 
 </script>

diff --git a/types/lib/mixins/properties-changed.d.ts b/types/lib/mixins/properties-changed.d.ts
@@ -182,6 +182,21 @@ declare namespace Polymer {
      */
     _flushProperties(): void;
 
+    /**
+     * Called in `_flushProperties` to determine if `_propertiesChanged`
+     * should be called. The default implementation returns true if
+     * properties are pending. Override to customize when
+     * `_propertiesChanged` is called.
+     *
+     * @param currentProps Bag of all current accessor values
+     * @param changedProps Bag of properties changed since the last
+     *   call to `_propertiesChanged`
+     * @param oldProps Bag of previous values for each property
+     *   in `changedProps`
+     * @returns true if changedProps is truthy
+     */
+    _shouldPropertiesChange(currentProps: object, changedProps: object, oldProps: object): boolean;
+
     /**
      * Callback called when any properties with accessors created via
      * `_createPropertyAccessor` have been set.