astro-cljs-plugin

Zero-config ClojureScript integration for Astro.

Features

• Zero Config: Automatically discovers and exports components from your .cljs files. No manual :exports required in shadow-cljs.edn.
• React-Powered: Works seamlessly with UIX and Helix.
• Bundled Engine: Internally bundles and manages the shadow-cljs-vite-plugin for a unified experience.

Prerequisites

This integration requires the @astrojs/react plugin to be installed and configured in your Astro project to handle the underlying React rendering.

Installation

npm install astro-cljs-plugin

Usage

Add the integration to your astro.config.mjs:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import cljs from 'astro-cljs-plugin';

export default defineConfig({
  integrations: [
    react(), 
    cljs({
      buildIds: ['app']
    })
  ]
});

Configuration Options

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | debug | boolean | false | Enable verbose logging for the integration and Vite plugin. | | buildIds | string[] | ['app'] | The shadow-cljs build IDs defined in your config to watch/build. | | configPath | string | './shadow-cljs.edn' | Path to your shadow-cljs configuration file. | | autoGenerateRegistry | boolean | true | Automatically generate component registry from defui declarations. |

Component Discovery

The plugin automatically discovers React components by scanning your .cljs files for defui declarations (UIX/Helix):

(ns app.hello)

(defui hello [props]
  [:div "Hello " (:name props)])

This component is automatically registered as:

• Namespace: app.hello
• Export name: Hello (converted from kebab-case to PascalCase)

Naming Conventions

Component names follow these conversion rules:

| ClojureScript | JavaScript Export | | :--- | :--- | | hello | Hello | | my-button | MyButton | | user-profile-card | UserProfileCard |

Multiple Components Per File

You can define multiple defui components in a single file - all will be discovered:

(ns app.components)

(defui button [props] ...)
(defui input [props] ...)
(defui card [props] ...)

All three components (Button, Input, Card) will be available for import.