feat(hono): support async locale detector (#35)

* feat(hono): support async locale detector

* fix: test codes

* fix: e2e test

* docs: fix

Author: kazupon

packages/h3/package.json

@@ -63,7 +63,7 @@
     "prepack": "pnpm build"
   },
   "dependencies": {
-    "@intlify/core": "^11.1.12",
+    "@intlify/core": "catalog:",
     "@intlify/utils": "catalog:"
   },
   "devDependencies": {

packages/h3/spec/integration.spec.ts

@@ -53,7 +53,7 @@ test('translation', async () => {
 })
 
 describe('custom locale detection', () => {
-  test('basic', async () => {
+  test('basic detection', async () => {
     // define custom locale detector
     const localeDetector = (event: H3Event): string => {
       return getQueryLocale(event.req).toString()
@@ -88,7 +88,7 @@ describe('custom locale detection', () => {
     expect(body).toEqual({ message: 'こんにちは, h3' })
   })
 
-  test('async', async () => {
+  test('detect with async loading', async () => {
     const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
     const loader = (path: string) => import(path).then(m => m.default || m)
@@ -150,7 +150,8 @@ describe('custom locale detection', () => {
       expect(body).toEqual(translated[locale])
     }
   })
-  test('async parallel', async () => {
+
+  test('detect with async parallel loading', async () => {
     const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
     const loader = (path: string) => import(path).then(m => m.default || m)

packages/hono/README.md

@@ -101,9 +101,9 @@ const app = new Hono()
 // install middleware with `app.use`
 app.use('*', i18nMiddleware)
 
-app.get('/', c => {
+app.get('/', async c => {
   // use `useTranslation` in handler
-  const t = useTranslation(c)
+  const t = await useTranslation(c)
   return c.text(t('hello', { name: 'hono' }) + `\n`)
 })
 
@@ -139,6 +139,54 @@ const middleware = defineI18nMiddleware({
 })
 ```
 
+You can make that function asynchronous. This is useful when loading resources along with locale detection.
+
+<!-- eslint-disable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert -->
+
+> [!NOTE]
+> The case which a synchronous function returns a promise is not supported. you need to use `async function`.
+
+<!-- eslint-enable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert -->
+
+```ts
+import { Hono } from 'hono'
+import { defineI18nMiddleware, getCookieLocale } from '@intlify/hono'
+
+import type { Context } from 'hono'
+import type { DefineLocaleMessage, CoreContext } from '@intlify/h3'
+
+const loader = (path: string) => import(path).then(m => m.default)
+const messages: Record<string, () => ReturnType<typeof loader>> = {
+  en: () => loader('./locales/en.json'),
+  ja: () => loader('./locales/ja.json')
+}
+
+// define custom locale detector and lazy loading
+const localeDetector = async (
+  ctx: Context,
+  i18n: CoreContext<string, DefineLocaleMessage>
+): Promise<string> => {
+  // detect locale
+  const locale = getCookieLocale(ctx.req.raw).toString()
+
+  // resource lazy loading
+  const loader = messages[locale]
+  if (loader && !i18n.messages[locale]) {
+    const message = await loader()
+    i18n.messages[locale] = message
+  }
+
+  return locale
+}
+
+const middleware = defineI18nMiddleware({
+  // set your custom locale detector
+  locale: localeDetector
+  // something options
+  // ...
+})
+```
+
 ## 🧩 Type-safe resources
 
 <!-- eslint-disable markdown/no-missing-label-refs -- NOTE(kazupon): ignore github alert -->
@@ -234,12 +282,12 @@ You can `useTranslation` set the type parameter to the resource schema you want
 the part of example:
 
 ```ts
-app.get('/', c => {
+app.get('/', async c => {
   type ResourceSchema = {
     hello: string
   }
   // set resource schema as type parameter
-  const t = useTranslation<ResourceSchema>(c)
+  const t = await useTranslation<ResourceSchema>(c)
   // you can completion when you type `t('`
   return c.json(t('hello', { name: 'hono' }))
 })
@@ -270,8 +318,8 @@ declare module '@intlify/hono' {
   export interface DefineLocaleMessage extends ResourceSchema {}
 }
 
-app.get('/', c => {
-  const t = useTranslation(c)
+app.get('/', async c => {
+  const t = await useTranslation(c)
   // you can completion when you type `t('`
   return c.json(t('hello', { name: 'hono' }))
 })

packages/hono/package.json

@@ -62,7 +62,7 @@
     "prepack": "pnpm build"
   },
   "dependencies": {
-    "@intlify/core": "^11.0.0",
+    "@intlify/core": "catalog:",
     "@intlify/utils": "catalog:"
   },
   "devDependencies": {

packages/hono/playground/basic/index.ts

@@ -20,8 +20,8 @@ const i18n = defineI18nMiddleware({
 
 const app: Hono = new Hono()
 app.use('*', i18n)
-app.get('/', c => {
-  const t = useTranslation(c)
+app.get('/', async c => {
+  const t = await useTranslation(c)
   return c.text(t('hello', { name: 'hono' }) + `\n`)
 })
 

packages/hono/playground/global-schema/index.ts

@@ -27,8 +27,8 @@ const i18n = defineI18nMiddleware({
 
 const app: Hono = new Hono()
 app.use('*', i18n)
-app.get('/', c => {
-  const t = useTranslation(c)
+app.get('/', async c => {
+  const t = await useTranslation(c)
   return c.text(t('hello', { name: 'hono' }))
 })
 

packages/hono/playground/local-schema/index.ts

@@ -18,11 +18,11 @@ const i18n = defineI18nMiddleware({
 
 const app: Hono = new Hono()
 app.use('*', i18n)
-app.get('/', c => {
+app.get('/', async c => {
   type ResourceSchema = {
     hello: string
   }
-  const t = useTranslation<ResourceSchema>(c)
+  const t = await useTranslation<ResourceSchema>(c)
   return c.text(t('hello', { name: 'hono' }))
 })
 

packages/hono/spec/e2e.spec.ts

@@ -54,6 +54,6 @@ describe('e2e', () => {
     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`)
+    expect(stdout).toContain(`こんにちは, hono`)
   })
 })

packages/hono/spec/fixtures/en.json

@@ -0,0 +1,3 @@
+{
+  "hello": "hello, {name}"
+}

packages/hono/spec/fixtures/ja.json

@@ -0,0 +1,3 @@
+{
+  "hello": "こんにちは, {name}"
+}