Skip to content

ptrdom/scalajs-vite

Repository files navigation

scalajs-vite

scalajs-vite is a module bundler for Scala.js projects that use npm packages: it bundles the .js files emitted by the Scala.js compiler with their npm dependencies into a single .js file using Vite.

sbt-scalajs-vite Scala version support

Getting started

Plugin should feel quite familiar to the users of well known scalajs-bundler, with the main difference being that there is no special handling of npmDependencies - they must be provided through package.json placed within vite directory in project's base.

Basic setup

  1. Setup project layout, following is a minimal example:

    src
      main
       scala
         example
           Main.scala # Scala.js entrypoint
    vite
      index.html # Vite entrypoint
      package.json # devDependencies must provide Vite package
    
  2. Add plugin to sbt project:

    addSbtPlugin("me.ptrdom" % "sbt-scalajs-vite" % scalaJSViteVersion)
  3. Enable plugin in build.sbt:

    enablePlugins(ScalaJSVitePlugin)
    
  4. Specify that Scala.js project is an application with an entrypoint:

    scalaJSUseMainModuleInitializer := true
    

    Such configuration would allow main.js bundle to be used in Vite entrypoint:

    <script type="module" src="/main.js"></script>
  5. Use sbt tasks to compile Scala.js code and run Vite:

    • For development-like vite dev:
      • fastLinkJS/startVite;~fastLinkJS/viteCompile;fastLinkJS/stopVite
    • For production-like vite preview:
      • fullLinkJS/startPreview;~fullLinkJS/viteBuild;fullLinkJS/stopPreview

Running fullLinkJS/viteBuild produces a production-ready vite build in /target/${scalaVersion}/vite/main/dist directory.

All files in vite directory are copied to Vite working directory, so any other web resources and relevant configuration files can be put there.

See sbt-scalajs-vite/src/sbt-test/sbt-scalajs-vite/basic-project directory for basic example project.

Integrating with sbt-web

  1. Add plugin to sbt project:

    addSbtPlugin("me.ptrdom" % "sbt-web-scalajs-vite" % scalaJSViteVersion)
  2. Enable plugin in build.sbt:

    lazy val server = project
      .settings(
        scalaJSProjects := Seq(client),
        pipelineStages := Seq(scalaJSPipeline)
      )
      .enablePlugins(WebScalaJSVitePlugin)
     
    lazy val client = project.enablePlugins(ScalaJSVitePlugin)

See sbt-web-scalajs-vite/src/sbt-test/sbt-web-scalajs-vite/basic-project directory for basic example project.

Package managers

Uses npm by default, but provided PackageManager abstraction allows configuration of other package managers.

//for yarn
vitePackageManager := new scalajsvite.PackageManager {
  override def name = "yarn"
  override def lockFile = "yarn.lock"
  override def installCommand = "install"
}

// for pnpm
vitePackageManager := new scalajsvite.PackageManager {
  override def name = "pnpm"
  override def lockFile = "pnpm-lock.yaml"
  override def installCommand = "install"
}

Electron

Plugin is also suitable for working with Electron projects. Each Electron script should be specified as a separate module in scalaJSModuleInitializers:

scalaJSModuleInitializers := Seq(
  ModuleInitializer
    .mainMethodWithArgs("example.Main", "main")
    .withModuleID("main"),
  ModuleInitializer
    .mainMethodWithArgs("example.Preload", "main")
    .withModuleID("preload"),
  ModuleInitializer
    .mainMethodWithArgs("example.Renderer", "main")
    .withModuleID("renderer")
)

Then the typical Electron workflows can be executed with the use of vite-plugin-electron.

See sbt-scalajs-vite/src/sbt-test/sbt-scalajs-vite/electron-project directory for example project.

License

This software is licensed under the MIT license