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

@@ -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({
+module.exports.StateHeaderElement = class extends SkyElement {
-  name: 'state-header',
-
   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({
+module.exports.LetterHeaderElement = class extends SkyElement {
-  name: 'letter-header',
-
   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({
+module.exports.CityItemElement = class extends SkyElement {
-    name: 'city-item',
-
   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({
+    module.exports.CityListElement = class extends SkyElement {
-      name: 'city-list',
-      loader: null,
-      scroller: null,
-      tiler: null,
-      date: null,
-      month: null,
-      views: null,
 
-      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>

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({
+module.exports = class extends SkyElement {
-  name: 'file-browser',
+  created() {
-  url: '',
+    this.url = '';
-  files: [],
+    this.files = [];
-  directories: [],
+    this.directories = [];
-  attached: function() {
+  }
+  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>

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({
+module.exports = class extends SkyElement {
-  name: "app-header"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-menu-button"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-panel-content"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-panel-header"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-panel"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-scrollable"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-search-input"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-title"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-toast"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "app-toolbar"
+}.register();
-});
 </script>
+</sky-element>

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({
+module.exports = class extends SkyElement {
-  name: "flights-app",
+}.register();
-});
 </script>
+</sky-element>

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() {
+    window.addEventListener("load", function() {
-      document.querySelector("sky").appendChild(document.createElement("flights-app"));
+      document.querySelector("sky").appendChild(new FlightsAppElement());
     });
   </script>
 </sky>