Skip to content

Commit 0eaedfb

Browse files
committed
chore: initialize Hono JSX example package
1 parent 17d3c25 commit 0eaedfb

File tree

17 files changed

+2552
-187
lines changed

17 files changed

+2552
-187
lines changed

examples/hono-jsx-ts/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# prod
2+
dist/
3+
4+
# dev
5+
.hono/
6+
.wrangler/
7+
.yarn/
8+
!.yarn/releases
9+
.vscode/*
10+
!.vscode/launch.json
11+
!.vscode/*.code-snippets
12+
.idea/workspace.xml
13+
.idea/usage.statistics.xml
14+
.idea/shelf
15+
16+
# deps
17+
node_modules/
18+
19+
# env
20+
.env
21+
.env.production
22+
.dev.vars
23+
24+
# logs
25+
logs/
26+
*.log
27+
npm-debug.log*
28+
yarn-debug.log*
29+
yarn-error.log*
30+
pnpm-debug.log*
31+
lerna-debug.log*
32+
33+
# misc
34+
.DS_Store

examples/hono-jsx-ts/app/client.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { createClient } from "honox/client"
2+
3+
createClient()
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type {} from "hono"
2+
3+
declare module "hono" {
4+
interface Env {
5+
Variables: {}
6+
Bindings: {}
7+
}
8+
}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { useState } from "hono/jsx"
2+
3+
export default function Counter() {
4+
const [count, setCount] = useState(0)
5+
return (
6+
<div>
7+
<p class="py-2 text-2xl">{count}</p>
8+
<button class="px-4 py-2 bg-orange-400 text-white rounded cursor-pointer" onClick={() => setCount(count + 1)}>
9+
Increment
10+
</button>
11+
</div>
12+
)
13+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { NotFoundHandler } from "hono"
2+
3+
const handler: NotFoundHandler = (c) => {
4+
c.status(404)
5+
return c.render("404 Not Found")
6+
}
7+
8+
export default handler
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { ErrorHandler } from "hono"
2+
3+
const handler: ErrorHandler = (e, c) => {
4+
if ("getResponse" in e) {
5+
return e.getResponse()
6+
}
7+
console.error(e.message)
8+
c.status(500)
9+
return c.render("Internal Server Error")
10+
}
11+
12+
export default handler
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { jsxRenderer } from "hono/jsx-renderer"
2+
import { Link, Script } from "honox/server"
3+
4+
export default jsxRenderer(({ children }) => {
5+
return (
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link rel="icon" href="/favicon.ico" />
11+
<Link href="/app/style.css" rel="stylesheet" />
12+
<Script src="/app/client.ts" async />
13+
</head>
14+
<body>{children}</body>
15+
</html>
16+
)
17+
})
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { createRoute } from "honox/factory"
2+
import Counter from "../islands/counter"
3+
4+
export default createRoute((c) => {
5+
const name = c.req.query("name") ?? "Hono"
6+
return c.render(
7+
<div class="py-8 text-center">
8+
<title>{name}</title>
9+
<h1 class="text-3xl font-bold">Hello, {name}!</h1>
10+
<Counter />
11+
</div>,
12+
)
13+
})

examples/hono-jsx-ts/app/server.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { showRoutes } from "hono/dev"
2+
import { createApp } from "honox/server"
3+
4+
const app = createApp()
5+
6+
showRoutes(app)
7+
8+
export default app

examples/hono-jsx-ts/app/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'tailwindcss' source('../app');

0 commit comments

Comments
 (0)