A robust Vite plugin for seamless integration with shadow-cljs.
npm install shadow-cljs-vite-plugin
A robust Vite plugin for seamless integration with shadow-cljs.
This plugin bridges the gap between the shadow-cljs build tool and the Vite dev server, allowing you to use Vite's lightning-fast HMR and rich ecosystem while developing ClojureScript applications.
- Seamless Integration: Automatically starts and manages the shadow-cljs process.
- Hot Module Replacement (HMR): Correctly delegates HMR to shadow-cljs (for the browser runtime) for a smooth REPL-driven workflow.
- Cloudflare Workers Ready: Fully tested and works seamlessly with @cloudflare/vite-plugin. Includes specialized logic to handle Google Closure Library namespaces in ESM environments.
- Zero Configuration: Works out of the box for most standard shadow-cljs setups.
``bash`
npm install -D shadow-cljs-vite-pluginor
pnpm add -D shadow-cljs-vite-plugin
Add the plugin to your vite.config.ts (or vite.config.js).
`typescript
import { defineConfig } from "vite";
import { shadowCljs } from "shadow-cljs-vite-plugin";
export default defineConfig({
plugins: [
shadowCljs({
buildIds: ["app"], // The build ID(s) from your shadow-cljs.edn
configPath: "./shadow-cljs.edn", // Optional: Path to config
}),
],
});
`
Then, import the virtual module in your entry HTML or JavaScript file (e.g., main.tsx or index.html):
`html`
For a complete working example, you can refer to the tests/e2e/fixtures/simple-project/ directory.
To ensure correct integration with Vite's ES module system and avoid runtime errors, your shadow-cljs.edn build configuration MUST use the following settings:
`edn`
{:target :esm
:js-options {:js-provider :import}}
- :target :esm: Tells shadow-cljs to output standard ES modules.:js-options {:js-provider :import}
- : Ensures that dependencies are imported using native ESM syntax.
- Type: string[]
- Description: The list of build IDs defined in your that you want Vite to handle.
- Type: string
- Default: in the project root.
- Description: The path to your shadow-cljs configuration file.
1. Dev Server: When you run vite, this plugin spawns shadow-cljs watch . It watches for output changes and triggers HMR updates in the browser.vite build
2. Production Build: When you run , it spawns shadow-cljs release to generate the optimized assets, which Vite then bundles.
This project includes a comprehensive test suite, including End-to-End (E2E) tests that simulate real-world build scenarios (including integration with Cloudflare Workers) to ensure reliability.
To run the tests locally:
`bash``
pnpm test
- bolasblack/BlogFront - https://blog.c4605.com
If you are using this project, feel free to submit a PR to add it here.
Please see CONTRIBUTING.md for details on the code structure and how to submit changes.
MIT