Automate reflected properties in SkyElement.

sky/framework/sky-element/sky-element.sky

 <!--
 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="sky-binder.sky" as="binder" />
 <script>
 var templates = new Map();
 
+var attributeDescriptors = {
+  boolean: {
+    type: 'boolean',
+    convert: function(value) {
+      if (typeof value == 'string')
+        return value == 'true';
+      return !!value;
+    },
+  },
+  number: {
+    type: 'number',
+    convert: function(value) {
+      return Number(value);
+    },
+  },
+  string: {
+    type: 'string',
+    convert: function(value) {
+      if (value == null)

[abarth-chromium, 2015/01/06 04:02:38]

Why handle |null| special but not |undefined|?

[esprehn, 2015/01/06 04:10:24]

undefined is itself a string, if I special case that you could never have a
string with the value "undefined" which seems bad.

<foo-widget foo="undefined"> would result in the value of foo being "".

The special case for null is because if an attribute is not present
getAttribute() returns null, and you don't want to get back "null", you want ""
then.

+        return "";
+      return String(value);
+    },
+  },
+};
+
+function defineReflectedAttribute(prototype, descriptor, name) {

[abarth-chromium, 2015/01/06 04:02:38]

Why not just pass in the convert function instead of the whole descriptor?

[esprehn, 2015/01/06 04:10:24]

Done, originally I had a more complex idea for how to do this, we can expand it
later.

+  Object.defineProperty(prototype, name, {
+    get: function() {
+      return descriptor.convert(this.getAttribute(name));
+    },
+    set: function(newValue) {
+      this.setAttribute(name, descriptor.convert(newValue));
+    },
+    enumerable: true,
+    configurable: true,
+  });
+
+  prototype[name + 'AttributeChanged'] = function(oldValue, newValue) {
+    this.notifyPropertyChanged(name, descriptor.convert(oldValue),
+        descriptor.convert(newValue));
+  };
+}
+
+function defineReflectedAttributes(elementClass, list) {
+  var attributeNames = (list || '').split(',');
+  var prototype = elementClass.prototype;
+
+  for (var i = 0; i < attributeNames.length; ++i) {
+    var parts = attributeNames[i].split(':');
+    var name = parts[0].trim();
+    var type = (parts[1] || "").trim();

[abarth-chromium, 2015/01/06 04:02:38]

s/""/''/ for consistency

[esprehn, 2015/01/06 04:10:24]

done.

+    var descriptor = attributeDescriptors[type] || attributeDescriptors.string;
+
+    defineReflectedAttribute(prototype, descriptor, name);
+  }
+}
+
 class SkyElement extends HTMLElement {
 
   static register() {
     var wrapper = document.currentScript.parentNode;
 
     if (wrapper.localName !== 'sky-element')
       throw new Error('No <sky-element>.');
 
     var tagName = wrapper.getAttribute("name");
     if (!tagName)
       throw new Error('<sky-element> must have a name.');
 
     var template = wrapper.querySelector('template');
     if (template)
       templates.set(tagName, template);
 
+    defineReflectedAttributes(this, wrapper.getAttribute("attributes"));
+
     return document.registerElement(tagName, {
       prototype: this.prototype,
     });
   }
 
   created() {
     // override
   }
 
   attached() {
     // override
   }
 
   detached() {
     // override
   }
 
   attributeChanged(attrName, oldValue, newValue) {
     // override
   }
 
   shadowRootReady() {
     // override
   }
 
   createdCallback() {
     this.isAttached = false;
     this.created();
+
+    // Invoke attributeChanged callback when element is first created too.
+    var attributes = this.getAttributes();
+    for (var i = 0; i < attributes.length; ++i) {
+      var attribute = attributes[i];
+      this.attributeChangedCallback(attribute.name, null, attribute.value);
+    }
   }
 
   attachedCallback() {
     if (!this.shadowRoot) {
       var template = templates.get(this.localName);
       if (template) {
         var shadow = this.ensureShadowRoot();
         var instance = binder.createInstance(template, this);
         shadow.appendChild(instance.fragment);
         this.shadowRootReady();
       }
     }
     this.attached();
     this.isAttached = true;
   }
 
   detachedCallback() {
     this.detached();
     this.isAttached = false;
   }
 
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    // reserved for canonical behavior
-    this.attributeChanged(attrName, oldValue, newValue);
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.attributeChanged(name, oldValue, newValue);
+    var handler = this[name + 'AttributeChanged'];
+    if (typeof handler == 'function')
+      handler.call(this, oldValue, newValue);
+  }
+
+  notifyPropertyChanged(name, oldValue, newValue) {
+    var notifier = Object.getNotifier(this);
+    notifier.notify({
+      type: 'update',
+      name: name,
+      oldValue: oldValue,
+    });
+    var handler = this[name + 'Changed'];
+    if (typeof handler == 'function')
+      handler.call(this, oldValue, newValue);
   }
 };
 
 module.exports = SkyElement;
 </script>