acrylblends 0.7.0 → 0.7.2

package/lib/transpile-CTnWof4z.js

@@ -0,0 +1,90 @@
+import { createRequire } from "node:module";
+import { existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+//#region ../../plugins/acryl-node-server/src/transpile.ts
+/**
+* One TypeScript module compiled to JavaScript with the app's own `typescript`: the transform behind `acrylblends/node-server/register`
+* (server JSX on Node) and `clientModules` (browser modules). `typescript` is loaded from the app on first use, so the framework itself has
+* no dependencies.
+*/
+/** Thrown when the app has no `typescript` to compile a file with. */
+var MissingTypeScriptError = class extends Error {
+	constructor(file, what) {
+		super(`acrylblends: ${file} ${what}, and compiling it needs the typescript package in this app: npm install --save-dev typescript`);
+		this.name = "MissingTypeScriptError";
+	}
+};
+const compilers = /* @__PURE__ */ new Map();
+const importSources = /* @__PURE__ */ new Map();
+/**
+* The app's own `typescript`, resolved from the file, so each app compiles with the version it pinned.
+* @param file - the module to compile.
+* @param what - what the file needs compiling for, for the error message.
+* @returns the compiler.
+* @throws MissingTypeScriptError when the app has no `typescript`.
+*/
+function compilerFor(file, what) {
+	let owner;
+	for (let dir = dirname(file); owner === void 0; dir = dirname(dir)) if (existsSync(join(dir, "node_modules", "typescript", "package.json"))) owner = dir;
+	else if (dirname(dir) === dir) throw new MissingTypeScriptError(file, what);
+	const path = createRequire(join(owner, "package.json")).resolve("typescript");
+	let compiler = compilers.get(path);
+	if (compiler === void 0) {
+		compiler = createRequire(path)(path);
+		compilers.set(path, compiler);
+	}
+	return compiler;
+}
+/** `jsxImportSource` of the tsconfig.json nearest to the file (following `extends`), read once per config. */
+function importSourceFor(file, ts, fallback) {
+	const config = ts.findConfigFile(dirname(file), (path) => existsSync(path));
+	if (config === void 0) return fallback;
+	let source = importSources.get(`${config}\0${fallback}`);
+	if (source === void 0) {
+		const { config: json } = ts.readConfigFile(config, (path) => ts.sys.readFile(path));
+		source = ts.parseJsonConfigFileContent(json ?? {}, ts.sys, dirname(config)).options.jsxImportSource ?? fallback;
+		importSources.set(`${config}\0${fallback}`, source);
+	}
+	return source;
+}
+/**
+* A TypeScript or JSX module compiled to an ES module, with its source map inline (a file's own `@jsxImportSource` pragma wins over the
+* options).
+* @param file - absolute path of the module, which also locates the app's `typescript` and tsconfig.json.
+* @param text - its source.
+* @param options - the JSX runtime and the specifier rewrite.
+* @returns the JavaScript.
+* @throws MissingTypeScriptError when the app has no `typescript`.
+*/
+function compileModule(file, text, options) {
+	const ts = compilerFor(file, options.what);
+	const output = ts.transpileModule(text, {
+		fileName: file,
+		compilerOptions: {
+			module: "esnext",
+			target: "es2022",
+			jsx: "react-jsx",
+			jsxImportSource: options.importSource ?? importSourceFor(file, ts, options.defaultImportSource),
+			allowImportingTsExtensions: true,
+			inlineSourceMap: true,
+			inlineSources: true
+		}
+	}).outputText;
+	return options.rewrite === void 0 ? output : rewriteSpecifiers(ts, output, options.rewrite);
+}
+/** The output with each import specifier `rewrite` maps replaced; TypeScript's lexer finds them, so strings and comments are left alone. */
+function rewriteSpecifiers(ts, code, rewrite) {
+	let result = "";
+	let last = 0;
+	for (const { fileName, pos } of ts.preProcessFile(code, true, true).importedFiles.toSorted((a, b) => a.pos - b.pos)) {
+		const start = pos + 1;
+		if (code.slice(start, start + fileName.length) !== fileName) continue;
+		const replacement = rewrite(fileName);
+		if (replacement === void 0) continue;
+		result += code.slice(last, start) + replacement;
+		last = start + fileName.length;
+	}
+	return result + code.slice(last);
+}
+//#endregion
+export { compileModule as n, MissingTypeScriptError as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "acrylblends",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "The Acryl web framework (import { Acryl } from \"acrylblends\") and the acrylblends command that scaffolds Cordis apps.",
   "license": "MIT",
   "type": "module",

package/plugins/acryl-inspect/upstream.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-inspect",
-    "commit": "7bba3ed0420d87e61d8256fa60614d22af734c8f"
+    "commit": "cdc083e1bbaedaeafa7494fe646bdb202ce86d09"
   },
   "vendored": [
     "src",

package/plugins/acryl-node-server/src/adapter/server.ts

@@ -1,10 +1,28 @@
 import { createServer as createServerHTTP } from 'node:http'
+import type { Server } from 'node:http'
+import type { Http2SecureServer, Http2Server } from 'node:http2'
+import type { Server as HttpsServer } from 'node:https'
 import type { AddressInfo } from 'node:net'
 import { getRequestListener } from './listener.ts'
-import type { Options, ServerType } from './types.ts'
+import type {
+  HttpOptions,
+  HttpsOptions,
+  Http2Options,
+  Options,
+  SecureHttp2Options,
+  ServerType,
+} from './types.ts'
 import { setupWebSocket } from './websocket.ts'
 
-export const createAdaptorServer = (options: Options): ServerType => {
+/** The interface `serve` listens on when `hostname` is not given: this machine only. Pass `hostname: '0.0.0.0'` to accept other machines. */
+export const DEFAULT_HOSTNAME = '127.0.0.1'
+
+export function createAdaptorServer(options: SecureHttp2Options): Http2SecureServer
+export function createAdaptorServer(options: Http2Options): Http2Server
+export function createAdaptorServer(options: HttpsOptions): HttpsServer
+export function createAdaptorServer(options: HttpOptions): Server
+export function createAdaptorServer(options: Options): ServerType
+export function createAdaptorServer(options: Options): ServerType {
   const fetchCallback = options.fetch
   const requestListener = getRequestListener(fetchCallback, {
     hostname: options.hostname,
@@ -23,12 +41,17 @@ export const createAdaptorServer = (options: Options): ServerType => {
   return server
 }
 
-export const serve = (
+export function serve(options: SecureHttp2Options, listeningListener?: (info: AddressInfo) => void): Http2SecureServer
+export function serve(options: Http2Options, listeningListener?: (info: AddressInfo) => void): Http2Server
+export function serve(options: HttpsOptions, listeningListener?: (info: AddressInfo) => void): HttpsServer
+export function serve(options: HttpOptions, listeningListener?: (info: AddressInfo) => void): Server
+export function serve(options: Options, listeningListener?: (info: AddressInfo) => void): ServerType
+export function serve(
   options: Options,
   listeningListener?: (info: AddressInfo) => void
-): ServerType => {
+): ServerType {
   const server = createAdaptorServer(options)
-  server.listen(options?.port ?? 3000, options.hostname, () => {
+  server.listen(options?.port ?? 3000, options.hostname ?? DEFAULT_HOSTNAME, () => {
     const serverInfo = server.address() as AddressInfo
     listeningListener && listeningListener(serverInfo)
   })

package/plugins/acryl-node-server/src/adapter/types.ts

@@ -68,15 +68,27 @@ export type ServerOptions =
   | createHttp2Options
   | createSecureHttp2Options
 
-export type Options = {
+type BaseOptions = {
   fetch: FetchCallback
   overrideGlobalObjects?: boolean
   autoCleanupIncoming?: boolean
   port?: number
+  /** The interface to listen on; `serve` uses `127.0.0.1` when it is not given. */
   hostname?: string
   websocket?: {
     server: WebSocketServerLike
   }
-} & ServerOptions
+}
+
+export type Options = BaseOptions & ServerOptions
+
+/** Options for the default HTTP/1 server: `serve` and `createAdaptorServer` return an `http.Server`. */
+export type HttpOptions = BaseOptions & createHttpOptions
+/** Options naming `https.createServer`: an `https.Server`. */
+export type HttpsOptions = BaseOptions & { serverOptions?: HttpsServerOptions, createServer: typeof createHttpsServer }
+/** Options naming `http2.createServer`: an `Http2Server`. */
+export type Http2Options = BaseOptions & { serverOptions?: Http2ServerOptions, createServer: typeof createHttp2Server }
+/** Options naming `http2.createSecureServer`: an `Http2SecureServer`. */
+export type SecureHttp2Options = BaseOptions & { serverOptions?: SecureHttp2ServerOptions, createServer: typeof createSecureHttp2Server }
 
 export type CustomErrorHandler = (err: unknown) => void | Response | Promise<void | Response>

package/plugins/acryl-node-server/src/client-modules.ts

@@ -0,0 +1,293 @@
+/**
+ * Client components without a bundler. `clientModules({ root: 'src/client' })` is an app that serves the TypeScript and JSX modules of a
+ * folder to the browser as ES modules: a `.tsx`/`.ts`/`.jsx` file compiled with the app's own `typescript` (JSX for `acrylblends/jsx/dom`),
+ * a `.js`/`.mjs` file as it is. The framework's own browser imports (`acrylblends/jsx/dom` with its runtimes and `client`, and
+ * `acrylblends/client`) are rewritten to two self-contained files the same app serves, at a URL relative to each module, so a page needs
+ * one `<script type="module" src="/client/counter.tsx">` and no import map, under whatever path the app is routed at.
+ *
+ * Production runs without `typescript` (a deploy that leaves out devDependencies): `buildClientModules` writes the same compiled modules
+ * and the two browser files into a folder, and with `NODE_ENV=production` and `compiled` set, only that folder is served.
+ */
+
+import { copyFileSync, mkdirSync, readFileSync, readdirSync, realpathSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, extname, isAbsolute, join, relative, resolve, sep } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { Acryl } from '../../acryl-router/src/index.ts'
+import { basePath } from '../../acryl-router/src/helpers/index.ts'
+import { MissingTypeScriptError, compileModule } from './transpile.ts'
+
+/** The folder the two browser files are served from, below the app's mount. A source folder of this name is not served. */
+const RUNTIME_DIR = '@acrylblends'
+/** The framework's browser imports and the browser file that provides each. */
+const BROWSER_IMPORTS: Readonly<Record<string, string>> = {
+  'acrylblends/jsx/dom': 'jsx-dom.js',
+  'acrylblends/jsx/dom/jsx-runtime': 'jsx-dom.js',
+  'acrylblends/jsx/dom/jsx-dev-runtime': 'jsx-dom.js',
+  'acrylblends/jsx/dom/client': 'jsx-dom.js',
+  'acrylblends/client': 'client.js',
+}
+const RUNTIME_FILES = ['jsx-dom.js', 'client.js'] as const
+const COMPILED = new Set(['.ts', '.tsx', '.jsx', '.mts'])
+const SERVED = new Set([...COMPILED, '.js', '.mjs'])
+const JS_TYPE = 'text/javascript; charset=utf-8'
+/** The cache bound when `cacheBytes` is not given. */
+const DEFAULT_CACHE_BYTES = 16 * 1024 * 1024
+
+/** Options of {@link clientModules}. */
+export interface ClientModulesOptions {
+  /** The folder of client modules, absolute or relative to the working directory. */
+  readonly root: string
+  /** The folder {@link buildClientModules} wrote; with `NODE_ENV=production` it is served instead of compiling, which needs no `typescript`. */
+  readonly compiled?: string | undefined
+  /** At most this many bytes of compiled modules are kept in memory (least recently served first out); 16 MiB when not given. */
+  readonly cacheBytes?: number | undefined
+  /** The folder holding `jsx-dom.js` and `client.js`; the framework's own when not given. */
+  readonly runtimeDir?: string | undefined
+}
+
+/** Options of {@link buildClientModules}. */
+export interface BuildClientModulesOptions {
+  /** The folder of client modules, absolute or relative to the working directory. */
+  readonly root: string
+  /** Where the compiled modules go, at the same relative paths and file names; it must not lie inside `root`. */
+  readonly outDir: string
+  /** The folder holding `jsx-dom.js` and `client.js`; the framework's own when not given. */
+  readonly runtimeDir?: string | undefined
+}
+
+/** The framework's two browser files, next to the built module that contains this code. */
+const defaultRuntimeDir = (): string => fileURLToPath(new URL('./browser/', import.meta.url))
+
+/** A module path below the root (`widgets/counter.tsx`) with the URL prefix that reaches the browser files from it. */
+const runtimePrefix = (relativePath: string): string => {
+  const depth = relativePath.split('/').length - 1
+  return depth === 0 ? './' : '../'.repeat(depth)
+}
+
+/** One client module compiled for the browser: TypeScript and JSX compiled, the framework's imports pointed at its browser files. */
+function compileForBrowser(file: string, relativePath: string): string {
+  const prefix = runtimePrefix(relativePath)
+  return compileModule(file, readFileSync(file, 'utf8'), {
+    // A browser module renders with the DOM runtime whatever the server's tsconfig.json says; a file's own pragma still wins.
+    importSource: 'acrylblends/jsx/dom',
+    defaultImportSource: 'acrylblends/jsx/dom',
+    what: 'is a client module',
+    rewrite: (specifier) => {
+      const target = BROWSER_IMPORTS[specifier]
+      return target === undefined ? undefined : `${prefix}${RUNTIME_DIR}/${target}`
+    },
+  })
+}
+
+/**
+ * The path below the root a request names, or `undefined` when it must not be served: a `..` or dot segment, a backslash or NUL, an
+ * extension outside the served set, or a `.d.ts` file.
+ */
+function servedPath(requestPath: string): string | undefined {
+  let decoded: string
+  try {
+    decoded = decodeURIComponent(requestPath)
+  } catch {
+    return undefined
+  }
+  const parts = decoded.split('/').filter(part => part !== '')
+  if (parts.length === 0 || parts.some(part => part.startsWith('.') || part.includes('\\') || part.includes('\0'))) return undefined
+  const path = parts.join('/')
+  if (!SERVED.has(extname(path)) || path.endsWith('.d.ts')) return undefined
+  return path
+}
+
+/** A real file inside `root` (symbolic links followed), or `undefined`. */
+function fileInside(root: string, path: string): string | undefined {
+  try {
+    const file = realpathSync(join(root, ...path.split('/')))
+    return file.startsWith(root + sep) && statSync(file).isFile() ? file : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/** A file's validator: its size and modification time. */
+const etagOf = (stat: { size: number, mtimeMs: number }): string => `"${stat.size.toString(36)}-${Math.trunc(stat.mtimeMs).toString(36)}"`
+
+interface Cached {
+  readonly mtimeMs: number
+  readonly size: number
+  readonly etag: string
+  readonly code: string
+  readonly bytes: number
+}
+
+/** Compiled modules, least recently served first, bounded by the UTF-8 bytes of their code. Exported for its tests. */
+export class CompileCache {
+  private readonly entries = new Map<string, Cached>()
+  private bytes = 0
+  private readonly limit: number
+  constructor(limit: number) {
+    this.limit = limit
+  }
+
+  get(file: string, mtimeMs: number, size: number): Cached | undefined {
+    const entry = this.entries.get(file)
+    if (entry === undefined) return undefined
+    this.entries.delete(file)
+    if (entry.mtimeMs !== mtimeMs || entry.size !== size) {
+      this.bytes -= entry.bytes
+      return undefined
+    }
+    this.entries.set(file, entry)
+    return entry
+  }
+
+  set(file: string, stat: { mtimeMs: number, size: number }, code: string): Cached {
+    const entry: Cached = { mtimeMs: stat.mtimeMs, size: stat.size, etag: etagOf(stat), code, bytes: Buffer.byteLength(code) }
+    const previous = this.entries.get(file)
+    if (previous !== undefined) {
+      this.entries.delete(file)
+      this.bytes -= previous.bytes
+    }
+    // A module larger than the whole bound is served but not kept.
+    if (entry.bytes > this.limit) return entry
+    this.entries.set(file, entry)
+    this.bytes += entry.bytes
+    for (const [key, old] of this.entries) {
+      if (this.bytes <= this.limit) break
+      this.entries.delete(key)
+      this.bytes -= old.bytes
+    }
+    return entry
+  }
+
+  /** The UTF-8 bytes of code held now. */
+  get heldBytes(): number {
+    return this.bytes
+  }
+
+  /** The files held now, least recently served first. */
+  get files(): string[] {
+    return [...this.entries.keys()]
+  }
+}
+
+const absolute = (path: string): string => (isAbsolute(path) ? path : resolve(path))
+
+/** A folder's real path; one that does not exist (a production image that ships only the compiled folder) keeps its absolute path. */
+const realFolder = (path: string): string => {
+  try {
+    return realpathSync(absolute(path))
+  } catch {
+    return absolute(path)
+  }
+}
+
+/**
+ * An app serving a folder of client modules to the browser. Route it where the page's script tags point: `app.route('/client',
+ * clientModules({ root: 'src/client' }))` serves `src/client/counter.tsx` at `/client/counter.tsx`. Files are compiled on request and
+ * cached until they change (bounded by `cacheBytes`); a response carries an ETag and `Cache-Control: no-cache`, so an edit shows on the
+ * next reload. With `NODE_ENV=production` and `compiled` set, only the `compiled` folder is served and nothing is compiled.
+ * @param options - the folder, the precompiled folder, and the cache bound.
+ * @returns the app.
+ */
+export function clientModules(options: ClientModulesOptions): Acryl {
+  const root = realFolder(options.root)
+  const runtimeDir = absolute(options.runtimeDir ?? defaultRuntimeDir())
+  let compiled: string | undefined
+  if (process.env.NODE_ENV === 'production' && options.compiled !== undefined) {
+    try {
+      compiled = realpathSync(absolute(options.compiled))
+    } catch {
+      throw new Error(`acrylblends: the compiled client folder ${absolute(options.compiled)} does not exist; build it with buildClientModules before starting in production`)
+    }
+  }
+  const cache = new CompileCache(options.cacheBytes ?? DEFAULT_CACHE_BYTES)
+
+  const app = new Acryl()
+  app.get('/*', (c) => {
+    const requestPath = c.req.path.slice(basePath(c).length)
+    const runtime = /^\/@acrylblends\/([a-z-]+\.js)$/u.exec(requestPath)?.[1]
+    const send = (code: string, etag: string): Response => {
+      if (c.req.header('if-none-match') === etag) return c.body(null, 304, { etag, 'cache-control': 'no-cache' })
+      return c.body(code, 200, { 'content-type': JS_TYPE, etag, 'cache-control': 'no-cache' })
+    }
+    const serveFile = (file: string): Response => {
+      const stat = statSync(file)
+      return send(readFileSync(file, 'utf8'), etagOf(stat))
+    }
+
+    if (runtime !== undefined) {
+      if (!(RUNTIME_FILES as readonly string[]).includes(runtime)) return c.notFound()
+      return serveFile(compiled === undefined ? join(runtimeDir, runtime) : join(compiled, RUNTIME_DIR, runtime))
+    }
+    const path = servedPath(requestPath)
+    if (path === undefined || path.split('/')[0] === RUNTIME_DIR) return c.notFound()
+
+    if (compiled !== undefined) {
+      const file = fileInside(compiled, path)
+      if (file !== undefined) return serveFile(file)
+      if (fileInside(root, path) !== undefined) {
+        return c.text(`acrylblends: ${path} is not in ${relative(process.cwd(), compiled) || compiled}; build the client modules again (buildClientModules)`, 500)
+      }
+      return c.notFound()
+    }
+
+    const file = fileInside(root, path)
+    if (file === undefined) return c.notFound()
+    if (!COMPILED.has(extname(file))) return serveFile(file)
+    const stat = statSync(file)
+    let entry = cache.get(file, stat.mtimeMs, stat.size)
+    if (entry === undefined) {
+      let code: string
+      try {
+        code = compileForBrowser(file, path)
+      } catch (error) {
+        if (error instanceof MissingTypeScriptError) return c.text(error.message, 500)
+        throw error
+      }
+      entry = cache.set(file, stat, code)
+    }
+    return send(entry.code, entry.etag)
+  })
+  return app
+}
+
+/** Every served file below `dir`, as paths below `root` with `/` separators; dot entries, `node_modules` and the runtime folder skipped. */
+function sourceFiles(root: string, dir = root): string[] {
+  const files: string[] = []
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name.startsWith('.') || entry.name === 'node_modules' || (dir === root && entry.name === RUNTIME_DIR)) continue
+    const full = join(dir, entry.name)
+    if (entry.isDirectory()) files.push(...sourceFiles(root, full))
+    else if (entry.isFile() && SERVED.has(extname(entry.name)) && !entry.name.endsWith('.d.ts')) files.push(relative(root, full).split(sep).join('/'))
+  }
+  return files.sort()
+}
+
+/**
+ * Compile a folder of client modules once, for a production that has no `typescript`: each module is written to `outDir` at the same
+ * relative path and file name (so the page's URLs stay the same), compiled exactly as {@link clientModules} compiles it, and the two
+ * browser files are copied to `outDir/@acrylblends/`. Files already in `outDir` that no source produces are left there.
+ * @param options - the source folder and the output folder.
+ * @returns the paths written, relative to `outDir`.
+ * @throws MissingTypeScriptError when the app has no `typescript`; an error when `outDir` lies inside `root`.
+ */
+export function buildClientModules(options: BuildClientModulesOptions): string[] {
+  const root = realpathSync(absolute(options.root))
+  const outDir = absolute(options.outDir)
+  const runtimeDir = absolute(options.runtimeDir ?? defaultRuntimeDir())
+  if (outDir === root || outDir.startsWith(root + sep)) throw new Error(`acrylblends: the output folder ${outDir} lies inside the client folder ${root}`)
+  const written: string[] = []
+  for (const path of sourceFiles(root)) {
+    const source = join(root, ...path.split('/'))
+    const target = join(outDir, ...path.split('/'))
+    mkdirSync(dirname(target), { recursive: true })
+    if (COMPILED.has(extname(path))) writeFileSync(target, compileForBrowser(source, path))
+    else copyFileSync(source, target)
+    written.push(path)
+  }
+  mkdirSync(join(outDir, RUNTIME_DIR), { recursive: true })
+  for (const name of RUNTIME_FILES) {
+    copyFileSync(join(runtimeDir, name), join(outDir, RUNTIME_DIR, name))
+    written.push(`${RUNTIME_DIR}/${name}`)
+  }
+  return written
+}

package/plugins/acryl-node-server/src/register.ts

@@ -7,73 +7,15 @@
  * `typescript` is loaded from the app, on the first JSX file only; the framework itself has no dependencies.
  */
 
-import { createRequire, registerHooks } from 'node:module'
-import { existsSync, readFileSync } from 'node:fs'
-import { dirname } from 'node:path'
+import { registerHooks } from 'node:module'
+import { readFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
+import { compileModule } from './transpile.ts'
 
 /** The JSX runtime the docs set up; an app's tsconfig.json (or a file's own `@jsxImportSource` pragma) chooses another. */
 const DEFAULT_IMPORT_SOURCE = 'acrylblends/jsx'
 const JSX_FILE = /\.[jt]sx$/u
 
-/** The part of the TypeScript compiler API the hook uses. */
-interface Compiler {
-  transpileModule(input: string, options: { fileName: string, compilerOptions: Record<string, unknown> }): { outputText: string }
-  findConfigFile(searchPath: string, fileExists: (path: string) => boolean): string | undefined
-  readConfigFile(path: string, readFile: (path: string) => string | undefined): { config?: unknown }
-  parseJsonConfigFileContent(json: unknown, host: unknown, basePath: string): { options: { jsxImportSource?: string } }
-  sys: { fileExists(path: string): boolean, readFile(path: string): string | undefined }
-}
-
-const compilers = new Map<string, Compiler>()
-const importSources = new Map<string, string>()
-
-/** The app's own `typescript`, resolved from the JSX file, so each app compiles with the version it pinned. */
-function compilerFor(file: string): Compiler {
-  let path: string
-  try {
-    path = createRequire(file).resolve('typescript')
-  } catch {
-    throw new Error(`acrylblends: ${file} contains JSX, and compiling it needs the typescript package in this app: npm install --save-dev typescript`)
-  }
-  let compiler = compilers.get(path)
-  if (compiler === undefined) {
-    compiler = createRequire(path)(path) as Compiler
-    compilers.set(path, compiler)
-  }
-  return compiler
-}
-
-/** `jsxImportSource` of the tsconfig.json nearest to the file (following `extends`), read once per config. */
-function importSourceFor(file: string, ts: Compiler): string {
-  const config = ts.findConfigFile(dirname(file), path => existsSync(path))
-  if (config === undefined) return DEFAULT_IMPORT_SOURCE
-  let source = importSources.get(config)
-  if (source === undefined) {
-    const { config: json } = ts.readConfigFile(config, path => ts.sys.readFile(path))
-    source = ts.parseJsonConfigFileContent(json ?? {}, ts.sys, dirname(config)).options.jsxImportSource ?? DEFAULT_IMPORT_SOURCE
-    importSources.set(config, source)
-  }
-  return source
-}
-
-/** A JSX module compiled to JavaScript, with its source map inline. */
-function compileJsx(file: string, text: string): string {
-  const ts = compilerFor(file)
-  return ts.transpileModule(text, {
-    fileName: file,
-    compilerOptions: {
-      module: 'esnext',
-      target: 'es2022',
-      jsx: 'react-jsx',
-      jsxImportSource: importSourceFor(file, ts),
-      allowImportingTsExtensions: true,
-      inlineSourceMap: true,
-      inlineSources: true,
-    },
-  }).outputText
-}
-
 process.setSourceMapsEnabled(true)
 
 registerHooks({
@@ -81,6 +23,7 @@ registerHooks({
     // Every other module goes straight to Node: the hook's whole cost for them is this test.
     if (!url.startsWith('file:') || !JSX_FILE.test(new URL(url).pathname)) return nextLoad(url, context)
     const file = fileURLToPath(url)
-    return { format: 'module', source: compileJsx(file, readFileSync(file, 'utf8')), shortCircuit: true }
+    const source = compileModule(file, readFileSync(file, 'utf8'), { defaultImportSource: DEFAULT_IMPORT_SOURCE, what: 'contains JSX' })
+    return { format: 'module', source, shortCircuit: true }
   },
 })