Implicits

Attributes

Example:

The following code creates a React virtual DOM tree of a spinner. With the help of BindingReactToReact.Implicits, it can use states stored in Binding.Vars:

 import com.thoughtworks.binding.Binding
 import com.thoughtworks.binding.Binding.Var
 import com.yang_bo.BindingReactToReact.Implicits._
 import slinky.web.html._
 def spinner(currentNumber: Var[Int]) = {
   span(
     button(id := "minus", onClick := { e => currentNumber.value -= 1 })(
       "-"
     ),
     // With the help of `BindingReactToReact.Implicits`,
     // a `Binding` block can be used as a React element
     Binding {
       // `.bind` is allowed in the Binding block
       label(currentNumber.bind.toString)
     },
     button(id := "plus", onClick := { e => currentNumber.value += 1 })(
       "+"
     ),
   )
 }

The virtual DOM can be inserted into a html"..." interpolation with the help of ReactToBindingHtml.Implicits:

 import com.yang_bo.ReactToBindingHtml.Implicits.*
 import com.yang_bo.html.*
 val currentNumber = Var(50)
 def bindingHtmlRoot = html"""<fieldset>
   <legend>I am an `html"..."` interpolation that contains a React component</legend>
   ${spinner(currentNumber)}
 </fieldset>"""

Then, the html"..." interpolation can be rendered into the html document,

 import slinky.web.ReactDOM
 import slinky.testrenderer.TestRenderer
 import org.scalajs.dom.*
 TestRenderer.act { () =>
   render(document.body, bindingHtmlRoot)
 }
 currentNumber.value should be(50)
 document.body.innerHTML should be(
   """<fieldset>
   <legend>I am an `html"..."` interpolation that contains a React component</legend>
   <span><span><button id="minus">-</button><label>50</label><button id="plus">+</button></span></span>
   </fieldset>"""
 )

and it can respond to UI events

 TestRenderer.act { () =>
   document
     .getElementById("minus")
     .dispatchEvent(
       new MouseEvent("click", new MouseEventInit {
         bubbles = true
         cancelable = true
       })
     )
 }
 currentNumber.value should be(49)
 document.body.innerHTML should be(
   """<fieldset>
   <legend>I am an `html"..."` interpolation that contains a React component</legend>
   <span><span><button id="minus">-</button><label>49</label><button id="plus">+</button></span></span>
   </fieldset>"""
 )

Source:

ReactToBindingHtml.scala