From a3f838c9a998b1403b1937575c3bbe72bdeda8f7 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 12 Apr 2024 00:38:39 -0700
Subject: [PATCH] more fixes

---
 docs/lib/react.md | 30 ++++++++++++++++++++++++++----
 src/node.ts       |  8 +++++---
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/docs/lib/react.md b/docs/lib/react.md
index 8eb524958..c2b4099fc 100644
--- a/docs/lib/react.md
+++ b/docs/lib/react.md
@@ -1,13 +1,35 @@
 # React
 
 ```js echo
-import {createElement} from "react";
+import {createRoot} from "react-dom/client";
 
-display(createElement);
+const root = createRoot(display(document.createElement("DIV")));
 ```
 
 ```js echo
-import {createRoot} from "react-dom/client";
+root.render(createContent());
+```
+
+```js echo
+import {Fragment, jsx, jsxs} from "react/jsx-runtime";
 
-display(createRoot);
+function createContent() {
+  return jsxs(Fragment, {
+    children: [jsx("h1", {
+      children: "Hello, world!"
+    }), "\n", jsx("p", {
+      children: "Below is an example of markdown in JSX."
+    }), "\n", jsx("div", {
+      style: {
+        backgroundColor: 'violet',
+        padding: '1rem'
+      },
+      children: jsxs("p", {
+        children: ["Try and change the background color to ", jsx("code", {
+          children: "tomato"
+        }), "."]
+      })
+    })]
+  });
+}
 ```
diff --git a/src/node.ts b/src/node.ts
index f0bf6cedb..6fa25754e 100644
--- a/src/node.ts
+++ b/src/node.ts
@@ -2,7 +2,7 @@ import {existsSync} from "node:fs";
 import {copyFile, readFile, writeFile} from "node:fs/promises";
 import {createRequire} from "node:module";
 import op from "node:path";
-import {dirname, extname, join, relative} from "node:path/posix";
+import {extname, join} from "node:path/posix";
 import {pathToFileURL} from "node:url";
 import commonjs from "@rollup/plugin-commonjs";
 import {nodeResolve} from "@rollup/plugin-node-resolve";
@@ -14,7 +14,7 @@ import {prepareOutput, toOsPath} from "./files.js";
 import type {ImportReference} from "./javascript/imports.js";
 import {isJavaScript, parseImports} from "./javascript/imports.js";
 import {parseNpmSpecifier, rewriteNpmImports} from "./npm.js";
-import {isPathImport} from "./path.js";
+import {isPathImport, relativePath} from "./path.js";
 import {faint} from "./tty.js";
 
 export async function resolveNodeImport(root: string, spec: string): Promise<string> {
@@ -72,6 +72,8 @@ async function resolveNodeImportInternal(cacheRoot: string, packageRoot: string,
 function overrideNodeResolution(specifier: string, packageResolution: string): string {
   return specifier === "react"
     ? op.join(packageResolution, "cjs", "react.production.min.js")
+    : specifier === "react/jsx-runtime"
+    ? op.join(packageResolution, "cjs", "react-jsx-runtime.production.min.js")
     : specifier === "react-dom" || specifier === "react-dom/client"
     ? op.join(packageResolution, "cjs", "react-dom.production.min.js")
     : specifier === "scheduler"
@@ -124,7 +126,7 @@ async function bundle(path: string, input: string, cacheRoot: string, packageRoo
   try {
     const output = await bundle.generate({format: "es", exports: "named"});
     const code = output.output.find((o): o is OutputChunk => o.type === "chunk")!.code;
-    return rewriteNpmImports(code, (i) => (i.startsWith("/_node/") ? relative(dirname(path), i) : i));
+    return rewriteNpmImports(code, (i) => (i.startsWith("/_node/") ? relativePath(path, i) : i));
   } finally {
     await bundle.close();
   }