{"id":15723347,"url":"https://github.com/intlify/hono","last_synced_at":"2025-04-14T16:00:23.883Z","repository":{"id":203059328,"uuid":"708729756","full_name":"intlify/hono","owner":"intlify","description":"Internationalization middleware \u0026 utilities for Hono","archived":false,"fork":false,"pushed_at":"2024-07-21T13:16:39.000Z","size":8991,"stargazers_count":18,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-26T10:31:31.899Z","etag":null,"topics":["hono","honojs","i18n","internationalization","middleware","utilities"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intlify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"kazupon"}},"created_at":"2023-10-23T09:16:48.000Z","updated_at":"2024-08-26T02:32:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"0fe4e1e4-0ba1-4b4d-a3b8-902c306e7849","html_url":"https://github.com/intlify/hono","commit_stats":null,"previous_names":["intlify/hono"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fhono","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fhono/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fhono/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intlify%2Fhono/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intlify","download_url":"https://codeload.github.com/intlify/hono/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248913825,"owners_count":21182356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hono","honojs","i18n","internationalization","middleware","utilities"],"created_at":"2024-10-03T22:11:17.014Z","updated_at":"2025-04-14T16:00:23.813Z","avatar_url":"https://github.com/intlify.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kazupon"],"categories":[],"sub_categories":[],"readme":"# @intlify/hono\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![CI][ci-src]][ci-href]\n\nInternationalization middleware \u0026 utilities for [Hono](https://hono.dev/)\n\n## 🌟 Features\n\n✅️ \u0026nbsp;**Translation:** Simple API like\n[vue-i18n](https://vue-i18n.intlify.dev/)\n\n✅ \u0026nbsp;**Custom locale detector:** You can implement your own locale detector\non server-side\n\n✅️️ \u0026nbsp;**Useful utilities:** support internationalization composables\nutilities via [@intlify/utils](https://github.com/intlify/utils)\n\n## 💿 Installation\n\n```sh\n# Using npm\nnpm install @intlify/hono\n\n# Using yarn\nyarn add @intlify/hono\n\n# Using pnpm\npnpm add @intlify/hono\n\n# Using bun\nbun add @intlify/hono\n```\n\n## 🚀 Usage\n\n```ts\nimport { Hono } from 'hono'\nimport {\n  defineI18nMiddleware,\n  detectLocaleFromAcceptLanguageHeader,\n  useTranslation,\n} from '@intlify/hono'\n\n// define middleware with vue-i18n like options\nconst i18nMiddleware = defineI18nMiddleware({\n  // detect locale with `accept-language` header\n  locale: detectLocaleFromAcceptLanguageHeader,\n  // resource messages\n  messages: {\n    en: {\n      hello: 'Hello {name}!',\n    },\n    ja: {\n      hello: 'こんにちは、{name}！',\n    },\n  },\n  // something options\n  // ...\n})\n\nconst app = new Hono()\n\n// install middleware with `app.use`\napp.use('*', i18nMiddleware)\n\napp.get('/', c =\u003e {\n  // use `useTranslation` in handler\n  const t = useTranslation(c)\n  return c.text(t('hello', { name: 'hono' }) + `\\n`)\n})\n\nexport default app\n```\n\n## 🛠️ Custom locale detection\n\nYou can detect locale with your custom logic from current `Context`.\n\nexample for detecting locale from url query:\n\n```ts\nimport { defineI18nMiddleware, getQueryLocale } from '@intlify/hono'\nimport type { Context } from 'hono'\n\nconst DEFAULT_LOCALE = 'en'\n\n// define custom locale detector\nconst localeDetector = (ctx: Context): string =\u003e {\n  try {\n    return getQueryLocale(ctx).toString()\n  } catch () {\n    return DEFAULT_LOCALE\n  }\n}\n\nconst middleware = defineI18nMiddleware({\n  // set your custom locale detector\n  locale: localeDetector,\n  // something options\n  // ...\n})\n```\n\n## 🧩 Type-safe resources\n\n\u003e [!WARNING]  \n\u003e **This is experimental feature (inspired from [vue-i18n](https://vue-i18n.intlify.dev/guide/advanced/typescript.html#typescript-support)).**\n\u003e We would like to get feedback from you 🙂.\n\n\u003e [!NOTE]\n\u003e The exeample code is [here](https://github.com/intlify/hono/tree/main/playground/typesafe-schema)\n\nYou can support the type-safe resources with schema using TypeScript on `defineI18nMiddleware` options.\n\nLocale messages resource:\n\n```ts\nexport default {\n  hello: 'hello, {name}!'\n}\n```\n\nyour application code:\n\n```ts\nimport { defineI18nMiddleware } from '@intlify/hono'\nimport en from './locales/en.ts'\n\n// define resource schema, as 'en' is master resource schema\ntype ResourceSchema = typeof en\n\nconst i18nMiddleware = defineI18nMiddleware\u003c[ResourceSchema], 'en' | 'ja'\u003e({\n  messages: {\n    en: { hello: 'Hello, {name}' },\n  },\n  // something options\n  // ...\n})\n\n// someting your implementation code ...\n// ...\n```\n\nResult of type checking with `tsc`:\n\n```sh\nnpx tsc --noEmit\nindex.ts:13:3 - error TS2741: Property 'ja' is missing in type '{ en: { hello: string; }; }' but required in type '{ en: ResourceSchema; ja: ResourceSchema; }'.\n\n13   messages: {\n     ~~~~~~~~\n\n  ../../node_modules/@intlify/core/node_modules/@intlify/core-base/dist/core-base.d.ts:125:5\n    125     messages?: {\n            ~~~~~~~~\n    The expected type comes from property 'messages' which is declared here on type 'CoreOptions\u003cstring, { message: ResourceSchema; datetime: DateTimeFormat; number: NumberFormat; }, { messages: \"en\"; datetimeFormats: \"en\"; numberFormats: \"en\"; } | { ...; }, ... 8 more ..., NumberFormats\u003c...\u003e\u003e'\n\n\nFound 1 error in index.ts:13\n```\n\nIf you are using [Visual Studio Code](https://code.visualstudio.com/) as an editor, you can notice that there is a resource definition omission in the editor with the following error before you run the typescript compilation.\n\n![Type-safe resources](assets/typesafe-schema.png)\n\n\n## 🖌️ Resource keys completion\n\n\u003e [!WARNING]  \n\u003e **This is experimental feature (inspired from [vue-i18n](https://vue-i18n.intlify.dev/guide/advanced/typescript.html#typescript-support)).**\n\u003e We would like to get feedback from you 🙂.\n\n\u003e [!NOTE]\n\u003e Resource Keys completion can be used if you are using [Visual Studio Code](https://code.visualstudio.com/)\n\nYou can completion resources key on translation function with `useTranslation`.\n\n![Key Completion](assets/key-completion.gif)\n\nresource keys completion has twe ways.\n\n### Type parameter for `useTranslation`\n\n\u003e [!NOTE]\n\u003e The exeample code is [here](https://github.com/intlify/hono/tree/main/playground/local-schema)\n\nYou can `useTranslation` set the type parameter to the resource schema you want to key completion of the translation function.\n\nthe part of example:\n```ts\napp.get('/', c =\u003e {\n  type ResourceSchema = {\n    hello: string\n  }\n  // set resource schema as type parameter\n  const t = useTranslation\u003cResourceSchema\u003e(c)\n  // you can completion when you type `t('`\n  return c.json(t('hello', { name: 'hono' }))\n}),\n```\n\n### global resource schema with `declare module '@intlify/hono'`\n\n\u003e [!NOTE]\n\u003e The exeample code is [here](https://github.com/intlify/hono/tree/main/playground/global-schema)\n\nYou can do resource key completion with the translation function using the typescript `declare module`.\n\nthe part of example:\n```ts\nimport en from './locales/en.ts'\n\n// 'en' resource is master schema\ntype ResourceSchema = typeof en\n\n// you can put the type extending with `declare module` as global resource schema\ndeclare module '@intlify/hono' {\n  // extend `DefineLocaleMessage` with `ResourceSchema`\n  export interface DefineLocaleMessage extends ResourceSchema {}\n}\n\napp.get('/', c =\u003e {\n  const t = useTranslation(c)\n  // you can completion when you type `t('`\n  return c.json(t('hello', { name: 'hono' }))\n}),\n\n```\n\nThe advantage of this way is that it is not necessary to specify the resource schema in the `useTranslation` type parameter.\n\n\n## 🛠️ Utilites \u0026 Helpers\n\n`@intlify/hono` has a concept of composable utilities \u0026 helpers.\n\n### Utilities\n\n`@intlify/hono` composable utilities accept context (from\n`(context) =\u003e {})`) as their first argument. (Exclud `useTranslation`) return the [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)\n\n### Translations\n\n- `useTranslation(context)`: use translation function\n\n### Headers\n\n- `getHeaderLocale(context, options)`: get locale from `accept-language` header\n- `getHeaderLocales(context, options)`: get some locales from `accept-language` header\n\n### Cookies\n\n- `getCookieLocale(context, options)`: get locale from cookie\n- `setCookieLocale(context, options)`: set locale to cookie\n\n### Misc\n\n- `getPathLocale(context, options)`: get locale from path\n- `getQueryLocale(context, options)`: get locale from query\n\n## Helpers\n\n- `detectLocaleFromAcceptLanguageHeader(context)`: detect locale from `accept-language` header\n\n## 🙌 Contributing guidelines\n\nIf you are interested in contributing to `@intlify/hono`, I highly recommend checking out [the contributing guidelines](/CONTRIBUTING.md) here. You'll find all the relevant information such as [how to make a PR](/CONTRIBUTING.md#pull-request-guidelines), [how to setup development](/CONTRIBUTING.md#development-setup)) etc., there.\n\n## ©️ License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/@intlify/hono?style=flat\u0026colorA=18181B\u0026colorB=FFAD33\n[npm-version-href]: https://npmjs.com/package/@intlify/hono\n[npm-downloads-src]: https://img.shields.io/npm/dm/@intlify/hono?style=flat\u0026colorA=18181B\u0026colorB=FFAD33\n[npm-downloads-href]: https://npmjs.com/package/@intlify/hono\n[ci-src]: https://github.com/intlify/utils/actions/workflows/ci.yml/badge.svg\n[ci-href]: https://github.com/intlify/utils/actions/workflows/ci.yml\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintlify%2Fhono","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintlify%2Fhono","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintlify%2Fhono/lists"}