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.

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