Vite and Vitest

vibelang-vite compiles .vibe modules for Vite and Vitest with the project's vibelang compiler. It supports Vite 7 and 8. It serves JavaScript and source maps, and reports compiler errors in the terminal and in Vite's overlay. Install the packages with Add VibeLang to an existing project first.

1. Add the plugin to Vite

Add vibelang() to the plugins array in vite.config.ts, beside the plugins the project already has:

// TypeScript (.ts)
// vite.config.ts
import { defineConfig } from "vite"
import vibelang from "vibelang-vite"
 
export default defineConfig({ plugins: [vibelang()] })

2. Configure tsconfig.json

The plugin compiles the project that tsconfig.json describes, with its options and diagnostics. Check three things:

1. compilerOptions sets "rewriteRelativeImportExtensions": true. Without it, a .ts file that imports ./greet.vibe fails with TS5097. "allowImportingTsExtensions": true alone fails with TS5096, because the plugin emits JavaScript.
2. include selects the .vibe files, and they are under Vite's root.
3. If tsconfig.json has "files": [] and only lists references, as Vite's templates do, pass the referenced configuration that includes src to the plugin, for example vibelang({ project: "tsconfig.app.json" }).

3. Add a first module

Create src/greet.vibe:

// src/greet.vibe
// run: Console.log(greet("Vite"))
export function greet(name: string) {
  return `Hello, ${name}!`
}
// Output: Hello, Vite!

Import it from .ts or .vibe modules by its source name, ./greet.vibe. TypeScript code sees greet as a function that returns an Effect. For example, a .ts module can run it with one of Effect's runners:

// TypeScript (.ts)
// src/use-greet.ts
// run: console.log(message)
import { Effect } from "effect"
import { greet } from "./greet.vibe"
 
export const message = Effect.runSync(greet("Vite"))
// Output: Hello, Vite!

4. Test with Vitest

If the project has no Vitest configuration, create vitest.config.ts. If it has one, add the plugin and the include pattern to it instead.

// TypeScript (.ts)
// vitest.config.ts
import { defineConfig } from "vitest/config"
import vibelang from "vibelang-vite"
 
export default defineConfig({
  plugins: [vibelang()],
  test: { include: ["src/**/*.test.vibe"] }
})

Create src/greet.test.vibe:

// src/greet.test.vibe
import { assert, it } from "@effect/vitest"
import { greet } from "./greet.vibe"
 
it.effect("greets") {
  assert.strictEqual(greet("Vite"), "Hello, Vite!")
}

Run npx vitest run. Tests need no prior build. The output includes:

 Test Files  1 passed (1)
      Tests  1 passed (1)

5. Build

Run npx vite build. It exits with status 0, and its last line starts with ✓ built in. Tell the user which files you added.

Next

Set up the editor: VS Code and Cursor, Neovim, Zed, or other editors. Then verify the setup with step 4 of Set up VibeLang.