Implement basic-element with properties-changed

Moves basic property creation and attribute deserialization into properties changed to make it suitable as a base for basic-element.

lib/elements/basic-element.html

@@ -10,7 +10,7 @@
 
 <link rel="import" href="../utils/boot.html">
 <link rel="import" href="../utils/mixin.html">
-<link rel="import" href="../mixins/property-accessors.html">
+<link rel="import" href="../mixins/properties-changed.html">
 
 <script>
 (function() {
@@ -24,33 +24,33 @@
    * @polymer
    * @memberof Polymer
    * @constructor
-   * @implements {Polymer_PropertyAccessors}
+   * @implements {Polymer_PropertiesChanged}
    * @extends HTMLElement
-   * @appliesMixin Polymer.PropertyAccessors
+   * @appliesMixin Polymer.PropertiesChanged
    * @summary Custom element base class that provides minimal starting point
-   * using PropertyAccessors to create properties
+   * using PropertiesChanged to create properties
    */
-   class BasicElement extends Polymer.PropertyAccessors(HTMLElement) {
-
-    static _ensureFinalized(name) {
-      const proto = this.prototype;
-      if (!proto.hasOwnProperty('__finalized')) {
-        proto.__finalized = true;
-        this.finalize(name);
-      }
-    }
+   class BasicElement extends Polymer.PropertiesChanged(HTMLElement) {
 
     /**
      * Implements standard custom elements getter to observes the attributes
-     * listed in `properties`. These are camel to dash cased.
+     * listed in `properties`.
      */
     static get observedAttributes() {
       const props = this.properties;
       return props ? Object.keys(props).map(p => {
-        return this.prototype._attributeNameForProperty(p);
+        return this.prototype._attributeForProperty(p);
       }) : [];
     }
 
+    static _ensureFinalized(name) {
+      const proto = this.prototype;
+      if (!proto.hasOwnProperty('__finalized')) {
+        proto.__finalized = true;
+        this.finalize(name);
+      }
+    }
+
     /**
      * Finalizes an element definition. This includes ensuring property
      * accessors exist on the element prototype and parsing the element
@@ -65,6 +65,19 @@
       }
     }
 
+    /**
+     * Overrides implementation in PropertiesChanged to immediately process
+     * any pending changes to properties and ensure that
+     * `_propertiesChanged` is called.
+     *
+     * @public
+     */
+    ready() {
+      super.ready();
+      this._invalidateProperties();
+      this._validateProperties();
+    }
+
     /**
      * Overrides default behavior and adds a call to `finalize` which lazily
      * configures the element's property accessors.
@@ -76,29 +89,22 @@
     }
 
     /**
-     * Overrides default behavior to use `type` information stored in the
-     * static `properties` object. This allows attributes to be converted to
-     * the coressponding type given in `properties`. Atributes are dash to
-     * camel cased.
+     * Overrides PropertiesChanged method to return type specified in the
+     * static `properties` object for the given property.
+     * @param {string} name Name of property
+     * @return {*} Type to which to deserialize attribute
      *
-     * @param {string} attribute Name of attribute to deserialize.
-     * @param {?string} value of the attribute.
-     * @param {*=} type type to deserialize to.
+     * @protected
      */
-    _attributeToProperty(attribute, value, type) {
-      if (!type) {
-        const property = this._propertyNameForAttribute(attribute);
-        const props = this.__propertyInfo;
-        const info = props && props[property];
-        type = info && info.type || info;
-      }
-      super._attributeToProperty(attribute, value, type);
+    _typeForProperty(name) {
+      const props = this.__propertyInfo;
+      return props && props[name];
     }
 
     /**
      * Called when the element is added to a document.
      * Calls `_enableProperties` to turn on property system from
-     * `PropertyAccessors`.
+     * `PropertiesChanged`.
      */
     connectedCallback() {
       this._enableProperties();
@@ -112,7 +118,7 @@
    }
   /**
    * @constructor
-   * @implements {Polymer_PropertyAccessors}
+   * @implements {Polymer_PropertiesChanged}
    * @extends {HTMLElement}
    */
   Polymer.BasicElement = BasicElement;

lib/mixins/properties-changed.html

@@ -45,6 +45,61 @@
 
     return class PropertiesChanged extends superClass {
 
+      /**
+       * Creates property accessors for the given property names.
+       * @param {array} props Array of names of accessors.
+       */
+       static createProperties(props) {
+        for (let i=0; i < props.length; i++) {
+          this.prototype._createPropertyAccessor(props[i]);
+        }
+      }
+
+      /**
+       * Creates a setter/getter pair for the named property with its own
+       * local storage.  The getter returns the value in the local storage,
+       * and the setter calls `_setProperty`, which updates the local storage
+       * for the property and enqueues a `_propertiesChanged` callback.
+       *
+       * This method may be called on a prototype or an instance.  Calling
+       * this method may overwrite a property value that already exists on
+       * the prototype/instance by creating the accessor.
+       *
+       * @param {string} property Name of the property
+       * @param {boolean=} readOnly When true, no setter is created; the
+       *   protected `_setProperty` function must be used to set the property
+       * @protected
+       */
+      _createPropertyAccessor(property, readOnly) {
+        if (!this.hasOwnProperty('__dataHasAccessor')) {
+          this.__dataHasAccessor = Object.assign({}, this.__dataHasAccessor);
+        }
+        if (!this.__dataHasAccessor[property]) {
+          this.__dataHasAccessor[property] = true;
+          this._generatePropertyAccessor(property, readOnly);
+        }
+      }
+
+      /**
+       * Generates a property accessor for the given property.
+       * @param {string} property Name of the property
+       * @param {boolean=} readOnly When true, no setter is created
+       */
+      _generatePropertyAccessor(property, readOnly) {
+        Object.defineProperty(this, property, {
+          /* eslint-disable valid-jsdoc */
+          /** @this {PropertiesChanged} */
+          get: function() {
+            return this.__data[property];
+          },
+          /** @this {PropertiesChanged} */
+          set: readOnly ? function() {} : function(value) {
+            this._setProperty(property, value);
+          }
+          /* eslint-enable */
+        });
+      }
+
       constructor() {
         super();
         this.__dataEnabled = false;
@@ -75,12 +130,25 @@
       }
 
       /**
+       * Initializes the local storage for property accessors.
+       *
        * Provided as an override point for performing any setup work prior
        * to initializing the property accessor system.
        *
        * @protected
        */
-      _initializeProperties() {}
+      _initializeProperties() {
+        // Capture instance properties; these will be set into accessors
+        // during first flush. Don't set them here, since we want
+        // these to overwrite defaults/constructor assignments
+        for (let p in this.__dataHasAccessor) {
+          if (this.hasOwnProperty(p)) {
+            this.__dataInstanceProps = this.__dataInstanceProps || {};
+            this.__dataInstanceProps[p] = this[p];
+            delete this[p];
+          }
+        }
+      }
 
       /**
        * Called at ready time with bag of instance properties that overwrote
@@ -254,6 +322,85 @@
         );
       }
 
+      /**
+       * Implements native Custom Elements `attributeChangedCallback` to
+       * set an attribute value to a property via `_attributeToProperty`.
+       *
+       * @param {string} name Name of attribute that changed
+       * @param {?string} old Old attribute value
+       * @param {?string} value New attribute value
+       */
+      attributeChangedCallback(name, old, value) {
+        if (old !== value) {
+          this._attributeToProperty(name, value);
+        }
+      }
+
+      /**
+       * Deserializes an attribute to its associated property.
+       *
+       * This method calls the `_deserializeValue` method to convert the string to
+       * a typed value.
+       *
+       * @param {string} attribute Name of attribute to deserialize.
+       * @param {?string} value of the attribute.
+       * @param {*=} type type to deserialize to, defaults to the value
+       * returned from `_typeForProperty`
+       */
+      _attributeToProperty(attribute, value, type) {
+        const property = this._propertyForAttribute(attribute);
+        this[property] = this._deserializeValue(value, type ||
+          this._typeForProperty(property));
+      }
+
+      /**
+       * Converts a string to a typed JavaScript value.
+       *
+       * This method is called when reading HTML attribute values to
+       * JS properties.  Users may override this method to provide
+       * deserialization for custom `type`s.
+       *
+       * @param {?string} value Value to deserialize.
+       * @param {*=} type Type to deserialize the string to.
+       * @return {*} Typed value deserialized from the provided string.
+       */
+      _deserializeValue(value, type) {
+        return typeof type == 'function' ? type(value) : value;
+      }
+
+      /**
+       * Returns a property name that corresponds to the given attribute.
+       * By default, converts dash to camel case, e.g. `foo-bar` to `fooBar`.
+       * @param {string} attribute Attribute to convert
+       * @return {string} Property name corresponding to the given attribute.
+       *
+       * @protected
+       */
+       _propertyForAttribute(attribute) {
+        return attribute;
+      }
+
+      /**
+       * Returns an attribute name that corresponds to the given property.
+       * By default, converts camel to dash case, e.g. `fooBar` to `foo-bar`.
+       * @param {string} property Property to convert
+       * @return {string} Attribute name corresponding to the given property.
+       *
+       * @protected
+       */
+      _attributeForProperty(property) {
+        return property;
+      }
+
+      /**
+       * Override point to provide a type to which to deserialize a value to
+       * a given property.
+       * @param {string} name Name of property
+       *
+       * @protected
+       */
+       _typeForProperty(name) {} //eslint-disable-line no-unused-vars
+
     };
 
   });