From 59aba317dcea16f393f7a3b9a668901de4d56df6 Mon Sep 17 00:00:00 2001
From: Remco Haszing <remcohaszing@gmail.com>
Date: Thu, 6 Mar 2025 13:20:58 +0100
Subject: [PATCH] Replace custom loader with @node-loaders/tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We need a loader to load our JSX test file. We currently use a local
script, but there are several packages that do this. We don’t need to
maintain our own.

This replaces our custom loader with `@nodejs-loaders/tsx` by the
Node.js team.
---
 package.json       |  6 ++--
 script/load-jsx.js | 89 ----------------------------------------------
 2 files changed, 3 insertions(+), 92 deletions(-)
 delete mode 100644 script/load-jsx.js

diff --git a/package.json b/package.json
index d0689a33..40a4e648 100644
--- a/package.json
+++ b/package.json
@@ -62,13 +62,13 @@
   },
   "description": "React component to render markdown",
   "devDependencies": {
+    "@nodejs-loaders/tsx": "^1.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "c8": "^10.0.0",
     "concat-stream": "^2.0.0",
-    "esbuild": "^0.25.0",
     "eslint-plugin-react": "^7.0.0",
     "global-jsdom": "^26.0.0",
     "prettier": "^3.0.0",
@@ -133,8 +133,8 @@
   "scripts": {
     "build": "tsc --build --clean && tsc --build && type-coverage",
     "format": "remark --frail --output --quiet -- . && prettier --log-level warn --write -- . && xo --fix",
-    "test-api": "node --conditions development --experimental-loader=./script/load-jsx.js --no-warnings test.jsx",
-    "test-coverage": "c8 --100 --exclude script/ --reporter lcov -- npm run test-api",
+    "test-api": "node --conditions development --experimental-loader=@nodejs-loaders/tsx --no-warnings test.jsx",
+    "test-coverage": "c8 --100 --reporter lcov -- npm run test-api",
     "test": "npm run build && npm run format && npm run test-coverage"
   },
   "sideEffects": false,
diff --git a/script/load-jsx.js b/script/load-jsx.js
deleted file mode 100644
index d78a33c7..00000000
--- a/script/load-jsx.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import fs from 'node:fs/promises'
-import {fileURLToPath} from 'node:url'
-import {transform} from 'esbuild'
-
-const {getFormat, load, transformSource} = createLoader()
-
-export {getFormat, load, transformSource}
-
-/**
- * A tiny JSX loader.
- */
-export function createLoader() {
-  return {load, getFormat, transformSource}
-
-  // Node version 17.
-  /**
-   * @param {string} href
-   * @param {unknown} context
-   * @param {Function} defaultLoad
-   */
-  async function load(href, context, defaultLoad) {
-    const url = new URL(href)
-
-    if (!url.pathname.endsWith('.jsx')) {
-      return defaultLoad(href, context, defaultLoad)
-    }
-
-    const {code, warnings} = await transform(String(await fs.readFile(url)), {
-      format: 'esm',
-      loader: 'jsx',
-      sourcefile: fileURLToPath(url),
-      sourcemap: 'both',
-      target: 'esnext'
-    })
-
-    if (warnings) {
-      for (const warning of warnings) {
-        console.log(warning.location)
-        console.log(warning.text)
-      }
-    }
-
-    return {format: 'module', shortCircuit: true, source: code}
-  }
-
-  // Pre version 17.
-  /**
-   * @param {string} href
-   * @param {unknown} context
-   * @param {Function} defaultGetFormat
-   */
-  function getFormat(href, context, defaultGetFormat) {
-    const url = new URL(href)
-
-    return url.pathname.endsWith('.jsx')
-      ? {format: 'module'}
-      : defaultGetFormat(href, context, defaultGetFormat)
-  }
-
-  /**
-   * @param {Buffer} value
-   * @param {{url: string, [x: string]: unknown}} context
-   * @param {Function} defaultTransformSource
-   */
-  async function transformSource(value, context, defaultTransformSource) {
-    const url = new URL(context.url)
-
-    if (!url.pathname.endsWith('.jsx')) {
-      return defaultTransformSource(value, context, defaultTransformSource)
-    }
-
-    const {code, warnings} = await transform(String(value), {
-      format: context.format === 'module' ? 'esm' : 'cjs',
-      loader: 'jsx',
-      sourcefile: fileURLToPath(url),
-      sourcemap: 'both',
-      target: 'esnext'
-    })
-
-    if (warnings) {
-      for (const warning of warnings) {
-        console.log(warning.location)
-        console.log(warning.text)
-      }
-    }
-
-    return {source: code}
-  }
-}