hono-void

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Hono Void Skill

Void builds a Hono app from file-based routes, so there is no entry file and the code does not import

hono

. Verify changes with Hono CLI, not with a browser, curl, or a dev server. It runs the app through Vite with no flag and no file argument:

bash

npm install -D @hono/cli@next
npx hono --help
npx hono routes --exclude /__void   # hide Void's internal routes
npx hono request /

For a flow (create, then read), use one

npx hono batch -

call with

expect

on every step. Send

x-voidpages: true

so a page answers with JSON instead of the full HTML. A page action returns 200 even when it fails, so assert on the body (

body

expect

is a deep partial match):

bash

npx hono batch - <<'EOF'
{"method":"POST","path":"/","headers":{"x-voidpages":"true"},"body":{"shop":""},"expect":{"status":200,"body":{"errors":{"shop":"Enter a shop name"}}}}
{"method":"POST","path":"/","headers":{"x-voidpages":"true"},"body":{"shop":"Hono Ramen"},"expect":{"status":200}}
EOF

A create that redirects shows its

location

; follow it with

"save":{"next":"header:location"}

and then

"path":"{{next}}"

. An array in

expect

must match the whole array, so check one item of a list by reading the response, not with

expect

. The path, fields, and messages above are an example. Check yours with

npx hono routes

and one request first.

Void 基于文件式路由构建 Hono 应用，因此没有入口文件，代码中也不会 import

hono

。请使用 Hono CLI 验证变更，而不是用浏览器、curl 或开发服务器。它通过 Vite 运行应用，无需任何标志和文件参数：

bash

npm install -D @hono/cli@next
npx hono --help
npx hono routes --exclude /__void   # hide Void's internal routes
npx hono request /

对于一个流程（先创建，再读取），使用一次

npx hono batch -

调用，并在每个步骤中带上

expect

。发送

x-voidpages: true

，这样页面会以 JSON 而非完整 HTML 进行响应。页面操作即使失败也会返回 200，因此应对响应体进行断言（

expect

中的

body

是深度部分匹配）：

bash

npx hono batch - <<'EOF'
{"method":"POST","path":"/","headers":{"x-voidpages":"true"},"body":{"shop":""},"expect":{"status":200,"body":{"errors":{"shop":"Enter a shop name"}}}}
{"method":"POST","path":"/","headers":{"x-voidpages":"true"},"body":{"shop":"Hono Ramen"},"expect":{"status":200}}
EOF

如果创建操作发生重定向，会显示其

location

；用

"save":{"next":"header:location"}

保存它，然后用

"path":"{{next}}"

继续请求。

expect

中的数组必须与整个数组匹配，因此要检查列表中的某一项，应读取响应内容，而不是用

expect

。上面的路径、字段和消息仅为示例。请先用

npx hono routes

和一次请求检查你自己的应用。

Checking the page in a browser

在浏览器中检查页面

HTTP requests do not run the page's JavaScript, so they miss client-side bugs: a form that keeps its values after a submit, or a redirect that lands on the wrong URL. Check those with

npx hono browse

. It loads the page in happy-dom, runs its JavaScript, and fills and clicks in order. Install happy-dom first:

bash

npm install -D happy-dom
npx hono browse / --fill "Shop name=Hono Ramen" --click 'button[type=submit]'

--fill

takes a field's name, label text, or placeholder (the keys in

forms

of the output), or a CSS selector. The output has the final

url

, the visible

text

, the

forms

values, and

console

errors. happy-dom has no layout or CSS.

HTTP 请求不会执行页面的 JavaScript，因此会遗漏客户端 bug：例如提交后表单仍保留原值，或重定向跳转到错误的 URL。用

npx hono browse

检查这些问题。它在 happy-dom 中加载页面，运行其 JavaScript，并按顺序填写和点击。需要先安装 happy-dom：

bash

npm install -D happy-dom
npx hono browse / --fill "Shop name=Hono Ramen" --click 'button[type=submit]'

--fill

接受字段名称、标签文本或 placeholder（输出中

forms

的键），也可以是 CSS 选择器。输出包含最终的

url

、可见的

text

、

forms

的值以及

console

错误。happy-dom 不支持布局和 CSS。

Checking a Void app

检查 Void 应用

pages/**

return HTML. Send the header

x-voidpages: true

to get the page data as JSON:

{ component, props, errors, head, ... }

Page actions are POST/PUT/PATCH/DELETE to the page URL. A named action has a
```
?name
```
suffix, e.g.
```
POST /ramen/1?delete
```
.
A validation failure in a page action returns 200, not 422, with the messages in
```
body.errors
```
(
```
{ field: message }
```
). A success has no
```
errors
```
.
A foreign
```
Origin
```
header gets 403. Omit
```
Origin
```
or use the app's own origin.
```
npx void db seed --yes
```
resets the local DB between runs.

For Void itself (routing, pages, the Void CLI), read Void's docs in

node_modules/void/docs/

```
pages/**
```
返回 HTML。发送头部
```
x-voidpages: true
```
可获取 JSON 格式的页面数据：
```
{ component, props, errors, head, ... }
```
。
页面操作是对页面 URL 发起 POST/PUT/PATCH/DELETE 请求。命名操作带有
```
?name
```
后缀，例如
```
POST /ramen/1?delete
```
。
页面操作中的校验失败返回 200 而不是 422，错误消息位于
```
body.errors
```
（
```
{ field: message }
```
）。成功时没有
```
errors
```
。
外部的
```
Origin
```
头会得到 403。请省略
```
Origin
```
或使用应用自身的 origin。
```
npx void db seed --yes
```
可在多次运行之间重置本地数据库。

关于 Void 本身（路由、页面、Void CLI），请阅读

node_modules/void/docs/

中的 Void 文档。