Skip to main content
Version: 2.x

How to Interop with JavaScript?

Include ZIO in your Scala.js project by adding the following to your build.sbt:

scalaJSUseMainModuleInitializer := true
resolvers += Resolver.sonatypeRepo("snapshots")
libraryDependencies += "dev.zio" %%% "zio" % "2.1.13+47-95203838-SNAPSHOT"

Example​

Your main function can extend ZIOAppDefault as follows.

This example uses scala-js-dom to access the DOM; to run the example you will need to add that library as a dependency to your build.sbt.

It assumes you have a <div id="app"> somewhere in your HTML, into which the ZIO output is written.

import java.util.concurrent.TimeUnit
import org.scalajs.dom.{document,Element}
import zio._
import zio.Clock._

object Main extends ZIOAppDefault {

override def run = {
// The node into which we write our ZIO program output
val node: Element = dom.document.querySelector("#app")
for {
_ <- Console.printLine("Starting progress bar demo.") // Outputs on browser console log.
_ <- IO.succeed(node.appendChild(target)) // "node" might provided in this page by mdoc.
target <- IO.succeed(document.createElement("pre"))
_ <- update(target).repeat(Schedule.spaced(1.seconds))
} yield ExitCode.success
}

def update(target: Element) = {
for {
time <- currentTime(TimeUnit.SECONDS)
output <- ZIO.succeed(progress((time % 11).toInt, 10))
_ <- ZIO.succeed(target.innerHTML = output)
} yield ()
}

def progress(tick: Int, size: Int) = {
val bar_length = tick
val empty_length = size - tick
val bar = "#" * bar_length + " " * empty_length
s"$bar $bar_length%"
}

}