@intlayer/docs 9.3.2 → 9.3.3
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/blog/ar/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/de/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/en/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/en-GB/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/es/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/fr/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/hi/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/id/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/it/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/ja/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/ko/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/pl/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/pt/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/ru/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/tr/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/uk/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/vi/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/zh/nextjs-multilingual-seo-comparison.md +10 -10
- package/docs/ar/bundle_optimization.md +1 -1
- package/docs/ar/configuration.md +32 -9
- package/docs/ar/dictionary/content_file.md +0 -22
- package/docs/ar/dictionary/function_fetching.md +23 -0
- package/docs/ar/eslint.md +9 -9
- package/docs/bn/configuration.md +34 -9
- package/docs/bn/eslint.md +9 -9
- package/docs/cs/bundle_optimization.md +1 -1
- package/docs/cs/configuration.md +33 -9
- package/docs/cs/eslint.md +9 -9
- package/docs/de/bundle_optimization.md +1 -1
- package/docs/de/configuration.md +34 -9
- package/docs/de/dictionary/content_file.md +0 -22
- package/docs/de/dictionary/function_fetching.md +23 -0
- package/docs/de/eslint.md +9 -9
- package/docs/en/bundle_optimization.md +1 -1
- package/docs/en/configuration.md +34 -9
- package/docs/en/dictionary/content_file.md +0 -22
- package/docs/en/dictionary/function_fetching.md +23 -0
- package/docs/en/eslint.md +9 -9
- package/docs/en/packages/intlayer/getLocalizedPath.md +70 -19
- package/docs/en-GB/configuration.md +33 -9
- package/docs/en-GB/dictionary/content_file.md +0 -22
- package/docs/en-GB/dictionary/function_fetching.md +23 -0
- package/docs/en-GB/eslint.md +9 -9
- package/docs/es/bundle_optimization.md +1 -1
- package/docs/es/configuration.md +35 -9
- package/docs/es/dictionary/content_file.md +0 -22
- package/docs/es/dictionary/function_fetching.md +23 -0
- package/docs/es/eslint.md +9 -9
- package/docs/fr/bundle_optimization.md +1 -1
- package/docs/fr/configuration.md +35 -9
- package/docs/fr/dictionary/content_file.md +0 -22
- package/docs/fr/dictionary/function_fetching.md +23 -0
- package/docs/fr/eslint.md +9 -9
- package/docs/hi/configuration.md +35 -9
- package/docs/hi/dictionary/content_file.md +0 -22
- package/docs/hi/dictionary/function_fetching.md +23 -0
- package/docs/hi/eslint.md +9 -9
- package/docs/id/configuration.md +35 -9
- package/docs/id/dictionary/content_file.md +0 -22
- package/docs/id/dictionary/function_fetching.md +23 -0
- package/docs/id/eslint.md +9 -9
- package/docs/it/bundle_optimization.md +1 -1
- package/docs/it/configuration.md +35 -9
- package/docs/it/dictionary/content_file.md +0 -22
- package/docs/it/dictionary/function_fetching.md +23 -0
- package/docs/it/eslint.md +9 -9
- package/docs/ja/configuration.md +30 -9
- package/docs/ja/dictionary/content_file.md +0 -22
- package/docs/ja/dictionary/function_fetching.md +23 -0
- package/docs/ja/eslint.md +9 -9
- package/docs/ko/configuration.md +31 -9
- package/docs/ko/dictionary/content_file.md +0 -22
- package/docs/ko/dictionary/function_fetching.md +23 -0
- package/docs/ko/eslint.md +9 -9
- package/docs/nl/configuration.md +33 -9
- package/docs/nl/eslint.md +9 -9
- package/docs/pl/bundle_optimization.md +1 -1
- package/docs/pl/configuration.md +34 -9
- package/docs/pl/dictionary/content_file.md +0 -22
- package/docs/pl/dictionary/function_fetching.md +23 -0
- package/docs/pl/eslint.md +9 -9
- package/docs/pt/bundle_optimization.md +1 -1
- package/docs/pt/configuration.md +34 -9
- package/docs/pt/dictionary/content_file.md +0 -22
- package/docs/pt/dictionary/function_fetching.md +23 -0
- package/docs/pt/eslint.md +9 -9
- package/docs/ru/bundle_optimization.md +1 -1
- package/docs/ru/configuration.md +34 -9
- package/docs/ru/dictionary/content_file.md +0 -22
- package/docs/ru/dictionary/function_fetching.md +23 -0
- package/docs/ru/eslint.md +9 -9
- package/docs/tr/bundle_optimization.md +1 -1
- package/docs/tr/configuration.md +33 -9
- package/docs/tr/dictionary/content_file.md +0 -22
- package/docs/tr/dictionary/function_fetching.md +23 -0
- package/docs/tr/eslint.md +9 -9
- package/docs/uk/configuration.md +35 -9
- package/docs/uk/dictionary/content_file.md +0 -22
- package/docs/uk/dictionary/function_fetching.md +23 -0
- package/docs/uk/eslint.md +9 -9
- package/docs/ur/configuration.md +35 -9
- package/docs/ur/eslint.md +9 -9
- package/docs/vi/bundle_optimization.md +1 -1
- package/docs/vi/configuration.md +33 -9
- package/docs/vi/dictionary/content_file.md +0 -22
- package/docs/vi/dictionary/function_fetching.md +23 -0
- package/docs/vi/eslint.md +9 -9
- package/docs/zh/bundle_optimization.md +1 -1
- package/docs/zh/configuration.md +29 -9
- package/docs/zh/dictionary/content_file.md +0 -22
- package/docs/zh/dictionary/function_fetching.md +23 -0
- package/docs/zh/eslint.md +9 -9
- package/docs/zh-TW/bundle_optimization.md +1 -1
- package/docs/zh-TW/eslint.md +9 -9
- package/package.json +5 -5
|
@@ -19,6 +19,9 @@ slugs:
|
|
|
19
19
|
- intlayer
|
|
20
20
|
- getLocalizedPath
|
|
21
21
|
history:
|
|
22
|
+
- version: 8.0.0
|
|
23
|
+
date: 2026-08-19
|
|
24
|
+
changes: "Apply the locale prefix, and narrow the return type from the declared rewrite rules"
|
|
22
25
|
- version: 8.0.0
|
|
23
26
|
date: 2026-01-22
|
|
24
27
|
changes: "Implement custom URL rewrites"
|
|
@@ -29,13 +32,17 @@ author: aymericzip
|
|
|
29
32
|
|
|
30
33
|
## Description
|
|
31
34
|
|
|
32
|
-
The `getLocalizedPath` function
|
|
35
|
+
The `getLocalizedPath` function localizes a canonical path (internal application path): it resolves the custom rewrite rules, then applies the locale prefix of your routing mode. It is particularly useful for generating SEO-friendly URLs that vary by language.
|
|
36
|
+
|
|
37
|
+
It is the relative counterpart of [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocalizedUrl.md) — for a relative input both return the same value. Unlike `getLocalizedUrl`, it never returns an absolute URL: the `domains` configuration is ignored, so a locale served from its own domain still yields a path. An absolute input is accepted, but its origin is dropped — only its path, query string and hash are kept.
|
|
33
38
|
|
|
34
39
|
**Key Features:**
|
|
35
40
|
|
|
36
41
|
- Supports dynamic route parameters using the `[param]` syntax.
|
|
37
42
|
- Resolves paths according to custom rewrite rules defined in your configuration.
|
|
43
|
+
- Applies the locale prefix of the configured routing mode (`prefix-no-default`, `prefix-all`, …).
|
|
38
44
|
- Automatically handles fallback to the canonical path if no rewrite rule is found for the specified locale.
|
|
45
|
+
- Narrows its return type: a literal path resolves to the localized string literal at compile time.
|
|
39
46
|
|
|
40
47
|
---
|
|
41
48
|
|
|
@@ -43,9 +50,14 @@ The `getLocalizedPath` function resolves a canonical path (internal application
|
|
|
43
50
|
|
|
44
51
|
```typescript
|
|
45
52
|
getLocalizedPath(
|
|
46
|
-
canonicalPath: string,
|
|
47
|
-
locale
|
|
48
|
-
|
|
53
|
+
canonicalPath: string, // Required
|
|
54
|
+
locale?: Locales, // Optional
|
|
55
|
+
options?: { // Optional
|
|
56
|
+
locales?: Locales[];
|
|
57
|
+
defaultLocale?: Locales;
|
|
58
|
+
mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params';
|
|
59
|
+
rewrite?: RoutingConfig['rewrite'];
|
|
60
|
+
}
|
|
49
61
|
): string
|
|
50
62
|
```
|
|
51
63
|
|
|
@@ -60,17 +72,21 @@ getLocalizedPath(
|
|
|
60
72
|
- **Type**: `string`
|
|
61
73
|
- **Required**: Yes
|
|
62
74
|
|
|
63
|
-
|
|
75
|
+
### Optional Parameters
|
|
76
|
+
|
|
77
|
+
- `locale?: Locales`
|
|
64
78
|
- **Description**: The target locale for which the path should be localized.
|
|
65
79
|
- **Type**: `Locales`
|
|
66
|
-
- **
|
|
80
|
+
- **Default**: The default locale of your project's configuration.
|
|
67
81
|
|
|
68
|
-
|
|
82
|
+
- `options?: object`
|
|
83
|
+
- **Description**: Routing overrides. Every entry defaults to your project's configuration.
|
|
84
|
+
- **Type**: `object`
|
|
69
85
|
|
|
70
|
-
- `
|
|
71
|
-
-
|
|
72
|
-
- **
|
|
73
|
-
- **Default**: `configuration.routing.rewrite`
|
|
86
|
+
- `options.locales?: Locales[]` — supported locales. **Default**: `configuration.internationalization.locales`
|
|
87
|
+
- `options.defaultLocale?: Locales` — the default locale. **Default**: `configuration.internationalization.defaultLocale`
|
|
88
|
+
- `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'` — how the locale appears in the path. **Default**: `configuration.routing.mode`
|
|
89
|
+
- `options.rewrite?: RoutingConfig['rewrite']` — custom rewrite rules. **Default**: `configuration.routing.rewrite`
|
|
74
90
|
|
|
75
91
|
---
|
|
76
92
|
|
|
@@ -79,6 +95,28 @@ getLocalizedPath(
|
|
|
79
95
|
- **Type**: `string`
|
|
80
96
|
- **Description**: The localized path for the specified locale.
|
|
81
97
|
|
|
98
|
+
The type is narrowed from the rewrite rules declared in your configuration, so the editor shows the resolved path rather than a bare `string`:
|
|
99
|
+
|
|
100
|
+
```typescript codeFormat="typescript"
|
|
101
|
+
// Configuration: mode 'prefix-no-default', defaultLocale 'en',
|
|
102
|
+
// { '/about': { fr: '/a-propos' }, '/product/[id]': { fr: '/produit/[id]' } }
|
|
103
|
+
const about = getLocalizedPath("/about", Locales.FRENCH);
|
|
104
|
+
// ^? '/fr/a-propos'
|
|
105
|
+
const product = getLocalizedPath("/product/123", Locales.FRENCH);
|
|
106
|
+
// ^? '/fr/produit/123'
|
|
107
|
+
const contact = getLocalizedPath("/contact", Locales.FRENCH);
|
|
108
|
+
// ^? '/fr/contact' (no rewrite rule matches, only the prefix is applied)
|
|
109
|
+
const home = getLocalizedPath("/", Locales.FRENCH);
|
|
110
|
+
// ^? '/fr'
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
The same narrowing flows into [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocalizedUrl.md), which applies the rewrite rules before prefixing the locale.
|
|
114
|
+
|
|
115
|
+
Two cases stay widened to `string`, because they cannot be resolved at compile time:
|
|
116
|
+
|
|
117
|
+
- a path that is not a string literal (e.g. one built from a variable);
|
|
118
|
+
- a path matched by a rule using a multi-segment or optional parameter (`[...slug]`, `[[...slug]]`, `:param?`).
|
|
119
|
+
|
|
82
120
|
---
|
|
83
121
|
|
|
84
122
|
## Example Usage
|
|
@@ -90,12 +128,13 @@ If you have configured custom rewrites in your `intlayer.config.ts`:
|
|
|
90
128
|
```typescript codeFormat="typescript"
|
|
91
129
|
import { getLocalizedPath, Locales } from "intlayer";
|
|
92
130
|
|
|
93
|
-
// Configuration:
|
|
131
|
+
// Configuration: mode 'prefix-no-default', defaultLocale 'en',
|
|
132
|
+
// { '/about': { en: '/about', fr: '/a-propos' } }
|
|
94
133
|
getLocalizedPath("/about", Locales.FRENCH);
|
|
95
|
-
// Output: "/a-propos"
|
|
134
|
+
// Output: "/fr/a-propos"
|
|
96
135
|
|
|
97
136
|
getLocalizedPath("/about", Locales.ENGLISH);
|
|
98
|
-
// Output: "/about"
|
|
137
|
+
// Output: "/about" (default locale, no prefix)
|
|
99
138
|
```
|
|
100
139
|
|
|
101
140
|
### Usage with Dynamic Routes
|
|
@@ -105,7 +144,7 @@ import { getLocalizedPath, Locales } from "intlayer";
|
|
|
105
144
|
|
|
106
145
|
// Configuration: { '/product/[id]': { en: '/product/[id]', fr: '/produit/[id]' } }
|
|
107
146
|
getLocalizedPath("/product/123", Locales.FRENCH);
|
|
108
|
-
// Output: "/produit/123"
|
|
147
|
+
// Output: "/fr/produit/123"
|
|
109
148
|
```
|
|
110
149
|
|
|
111
150
|
### Manual Rewrite Rules
|
|
@@ -122,13 +161,25 @@ const manualRules = {
|
|
|
122
161
|
},
|
|
123
162
|
};
|
|
124
163
|
|
|
125
|
-
getLocalizedPath("/contact", Locales.FRENCH, manualRules);
|
|
126
|
-
// Output: "/contactez-nous"
|
|
164
|
+
getLocalizedPath("/contact", Locales.FRENCH, { rewrite: manualRules });
|
|
165
|
+
// Output: "/fr/contactez-nous"
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### Omitting the Locale
|
|
169
|
+
|
|
170
|
+
When no locale is given, the path is localized for the configured default locale:
|
|
171
|
+
|
|
172
|
+
```typescript codeFormat="typescript"
|
|
173
|
+
import { getLocalizedPath } from "intlayer";
|
|
174
|
+
|
|
175
|
+
// Configuration: defaultLocale = Locales.ENGLISH, { '/about': { en: '/about', fr: '/a-propos' } }
|
|
176
|
+
getLocalizedPath("/about");
|
|
177
|
+
// Output: "/about"
|
|
127
178
|
```
|
|
128
179
|
|
|
129
180
|
---
|
|
130
181
|
|
|
131
182
|
## Related Functions
|
|
132
183
|
|
|
133
|
-
- [`getCanonicalPath`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getCanonicalPath.md): Resolves a localized path back to its internal canonical path.
|
|
134
|
-
- [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocalizedUrl.md):
|
|
184
|
+
- [`getCanonicalPath`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getCanonicalPath.md): Resolves a localized path back to its internal canonical path. Note that it undoes the rewrite rules only — strip the locale prefix with [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getPathWithoutLocale.md) first.
|
|
185
|
+
- [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocalizedUrl.md): Same localization, but able to return an absolute URL (protocol, host, domain routing).
|
|
@@ -479,6 +479,28 @@ const config: IntlayerConfig = {
|
|
|
479
479
|
*/
|
|
480
480
|
purge: true,
|
|
481
481
|
|
|
482
|
+
/**
|
|
483
|
+
* Group the per-locale dictionary chunks by the code-split boundary that uses
|
|
484
|
+
* them, so a lazily loaded page fetches its content in one request.
|
|
485
|
+
* Default: true
|
|
486
|
+
*
|
|
487
|
+
* Note:
|
|
488
|
+
* - Only applies to dictionaries using `importMode: 'dynamic'`.
|
|
489
|
+
*/
|
|
490
|
+
chunkGrouping: true,
|
|
491
|
+
|
|
492
|
+
/**
|
|
493
|
+
* Load a dictionary together with the chunk that uses it, instead of fetching
|
|
494
|
+
* it once that chunk renders. Readers render synchronously instead of
|
|
495
|
+
* suspending, so navigating no longer flashes a loading state.
|
|
496
|
+
* Default: true
|
|
497
|
+
*
|
|
498
|
+
* Note:
|
|
499
|
+
* - Only the resolved locale is awaited, so a page still downloads only the
|
|
500
|
+
* language it renders.
|
|
501
|
+
*/
|
|
502
|
+
dictionariesPreload: true,
|
|
503
|
+
|
|
482
504
|
/**
|
|
483
505
|
* Output format for generated dictionary files.
|
|
484
506
|
* Default: ['cjs', 'esm']
|
|
@@ -1060,15 +1082,17 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
|
1060
1082
|
|
|
1061
1083
|
> When optimized, Intlayer will replace dictionary calls to optimize chunking, so the final bundle only imports dictionaries that are actually used.
|
|
1062
1084
|
|
|
1063
|
-
| Field
|
|
1064
|
-
|
|
|
1065
|
-
| `mode`
|
|
1066
|
-
| `optimize`
|
|
1067
|
-
| `minify`
|
|
1068
|
-
| `prune`
|
|
1069
|
-
| `checkTypes`
|
|
1070
|
-
| `
|
|
1071
|
-
| `
|
|
1085
|
+
| Field | Description | Type | Default | Example | Note |
|
|
1086
|
+
| --------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1087
|
+
| `mode` | Controls the mode of the build. | `'auto'` | <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: build enabled automatically when the application is built.<br/>• `'manual'`: only runs when the build command is executed.<br/>• Can be used to disable dictionary builds (e.g. to avoid running in Node.js environments). |
|
|
1088
|
+
| `optimize` | Controls whether the build should be optimized. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • If unset, optimization is triggered on framework build (Vite/Next.js).<br/>• `true` forces optimization including dev mode.<br/>• `false` disables it.<br/>• When enabled, replaces dictionary calls to optimize chunking - only used dictionaries are imported.<br/>• Relies on `@intlayer/babel` and `@intlayer/swc` plugins.<br/>• Keys must be declared statically. |
|
|
1089
|
+
| `minify` | Defines if the dictionaries should be minified to reduce the bundle size. | `boolean` | `false` | | • Defines if the bundle should be minified.<br/>• Default: `false` in production.<br/>• This option will be ignored if `optimize` is disabled.<br/>• This option will be ignored if `editor.enabled` is true. |
|
|
1090
|
+
| `prune` | Defines if the unused keys in dictionaries should be purged. | `boolean` | `true` | | • Defines if the bundle should be pruned.<br/>• Default: `true` in production.<br/>• This option will be ignored if `optimize` is disabled. |
|
|
1091
|
+
| `checkTypes` | Indicates if the build should check TypeScript types and log errors. | `boolean` | `false` | | Can slow down the build. |
|
|
1092
|
+
| `chunkGrouping` | Whether to group the per-locale dictionary chunks by the code-split boundary that uses them. | `boolean` | `true` | | • Without grouping, a page assembled from many components issues one request per dictionary.<br/>• Dictionaries reached from several boundaries move to a shared chunk, so no page ships another page's content.<br/>• Only applies to dictionaries using `importMode: 'dynamic'`.<br/>• Only applies to the client build, and only when bundling (not in dev). |
|
|
1093
|
+
| `dictionariesPreload` | Whether a dictionary should load together with the chunk that uses it, instead of being fetched once that chunk renders. | `boolean` | `true` | | • The generated entry point awaits the browsing locale at the top level, so a lazily loaded route is not considered loaded until its content is there.<br/>• Readers render synchronously instead of suspending, so navigating no longer flashes a loading state.<br/>• Only the resolved locale is awaited, so a page still downloads only the language it renders.<br/>• Only applies to dictionaries using `importMode: 'dynamic'`, on the client build.<br/>• Requires a bundler supporting top-level await (Vite, esbuild). |
|
|
1094
|
+
| `outputFormat` | Controls the output format of the dictionaries. | `('esm' | 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
|
|
1095
|
+
| `traversePattern` | Patterns defining which files to traverse during optimization. | `string[]` | `['**/*.{tsx,ts,js,mjs,cjs,jsx,vue,svelte,svte}', '!**/node_modules/**', '!**/dist/**', '!**/.intlayer/**', '!**/*.config.*', '!**/*.test.*', '!**/*.spec.*', '!**/*.stories.*']` | `['src/**/*.{ts,tsx}', '../ui-library/**/*.{ts,tsx}', '!**/node_modules/**']` | • Limit optimization to relevant files to improve build performance.<br/>• Ignored if `optimize` is disabled.<br/>• Uses glob pattern. |
|
|
1072
1096
|
|
|
1073
1097
|
---
|
|
1074
1098
|
|
|
@@ -532,28 +532,6 @@ Used in conjunction with Variants, this field defines named content alternatives
|
|
|
532
532
|
|
|
533
533
|
> See [Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dynamic_dictionaries/variants.md) for more information.
|
|
534
534
|
|
|
535
|
-
#### `meta` (`Record<string, string | number | boolean>`)
|
|
536
|
-
|
|
537
|
-
Used in conjunction with Dynamic Records, this field allows declaring CMS-managed records or arbitrary data fetched at runtime by an opaque ID. The dictionary identity is defined by the arbitrary set of key-value pairs declared in this `meta` field.
|
|
538
|
-
|
|
539
|
-
**Example:**
|
|
540
|
-
|
|
541
|
-
```typescript
|
|
542
|
-
{
|
|
543
|
-
key: "product-copy",
|
|
544
|
-
meta: {
|
|
545
|
-
id: "prod_abc",
|
|
546
|
-
userId: "user_123"
|
|
547
|
-
},
|
|
548
|
-
content: {
|
|
549
|
-
name: "Widget Pro",
|
|
550
|
-
description: "The best widget."
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
```
|
|
554
|
-
|
|
555
|
-
> See [Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dynamic_dictionaries/dynamic_content.md) for more information.
|
|
556
|
-
|
|
557
535
|
### CMS Properties
|
|
558
536
|
|
|
559
537
|
##### `version` (string)
|
|
@@ -85,6 +85,29 @@ No way to fetch content from a JSON file, use a .ts or .js file instead
|
|
|
85
85
|
|
|
86
86
|
In this case, the `fakeFetch` function mimics a delay to simulate server response time. Intlayer executes the asynchronous function and uses the result as the content for the `text` key.
|
|
87
87
|
|
|
88
|
+
## Fetching Remote Content
|
|
89
|
+
|
|
90
|
+
You can also assign a promise directly to a content field. Intlayer awaits it while building the dictionaries and inlines the resolved value:
|
|
91
|
+
|
|
92
|
+
```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
93
|
+
import type { Dictionary } from "intlayer";
|
|
94
|
+
|
|
95
|
+
const remoteContent = {
|
|
96
|
+
key: "remote_content",
|
|
97
|
+
content: {
|
|
98
|
+
externalContent: fetch("https://example.com").then((res) => res.json()),
|
|
99
|
+
},
|
|
100
|
+
} satisfies Dictionary;
|
|
101
|
+
|
|
102
|
+
export default remoteContent;
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
|
|
106
|
+
No way to fetch content from a JSON file, use a .ts or .js file instead
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
> The request runs at build time, so the fetched data is a snapshot embedded in the dictionary. Rebuild your dictionaries to refresh it.
|
|
110
|
+
|
|
88
111
|
## Using Function-Based Content in React Components
|
|
89
112
|
|
|
90
113
|
To use function-based content in a React component, you need to import `useIntlayer` from `react-intlayer` and call it with the content ID to retrieve the content. Here's an example:
|
package/docs/en-GB/eslint.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-08-12
|
|
3
|
-
updatedAt: 2026-08-
|
|
3
|
+
updatedAt: 2026-08-13
|
|
4
4
|
title: ESLint Plugin | Lint rules for Intlayer
|
|
5
5
|
description: Catch hardcoded strings, dynamic calls the Intlayer compiler cannot optimize, and unused dictionary content, with eslint-plugin-intlayer. Works with ESLint and oxlint, across React, Vue, Svelte, Angular and Astro.
|
|
6
6
|
keywords:
|
|
@@ -52,7 +52,7 @@ pnpm add --save-dev eslint-plugin-intlayer
|
|
|
52
52
|
yarn add --dev eslint-plugin-intlayer
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
Requires ESLint 9 or later (flat config).
|
|
55
|
+
Requires ESLint 9 or later (flat config). ESLint 10 is supported.
|
|
56
56
|
|
|
57
57
|
## Usage
|
|
58
58
|
|
|
@@ -61,20 +61,20 @@ The plugin runs in both ESLint and [oxlint](https://oxc.rs) — the same rules,
|
|
|
61
61
|
<Tabs defaultTab="eslint">
|
|
62
62
|
<Tab label="ESLint" value="eslint">
|
|
63
63
|
|
|
64
|
-
```javascript fileName="eslint.config.mjs"
|
|
64
|
+
```javascript fileName="eslint.config.mjs"
|
|
65
65
|
import intlayer from "eslint-plugin-intlayer";
|
|
66
66
|
|
|
67
67
|
export default [...intlayer.configs.recommended];
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
Or
|
|
70
|
+
Or spread a config and set the severities yourself:
|
|
71
71
|
|
|
72
|
-
```javascript fileName="eslint.config.mjs"
|
|
72
|
+
```javascript fileName="eslint.config.mjs"
|
|
73
73
|
import intlayer from "eslint-plugin-intlayer";
|
|
74
74
|
|
|
75
75
|
export default [
|
|
76
|
+
...intlayer.configs.recommended,
|
|
76
77
|
{
|
|
77
|
-
plugins: { intlayer },
|
|
78
78
|
rules: {
|
|
79
79
|
"intlayer/no-raw-text": "warn",
|
|
80
80
|
"intlayer/static-dictionary-key": "error",
|
|
@@ -144,7 +144,7 @@ To fix a whole file at once, run `npx intlayer extract` and let the compiler mov
|
|
|
144
144
|
|
|
145
145
|
**Options**
|
|
146
146
|
|
|
147
|
-
```javascript fileName="eslint.config.mjs"
|
|
147
|
+
```javascript fileName="eslint.config.mjs"
|
|
148
148
|
{
|
|
149
149
|
"intlayer/no-raw-text": [
|
|
150
150
|
"warn",
|
|
@@ -247,7 +247,7 @@ Unlike the other rules, this one cannot answer from the file in front of it —
|
|
|
247
247
|
|
|
248
248
|
**Options**
|
|
249
249
|
|
|
250
|
-
```javascript fileName="eslint.config.mjs"
|
|
250
|
+
```javascript fileName="eslint.config.mjs"
|
|
251
251
|
{
|
|
252
252
|
"intlayer/no-unused-content": [
|
|
253
253
|
"warn",
|
|
@@ -296,7 +296,7 @@ Every rule works across all Intlayer integrations, including inside Vue, Svelte
|
|
|
296
296
|
| Angular templates | `.component.html` | `@angular-eslint/template-parser` |
|
|
297
297
|
| Astro | `.astro` | `astro-eslint-parser` |
|
|
298
298
|
|
|
299
|
-
```javascript fileName="eslint.config.mjs"
|
|
299
|
+
```javascript fileName="eslint.config.mjs"
|
|
300
300
|
import intlayer from "eslint-plugin-intlayer";
|
|
301
301
|
import tseslint from "typescript-eslint";
|
|
302
302
|
import vueParser from "vue-eslint-parser";
|
|
@@ -159,7 +159,7 @@ pnpm add -D webpack-bundle-analyzer
|
|
|
159
159
|
bun add -d webpack-bundle-analyzer
|
|
160
160
|
```
|
|
161
161
|
|
|
162
|
-
```typescript fileName="webpack.config.ts
|
|
162
|
+
```typescript fileName="webpack.config.ts"
|
|
163
163
|
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
|
|
164
164
|
|
|
165
165
|
export default {
|
package/docs/es/configuration.md
CHANGED
|
@@ -478,6 +478,30 @@ const config: IntlayerConfig = {
|
|
|
478
478
|
*/
|
|
479
479
|
purge: true,
|
|
480
480
|
|
|
481
|
+
/**
|
|
482
|
+
* Agrupar los fragmentos de diccionario por configuración regional según el
|
|
483
|
+
* límite de división de código que los usa, para que una página cargada de
|
|
484
|
+
* forma diferida obtenga su contenido en una sola petición.
|
|
485
|
+
* Predeterminado: true
|
|
486
|
+
*
|
|
487
|
+
* Nota:
|
|
488
|
+
* - Solo se aplica a los diccionarios que usan `importMode: 'dynamic'`.
|
|
489
|
+
*/
|
|
490
|
+
chunkGrouping: true,
|
|
491
|
+
|
|
492
|
+
/**
|
|
493
|
+
* Cargar un diccionario junto con el fragmento que lo usa, en lugar de
|
|
494
|
+
* obtenerlo una vez que ese fragmento se renderiza. Los lectores se renderizan
|
|
495
|
+
* de forma síncrona en lugar de suspenderse, por lo que navegar ya no muestra
|
|
496
|
+
* un parpadeo de carga.
|
|
497
|
+
* Predeterminado: true
|
|
498
|
+
*
|
|
499
|
+
* Nota:
|
|
500
|
+
* - Solo se espera la configuración regional resuelta, por lo que la página
|
|
501
|
+
* solo descarga el idioma que muestra.
|
|
502
|
+
*/
|
|
503
|
+
dictionariesPreload: true,
|
|
504
|
+
|
|
481
505
|
/**
|
|
482
506
|
* Formato de salida para los archivos de diccionario generados.
|
|
483
507
|
* Predeterminado: ['cjs', 'esm']
|
|
@@ -1056,15 +1080,17 @@ Las opciones de compilación se aplican a los complementos `@intlayer/babel` y `
|
|
|
1056
1080
|
|
|
1057
1081
|
> Cuando se optimiza, Intlayer reemplazará las llamadas a diccionarios para optimizar el chunking, de modo que el bundle final solo importe los diccionarios que realmente se usan.
|
|
1058
1082
|
|
|
1059
|
-
| Campo
|
|
1060
|
-
|
|
|
1061
|
-
| `mode`
|
|
1062
|
-
| `optimize`
|
|
1063
|
-
| `minify`
|
|
1064
|
-
| `purge`
|
|
1065
|
-
| `checkTypes`
|
|
1066
|
-
| `
|
|
1067
|
-
| `
|
|
1083
|
+
| Campo | Descripción | Tipo | Predeterminado | Ejemplo | Nota |
|
|
1084
|
+
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1085
|
+
| `mode` | Controla el modo de compilación. | `'auto'` | <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: compilación activada automáticamente durante la compilación de la aplicación.<br/>• `'manual'`: solo se ejecuta cuando se lanza explícitamente el comando de compilación.<br/>• Se puede usar para desactivar compilaciones de diccionarios (p. ej. para evitar ejecución en entornos de Node.js). |
|
|
1086
|
+
| `optimize` | Controla si la compilación debe optimizarse. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • Si no se define, la optimización se dispara al compilar el framework (Vite/Next.js).<br/>• `true` fuerza la optimización incluso en modo dev.<br/>• `false` la desactiva.<br/>• Activo, reemplaza las llamadas a diccionarios para optimizar el chunking.<br/>• Depende de los plugins `@intlayer/babel` y `@intlayer/swc`. |
|
|
1087
|
+
| `minify` | Minificar los diccionarios para reducir el tamaño del bundle. | `boolean` | `false` | | • Indica si el bundle debe ser minificado.<br/>• Por defecto: `true` en producción.<br/>• Esta opción será ignorada si `optimize` está desactivado.<br/>• Esta opción será ignorada si `editor.enabled` es verdadero. |
|
|
1088
|
+
| `purge` | Purgar las claves no utilizadas en los diccionarios. | `boolean` | `false` | | • Indica si el bundle debe ser purgado.<br/>• Por defecto: `true` en producción.<br/>• Esta opción será ignorada si `optimize` está desactivado. |
|
|
1089
|
+
| `checkTypes` | Indica si la compilación debe verificar tipos de TypeScript y registrar errores. | `boolean` | `false` | | Puede ralentizar la compilación. |
|
|
1090
|
+
| `chunkGrouping` | Indica si se deben agrupar los fragmentos de diccionario por configuración regional según el límite de división de código que los usa. | `boolean` | `true` | | • Sin agrupación, una página compuesta por muchos componentes emite una petición por diccionario.<br/>• Los diccionarios alcanzados desde varios límites pasan a un fragmento compartido, por lo que ninguna página incluye el contenido de otra.<br/>• Solo se aplica a los diccionarios que usan `importMode: 'dynamic'`.<br/>• Solo se aplica a la compilación del cliente, y solo al empaquetar (no en desarrollo). |
|
|
1091
|
+
| `dictionariesPreload` | Indica si un diccionario debe cargarse junto con el fragmento que lo usa, en lugar de obtenerse una vez que ese fragmento se renderiza. | `boolean` | `true` | | • El punto de entrada generado espera la configuración regional de navegación en el nivel superior, por lo que una ruta cargada de forma diferida no se considera cargada hasta que su contenido está disponible.<br/>• Los lectores se renderizan de forma síncrona en lugar de suspenderse, por lo que navegar ya no muestra un parpadeo de carga.<br/>• Solo se espera la configuración regional resuelta, por lo que la página solo descarga el idioma que muestra.<br/>• Solo se aplica a los diccionarios que usan `importMode: 'dynamic'`, en la compilación del cliente.<br/>• Requiere un empaquetador compatible con top-level await (Vite, esbuild). |
|
|
1092
|
+
| `outputFormat` | Controla el formato de salida de los diccionarios. | `('esm' | 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
|
|
1093
|
+
| `traversePattern` | Patrones que definen qué archivos recorrer durante la optimización. | `string[]` | `['**/*.{tsx,ts,js,mjs,cjs,jsx,vue,svelte,svte}', '!**/node_modules/**', '!**/dist/**', '!**/.intlayer/**', '!**/*.config.*', '!**/*.test.*', '!**/*.spec.*', '!**/*.stories.*']` | `['src/**/*.{ts,tsx}', '../ui-library/**/*.{ts,tsx}', '!**/node_modules/**']` | • Limite la optimización a los archivos relevantes para mejorar el rendimiento de compilación.<br/>• Se ignora si `optimize` está desactivado.<br/>• Usa patrones glob (glob patterns). |
|
|
1068
1094
|
|
|
1069
1095
|
---
|
|
1070
1096
|
|
|
@@ -535,28 +535,6 @@ Utilizado en conjunto con las Variantes, este campo define alternativas de conte
|
|
|
535
535
|
|
|
536
536
|
> Consulta [Variantes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/variants.md) para más información.
|
|
537
537
|
|
|
538
|
-
#### `meta` (`Record<string, string | number | boolean>`)
|
|
539
|
-
|
|
540
|
-
Utilizado en conjunto con los Registros Dinámicos, este campo permite declarar registros gestionados por CMS o datos arbitrarios recuperados en tiempo de ejecución mediante un ID opaco. La identidad del diccionario se define mediante el conjunto arbitrario de pares clave-valor declarados en este campo `meta`.
|
|
541
|
-
|
|
542
|
-
**Ejemplo:**
|
|
543
|
-
|
|
544
|
-
```typescript
|
|
545
|
-
{
|
|
546
|
-
key: "product-copy",
|
|
547
|
-
meta: {
|
|
548
|
-
id: "prod_abc",
|
|
549
|
-
userId: "user_123"
|
|
550
|
-
},
|
|
551
|
-
content: {
|
|
552
|
-
name: "Widget Pro",
|
|
553
|
-
description: "The best widget."
|
|
554
|
-
}
|
|
555
|
-
}
|
|
556
|
-
```
|
|
557
|
-
|
|
558
|
-
> Consulta [Registros Dinámicos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/dynamic_content.md) para más información.
|
|
559
|
-
|
|
560
538
|
### Propiedades del CMS
|
|
561
539
|
|
|
562
540
|
##### `version` (cadena)
|
|
@@ -89,6 +89,29 @@ No es posible obtener contenido desde un archivo JSON, usa un archivo .ts o .js
|
|
|
89
89
|
|
|
90
90
|
En este caso, la función `fakeFetch` simula un retraso para imitar el tiempo de respuesta del servidor. Intlayer ejecuta la función asíncrona y utiliza el resultado como contenido para la clave `text`.
|
|
91
91
|
|
|
92
|
+
## Obtención de contenido remoto
|
|
93
|
+
|
|
94
|
+
También puedes asignar una promesa directamente a un campo de contenido. Intlayer la espera mientras construye los diccionarios e incorpora el valor resuelto:
|
|
95
|
+
|
|
96
|
+
```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
97
|
+
import type { Dictionary } from "intlayer";
|
|
98
|
+
|
|
99
|
+
const remoteContent = {
|
|
100
|
+
key: "remote_content",
|
|
101
|
+
content: {
|
|
102
|
+
externalContent: fetch("https://example.com").then((res) => res.json()),
|
|
103
|
+
},
|
|
104
|
+
} satisfies Dictionary;
|
|
105
|
+
|
|
106
|
+
export default remoteContent;
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
|
|
110
|
+
No es posible obtener contenido desde un archivo JSON, usa un archivo .ts o .js en su lugar
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
> La solicitud se ejecuta en tiempo de compilación, por lo que los datos obtenidos son una instantánea incrustada en el diccionario. Reconstruye tus diccionarios para actualizarlos.
|
|
114
|
+
|
|
92
115
|
## Uso de contenido basado en funciones en componentes React
|
|
93
116
|
|
|
94
117
|
Para usar contenido basado en funciones en un componente React, necesitas importar `useIntlayer` desde `react-intlayer` y llamarlo con el ID del contenido para obtenerlo. Aquí tienes un ejemplo:
|
package/docs/es/eslint.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-08-12
|
|
3
|
-
updatedAt: 2026-08-
|
|
3
|
+
updatedAt: 2026-08-13
|
|
4
4
|
title: Plugin de ESLint | Reglas de lint para Intlayer
|
|
5
5
|
description: Detecta cadenas hardcodeadas, llamadas dinámicas que el compilador de Intlayer no puede optimizar y contenido de diccionario sin usar, con eslint-plugin-intlayer. Funciona con ESLint y oxlint, en React, Vue, Svelte, Angular y Astro.
|
|
6
6
|
keywords:
|
|
@@ -52,7 +52,7 @@ pnpm add --save-dev eslint-plugin-intlayer
|
|
|
52
52
|
yarn add --dev eslint-plugin-intlayer
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
Requiere ESLint 9 o posterior (flat config).
|
|
55
|
+
Requiere ESLint 9 o posterior (flat config). ESLint 10 es compatible.
|
|
56
56
|
|
|
57
57
|
## Uso
|
|
58
58
|
|
|
@@ -61,20 +61,20 @@ El plugin funciona tanto en ESLint como en [oxlint](https://oxc.rs): las mismas
|
|
|
61
61
|
<Tabs defaultTab="eslint">
|
|
62
62
|
<Tab label="ESLint" value="eslint">
|
|
63
63
|
|
|
64
|
-
```javascript fileName="eslint.config.mjs"
|
|
64
|
+
```javascript fileName="eslint.config.mjs"
|
|
65
65
|
import intlayer from "eslint-plugin-intlayer";
|
|
66
66
|
|
|
67
67
|
export default [...intlayer.configs.recommended];
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
O
|
|
70
|
+
O expande una configuración y define tú mismo las severidades:
|
|
71
71
|
|
|
72
|
-
```javascript fileName="eslint.config.mjs"
|
|
72
|
+
```javascript fileName="eslint.config.mjs"
|
|
73
73
|
import intlayer from "eslint-plugin-intlayer";
|
|
74
74
|
|
|
75
75
|
export default [
|
|
76
|
+
...intlayer.configs.recommended,
|
|
76
77
|
{
|
|
77
|
-
plugins: { intlayer },
|
|
78
78
|
rules: {
|
|
79
79
|
"intlayer/no-raw-text": "warn",
|
|
80
80
|
"intlayer/static-dictionary-key": "error",
|
|
@@ -144,7 +144,7 @@ Para corregir un archivo completo de una vez, ejecuta `npx intlayer extract` y d
|
|
|
144
144
|
|
|
145
145
|
**Opciones**
|
|
146
146
|
|
|
147
|
-
```javascript fileName="eslint.config.mjs"
|
|
147
|
+
```javascript fileName="eslint.config.mjs"
|
|
148
148
|
{
|
|
149
149
|
"intlayer/no-raw-text": [
|
|
150
150
|
"warn",
|
|
@@ -247,7 +247,7 @@ A diferencia de las otras reglas, esta no puede responder solo a partir del arch
|
|
|
247
247
|
|
|
248
248
|
**Opciones**
|
|
249
249
|
|
|
250
|
-
```javascript fileName="eslint.config.mjs"
|
|
250
|
+
```javascript fileName="eslint.config.mjs"
|
|
251
251
|
{
|
|
252
252
|
"intlayer/no-unused-content": [
|
|
253
253
|
"warn",
|
|
@@ -296,7 +296,7 @@ Todas las reglas funcionan en todas las integraciones de Intlayer, incluso dentr
|
|
|
296
296
|
| Plantillas de Angular | `.component.html` | `@angular-eslint/template-parser` |
|
|
297
297
|
| Astro | `.astro` | `astro-eslint-parser` |
|
|
298
298
|
|
|
299
|
-
```javascript fileName="eslint.config.mjs"
|
|
299
|
+
```javascript fileName="eslint.config.mjs"
|
|
300
300
|
import intlayer from "eslint-plugin-intlayer";
|
|
301
301
|
import tseslint from "typescript-eslint";
|
|
302
302
|
import vueParser from "vue-eslint-parser";
|
|
@@ -159,7 +159,7 @@ pnpm add -D webpack-bundle-analyzer
|
|
|
159
159
|
bun add -d webpack-bundle-analyzer
|
|
160
160
|
```
|
|
161
161
|
|
|
162
|
-
```typescript fileName="webpack.config.ts
|
|
162
|
+
```typescript fileName="webpack.config.ts"
|
|
163
163
|
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
|
|
164
164
|
|
|
165
165
|
export default {
|