From 0524fc39e4e096e2f579a22081a2b88e6bbc2b88 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
---
 engine/src/flutter/examples/file-browser.sky    | 17 ++++++++++-------
 .../flutter/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 +++++---
 .../flutter/examples/flights-app/app-panel.sky  |  8 +++++---
 .../examples/flights-app/app-scrollable.sky     |  8 +++++---
 .../examples/flights-app/app-search-input.sky   |  8 +++++---
 .../flutter/examples/flights-app/app-title.sky  |  8 +++++---
 .../flutter/examples/flights-app/app-toast.sky  |  8 +++++---
 .../examples/flights-app/app-toolbar.sky        |  8 +++++---
 .../examples/flights-app/flights-app.sky        |  7 ++++---
 .../src/flutter/examples/flights-app/index.sky  |  6 +++---
 13 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/engine/src/flutter/examples/file-browser.sky b/engine/src/flutter/examples/file-browser.sky
index ba456ae9e3..f71672c36d 100644
--- a/engine/src/flutter/examples/file-browser.sky
+++ b/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({
-  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/engine/src/flutter/examples/flights-app/app-header.sky b/engine/src/flutter/examples/flights-app/app-header.sky
index 529c67d98b..e7c2554e6c 100644
--- a/engine/src/flutter/examples/flights-app/app-header.sky
+++ b/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({
-  name: "app-header"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-menu-button.sky b/engine/src/flutter/examples/flights-app/app-menu-button.sky
index c63c3a4144..41709faed2 100644
--- a/engine/src/flutter/examples/flights-app/app-menu-button.sky
+++ b/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({
-  name: "app-menu-button"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-panel-content.sky b/engine/src/flutter/examples/flights-app/app-panel-content.sky
index 9bc9330955..8d96c9aae6 100644
--- a/engine/src/flutter/examples/flights-app/app-panel-content.sky
+++ b/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({
-  name: "app-panel-content"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-panel-header.sky b/engine/src/flutter/examples/flights-app/app-panel-header.sky
index 11ab221b24..7d7e3826cb 100644
--- a/engine/src/flutter/examples/flights-app/app-panel-header.sky
+++ b/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({
-  name: "app-panel-header"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-panel.sky b/engine/src/flutter/examples/flights-app/app-panel.sky
index ed9da6d110..61f02c02b7 100644
--- a/engine/src/flutter/examples/flights-app/app-panel.sky
+++ b/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({
-  name: "app-panel"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-scrollable.sky b/engine/src/flutter/examples/flights-app/app-scrollable.sky
index e9c1840e0f..14b4f0d52e 100644
--- a/engine/src/flutter/examples/flights-app/app-scrollable.sky
+++ b/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({
-  name: "app-scrollable"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-search-input.sky b/engine/src/flutter/examples/flights-app/app-search-input.sky
index 538ea545d3..f87953aa80 100644
--- a/engine/src/flutter/examples/flights-app/app-search-input.sky
+++ b/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({
-  name: "app-search-input"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-title.sky b/engine/src/flutter/examples/flights-app/app-title.sky
index 8ad99d17d7..dd7c718c44 100644
--- a/engine/src/flutter/examples/flights-app/app-title.sky
+++ b/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({
-  name: "app-title"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-toast.sky b/engine/src/flutter/examples/flights-app/app-toast.sky
index f04db163b4..c7c438e825 100644
--- a/engine/src/flutter/examples/flights-app/app-toast.sky
+++ b/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({
-  name: "app-toast"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/app-toolbar.sky b/engine/src/flutter/examples/flights-app/app-toolbar.sky
index b996f35103..5f0a74a385 100644
--- a/engine/src/flutter/examples/flights-app/app-toolbar.sky
+++ b/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({
-  name: "app-toolbar"
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/flights-app.sky b/engine/src/flutter/examples/flights-app/flights-app.sky
index ccb24ff6fe..2d32ff712d 100644
--- a/engine/src/flutter/examples/flights-app/flights-app.sky
+++ b/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({
-  name: "flights-app",
-});
+module.exports = class extends SkyElement {
+}.register();
 </script>
+</sky-element>
diff --git a/engine/src/flutter/examples/flights-app/index.sky b/engine/src/flutter/examples/flights-app/index.sky
index 7aa09b339f..9f262528d3 100644
--- a/engine/src/flutter/examples/flights-app/index.sky
+++ b/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() {
-      document.querySelector("sky").appendChild(document.createElement("flights-app"));
+    window.addEventListener("load", function() {
+      document.querySelector("sky").appendChild(new FlightsAppElement());
     });
   </script>
 </sky>