Some web tooling changes

- Switch to tsx from ts-node, fixing issues on Node 20
 - Update rehype

package.json

@@ -18,12 +18,12 @@
     "glob": "^10.3.4",
     "react-dom": "^18.1.0",
     "react": "^18.1.0",
-    "rehype-highlight": "^6.0.0",
+    "rehype-highlight": "^7.0.0",
-    "rehype-react": "^7.1.1",
+    "rehype-react": "^8.0.0",
-    "rehype": "^12.0.0",
+    "rehype": "^13.0.0",
     "requirejs": "^2.3.6",
     "rollup": "^3.19.1",
-    "ts-node": "^10.8.0",
+    "tsx": "^3.12.10",
     "typescript": "^5.2.2"
   }
 }

projects/web/build.gradle.kts

@@ -67,7 +67,7 @@ val jsxDocs by tasks.registering(cc.tweaked.gradle.NpxExecToDir::class) {
     // Output directory. Also defined in src/transform.tsx
     output.set(buildDir.resolve("jsxDocs"))
 
-    args = listOf("ts-node", "-T", "--esm", "src/transform.tsx")
+    args = listOf("tsx", "src/transform.tsx")
 }
 
 val docWebsite by tasks.registering(Copy::class) {

projects/web/src/components/Recipe.tsx

@@ -4,7 +4,7 @@
 
 import type { FunctionComponent } from "react";
 import { createElement as h } from "react";
-import useExport from "./WithExport.js";
+import useExport from "./WithExport";
 
 const Item: FunctionComponent<{ item: string }> = ({ item }) => {
     const data = useExport();

projects/web/src/transform.tsx

@@ -13,38 +13,38 @@
 import * as fs from "fs/promises";
 import { glob } from "glob";
 import * as path from "path";
-import { createElement, createElement as h, Fragment } from 'react';
+import { createElement as h } from 'react';
+import runtime from 'react/jsx-runtime';
 import { renderToStaticMarkup } from "react-dom/server";
 import rehypeHighlight from "rehype-highlight";
 import rehypeParse from 'rehype-parse';
-import rehypeReact from 'rehype-react';
+import rehypeReact, { type Options as ReactOptions } from 'rehype-react';
 import { unified } from 'unified';
 // Our components
-import Recipe from "./components/Recipe.js";
+import Recipe from "./components/Recipe";
-import { noChildren } from "./components/support.js";
+import { noChildren } from "./components/support";
-import { type DataExport, WithExport } from "./components/WithExport.js";
+import { type DataExport, WithExport } from "./components/WithExport";
 
 (async () => {
     const base = "build/illuaminate";
 
+    const reactOptions: ReactOptions = {
+        ...(runtime as ReactOptions),
+        components: {
+            ['mc-recipe']: noChildren(Recipe),
+            ['mcrecipe']: noChildren(Recipe),
+            // Wrap example snippets in a <div class="lua-example">...</div>, so we can inject a
+            // Run button into them.
+            ['pre']: (args: JSX.IntrinsicElements["pre"] & { "data-lua-kind"?: undefined }) => {
+                const element = <pre {...args} />;
+                return args["data-lua-kind"] ? <div className="lua-example">{element}</div> : element
+            }
+        } as any
+    };
     const processor = unified()
         .use(rehypeParse, { emitParseErrors: true })
         .use(rehypeHighlight, { prefix: "" })
-        .use(rehypeReact, {
+        .use(rehypeReact, reactOptions);
-            createElement,
-            Fragment,
-            passNode: false,
-            components: {
-                ['mc-recipe']: noChildren(Recipe),
-                ['mcrecipe']: noChildren(Recipe),
-                // Wrap example snippets in a <div class="lua-example">...</div>, so we can inject a
-                // Run button into them.
-                ['pre']: (args: JSX.IntrinsicElements["pre"] & { "data-lua-kind"?: undefined }) => {
-                    const element = <pre {...args} />;
-                    return args["data-lua-kind"] ? <div className="lua-example">{element}</div> : element
-                }
-            } as any
-        });
 
     const dataExport = JSON.parse(await fs.readFile("src/export/index.json", "utf-8")) as DataExport;