From 1da15583c5bb968fdc0bce3bd8f40a8fcdbf480e Mon Sep 17 00:00:00 2001
From: Hixie <github.com@spam.hixie.ch>
Date: Tue, 4 Nov 2014 13:32:07 -0800
Subject: [PATCH] Docs: add an example that uses the current APIs to define an
 <element> element; an example that uses that example to define some HTMLy
 elements; and an example to use those HTMLy elements to display a hello world
 doc. Highly incomplete WIP.

Review URL: https://codereview.chromium.org/698293003
---
 examples/htmlish/framework/element.sky |  72 ++++++++++++++++
 examples/htmlish/framework/htmlish.sky | 109 +++++++++++++++++++++++++
 examples/htmlish/samples/intro.sky     |  11 +++
 3 files changed, 192 insertions(+)
 create mode 100644 examples/htmlish/framework/element.sky
 create mode 100644 examples/htmlish/framework/htmlish.sky
 create mode 100644 examples/htmlish/samples/intro.sky

diff --git a/examples/htmlish/framework/element.sky b/examples/htmlish/framework/element.sky
new file mode 100644
index 0000000000..ab792677d4
--- /dev/null
+++ b/examples/htmlish/framework/element.sky
@@ -0,0 +1,72 @@
+SKY MODULE - defines an <element> element
+<import src="sky:core" as="sky"/>
+
+<!-- usage:
+
+   <element name="tagname">
+    <style> style here (optional) </style>
+    <template> shadow tree here (optional) </template>
+    <script> // optional
+     module.currentScript.parentNode.setPrototype({
+       init: function () {
+         // constructor here
+       },
+       // rest of api here
+     });
+    </script>
+   </element>
+
+-->
+
+<script>
+ module.exports.Element = sky.registerElement({
+   tagName: 'element',
+   prototype: class extends Element {
+     constructor (module) {
+       super();
+       this.state = 'loading';
+       this.module = module;
+       this.definedPrototype = sky.Element;
+     }
+     setPrototype(prototype) {
+       this.definedPrototype = prototype;
+     }
+     endTagParsedCallback() {
+       let style = null;
+       let template = null;
+       let child = this.firstChild;
+       while (child && !(style && template)) {
+         if ((!style) && (child instanceof sky.StyleElement))
+           style = child;
+         if ((!template) && (template instanceof sky.TemplateElement))
+           template = child;
+         child = child.nextSibling;
+       }
+       let tagName = this.getAttribute('name');
+       let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1) + 'Element';
+       let constructor = function (module) {
+         super(module);
+         if (this.init)
+           this.init();
+         if (style)
+           this.shadowRoot.append(style.cloneNode(true));
+         if (template)
+           this.shadowRoot.append(template.cloneNode(true));
+         }
+       };
+       if (this.definedPrototype)
+         constructor.prototype = this.definedPrototype;
+       else
+         constructor.prototype = sky.Element;
+       this.module.exports[constructorName] = this.registerElement({
+         tagName: this.getAttribute('name'),
+         shadow: style || template,
+         constructor: constructor,
+       });
+       delete this.definedPrototype;
+       delete this.module;
+       this.state = 'loaded';
+     }
+   },
+ });
+</script>
diff --git a/examples/htmlish/framework/htmlish.sky b/examples/htmlish/framework/htmlish.sky
new file mode 100644
index 0000000000..1baf62f5f0
--- /dev/null
+++ b/examples/htmlish/framework/htmlish.sky
@@ -0,0 +1,109 @@
+SKY MODULE - exports some basic HTML-like elements
+<import src="element.sky"/>
+
+<!-- note: accessibility handling is not implemented yet, because the
+           mojo ax service isn't yet ready -->
+
+<element name=html>
+ <!-- implement a scrollable viewport -->
+</element>
+
+<element name=head />
+<element name=body />
+<element name=p />
+
+<element name=h1>
+ <style>
+  :host { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
+ </style>
+</element>
+
+<element name=h2>
+ <style>
+  :host { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
+ </style>
+</element>
+
+<element name=h3>
+ <style>
+  :host { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
+ </style>
+</element>
+
+<element name=h4>
+ <style>
+  :host { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
+ </style>
+</element>
+
+<element name=h5>
+ <style>
+  :host { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
+ </style>
+</element>
+
+<element name=h6>
+ <style>
+  :host { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
+ </style>
+</element>
+
+<element name=b>
+ <style>
+  :host { font-weight: bold; }
+ </style>
+</element>
+
+<element name=data>
+ <script>
+  module.currentScript.parentNode.setPrototype({
+    get value () {
+      return this.getAttribute('value');
+    },
+    set value (newValue) {
+      this.setAttribute('value', newValue);
+    },
+  });
+ </script>
+</element>
+
+<element name=progress>
+ <template>
+  <div> ... </div>
+ </template>
+ <script>
+  module.currentScript.parentNode.setPrototype({
+    ...
+  });
+ </script>
+</element>
+
+<element name=details>
+ <style>
+  :host { display: block; }
+  .outer { border: solid; }
+  .header { display: inline; }
+  .summary { display: inline; }
+ </style>
+ <template>
+  <div class="outer">
+   <div class="header">
+    <div class="button">OPEN</div>
+    <div class="summary"><content select="summary"/></div>
+   </div>
+   <div class="contents">
+    <content/>
+   </div>
+  </div>
+ </template>
+ <script>
+  module.currentScript.parentNode.setPrototype({
+    init: function () {
+      
+    },
+    open() {
+      
+    }
+  });
+ </script>
+</element>
diff --git a/examples/htmlish/samples/intro.sky b/examples/htmlish/samples/intro.sky
new file mode 100644
index 0000000000..c200e2d831
--- /dev/null
+++ b/examples/htmlish/samples/intro.sky
@@ -0,0 +1,11 @@
+#!mojo mojo:sky
+<import src="../framework/htmlish.sky"/>
+<html>
+ <head>
+  <title>Welcome to Sky</title>
+ </head>
+ <body>
+  <h1>Introduction</h1>
+  <p>Hello world.</p>
+ </body>
+</html>