Overview

Preactile

Preactile is a Scala.js facade over Preact for a page that is already Preact, or that has to embed in a React 18 or Preact tree. It is not Ascent, the effect-native UI with no virtual DOM.

Live demo

A StatefulComponent mounted into this page. The buttons call setState.

import preactile.*

object Counter extends StatefulComponent[Unit, Int]:
  override def initialState(props: Unit): Int = 0

  def render(props: Unit, state: Int, instance: Instance): VNode =
    E.div(
      A.`class`("counter-demo"),
      E.button(A.onClick(_ => instance.setState(state - 1)), "-"),
      E.span(" ", E.strong(state.toString), " "),
      E.button(A.onClick(_ => instance.setState(state + 1)), "+"),
    )
end Counter

Install

These are Scala.js artifacts. On a ScalaJSPlugin project, %% is the coordinate: sbt 2 appends _sjs1.

libraryDependencies += "rocks.earlyeffect" %% "preactile" % "0.0.2"

For conduit component support:

libraryDependencies += "rocks.earlyeffect" %% "preactile-conduit" % "0.0.2"

Element DSL

The counter is a StatefulComponent. It builds its DOM with E, which is this object. Component takes a type parameter, so the cite is Elements rather than that trait.

object Elements
    extends Sectioning
    with TextContent
    with Forms
    with InlineText
    with ImagesAndMultimedia
    with EmbeddedContent
    with Scripting
    with DemarcatingEdits
    with TableContent
    with InteractiveElements
    with WebComponents {}