clojurific 0.12.2 → 0.12.4

package/README.md

@@ -16,6 +16,9 @@ counts Clojurific's releases, starting from 1.
 
 ## Usage
 
+`npm create clojurific@latest` scaffolds a project (Vanilla, Reagent or UIx)
+like the one below, installs it and starts the dev server.
+
 Dependencies and source paths come from the project's `deps.edn`:
 
 ```clojure
@@ -50,8 +53,14 @@ or with the command line:
 npx cljf build '{:main my.app :output-dir "out"}'
 npx cljf -A:test watch @cljs.edn
 npx cljf classpath
+npx cljf repl
 ```
 
+`cljf repl` is a ClojureScript REPL evaluating in the pages the dev server
+runs, through its nREPL server: `cljs({ outputDir: 'target/cljs',
+compilerOptions: { repl: { 'nrepl-port': 0 } } })` with `nrepl/nrepl` in
+`deps.edn`.
+
 `cljf` resolves `deps.edn` with tools.deps, adds the compiler, and removes
 stock ClojureScript (`org.clojure/clojurescript`) that libraries depend on.
 Dependencies are downloaded into `~/.m2/repository`, which the Clojure CLI

package/cljf/cli.js

@@ -5,6 +5,7 @@ import { spawn } from 'node:child_process';
 import path from 'node:path';
 import { LauncherError } from './errors.js';
 import { classpath, compilerCommand, findJava, setupJava, version } from './launcher.js';
+import { repl } from './repl.js';
 
 const usage = `Usage: cljf [options] <command> [arguments]
 
@@ -13,6 +14,9 @@ Commands:
                          and :profile keywords (defaults to :release)
   watch [options...]     compile, then recompile on changes (defaults to :dev)
   classpath              print the project's classpath
+  repl [--port <port>]   a ClojureScript REPL into the pages running the dev
+                         server's (or watch's) build, through its nREPL server
+                         (:repl {:nrepl-port 0}, port from .nrepl-port)
   setup-java [version]   download Eclipse Temurin (the latest LTS by default)
                          into cljf's cache, for machines without Java
 
@@ -42,9 +46,10 @@ function parse(argv) {
 
 function run(command, args) {
   const child = spawn(command, args, { stdio: 'inherit' });
+  // forwarded: only a terminal signals the JVM too (SIGINT), not kill, an IDE
+  // or a process supervisor; a second SIGINT is harmless
   for (const signal of ['SIGINT', 'SIGTERM', 'SIGHUP']) {
-    // the terminal sends SIGINT to the JVM too, other signals are forwarded
-    process.on(signal, () => signal !== 'SIGINT' && child.kill(signal));
+    process.on(signal, () => child.kill(signal));
   }
   child.on('error', e => {
     console.error(`cljf: ${command}: ${e.message}`);
@@ -72,6 +77,11 @@ async function main() {
       console.log(cp.classpath.join(path.delimiter));
       break;
     }
+    case 'repl': {
+      const i = args.indexOf('--port');
+      process.exit(await repl({ port: i >= 0 ? Number(args[i + 1]) : undefined }));
+      break;
+    }
     case 'setup-java': {
       const { java } = await setupJava({ version: args[0], log });
       console.log(java);

package/cljf/java.js

@@ -203,7 +203,8 @@ export async function setupJava({
   await fs.mkdir(dir, { recursive: true });
   const tmp = await fs.mkdtemp(path.join(dir, '.setup-'));
   try {
-    const archive = path.join(tmp, pkg.name);
+    // a name from the API, not a path
+    const archive = path.join(tmp, path.basename(pkg.name));
     try {
       await download(pkg.link, archive, { sha256: pkg.checksum, fetch });
     } catch (e) {

package/cljf/launcher.js

@@ -4,7 +4,7 @@
 // Classpaths are cached in the project's .cljf/cpcache, like the Clojure
 // CLI's .cpcache, until a deps.edn they were resolved from changes.
 import { spawn } from 'node:child_process';
-import { createHash } from 'node:crypto';
+import { createHash, randomBytes } from 'node:crypto';
 import { existsSync, readFileSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import path from 'node:path';
@@ -78,8 +78,10 @@ async function resolve({ project, aliases, java, cache, env, log }) {
     repository: env.CLJF_MAVEN_REPO || undefined,
     log,
   });
-  const input = `${cache}.resolve.edn`;
-  const output = `${cache}.resolve.json`;
+  // per process: another one may resolve the same classpath at the same time
+  const tmp = `${cache}.${process.pid}.${randomBytes(4).toString('hex')}`;
+  const input = `${tmp}.resolve.edn`;
+  const output = `${tmp}.resolve.json`;
   await fs.writeFile(input, edn({
     ':aliases': aliases,
     ':compiler': compiler,

package/cljf/repl.js

@@ -0,0 +1,335 @@
+// cljf repl: a ClojureScript REPL in the terminal, evaluating in the pages
+// running a watched build. It's an nREPL client of the watcher's nREPL server
+// (:repl {:nrepl-port 0}, see cljs.esm.repl.nrepl), whose session it
+// switches to ClojureScript with (cljs.esm.repl/repl).
+import { existsSync } from 'node:fs';
+import fs from 'node:fs/promises';
+import net from 'node:net';
+import path from 'node:path';
+import readline from 'node:readline';
+import { LauncherError } from './errors.js';
+
+// bencode, nREPL's encoding: dicts, lists, integers and (UTF-8) strings
+
+export function bencode(v) {
+  if (typeof v === 'number') return Buffer.from(`i${Math.trunc(v)}e`);
+  if (typeof v === 'string' || Buffer.isBuffer(v)) {
+    const bytes = Buffer.isBuffer(v) ? v : Buffer.from(v);
+    return Buffer.concat([Buffer.from(`${bytes.length}:`), bytes]);
+  }
+  if (Array.isArray(v)) return Buffer.concat([Buffer.from('l'), ...v.map(bencode), Buffer.from('e')]);
+  const keys = Object.keys(v).filter(k => v[k] !== undefined).sort();
+  return Buffer.concat([Buffer.from('d'), ...keys.flatMap(k => [bencode(k), bencode(v[k])]), Buffer.from('e')]);
+}
+
+const INCOMPLETE = Symbol('incomplete');
+
+// The value at buf[i], [value, next index], or INCOMPLETE
+function decodeAt(buf, i) {
+  if (i >= buf.length) return INCOMPLETE;
+  const c = String.fromCharCode(buf[i]);
+  if (c === 'i') {
+    const end = buf.indexOf('e', i);
+    return end < 0 ? INCOMPLETE : [Number(buf.toString('latin1', i + 1, end)), end + 1];
+  }
+  if (c === 'l' || c === 'd') {
+    const items = [];
+    let j = i + 1;
+    while (j < buf.length && buf[j] !== 0x65) {
+      const item = decodeAt(buf, j);
+      if (item === INCOMPLETE) return INCOMPLETE;
+      items.push(item[0]);
+      j = item[1];
+    }
+    if (j >= buf.length) return INCOMPLETE;
+    if (c === 'l') return [items, j + 1];
+    const dict = {};
+    for (let k = 0; k < items.length; k += 2) dict[items[k]] = items[k + 1];
+    return [dict, j + 1];
+  }
+  if (c >= '0' && c <= '9') {
+    const colon = buf.indexOf(':', i);
+    if (colon < 0) return INCOMPLETE;
+    const start = colon + 1;
+    const end = start + Number(buf.toString('latin1', i, colon));
+    return end > buf.length ? INCOMPLETE : [buf.toString('utf8', start, end), end];
+  }
+  throw new Error(`bencode: unexpected ${JSON.stringify(c)}`);
+}
+
+/** Decodes the values of a byte stream, as chunks arrive. */
+export class Decoder {
+  #buf = Buffer.alloc(0);
+
+  /** The values chunk completes. */
+  push(chunk) {
+    this.#buf = Buffer.concat([this.#buf, chunk]);
+    const values = [];
+    for (;;) {
+      const decoded = decodeAt(this.#buf, 0);
+      if (decoded === INCOMPLETE) return values;
+      values.push(decoded[0]);
+      this.#buf = this.#buf.subarray(decoded[1]);
+    }
+  }
+}
+
+/**
+ * Whether code's forms are all closed, so that the REPL evaluates it rather
+ * than reading another line: no open (, [ or {, string or regex. Extra
+ * closing brackets are the reader's to report.
+ */
+export function complete(code) {
+  let depth = 0;
+  for (let i = 0; i < code.length; i++) {
+    const c = code[i];
+    if (c === ';') {
+      while (i < code.length && code[i] !== '\n') i++;
+    } else if (c === '\\') {
+      i++;
+    } else if (c === '"') {
+      for (i++; i < code.length && code[i] !== '"'; i++) if (code[i] === '\\') i++;
+      if (i >= code.length) return false;
+    } else if ('([{'.includes(c)) {
+      depth++;
+    } else if (')]}'.includes(c)) {
+      depth--;
+    }
+  }
+  return depth <= 0;
+}
+
+/** An nREPL connection: requests whose responses end with status done. */
+export class Connection {
+  #socket;
+  #ids = 0;
+  #pending = new Map();
+
+  constructor(socket) {
+    this.#socket = socket;
+    const decoder = new Decoder();
+    socket.on('data', chunk => {
+      for (const msg of decoder.push(chunk)) {
+        const request = this.#pending.get(msg.id);
+        if (!request) continue;
+        request.onResponse(msg);
+        if (msg.status?.includes('done')) {
+          this.#pending.delete(msg.id);
+          request.resolve(msg);
+        }
+      }
+    });
+  }
+
+  /** A message id for request. */
+  newId() {
+    return String(++this.#ids);
+  }
+
+  /**
+   * Sends msg (with an id from newId, or a new one), calls onResponse with
+   * its responses; resolves to the last.
+   */
+  request(msg, onResponse = () => {}) {
+    const id = msg.id ?? this.newId();
+    return new Promise(resolve => {
+      this.#pending.set(id, { onResponse, resolve });
+      this.#socket.write(bencode({ ...msg, id }));
+    });
+  }
+
+  close() {
+    this.#socket.end();
+  }
+}
+
+function connect(port, host) {
+  return new Promise((resolve, reject) => {
+    const socket = net.connect(port, host);
+    socket.once('connect', () => {
+      socket.off('error', reject);
+      resolve(socket);
+    });
+    socket.once('error', reject);
+  });
+}
+
+/**
+ * Connects to the nREPL server on port, or the one in cwd's .nrepl-port,
+ * waiting for it to start (the dev server writes the file once it built).
+ */
+export async function connectToServer({ cwd = process.cwd(), port, host = '127.0.0.1', log = () => {}, interval = 500 } = {}) {
+  const portFile = path.join(cwd, '.nrepl-port');
+  let waiting = false;
+  for (;;) {
+    const p = port ?? (existsSync(portFile) ? Number((await fs.readFile(portFile, 'utf8')).trim()) : null);
+    if (p) {
+      try {
+        return await connect(p, host);
+      } catch (e) {
+        if (port) throw new LauncherError(`cljf repl: no nREPL server on ${host}:${port}: ${e.message}`);
+      }
+    }
+    if (!waiting) {
+      log(`; waiting for the nREPL server of the dev server (npm run dev) or cljf watch, with :repl {:nrepl-port 0},\n; to write ${portFile}`);
+      waiting = true;
+    }
+    await new Promise(resolve => setTimeout(resolve, interval));
+  }
+}
+
+async function readHistory(file) {
+  try {
+    return (await fs.readFile(file, 'utf8')).split('\n').filter(Boolean).reverse();
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * The REPL: reads forms from input, evaluates them in the session switched
+ * to ClojureScript, writes their output and values to output (errors and
+ * warnings to errorOutput). Resolves to the exit code once input ends or
+ * :cljs/quit.
+ */
+export async function repl({
+  cwd = process.cwd(),
+  port,
+  host,
+  input = process.stdin,
+  output = process.stdout,
+  errorOutput = process.stderr,
+  terminal = Boolean(input.isTTY && output.isTTY),
+  historyFile = path.join(cwd, '.cljf', 'repl-history'),
+} = {}) {
+  const socket = await connectToServer({ cwd, port, host, log: line => errorOutput.write(`${line}\n`) });
+  const conn = new Connection(socket);
+  let closing = false;
+  const closed = new Promise(resolve => socket.on('close', resolve));
+  socket.on('error', () => {});
+
+  const write = (stream, text) => text && stream.write(text);
+  const { 'new-session': session } = await conn.request({ op: 'clone' });
+  let failed = false;
+  await conn.request({ op: 'eval', session, code: '(cljs.esm.repl/repl)' }, msg => {
+    write(output, msg.out);
+    write(errorOutput, msg.err);
+    if (msg.ex) failed = true;
+  });
+  if (failed) {
+    conn.close();
+    throw new LauncherError('cljf repl: the nREPL server has no ClojureScript REPL (cljs.esm.repl), is it the dev server\'s?');
+  }
+
+  const history = terminal ? await readHistory(historyFile) : [];
+  const rl = readline.createInterface({ input, output, terminal, history, historySize: 1000, removeHistoryDuplicates: true });
+  if (terminal) {
+    rl.on('history', lines => {
+      fs.mkdir(path.dirname(historyFile), { recursive: true })
+        .then(() => fs.writeFile(historyFile, `${[...lines].reverse().join('\n')}\n`))
+        .catch(() => {});
+    });
+  }
+
+  let ns = 'cljs.user';
+  let pending = '';
+  let evaluating = null;
+  let interrupted = false;
+  const prompt = () => {
+    if (!terminal) return;
+    rl.setPrompt(pending ? `${' '.repeat(Math.max(0, ns.length - 1))}#_=> ` : `${ns}=> `);
+    rl.prompt();
+  };
+
+  const done = new Promise(resolve => {
+    const quit = code => {
+      closing = true;
+      rl.close();
+      // the server forgets the session, unless it doesn't answer
+      const timeout = new Promise(r => setTimeout(r, 1000).unref());
+      Promise.race([conn.request({ op: 'close', session }), timeout]).finally(() => {
+        conn.close();
+        resolve(code);
+      });
+    };
+    closed.then(() => {
+      if (closing) return;
+      errorOutput.write('\n; the nREPL server closed the connection\n');
+      closing = true;
+      rl.close();
+      resolve(1);
+    });
+
+    rl.on('SIGINT', () => {
+      if (evaluating) {
+        conn.request({ op: 'interrupt', session, 'interrupt-id': evaluating });
+      } else if (pending || rl.line) {
+        pending = '';
+        interrupted = false;
+        rl.write(null, { ctrl: true, name: 'u' });
+        output.write('\n');
+        prompt();
+      } else if (interrupted) {
+        quit(0);
+      } else {
+        interrupted = true;
+        output.write('\n; Ctrl-C again, Ctrl-D or :cljs/quit to quit\n');
+        prompt();
+      }
+    });
+
+    // lines are read one at a time: a form waits for the one before
+    const lines = [];
+    let busy = false;
+    const next = async () => {
+      if (busy) return;
+      busy = true;
+      while (lines.length) {
+        const line = lines.shift();
+        if (line === null) {
+          quit(0);
+          return;
+        }
+        interrupted = false;
+        pending += `${line}\n`;
+        if (!complete(pending)) {
+          prompt();
+          continue;
+        }
+        const code = pending;
+        pending = '';
+        if (!code.trim()) {
+          prompt();
+          continue;
+        }
+        if (code.trim() === ':cljs/quit') {
+          quit(0);
+          return;
+        }
+        evaluating = conn.newId();
+        await conn.request({ op: 'eval', session, code, ns, id: evaluating }, msg => {
+          write(output, msg.out);
+          write(errorOutput, msg.err);
+          if (msg.value !== undefined) output.write(`${msg.value}\n`);
+          if (msg.ns) ns = msg.ns;
+        });
+        evaluating = null;
+        if (closing) return;
+        prompt();
+      }
+      busy = false;
+    };
+    rl.on('line', line => {
+      lines.push(line);
+      next();
+    });
+    rl.on('close', () => {
+      if (closing) return;
+      lines.push(null);
+      next();
+    });
+  });
+
+  prompt();
+  return done;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clojurific",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "ClojureScript compiled to ES modules, bundled by Vite",
   "license": "EPL-1.0",
   "repository": {

package/vite-plugin-cljs/index.js

@@ -7,7 +7,7 @@
 // TypeScript files they import.
 import { spawn } from 'node:child_process';
 import fs from 'node:fs/promises';
-import { existsSync } from 'node:fs';
+import { existsSync, statSync } from 'node:fs';
 import path from 'node:path';
 import { createRequire } from 'node:module';
 import { pathToFileURL } from 'node:url';
@@ -31,16 +31,51 @@ async function sourceNamespace(file) {
   return ns;
 }
 
-// The ClojureScript sources pages load with module scripts
-async function pageSources(pages, root) {
-  const sources = [];
-  for (const page of pages) {
-    const html = await fs.readFile(page, 'utf8');
-    for (const [, src] of html.matchAll(/<script\b[^>]*\bsrc\s*=\s*["']([^"'?#]+\.clj[sc])["'][^>]*>/gi)) {
-      sources.push(src.startsWith('/') ? path.join(root, src) : path.resolve(path.dirname(page), src));
+const SCRIPT_SRC = /<script\b[^>]*\bsrc\s*=\s*["']([^"']+)["']/gi;
+// import "x", import x from "x", export … from "x", import("x")
+const IMPORT = /(?:\bimport\s*(?:[\w$*{}\s,]+\bfrom\s*)?|\bexport\s*[\w$*{}\s,]+\bfrom\s*|\bimport\s*\(\s*)["']([^"']+)["']/g;
+const SCRIPT_FILE = /\.(?:[cm]?[jt]sx?)$/;
+// extensionless imports, as TypeScript projects write them
+const SCRIPT_SUFFIXES = ['', '.ts', '.tsx', '.js', '.jsx', '.mjs', '/index.ts', '/index.js'];
+
+// The file a page's script or a module's import names: root-absolute or
+// relative paths, not packages or aliases, which the bundler resolves
+function importedFile(spec, from, root) {
+  const file = spec.replace(/[?#].*$/, '');
+  if (!file.startsWith('/') && !file.startsWith('.')) return null;
+  return file.startsWith('/') ? path.join(root, file) : path.resolve(path.dirname(from), file);
+}
+
+// The ClojureScript sources the entries (pages and JavaScript or TypeScript
+// modules) load: the pages' scripts and the modules' imports, followed through
+// the project's modules
+async function entrySources(entries, root) {
+  const sources = new Set();
+  const seen = new Set();
+  const queue = [...entries];
+  while (queue.length) {
+    const file = queue.shift();
+    if (seen.has(file) || file.includes(`${path.sep}node_modules${path.sep}`)) continue;
+    seen.add(file);
+    let code;
+    try {
+      code = await fs.readFile(file, 'utf8');
+    } catch (e) {
+      continue;
+    }
+    for (const [, spec] of code.matchAll(file.endsWith('.html') ? SCRIPT_SRC : IMPORT)) {
+      const target = importedFile(spec, file, root);
+      if (!target) continue;
+      if (SOURCE_FILE.test(target)) {
+        if (existsSync(target)) sources.add(target);
+      } else {
+        const module = SCRIPT_SUFFIXES.map(suffix => target + suffix)
+          .find(f => SCRIPT_FILE.test(f) && existsSync(f) && !statSync(f).isDirectory());
+        if (module) queue.push(module);
+      }
     }
   }
-  return [...new Set(sources)];
+  return [...sources];
 }
 
 // Whether address is this machine's
@@ -73,14 +108,20 @@ async function commonJSPackage(root) {
   }
 }
 
-// A Rollup input (a file, files or {name: file}) as {name: absolute file}
+// A Rollup input (a file, files or {name: file}) as {name: absolute file},
+// files named by their path in the root without the extension, so pages with
+// the same file name in different directories (about/index.html) keep apart
 function inputObject(input, root) {
   if (!input) return {};
   if (typeof input === 'object' && !Array.isArray(input)) {
     return Object.fromEntries(Object.entries(input).map(([name, file]) => [name, path.resolve(root, file)]));
   }
-  return Object.fromEntries([].concat(input).map(file =>
-    [path.basename(file, path.extname(file)), path.resolve(root, file)]));
+  return Object.fromEntries([].concat(input).map(file => {
+    const absolute = path.resolve(root, file);
+    const relative = path.relative(root, absolute);
+    const name = relative.startsWith('..') || path.isAbsolute(relative) ? path.basename(absolute) : relative;
+    return [name.slice(0, name.length - path.extname(name).length).split(path.sep).join('/'), absolute];
+  }));
 }
 
 function ednString(s) {
@@ -315,6 +356,13 @@ export default function cljs(options) {
     return (compiled ? path.relative(outputDir, file) : path.relative(cwd, file)).split(path.sep).join('/');
   }
 
+  // Whether a ClojureScript source may be served: in Vite's root or
+  // server.fs.allow
+  function servedSource(file) {
+    const dirs = [config.root, ...(config.server?.fs?.allow ?? [])].map(dir => path.resolve(dir));
+    return SOURCE_FILE.test(file) && dirs.some(dir => file.startsWith(dir + path.sep));
+  }
+
   // The compiled module of a ClojureScript source file: its namespace's in the
   // build info, or its munged name
   async function compiledModule(file) {
@@ -325,7 +373,8 @@ export default function cljs(options) {
       `${ns.split('.').map(part => part.replace(/-/g, '_')).join('/')}.js`;
     const module = path.join(outputDir, relative);
     if (!existsSync(module)) {
-      throw new Error(`${ns} (${file}) isn't compiled: load it with a page's script, or add it to :main`);
+      throw new Error(`${ns} (${file}) isn't compiled: load it from a page's script or a module the pages ` +
+        'import (through relative or root-absolute imports, restarting Vite after adding it), or add it to :main');
     }
     return module;
   }
@@ -372,8 +421,8 @@ export default function cljs(options) {
       // the project's page, an input of builds and the dev server's /
       const indexHtml = existsSync(path.join(root, 'index.html')) ? path.join(root, 'index.html') : null;
       const userInput = userConfig.build?.rolldownOptions?.input ?? userConfig.build?.rollupOptions?.input;
-      const pages = Object.values(inputObject(userInput ?? indexHtml, root)).filter(f => f.endsWith('.html'));
-      pageNamespaces = await Promise.all((await pageSources(pages, root)).map(sourceNamespace));
+      const entries = Object.values(inputObject(userInput ?? indexHtml, root));
+      pageNamespaces = await Promise.all((await entrySources(entries, root)).map(sourceNamespace));
       if (env.command === 'build' && !env.isPreview) {
         const start = Date.now();
         if (userConfig.build?.watch) {
@@ -452,14 +501,17 @@ export default function cljs(options) {
       // A ClojureScript source: its compiled module, as a module importing it
       // when serving, which a page loading it by its source's URL and the
       // modules importing it by its own share
-      const file = source.split('?')[0];
+      const file = source.split(/[?#]/)[0];
       if (SOURCE_FILE.test(file) && !source.startsWith('\0')) {
+        // URLs are root-relative, files are only served from the project
         const candidates = [
-          ...(path.isAbsolute(file) ? [file] : []),
           ...(file.startsWith('/') ? [path.join(root, file)] : []),
-          ...(importer && !importer.startsWith('\0') ? [path.resolve(path.dirname(importer.split('?')[0]), file)] : []),
+          ...(importer && !importer.startsWith('\0') && !file.startsWith('/')
+            ? [path.resolve(path.dirname(importer.split('?')[0]), file)]
+            : []),
+          ...(path.isAbsolute(file) ? [file] : []),
         ];
-        const found = candidates.find(f => existsSync(f));
+        const found = candidates.find(f => servedSource(f) && existsSync(f));
         if (!found) return null;
         return config.command === 'build' ? compiledModule(found) : '\0' + SOURCE + found;
       }
@@ -479,7 +531,9 @@ export default function cljs(options) {
 
     async load(id) {
       if (id.startsWith('\0' + SOURCE)) {
-        const module = await compiledModule(id.slice(SOURCE.length + 1));
+        const file = id.slice(SOURCE.length + 1);
+        if (!servedSource(file)) this.error(`${file} is outside the project`);
+        const module = await compiledModule(file);
         return `import ${JSON.stringify(module)};\nexport * from ${JSON.stringify(module)};\n`;
       }
       // compiled namespaces with their source maps, to the ClojureScript sources
@@ -604,9 +658,10 @@ export default function cljs(options) {
       async handler(html, { filename }) {
         if (config.command !== 'serve') return html;
         const replacements = await Promise.all(
-          [...html.matchAll(/(<script\b[^>]*\bsrc\s*=\s*["'])([^"'?#]+\.clj[sc])(["'])/gi)].map(async match => {
+          // with a query or fragment, which the compiled module's URL keeps
+          [...html.matchAll(/(<script\b[^>]*\bsrc\s*=\s*["'])([^"'?#]+\.clj[sc])([?#][^"']*)?(["'])/gi)].map(async match => {
             const file = match[2].startsWith('/') ? path.join(config.root, match[2]) : path.resolve(path.dirname(filename), match[2]);
-            return [match[0], match[1] + devUrl(await compiledModule(file)) + match[3]];
+            return [match[0], match[1] + devUrl(await compiledModule(file)) + (match[3] ?? '') + match[4]];
           }));
         return replacements.reduce((result, [from, to]) => result.replace(from, to), html);
       },