@intlayer/docs 7.0.2-canary.0 → 7.0.3-canary.0
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/en/intlayer_with_vite+preact.md +47 -26
- package/docs/en/releases/v7.md +10 -12
- package/package.json +14 -14
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-04-18
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-10-28
|
|
4
4
|
title: How to translate your Vite and Preact app – i18n guide 2025
|
|
5
5
|
description: Discover how to make your Vite and Preact website multilingual. Follow the documentation to internationalize (i18n) and translate it.
|
|
6
6
|
keywords:
|
|
@@ -16,6 +16,9 @@ slugs:
|
|
|
16
16
|
- vite-and-preact
|
|
17
17
|
applicationTemplate: https://github.com/aymericzip/intlayer-vite-preact-template
|
|
18
18
|
history:
|
|
19
|
+
- version: 7.0.0
|
|
20
|
+
date: 2025-10-28
|
|
21
|
+
changes: Update LocaleRouter component to use new route configuration
|
|
19
22
|
- version: 5.5.10
|
|
20
23
|
date: 2025-06-29
|
|
21
24
|
changes: Init history
|
|
@@ -92,6 +95,10 @@ const config: IntlayerConfig = {
|
|
|
92
95
|
],
|
|
93
96
|
defaultLocale: Locales.ENGLISH,
|
|
94
97
|
},
|
|
98
|
+
routing: {
|
|
99
|
+
mode: "prefix-no-default", // Default: prefix all locales except the default locale
|
|
100
|
+
storage: ["cookie", "header"], // Default: store locale in cookie and detect from header
|
|
101
|
+
},
|
|
95
102
|
};
|
|
96
103
|
|
|
97
104
|
export default config;
|
|
@@ -111,6 +118,10 @@ const config = {
|
|
|
111
118
|
],
|
|
112
119
|
defaultLocale: Locales.ENGLISH,
|
|
113
120
|
},
|
|
121
|
+
routing: {
|
|
122
|
+
mode: "prefix-no-default", // Default: prefix all locales except the default locale
|
|
123
|
+
storage: ["cookie", "header"], // Default: store locale in cookie and detect from header
|
|
124
|
+
},
|
|
114
125
|
};
|
|
115
126
|
|
|
116
127
|
export default config;
|
|
@@ -130,12 +141,16 @@ const config = {
|
|
|
130
141
|
],
|
|
131
142
|
defaultLocale: Locales.ENGLISH,
|
|
132
143
|
},
|
|
144
|
+
routing: {
|
|
145
|
+
mode: "prefix-no-default", // Default: prefix all locales except the default locale
|
|
146
|
+
storage: ["cookie", "header"], // Default: store locale in cookie and detect from header
|
|
147
|
+
},
|
|
133
148
|
};
|
|
134
149
|
|
|
135
150
|
module.exports = config;
|
|
136
151
|
```
|
|
137
152
|
|
|
138
|
-
> Through this configuration file, you can set up localized URLs,
|
|
153
|
+
> Through this configuration file, you can set up localized URLs, routing modes, storage options, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
|
|
139
154
|
|
|
140
155
|
### Step 3: Integrate Intlayer in Your Vite Configuration
|
|
141
156
|
|
|
@@ -611,7 +626,7 @@ Example:
|
|
|
611
626
|
- https://example.com/fr/about
|
|
612
627
|
```
|
|
613
628
|
|
|
614
|
-
> By default, the routes are not prefixed for the default locale. If you want to prefix the default locale, you can set the `
|
|
629
|
+
> By default, the routes are not prefixed for the default locale (`routing.mode: "prefix-no-default"`). If you want to prefix the default locale, you can set the `routing.mode` option to `"prefix-all"` in your configuration. See the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) for more information.
|
|
615
630
|
|
|
616
631
|
To add localized routing to your application, you can create a `LocaleRouter` component that wraps your application's routes and handles locale-based routing. Here is an example using [preact-iso](https://github.com/preactjs/preact-iso):
|
|
617
632
|
|
|
@@ -630,13 +645,13 @@ yarn add preact-iso
|
|
|
630
645
|
```
|
|
631
646
|
|
|
632
647
|
```tsx fileName="src/components/LocaleRouter.tsx" codeFormat="typescript"
|
|
633
|
-
import {
|
|
634
|
-
import { ComponentChildren, FunctionalComponent } from "preact";
|
|
648
|
+
import { configuration, getPathWithoutLocale, type Locale } from "intlayer";
|
|
649
|
+
import type { ComponentChildren, FunctionalComponent } from "preact";
|
|
650
|
+
import { useEffect } from "preact/hooks";
|
|
635
651
|
import { IntlayerProvider } from "preact-intlayer";
|
|
636
652
|
import { LocationProvider, useLocation } from "preact-iso";
|
|
637
|
-
import { useEffect } from "preact/hooks";
|
|
638
653
|
|
|
639
|
-
const { internationalization,
|
|
654
|
+
const { internationalization, routing } = configuration;
|
|
640
655
|
const { locales, defaultLocale } = internationalization;
|
|
641
656
|
|
|
642
657
|
const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({
|
|
@@ -656,7 +671,7 @@ const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({
|
|
|
656
671
|
*/
|
|
657
672
|
const AppLocalized: FunctionalComponent<{
|
|
658
673
|
children: ComponentChildren;
|
|
659
|
-
locale?:
|
|
674
|
+
locale?: Locale;
|
|
660
675
|
}> = ({ children, locale }) => {
|
|
661
676
|
const { path: pathname, url } = useLocation();
|
|
662
677
|
|
|
@@ -675,9 +690,9 @@ const AppLocalized: FunctionalComponent<{
|
|
|
675
690
|
);
|
|
676
691
|
|
|
677
692
|
/**
|
|
678
|
-
* If
|
|
693
|
+
* If routing.mode is 'prefix-all', the default locale should always be prefixed.
|
|
679
694
|
*/
|
|
680
|
-
if (
|
|
695
|
+
if (routing.mode === "prefix-all") {
|
|
681
696
|
// Validate the locale
|
|
682
697
|
if (!locale || !locales.includes(locale)) {
|
|
683
698
|
// Redirect to the default locale with the updated path
|
|
@@ -695,7 +710,7 @@ const AppLocalized: FunctionalComponent<{
|
|
|
695
710
|
);
|
|
696
711
|
} else {
|
|
697
712
|
/**
|
|
698
|
-
* When
|
|
713
|
+
* When routing.mode is not 'prefix-all', the default locale is not prefixed.
|
|
699
714
|
* Ensure that the current locale is valid and not the default locale.
|
|
700
715
|
*/
|
|
701
716
|
if (
|
|
@@ -726,10 +741,12 @@ const RouterContent: FunctionalComponent<{
|
|
|
726
741
|
return null;
|
|
727
742
|
}
|
|
728
743
|
|
|
729
|
-
const pathLocale = path.split("/")[1] as
|
|
744
|
+
const pathLocale = path.split("/")[1] as Locale;
|
|
730
745
|
|
|
731
746
|
const isLocaleRoute = locales
|
|
732
|
-
.filter(
|
|
747
|
+
.filter(
|
|
748
|
+
(locale) => routing.mode === "prefix-all" || locale !== defaultLocale
|
|
749
|
+
)
|
|
733
750
|
.some((locale) => locale.toString() === pathLocale);
|
|
734
751
|
|
|
735
752
|
if (isLocaleRoute) {
|
|
@@ -738,7 +755,7 @@ const RouterContent: FunctionalComponent<{
|
|
|
738
755
|
|
|
739
756
|
return (
|
|
740
757
|
<AppLocalized
|
|
741
|
-
locale={
|
|
758
|
+
locale={routing.mode !== "prefix-all" ? defaultLocale : undefined}
|
|
742
759
|
>
|
|
743
760
|
{children}
|
|
744
761
|
</AppLocalized>
|
|
@@ -767,7 +784,7 @@ import { useEffect } from "preact/hooks";
|
|
|
767
784
|
import { h } from "preact"; // Required for JSX
|
|
768
785
|
|
|
769
786
|
// Destructuring configuration from Intlayer
|
|
770
|
-
const { internationalization,
|
|
787
|
+
const { internationalization, routing } = configuration;
|
|
771
788
|
const { locales, defaultLocale } = internationalization;
|
|
772
789
|
|
|
773
790
|
const Navigate = ({ to, replace }) => {
|
|
@@ -800,9 +817,9 @@ const AppLocalized = ({ children, locale }) => {
|
|
|
800
817
|
);
|
|
801
818
|
|
|
802
819
|
/**
|
|
803
|
-
* If
|
|
820
|
+
* If routing.mode is 'prefix-all', the default locale should always be prefixed.
|
|
804
821
|
*/
|
|
805
|
-
if (
|
|
822
|
+
if (routing.mode === "prefix-all") {
|
|
806
823
|
// Validate the locale
|
|
807
824
|
if (!locale || !locales.includes(locale)) {
|
|
808
825
|
// Redirect to the default locale with the updated path
|
|
@@ -820,7 +837,7 @@ const AppLocalized = ({ children, locale }) => {
|
|
|
820
837
|
);
|
|
821
838
|
} else {
|
|
822
839
|
/**
|
|
823
|
-
* When
|
|
840
|
+
* When routing.mode is not 'prefix-all', the default locale is not prefixed.
|
|
824
841
|
* Ensure that the current locale is valid and not the default locale.
|
|
825
842
|
*/
|
|
826
843
|
if (
|
|
@@ -852,7 +869,9 @@ const RouterContent = ({ children }) => {
|
|
|
852
869
|
const pathLocale = path.split("/")[1];
|
|
853
870
|
|
|
854
871
|
const isLocaleRoute = locales
|
|
855
|
-
.filter(
|
|
872
|
+
.filter(
|
|
873
|
+
(locale) => routing.mode === "prefix-all" || locale !== defaultLocale
|
|
874
|
+
)
|
|
856
875
|
.some((locale) => locale.toString() === pathLocale);
|
|
857
876
|
|
|
858
877
|
if (isLocaleRoute) {
|
|
@@ -861,7 +880,7 @@ const RouterContent = ({ children }) => {
|
|
|
861
880
|
|
|
862
881
|
return (
|
|
863
882
|
<AppLocalized
|
|
864
|
-
locale={
|
|
883
|
+
locale={routing.mode !== "prefix-all" ? defaultLocale : undefined}
|
|
865
884
|
>
|
|
866
885
|
{children}
|
|
867
886
|
</AppLocalized>
|
|
@@ -888,7 +907,7 @@ const { useEffect } = require("preact/hooks");
|
|
|
888
907
|
const { h } = require("preact"); // Required for JSX
|
|
889
908
|
|
|
890
909
|
// Destructuring configuration from Intlayer
|
|
891
|
-
const { internationalization,
|
|
910
|
+
const { internationalization, routing } = configuration;
|
|
892
911
|
const { locales, defaultLocale } = internationalization;
|
|
893
912
|
|
|
894
913
|
const Navigate = ({ to, replace }) => {
|
|
@@ -921,9 +940,9 @@ const AppLocalized = ({ children, locale }) => {
|
|
|
921
940
|
);
|
|
922
941
|
|
|
923
942
|
/**
|
|
924
|
-
* If
|
|
943
|
+
* If routing.mode is 'prefix-all', the default locale should always be prefixed.
|
|
925
944
|
*/
|
|
926
|
-
if (
|
|
945
|
+
if (routing.mode === "prefix-all") {
|
|
927
946
|
// Validate the locale
|
|
928
947
|
if (!locale || !locales.includes(locale)) {
|
|
929
948
|
// Redirect to the default locale with the updated path
|
|
@@ -941,7 +960,7 @@ const AppLocalized = ({ children, locale }) => {
|
|
|
941
960
|
);
|
|
942
961
|
} else {
|
|
943
962
|
/**
|
|
944
|
-
* When
|
|
963
|
+
* When routing.mode is not 'prefix-all', the default locale is not prefixed.
|
|
945
964
|
* Ensure that the current locale is valid and not the default locale.
|
|
946
965
|
*/
|
|
947
966
|
if (
|
|
@@ -973,7 +992,9 @@ const RouterContent = ({ children }) => {
|
|
|
973
992
|
const pathLocale = path.split("/")[1];
|
|
974
993
|
|
|
975
994
|
const isLocaleRoute = locales
|
|
976
|
-
.filter(
|
|
995
|
+
.filter(
|
|
996
|
+
(locale) => routing.mode === "prefix-all" || locale !== defaultLocale
|
|
997
|
+
)
|
|
977
998
|
.some((locale) => locale.toString() === pathLocale);
|
|
978
999
|
|
|
979
1000
|
if (isLocaleRoute) {
|
|
@@ -982,7 +1003,7 @@ const RouterContent = ({ children }) => {
|
|
|
982
1003
|
|
|
983
1004
|
return (
|
|
984
1005
|
<AppLocalized
|
|
985
|
-
locale={
|
|
1006
|
+
locale={routing.mode !== "prefix-all" ? defaultLocale : undefined}
|
|
986
1007
|
>
|
|
987
1008
|
{children}
|
|
988
1009
|
</AppLocalized>
|
package/docs/en/releases/v7.md
CHANGED
|
@@ -187,8 +187,7 @@ storage: ['cookie', 'localStorage']
|
|
|
187
187
|
|
|
188
188
|
For production applications that need to balance functionality with GDPR compliance:
|
|
189
189
|
|
|
190
|
-
```typescript
|
|
191
|
-
// intlayer.config.ts
|
|
190
|
+
```typescript fileName="intlayer.config.ts"
|
|
192
191
|
export default {
|
|
193
192
|
internationalization: {
|
|
194
193
|
locales: ["en", "fr", "es"],
|
|
@@ -260,8 +259,7 @@ If not set, Intlayer will try to detect the format command automatically. By try
|
|
|
260
259
|
|
|
261
260
|
The `formatCommand` option accepts a string template where `{{file}}` will be replaced with the actual file path:
|
|
262
261
|
|
|
263
|
-
```typescript
|
|
264
|
-
// intlayer.config.ts
|
|
262
|
+
```typescript fileName="intlayer.config.ts"
|
|
265
263
|
export default {
|
|
266
264
|
content: {
|
|
267
265
|
formatCommand: 'bun x biome format "{{file}}" --write --log-level none',
|
|
@@ -320,7 +318,7 @@ The `fill` property has been moved from the `content` section to a new `dictiona
|
|
|
320
318
|
|
|
321
319
|
**v6 configuration:**
|
|
322
320
|
|
|
323
|
-
```typescript
|
|
321
|
+
```typescript fileName="intlayer.config.ts"
|
|
324
322
|
export default {
|
|
325
323
|
content: {
|
|
326
324
|
autoFill: "./{{fileName}}.content.json",
|
|
@@ -331,7 +329,7 @@ export default {
|
|
|
331
329
|
|
|
332
330
|
**v7 configuration:**
|
|
333
331
|
|
|
334
|
-
```typescript
|
|
332
|
+
```typescript fileName="intlayer.config.ts"
|
|
335
333
|
export default {
|
|
336
334
|
content: {
|
|
337
335
|
contentDir: ["src"],
|
|
@@ -399,7 +397,7 @@ The fill command now supports complex content declaration structures, including:
|
|
|
399
397
|
|
|
400
398
|
### Example usage
|
|
401
399
|
|
|
402
|
-
```typescript
|
|
400
|
+
```typescript fileName="*.content.ts"
|
|
403
401
|
// Rewrite current file with all locales
|
|
404
402
|
const content = {
|
|
405
403
|
key: "example",
|
|
@@ -484,7 +482,7 @@ Advanced chunking strategies handle large content files without exceeding AI con
|
|
|
484
482
|
|
|
485
483
|
### Example workflow
|
|
486
484
|
|
|
487
|
-
```typescript
|
|
485
|
+
```typescript fileName="*.content.ts"
|
|
488
486
|
// Large content file gets automatically chunked
|
|
489
487
|
const content = {
|
|
490
488
|
key: "large-documentation",
|
|
@@ -539,7 +537,7 @@ The system automatically:
|
|
|
539
537
|
|
|
540
538
|
**Before (v6):**
|
|
541
539
|
|
|
542
|
-
```typescript
|
|
540
|
+
```typescript fileName="intlayer.config.ts"
|
|
543
541
|
export default {
|
|
544
542
|
content: {
|
|
545
543
|
autoFill: "./{{fileName}}.content.json",
|
|
@@ -558,7 +556,7 @@ export default {
|
|
|
558
556
|
|
|
559
557
|
**After (v7):**
|
|
560
558
|
|
|
561
|
-
```typescript
|
|
559
|
+
```typescript fileName="intlayer.config.ts"
|
|
562
560
|
export default {
|
|
563
561
|
content: {
|
|
564
562
|
contentDir: ["src"],
|
|
@@ -588,7 +586,7 @@ export default {
|
|
|
588
586
|
|
|
589
587
|
**Before (v6):**
|
|
590
588
|
|
|
591
|
-
```typescript
|
|
589
|
+
```typescript fileName="*.content.ts"
|
|
592
590
|
const content = {
|
|
593
591
|
key: "example",
|
|
594
592
|
autoFill: true, // Rewrites this file
|
|
@@ -600,7 +598,7 @@ const content = {
|
|
|
600
598
|
|
|
601
599
|
**After (v7):**
|
|
602
600
|
|
|
603
|
-
```typescript
|
|
601
|
+
```typescript fileName="*.content.ts"
|
|
604
602
|
const content = {
|
|
605
603
|
key: "example",
|
|
606
604
|
fill: true, // Rewrites this file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intlayer/docs",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.3-canary.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Intlayer documentation",
|
|
6
6
|
"keywords": [
|
|
@@ -69,17 +69,17 @@
|
|
|
69
69
|
"watch": "webpack --config ./webpack.config.ts --watch"
|
|
70
70
|
},
|
|
71
71
|
"dependencies": {
|
|
72
|
-
"@intlayer/config": "7.0.
|
|
73
|
-
"@intlayer/core": "7.0.
|
|
74
|
-
"@intlayer/types": "7.0.
|
|
72
|
+
"@intlayer/config": "7.0.3-canary.0",
|
|
73
|
+
"@intlayer/core": "7.0.3-canary.0",
|
|
74
|
+
"@intlayer/types": "7.0.3-canary.0"
|
|
75
75
|
},
|
|
76
76
|
"devDependencies": {
|
|
77
|
-
"@intlayer/api": "7.0.
|
|
78
|
-
"@intlayer/cli": "7.0.
|
|
77
|
+
"@intlayer/api": "7.0.3-canary.0",
|
|
78
|
+
"@intlayer/cli": "7.0.3-canary.0",
|
|
79
79
|
"@types/node": "24.9.1",
|
|
80
|
-
"@utils/ts-config": "7.0.
|
|
81
|
-
"@utils/ts-config-types": "7.0.
|
|
82
|
-
"@utils/tsdown-config": "7.0.
|
|
80
|
+
"@utils/ts-config": "7.0.3-canary.0",
|
|
81
|
+
"@utils/ts-config-types": "7.0.3-canary.0",
|
|
82
|
+
"@utils/tsdown-config": "7.0.3-canary.0",
|
|
83
83
|
"fast-glob": "3.3.3",
|
|
84
84
|
"rimraf": "6.0.1",
|
|
85
85
|
"tsdown": "0.15.9",
|
|
@@ -87,11 +87,11 @@
|
|
|
87
87
|
"vitest": "4.0.3"
|
|
88
88
|
},
|
|
89
89
|
"peerDependencies": {
|
|
90
|
-
"@intlayer/api": "7.0.
|
|
91
|
-
"@intlayer/cli": "7.0.
|
|
92
|
-
"@intlayer/config": "7.0.
|
|
93
|
-
"@intlayer/core": "7.0.
|
|
94
|
-
"@intlayer/types": "7.0.
|
|
90
|
+
"@intlayer/api": "7.0.3-canary.0",
|
|
91
|
+
"@intlayer/cli": "7.0.3-canary.0",
|
|
92
|
+
"@intlayer/config": "7.0.3-canary.0",
|
|
93
|
+
"@intlayer/core": "7.0.3-canary.0",
|
|
94
|
+
"@intlayer/types": "7.0.3-canary.0"
|
|
95
95
|
},
|
|
96
96
|
"engines": {
|
|
97
97
|
"node": ">=14.18"
|