Repository files navigation

This repository includes adapters forReact /Binding.scala /html.scala interoperability.

The rendering process in React components is unpredictable, resulting in unnecessary reevaluation and, even worse, unexpected reevaluation of side effects, if any. Precise data-binding inBinding.scala is a fast and predictable alternative to React's repeatedly re-rendering approach.

However, currently there are more third-party components in the React ecosystem than Binding.scala. It would be nice if a web developer could reuse React components while taking advantage of Binding.scala's precise data-binding. This repository includes the following adapters for reusing React components in Binding.scala + html.scala web apps:

• ReactToBindingHtml - an adapter for inserting React virtual DOM into an@html literal or anhtml"..." interpolation.
• BindingHtmlToReact - an adapter for inserting an@html literal or anhtml"..." interpolation into React virtual DOM.
• BindingReactToReact - an adapter for usingBinding.scala's.bind data-binding in React virtual DOM.

With the help of the adapters, you will be able to reuse existing React components while getting rid of React hooks orsetState by managing your app's states in Binding.scala.

// build.sbtlibraryDependencies++=Seq("com.yang-bo"%%%"html"% (if (scalaBinaryVersion.value=="3")"3+"else"2+"),"com.yang-bo"%%%"bindingreacttoreact"%"1+","com.yang-bo"%%%"reacttobindinghtml"%"1+","com.yang-bo"%%%"bindinghtmltoreact"%"1+",)

The following example demonstrates how to use React components withhtml.scala's@html literal in Scala 2

importcom.thoughtworks.binding.Bindingimportcom.thoughtworks.binding.Binding._importcom.yang_bo.ReactToBindingHtml.Implicits._importcom.yang_bo.BindingHtmlToReact.Implicits._importcom.yang_bo.BindingReactToReact.Implicits._importorg.scalajs.dom._importorg.lrng.binding.htmlimportslinky.web._importslinky.web.html._importslinky.core.facade._@htmldefspinner(currentNumber:Var[Int]):ReactElement= {// virtual DOM span element  span(// real DOM button element<button      id="minus"      onclick={ (event:MouseEvent)=> currentNumber.value-=1 }>-</button>,// virtual DOM label element with Binding.scala's `.bind` magicBinding {      label(currentNumber.bind.toString)    },// virtual DOM button element    button(      id:="plus",      onClick:= { (event:Any)=> currentNumber.value+=1 }    )("+"    )  )}valcurrentNumber=Var(50)@htmlvalrootView= {// real DOM fieldset element  <fieldset>    <legend>I am an `@html` literal that contains aReact component    </legend>    { spinner(currentNumber) }  </fieldset>}html.render(documet.body, rootView)

For Scala 3 users, usehtml.scala'shtml"..." interpolation instead, as shown below:

importcom.thoughtworks.binding.Bindingimportcom.thoughtworks.binding.Binding._importcom.yang_bo.ReactToBindingHtml.Implicits._importcom.yang_bo.BindingHtmlToReact.Implicits._importcom.yang_bo.BindingReactToReact.Implicits._importcom.yang_bo.html._importorg.scalajs.dom._importslinky.web._importslinky.web.html._importslinky.core.facade._defspinner(currentNumber:Var[Int]):ReactElement= {// virtual DOM span element  span(// real DOM button elementhtml"""<button      onclick=${ (event:MouseEvent)=> currentNumber.value-=1 }    >-</button>""",// virtual DOM label element with Binding.scala's `.bind` magicBinding {      label(currentNumber.bind.toString)    },// virtual DOM button element    button(      id:="plus",      onClick:= { (event:Any)=> currentNumber.value+=1 }    )("+"    )  )}valcurrentNumber=Var(50)valrootView= {// real DOM fieldset elementhtml"""<fieldset>    <legend>      I am an html interpolation that contains a React component    </legend>${ spinner(currentNumber) }  </fieldset>"""}render(documet.body, rootView)

Even though adapters from this repository provide the flexibility to choose to create UI in either React or real DOM, to minimize the cost due to React rerendering,BindingReactToReact users are recommended to neither define any React components nor use any React hooks. Instead, to take the advantage of Binding.scala's precise data-binding, manage the application states in Binding.scala, and let theBindingReactToReact React components be instantiated implicitly, when using existing React components.

Because React virtual DOM does not support partial update provided by Binding.scala'sBindingSeq, create your own HTML UI as@html literals orhtml"..." interpolations, if the overhead due to React's virtual DOM differentiation matters.

Adapters from this repository work with React types defined inSlinky by default. Other sources of React components need to be converted to Slinky types first.

• React components defined inscalajs-react can be converted into Slinky types viatoSlinky, in order to use them in Binding.scala apps with the help of adapters from this repository.
• React components defined in TypeScript can be converted to Slinky types viaScalablyTyped withFlavour.Slinky, in order to use them in Binding.scala apps with the help of adapters from this repository.

• API Documentation
• Binding.scala
• html.scala
• Slinky
• ScalablyTyped
• scalajs-react