Skip to content

Commit 3d00678

Browse files
committed
Update documentation
1 parent f5e1ea9 commit 3d00678

2 files changed

Lines changed: 20 additions & 36 deletions

File tree

README.md

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,18 @@ Create an `i18n.ts` file to configure your localization settings:
2121

2222
```typescript
2323
#!/usr/bin/env -S deno run --allow-read --allow-write=./locales/ --allow-env
24-
import { HonolateConfig, initHonolate, runCLI } from "@wuespace/honolate";
24+
import { initHonolate, InitHonolateOptions, runCLI } from "@wuespace/honolate";
2525

26-
const config: HonolateConfig = {
27-
defaultLocale: "en",
28-
supportedLocales: {
26+
const config = {
27+
defaultLanguage: "en",
28+
languages: {
2929
en: import.meta.resolve("./locales/en.json"),
3030
de: import.meta.resolve("./locales/de.json"),
3131
},
32-
};
32+
} satisfies InitHonolateOptions<string>;
3333

3434
// CLI
35-
import.meta.main && await runCLI(config, import.meta.dirname);
35+
import.meta.main && await runCLI(config, import.meta.dirname ?? Deno.cwd());
3636

3737
// Middleware for Hono
3838
export const i18n = await initHonolate(config);
@@ -73,31 +73,16 @@ Deno.serve(app);
7373
You can use eager strings for immediate translation:
7474

7575
```typescript
76-
import { asFC, t } from "@wuespace/honolate";
76+
import { t } from "@wuespace/honolate";
7777

78-
c.render(asFC(() => (
78+
c.render(
7979
<div>
8080
<h1>{t`Hello world!`}</h1>
8181
<p>{t`We can also use variables like ${new Date()}.`}</p>
82-
</div>
83-
)));
82+
</div>,
83+
);
8484
```
8585

86-
Note that the `t` function internally uses `useRequestContext` to access the
87-
current request context. For this to work, it can only be called inside a
88-
component rendered with the `jsxRenderer` middleware. Here, we use `asFC` to
89-
create a functional component out of an inline JSX expression.
90-
91-
Internally, all `asFC` does is to create a functional component:
92-
93-
```typescript
94-
function asFC<T>(Component: () => JSX.Element) {
95-
return <Component />;
96-
}
97-
```
98-
99-
With that, everything inside the function now has access to the request context.
100-
10186
### Lazy strings
10287

10388
Sometimes, you need to define strings outside of a component context. In this
@@ -116,11 +101,11 @@ function:
116101
import { t } from "@wuespace/honolate";
117102
import { greeting } from "./greeting.ts";
118103

119-
c.render(asFC(() => (
104+
c.render(
120105
<div>
121106
<h1>{t(greeting)}</h1>
122-
</div>
123-
)));
107+
</div>,
108+
);
124109
```
125110

126111
### Updating localization files

lib/hono/t.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ import type { LocalizedStringValue } from "./LocalizedStringValue.ts";
1313
*
1414
* Can be used as a template string tag or as a function with a LazyLocalizedString.
1515
*
16-
* Can only be called inside a functional component. To use this directly in route handlers,
17-
* use {@link asFC} to wrap the handler as a functional component.
18-
*
1916
* This cannot be used outside of Hono request context (e.g., in plain Deno scripts),
20-
* since it relies on the request context to provide the current language's localization map.
17+
* since it relies on the request's localization context,
18+
* set by {@link import("./initHonolate.ts").initHonolate},
19+
* to provide the current language's localization map.
2120
*
2221
* @example Example as template string tag:
2322
* ```ts
@@ -33,15 +32,15 @@ import type { LocalizedStringValue } from "./LocalizedStringValue.ts";
3332
* const greeting = t(lls);
3433
* ```
3534
*
36-
* @example Using with asFC in route handler:
35+
* @example Using in route handler:
3736
* ```ts
38-
* import { asFC, t } from '@wuespace/honolate';
37+
* import { t } from '@wuespace/honolate';
3938
*
4039
* app.get('/greet', c => {
41-
* return c.render(asFC(() => {
40+
* return c.render(
4241
* const greeting = t`Hello ${c.req.param('name')}!`;
4342
* return greeting;
44-
* }));
43+
* });
4544
* });
4645
* ```
4746
*/

0 commit comments

Comments
 (0)