async generators wip

API.md

@@ -17,10 +17,13 @@
 | <code>reRender(Object &#124; Function)</code> | Set the properties of a component instance. Can also take a function which will receive the current props as an argument. |
 | `getProps()` | Get the properties of a component instance. |
 | <code>setState(Object &#124; Function)</code> | Set the state of a component instance. Can also take a function which will receive the current props as an argument. |
+| html\`...\` | Interpolated HTML string (use as a [tagged template][2]). |
+
+## INSTANCE METHODS IMPLEMENTED BY THE DEVELOPER
+
 | `stylesheet()` | Should return a string of css to be lazily added to a `style` tag in the head. |
 | `styles()` | Should return an object that represents inline-styles to be applied to the component. Styles are applied by adding a keys from the object to the `styles` attribute of an html tag in the render function, for example `styles="key1 key2"`. Each object's key-value pair are added to the element's style object. |
-| `render()` | Should return HTML or nodes to be parsed or a dom node that will overwrite. There is usually no need to call this directly, prefer `componentInstance.reRender({ ... })`. |
-| html\`...\` | Tidy up an HTML string (use as a [tagged template][2]). |
+| `render()` | Required, should return HTML or nodes to be parsed or a dom node that will overwrite. There is usually no need to call this directly, prefer `foo.reRender({ ... })`. This function can be async or an async generator. |
 
 ## INSTANCE PROPERTIES
 

docker-compose.yml

@@ -0,0 +1,16 @@
+version: "2"
+services:
+  node:
+    container_name: tonic
+    image: "node:12"
+    user: "node"
+    stdin_open: true
+    tty: true
+    working_dir: /home/node/app
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - ./:/home/node/app
+    expose:
+      - "8080"
+    command: "npm test"

index.js

@@ -1,3 +1,6 @@
+const { constructor: AsyncFunction } = async function () {}
+const { constructor: AsyncFunctionGenerator } = async function * () {}
+
 class Tonic extends window.HTMLElement {
   constructor () {
     super()
@@ -87,7 +90,7 @@ class Tonic extends window.HTMLElement {
 
   reRender (o = this.props) {
     this.props = Tonic.sanitize(typeof o === 'function' ? o(this.props) : o)
-    this._set(this, this.render())
+    this._set(this, this.render)
 
     if (this.updated) {
       const oldProps = JSON.parse(JSON.stringify(this.props))
@@ -111,7 +114,21 @@ class Tonic extends window.HTMLElement {
     }
   }
 
-  _set (target, content = '') {
+  async _set (target, render, content = '') {
+    if (render instanceof AsyncFunction) {
+      content = await render.call(this) || ''
+    } else if (render instanceof AsyncFunctionGenerator) {
+      const itr = render.call(this)
+      while (true) {
+        const { value, done } = await itr.next()
+        this._set(target, null, value)
+        if (done) break
+      }
+      return
+    } else if (render instanceof Function) {
+      content = render.call(this) || ''
+    }
+
     for (const node of target.querySelectorAll(Tonic._tags)) {
       if (Tonic._refs.findIndex(ref => ref === node) === -1) continue
       Tonic._states[node.id] = node.getState()
@@ -224,7 +241,7 @@ class Tonic extends window.HTMLElement {
     this._id = this._id || Tonic._createId()
 
     this.willConnect && this.willConnect()
-    this._set(this, this.render())
+    this._set(this, this.render)
     this.connected && this.connected()
   }