airframe-rx-html: Fix Rx node rendering (#912)

* airframe-rx-html: Fix Rx node rendering

* airframe-rx-html: RxElement.add

Author: xerial

airframe-rx-widget/src/main/scala/wvlet/airframe/rx/widget/ui/bootstrap/NavBar.scala

@@ -14,7 +14,7 @@
 package wvlet.airframe.rx.widget.ui.bootstrap
 
 import wvlet.airframe.rx.html.all._
-import wvlet.airframe.rx.html.{RxElement, RxComponent}
+import wvlet.airframe.rx.html.{RxComponent, RxElement}
 
 /**
   *
@@ -40,7 +40,8 @@ case class NavBar(title: String, iconFile: String = "img/favicon.ico", iconWidth
         aria.expanded  -> "false",
         aria.label     -> "Toggle navigation",
         span(cls -> "navbar-toggler-icon")
-      ) { content }
+      ),
+      content
     )
 }
 

airframe-rx-widget/src/test/scala/wvlet/airframe/rx/widget/RxWidgetTest.scala

@@ -58,9 +58,10 @@ class RxWidgetTest extends AirSpec {
   }
 
   test("render buttons with click action") {
-    val elem = Button.primary("my button")(onclick { () =>
-      debug("clicked")
-    })
+    val elem = Button
+      .primary("my button").add(onclick { () =>
+        debug("clicked")
+      })
     val html = render(elem)
     html.contains("btn btn-primary") shouldBe true
   }
@@ -99,4 +100,17 @@ class RxWidgetTest extends AirSpec {
     node.innerHTML shouldBe """<div><ul><li>Home</li><li class="active">Blog</li></ul></div>"""
   }
 
+  case class Label(id: String, name: String)
+
+  test("Render Rx as top-level node") {
+    val currentPage = Rx.variable("home")
+    val d = currentPage.map { page =>
+      p(s"page: ${page}")
+    }
+
+    val node = dom.document.createElement("div")
+    renderTo(node, d)
+    node.innerHTML shouldBe "<p>page: home</p>"
+  }
+
 }

airframe-rx/.js/src/main/scala/wvlet/airframe/rx/html/DOMRenderer.scala

@@ -57,15 +57,15 @@ object DOMRenderer extends LogSupport {
         case d: dom.Node =>
           (d, Cancelable.empty)
         case other =>
-          throw new IllegalArgumentException(s"unsupported top level element: ${other}")
+          throw new IllegalArgumentException(s"unsupported top level element: ${other}. Use renderTo")
       }
     }
     traverse(e)
   }
 
   private def newTextNode(s: String): dom.Text = dom.document.createTextNode(s)
 
-  def renderTo(node: dom.Node, htmlNode: HtmlNode): Cancelable = {
+  def renderTo(node: dom.Node, htmlNode: HtmlNode, modifier: dom.Node => dom.Node = identity): Cancelable = {
 
     def traverse(v: Any, anchor: Option[dom.Node]): Cancelable = {
       v match {
@@ -95,8 +95,9 @@ object DOMRenderer extends LogSupport {
         case e: Embedded =>
           traverse(e.v, anchor)
         case rx: RxElement =>
-          val (elem, c1) = render(rx.render)
-          val c2         = rx.traverseModifiers(m => renderTo(elem, m))
+          val c1   = renderTo(node, rx.render)
+          val elem = node.lastChild
+          val c2   = rx.traverseModifiers(m => renderTo(elem, m))
           node.mountHere(elem, anchor)
           Cancelable.merge(c1, c2)
         case s: String =>

airframe-rx/src/main/scala/wvlet/airframe/rx/html/RxElement.scala

@@ -35,9 +35,10 @@ abstract class RxElement(val modifiers: List[Seq[HtmlNode]] = List.empty) extend
     }
   }
 
-  def addModifier(xs: HtmlNode*): RxElement = new RxElement(xs :: modifiers) {
+  def add(xs: HtmlNode*): RxElement = new RxElement(xs :: modifiers) {
     override def render = self.render
   }
+  def addModifier(xs: HtmlNode*): RxElement = add(xs: _*)
 
   private[html] def traverseModifiers(f: HtmlNode => Cancelable): Cancelable = {
     val cancelables = for (g <- modifiers.reverse; m <- g) yield {

airframe-rx/src/main/scala/wvlet/airframe/rx/html/package.scala

@@ -53,8 +53,9 @@ package object html {
 
   class HtmlAttributeOf(name: String, namespace: Namespace = Namespace.xhtml) {
     def apply[V: EmbeddableAttribute](v: V): HtmlNode = HtmlAttribute(name, v, namespace)
-    def ->[V: EmbeddableAttribute](v: V): HtmlNode    = HtmlAttribute(name, v, namespace)
-    def +=[V: EmbeddableAttribute](v: V): HtmlNode    = HtmlAttribute(name, v, namespace, append = true)
+    def ->[V: EmbeddableAttribute](v: V): HtmlNode    = apply(v)
+    def add[V: EmbeddableAttribute](v: V): HtmlNode   = HtmlAttribute(name, v, namespace, append = true)
+    def +=[V: EmbeddableAttribute](v: V): HtmlNode    = add(v)
     def noValue: HtmlNode                             = HtmlAttribute(name, true, namespace)
   }