This project derive UI Form for laminar with magnolia.
See Documentation.
For the very impatient, here is a live demo.
// With raw Laminar widgets (html only)
libraryDependencies += "dev.cheleb" %%% "laminar-form-derivation-ui" % "0.11.0"
// With UI5 Web Components
libraryDependencies += "dev.cheleb" %%% "laminar-form-derivation-ui5" % "0.11.0"
Client side is reloaded in dev mode with vite, server side is built with sbt
Client code is in example/client
Just open the project with vscode and enjoy the magic
code .
As soon as you open the project, you will be prompted to import the build, click on the "Import build" button.
Then wait a few seconds for the build to import ...
You will have the following tasks:
- sbt fastLink client
- vite dev hot reloading
With vite hot reload
- Teminal 1
sbt clean
DEV=1 sbt "~client/fastLinkJS"
- Terminal 2
cd example/client
npm install
npm run dev
Open http://localhost:3000, changes are hot reloaded in the browser when you save the HelloWorld.scala.
With a ZIO http server (work in progress)
sbt server/run
With server restart on change
sbt "~server/reStart"
Reload the page to see the changes...
package demo
import dev.cheleb.scalamigen.*
import dev.cheleb.scalamigen.Form.given
import org.scalajs.dom
import com.raquo.laminar.api.L.*
// Define some models
case class Person(
name: String,
fav: Pet,
pet: Option[Pet],
email: Option[String],
age: Int
)
case class Pet(name: String, age: Int, House: House, size: Option[Int])
case class House(capacity: Int)
// Provide default for optional
given Defaultable[Pet] with
def default = Pet("No pet", 0, House(0), None)
// Instance your model
val agnes =
Person(
"Vlad",
Pet("Batman", 666, House(2), Some(169)),
Some(Pet("Wolfy", 12, House(1), Some(42))),
Some("[email protected]"),
48
)
val itemVar = Var(agnes)
object App extends App {
val myApp =
div(
child <-- itemVar.signal.map { item =>
div(
s"$item"
)
},
Form.renderVar(itemVar)
)
val containerNode = dom.document.getElementById("root")
render(containerNode, myApp)
}
Renders the following form:
More info in the example