Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions packages/hono/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,18 @@ app.get('/', c => {

### Translation

If you want to use translation, you need to install middleware. As a result, you can use `useTranslation` within the handler:
If you want to use translation, you need to install `intlify` middleware. As a result, you can use `useTranslation` within the handler:

```ts
import { Hono } from 'hono'
import {
defineI18nMiddleware,
defineIntlifyMiddleware,
detectLocaleFromAcceptLanguageHeader,
useTranslation
} from '@intlify/hono'

// define middleware with vue-i18n like options
const i18nMiddleware = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
// detect locale with `accept-language` header
locale: detectLocaleFromAcceptLanguageHeader,
// resource messages
Expand All @@ -101,8 +101,8 @@ const i18nMiddleware = defineI18nMiddleware({

const app = new Hono()

// install middleware with `app.use`
app.use('*', i18nMiddleware)
// install intlify middleware with `app.use`
app.use('*', intlify)

app.get('/', async c => {
// use `useTranslation` in handler
Expand All @@ -121,32 +121,32 @@ example for detecting locale from url query, and get locale with `getDetectorLoc

```ts
import { Hono } from 'hono'
import { defineI18nMiddleware, getQueryLocale, getDetectorLocale } from '@intlify/hono'
import { defineIntlifyMiddleware, getQueryLocale, getDetectorLocale } from '@intlify/hono'
import type { Context } from 'hono'

const DEFAULT_LOCALE = 'en'

// define custom locale detector
const localeDetector = (ctx: Context): string => {
const localeDetector = (c: Context): string => {
try {
return getQueryLocale(ctx.req.raw).toString()
return getQueryLocale(c.req.raw).toString()
} catch {
return DEFAULT_LOCALE
}
}

const i18nMiddleware = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
// set your custom locale detector
locale: localeDetector
// something options
// ...
})

const app = new Hono()
app.use('*', i18nMiddleware)
app.get('/', async ctx => {
const locale = await getDetectorLocale(ctx)
return ctx.text(`Current Locale: ${locale.language}`)
app.use('*', intlify)
app.get('/', async c => {
const locale = await getDetectorLocale(c)
return c.text(`Current Locale: ${locale.language}`)
})
```

Expand All @@ -161,7 +161,7 @@ You can make that function asynchronous. This is useful when loading resources a

```ts
import { Hono } from 'hono'
import { defineI18nMiddleware, getCookieLocale } from '@intlify/hono'
import { defineIntlifyMiddleware, getCookieLocale } from '@intlify/hono'

import type { Context } from 'hono'
import type { DefineLocaleMessage, CoreContext } from '@intlify/h3'
Expand All @@ -174,23 +174,23 @@ const messages: Record<string, () => ReturnType<typeof loader>> = {

// define custom locale detector and lazy loading
const localeDetector = async (
ctx: Context,
i18n: CoreContext<string, DefineLocaleMessage>
c: Context,
intlify: CoreContext<string, DefineLocaleMessage>
): Promise<string> => {
// detect locale
const locale = getCookieLocale(ctx.req.raw).toString()
const locale = getCookieLocale(c.req.raw).toString()

// resource lazy loading
const loader = messages[locale]
if (loader && !i18n.messages[locale]) {
if (loader && !intlify.messages[locale]) {
const message = await loader()
i18n.messages[locale] = message
intlify.messages[locale] = message
}

return locale
}

const middleware = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
// set your custom locale detector
locale: localeDetector
// something options
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

***

[@intlify/hono](../index.md) / defineI18nMiddleware
[@intlify/hono](../index.md) / defineIntlifyMiddleware

# Function: defineI18nMiddleware()
# Function: defineIntlifyMiddleware()

```ts
function defineI18nMiddleware<Schema, Locales, Message, Options>(options): MiddlewareHandler;
function defineIntlifyMiddleware<Schema, Locales, Message, Options>(options): MiddlewareHandler;
```

define i18n middleware for Hono
define intlify middleware for Hono

## Type Parameters

Expand All @@ -25,13 +25,13 @@ define i18n middleware for Hono

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `Options` | An i18n options like vue-i18n [`createI18n`]([https://vue-i18n.intlify.dev/guide/#javascript](https://vue-i18n.intlify.dev/guide/#javascript)), which are passed to `createCoreContext` of `@intlify/core`, see about details [`CoreOptions` of `@intlify/core`](https://github.com/intlify/vue-i18n-next/blob/6a9947dd3e0fe90de7be9c87ea876b8779998de5/packages/core-base/src/context.ts#L196-L216) |
| `options` | `Options` | An intlify options like vue-i18n [`createI18n`]([https://vue-i18n.intlify.dev/guide/#javascript](https://vue-i18n.intlify.dev/guide/#javascript)), which are passed to `createCoreContext` of `@intlify/core`, see about details [`CoreOptions` of `@intlify/core`](https://github.com/intlify/vue-i18n-next/blob/6a9947dd3e0fe90de7be9c87ea876b8779998de5/packages/core-base/src/context.ts#L196-L216) |

## Returns

`MiddlewareHandler`

A defined i18n middleware
A defined intlify middleware

## Description

Expand All @@ -41,9 +41,9 @@ Define the middleware to be specified for Hono [`app.use`]([https://hono.dev/gui

```js
import { Hono } from 'hono'
import { defineI18nMiddleware } from '@intlify/hono'
import { defineIntlifyMiddleware } from '@intlify/hono'

const i18nMiddleware = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
messages: {
en: {
hello: 'Hello {name}!',
Expand All @@ -59,5 +59,5 @@ const i18nMiddleware = defineI18nMiddleware({
})

const app = new Hono()
app.use('*', i18nMiddleware)
app.use('*', intlify)
```
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
# Function: detectLocaleFromAcceptLanguageHeader()

```ts
function detectLocaleFromAcceptLanguageHeader(ctx): string;
function detectLocaleFromAcceptLanguageHeader(c): string;
```

locale detection with `Accept-Language` header
Expand All @@ -16,7 +16,7 @@ locale detection with `Accept-Language` header

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `ctx` | `Context` | A Hono context |
| `c` | `Context` | A Hono context |

## Returns

Expand All @@ -28,9 +28,9 @@ A locale string, which will be detected of **first** from `Accept-Language` head

```js
import { Hono } from 'hono'
import { defineI18nMiddleware, detectLocaleFromAcceptLanguageHeader } from '@intlify/hono'
import { defineIntlifyMiddleware, detectLocaleFromAcceptLanguageHeader } from '@intlify/hono'

const i18nMiddleware = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
messages: {
en: {
hello: 'Hello {name}!',
Expand All @@ -43,5 +43,5 @@ const i18nMiddleware = defineI18nMiddleware({
})

const app = new Hono()
app.use('*', i18nMiddleware)
app.use('*', intlify)
```
12 changes: 6 additions & 6 deletions packages/hono/docs/functions/getDetectorLocale.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
# Function: getDetectorLocale()

```ts
function getDetectorLocale(ctx): Promise<Intl.Locale>;
function getDetectorLocale(c): Promise<Intl.Locale>;
```

get a locale which is detected with locale detector.
Expand All @@ -16,7 +16,7 @@ get a locale which is detected with locale detector.

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `ctx` | `Context` | A Hono context |
| `c` | `Context` | A Hono context |

## Returns

Expand All @@ -26,16 +26,16 @@ Return an `Intl.Locale` instance representing the detected locale

## Description

The locale obtainable via this function comes from the locale detector specified in the `locale` option of the [defineI18nMiddleware](defineI18nMiddleware.md).
The locale obtainable via this function comes from the locale detector specified in the `locale` option of the [defineIntlifyMiddleware](defineIntlifyMiddleware.md).

## Example

```js
app.get(
'/',
async ctx => {
const locale = await getDetectorLocale(ctx)
return ctx.text(`Current Locale: ${locale.language}`)
async c => {
const locale = await getDetectorLocale(c)
return c.text(`Current Locale: ${locale.language}`)
},
)
```
18 changes: 9 additions & 9 deletions packages/hono/docs/functions/useTranslation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
# Function: useTranslation()

```ts
function useTranslation<Schema, HonoContext>(ctx): Promise<TranslationFunction<Schema, DefineLocaleMessage, ResolveResourceKeys<Schema, DefineLocaleMessage, RemoveIndexSignature<{
function useTranslation<Schema, HonoContext>(c): Promise<TranslationFunction<Schema, DefineLocaleMessage, ResolveResourceKeys<Schema, DefineLocaleMessage, RemoveIndexSignature<{
[key: string]: LocaleMessageValue<string>;
hello: string;
nest: {
Expand Down Expand Up @@ -38,7 +38,7 @@ use translation function in handler

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `ctx` | `HonoContext` | A Hono context |
| `c` | `HonoContext` | A Hono context |

## Returns

Expand All @@ -59,15 +59,15 @@ use translation function in handler
\};
\}\>\>\>\>

Return a translation function, which can be translated with i18n resource messages
Return a translation function, which can be translated with intlify resource messages

## Example

```js
import { Hono } from 'hono'
import { defineI18nMiddleware } from '@intlify/hono'
import { defineIntlifyMiddleware } from '@intlify/hono'

const i18nMiddleware = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
messages: {
en: {
hello: 'Hello {name}!',
Expand All @@ -79,11 +79,11 @@ const i18nMiddleware = defineI18nMiddleware({
})

const app = new Hono()
app.use('*', i18nMiddleware)
app.use('*', intlify)
// setup other middlewares ...

app.get('/', async (ctx) => {
const t = await useTranslation(ctx)
return ctx.text(t('hello', { name: 'hono' }))
app.get('/', async (c) => {
const t = await useTranslation(c)
return c.text(t('hello', { name: 'hono' }))
})
```
2 changes: 1 addition & 1 deletion packages/hono/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Internationalization middleware & utilities for Hono

| Function | Description |
| ------ | ------ |
| [defineI18nMiddleware](functions/defineI18nMiddleware.md) | define i18n middleware for Hono |
| [defineIntlifyMiddleware](functions/defineIntlifyMiddleware.md) | define intlify middleware for Hono |
| [detectLocaleFromAcceptLanguageHeader](functions/detectLocaleFromAcceptLanguageHeader.md) | locale detection with `Accept-Language` header |
| [getCookieLocale](functions/getCookieLocale.md) | get locale from cookie |
| [getDetectorLocale](functions/getDetectorLocale.md) | get a locale which is detected with locale detector. |
Expand Down
6 changes: 3 additions & 3 deletions packages/hono/playground/basic/index.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Hono } from 'hono'
import { serve } from 'srvx'
import {
defineI18nMiddleware,
defineIntlifyMiddleware,
detectLocaleFromAcceptLanguageHeader,
useTranslation
} from '../../src/index.ts' // `@inlify/hono`

const i18n = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
locale: detectLocaleFromAcceptLanguageHeader,
messages: {
en: {
Expand All @@ -19,7 +19,7 @@ const i18n = defineI18nMiddleware({
})

const app: Hono = new Hono()
app.use('*', i18n)
app.use('*', intlify)
app.get('/', async c => {
const t = await useTranslation(c)
return c.text(t('hello', { name: 'hono' }) + `\n`)
Expand Down
6 changes: 3 additions & 3 deletions packages/hono/playground/global-schema/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Hono } from 'hono'
import {
defineI18nMiddleware,
defineIntlifyMiddleware,
detectLocaleFromAcceptLanguageHeader,
useTranslation
} from '../../src/index.ts' // in your project, `import { ... } from '@inlify/hono'`
Expand All @@ -17,7 +17,7 @@ declare module '../../src/index.ts' {
export interface DefineLocaleMessage extends ResourceSchema {}
}

const i18n = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
locale: detectLocaleFromAcceptLanguageHeader,
messages: {
en,
Expand All @@ -26,7 +26,7 @@ const i18n = defineI18nMiddleware({
})

const app: Hono = new Hono()
app.use('*', i18n)
app.use('*', intlify)
app.get('/', async c => {
const t = await useTranslation(c)
return c.text(t('hello', { name: 'hono' }))
Expand Down
6 changes: 3 additions & 3 deletions packages/hono/playground/local-schema/index.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Hono } from 'hono'
import {
defineI18nMiddleware,
defineIntlifyMiddleware,
detectLocaleFromAcceptLanguageHeader,
useTranslation
} from '../../src/index.ts' // in your project, `import { ... } from '@inlify/hono'`

import en from './locales/en.ts'
import ja from './locales/ja.ts'

const i18n = defineI18nMiddleware({
const intlify = defineIntlifyMiddleware({
locale: detectLocaleFromAcceptLanguageHeader,
messages: {
en,
Expand All @@ -17,7 +17,7 @@ const i18n = defineI18nMiddleware({
})

const app: Hono = new Hono()
app.use('*', i18n)
app.use('*', intlify)
app.get('/', async c => {
type ResourceSchema = {
hello: string
Expand Down
Loading
Loading