t-sasaki915 / typesafe-scalajs

MIT License GitHub

Typesafe Scala.js

typesafe-scalajs

Typesafe Scala.js

Try Example Code

docker build -t typesafe-scalajs-example .
docker run -p "8080:80" typesafe-scalajs-example

Usage

build.sbt

libraryDependencies ++= Seq(
  "net.st915" %%% "typesafe-scalajs-app" % "VERSION"
)

DOM DSL

import net.st915.typesafescalajs.dom.dsl.*

Create Element

val emptyParagraph = Paragraph()
val emptyDiv = Div()
val emptyButton = Button()

Create Element with attributes

val paragraphWithId =
  Paragraph(id := "text")
val divWithClassName =
  Div(className := "container")
val disabledButtonWithClickEvent =
  Button(onClick := (_ => IO(println("clicked"))), disabled)

Create Element with children

val paragraphWithTextNode =
  Paragraph {
    "Text"
  }
val divWithThreeChildren =
  Div(
    Div(className := "child"),
    Div(className := "child"),
    Div(className := "child")
  )
val buttonWithTextNode =
  Button {
    "Button"
  }

Create Element with attributes and children

val paragraphWithIdAndTextNode =
  Paragraph(id := "text") {
    "Text"
  }
val divWithClassNameAndThreeChildren =
  Div(className := "container")(
    Div(className := "child") {
      "Line 1"
    },
    Div(className := "child") {
      "Line 2"
    },
    Div(className := "child") {
      "Line 3"
    }
  )
val disabledButtonWithClickEventAndTextNode =
  Button(onClick := (_ => IO(println("???"))), disabled) {
    "Disabled Button"
  }

Create Head Element

val headWithTitle =
  Head {
    Title {
      "Page Title"
    }
  }

Create Body Element

val bodyWithThreeChildren =
  Body(
    Div(className := "child"),
    Div(className := "child"),
    Div(className := "child")
  )

Implicit Conversions

Implicit Conversion of String
Span(
  "ABC",
  Span {
    "DEF"
  }
)

This will be:

Span(
  TextNode("ABC"),
  Span {
    TextNode("DEF")
  }
)
Implicit Conversion of FlagAttribute (e.g. async disabled autoPlay)
Script(src := "aaa.js", async)
Button(id := "btn", disabled)
Audio(autoPlay)

This will be:

Script(src := "aaa.js", async := true)
Button(id := "btn", disabled := true)
Audio(autoPlay := true)
Implicit Conversion of AllowEmptyAttribute (e.g. sandbox)
IFrame(src := "aaa.html", sandbox)

This will be:

IFrame(src := "aaa.html", sandbox := Set())

App

HTMLApp

import cats.effect.IO
import net.st915.typesafescalajs.app.HTMLApp

object Main extends HTMLApp {

  import net.st915.typesafescalajs.dom.dsl.*

  override val head: Head = ???

  override val body: Body = ???

  override val beforeRender: IO[Unit] = IO(???) // optional
  
  override val afterRender: IO[Unit] = IO(???) // optional

}

HTMLIOApp

import cats.effect.IO
import net.st915.typesafescalajs.app.HTMLIOApp

object Main extends HTMLIOApp {

  import net.st915.typesafescalajs.dom.dsl.*

  override val headProgram: IO[Head] = IO(???)

  override val bodyProgram: IO[Body] = IO(???)
  
  override val beforeRender: IO[Unit] = IO(???) // optional

  override val afterRender: IO[Unit] = IO(???) // optional

}

Statistics

No Dependency

No Dependent