Vite + Esbuild Plugins

[martinklepsch]

Update: A vite plugin is being maintained here: https://github.com/squint-cljs/vite-plugin-squint — it's the early days so please give it a try and report issues.

Hello!

Just wanted to share some super basic plugin code for vite and esbuild that allows you to only run those tools and not worry about squint compilation:

vite.config.js

import { defineConfig } from "vite";
import { compileString } from "squint-cljs";
import esbuild from "esbuild";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    {
      name: "squint_compile",
      transform: function (src, id) {
        if (/\.cljs$/.test(id)) {
          var jsx = compileString(src);
          var js = esbuild.transformSync(jsx, { loader: "jsx" }).code;
          // TODO handle warnings from esbuild transform
          return { code: js, map: null };
        }
      },
    }
  ],
});

build.js (esbuild)

import * as esbuild from 'esbuild'
import fs from 'node:fs'
import { compileString } from "squint-cljs";

let squintPlugin = {
  name: 'squint_compile',
  setup(build) {
    build.onLoad({ filter: /\.cljs$/ }, async (args) => {
      let text = await fs.promises.readFile(args.path, 'utf8')
      return {
        contents: compileString(text),
        loader: 'jsx',
      }
    })
  },
}

let ctx = await esbuild.context({
  entryPoints: ['src/main.cljs'],
  bundle: true,
  outfile: 'dist/main.js',
  plugins: [squintPlugin],
})

if ("--watch" == process.argv[2]) {
  await ctx.watch()
} else {
  await ctx.rebuild()
  ctx.dispose()
}

I haven't done a ton of tire-kicking but it seems to work for my situation for now, including transpiling JSX to React.createElement calls.

Let me know if you give it a try and run into issues!

[martinklepsch]

@borkdude while exploring this more I realized that it would be great to be able to resolve CLJS namespaces from tools like Rollup or Vite. In order to do this reliably we would need a marker that can trigger the resolver:

import * as my_ns from 'cljs-ns:com.app.namespace';

With something like this a custom Rollup resolver could be implemented:

function namespaceResolve () {
  return {
    name: 'cljs-ns-resolve', // this name will show up in logs and errors
    resolveId ( source ) {
      console.log("source:", source)
      if (source.startsWith("cljs-ns:")) {
        return fileForNs(source)
      }
      return null; // other ids should be handled as usually
    }
  };
}

esbuild supports similar resolver functionality. Maintaining plugins for esbuild, vite and rollup would be important & something I'm happy to help with!

[brandonstubbs]

@martinklepsch thanks this is really great! I used this to be able to plug into vanilla vite! https://github.com/brandonstubbs/squint-vite

[martinklepsch]

There's now a plugin for Vite that is being published to NPM as well: https://github.com/squint-cljs/vite-plugin-squint