Automate reflected properties in SkyElement.

sky/tests/resources/test-element.sky

Index: sky/tests/resources/test-element.sky
diff --git a/sky/tests/resources/test-element.sky b/sky/tests/resources/test-element.sky
index 193b9e2067404c8b62c2c777e4e982c977693a01..a178ed912c37cc62f82568750d59168236b3d795 100644
--- a/sky/tests/resources/test-element.sky
+++ b/sky/tests/resources/test-element.sky
@@ -5,7 +5,7 @@
 -->
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
 
-<sky-element name="test-element">
+<sky-element name="test-element" attributes="size:number, checked:boolean,name:string">
 <template>
   <div id="inside" on-test-event="handleEvent" attr="{{ value }}">{{ value }}</div>
 </template>
@@ -15,6 +15,7 @@ module.exports = class extends SkyElement {
     this.lastEvent = null;
     this.value = 10;
     this.shadowRootReadyCount = 0;
+    this.changes = [];
   }
   handleEvent(event) {
     this.lastEvent = event;
@@ -22,6 +23,22 @@ module.exports = class extends SkyElement {
   shadowRootReady() {
     this.shadowRootReadyCount++;
   }
+  sizeChanged(oldValue, newValue) {
+    this.recordAttributeChange('size', oldValue, newValue);
+  }
+  checkedChanged(oldValue, newValue) {
+    this.recordAttributeChange('checked', oldValue, newValue);
+  }
+  nameChanged(oldValue, newValue) {
+    this.recordAttributeChange('name', oldValue, newValue);
+  }
+  recordAttributeChange(name, oldValue, newValue) {
+    this.changes.push({
+      name: name,
+      newValue: newValue,
+      oldValue: oldValue,
+    });
+  }
 }.register();
 </script>
 </sky-element>