feat: support jsx and tsx out of the box

examples/nano-jsx/nitro.config.ts

@@ -0,0 +1 @@
+export default defineNitroConfig({});

examples/nano-jsx/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-nano-jsx",
+  "private": true,
+  "scripts": {
+    "dev": "nitro dev",
+    "build": "nitro build"
+  },
+  "devDependencies": {
+    "nano-jsx": "^0.0.37",
+    "nitropack": "latest"
+  }
+}

examples/nano-jsx/routes/[...path].tsx

@@ -0,0 +1,7 @@
+import { defineEventHandler } from "h3";
+import { h, renderSSR } from "nano-jsx";
+
+export default defineEventHandler(() => {
+  const html = renderSSR(() => <h1>Nitro + nano-jsx works!</h1>);
+  return html;
+});

src/build.ts

@@ -207,6 +207,9 @@ declare module 'nitropack' {
         moduleResolution: "Node",
         allowJs: true,
         resolveJsonModule: true,
+        jsx: "preserve",
+        jsxFactory: "h",
+        jsxFragmentFactory: "Fragment",
         paths: nitro.options.typescript.internalPaths
           ? {
               "#internal/nitro": [join(runtimeDir, "index")],

src/options.ts

@@ -94,6 +94,12 @@ const NitroDefaults: NitroConfig = {
   replace: {},
   node: true,
   sourceMap: true,
+  esbuild: {
+    options: {
+      jsxFactory: "h",
+      jsxFragment: "Fragment",
+    },
+  },
 
   // Advanced
   typescript: {

src/rollup/plugins/esbuild.ts

@@ -9,6 +9,8 @@ import type { FilterPattern } from "@rollup/pluginutils";
 const defaultLoaders: { [ext: string]: Loader } = {
   ".ts": "ts",
   ".js": "js",
+  ".tsx": "tsx",
+  ".jsx": "jsx",
 };
 
 export type Options = {
@@ -81,6 +83,8 @@ export function esbuild(options: Options): Plugin {
       const result = await transform(code, {
         loader,
         target: options.target,
+        jsxFactory: options.jsxFactory,
+        jsxFragment: options.jsxFragment,
         define: options.define,
         sourcemap:
           options.sourceMap === "hidden" ? "external" : options.sourceMap,

src/scan.ts

@@ -4,7 +4,7 @@ import { globby } from "globby";
 import { withBase, withLeadingSlash, withoutTrailingSlash } from "ufo";
 import type { Nitro, NitroEventHandler } from "./types";
 
-export const GLOB_SCAN_PATTERN = "**/*.{ts,mjs,js,cjs}";
+export const GLOB_SCAN_PATTERN = "**/*.{js,mjs,cjs,ts,mts,cts,tsx,jsx}";
 type FileInfo = { dir: string; path: string; fullPath: string };
 
 const httpMethodRegex =

test/fixture/routes/jsx.tsx

@@ -0,0 +1,10 @@
+const h = (tag: string, props: any, ...children: any[]) => {
+  return `<${tag} ${Object.keys(props || {})
+    .map((key) => `${key}="${props[key]}"`)
+    .join(" ")
+    .trim()}>${children.join("")}</${tag}>`;
+};
+
+export default eventHandler(() => {
+  return <h1>Hello JSX!</h1>;
+});

test/tests.ts

@@ -164,6 +164,11 @@ export function testNitro(
     expect(obj.headers.location).toBe("https://nitro.unjs.io/");
   });
 
+  it("render JSX", async () => {
+    const { data } = await callHandler({ url: "/jsx" });
+    expect(data).toMatch("<h1 >Hello JSX!</h1>");
+  });
+
   it("handles route rules - headers", async () => {
     const { headers } = await callHandler({ url: "/rules/headers" });
     expect(headers["cache-control"]).toBe("s-maxage=60");

tsconfig.json

@@ -10,6 +10,9 @@
     "strict": false,
     "allowJs": true,
     "resolveJsonModule": true,
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "paths": {
       "nitropack": ["./src/index"],
       "nitropack/config": ["./src/config"],