@intlayer/docs 8.5.2 → 8.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/ar/intlayer_with_react_router_v7.md +2 -4
- package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/ar/intlayer_with_svelte_kit.md +2 -2
- package/docs/ar/intlayer_with_tanstack+solid.md +0 -17
- package/docs/ar/intlayer_with_tanstack.md +0 -8
- package/docs/ar/intlayer_with_vite+lit.md +0 -1
- package/docs/ar/intlayer_with_vite+solid.md +0 -1
- package/docs/ar/intlayer_with_vite+svelte.md +1 -1
- package/docs/bn/intlayer_with_vite+lit.md +0 -1
- package/docs/cs/intlayer_with_vite+lit.md +0 -1
- package/docs/de/intlayer_with_react_router_v7.md +2 -4
- package/docs/de/intlayer_with_react_router_v7_fs_routes.md +1 -2
- package/docs/de/intlayer_with_svelte_kit.md +2 -2
- package/docs/de/intlayer_with_tanstack+solid.md +78 -21
- package/docs/de/intlayer_with_tanstack.md +96 -28
- package/docs/de/intlayer_with_vite+lit.md +0 -1
- package/docs/de/intlayer_with_vite+solid.md +0 -1
- package/docs/de/intlayer_with_vite+svelte.md +1 -1
- package/docs/en/intlayer_with_react_router_v7.md +1 -2
- package/docs/en/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/en/intlayer_with_svelte_kit.md +2 -2
- package/docs/en/intlayer_with_tanstack+solid.md +79 -19
- package/docs/en/intlayer_with_tanstack.md +81 -10
- package/docs/en/intlayer_with_vite+lit.md +0 -1
- package/docs/en/intlayer_with_vite+solid.md +0 -1
- package/docs/en/intlayer_with_vite+svelte.md +5 -6
- package/docs/en-GB/intlayer_with_react_router_v7.md +2 -4
- package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/en-GB/intlayer_with_svelte_kit.md +2 -2
- package/docs/en-GB/intlayer_with_tanstack+solid.md +71 -17
- package/docs/en-GB/intlayer_with_tanstack.md +74 -9
- package/docs/en-GB/intlayer_with_vite+lit.md +0 -1
- package/docs/en-GB/intlayer_with_vite+solid.md +0 -1
- package/docs/en-GB/intlayer_with_vite+svelte.md +1 -1
- package/docs/es/intlayer_with_react_router_v7.md +2 -4
- package/docs/es/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/es/intlayer_with_svelte_kit.md +2 -2
- package/docs/es/intlayer_with_tanstack+solid.md +78 -21
- package/docs/es/intlayer_with_tanstack.md +96 -28
- package/docs/es/intlayer_with_vite+lit.md +0 -1
- package/docs/es/intlayer_with_vite+solid.md +0 -1
- package/docs/es/intlayer_with_vite+svelte.md +1 -1
- package/docs/fr/intlayer_with_react_router_v7.md +2 -4
- package/docs/fr/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/fr/intlayer_with_svelte_kit.md +3 -3
- package/docs/fr/intlayer_with_tanstack+solid.md +78 -21
- package/docs/fr/intlayer_with_tanstack.md +96 -28
- package/docs/fr/intlayer_with_vite+lit.md +0 -1
- package/docs/fr/intlayer_with_vite+solid.md +0 -1
- package/docs/fr/intlayer_with_vite+svelte.md +1 -1
- package/docs/hi/intlayer_with_react_router_v7.md +2 -4
- package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/hi/intlayer_with_svelte_kit.md +2 -2
- package/docs/hi/intlayer_with_tanstack+solid.md +0 -17
- package/docs/hi/intlayer_with_tanstack.md +0 -8
- package/docs/hi/intlayer_with_vite+lit.md +0 -1
- package/docs/hi/intlayer_with_vite+solid.md +0 -1
- package/docs/hi/intlayer_with_vite+svelte.md +1 -1
- package/docs/id/intlayer_with_react_router_v7.md +2 -4
- package/docs/id/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/id/intlayer_with_svelte_kit.md +2 -2
- package/docs/id/intlayer_with_tanstack+solid.md +0 -17
- package/docs/id/intlayer_with_tanstack.md +0 -8
- package/docs/id/intlayer_with_vite+lit.md +0 -1
- package/docs/id/intlayer_with_vite+solid.md +0 -1
- package/docs/id/intlayer_with_vite+svelte.md +1 -1
- package/docs/it/intlayer_with_react_router_v7.md +2 -4
- package/docs/it/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/it/intlayer_with_svelte_kit.md +3 -3
- package/docs/it/intlayer_with_tanstack+solid.md +76 -19
- package/docs/it/intlayer_with_tanstack.md +96 -30
- package/docs/it/intlayer_with_vite+lit.md +0 -1
- package/docs/it/intlayer_with_vite+solid.md +0 -1
- package/docs/it/intlayer_with_vite+svelte.md +1 -1
- package/docs/ja/intlayer_with_react_router_v7.md +1 -2
- package/docs/ja/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/ja/intlayer_with_tanstack+solid.md +81 -22
- package/docs/ja/intlayer_with_tanstack.md +779 -93
- package/docs/ja/intlayer_with_vite+lit.md +0 -1
- package/docs/ja/intlayer_with_vite+solid.md +0 -1
- package/docs/ja/intlayer_with_vite+svelte.md +1 -1
- package/docs/ko/intlayer_with_react_router_v7.md +2 -4
- package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/ko/intlayer_with_svelte_kit.md +2 -2
- package/docs/ko/intlayer_with_tanstack+solid.md +79 -22
- package/docs/ko/intlayer_with_tanstack.md +95 -101
- package/docs/ko/intlayer_with_vite+lit.md +0 -1
- package/docs/ko/intlayer_with_vite+solid.md +0 -1
- package/docs/ko/intlayer_with_vite+svelte.md +1 -1
- package/docs/nl/intlayer_with_vite+lit.md +0 -1
- package/docs/pl/intlayer_with_react_router_v7.md +2 -4
- package/docs/pl/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/pl/intlayer_with_svelte_kit.md +2 -2
- package/docs/pl/intlayer_with_tanstack+solid.md +0 -17
- package/docs/pl/intlayer_with_tanstack.md +0 -8
- package/docs/pl/intlayer_with_vite+lit.md +0 -1
- package/docs/pl/intlayer_with_vite+solid.md +0 -1
- package/docs/pl/intlayer_with_vite+svelte.md +1 -1
- package/docs/pt/intlayer_with_react_router_v7.md +1 -2
- package/docs/pt/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/pt/intlayer_with_svelte_kit.md +3 -3
- package/docs/pt/intlayer_with_tanstack+solid.md +76 -19
- package/docs/pt/intlayer_with_tanstack.md +96 -30
- package/docs/pt/intlayer_with_vite+lit.md +0 -1
- package/docs/pt/intlayer_with_vite+solid.md +0 -1
- package/docs/pt/intlayer_with_vite+svelte.md +1 -1
- package/docs/ru/intlayer_with_react_router_v7.md +2 -4
- package/docs/ru/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/ru/intlayer_with_svelte_kit.md +2 -2
- package/docs/ru/intlayer_with_tanstack+solid.md +78 -21
- package/docs/ru/intlayer_with_tanstack.md +99 -33
- package/docs/ru/intlayer_with_vite+lit.md +0 -1
- package/docs/ru/intlayer_with_vite+solid.md +0 -1
- package/docs/ru/intlayer_with_vite+svelte.md +1 -1
- package/docs/tr/intlayer_with_react_router_v7.md +2 -4
- package/docs/tr/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/tr/intlayer_with_svelte_kit.md +2 -2
- package/docs/tr/intlayer_with_tanstack+solid.md +0 -17
- package/docs/tr/intlayer_with_tanstack.md +0 -8
- package/docs/tr/intlayer_with_vite+lit.md +0 -1
- package/docs/tr/intlayer_with_vite+solid.md +0 -1
- package/docs/tr/intlayer_with_vite+svelte.md +1 -1
- package/docs/uk/intlayer_with_react_router_v7.md +1 -2
- package/docs/uk/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/uk/intlayer_with_svelte_kit.md +2 -2
- package/docs/uk/intlayer_with_tanstack+solid.md +0 -17
- package/docs/uk/intlayer_with_tanstack.md +0 -8
- package/docs/uk/intlayer_with_vite+lit.md +0 -1
- package/docs/uk/intlayer_with_vite+solid.md +0 -1
- package/docs/uk/intlayer_with_vite+svelte.md +1 -1
- package/docs/ur/intlayer_with_vite+lit.md +0 -1
- package/docs/vi/intlayer_with_react_router_v7.md +2 -4
- package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/vi/intlayer_with_svelte_kit.md +2 -2
- package/docs/vi/intlayer_with_tanstack+solid.md +0 -17
- package/docs/vi/intlayer_with_tanstack.md +0 -8
- package/docs/vi/intlayer_with_vite+lit.md +0 -1
- package/docs/vi/intlayer_with_vite+solid.md +0 -1
- package/docs/vi/intlayer_with_vite+svelte.md +1 -1
- package/docs/zh/intlayer_with_react_router_v7.md +2 -4
- package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +2 -4
- package/docs/zh/intlayer_with_svelte_kit.md +2 -2
- package/docs/zh/intlayer_with_tanstack+solid.md +80 -23
- package/docs/zh/intlayer_with_tanstack.md +96 -104
- package/docs/zh/intlayer_with_vite+lit.md +0 -1
- package/docs/zh/intlayer_with_vite+solid.md +0 -1
- package/docs/zh/intlayer_with_vite+svelte.md +1 -1
- package/package.json +8 -8
|
@@ -181,10 +181,9 @@ Tambahkan plugin intlayer ke dalam konfigurasi Anda:
|
|
|
181
181
|
import { reactRouter } from "@react-router/dev/vite";
|
|
182
182
|
import { defineConfig } from "vite";
|
|
183
183
|
import { intlayer } from "vite-intlayer";
|
|
184
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
185
184
|
|
|
186
185
|
export default defineConfig({
|
|
187
|
-
plugins: [reactRouter(),
|
|
186
|
+
plugins: [reactRouter(), intlayer()],
|
|
188
187
|
});
|
|
189
188
|
```
|
|
190
189
|
|
|
@@ -691,13 +690,12 @@ Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan routing sisi serve
|
|
|
691
690
|
import { reactRouter } from "@react-router/dev/vite";
|
|
692
691
|
import { defineConfig } from "vite";
|
|
693
692
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
694
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
695
693
|
|
|
696
694
|
export default defineConfig({
|
|
697
695
|
plugins: [
|
|
698
696
|
intlayerProxy(), // should be placed first
|
|
699
697
|
reactRouter(),
|
|
700
|
-
|
|
698
|
+
|
|
701
699
|
intlayer(),
|
|
702
700
|
],
|
|
703
701
|
});
|
|
@@ -370,7 +370,7 @@ untuk mengakses nilai reaktifnya (misalnya, `$content.title`).
|
|
|
370
370
|
<!-- Render konten sebagai konten sederhana -->
|
|
371
371
|
<h1>{$content.title}</h1>
|
|
372
372
|
<!-- Untuk merender konten yang dapat diedit menggunakan editor -->
|
|
373
|
-
<h1
|
|
373
|
+
<h1>{@const Title = $content.title}<Title /></h1>
|
|
374
374
|
<!-- Untuk merender konten sebagai string -->
|
|
375
375
|
<div aria-label={$content.title.value}></div>
|
|
376
376
|
```
|
|
@@ -726,7 +726,7 @@ Untuk dapat memvisualisasikan selector editor intlayer, Anda harus menggunakan s
|
|
|
726
726
|
<h1>{$content.title}</h1>
|
|
727
727
|
|
|
728
728
|
<!-- Render konten sebagai komponen (diperlukan oleh editor) -->
|
|
729
|
-
|
|
729
|
+
{@const Component = $content.component}<Component />
|
|
730
730
|
</div>
|
|
731
731
|
```
|
|
732
732
|
|
|
@@ -140,16 +140,12 @@ Tambahkan plugin intlayer dalam konfigurasi Anda:
|
|
|
140
140
|
import { intlayer } from "vite-intlayer";
|
|
141
141
|
import { defineConfig } from "vite";
|
|
142
142
|
import { devtools } from "@tanstack/devtools-vite";
|
|
143
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
144
143
|
import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
|
|
145
144
|
import solidPlugin from "vite-plugin-solid";
|
|
146
145
|
|
|
147
146
|
export default defineConfig({
|
|
148
147
|
plugins: [
|
|
149
148
|
devtools(),
|
|
150
|
-
viteTsConfigPaths({
|
|
151
|
-
projects: ["./tsconfig.json"],
|
|
152
|
-
}),
|
|
153
149
|
tanstackStart({
|
|
154
150
|
router: {
|
|
155
151
|
routeFileIgnorePattern:
|
|
@@ -221,9 +217,6 @@ function RootComponent() {
|
|
|
221
217
|
}
|
|
222
218
|
```
|
|
223
219
|
|
|
224
|
-
> [!NOTE]
|
|
225
|
-
> Dalam file Solid, `useMatches` mengembalikan sebuah **signal** (aksesor reaktif). Gunakan `matches()` (dengan tanda kurung) untuk mengakses nilai saat ini secara reaktif.
|
|
226
|
-
|
|
227
220
|
### Langkah 6: Buat Locale Layout (Opsional)
|
|
228
221
|
|
|
229
222
|
Buat layout yang menangani prefiks lokal dan melakukan validasi. Layout ini akan memastikan hanya lokal yang valid yang diproses.
|
|
@@ -415,7 +408,6 @@ function RouteComponent() {
|
|
|
415
408
|
}
|
|
416
409
|
```
|
|
417
410
|
|
|
418
|
-
> [!NOTE]
|
|
419
411
|
> Di Solid, `useIntlayer` mengembalikan fungsi **accessor** (misal: `content()`). Anda harus memanggil fungsi ini untuk mengakses konten reaktif.
|
|
420
412
|
>
|
|
421
413
|
> Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/solid-intlayer/useIntlayer.md).
|
|
@@ -460,7 +452,6 @@ export const LocaleSwitcher = () => {
|
|
|
460
452
|
export default LocaleSwitcher;
|
|
461
453
|
```
|
|
462
454
|
|
|
463
|
-
> [!NOTE]
|
|
464
455
|
> Dalam file Solid, `locale` dari `useLocale` adalah sebuah **signal accessor**. Gunakan `locale()` (dengan tanda kurung) untuk membaca nilai saat ini secara reaktif.
|
|
465
456
|
>
|
|
466
457
|
> Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/solid-intlayer/useLocale.md).
|
|
@@ -502,15 +493,11 @@ import solid from "vite-plugin-solid";
|
|
|
502
493
|
import { nitro } from "nitro/vite";
|
|
503
494
|
import { defineConfig } from "vite";
|
|
504
495
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
505
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
506
496
|
|
|
507
497
|
export default defineConfig({
|
|
508
498
|
plugins: [
|
|
509
499
|
intlayerProxy(), // Proxy harus ditempatkan sebelum server jika Anda menggunakan Nitro
|
|
510
500
|
nitro(),
|
|
511
|
-
viteTsConfigPaths({
|
|
512
|
-
projects: ["./tsconfig.json"],
|
|
513
|
-
}),
|
|
514
501
|
intlayer(),
|
|
515
502
|
tanstackStart({
|
|
516
503
|
router: {
|
|
@@ -803,16 +790,12 @@ Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
|
|
|
803
790
|
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
804
791
|
import { defineConfig } from "vite";
|
|
805
792
|
import { devtools } from "@tanstack/devtools-vite";
|
|
806
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
807
793
|
import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
|
|
808
794
|
import solidPlugin from "vite-plugin-solid";
|
|
809
795
|
|
|
810
796
|
export default defineConfig({
|
|
811
797
|
plugins: [
|
|
812
798
|
devtools(),
|
|
813
|
-
viteTsConfigPaths({
|
|
814
|
-
projects: ["./tsconfig.json"],
|
|
815
|
-
}),
|
|
816
799
|
tanstackStart({
|
|
817
800
|
router: {
|
|
818
801
|
routeFileIgnorePattern:
|
|
@@ -160,14 +160,10 @@ import viteReact from "@vitejs/plugin-react";
|
|
|
160
160
|
import { nitro } from "nitro/vite";
|
|
161
161
|
import { defineConfig } from "vite";
|
|
162
162
|
import { intlayer } from "vite-intlayer";
|
|
163
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
164
163
|
|
|
165
164
|
const config = defineConfig({
|
|
166
165
|
plugins: [
|
|
167
166
|
nitro(),
|
|
168
|
-
viteTsConfigPaths({
|
|
169
|
-
projects: ["./tsconfig.json"],
|
|
170
|
-
}),
|
|
171
167
|
intlayer(),
|
|
172
168
|
tanstackStart({
|
|
173
169
|
router: {
|
|
@@ -593,15 +589,11 @@ import viteReact from "@vitejs/plugin-react";
|
|
|
593
589
|
import { nitro } from "nitro/vite";
|
|
594
590
|
import { defineConfig } from "vite";
|
|
595
591
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
596
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
597
592
|
|
|
598
593
|
export default defineConfig({
|
|
599
594
|
plugins: [
|
|
600
595
|
intlayerProxy(), // Proxy harus ditempatkan sebelum server jika Anda menggunakan Nitro
|
|
601
596
|
nitro(),
|
|
602
|
-
viteTsConfigPaths({
|
|
603
|
-
projects: ["./tsconfig.json"],
|
|
604
|
-
}),
|
|
605
597
|
intlayer(),
|
|
606
598
|
tanstackStart({
|
|
607
599
|
router: {
|
|
@@ -313,7 +313,6 @@ const App: Component = () => (
|
|
|
313
313
|
export default App;
|
|
314
314
|
```
|
|
315
315
|
|
|
316
|
-
> [!NOTE]
|
|
317
316
|
> Di Solid, `useIntlayer` mengembalikan fungsi **accessor** (misalnya, `content()`). Anda harus memanggil fungsi ini untuk mengakses konten reaktif.
|
|
318
317
|
|
|
319
318
|
> Jika Anda ingin menggunakan konten Anda dalam atribut `string`, seperti `alt`, `title`, `href`, `aria-label`, dll., Anda harus memanggil nilai fungsi, seperti:
|
|
@@ -232,7 +232,7 @@ module.exports = appContent;
|
|
|
232
232
|
<!-- Render konten sebagai konten sederhana -->
|
|
233
233
|
<h1>{$content.title}</h1>
|
|
234
234
|
<!-- Untuk merender konten yang dapat diedit menggunakan editor -->
|
|
235
|
-
<h1
|
|
235
|
+
<h1>{@const Title = $content.title}<Title /></h1>
|
|
236
236
|
<!-- Untuk merender konten sebagai string -->
|
|
237
237
|
<div aria-label={$content.title.value}></div>
|
|
238
238
|
```
|
|
@@ -176,10 +176,9 @@ Aggiungi il plugin intlayer nella tua configurazione:
|
|
|
176
176
|
import { reactRouter } from "@react-router/dev/vite";
|
|
177
177
|
import { defineConfig } from "vite";
|
|
178
178
|
import { intlayer } from "vite-intlayer";
|
|
179
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
180
179
|
|
|
181
180
|
export default defineConfig({
|
|
182
|
-
plugins: [reactRouter(),
|
|
181
|
+
plugins: [reactRouter(), intlayer()],
|
|
183
182
|
});
|
|
184
183
|
```
|
|
185
184
|
|
|
@@ -741,13 +740,12 @@ Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla
|
|
|
741
740
|
import { reactRouter } from "@react-router/dev/vite";
|
|
742
741
|
import { defineConfig } from "vite";
|
|
743
742
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
744
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
745
743
|
|
|
746
744
|
export default defineConfig({
|
|
747
745
|
plugins: [
|
|
748
746
|
intlayerProxy(), // should be placed first
|
|
749
747
|
reactRouter(),
|
|
750
|
-
|
|
748
|
+
|
|
751
749
|
intlayer(),
|
|
752
750
|
],
|
|
753
751
|
});
|
|
@@ -171,10 +171,9 @@ Aggiungi il plugin intlayer nella tua configurazione:
|
|
|
171
171
|
import { reactRouter } from "@react-router/dev/vite";
|
|
172
172
|
import { defineConfig } from "vite";
|
|
173
173
|
import { intlayer } from "vite-intlayer";
|
|
174
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
175
174
|
|
|
176
175
|
export default defineConfig({
|
|
177
|
-
plugins: [reactRouter(),
|
|
176
|
+
plugins: [reactRouter(), intlayer()],
|
|
178
177
|
});
|
|
179
178
|
```
|
|
180
179
|
|
|
@@ -809,13 +808,12 @@ Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla
|
|
|
809
808
|
import { reactRouter } from "@react-router/dev/vite";
|
|
810
809
|
import { defineConfig } from "vite";
|
|
811
810
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
812
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
813
811
|
|
|
814
812
|
export default defineConfig({
|
|
815
813
|
plugins: [
|
|
816
814
|
intlayerProxy(), // should be placed first
|
|
817
815
|
reactRouter(),
|
|
818
|
-
|
|
816
|
+
|
|
819
817
|
intlayer(),
|
|
820
818
|
],
|
|
821
819
|
});
|
|
@@ -370,7 +370,7 @@ per accedere al suo valore reattivo (ad esempio, `$content.title`).
|
|
|
370
370
|
<!-- Renderizza il contenuto come contenuto semplice -->
|
|
371
371
|
<h1>{$content.title}</h1>
|
|
372
372
|
<!-- Per rendere il contenuto modificabile usando l'editor -->
|
|
373
|
-
<h1
|
|
373
|
+
<h1>{@const Title = $content.title}<Title /></h1>
|
|
374
374
|
<!-- Per rendere il contenuto come stringa -->
|
|
375
375
|
<div aria-label={$content.title.value}></div>
|
|
376
376
|
```
|
|
@@ -726,7 +726,7 @@ Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la s
|
|
|
726
726
|
<h1>{$content.title}</h1>
|
|
727
727
|
|
|
728
728
|
<!-- Renderizza il contenuto come componente (richiesto dall'editor) -->
|
|
729
|
-
|
|
729
|
+
{@const Component = $content.component}<Component />
|
|
730
730
|
</div>
|
|
731
731
|
```
|
|
732
732
|
|
|
@@ -758,7 +758,7 @@ Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la s
|
|
|
758
758
|
<h1>{$content.title}</h1>
|
|
759
759
|
|
|
760
760
|
<!-- Renderizza il contenuto come componente (richiesto dall'editor) -->
|
|
761
|
-
|
|
761
|
+
{@const Component = $content.component}<Component />
|
|
762
762
|
</div>
|
|
763
763
|
```
|
|
764
764
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-03-25
|
|
3
|
-
updatedAt: 2026-03-
|
|
3
|
+
updatedAt: 2026-03-29
|
|
4
4
|
title: i18n Tanstack Start - Come tradurre un'applicazione Tanstack Start usando Solid.js nel 2026
|
|
5
5
|
description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione Tanstack Start utilizzando Intlayer e Solid.js. Segui questa guida completa per rendere la tua app multilingue con un routing sensibile alla localizzazione.
|
|
6
6
|
keywords:
|
|
@@ -12,6 +12,7 @@ keywords:
|
|
|
12
12
|
- i18n
|
|
13
13
|
- TypeScript
|
|
14
14
|
- Routing di localizzazione
|
|
15
|
+
- Sitemap
|
|
15
16
|
slugs:
|
|
16
17
|
- doc
|
|
17
18
|
- environment
|
|
@@ -140,16 +141,12 @@ Aggiungi il plugin intlayer nella tua configurazione:
|
|
|
140
141
|
import { intlayer } from "vite-intlayer";
|
|
141
142
|
import { defineConfig } from "vite";
|
|
142
143
|
import { devtools } from "@tanstack/devtools-vite";
|
|
143
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
144
144
|
import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
|
|
145
145
|
import solidPlugin from "vite-plugin-solid";
|
|
146
146
|
|
|
147
147
|
export default defineConfig({
|
|
148
148
|
plugins: [
|
|
149
149
|
devtools(),
|
|
150
|
-
viteTsConfigPaths({
|
|
151
|
-
projects: ["./tsconfig.json"],
|
|
152
|
-
}),
|
|
153
150
|
tanstackStart({
|
|
154
151
|
router: {
|
|
155
152
|
routeFileIgnorePattern:
|
|
@@ -221,9 +218,6 @@ function RootComponent() {
|
|
|
221
218
|
}
|
|
222
219
|
```
|
|
223
220
|
|
|
224
|
-
> [!NOTE]
|
|
225
|
-
> In Solid, `useMatches` restituisce un **segnale** (accessore reattivo). Usa `matches()` (con le parentesi) per accedere al valore corrente in modo reattivo.
|
|
226
|
-
|
|
227
221
|
### Passaggio 6: Crea il layout della lingua (Opzionale)
|
|
228
222
|
|
|
229
223
|
Crea un layout che gestisca il prefisso della lingua ed effettui la validazione. Questo layout assicurerà che vengano elaborati solo prefissi di lingua validi.
|
|
@@ -415,7 +409,6 @@ function RouteComponent() {
|
|
|
415
409
|
}
|
|
416
410
|
```
|
|
417
411
|
|
|
418
|
-
> [!NOTE]
|
|
419
412
|
> In Solid, `useIntlayer` restituisce una funzione **accessor** (ad esempio, `content()`). È necessario chiamare questa funzione per accedere al contenuto reattivo.
|
|
420
413
|
>
|
|
421
414
|
> Per saperne di più sull'hook `useIntlayer`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useIntlayer.md).
|
|
@@ -460,7 +453,6 @@ export const LocaleSwitcher = () => {
|
|
|
460
453
|
export default LocaleSwitcher;
|
|
461
454
|
```
|
|
462
455
|
|
|
463
|
-
> [!NOTE]
|
|
464
456
|
> In Solid, `locale` da `useLocale` è un **accessore di segnale**. Usa `locale()` (con le parentesi) per leggere il suo valore corrente in modo reattivo.
|
|
465
457
|
>
|
|
466
458
|
> Per saperne di più sull'hook `useLocale`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useLocale.md).
|
|
@@ -502,15 +494,11 @@ import solid from "vite-plugin-solid";
|
|
|
502
494
|
import { nitro } from "nitro/vite";
|
|
503
495
|
import { defineConfig } from "vite";
|
|
504
496
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
505
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
506
497
|
|
|
507
498
|
export default defineConfig({
|
|
508
499
|
plugins: [
|
|
509
500
|
intlayerProxy(), // Il proxy deve essere posizionato prima del server se si usa Nitro
|
|
510
501
|
nitro(),
|
|
511
|
-
viteTsConfigPaths({
|
|
512
|
-
projects: ["./tsconfig.json"],
|
|
513
|
-
}),
|
|
514
502
|
intlayer(),
|
|
515
503
|
tanstackStart({
|
|
516
504
|
router: {
|
|
@@ -662,7 +650,7 @@ export const Route = createFileRoute("/{-$locale}/$")({
|
|
|
662
650
|
});
|
|
663
651
|
```
|
|
664
652
|
|
|
665
|
-
### (Opzionale) Passaggio
|
|
653
|
+
### (Opzionale) Passaggio 15: Estrarre il contenuto dei componenti
|
|
666
654
|
|
|
667
655
|
Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
|
|
668
656
|
|
|
@@ -803,16 +791,12 @@ Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
|
|
|
803
791
|
import { intlayer, intlayerCompiler } from "vite-intlayer";
|
|
804
792
|
import { defineConfig } from "vite";
|
|
805
793
|
import { devtools } from "@tanstack/devtools-vite";
|
|
806
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
807
794
|
import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
|
|
808
795
|
import solidPlugin from "vite-plugin-solid";
|
|
809
796
|
|
|
810
797
|
export default defineConfig({
|
|
811
798
|
plugins: [
|
|
812
799
|
devtools(),
|
|
813
|
-
viteTsConfigPaths({
|
|
814
|
-
projects: ["./tsconfig.json"],
|
|
815
|
-
}),
|
|
816
800
|
tanstackStart({
|
|
817
801
|
router: {
|
|
818
802
|
routeFileIgnorePattern:
|
|
@@ -847,6 +831,79 @@ bun run build # Oppure bun run dev
|
|
|
847
831
|
|
|
848
832
|
---
|
|
849
833
|
|
|
834
|
+
### Passaggio 16: Generare una Sitemap (Opzionale)
|
|
835
|
+
|
|
836
|
+
Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce le rotte localizzate e aggiunge i metadati necessari per i motori di ricerca.
|
|
837
|
+
|
|
838
|
+
> La sitemap generata da Intlayer supporta lo spazio dei nomi `xhtml:link` (Hreflang XML Extensions). A differenza dei generatori di sitemap predefiniti che elencano solo URL grezzi, Intlayer crea automaticamente i collegamenti bidirezionali richiesti tra tutte le versioni linguistiche di una pagina (ad esempio, `/about`, `/about?lang=fr` e `/about?lang=es`). Ciò garantisce che i motori di ricerca indicizzino e servano correttamente la versione linguistica corretta al pubblico giusto.
|
|
839
|
+
|
|
840
|
+
Per utilizzarlo, devi prima configurare il tuo file `vite.config.ts` per abilitare il pre-rendering per i tuoi percorsi localizzati e disabilitare la generazione predefinita della sitemap di TanStack Start.
|
|
841
|
+
|
|
842
|
+
```typescript fileName="vite.config.ts"
|
|
843
|
+
import { localeMap, localeFlatMap } from "intlayer";
|
|
844
|
+
// ... altre importazioni
|
|
845
|
+
|
|
846
|
+
export const pathList = ["", "/about", "/404"];
|
|
847
|
+
|
|
848
|
+
const localizedPages = localeFlatMap(({ urlPrefix }) =>
|
|
849
|
+
pathList.map((path) => ({
|
|
850
|
+
path: `${urlPrefix}${path}`,
|
|
851
|
+
prerender: {
|
|
852
|
+
enabled: true,
|
|
853
|
+
},
|
|
854
|
+
}))
|
|
855
|
+
);
|
|
856
|
+
|
|
857
|
+
export default defineConfig({
|
|
858
|
+
plugins: [
|
|
859
|
+
// ... altri plugin
|
|
860
|
+
tanstackStart({
|
|
861
|
+
// ... altre configurazioni
|
|
862
|
+
sitemap: {
|
|
863
|
+
enabled: false,
|
|
864
|
+
},
|
|
865
|
+
prerender: {
|
|
866
|
+
enabled: true,
|
|
867
|
+
crawlLinks: false,
|
|
868
|
+
concurrency: 10,
|
|
869
|
+
},
|
|
870
|
+
pages: localizedPages,
|
|
871
|
+
}),
|
|
872
|
+
],
|
|
873
|
+
});
|
|
874
|
+
```
|
|
875
|
+
|
|
876
|
+
Quindi, crea un percorso `src/routes/sitemap[.]xml.ts` che utilizzi la funzione `generateSitemap`:
|
|
877
|
+
|
|
878
|
+
```typescript fileName="src/routes/sitemap[.]xml.ts"
|
|
879
|
+
import { createFileRoute } from "@tanstack/solid-router";
|
|
880
|
+
import { generateSitemap } from "intlayer";
|
|
881
|
+
|
|
882
|
+
const SITE_URL = "http://localhost:3000";
|
|
883
|
+
|
|
884
|
+
export const Route = createFileRoute("/sitemap.xml")({
|
|
885
|
+
server: {
|
|
886
|
+
handlers: {
|
|
887
|
+
GET: async () => {
|
|
888
|
+
const sitemap = generateSitemap(
|
|
889
|
+
[
|
|
890
|
+
{ path: "/", changefreq: "daily", priority: 1.0 },
|
|
891
|
+
{ path: "/about", changefreq: "monthly", priority: 0.8 },
|
|
892
|
+
],
|
|
893
|
+
{ siteUrl: SITE_URL }
|
|
894
|
+
);
|
|
895
|
+
|
|
896
|
+
return new Response(sitemap, {
|
|
897
|
+
headers: { "Content-Type": "application/xml" },
|
|
898
|
+
});
|
|
899
|
+
},
|
|
900
|
+
},
|
|
901
|
+
},
|
|
902
|
+
});
|
|
903
|
+
```
|
|
904
|
+
|
|
905
|
+
---
|
|
906
|
+
|
|
850
907
|
### Passaggio 17: Configura TypeScript (Opzionale)
|
|
851
908
|
|
|
852
909
|
Intlayer utilizza l'aumento dei moduli per sfruttare i vantaggi di TypeScript e rendere la tua base di codice più robusta.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-09-09
|
|
3
|
-
updatedAt: 2026-03-
|
|
3
|
+
updatedAt: 2026-03-29
|
|
4
4
|
title: Tanstack Start i18n - Come tradurre un'app Tanstack Start nel 2026
|
|
5
5
|
description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione TanStack Start utilizzando Intlayer. Segui questa guida completa per rendere la tua app multilingue con il routing consapevole della localizzazione.
|
|
6
6
|
keywords:
|
|
@@ -12,6 +12,7 @@ keywords:
|
|
|
12
12
|
- i18n
|
|
13
13
|
- TypeScript
|
|
14
14
|
- Routing Locale
|
|
15
|
+
- Sitemap
|
|
15
16
|
slugs:
|
|
16
17
|
- doc
|
|
17
18
|
- environment
|
|
@@ -160,14 +161,10 @@ import viteReact from "@vitejs/plugin-react";
|
|
|
160
161
|
import { nitro } from "nitro/vite";
|
|
161
162
|
import { defineConfig } from "vite";
|
|
162
163
|
import { intlayer } from "vite-intlayer";
|
|
163
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
164
164
|
|
|
165
165
|
const config = defineConfig({
|
|
166
166
|
plugins: [
|
|
167
167
|
nitro(),
|
|
168
|
-
viteTsConfigPaths({
|
|
169
|
-
projects: ["./tsconfig.json"],
|
|
170
|
-
}),
|
|
171
168
|
intlayer(),
|
|
172
169
|
tanstackStart({
|
|
173
170
|
router: {
|
|
@@ -593,15 +590,11 @@ import viteReact from "@vitejs/plugin-react";
|
|
|
593
590
|
import { nitro } from "nitro/vite";
|
|
594
591
|
import { defineConfig } from "vite";
|
|
595
592
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
596
|
-
import viteTsConfigPaths from "vite-tsconfig-paths";
|
|
597
593
|
|
|
598
594
|
export default defineConfig({
|
|
599
595
|
plugins: [
|
|
600
596
|
intlayerProxy(), // Il proxy deve essere posizionato prima del server se usi Nitro
|
|
601
597
|
nitro(),
|
|
602
|
-
viteTsConfigPaths({
|
|
603
|
-
projects: ["./tsconfig.json"],
|
|
604
|
-
}),
|
|
605
598
|
intlayer(),
|
|
606
599
|
tanstackStart({
|
|
607
600
|
router: {
|
|
@@ -753,27 +746,7 @@ export const Route = createFileRoute("/{-$locale}/$")({
|
|
|
753
746
|
});
|
|
754
747
|
```
|
|
755
748
|
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
### Passaggio 16: Configurare TypeScript (Opzionale)
|
|
759
|
-
|
|
760
|
-
Intlayer utilizza l'augmentation dei moduli per ottenere i vantaggi di TypeScript e rendere il tuo codice più robusto.
|
|
761
|
-
|
|
762
|
-
Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente:
|
|
763
|
-
|
|
764
|
-
```json5 fileName="tsconfig.json"
|
|
765
|
-
{
|
|
766
|
-
// ... le tue configurazioni esistenti
|
|
767
|
-
include: [
|
|
768
|
-
// ... i tuoi include esistenti
|
|
769
|
-
".intlayer/**/*.ts", // Includi i tipi generati automaticamente
|
|
770
|
-
],
|
|
771
|
-
}
|
|
772
|
-
```
|
|
773
|
-
|
|
774
|
-
---
|
|
775
|
-
|
|
776
|
-
### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti
|
|
749
|
+
### (Opzionale) Passaggio 15: Estrarre il contenuto dei tuoi componenti
|
|
777
750
|
|
|
778
751
|
Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
|
|
779
752
|
|
|
@@ -931,6 +904,99 @@ bun run build # Or bun run dev
|
|
|
931
904
|
|
|
932
905
|
---
|
|
933
906
|
|
|
907
|
+
### Passaggio 16: Generare una Sitemap (Opzionale)
|
|
908
|
+
|
|
909
|
+
Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce i percorsi localizzati e aggiunge i metadati necessari per i motori di ricerca.
|
|
910
|
+
|
|
911
|
+
> La sitemap generata da Intlayer supporta lo spazio dei nomi `xhtml:link` (Hreflang XML Extensions). A differenza dei generatori di sitemap predefiniti che elencano solo URL grezzi, Intlayer crea automaticamente i collegamenti bidirezionali richiesti tra tutte le versioni linguistiche di una pagina (ad esempio, `/about`, `/about?lang=fr` e `/about?lang=es`). Ciò garantisce che i motori di ricerca indicizzino e servano correttamente la versione linguistica corretta al pubblico giusto.
|
|
912
|
+
|
|
913
|
+
Per utilizzarlo, devi prima configurare il tuo file `vite.config.ts` per abilitare il pre-rendering per i tuoi percorsi localizzati e disabilitare la generazione predefinita della sitemap di TanStack Start.
|
|
914
|
+
|
|
915
|
+
```typescript fileName="vite.config.ts"
|
|
916
|
+
import { localeFlatMap } from "intlayer";
|
|
917
|
+
// ... altre importazioni
|
|
918
|
+
|
|
919
|
+
export const pathList = ["", "/about", "/404"];
|
|
920
|
+
|
|
921
|
+
const localizedPages = localeFlatMap(({ urlPrefix }) =>
|
|
922
|
+
pathList.map((path) => ({
|
|
923
|
+
path: `${urlPrefix}${path}`,
|
|
924
|
+
prerender: {
|
|
925
|
+
enabled: true,
|
|
926
|
+
},
|
|
927
|
+
}))
|
|
928
|
+
);
|
|
929
|
+
|
|
930
|
+
export default defineConfig({
|
|
931
|
+
plugins: [
|
|
932
|
+
// ... altri plugin
|
|
933
|
+
tanstackStart({
|
|
934
|
+
// ... altre configurazioni
|
|
935
|
+
sitemap: {
|
|
936
|
+
enabled: false,
|
|
937
|
+
},
|
|
938
|
+
prerender: {
|
|
939
|
+
enabled: true,
|
|
940
|
+
crawlLinks: false,
|
|
941
|
+
concurrency: 10,
|
|
942
|
+
},
|
|
943
|
+
pages: localizedPages,
|
|
944
|
+
}),
|
|
945
|
+
],
|
|
946
|
+
});
|
|
947
|
+
```
|
|
948
|
+
|
|
949
|
+
Quindi, crea un percorso `src/routes/sitemap[.]xml.ts` che utilizzi la funzione `generateSitemap`:
|
|
950
|
+
|
|
951
|
+
```typescript fileName="src/routes/sitemap[.]xml.ts"
|
|
952
|
+
import { createFileRoute } from "@tanstack/react-router";
|
|
953
|
+
import { generateSitemap } from "intlayer";
|
|
954
|
+
|
|
955
|
+
const SITE_URL = (
|
|
956
|
+
import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
|
|
957
|
+
).replace(/\/$/, "");
|
|
958
|
+
|
|
959
|
+
export const Route = createFileRoute("/sitemap.xml")({
|
|
960
|
+
server: {
|
|
961
|
+
handlers: {
|
|
962
|
+
GET: async () => {
|
|
963
|
+
const sitemap = generateSitemap(
|
|
964
|
+
[
|
|
965
|
+
{ path: "/", changefreq: "daily", priority: 1.0 },
|
|
966
|
+
{ path: "/about", changefreq: "monthly", priority: 0.8 },
|
|
967
|
+
],
|
|
968
|
+
{ siteUrl: SITE_URL }
|
|
969
|
+
);
|
|
970
|
+
|
|
971
|
+
return new Response(sitemap, {
|
|
972
|
+
headers: { "Content-Type": "application/xml" },
|
|
973
|
+
});
|
|
974
|
+
},
|
|
975
|
+
},
|
|
976
|
+
},
|
|
977
|
+
});
|
|
978
|
+
```
|
|
979
|
+
|
|
980
|
+
---
|
|
981
|
+
|
|
982
|
+
### Passaggio 17: Configurare TypeScript (Opzionale)
|
|
983
|
+
|
|
984
|
+
Intlayer utilizza l'augmentation dei moduli per ottenere i vantaggi di TypeScript e rendere il tuo codice più robusto.
|
|
985
|
+
|
|
986
|
+
Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente:
|
|
987
|
+
|
|
988
|
+
```json5 fileName="tsconfig.json"
|
|
989
|
+
{
|
|
990
|
+
// ... le tue configurazioni esistenti
|
|
991
|
+
include: [
|
|
992
|
+
// ... i tuoi include esistenti
|
|
993
|
+
".intlayer/**/*.ts", // Includi i tipi generati automaticamente
|
|
994
|
+
],
|
|
995
|
+
}
|
|
996
|
+
```
|
|
997
|
+
|
|
998
|
+
---
|
|
999
|
+
|
|
934
1000
|
### Configurazione Git
|
|
935
1001
|
|
|
936
1002
|
Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di commetterli nel repository Git.
|
|
@@ -316,7 +316,6 @@ const App: Component = () => (
|
|
|
316
316
|
export default App;
|
|
317
317
|
```
|
|
318
318
|
|
|
319
|
-
> [!NOTE]
|
|
320
319
|
> In Solid, `useIntlayer` restituisce una funzione **accessor** (ad esempio, `content()`). Devi chiamare questa funzione per accedere al contenuto reattivo.
|
|
321
320
|
|
|
322
321
|
> Se vuoi usare il tuo contenuto in un attributo `string`, come `alt`, `title`, `href`, `aria-label`, ecc., devi chiamare il valore della funzione, come:
|
|
@@ -232,7 +232,7 @@ module.exports = appContent;
|
|
|
232
232
|
<!-- Renderizza il contenuto come contenuto semplice -->
|
|
233
233
|
<h1>{$content.title}</h1>
|
|
234
234
|
<!-- Per rendere il contenuto modificabile usando l'editor -->
|
|
235
|
-
<h1
|
|
235
|
+
<h1>{@const Title = $content.title}<Title /></h1>
|
|
236
236
|
<!-- Per rendere il contenuto come stringa -->
|
|
237
237
|
<div aria-label={$content.title.value}></div>
|
|
238
238
|
```
|
|
@@ -135,13 +135,12 @@ This comprehensive guide provides everything you need to integrate Intlayer with
|
|
|
135
135
|
import { reactRouter } from "@react-router/dev/vite";
|
|
136
136
|
import { defineConfig } from "vite";
|
|
137
137
|
import { intlayer, intlayerProxy } from "vite-intlayer";
|
|
138
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
139
138
|
|
|
140
139
|
export default defineConfig({
|
|
141
140
|
plugins: [
|
|
142
141
|
intlayerProxy(), // should be placed first
|
|
143
142
|
reactRouter(),
|
|
144
|
-
|
|
143
|
+
|
|
145
144
|
intlayer(),
|
|
146
145
|
],
|
|
147
146
|
});
|