HonoX：下一代全栈 Web 框架深度解析

import { useState } from 'hono/jsx'

export default function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount)

  return (
    <div class="counter">
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

import Counter from '../islands/Counter'

export default function Home() {
  return (
    <div>
      <h1>我的页面</h1>
      <p>这段文字是纯静态的，不需要 JavaScript</p>
      <Counter initialCount={0} />
    </div>
  )
}

import { createRoute } from 'honox/factory'

export default createRoute((c) => {
  const { slug } = c.req.param()

  return c.render(
    <article>
      <h1>文章：{slug}</h1>
    </article>
  )
})

import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'

const app = new Hono()

// GET /api/users/:id
app.get('/:id', (c) => {
  const id = c.req.param('id')
  return c.json({ id, name: 'User ' + id })
})

// POST /api/users/:id
const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
})

app.post('/:id', zValidator('json', schema), (c) => {
  const data = c.req.valid('json')
  const id = c.req.param('id')

  return c.json({
    id,
    ...data,
    updated: true
  })
})

export default app

import { createRoute } from 'honox/factory'
import { compress } from 'hono/compress'
import { logger } from 'hono/logger'
import { secureHeaders } from 'hono/secure-headers'

export default createRoute((c, next) => {
  // 日志记录
  logger()(c, next)

  // 安全头
  secureHeaders()(c, next)

  // 响应压缩
  compress()(c, next)

  return next()
})

import { createRoute } from 'honox/factory'
import { getPosts } from '../../lib/posts'

export default createRoute(async (c) => {
  const posts = await getPosts()

  return c.render(
    <div class="blog">
      <h1>博客文章</h1>
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>
              <h2>{post.title}</h2>
              <time>{post.date}</time>
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
})

import { createRoute } from 'honox/factory'
import { getPost } from '../../lib/posts'
import CommentSection from '../../islands/CommentSection'

export default createRoute(async (c) => {
  const { slug } = c.req.param()
  const post = await getPost(slug)

  if (!post) {
    return c.notFound()
  }

  return c.render(
    <article>
      <header>
        <h1>{post.title}</h1>
        <time>{post.date}</time>
        <div>{post.author}</div>
      </header>

      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* 评论区使用 Island 实现交互 */}
      <CommentSection postId={slug} />
    </article>,
    {
      title: post.title,
      description: post.excerpt,
    }
  )
})

import { useState } from 'hono/jsx'

type Comment = {
  id: string
  author: string
  content: string
  createdAt: string
}

export default function CommentSection({ postId }: { postId: string }) {
  const [comments, setComments] = useState<Comment[]>([])
  const [loading, setLoading] = useState(false)

  const loadComments = async () => {
    setLoading(true)
    const res = await fetch(`/api/comments/${postId}`)
    const data = await res.json()
    setComments(data.comments)
    setLoading(false)
  }

  const submitComment = async (e: Event) => {
    e.preventDefault()
    const form = e.target as HTMLFormElement
    const formData = new FormData(form)

    await fetch(`/api/comments/${postId}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        author: formData.get('author'),
        content: formData.get('content'),
      }),
    })

    form.reset()
    loadComments()
  }

  return (
    <section class="comments">
      <h2>评论</h2>

      <button onClick={loadComments}>
        {loading ? '加载中...' : '加载评论'}
      </button>

      {comments.map(comment => (
        <div key={comment.id} class="comment">
          <strong>{comment.author}</strong>
          <p>{comment.content}</p>
          <time>{comment.createdAt}</time>
        </div>
      ))}

      <form onSubmit={submitComment}>
        <input name="author" placeholder="您的名字" required />
        <textarea name="content" placeholder="评论内容" required />
        <button type="submit">提交评论</button>
      </form>
    </section>
  )
}

import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'

const app = new Hono()

const commentSchema = z.object({
  author: z.string().min(1).max(50),
  content: z.string().min(1).max(1000),
})

// 获取评论
app.get('/:postId', async (c) => {
  const { postId } = c.req.param()

  // 从数据库获取评论
  const comments = await db.comments
    .where('postId', postId)
    .orderBy('createdAt', 'desc')
    .get()

  return c.json({ comments })
})

// 添加评论
app.post('/:postId', zValidator('json', commentSchema), async (c) => {
  const { postId } = c.req.param()
  const data = c.req.valid('json')

  const comment = await db.comments.create({
    postId,
    ...data,
    createdAt: new Date().toISOString(),
  })

  return c.json(comment, 201)
})

export default app