From 717a4f41a4aaa2ea4923e644902e9571c4c651a2 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 15 Sep 2017 11:43:27 -0700
Subject: [PATCH] Adds `Polymer.BasicElement`

Provides minimal element starting point using PropertyAccessors to create properties using a properties object similar to Polymer.Element. No template or binding support is provided.
---
 lib/elements/basic-element.html      | 100 ++++++++
 lib/mixins/property-accessors.html   |  24 +-
 test/unit/polymer.basic-element.html | 360 +++++++++++++++++++++++++++
 3 files changed, 482 insertions(+), 2 deletions(-)
 create mode 100644 lib/elements/basic-element.html
 create mode 100644 test/unit/polymer.basic-element.html

diff --git a/lib/elements/basic-element.html b/lib/elements/basic-element.html
new file mode 100644
index 0000000000..00bb7efd2f
--- /dev/null
+++ b/lib/elements/basic-element.html
@@ -0,0 +1,100 @@
+<!--
+@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/property-accessors.html">
+
+<script>
+(function() {
+  'use strict';
+
+  /**
+   * Custom element base class that provides minimal starting point
+   * using PropertyAccessors to create properties.
+   *
+   * @customElement
+   * @polymer
+   * @memberof Polymer
+   * @constructor
+   * @implements {Polymer_PropertyAccessors}
+   * @extends HTMLElement
+   * @appliesMixin Polymer.PropertyAccessors
+   * @summary Custom element base class that provides minimal starting point
+   * using PropertyAccessors 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);
+      }
+    }
+
+    static get observedAttributes() {
+      const props = this.properties;
+      return props ? Object.keys(props) : [];
+    }
+
+    /**
+     * 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) {
+      const props = this.properties;
+      if (props) {
+        this.prototype.__propertyInfo = props;
+        this.createProperties(Object.keys(props));
+      }
+    }
+
+    /**
+     * Overrides default behavior and adds a call to `finalize`.
+     * @override
+     */
+    _initializeProperties() {
+      this.constructor._ensureFinalized(this.localName);
+      super._initializeProperties();
+    }
+
+    _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);
+    }
+
+    connectedCallback() {
+      this._enableProperties();
+    }
+
+    /**
+     * Called when the element is removed from a document
+     */
+     disconnectedCallback() {}
+
+   }
+  /**
+   * @constructor
+   * @implements {Polymer_PropertyAccessors}
+   * @extends {HTMLElement}
+   */
+  Polymer.BasicElement = BasicElement;
+
+})();
+
+</script>
diff --git a/lib/mixins/property-accessors.html b/lib/mixins/property-accessors.html
index c6ea6abaeb..224cecca84 100644
--- a/lib/mixins/property-accessors.html
+++ b/lib/mixins/property-accessors.html
@@ -157,6 +157,26 @@
         }
       }
 
+      /**
+       * 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.
+       */
+      _propertyNameForAttribute(attribute) {
+        return caseMap.dashToCamelCase(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.
+       */
+       _attributeNameForProperty(property) {
+        return caseMap.camelToDashCase(property);
+      }
+
       /**
        * Initializes the local storage for property accessors.
        *
@@ -245,7 +265,7 @@
       _attributeToProperty(attribute, value, type) {
         // Don't deserialize back to property if currently reflecting
         if (!this.__serializing) {
-          let property = caseMap.dashToCamelCase(attribute);
+          let property = this._propertyNameForAttribute(attribute);
           this[property] = this._deserializeValue(value, type);
         }
       }
@@ -261,7 +281,7 @@
         this.__serializing = true;
         value = (arguments.length < 3) ? this[property] : value;
         this._valueToNodeAttribute(this, value,
-          attribute || caseMap.camelToDashCase(property));
+          attribute || this._attributeNameForProperty(property));
         this.__serializing = false;
       }
 
diff --git a/test/unit/polymer.basic-element.html b/test/unit/polymer.basic-element.html
new file mode 100644
index 0000000000..d4655c213f
--- /dev/null
+++ b/test/unit/polymer.basic-element.html
@@ -0,0 +1,360 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+<head>
+  <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">
+<body>
+
+  <dom-module id="my-element">
+    <script>
+    HTMLImports.whenReady(function() {
+
+      class MyElement extends Polymer.BasicElement {
+
+        static get properties() {
+          return {
+            prop: String
+          }
+        }
+
+        constructor() {
+          super();
+          this._propertiesChanged = sinon.spy();
+          this._tapListener = sinon.spy();
+          this._calledConstructor++;
+          this.prop = 'prop';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this._calledConnectedCallback++;
+        }
+
+        attributeChangedCallback() {
+          super.attributeChangedCallback.apply(this, arguments);
+          this._callAttributeChangedCallback++;
+        }
+
+        ready() {
+          super.ready();
+          this._ensureAttribute('tabIndex', 0);
+          this.addEventListener('click', (e) => this._tapListener(e));
+          this._calledReady++;
+        }
+
+      }
+
+      MyElement.prototype._calledConstructor = 0;
+      MyElement.prototype._calledConnectedCallback = 0;
+      MyElement.prototype._calledReady = 0;
+      MyElement.prototype._callAttributeChangedCallback = 0;
+
+      customElements.define('my-element', MyElement);
+
+      window.MyElement = MyElement;
+
+    });
+    </script>
+  </dom-module>
+
+
+  <dom-module id="sub-element">
+    <script>
+    HTMLImports.whenReady(function() {
+
+      class SubElement extends window.MyElement {
+
+        static get properties() {
+          return Object.assign({
+            prop2: String
+          }, super.properties);
+        }
+
+        constructor() {
+          super();
+          this._calledConstructor++;
+          this.prop = 'sub';
+          this.prop2 = 'prop2';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this._calledConnectedCallback++;
+        }
+
+        ready() {
+          super.ready();
+          this._calledReady++;
+          this._ensureAttribute('role', 'button');
+          this.addEventListener('click', (e) => this._tapListener(e));
+        }
+
+      }
+
+      customElements.define('sub-element', SubElement);
+
+      window.SubElement = SubElement;
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="sub-mixin-element">
+    <script>
+    HTMLImports.whenReady(function() {
+
+    function MyMixin(Base) {
+      return class extends Base {
+
+        static get properties() {
+          return Object.assign({
+            mixin: Number
+          }, super.properties);
+        }
+
+        constructor() {
+          super();
+          this._calledConstructor++;
+          this.mixin = 'mixin';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this._calledConnectedCallback++;
+        }
+
+        ready() {
+          super.ready();
+          this._calledReady++;
+          this._ensureAttribute('mixinattr', 'mixinattr');
+          this.addEventListener('click', (e) => this._tapListener(e));
+        }
+
+      };
+    }
+
+    class SubMixinElement extends MyMixin(window.SubElement) {
+
+      static get is() { return ''; }
+
+      static get properties() {
+        return Object.assign({
+          prop3: String
+        }, super.properties);
+      }
+
+      constructor() {
+        super();
+        this._calledConstructor++;
+        this.prop3 = 'prop3';
+      }
+
+      connectedCallback() {
+        super.connectedCallback();
+        this._calledConnectedCallback++;
+      }
+
+      ready() {
+        super.ready();
+        this._calledReady++;
+        this._ensureAttribute('submixinattr', 'submixinattr');
+        this.addEventListener('click', (e) => this._tapListener(e));
+      }
+
+    }
+
+    customElements.define('sub-mixin-element', SubMixinElement);
+
+    window.SubMixinElement = SubMixinElement;
+
+    });
+    </script>
+  </dom-module>
+
+  <test-fixture id="my-element-attr">
+    <template>
+      <my-element prop="attr"></my-element>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="sub-element-attr">
+    <template>
+      <sub-element prop="attr" prop2="attr"></sub-element>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="sub-mixin-element-attr">
+    <template>
+      <sub-mixin-element prop="attr" prop2="attr" prop3="attr" mixin="5"></sub-mixin-element>
+    </template>
+  </test-fixture>
+
+  <script>
+  suite('class extends Polymer.BasicElement', function() {
+
+    var el;
+
+    setup(function() {
+      el = document.createElement('my-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('instanceof', function() {
+      assert.instanceOf(el, HTMLElement);
+      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, window.MyElement);
+    });
+
+    test('lifecycle', function() {
+      assert.equal(el._calledConstructor, 1);
+      assert.equal(el._calledConnectedCallback, 1);
+      assert.equal(el._calledReady, 1);
+      assert.equal(el._callAttributeChangedCallback, 0);
+    });
+
+    test('listeners', function() {
+      el.dispatchEvent(new CustomEvent('click'));
+      assert.equal(el._tapListener.callCount, 1);
+    });
+
+    test('properties', function() {
+      assert.equal(el.prop, 'prop');
+      assert.isTrue(el._propertiesChanged.calledOnce);
+      assert.deepEqual(el._propertiesChanged.args[0][0], {prop: 'prop'});
+    });
+
+    test('attributes', function() {
+      var fixtureEl = fixture('my-element-attr');
+      assert.equal(fixtureEl.prop, 'attr');
+      assert.equal(fixtureEl._callAttributeChangedCallback, 1);
+      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
+    });
+
+  });
+
+  suite('subclass', function() {
+
+    var el;
+
+    setup(function() {
+      el = document.createElement('sub-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('instanceof', function() {
+      assert.instanceOf(el, HTMLElement);
+      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, window.MyElement);
+      assert.instanceOf(el, window.SubElement);
+    });
+
+    test('lifecycle', function() {
+      assert.equal(el._calledConstructor, 2);
+      assert.equal(el._calledConnectedCallback, 2);
+      assert.equal(el._calledReady, 2);
+      assert.equal(el._callAttributeChangedCallback, 0);
+    });
+
+    test('listeners', function() {
+      el.dispatchEvent(new CustomEvent('click'));
+      assert.equal(el._tapListener.callCount, 2);
+    });
+
+    test('properties', function() {
+      assert.equal(el.prop, 'sub');
+      assert.equal(el.prop2, 'prop2');
+      assert.isTrue(el._propertiesChanged.calledOnce);
+      assert.deepEqual(el._propertiesChanged.args[0][0], {prop: 'sub', prop2: 'prop2'});
+    });
+
+    test('attributes', function() {
+      var fixtureEl = fixture('sub-element-attr');
+      assert.equal(fixtureEl.prop, 'attr');
+      assert.equal(fixtureEl.prop2, 'attr');
+      assert.equal(fixtureEl._callAttributeChangedCallback, 2);
+      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
+      assert.equal(fixtureEl.getAttribute('role'), 'button');
+    });
+
+  });
+
+  suite('mixin', function() {
+
+    var el;
+
+    setup(function() {
+      el = document.createElement('sub-mixin-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('instanceof', function() {
+      assert.instanceOf(el, HTMLElement);
+      assert.instanceOf(el, Polymer.BasicElement);
+      assert.instanceOf(el, window.MyElement);
+      assert.instanceOf(el, window.SubElement);
+      assert.instanceOf(el, window.SubMixinElement);
+    });
+
+    test('lifecycle', function() {
+      assert.equal(el._calledConstructor, 4);
+      assert.equal(el._calledConnectedCallback, 4);
+      assert.equal(el._calledReady, 4);
+      assert.equal(el._callAttributeChangedCallback, 0);
+    });
+
+    test('listeners', function() {
+      el.dispatchEvent(new CustomEvent('click'));
+      assert.equal(el._tapListener.callCount, 4);
+    });
+
+    test('properties', function() {
+      assert.equal(el.prop, 'sub');
+      assert.equal(el.prop2, 'prop2');
+      assert.equal(el.mixin, 'mixin');
+      assert.equal(el.prop3, 'prop3');
+      assert.isTrue(el._propertiesChanged.calledOnce);
+      assert.deepEqual(el._propertiesChanged.args[0][0], {prop: 'sub', prop2: 'prop2', mixin: 'mixin', prop3: 'prop3'});
+    });
+
+    test('attributes', function() {
+      var fixtureEl = fixture('sub-mixin-element-attr');
+      assert.equal(fixtureEl.prop, 'attr');
+      assert.equal(fixtureEl.prop2, 'attr');
+      assert.equal(fixtureEl.prop3, 'attr');
+      assert.equal(fixtureEl.mixin, 5);
+      assert.equal(fixtureEl._callAttributeChangedCallback, 4);
+      assert.isTrue(fixtureEl.hasAttribute('tabindex'));
+      assert.equal(fixtureEl.getAttribute('role'), 'button');
+      assert.equal(fixtureEl.getAttribute('mixinattr'), 'mixinattr');
+      assert.equal(fixtureEl.getAttribute('submixinattr'), 'submixinattr');
+    });
+
+  });
+
+
+
+  </script>
+</body>
+</html>