Announcing Binding.scala 12.2 and html.scala 3.0, reactive web framework for Scala 3

Libraries
1

Hi, all,

Recently I released Binding.scala 12.2.0 and html.scala 3.0.2, to create reactive web GUI in Scala 3.

Getting Started

// build.sbt
libraryDependencies += "com.yang-bo" %%% "html" % "3.0.2"

// main.scala

import com.yang_bo.html.*
/**
 * Returns a bindable HTML DOM tree.
 *
 * The `html"""..."""` interpolation enables two magics:
 *  1. HTML literals to create DOM nodes
 *  2. `xxx.bind` syntax, which makes this DOM tree keep updated whenever `xxx` changes.
 */
def rootView = {
  val value = Var("")
  html"""<div>
    <input onchange=${ (event: Event) => event.currentTarget.asInstanceOf[HTMLInputElement].value }/>
    Your input value is ${ value.bind }
  </div>"""
}

/**
 * Renders a bindable HTML DOM node into the body of current web page.
 */
@JSExport def main(): Unit = {
  render(document.body, rootView)
}

Changes since html.scala 1.x and 2.x

Unlike html.scala 1.x and 2.x, which use Scala 2’s macro annotation to create HTML template, html.scala 3.x uses html interpolation like html"<div></div>". The syntax does not require XML any more. HTML 5 code like <input autofocus> is now valid.

The data-binding data structure Binding and BindingSeq remain the same API. Binding.scala 12.2 is now cross-compiled between Scala 2 and Scala 3.

Examples

See Binding.scala • TodoMVC for a complete static web app. This commit includes required changes from Scala 2 to Scala 3.

To create a new web app from scratch, All-in-One Scala.js Static Web Project Template is recommended. It is updated to use Scala 3, too.

5 Likes