Scala.js UI
Reaktive Scala.js-Oberflächen mit SSR und Hydration im selben Komponentenmodell.
THE COMPONENT MODEL
SCALA / RENDER / HYDRATE
1.0.7Aktuelle Version
Scala.jsLäuft auf
Scala 3.3Sprachversion
MITLizenz
Installation
Jedes Modul wird einzeln veröffentlicht. Binde den Kern und die Module ein, die deine Anwendung nutzt.
sbt
enablePlugins(ScalaJSPlugin)
// sbt 2: %% adds the Scala.js suffix itself (sbt 1: %%%)
libraryDependencies ++= Seq(
"com.anjunar" %% "scalajs-ui-core" % "1.0.7", // components, DSL, state, SSR
"com.anjunar" %% "scalajs-ui-router" % "1.0.7", // routes, loaders, locale prefixes
"com.anjunar" %% "scalajs-ui-controls" % "1.0.7", // tabs, carousel, tables, grids
"com.anjunar" %% "scalajs-ui-forms" % "1.0.7", // typed forms and inputs
"com.anjunar" %% "scalajs-ui-viewport" % "1.0.7", // windows, overlays, notifications
"com.anjunar" %% "scalajs-ui-editor" % "1.0.7" // Markdown editor
)
Mit funktionierendem Code beginnen
Eine Property steuert den Text und das Ereignis aktualisiert denselben Zustand nach der Hydration.
Count: 0
scala
import ui.core.dsl.EventDsl.onClick
import ui.core.layout.Button.button
import ui.core.layout.TextComponent.text
import ui.core.layout.VBox.vbox
import ui.core.state.Property
val count = Property(0)
vbox {
text(count.map(n => s"Count: $n")) {}
button("Increment") {
onClick(_ => count.set(count.get + 1))
}
}
01 / Rendern
Erst Server, dann Browser
Jede Seite entsteht als vollständiges HTML auf dem Server. Der Browser hydriert denselben Komponentenbaum, statt ihn neu aufzubauen.
02 / Komponieren
Eine DSL für Struktur und Verhalten
Elemente, Attribute, Ereignisse und Kinder sind Scala-Code. Es gibt keine Template-Sprache und keine DOM-Handarbeit.
03 / Reagieren
Zustand mit Lebenszyklus
Properties steuern die Ansicht direkt. Abos, Timer und Fenster gehören zu einer Komponente und enden mit ihr.
Inhalt
Eine Seite pro Baustein
Jede Seite zeigt den Baustein live, erklärt, wann er passt, und endet mit dem Code.
KompositionTabsPanel-Lebenszyklus und TastaturauswahlKarussellEndlosschleifen und an den Lebenszyklus gebundenes Autoplay
FormulareFormulareControl-Registrierung und KontextBildzuschnittUpload, Zuschnitt und Thumbnail-BindungComboBoxTypisierte Auswahl und stabile Identität