From b3400475d55353f85c5ddec0a7015982d99bdeb6 Mon Sep 17 00:00:00 2001
From: Elliott Sprehn <esprehn@chromium.org>
Date: Tue, 16 Dec 2014 16:28:28 -0800
Subject: [PATCH] Make SkyElement more classy.

The syntax for implementing a SkyElement is now:

<sky-element name="element-name">
<template>
  <!-- template here -->
</template>
<script>
module.exports = class extends SkyElement {
  attached() {
     // ...
  }
  // .. methods here ..
}.register();
</script>
</sky-element>

The register() static method on SkyElement subclasses calls
document.registerElement() and returns the generated constructor.
It uses the parent <sky-element>'s name attribute to set the name
of the element.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/788943003
---
 examples/city-list/city-list.sky           | 85 ++++++++++++----------
 examples/file-browser.sky                  | 17 +++--
 examples/flights-app/app-header.sky        |  8 +-
 examples/flights-app/app-menu-button.sky   |  8 +-
 examples/flights-app/app-panel-content.sky |  8 +-
 examples/flights-app/app-panel-header.sky  |  8 +-
 examples/flights-app/app-panel.sky         |  8 +-
 examples/flights-app/app-scrollable.sky    |  8 +-
 examples/flights-app/app-search-input.sky  |  8 +-
 examples/flights-app/app-title.sky         |  8 +-
 examples/flights-app/app-toast.sky         |  8 +-
 examples/flights-app/app-toolbar.sky       |  8 +-
 examples/flights-app/flights-app.sky       |  7 +-
 examples/flights-app/index.sky             |  6 +-
 framework/sky-element/sky-element.sky      | 85 +++++++++++-----------
 15 files changed, 154 insertions(+), 126 deletions(-)

diff --git a/examples/city-list/city-list.sky b/examples/city-list/city-list.sky
index f89cad77fc5..4306c934558 100644
--- a/examples/city-list/city-list.sky
+++ b/examples/city-list/city-list.sky
@@ -7,6 +7,12 @@
 <import src="city-data-service.sky" as="CityDataService" />
 <import src="city-sequence.sky" as="CitySequence" />
 
+<script>
+// TODO(esprehn): exports should start as the empty object.
+module.exports = {};
+</script>
+
+<sky-element name="state-header">
 <template>
   <style>
     div {
@@ -20,15 +26,15 @@
   <div>{{ state }}</div>
 </template>
 <script>
-SkyElement({
-  name: 'state-header',
-
+module.exports.StateHeaderElement = class extends SkyElement {
   set datum(datum) {
     this.state = datum.state;
   }
-});
+}.register();
 </script>
+</sky-element>
 
+<sky-element name="letter-header">
 <template>
   <style>
     div {
@@ -42,15 +48,15 @@ SkyElement({
   <div>{{ letter }}</div>
 </template>
 <script>
-SkyElement({
-  name: 'letter-header',
-
+module.exports.LetterHeaderElement = class extends SkyElement {
   set datum(datum) {
     this.letter = datum.letter;
   }
-});
+}.register();
 </script>
+</sky-element>
 
+<sky-element name="city-item">
 <template>
   <style>
     :host {
@@ -85,16 +91,16 @@ SkyElement({
   </div>
 </template>
 <script>
-  SkyElement({
-    name: 'city-item',
-
-    set datum(datum) {
-      this.name = datum.name;
-      this.population = datum.population;
-    }
-  });
+module.exports.CityItemElement = class extends SkyElement {
+  set datum(datum) {
+    this.name = datum.name;
+    this.population = datum.population;
+  }
+}.register();
 </script>
+</sky-element>
 
+<sky-element name="city-list">
 <template>
   <style>
 
@@ -146,14 +152,12 @@ SkyElement({
   }
 
   </style>
-
   <div id="scroller" fit>
     <div id="scrollarea">
       <div id="contentarea">
       </div>
     </div>
   </div>
-
 </template>
 <script>
 
@@ -540,16 +544,18 @@ SkyElement({
       this.drawBottom = 0;
     }
 
-    SkyElement({
-      name: 'city-list',
-      loader: null,
-      scroller: null,
-      tiler: null,
-      date: null,
-      month: null,
-      views: null,
+    module.exports.CityListElement = class extends SkyElement {
 
-      attached: function() {
+      created() {
+        this.loader = null;
+        this.scroller = null;
+        this.tiler = null;
+        this.date = null;
+        this.month = null;
+        this.views = null;
+      }
+
+      attached() {
         this.views = {};
         this.loader = new Loader(this);
         this.scroller = new Scroller();
@@ -570,44 +576,43 @@ SkyElement({
           self.domReady();
           self.loader.maybeLoadMoreData(self.dataLoaded);
         });
-      },
+      }
 
-      domReady: function() {
+      domReady() {
         this.scroller.setup(this.shadowRoot.getElementById('scroller'),
             this.shadowRoot.getElementById('scrollarea'),
             this.shadowRoot.getElementById('contentarea'));
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.setupViews(scrollFrame);
-      },
+      }
 
-      updateView: function(data, scrollChanged) {
+      updateView(data, scrollChanged) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.drawTiles(scrollFrame, data);
         var datum = scrollChanged ?
             this.tiler.getFirstVisibleDatum(scrollFrame) : null;
         this.loader.maybeLoadMoreData(this.dataLoaded, datum);
-      },
+      }
 
-      dataLoaded: function(data, indexOffset) {
+      dataLoaded(data, indexOffset) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.updateFirstItem(indexOffset);
         this.updateView(data.items, false);
-      },
+      }
 
-      handleScroll: function(event) {
+      handleScroll(event) {
         if (!this.scroller.captureNewFrame(event))
           return;
 
         this.updateView(this.loader.getItems(), true);
-      },
+      }
 
-      scrollBy: function(amount) {
+      scrollBy(amount) {
         this.scrollerElement.scrollTop += amount;
         this.handleScroll({ target: this.scrollerElement });
       }
-    });
+    }.register();
 
 })(this);
-
 </script>
-
+</sky-element>
diff --git a/examples/file-browser.sky b/examples/file-browser.sky
index ba456ae9e3f..f71672c36d6 100644
--- a/examples/file-browser.sky
+++ b/examples/file-browser.sky
@@ -6,6 +6,7 @@
 <import src="../framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="../framework/xmlhttprequest.sky" as="XMLHttpRequest" />
 
+<sky-element name="file-browser">
 <template>
   <style>
     heading {
@@ -21,12 +22,13 @@
   </template>
 </template>
 <script>
-SkyElement({
-  name: 'file-browser',
-  url: '',
-  files: [],
-  directories: [],
-  attached: function() {
+module.exports = class extends SkyElement {
+  created() {
+    this.url = '';
+    this.files = [];
+    this.directories = [];
+  }
+  attached() {
     this.url = this.ownerDocument.URL;
     var xhr = new XMLHttpRequest();
     xhr.open('GET', this.url + '?format=json');
@@ -37,5 +39,6 @@ SkyElement({
     }).bind(this);
     xhr.send();
   }
-});
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-header.sky b/examples/flights-app/app-header.sky
index 529c67d98b6..e7c2554e6ca 100644
--- a/examples/flights-app/app-header.sky
+++ b/examples/flights-app/app-header.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-header">
 <template>
   <style>
     :host {
@@ -12,7 +14,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-header"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-menu-button.sky b/examples/flights-app/app-menu-button.sky
index c63c3a4144e..41709faed2f 100644
--- a/examples/flights-app/app-menu-button.sky
+++ b/examples/flights-app/app-menu-button.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-menu-button">
 <template>
   <style>
     :host {
@@ -13,7 +15,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-menu-button"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-panel-content.sky b/examples/flights-app/app-panel-content.sky
index 9bc93309559..8d96c9aae6d 100644
--- a/examples/flights-app/app-panel-content.sky
+++ b/examples/flights-app/app-panel-content.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-panel-content">
 <template>
   <style>
     :host {
@@ -8,7 +10,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-panel-content"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-panel-header.sky b/examples/flights-app/app-panel-header.sky
index 11ab221b242..7d7e3826cb0 100644
--- a/examples/flights-app/app-panel-header.sky
+++ b/examples/flights-app/app-panel-header.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-panel-header">
 <template>
   <style>
     :host {
@@ -11,7 +13,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-panel-header"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-panel.sky b/examples/flights-app/app-panel.sky
index ed9da6d1106..61f02c02b7a 100644
--- a/examples/flights-app/app-panel.sky
+++ b/examples/flights-app/app-panel.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-panel">
 <template>
   <style>
     :host {
@@ -10,7 +12,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-panel"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-scrollable.sky b/examples/flights-app/app-scrollable.sky
index e9c1840e0ff..14b4f0d52e1 100644
--- a/examples/flights-app/app-scrollable.sky
+++ b/examples/flights-app/app-scrollable.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-scrollable">
 <template>
   <style>
     :host {
@@ -10,7 +12,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-scrollable"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-search-input.sky b/examples/flights-app/app-search-input.sky
index 538ea545d37..f87953aa80d 100644
--- a/examples/flights-app/app-search-input.sky
+++ b/examples/flights-app/app-search-input.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-search-input">
 <template>
   <style>
     :host {
@@ -19,7 +21,7 @@
   <span class="input-text"><t>flights today to dc by price</t></span>
 </template>
 <script>
-SkyElement({
-  name: "app-search-input"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-title.sky b/examples/flights-app/app-title.sky
index 8ad99d17d76..dd7c718c445 100644
--- a/examples/flights-app/app-title.sky
+++ b/examples/flights-app/app-title.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-title">
 <template>
   <style>
     :host {
@@ -12,7 +14,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-title"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-toast.sky b/examples/flights-app/app-toast.sky
index f04db163b48..c7c438e8253 100644
--- a/examples/flights-app/app-toast.sky
+++ b/examples/flights-app/app-toast.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-toast">
 <template>
   <style>
     :host {
@@ -30,7 +32,7 @@
   </div>
 </template>
 <script>
-SkyElement({
-  name: "app-toast"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/app-toolbar.sky b/examples/flights-app/app-toolbar.sky
index b996f35103c..5f0a74a385e 100644
--- a/examples/flights-app/app-toolbar.sky
+++ b/examples/flights-app/app-toolbar.sky
@@ -1,4 +1,6 @@
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="app-toolbar">
 <template>
   <style>
     :host {
@@ -9,7 +11,7 @@
   <content></content>
 </template>
 <script>
-SkyElement({
-  name: "app-toolbar"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/flights-app.sky b/examples/flights-app/flights-app.sky
index ccb24ff6fe1..2d32ff712d3 100644
--- a/examples/flights-app/flights-app.sky
+++ b/examples/flights-app/flights-app.sky
@@ -10,6 +10,7 @@
 <import src="app-scrollable.sky" />
 <import src="app-toast.sky" />
 
+<sky-element name="flights-app">
 <template>
   <style>
     * { box-sizing: border-box; }
@@ -200,7 +201,7 @@
   </app-toast>
 </template>
 <script>
-SkyElement({
-  name: "flights-app",
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/examples/flights-app/index.sky b/examples/flights-app/index.sky
index 7aa09b339f2..9f262528d3f 100644
--- a/examples/flights-app/index.sky
+++ b/examples/flights-app/index.sky
@@ -1,5 +1,5 @@
 <sky>
-  <import src="flights-app.sky" />
+  <import src="flights-app.sky" as="FlightsAppElement"/>
   <style>
     sky {
       height: 100%;
@@ -8,8 +8,8 @@
   <script>
     // TODO(esprehn): Work around a bug where having <flights-app /> in the
     // page doesn't render anything until the first input event.
-    addEventListener("load", function() {
-      document.querySelector("sky").appendChild(document.createElement("flights-app"));
+    window.addEventListener("load", function() {
+      document.querySelector("sky").appendChild(new FlightsAppElement());
     });
   </script>
 </sky>
diff --git a/framework/sky-element/sky-element.sky b/framework/sky-element/sky-element.sky
index 81b796ae1fd..aaf130faab8 100644
--- a/framework/sky-element/sky-element.sky
+++ b/framework/sky-element/sky-element.sky
@@ -7,27 +7,48 @@
 <script>
 var templates = new Map();
 
-function createPrototype(proto, definition) {
-  var result = Object.create(proto);
-  var names = Object.getOwnPropertyNames(definition);
-  for (var i = 0; i < names.length; ++i) {
-    var descriptor = Object.getOwnPropertyDescriptor(definition, names[i]);
-    Object.defineProperty(result, names[i], descriptor);
+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);
+
+    return document.registerElement(tagName, {
+      prototype: this.prototype,
+    });
   }
-  return result;
-}
 
-var BasePrototype = createPrototype(HTMLElement.prototype, {
-
-  createdCallback: function() {
-    this.created();
-  },
-
-  created: function() {
+  created() {
     // override
-  },
+  }
 
-  attachedCallback: function() {
+  attached() {
+    // override
+  }
+
+  dettached() {
+    // override
+  }
+
+  attributeChanged(attrName, oldValue, newValue) {
+    // override
+  }
+
+  createdCallback() {
+    this.created();
+  }
+
+  attachedCallback() {
     if (!this.shadowRoot) {
       var template = templates.get(this.localName);
       if (template) {
@@ -36,38 +57,16 @@ var BasePrototype = createPrototype(HTMLElement.prototype, {
       }
     }
     this.attached();
-  },
+  }
 
-  attached: function() {
-    // override
-  },
-
-  dettachedCallback: function() {
+  dettachedCallback() {
     this.dettached();
-  },
+  }
 
-  dettached: function() {
-    // override
-  },
-
-  attributeChangedCallback: function(attrName, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     // reserved for canonical behavior
     this.attributeChanged(attrName, oldValue, newValue);
-  },
-
-  attributeChanged: function(attrName, oldValue, newValue) {
-    // override
   }
-});
-
-function SkyElement(prototype) {
-  var template = document.currentScript.previousElementSibling;
-  if (template && template.localName === 'template')
-    templates.set(prototype.name, template);
-
-  document.registerElement(prototype.name, {
-    prototype: createPrototype(BasePrototype, prototype),
-  });
 };
 
 module.exports = SkyElement;