Lazy components

src/index.js

@@ -16,14 +16,12 @@ export function h(name, attributes /*, ...rest*/) {
     }
   }
 
-  return typeof name === "function"
-    ? name(attributes || {}, children)
-    : {
-        nodeName: name,
-        attributes: attributes || {},
-        children: children,
-        key: attributes && attributes.key
-      }
+  return {
+    nodeName: name,
+    attributes: attributes || {},
+    children: children,
+    key: attributes && attributes.key
+  }
 }
 
 export function app(state, actions, view, container) {
@@ -51,12 +49,23 @@ export function app(state, actions, view, container) {
     }
   }
 
+  function getVNode(node) {
+    return typeof node.nodeName === "function"
+      ? getVNode(node.nodeName(node.attributes, node.children))
+      : node
+  }
+
   function render() {
     renderLock = !renderLock
 
     var next = view(globalState, wiredActions)
     if (container && !renderLock) {
-      rootElement = patch(container, rootElement, oldNode, (oldNode = next))
+      rootElement = patch(
+        container,
+        rootElement,
+        oldNode,
+        (oldNode = getVNode(next))
+      )
       firstRender = false
     }
 
@@ -168,7 +177,9 @@ export function app(state, actions, view, container) {
       }
 
       for (var i = 0; i < node.children.length; i++) {
-        element.appendChild(createElement(node.children[i], isSVG))
+        element.appendChild(
+          createElement((node.children[i] = getVNode(node.children[i])), isSVG)
+        )
       }
 
       for (var name in node.attributes) {
@@ -262,7 +273,7 @@ export function app(state, actions, view, container) {
 
       while (j < node.children.length) {
         var oldChild = oldNode.children[i]
-        var newChild = node.children[j]
+        var newChild = (node.children[j] = getVNode(node.children[j]))
 
         var oldKey = getKey(oldChild)
         var newKey = getKey(newChild)

test/components.test.js

@@ -0,0 +1,60 @@
+import { h, app } from "../src"
+
+beforeEach(() => {
+  document.body.innerHTML = ""
+})
+
+test("components", done => {
+  const Component = (props, children) => h("div", props, children)
+
+  const view = () =>
+    h(
+      Component,
+      {
+        oncreate() {
+          expect(document.body.innerHTML).toBe("<div>foo<div>bar</div></div>")
+          done()
+        }
+      },
+      ["foo", h(Component, {}, "bar")]
+    )
+
+  app({}, {}, view, document.body)
+})
+
+test("nested components", done => {
+  const Child = (props, children) => h("div", props, children)
+  const Parent = (props, children) => h(Child, props, children)
+
+  const view = () =>
+    h(
+      Parent,
+      {
+        oncreate() {
+          expect(document.body.innerHTML).toBe("<div>foo</div>")
+          done()
+        }
+      },
+      ["foo"]
+    )
+
+  app({}, {}, view, document.body)
+})
+
+test("component with no props adds default props", done => {
+  const Component = ({ name = "world" }, children) =>
+    h(
+      "div",
+      {
+        oncreate() {
+          expect(document.body.innerHTML).toBe("<div>Hello world</div>")
+          done()
+        }
+      },
+      "Hello " + name
+    )
+
+  const view = () => h(Component)
+
+  app({}, {}, view, document.body)
+})

test/h.test.js

@@ -79,35 +79,12 @@ test("skip null and Boolean children", () => {
   expect(h("div", {}, null)).toEqual(expected)
 })
 
-test("components", () => {
-  const Component = (props, children) => h("div", props, children)
+test("component", () => {
+  const Component = () => h("div", {}, ["baz"])
 
   expect(h(Component, { id: "foo" }, "bar")).toEqual({
-    nodeName: "div",
+    nodeName: Component,
     attributes: { id: "foo" },
     children: ["bar"]
   })
-
-  expect(h(Component, { id: "foo" }, [h(Component, { id: "bar" })])).toEqual({
-    nodeName: "div",
-    attributes: { id: "foo" },
-    children: [
-      {
-        nodeName: "div",
-        attributes: { id: "bar" },
-        children: []
-      }
-    ]
-  })
-})
-
-test("component with no props adds default props", () => {
-  const Component = ({ name = "world" }, children) =>
-    h("div", {}, "Hello " + name)
-
-  expect(h(Component)).toEqual({
-    nodeName: "div",
-    attributes: {},
-    children: ["Hello world"]
-  })
 })