feat(hono): support hono v4 (#33)

kazupon · web-flow · commit 301f76c282d8 · 2025-11-16T19:52:11.000+09:00
* docs(h3): update readme

* fix(hono): replace to new style utils

* feat(hono): support hono v4

* docs(hono): updat readme
diff --git a/knip.config.ts b/knip.config.ts
@@ -11,10 +11,5 @@ export default {
     }
   },
   ignore: ['**/src/**.test-d.ts'],
-  ignoreDependencies: [
-    'lint-staged',
-    '@vitest/coverage-v8',
-    'vitest-environment-miniflare',
-    'miniflare'
-  ]
+  ignoreDependencies: ['lint-staged', '@vitest/coverage-v8']
 } satisfies KnipConfig
diff --git a/package.json b/package.json
@@ -69,12 +69,10 @@
     "eslint-plugin-yml": "^1.19.0",
     "knip": "^5.69.1",
     "lint-staged": "^16.2.6",
-    "miniflare": "^3.20231016.0",
     "prettier": "^3.6.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.4",
-    "vitest": "^4.0.0",
-    "vitest-environment-miniflare": "^2.14.1"
+    "vitest": "^4.0.0"
   },
   "prettier": "@kazupon/prettier-config",
   "lint-staged": {
diff --git a/packages/h3/README.md b/packages/h3/README.md
@@ -76,6 +76,8 @@ app.get('/', event => {
 
 ### Translation
 
+If you want to use translation, you need to install plugin. As a result, you can use `useTranslation` within the handler:
+
 ```ts
 import { createServer } from 'node:http'
 import { H3, toNodeListener } from 'h3'
@@ -84,6 +86,7 @@ import { plugin as i18n, detectLocaleFromAcceptLanguageHeader, useTranslation }
 // install plugin with `H3` constructor
 const app = new H3({
   plugins: [
+    // configure plugin options
     i18n({
       // detect locale with `accept-language` header
       locale: detectLocaleFromAcceptLanguageHeader,
@@ -295,10 +298,6 @@ If you are using [Visual Studio Code](https://code.visualstudio.com/) as an edit
 
 <!-- eslint-disable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert -->
 
-> [!WARNING]
-> **This is experimental feature (inspired from [vue-i18n](https://vue-i18n.intlify.dev/guide/advanced/typescript.html#typescript-support)).**
-> We would like to get feedback from you 🙂.
-
 > [!NOTE]
 > Resource Keys completion can be used if you are using [Visual Studio Code](https://code.visualstudio.com/)
 
diff --git a/packages/h3/package.json b/packages/h3/package.json
@@ -70,7 +70,7 @@
     "@types/node": "catalog:",
     "h3": "^2.0.1-rc.5",
     "publint": "catalog:",
-    "srvx": "^0.9.6",
+    "srvx": "catalog:",
     "tsdown": "catalog:",
     "typedoc": "catalog:",
     "typedoc-plugin-markdown": "catalog:",
diff --git a/packages/hono/README.md b/packages/hono/README.md
@@ -8,15 +8,15 @@ Internationalization middleware & utilities for [Hono](https://hono.dev/)
 
 ## 🌟 Features
 
+✅️️ &nbsp;**Internationalization utilities:** support [internationalization
+utils](https://github.com/intlify/srvmid/blob/main/packages/hono/docs/index.md) via [@intlify/utils](https://github.com/intlify/utils)
+
 ✅️ &nbsp;**Translation:** Simple API like
 [vue-i18n](https://vue-i18n.intlify.dev/)
 
 ✅ &nbsp;**Custom locale detector:** You can implement your own locale detector
 on server-side
 
-✅️️ &nbsp;**Useful utilities:** support internationalization composables
-utilities via [@intlify/utils](https://github.com/intlify/utils)
-
 ## 💿 Installation
 
 ```sh
@@ -35,6 +35,42 @@ bun add @intlify/hono
 
 ## 🚀 Usage
 
+### Detect locale with utils
+
+Detect locale from `accept-language` header:
+
+```ts
+import { Hono } from 'hono'
+import { getHeaderLocale } from '@intlify/h3'
+
+const app = new Hono()
+
+app.get('/', c => {
+  // detect locale from HTTP header which has `Accept-Language: ja,en-US;q=0.7,en;q=0.3`
+  const locale = getHeaderLocale(c.req.raw)
+  return c.text(locale.toString())
+})
+```
+
+Detect locale from URL query:
+
+```ts
+import { Hono } from 'hono'
+import { getQueryLocale } from '@intlify/h3'
+
+const app = new Hono()
+
+app.get('/', c => {
+  // detect locale from query which has 'http://localhost:3000?locale=en'
+  const locale = getQueryLocale(c.req.raw)
+  return c.text(locale.toString())
+})
+```
+
+### Translation
+
+If you want to use translation, you need to install middleware. As a result, you can use `useTranslation` within the handler:
+
 ```ts
 import { Hono } from 'hono'
 import {
@@ -89,7 +125,7 @@ const DEFAULT_LOCALE = 'en'
 // define custom locale detector
 const localeDetector = (ctx: Context): string => {
   try {
-    return getQueryLocale(ctx).toString()
+    return getQueryLocale(ctx.req.raw).toString()
   } catch {
     return DEFAULT_LOCALE
   }
@@ -173,10 +209,6 @@ If you are using [Visual Studio Code](https://code.visualstudio.com/) as an edit
 
 <!-- eslint-disable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert -->
 
-> [!WARNING]
-> **This is experimental feature (inspired from [vue-i18n](https://vue-i18n.intlify.dev/guide/advanced/typescript.html#typescript-support)).**
-> We would like to get feedback from you 🙂.
-
 > [!NOTE]
 > Resource Keys completion can be used if you are using [Visual Studio Code](https://code.visualstudio.com/)
 
diff --git a/packages/hono/package.json b/packages/hono/package.json
@@ -58,22 +58,21 @@
   "scripts": {
     "build": "tsdown",
     "build:docs": "typedoc --excludeInternal",
-    "play:basic": "wrangler dev ./playground/basic/index.ts",
+    "play:basic": "node ./playground/basic/index.ts",
     "prepack": "pnpm build"
   },
   "dependencies": {
     "@intlify/core": "^11.0.0",
     "@intlify/utils": "catalog:"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20231016.0",
     "@types/node": "catalog:",
-    "hono": "^3.8.1",
+    "hono": "^4.10.6",
     "publint": "catalog:",
+    "srvx": "catalog:",
     "tsdown": "catalog:",
     "typedoc": "catalog:",
     "typedoc-plugin-markdown": "catalog:",
-    "typescript": "catalog:",
-    "wrangler": "^3.6.0"
+    "typescript": "catalog:"
   }
 }
diff --git a/packages/hono/playground/basic/index.ts b/packages/hono/playground/basic/index.ts
@@ -1,4 +1,5 @@
 import { Hono } from 'hono'
+import { serve } from 'srvx'
 import {
   defineI18nMiddleware,
   detectLocaleFromAcceptLanguageHeader,
@@ -17,11 +18,16 @@ const i18n = defineI18nMiddleware({
   }
 })
 
-const app = new Hono()
+const app: Hono = new Hono()
 app.use('*', i18n)
 app.get('/', c => {
   const t = useTranslation(c)
   return c.text(t('hello', { name: 'hono' }) + `\n`)
 })
 
-export default app
+const server = serve({
+  port: 3000,
+  fetch: app.fetch
+})
+
+await server.ready()
diff --git a/packages/hono/playground/global-schema/index.ts b/packages/hono/playground/global-schema/index.ts
@@ -25,7 +25,7 @@ const i18n = defineI18nMiddleware({
   }
 })
 
-const app = new Hono()
+const app: Hono = new Hono()
 app.use('*', i18n)
 app.get('/', c => {
   const t = useTranslation(c)
diff --git a/packages/hono/playground/local-schema/index.ts b/packages/hono/playground/local-schema/index.ts
@@ -16,7 +16,7 @@ const i18n = defineI18nMiddleware({
   }
 })
 
-const app = new Hono()
+const app: Hono = new Hono()
 app.use('*', i18n)
 app.get('/', c => {
   type ResourceSchema = {
diff --git a/packages/hono/playground/typesafe-schema/index.ts b/packages/hono/playground/typesafe-schema/index.ts
@@ -1,6 +1,6 @@
 // in your project, `import { ... } from '@inlify/hono'`
-import { defineI18nMiddleware } from '../../src/index.ts'
 import { Hono } from 'hono'
+import { defineI18nMiddleware } from '../../src/index.ts'
 
 // define resource schema
 type ResourceSchema = {
@@ -20,7 +20,7 @@ const i18n = defineI18nMiddleware<[ResourceSchema], 'en' | 'ja'>({
   // ...
 })
 
-const app = new Hono()
+const app: Hono = new Hono()
 app.use('*', i18n)
 // something your implementation code ...
 // ...
diff --git a/packages/hono/playground/util-header/index.ts b/packages/hono/playground/util-header/index.ts
@@ -0,0 +1,17 @@
+import { Hono } from 'hono'
+import { serve } from 'srvx'
+import { getHeaderLocale } from '../../src/index.ts' // `@intlify/hono`
+
+const app = new Hono()
+
+app.get('/', c => {
+  const locale = getHeaderLocale(c.req.raw)
+  return c.text(locale.toString())
+})
+
+const server = serve({
+  port: 3000,
+  fetch: app.fetch
+})
+
+await server.ready()
diff --git a/packages/hono/playground/util-query/index.ts b/packages/hono/playground/util-query/index.ts
@@ -0,0 +1,17 @@
+import { Hono } from 'hono'
+import { serve } from 'srvx'
+import { getQueryLocale } from '../../src/index.ts' // `@intlify/hono`
+
+const app = new Hono()
+
+app.get('/', c => {
+  const locale = getQueryLocale(c.req.raw)
+  return c.text(locale.toString())
+})
+
+const server = serve({
+  port: 3000,
+  fetch: app.fetch
+})
+
+await server.ready()
diff --git a/packages/hono/spec/e2e.spec.ts b/packages/hono/spec/e2e.spec.ts
@@ -0,0 +1,59 @@
+import { exec, spawn } from 'node:child_process'
+import path from 'node:path'
+import { afterEach, describe, expect, test } from 'vitest'
+
+import type { ExecOptions } from 'node:child_process'
+
+export function runCommand(command: string, options?: ExecOptions): Promise<string> {
+  return new Promise((resolve, reject) => {
+    exec(
+      command,
+      { timeout: 30_000, ...options, env: { ...process.env, ...options?.env } },
+      (error, stdout, stderr) => {
+        if (error) {
+          reject(new Error(`Command failed: ${command}\n${stderr}\n${error.message}`))
+        } else {
+          resolve(stdout.toString())
+        }
+      }
+    )
+  })
+}
+
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+let serve: ReturnType<typeof spawn> | null = null
+
+afterEach(async () => {
+  serve?.kill()
+})
+
+describe('e2e', () => {
+  test('util-header', async () => {
+    const target = path.resolve(import.meta.dirname, '../playground/util-header/index.ts')
+    serve = spawn('pnpx', ['tsx', target])
+    await delay(2000) // wait for server to start
+    const stdout = await runCommand(
+      `curl -H 'Accept-Language: ja,en-US;q=0.7,en;q=0.3' http://localhost:3000`
+    )
+    expect(stdout).toContain(`ja`)
+  })
+
+  test('util-query', async () => {
+    const target = path.resolve(import.meta.dirname, '../playground/util-query/index.ts')
+    serve = spawn('pnpx', ['tsx', target])
+    await delay(2000) // wait for server to start
+    const stdout = await runCommand(`curl http://localhost:3000?locale=en`)
+    expect(stdout).toContain(`en`)
+  })
+
+  test('translation', async () => {
+    const target = path.resolve(import.meta.dirname, '../playground/basic/index.ts')
+    serve = spawn('pnpx', ['tsx', target])
+    await delay(2000) // wait for server to start
+    const stdout = await runCommand(
+      `curl -H 'Accept-Language: ja,en-US;q=0.7,en;q=0.3' http://localhost:3000`
+    )
+    expect(stdout).toContain(`こんにちは, h3`)
+  })
+})
diff --git a/packages/hono/spec/integration.spec.ts b/packages/hono/spec/integration.spec.ts
@@ -1,10 +1,9 @@
-// @vitest-environment miniflare
-import { getQueryLocale } from '@intlify/utils/hono'
 import { Hono } from 'hono'
 import { afterEach, expect, test, vi } from 'vitest'
 import {
   defineI18nMiddleware,
   detectLocaleFromAcceptLanguageHeader,
+  getQueryLocale,
   useTranslation
 } from '../src/index.ts'
 
@@ -49,7 +48,7 @@ test('custom locale detection', async () => {
   // define custom locale detector
   const localeDetector = (ctx: Context): string => {
     try {
-      return getQueryLocale(ctx).toString()
+      return getQueryLocale(ctx.req.raw).toString()
     } catch {
       return defaultLocale
     }
diff --git a/packages/hono/src/index.test.ts b/packages/hono/src/index.test.ts
@@ -1,4 +1,3 @@
-// @vitest-environment miniflare
 import { createCoreContext } from '@intlify/core'
 import { describe, expect, test } from 'vitest'
 
diff --git a/packages/hono/src/index.ts b/packages/hono/src/index.ts
@@ -49,7 +49,7 @@ import type { Context, MiddlewareHandler, Next } from 'hono'
 
 declare module 'hono' {
   interface ContextVariableMap {
-    i18n: CoreContext
+    i18n?: CoreContext
   }
 }
 
@@ -149,7 +149,7 @@ export function defineI18nMiddleware<
 
   return async (ctx: Context, next: Next) => {
     i18n.locale = getLocaleDetector(ctx)
-    ctx.set('i18n', i18n)
+    ctx.set('i18n', i18n as CoreContext)
 
     await next()
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const i18n = defineI18nMiddleware({`
`25`	`25`	`}`
`26`	`26`	`})`
`27`	`27`
`28`		`-const app = new Hono()`
	`28`	`+const app: Hono = new Hono()`
`29`	`29`	`app.use('*', i18n)`
`30`	`30`	`app.get('/', c => {`
`31`	`31`	`const t = useTranslation(c)`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const i18n = defineI18nMiddleware({`
`16`	`16`	`}`
`17`	`17`	`})`
`18`	`18`
`19`		`-const app = new Hono()`
	`19`	`+const app: Hono = new Hono()`
`20`	`20`	`app.use('*', i18n)`
`21`	`21`	`app.get('/', c => {`
`22`	`22`	`type ResourceSchema = {`