Remove root property in favor of container as 2nd argument. Close #410.

docs/hydration.md

@@ -18,4 +18,4 @@ Hyperapp works transparently with SSR and pre-rendered HTML, enabling SEO optimi
 </html>
 ```
 
-Then instead of throwing away the server-rendered markdown, we'll walk through your DOM tree and turn nodes into an interactive application. The default [root](/docs/root.md) is `document.body`, but you can specify another if you have multiple apps on the same page.
+Then instead of throwing away the server-rendered markdown, we'll turn your DOM nodes into an interactive application.

src/app.js

@@ -1,10 +1,9 @@
 import { h } from "./h"
 
-export function app(props) {
+export function app(props, container) {
+  var root = (container = container || document.body).children[0]
+  var node = elementToNode(root, [].map)
   var callbacks = []
-  var root = props.root || document.body
-  var element = root.children[0]
-  var node = elementToNode(element, [].map)
   var skipRender
   var globalState
   var globalActions
@@ -21,9 +20,9 @@ export function app(props) {
 
   function render() {
     flush(
-      (element = patch(
+      (root = patch(
+        container,
         root,
-        element,
         node,
         (node = props.view(globalState, globalActions)),
         (skipRender = !skipRender)

test/container.test.js

@@ -0,0 +1,99 @@
+import { h, app } from "../src"
+
+window.requestAnimationFrame = setTimeout
+
+beforeEach(() => {
+  document.body.innerHTML = ""
+})
+
+test("container", done => {
+  document.body.innerHTML = "<main></main>"
+  app(
+    {
+      view: state =>
+        h(
+          "div",
+          {
+            oncreate() {
+              expect(document.body.innerHTML).toBe("<main><div>foo</div></main>")
+              done()
+            }
+          },
+          "foo"
+        )
+    },
+    document.body.firstChild
+  )
+})
+
+test("nested container", done => {
+  document.body.innerHTML = "<main><section></section><div></div></main>"
+
+  app(
+    {
+      view: state =>
+        h(
+          "p",
+          {
+            oncreate() {
+              expect(document.body.innerHTML).toBe(
+                `<main><section></section><div><p>foo</p></div></main>`
+              )
+              done()
+            }
+          },
+          "foo"
+        )
+    },
+    document.body.firstChild.lastChild
+  )
+})
+
+test("container with mutated host", done => {
+  document.body.innerHTML = "<main><div></div></main>"
+
+  const host = document.body.firstChild
+  const container = host.firstChild
+
+  app(
+    {
+      view: (state, actions) =>
+        h(
+          "p",
+          {
+            oncreate() {
+              expect(document.body.innerHTML).toBe(
+                `<main><div><p>foo</p></div></main>`
+              )
+
+              host.insertBefore(
+                document.createElement("header"),
+                host.firstChild
+              )
+              host.appendChild(document.createElement("footer"))
+
+              actions.bar()
+            },
+            onupdate() {
+              expect(document.body.innerHTML).toBe(
+                `<main><header></header><div><p>bar</p></div><footer></footer></main>`
+              )
+              done()
+            }
+          },
+          state.value
+        ),
+      state: {
+        value: "foo"
+      },
+      actions: {
+        bar(state) {
+          return {
+            value: "bar"
+          }
+        }
+      }
+    },
+    container
+  )
+})

test/dom.test.js

@@ -789,7 +789,6 @@ test("event bubling", done => {
 function testTreeSegue(name, trees) {
   test(name, done => {
     app({
-      root: document.body,
       view: (state, actions) =>
         h(
           "main",

test/hydration.test.js

@@ -7,36 +7,38 @@ beforeEach(() => {
 })
 
 testHydration(
-  "hydrate without root",
+  "hydrate without container",
   `<main><p>foo</p></main>`,
   [h("p", {}, "foo")],
   null
 )
 
 testHydration(
-  "hydrate with root",
+  "hydrate with container",
   `<div id="app"><main><p>foo</p></main></div>`,
   [h("p", {}, "foo")],
   "app"
 )
 
-function testHydration(name, ssrBody, children, withRoot) {
+function testHydration(name, ssrBody, children, container) {
   test(name, done => {
     document.body.innerHTML = ssrBody
 
-    app({
-      root: withRoot && document.getElementById(withRoot),
-      view: state =>
-        h(
-          "main",
-          {
-            onupdate() {
-              expect(document.body.innerHTML).toBe(ssrBody)
-              done()
-            }
-          },
-          children
-        )
-    })
+    app(
+      {
+        view: state =>
+          h(
+            "main",
+            {
+              onupdate() {
+                expect(document.body.innerHTML).toBe(ssrBody)
+                done()
+              }
+            },
+            children
+          )
+      },
+      container && document.getElementById(container)
+    )
   })
 }