Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1fc8978

Browse files
committed
docs(i18n): add note about custom remote function
1 parente1252bd commit1fc8978

File tree

1 file changed

+65
-17
lines changed

1 file changed

+65
-17
lines changed

‎packages/i18n/README.md‎

Lines changed: 65 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ import { defineConfig } from 'vite';
6262
exportdefaultdefineConfig({
6363
plugins: [
6464
i18n({
65-
input:'./src/lib/i18n/locales',
66-
output:'./src/lib/i18n/generated',
65+
input:'./src/lib/i18n/locales',// where your locale files live (en.yaml, vi.yaml, etc)
66+
output:'./src/lib/i18n/generated',// where generated modules live
6767
}),
6868
sveltekit(),
6969
],
@@ -96,7 +96,7 @@ export default {
9696
```
9797

9898
>[!NOTE]
99-
>If you cannotenable the experimental features, you can still use the package in "static" mode.
99+
>If you cannotuse above experimental features, you can still use the package in "static" mode.
100100
>See[Remote vs Static Mode](#remote-vs-static-mode) for details.
101101
102102
###4. Define Locales
@@ -121,7 +121,7 @@ messages: ...
121121
122122
### 5. Configure I18N Provider
123123
124-
Configurethei18n provider where appropriate, e.g., in`src/routes/+layout.svelte`:
124+
Configure i18n provider where appropriate, e.g., in`src/routes/+layout.svelte`:
125125

126126
```svelte
127127
<script lang="ts">
@@ -139,8 +139,8 @@ Configure the i18n provider where appropriate, e.g., in `src/routes/+layout.svel
139139

140140
## Translating Messages
141141

142-
There are several ways to translate your messages, and using `T` component is recommended whenever
143-
possible.
142+
There are several ways to translate your messages, and using `T` component is**recommended whenever
143+
possible**.
144144

145145
### Using `T` Component
146146

@@ -153,7 +153,7 @@ possible.
153153
```
154154

155155
> [!NOTE]
156-
> Typing should be inferred. If your messagerequires parameters, additional `params` prop is expected.
156+
> Typing should be inferred. If your messagespecs contains parameters, additional `params` prop is expected.
157157

158158
### Using `t` function from context
159159

@@ -169,10 +169,12 @@ Internally, `T` component uses a `t` function from the i18n context, which you a
169169
{await t({ key: 'key.to.your.message' })}
170170
```
171171

172+
The interface of `t` input mirrors that of `T` prop:
173+
172174
> [!IMPORTANT]
173175
> A few things to note:
174176
>
175-
> - In the default "remote" mode, `t` is asynchronous (calls remote function internally).
177+
> - In the default["remote" mode](#remote-mode), `t` is asynchronous (calls remote function internally).
176178
> - You will need to handle html string yourself, i.e using {@html ...}.
177179

178180
This is helpful when you are translating non-html messages for attributes, e.g.,
@@ -212,17 +214,18 @@ const message = m['key.to.your.message'];
212214
```
213215

214216
> [!NOTE]
215-
> When importing static messages, always use wildcard (`* as m`) to facilitate tree-shaking.
217+
> When importing static messages, always use wildcard (`* as m`) tobetterfacilitate tree-shaking.
216218

217219
### Using Remote Functions
218220

219-
In "remote" mode, `t` internally calls the generated remote function, which you can also import and
221+
In["remote" mode](#remote-mode), `t` internally calls the generated remote function, which you can also import and
220222
use directly:
221223

222224
```typescript
223-
import { query } from '@sveltevietnam/i18n/generated/t.remote';
225+
import { query, prerender } from '@sveltevietnam/i18n/generated/t.remote';
224226
225227
const translated = await query({
228+
// or prerender
226229
lang: 'en',
227230
key: 'string_with_params',
228231
params: { name: 'world' }, // inferred from key
@@ -231,16 +234,61 @@ const translated = await query({
231234

232235
Similar to `t`, you will need to handle html string yourself.
233236

237+
## Choose your Remote Function
238+
239+
In ["remote" mode](#remote-mode), `Provider`, `T`, and `t` accept a `remote` parameter that
240+
specifies which remote function to fetch translation from. `remote` can be:
241+
242+
-`prerender`:uses SvelteKit [prerender](https://svelte.dev/docs/kit/remote-functions#query.batch)
243+
via the generated `prerender` function at `<output-dir>/t.remote.js`. This is the default and
244+
usually what you want if you've turned on `prerendering` for your page(s),
245+
-`query`:uses SvelteKit [query.batch](svelte.dev/docs/kit/remote-functions#query.batch) via the
246+
generated `query` function at `<output-dir>/t.remote.js`. This can batch multiple translation
247+
requests but may not be able to utilize cache,
248+
-your own:import yours in some `.remote.{js,ts}` and pass it here to provide an implementation
249+
that works for your setup. The generated modules are at your disposal.
250+
-
251+
252+
### Global Remote Function
253+
254+
```svelte
255+
<script lang="ts">
256+
import { Provider } from '@sveltevietnam/i18n';
257+
let lang = $state<Language>('vi');
258+
</script>
259+
260+
<Provider {lang} remote="prerender">
261+
<!--
262+
unless specified otherwise, all children T and t will fetch from
263+
import('@sveltevietnam/i18n/generated/t.remote').prerender
264+
-->
265+
</Provider>
266+
```
267+
268+
### Remote Function per Translation
269+
270+
```svelte
271+
<script lang="ts">
272+
import { T, Context } from '@sveltevietnam/i18n';
273+
const { t } = Context.get();
274+
</script>
275+
276+
<!-- these use whatever remote function specified in provider -->
277+
<T key="key.to.message" />
278+
{await t({ key: 'key.to.message' })}
279+
280+
<!-- these overrides to use prerender function -->
281+
<T key="key.to.message" remote="query" />
282+
{await t({ key: 'key.to.message', remote: 'query' })}
283+
```
284+
234285
## Remote vs Static Mode
235286

236287
### Remote Mode
237288

238289
By default, the package builds in `"remote"` mode and assumes you have enabled experimental features
239290
as discussed in [Configure Svelte & SvelteKit](3-configure-svelte--sveltekit). This leverages
240-
Svelte & SvelteKit capabilities for optimization. i.e translations are:
241-
242-
-lazily fetched only when and where needed,
243-
-batched together to minimize network requests.
291+
Svelte & SvelteKit capabilities for optimization. i.e translations are lazily fetched only when and where needed.
244292

245293
### Static Mode
246294

@@ -308,8 +356,8 @@ following modules:
308356
can be imported as`@sveltevietnam/i18n/generated/constants`.
309357
See[Using Remote Functions](#using-remote-functions) for some more information.
310358
-`i18n.d.ts`: module augmentation for on-demand typing support.
311-
-`t.remote.js`: contains the remotefunction implementation for translation,
312-
can be importedas`@sveltevietnam/i18n/generated/t.remote`.
359+
-`t.remote.js`: contains the remotefunctions for translation,
360+
can be importedfrom`@sveltevietnam/i18n/generated/t.remote`.
313361

314362
Although importing from`@sveltevietnam/i18n/generated` is most convenient, you can also opt to
315363
import directly from the output directory. For example, in SvelteKit, that may look like:

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp