@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:

1. A simple Elm worker application that sends a greeting through a port
2. 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:

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

License

MIT