hono-void

Hono Void スキル

VoidはファイルベースのルートからHonoアプリを構築するため、エントリーファイルはなく、コードでhonoをインポートすることもありません。変更の確認にはブラウザー、curl、開発サーバーではなく、Hono CLIを使用してください。フラグもファイル引数も指定せずに、Vite経由でアプリを実行します。

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

一連の操作（作成してから読み取る）では、各ステップにexpectを指定して、npx hono batch -を1回呼び出します。ページが完全なHTMLではなくJSONを返すように、x-voidpages: trueを送信してください。ページアクションは失敗しても200を返すため、本文を検証してください（expect内のbodyはディープな部分一致です）。

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内の配列は配列全体と一致する必要があるため、リストの項目を1つ確認する場合は、expectではなくレスポンスを読み取ってください。上記のパス、フィールド、メッセージは例です。まずnpx hono routesと1つのリクエストで確認してください。

ブラウザーでページを確認する

HTTPリクエストではページのJavaScriptは実行されないため、送信後も値が残るフォームや、誤ったURLに移動するリダイレクトといったクライアント側のバグを見逃します。こうした点はnpx hono browseで確認してください。ページをhappy-domに読み込み、JavaScriptを実行して、順番に入力とクリックを行います。まずhappy-domをインストールしてください。

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

--fillには、フィールドの名前、ラベルのテキスト、プレースホルダー（出力のforms内のキー）、またはCSSセレクターを指定します。出力には最終的なurl、表示されているtext、formsの値、consoleのエラーが含まれます。happy-domにはレイアウト機能もCSSもありません。

Void アプリの確認

• pages/**はHTMLを返します。ページデータをJSONで取得するには、ヘッダーx-voidpages: trueを送信してください。形式は{ component, props, errors, head, ... }です。
• ページアクションは、ページのURLに対するPOST／PUT／PATCH／DELETEです。名前付きアクションには?nameサフィックスが付きます。例：POST /ramen/1?delete
• ページアクションで検証に失敗しても、422ではなく200が返され、メッセージはbody.errors（{ field: message }）に含まれます。成功時はerrorsがありません。
• 外部のOriginヘッダーを指定すると403が返されます。Originを省略するか、アプリ自身のオリジンを使用してください。
• 実行のたびにローカルDBをリセットするには、npx void db seed --yesを実行します。

Void自体（ルーティング、ページ、Void CLI）については、node_modules/void/docs/にあるVoidのドキュメントを参照してください。