Fix Blink, allow strings to be rendered as children of nodes/scopes.

Author: twavv

packages/webio/dist/blink.bundle.js

@@ -11,6 +11,7 @@
   "dependencies": {
     "@babel/core": "^7.1.2",
     "@babel/polyfill": "^7.0.0",
+    "@babel/runtime": "^7.1.2",
     "@types/debug": "0.0.30",
     "debug": "^4.0.1"
   },

packages/webio/dist/blink.bundle.js.map

@@ -80,7 +80,7 @@ export interface DomNodeData extends WebIONodeDataBase {
 
 class WebIODomNode extends WebIONode {
   readonly element: WebIODomElement;
-  children: Array<WebIOScope | WebIODomNode>;
+  children: Array<WebIOScope | WebIODomNode | string>;
   private eventListeners: {[eventType: string]: EventListenerOrEventListenerObject | undefined} = {};
 
   private static createElement(data: DomNodeData) {
@@ -102,11 +102,18 @@ class WebIODomNode extends WebIONode {
     this.applyProps(nodeData.props);
 
     // Create children and append to this node's element.
-    this.children = nodeData.children.map((nodeData) => (
-      createNode(nodeData, {webIO: this.webIO, scope: this.scope})
-    ));
+    this.children = nodeData.children.map((nodeData) => {
+      if (typeof nodeData === "string") {
+        return nodeData;
+      }
+      return createNode(nodeData, {webIO: this.webIO, scope: this.scope})
+    });
     for (const child of this.children) {
-      this.element.appendChild(child.element);
+      if (typeof child === "string") {
+        this.element.appendChild(document.createTextNode(child));
+      } else {
+        this.element.appendChild(child.element);
+      }
     }
   }
 

packages/webio/dist/mux.bundle.js

@@ -36,7 +36,7 @@ export const enum WebIONodeType {
 export interface WebIONodeDataBase {
   type: "node";
   nodeType: WebIONodeType;
-  children: WebIONodeData[];
+  children: Array<WebIONodeData | string>;
 }
 
 export interface WebIONodeParams {
@@ -53,7 +53,7 @@ export interface WebIONodeParams {
  */
 abstract class WebIONode {
   abstract readonly element: WebIODomElement;
-  abstract children: Array<WebIOScope | WebIODomNode>;
+  abstract children: Array<WebIOScope | WebIODomNode | string>;
   readonly scope?: WebIOScope;
   readonly webIO: WebIO;
 

packages/webio/dist/mux.bundle.js.map

@@ -77,7 +77,7 @@ class WebIOScope extends WebIONode {
 
   readonly id: string;
   readonly element: HTMLDivElement;
-  children: Array<WebIOScope | WebIODomNode>;
+  children: Array<WebIOScope | WebIODomNode | string>;
   handlers: ScopeListeners;
   observables: {[observableName: string]: WebIOObservable};
   promises: ScopePromises;
@@ -130,11 +130,18 @@ class WebIOScope extends WebIONode {
     // this.promises = {importsLoaded, connected};
 
     // Create children and append to this node's element.
-    this.children = scopeData.children.map((nodeData) => (
-      createNode(nodeData, {webIO: this.webIO, scope: this})
-    ));
+    this.children = scopeData.children.map((nodeData) => {
+      if (typeof nodeData === "string") {
+        return nodeData;
+      }
+      return createNode(nodeData, {webIO: this.webIO, scope: this})
+    });
     for (const child of this.children) {
-      this.element.appendChild(child.element);
+      if (typeof child === "string") {
+        this.element.appendChild(document.createTextNode(child));
+      } else {
+        this.element.appendChild(child.element);
+      }
     }
 
     this.setupScope();

packages/webio/package-lock.json

@@ -101,11 +101,15 @@ class WebIO {
    * @param nodeData - The data associated with the WebIO node.
    */
   mount(element: WebIODomElement, nodeData: WebIONodeData) {
+    if (!element) {
+      console.error("WebIO cannot mount node into element.", {element, nodeData});
+      throw new Error(`WebIO cannot mount node into element.`);
+    }
     const node = createNode(nodeData, {webIO: this});
     if (!element.parentElement) {
       throw new Error("Cannot mount WebIO node into HTMLElement that isn't mounted in DOM.")
     }
-    element.parentElement!.replaceChild(node.element, element);
+    element.parentElement.replaceChild(node.element, element);
   }
 
 }