Add TagMod.toJs and ToJs.childrenAsVdomNodes

Author: japgolly

core/src/main/scala/japgolly/scalajs/react/vdom/Builder.scala

@@ -39,6 +39,17 @@ object Builder {
 
   // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
+  /**
+    * Raw JS values of:
+    * - className
+    * - props
+    * - styles
+    * - children
+    *
+    * Everything here is mutable.
+    *
+    * There are convenience methods to (mutably) add className and styles to props.
+    */
   trait ToJs extends Builder {
     // Exposing vars here is acceptable because:
     // 1. The contents are all mutable anyway and a defensive-copy cost isn't worth it
@@ -74,6 +85,20 @@ object Builder {
 
     def addStyleToProps(): Unit =
       nonEmptyStyles.foreach(setObjectKeyValue(props, "style", _))
+
+    def childrenAsVdomNodes: List[VdomNode] = {
+      import Implicits._
+      var i = children.length
+      var nodes = List.empty[VdomNode]
+      while (i > 0) {
+        i -= 1
+        nodes ::= children(i)
+      }
+      nodes
+    }
+
+    def nonEmptyChildrenAsVdomNodes: js.UndefOr[List[VdomNode]] =
+      if (children.length == 0) js.undefined else childrenAsVdomNodes
   }
 
   // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

core/src/main/scala/japgolly/scalajs/react/vdom/Implicits.scala

@@ -77,14 +77,16 @@ object ImplicitsForVdomNode {
 trait ImplicitsForVdomNode {
   import ImplicitsForVdomNode._
 
-  implicit def vdomNodeFromLong         (v: Long)         : VdomNode = VdomNode.cast(v.toString)
-  implicit def vdomNodeFromInt          (v: Int)          : VdomNode = VdomNode.cast(v)
-  implicit def vdomNodeFromShort        (v: Short)        : VdomNode = VdomNode.cast(v)
-  implicit def vdomNodeFromByte         (v: Byte)         : VdomNode = VdomNode.cast(v)
-  implicit def vdomNodeFromDouble       (v: Double)       : VdomNode = VdomNode.cast(v)
-  implicit def vdomNodeFromFloat        (v: Float)        : VdomNode = VdomNode.cast(v)
-  implicit def vdomNodeFromString       (v: String)       : VdomNode = VdomNode.cast(v)
-  implicit def vdomNodeFromPropsChildren(v: PropsChildren): VdomNode = VdomNode.cast(v.raw)
+  implicit def vdomNodeFromLong         (v: Long)             : VdomNode = VdomNode.cast(v.toString)
+  implicit def vdomNodeFromInt          (v: Int)              : VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromShort        (v: Short)            : VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromByte         (v: Byte)             : VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromDouble       (v: Double)           : VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromFloat        (v: Float)            : VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromString       (v: String)           : VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromReactNode    (v: raw.ReactNode)    : VdomNode = VdomNode(v)
+  implicit def vdomNodeFromReactNodeList(v: raw.ReactNodeList): VdomNode = VdomNode.cast(v)
+  implicit def vdomNodeFromPropsChildren(v: PropsChildren)    : VdomNode = VdomNode.cast(v.raw)
 
   implicit def vdomSeqExtForTO[A](as: TraversableOnce[A]) = new TraversableOnceExt[A](as)
   implicit def vdomSeqExtForSA[A](as: Array          [A]) = new TraversableOnceExt[A](as)

core/src/main/scala/japgolly/scalajs/react/vdom/TagMod.scala

@@ -24,6 +24,19 @@ trait TagMod {
 
   def apply(ms: TagMod*): TagMod =
     TagMod.Composite((Vector.newBuilder[TagMod] += this ++= ms).result())
+
+  /**
+    * Converts this VDOM and all its potential children into raw JS values.
+    *
+    * Meant for very advanced usage.
+    *
+    * Do not use this unless you know what you're doing (and you're doing something very funky)!
+    */
+  final def toJs: Builder.ToJs = {
+    val t = new Builder.ToJs {}
+    applyTo(t)
+    t
+  }
 }
 
 object TagMod {

doc/changelog/1.1.0.md

@@ -13,6 +13,9 @@
   * `vdom.Builder.ToVdomElement` - builds a `VdomElement` which was the previous default
   * `vdom.Builder.ToJs` - provides raw JS values like `props: js.Object` and more
 
+* `vdom.TagMod` now has a `.toJs` method which turns the VDOM tree into a bunch of raw JS values.
+  This is for advanced hackers only.
+
 * Opening links in new tabs using `target="_blank"` without `rel="noopener` is a
   [security risk and performance impediment](https://blog.dareboost.com/en/2017/03/target-blank-links-rel-noopener-performance-security/).
   Google's Lighthouse auditor [flags it](https://developers.google.com/web/tools/lighthouse/audits/noopener).

test/src/test/scala/japgolly/scalajs/react/core/vdom/VdomTest.scala

@@ -0,0 +1,25 @@
+package japgolly.scalajs.react.core.vdom
+
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.test.TestUtil._
+import japgolly.scalajs.react.vdom.html_<^._
+import utest._
+
+object VdomTest extends TestSuite {
+
+  val C = ScalaComponent.static("")(<.br)
+  val Span = ScalaComponent.builder[Unit]("").render_C(<.span(_)).build
+
+  override def tests = TestSuite {
+
+    'tagModToJs {
+      'childrenAsVdomNodes {
+        val vdom = TagMod("hehe", 123, <.em(456L), C())
+        val expect = "<span>hehe123<em>456</em><br/></span>"
+        assertRender(<.span(vdom), expect)
+        assertRender(Span(vdom.toJs.childrenAsVdomNodes: _*), expect)
+      }
+    }
+
+  }
+}