Use hono to render jsx

fwang · fwang · commit dcbb41aa04ff · 2025-06-05T13:23:11.000-04:00
diff --git a/app/worker.ts b/app/worker.ts
diff --git a/app/worker.tsx b/app/worker.tsx
@@ -0,0 +1,31 @@
+import { Hono } from "hono";
+
+const app = new Hono();
+
+// Root route
+app.get("/", (c) => {
+  return c.html(
+    <html>
+      <body>
+        <h1>Hello World</h1>
+      </body>
+    </html>
+  );
+});
+
+// Default route - return 404 for any other path
+app.all("*", (c) => {
+  return c.html(
+    <html>
+      <body>
+        <h1>404 - Not Found</h1>
+        <p>The requested page does not exist.</p>
+      </body>
+    </html>,
+    404
+  );
+});
+
+export default {
+  fetch: app.fetch,
+};
diff --git a/bun.lock b/bun.lock
@@ -5,6 +5,7 @@
       "name": "models.dev",
       "dependencies": {
         "@iarna/toml": "^2.2.5",
+        "hono": "^4.7.11",
         "sst": "^3.17.3",
         "zod": "^3.25.51",
       },
@@ -117,7 +118,7 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
-    "hono": ["hono@4.7.4", "", {}, "sha512-Pst8FuGqz3L7tFF+u9Pu70eI0xa5S3LPUmrNd5Jm8nTHze9FxLTK9Kaj5g/k4UcwuJSXTP65SyHOPLrffpcAJg=="],
+    "hono": ["hono@4.7.11", "", {}, "sha512-rv0JMwC0KALbbmwJDEnxvQCeJh+xbS3KEWW5PC9cMJ08Ur9xgatI0HmtgYZfOdOSOeYsp5LO2cOhdI8cLEbDEQ=="],
 
     "http-errors": ["http-errors@2.0.0", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
 
@@ -277,6 +278,8 @@
 
     "zod-to-json-schema": ["zod-to-json-schema@3.24.3", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A=="],
 
+    "opencontrol/hono": ["hono@4.7.4", "", {}, "sha512-Pst8FuGqz3L7tFF+u9Pu70eI0xa5S3LPUmrNd5Jm8nTHze9FxLTK9Kaj5g/k4UcwuJSXTP65SyHOPLrffpcAJg=="],
+
     "opencontrol/zod": ["zod@3.24.2", "", {}, "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ=="],
 
     "openid-client/jose": ["jose@4.15.9", "", {}, "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA=="],
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@iarna/toml": "^2.2.5",
+    "hono": "^4.7.11",
     "sst": "^3.17.3",
     "zod": "^3.25.51"
   }
diff --git a/sst.config.ts b/sst.config.ts
@@ -10,7 +10,7 @@ export default $config({
   async run() {
     new sst.cloudflare.Worker("MyWorker", {
       domain: "models.dev",
-      handler: "app/worker.ts",
+      handler: "app/worker.tsx",
       url: true,
       assets: {
         directory: "./dist",
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "target": "ESNext",
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx",
     "allowJs": true,
 
     // Bundler mode

-Original file line number
+Diff line change
       "name": "models.dev",
       "dependencies": {
         "@iarna/toml": "^2.2.5",
 +        "hono": "^4.7.11",
         "sst": "^3.17.3",
         "zod": "^3.25.51",
       },
     "hasown": ["[email protected]", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 -    "hono": ["[email protected].4", "", {}, "sha512-Pst8FuGqz3L7tFF+u9Pu70eI0xa5S3LPUmrNd5Jm8nTHze9FxLTK9Kaj5g/k4UcwuJSXTP65SyHOPLrffpcAJg=="],
 +    "hono": ["[email protected].11", "", {}, "sha512-rv0JMwC0KALbbmwJDEnxvQCeJh+xbS3KEWW5PC9cMJ08Ur9xgatI0HmtgYZfOdOSOeYsp5LO2cOhdI8cLEbDEQ=="],
     "http-errors": ["[email protected]", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
     "zod-to-json-schema": ["[email protected]", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A=="],
 +    "opencontrol/hono": ["[email protected]", "", {}, "sha512-Pst8FuGqz3L7tFF+u9Pu70eI0xa5S3LPUmrNd5Jm8nTHze9FxLTK9Kaj5g/k4UcwuJSXTP65SyHOPLrffpcAJg=="],
++
     "opencontrol/zod": ["[email protected]", "", {}, "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ=="],
     "openid-client/jose": ["[email protected]", "", {}, "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA=="],
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`	`},`
`12`	`12`	`"dependencies": {`
`13`	`13`	`"@iarna/toml": "^2.2.5",`
	`14`	`+ "hono": "^4.7.11",`
`14`	`15`	`"sst": "^3.17.3",`
`15`	`16`	`"zod": "^3.25.51"`
`16`	`17`	`}`