以 .jsx 和 .tsx 结尾的文件通过相同的加载钩子执行。JSX 仅在 .jsx / .tsx 中被识别，从不在普通 .js 中。默认值是现代的——自动运行时、react 作为导入源——与 oxc-transformer、Vite 的 React 插件、Rolldown 和 Bun 一致，所以 React 项目无需设置。

nub render.tsx

compilerOptions.jsx

通过 tsconfig.json 配置 JSX 运行时，与你工具链的其余部分已经做的方式一致。这些 compilerOptions 被遵守：

  • jsx — 运行时模式。以下之一：

    "preserve" | "react" | "react-jsx" | "react-jsxdev" | "react-native"

  • jsxImportSource — 自动运行时导入的包（例如 preact）。

  • jsxFactory — 经典运行时的工厂函数。

  • jsxFragmentFactory — 经典运行时的片段工厂。

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

Preact、Hono 和 Vue JSX 通过直通工作。Solid 是例外——其 JSX 需要 babel-preset-solid 的响应式图编译，每文件转译器无法做到，所以通过其打包器运行 Solid（例如 nub run vite）。

@jsxImportSource

每文件 /** @jsxImportSource ... */ pragma 覆盖该文件的 tsconfig 导入源。这是在单个项目中混用 JSX 运行时的标准机制——Hono 路由与 React 组件并存。

/** @jsxImportSource hono/jsx */
export default function Page() {
  return <h1>Hello</h1>;
}

Pragma 从文件源码本身读取；不需要 tsconfig 条目即可生效。