Renamed basic element to properties element

Exposed `PropertiesMixin` also.

lib/elements/properties-element.html

@@ -0,0 +1,44 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../utils/boot.html">
+<link rel="import" href="../utils/mixin.html">
+<link rel="import" href="../mixins/properties-mixin.html">
+
+<script>
+  'use strict';
+
+  /**
+   * Base class that provides a simple starting point for creating an element
+   * that declares properties via the `properties` static getter that are
+   * observed. Changes are reported via the `_propertiesChanged` method.
+   * This element provides no specific support for rendering. Users are expected
+   * to create a shadowRoot and put content into it and update it in whatever
+   * way makes sense for the use case.
+   *
+   * @customElement
+   * @polymer
+   * @memberof Polymer
+   * @constructor
+   * @implements {Polymer_PropertiesMixin}
+   * @extends HTMLElement
+   * @appliesMixin Polymer.PropertiesMixin
+   * @summary Base class that provides a simple starting point for creating an
+   * element that declares properties via the `properties` static getter that
+   * are observed
+   */
+   const PropertiesElement = Polymer.PropertiesMixin(HTMLElement);
+  /**
+   * @constructor
+   * @implements {Polymer_PropertiesMixin}
+   * @extends {HTMLElement}
+   */
+  Polymer.PropertiesElement = PropertiesElement;
+</script>

lib/mixins/properties-mixin.html

@@ -0,0 +1,140 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../utils/boot.html">
+<link rel="import" href="../utils/mixin.html">
+<link rel="import" href="../mixins/properties-changed.html">
+
+<script>
+(function() {
+  'use strict';
+
+  /**
+   * Mixin that provides minimal starting point to using the PropertiesChanged
+   * mixin by providing a mechanism to declare properties in a static
+   * getter (e.g. static get properties() { return { foo: String } }). Changes
+   * are reported via the `_propertiesChanged` method.
+   *
+   * This mixin provides no specific support for rendering. Users are expected
+   * to create a shadowRoot and put content into it and update it in whatever
+   * way makes sense for the use case.
+   *
+   * @customElement
+   * @polymer
+   * @memberof Polymer
+   * @constructor
+   * @implements {Polymer_PropertiesChanged}
+   * @extends HTMLElement
+   * @appliesMixin Polymer.PropertiesChanged
+   * @summary Mixin that provides a minimal starting point for using
+   * the PropertiesChanged mixin by providing a declarative `properties` object.
+   */
+   Polymer.PropertiesMixin = Polymer.dedupingMixin(superClass => {
+
+    /**
+     * @constructor
+     * @extends {superClass}
+     * @implements {Polymer_PropertiesChanged}
+     * @unrestricted
+     */
+    const base = Polymer.PropertiesChanged(superClass);
+
+    return class PropertiesElement extends base {
+
+      /**
+       * Implements standard custom elements getter to observes the attributes
+       * listed in `properties`.
+       */
+      static get observedAttributes() {
+        const props = this.properties;
+        return props ? Object.keys(props).map(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
+       * template.
+       * @param {string} name Name of the element
+       */
+      static finalize(name) { // eslint-disable-line no-unused-vars
+        const props = this.properties;
+        if (props) {
+          this.prototype.__propertyInfo = props;
+          this.createProperties(Object.keys(props));
+        }
+      }
+
+      /**
+       * 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.
+       * @override
+       */
+      _initializeProperties() {
+        this.constructor._ensureFinalized(this.localName);
+        super._initializeProperties();
+      }
+
+      /**
+       * 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
+       *
+       * @protected
+       */
+      _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
+       * `PropertiesChanged`.
+       */
+      connectedCallback() {
+        this._enableProperties();
+      }
+
+      /**
+       * Called when the element is removed from a document
+       */
+      disconnectedCallback() {}
+
+    }
+
+  });
+
+})();
+
+</script>

test/runner.html

@@ -54,8 +54,8 @@
       'unit/async.html',
       'unit/behaviors.html',
       'unit/polymer.element.html',
-      'unit/polymer.basic-element.html',
-      'unit/polymer.basic-element-with-property-accessors.html',
+      'unit/polymer.properties-element.html',
+      'unit/polymer.properties-element-with-property-accessors.html',
       'unit/polymer.legacyelement.html',
       'unit/debounce.html',
       'unit/inheritance.html',

test/unit/polymer.basic-element-with-property-accessors.html → test/unit/polymer.properties-element-with-property-accessors.html

@@ -13,15 +13,15 @@
   <meta charset="utf-8">
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../../lib/elements/basic-element.html">
+  <link rel="import" href="../../lib/elements/properties-element.html">
   <link rel="import" href="../../lib/mixins/property-accessors.html">
 <body>
 
   <dom-module id="my-element">
     <script>
     HTMLImports.whenReady(function() {
 
-      class MyElement extends Polymer.PropertyAccessors(Polymer.BasicElement) {
+      class MyElement extends Polymer.PropertyAccessors(Polymer.PropertiesElement) {
 
         static get properties() {
           return {
@@ -200,7 +200,7 @@
   </test-fixture>
 
   <script>
-  suite('class extends Polymer.BasicElement', function() {
+  suite('class extends Polymer.PropertiesElement', function() {
 
     var el;
 
@@ -215,7 +215,7 @@
 
     test('instanceof', function() {
       assert.instanceOf(el, HTMLElement);
-      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, Polymer.PropertiesElement);
       assert.instanceOf(el, window.MyElement);
     });
 
@@ -261,7 +261,7 @@
 
     test('instanceof', function() {
       assert.instanceOf(el, HTMLElement);
-      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, Polymer.PropertiesElement);
       assert.instanceOf(el, window.MyElement);
       assert.instanceOf(el, window.SubElement);
     });
@@ -311,7 +311,7 @@
 
     test('instanceof', function() {
       assert.instanceOf(el, HTMLElement);
-      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, Polymer.PropertiesElement);
       assert.instanceOf(el, window.MyElement);
       assert.instanceOf(el, window.SubElement);
       assert.instanceOf(el, window.SubMixinElement);