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

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>

engine/src/flutter/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>