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.27+65-4a14173e-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%"
  }

}