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
 

index.js

@@ -87,7 +87,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 +111,23 @@ class Tonic extends window.HTMLElement {
     }
   }
 
-  _set (target, content = '') {
+  async _set (target, render, text = '') {
+    const name = render && render.constructor.name
+    let content = ''
+
+    if (name === 'AsyncFunction') {
+      content = await render.call(this) || ''
+    } else if (name === 'AsyncGeneratorFunction') {
+      for await (const value of render.call(this)) {
+        this._set(target, null, value)
+      }
+      return
+    } else if (name === 'Function') {
+      content = render.call(this) || ''
+    } else {
+      content = text
+    }
+
     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 +240,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()
   }