@backtickjs/jsx-react 0.0.0-stage → 0.1.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jean-François Bisson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,104 @@
-# Temporary Holding Version
+# @backtickjs/jsx-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React's JSX for [Backtick](https://backtickjs.com): a JSX runtime that type-checks the JSX in your server components against React's own types, and a compile plugin that runs React's JSX transform on each script at build time. React itself is imported for the client, as React Native and any other package is: `import { useState } from "react" with { backtick: "client" }`. React is a peer dependency: this package is built against React 19.2.3, and works with any later 19.x.
+
+## Install
+
+```sh
+npm install react @backtickjs/jsx-react @backtickjs/core @backtickjs/bundler @backtickjs/node-plugin
+npm install -D @types/react @backtickjs/tsc
+```
+
+The [repository's README](https://github.com/backtickjs/backtick#packages) says what each package is.
+
+## Setup
+
+In `tsconfig.json`, point JSX at this package and keep imports as written:
+
+```jsonc
+{
+  "compilerOptions": {
+    "verbatimModuleSyntax": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@backtickjs/jsx-react",
+  },
+}
+```
+
+`verbatimModuleSyntax` keeps the import of a name you only splice, such as a client component from another file, which TypeScript would otherwise drop as unused.
+
+In `package.json`, name the compile plugin:
+
+```json
+{
+  "backtick": {
+    "plugins": ["@backtickjs/jsx-react/plugin"]
+  }
+}
+```
+
+Run your server with `node --import @backtickjs/node-plugin server/index.tsx`.
+
+## Usage
+
+A client component, with React's hook imported for the client, and a server component that draws it beside a server value:
+
+```tsx
+// server/Home.tsx
+import { cs } from "@backtickjs/core";
+import { useState } from "react" with { backtick: "client" };
+
+const Counter = cs`() => {
+  const [count, setCount] = $useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
+  );
+}`;
+
+export async function Home() {
+  const assembledAt = new Date().toLocaleTimeString();
+  return cs`(
+    <main>
+      <$Counter />
+      <p>Your server assembled this page at {$assembledAt}.</p>
+    </main>
+  )`;
+}
+```
+
+On each request, bundle it for the React versions the page loads, and serve the result as a `<script type="module">`, with an import map that resolves `react`, `react/jsx-runtime` and `react-dom/client`:
+
+```tsx
+import { bundler } from "@backtickjs/bundler";
+import { cs } from "@backtickjs/core";
+import { createRoot } from "react-dom/client" with { backtick: "client" };
+import { Home } from "./Home.js";
+
+const element = <Home />;
+const bundle = await bundler.build({
+  input: cs`$createRoot(document.getElementById("app")!).render($element)`,
+  modules: {
+    react: "19.2.3",
+    "react/jsx-runtime": "19.2.3",
+    "react-dom/client": "19.2.3",
+  },
+});
+const { code } = bundle.generate({ format: "es" });
+```
+
+## What it exports
+
+- `@backtickjs/jsx-react/jsx-runtime` and `@backtickjs/jsx-react/jsx-dev-runtime`: the JSX runtime for server components, and its `JSX` namespace.
+- `@backtickjs/jsx-react/plugin`: the compile plugin, React's JSX transform, by TypeScript's own `react-jsx` emit.
+
+## Related
+
+- [`@backtickjs/core`](https://github.com/backtickjs/backtick/tree/main/packages/core): the `cs` tag
+- [`@backtickjs/bundler`](https://github.com/backtickjs/backtick/tree/main/packages/bundler): builds bundles
+- [`@backtickjs/jsx-solid`](https://github.com/backtickjs/backtick/tree/main/packages/jsx-solid): Solid's JSX
+- [Thinking in Backtick](https://backtickjs.com/docs/thinking-in-backtick/)
+- [How it works](https://backtickjs.com/docs/how-it-works/)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "./jsx-runtime.js";
+/**
+ * What the JSX transform calls, from this package's root, for a tag whose
+ * `key` follows a spread, so it can't pass the key apart: `jsx`, with the key
+ * and the children taken out of the props.
+ */
+export declare function createElement(type: JSX.ElementType, config: object | null, ...children: unknown[]): JSX.Element;

package/dist/index.js

@@ -0,0 +1,14 @@
+import { jsx } from "./jsx-runtime.js";
+/**
+ * What the JSX transform calls, from this package's root, for a tag whose
+ * `key` follows a spread, so it can't pass the key apart: `jsx`, with the key
+ * and the children taken out of the props.
+ */
+export function createElement(type, config, ...children) {
+    const { key, ...props } = (config ?? {});
+    if (children.length > 0) {
+        props.children = children.length === 1 ? children[0] : children;
+    }
+    return jsx(type, props, key);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,IAAqB,EACrB,MAAqB,EACrB,GAAG,QAAmB;IAEtB,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,CAAC,MAAM,IAAI,EAAE,CAGtC,CAAC;IACF,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxB,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClE,CAAC;IACD,OAAO,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AAC/B,CAAC"}

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,23 @@
+import { type Client, type JsxElementOf, type JsxElementTypeOf, type Spliceable } from "@backtickjs/core";
+import type { JSX as React, ReactElement, ReactNode } from "react";
+export declare namespace JSX {
+    type Element = JsxElementOf<React.Element>;
+    type ElementType = JsxElementTypeOf<ReactNode> | React.ElementType;
+    type ElementClass = React.ElementClass;
+    type ElementAttributesProperty = React.ElementAttributesProperty;
+    type ElementChildrenAttribute = React.ElementChildrenAttribute;
+    type LibraryManagedAttributes<C, P> = React.LibraryManagedAttributes<C, P>;
+    type IntrinsicAttributes = React.IntrinsicAttributes;
+    type IntrinsicClassAttributes<T> = React.IntrinsicClassAttributes<T>;
+    type IntrinsicElements = React.IntrinsicElements;
+}
+/**
+ * `<>` and `<Fragment>` on the host: its children as React's fragment's, each
+ * an argument rather than an array, so React asks none of them for a key.
+ */
+export declare function Fragment(props: {
+    children?: Spliceable;
+}): Client<ReactElement>;
+export declare function jsx(type: JSX.ElementType, props: unknown, key?: string | number): JSX.Element;
+export declare const jsxs: typeof jsx;
+export declare const jsxDEV: typeof jsx;

package/dist/jsx-runtime.js

@@ -0,0 +1,48 @@
+import { createJsxElement, cs, } from "@backtickjs/core";
+const createElement = { "@backtickjs": "ClientImport", name: "createElement", from: "react", version: "19.2.3" };
+const ReactFragment = { "@backtickjs": "ClientImport", name: "Fragment", from: "react", version: "19.2.3" };
+const $module0 = {
+    id: "2qc9pgkww5cp4:45:9",
+    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = (($splice0, $splice1, $splice2) => $splice0()($splice1(), null, ...$splice2()));\n}",
+    map: "{\"version\":3,\"file\":\"module.jsx\",\"mappings\":\";;;mBA4CY,4CAAc,CACtB,UAAc,EACd,IAAI,EACJ,GAAI,UAAyB,CAC9B\",\"names\":[],\"ignoreList\":[],\"sources\":[\"@backtickjs/jsx-react/src/jsx-runtime.ts\"]}",
+    dependencies: [],
+    params: [{ kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }],
+    kind: "expression"
+};
+const $module1 = {
+    id: "2qc9pgkww5cp4:70:9",
+    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = (($splice0, $splice1, $splice2, $splice3) => $splice0()($splice1(), { key: $splice2() }, $splice3()));\n}",
+    map: "{\"version\":3,\"file\":\"module.jsx\",\"mappings\":\";;;mBAqEY,sDAAc,CACtB,UAAc,EACd,EAAE,GAAG,EAAE,UAAI,EAAE,EACb,UAAQ,CACT\",\"names\":[],\"ignoreList\":[],\"sources\":[\"@backtickjs/jsx-react/src/jsx-runtime.ts\"]}",
+    dependencies: [],
+    params: [{ kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }],
+    kind: "expression"
+};
+/**
+ * `<>` and `<Fragment>` on the host: its children as React's fragment's, each
+ * an argument rather than an array, so React asks none of them for a key.
+ */
+export function Fragment(props) {
+    const children = props.children === undefined
+        ? []
+        : Array.isArray(props.children)
+            ? props.children
+            : [props.children];
+    return cs.create($module0, [createElement, ReactFragment, children]);
+}
+// A server component's element: expanded on the host when a bundle is built,
+// what it answers standing where it stood. Hooks belong to client components,
+// as in React: a server component's output is a node, never rendered as one.
+// Its `key`, which the JSX transform passes apart from the props, keys a
+// fragment around that node, so React can tell a list's entries apart.
+export function jsx(type, props, key) {
+    // Core's element, as this package types it: a stand-in for a React element.
+    const element = createJsxElement(type, props);
+    if (key === undefined) {
+        return element;
+    }
+    return cs.create($module1, [createElement, ReactFragment, key, element]);
+}
+export const jsxs = jsx;
+// What a development build of the JSX transform calls, as Bun does.
+export const jsxDEV = jsx;
+//# sourceMappingURL=jsx-runtime.js.map

package/dist/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,EAAE,GAKH,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;AAwB1B;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,KAExB;IACC,MAAM,QAAQ,GACZ,KAAK,CAAC,QAAQ,KAAK,SAAS;QAC1B,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC7B,CAAC,CAAC,KAAK,CAAC,QAAQ;YAChB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,qEAIG;AACL,CAAC;AAED,6EAA6E;AAC7E,8EAA8E;AAC9E,6EAA6E;AAC7E,yEAAyE;AACzE,uEAAuE;AACvE,MAAM,UAAU,GAAG,CACjB,IAAqB,EACrB,KAAc,EACd,GAAqB;IAErB,4EAA4E;IAC5E,MAAM,OAAO,GAAG,gBAAgB,CAC9B,IAAiC,EACjC,KAAK,CACoB,CAAC;IAC5B,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,iEAIU,CAAC;AACpB,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC;AACxB,oEAAoE;AACpE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React's JSX transform as a build's compile step: a script's module, its JSX
+ * as calls of `react/jsx-runtime`'s `jsx`, written by TypeScript's own
+ * `react-jsx` emit. Typed by its shape, which is the compiler's `Plugin`, so
+ * this package needn't depend on the compiler.
+ */
+export declare function react(): (code: string, id: string) => {
+    code: string;
+    map: string;
+};
+export default react;

package/dist/plugin.js

@@ -0,0 +1,28 @@
+import ts from "typescript";
+/**
+ * React's JSX transform as a build's compile step: a script's module, its JSX
+ * as calls of `react/jsx-runtime`'s `jsx`, written by TypeScript's own
+ * `react-jsx` emit. Typed by its shape, which is the compiler's `Plugin`, so
+ * this package needn't depend on the compiler.
+ */
+export function react() {
+    return (code, id) => {
+        const { outputText, sourceMapText } = ts.transpileModule(code, {
+            fileName: id,
+            compilerOptions: {
+                jsx: ts.JsxEmit.ReactJSX,
+                module: ts.ModuleKind.ESNext,
+                target: ts.ScriptTarget.ESNext,
+                sourceMap: true,
+            },
+        });
+        return {
+            code: outputText.replace(/\n\/\/# sourceMappingURL=.*$/, ""),
+            map: sourceMapText,
+        };
+    };
+}
+// What a project names to compile its scripts for React, in its `package.json`:
+// `"backtick": { "plugins": ["@backtickjs/jsx-react/plugin"] }`.
+export default react;
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B;;;;;GAKG;AACH,MAAM,UAAU,KAAK;IAInB,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE;QAClB,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE;YAC7D,QAAQ,EAAE,EAAE;YACZ,eAAe,EAAE;gBACf,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ;gBACxB,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM;gBAC5B,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM;gBAC9B,SAAS,EAAE,IAAI;aAChB;SACF,CAAC,CAAC;QACH,OAAO;YACL,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,8BAA8B,EAAE,EAAE,CAAC;YAC5D,GAAG,EAAE,aAAc;SACpB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,gFAAgF;AAChF,iEAAiE;AACjE,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,90 @@
 {
   "name": "@backtickjs/jsx-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.11",
+  "description": "React's JSX for Backtick: a JSX runtime for server components, and the compile plugin for scripts",
+  "keywords": [
+    "backtick",
+    "react-native",
+    "server-driven-ui",
+    "server-components",
+    "react",
+    "jsx-runtime"
+  ],
+  "homepage": "https://backtickjs.com",
+  "bugs": {
+    "url": "https://github.com/backtickjs/backtick/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/backtickjs/backtick.git",
+    "directory": "packages/jsx-react"
+  },
+  "license": "MIT",
+  "author": "Jean-François Bisson <jf@backtickjs.com>",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "default": "./dist/plugin.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/._cache",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "backtick-tsc -p tsconfig.build.json --noEmit",
+    "build": "tspc -b --noCheck --force",
+    "dev": "tspc -b --noCheck --watch",
+    "test": "node --test \"test/**/*.test.ts\"",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check --ignore-unknown .",
+    "clean": "rm -rf node_modules dist .turbo",
+    "prepack": "cp ../../LICENSE ."
+  },
+  "dependencies": {
+    "@backtickjs/core": "^0.1.11"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "typescript": "^6.0.3"
+  },
+  "devDependencies": {
+    "@backtickjs/bundler": "^0.1.11",
+    "@backtickjs/compiler": "^0.1.11",
+    "@backtickjs/prettier-plugin": "^0.1.11",
+    "@backtickjs/tsc": "^0.1.11",
+    "@backtickjs/tspatch-plugin": "^0.1.11",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "global-jsdom": "^30.0.0",
+    "jsdom": "^30.0.1",
+    "prettier": "^3.6.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "ts-patch": "^4.0.1",
+    "typescript": "^6.0.3"
+  },
+  "prettier": {
+    "plugins": [
+      "@backtickjs/prettier-plugin"
+    ]
+  }
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+import { type JSX, jsx } from "./jsx-runtime.js";
+
+/**
+ * What the JSX transform calls, from this package's root, for a tag whose
+ * `key` follows a spread, so it can't pass the key apart: `jsx`, with the key
+ * and the children taken out of the props.
+ */
+export function createElement(
+  type: JSX.ElementType,
+  config: object | null,
+  ...children: unknown[]
+): JSX.Element {
+  const { key, ...props } = (config ?? {}) as {
+    key?: string | number;
+    [prop: string]: unknown;
+  };
+  if (children.length > 0) {
+    props.children = children.length === 1 ? children[0] : children;
+  }
+  return jsx(type, props, key);
+}

package/src/jsx-runtime.ts

@@ -0,0 +1,79 @@
+import {
+  createJsxElement,
+  cs,
+  type Client,
+  type JsxElementOf,
+  type JsxElementTypeOf,
+  type Spliceable,
+} from "@backtickjs/core";
+import type { JSX as React, ReactElement, ReactNode } from "react";
+import { createElement, Fragment as ReactFragment } from "react" with {
+  backtick: "client",
+};
+
+// JSX as React types it, for a host's JSX and a script's alike: an element is
+// also a client value, so a host hands one over, and a tag may also name a
+// server component, which answers a script.
+export declare namespace JSX {
+  export type Element = JsxElementOf<React.Element>;
+  export type ElementType = JsxElementTypeOf<ReactNode> | React.ElementType;
+  export type ElementClass = React.ElementClass;
+  export type ElementAttributesProperty = React.ElementAttributesProperty;
+  export type ElementChildrenAttribute = React.ElementChildrenAttribute;
+  export type LibraryManagedAttributes<C, P> = React.LibraryManagedAttributes<
+    C,
+    P
+  >;
+  export type IntrinsicAttributes = React.IntrinsicAttributes;
+  export type IntrinsicClassAttributes<T> = React.IntrinsicClassAttributes<T>;
+  export type IntrinsicElements = React.IntrinsicElements;
+}
+
+/**
+ * `<>` and `<Fragment>` on the host: its children as React's fragment's, each
+ * an argument rather than an array, so React asks none of them for a key.
+ */
+export function Fragment(props: {
+  children?: Spliceable;
+}): Client<ReactElement> {
+  const children: readonly Spliceable[] =
+    props.children === undefined
+      ? []
+      : Array.isArray(props.children)
+        ? props.children
+        : [props.children];
+  return cs`$createElement(
+    $ReactFragment,
+    null,
+    ...($children as ReactNode[]),
+  )`;
+}
+
+// A server component's element: expanded on the host when a bundle is built,
+// what it answers standing where it stood. Hooks belong to client components,
+// as in React: a server component's output is a node, never rendered as one.
+// Its `key`, which the JSX transform passes apart from the props, keys a
+// fragment around that node, so React can tell a list's entries apart.
+export function jsx(
+  type: JSX.ElementType,
+  props: unknown,
+  key?: string | number,
+): JSX.Element {
+  // Core's element, as this package types it: a stand-in for a React element.
+  const element = createJsxElement(
+    type as (props: never) => unknown,
+    props,
+  ) as unknown as JSX.Element;
+  if (key === undefined) {
+    return element;
+  }
+  return cs`$createElement(
+    $ReactFragment,
+    { key: $key },
+    $element,
+  )` as JSX.Element;
+}
+
+export const jsxs = jsx;
+// What a development build of the JSX transform calls, as Bun does.
+export const jsxDEV = jsx;

package/src/plugin.ts

@@ -0,0 +1,32 @@
+import ts from "typescript";
+
+/**
+ * React's JSX transform as a build's compile step: a script's module, its JSX
+ * as calls of `react/jsx-runtime`'s `jsx`, written by TypeScript's own
+ * `react-jsx` emit. Typed by its shape, which is the compiler's `Plugin`, so
+ * this package needn't depend on the compiler.
+ */
+export function react(): (
+  code: string,
+  id: string,
+) => { code: string; map: string } {
+  return (code, id) => {
+    const { outputText, sourceMapText } = ts.transpileModule(code, {
+      fileName: id,
+      compilerOptions: {
+        jsx: ts.JsxEmit.ReactJSX,
+        module: ts.ModuleKind.ESNext,
+        target: ts.ScriptTarget.ESNext,
+        sourceMap: true,
+      },
+    });
+    return {
+      code: outputText.replace(/\n\/\/# sourceMappingURL=.*$/, ""),
+      map: sourceMapText!,
+    };
+  };
+}
+
+// What a project names to compile its scripts for React, in its `package.json`:
+// `"backtick": { "plugins": ["@backtickjs/jsx-react/plugin"] }`.
+export default react;