@janwirth/bun-plugin-elm

A Bun plugin for seamlessly integrating Elm into your Bun projects. Compile Elm files directly in your Bun build pipeline.

Features

🚀 Compiles Elm files to JavaScript during Bun's build process
🔄 Automatically detects the Elm compiler in your environment
🧩 Properly handles Elm modules and exports
🌐 Works with Elm applications, including port modules
🛠️ Supports Elm's optimize and debug flags

Installation

bun add @janwirth/bun-plugin-elm

Make sure you have the Elm compiler installed:

npm install -g elm
# or
bun add -g elm

Usage

Basic Usage

// build.ts
import { elmPlugin } from "@janwirth/bun-plugin-elm";

const result = await Bun.build({
  entrypoints: ["./src/main.ts"],
  plugins: [elmPlugin()],
  outdir: "./dist",
});

With Options

import { elmPlugin } from "@janwirth/bun-plugin-elm";

const result = await Bun.build({
  entrypoints: ["./src/main.ts"],
  plugins: [
    elmPlugin({
      optimize: true, // Enable Elm's optimize flag
      debug: false, // Disable Elm's debug flag
    }),
  ],
  outdir: "./dist",
});

Importing Elm Modules

// In your TypeScript/JavaScript file
import MyElmApp from "./src/Main.elm";

// Initialize the Elm app
const app = MyElmApp.init({
  node: document.getElementById("elm-root"),
  flags: {
    /* your flags here */
  },
});

// Use ports if available
if (app.ports && app.ports.sendToJS) {
  app.ports.sendToJS.subscribe((data) => {
    console.log("Received from Elm:", data);
  });
}

Working with Elm Worker Applications

For Elm worker applications (using Platform.worker):

// worker.ts
import MyWorker from "./src/Worker.elm";

const app = MyWorker.init({
  flags: "Hello from JS",
});

// Subscribe to ports
app.ports.sendGreeting.subscribe((greeting) => {
  console.log(`Message from Elm worker: ${greeting}`);
});

Plugin Options

Option	Type	Default	Description
optimize	boolean	false	Enable Elm's optimize flag
debug	boolean	false	Enable Elm's debug flag
output	string	(auto)	Custom output path for compiled files
cwd	string	process.cwd()	Custom working directory for the Elm compiler

Example

Check out the example in the repository:

A simple Elm worker application that sends a greeting through a port
TypeScript integration with the Elm worker

To run the example:

# Clone the repository
git clone https://github.com/janwirth/bun-plugin-elm.git
cd bun-plugin-elm

# Install dependencies
bun install

# Run the test
bun test

How It Works

The plugin:

Detects .elm files in your import statements
Locates the Elm compiler in your environment
Compiles the Elm code to JavaScript
Wraps the compiled code to make it properly importable in your JS/TS code
Handles Elm's module structure and exports

License

MIT