@intlayer/docs 9.3.1 → 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.
Files changed (151) hide show
  1. package/blog/ar/nextjs-multilingual-seo-comparison.md +10 -10
  2. package/blog/de/nextjs-multilingual-seo-comparison.md +9 -9
  3. package/blog/en/nextjs-multilingual-seo-comparison.md +10 -10
  4. package/blog/en-GB/nextjs-multilingual-seo-comparison.md +10 -10
  5. package/blog/es/nextjs-multilingual-seo-comparison.md +10 -10
  6. package/blog/fr/nextjs-multilingual-seo-comparison.md +10 -10
  7. package/blog/hi/nextjs-multilingual-seo-comparison.md +10 -10
  8. package/blog/id/nextjs-multilingual-seo-comparison.md +10 -10
  9. package/blog/it/nextjs-multilingual-seo-comparison.md +10 -10
  10. package/blog/ja/nextjs-multilingual-seo-comparison.md +9 -9
  11. package/blog/ko/nextjs-multilingual-seo-comparison.md +9 -9
  12. package/blog/pl/nextjs-multilingual-seo-comparison.md +10 -10
  13. package/blog/pt/nextjs-multilingual-seo-comparison.md +9 -9
  14. package/blog/ru/nextjs-multilingual-seo-comparison.md +9 -9
  15. package/blog/tr/nextjs-multilingual-seo-comparison.md +9 -9
  16. package/blog/uk/nextjs-multilingual-seo-comparison.md +10 -10
  17. package/blog/vi/nextjs-multilingual-seo-comparison.md +10 -10
  18. package/blog/zh/nextjs-multilingual-seo-comparison.md +10 -10
  19. package/dist/cjs/generated/docs.entry.cjs +20 -0
  20. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  21. package/dist/esm/generated/docs.entry.mjs +20 -0
  22. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  23. package/dist/types/generated/docs.entry.d.ts +1 -0
  24. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  25. package/docs/ar/bundle_optimization.md +1 -1
  26. package/docs/ar/configuration.md +32 -9
  27. package/docs/ar/dictionary/content_file.md +0 -22
  28. package/docs/ar/dictionary/function_fetching.md +23 -0
  29. package/docs/ar/eslint.md +336 -0
  30. package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +1 -1
  31. package/docs/bn/configuration.md +34 -9
  32. package/docs/bn/eslint.md +336 -0
  33. package/docs/cs/bundle_optimization.md +1 -1
  34. package/docs/cs/configuration.md +33 -9
  35. package/docs/cs/eslint.md +336 -0
  36. package/docs/de/bundle_optimization.md +1 -1
  37. package/docs/de/configuration.md +34 -9
  38. package/docs/de/dictionary/content_file.md +0 -22
  39. package/docs/de/dictionary/function_fetching.md +23 -0
  40. package/docs/de/eslint.md +336 -0
  41. package/docs/en/bundle_optimization.md +1 -1
  42. package/docs/en/configuration.md +34 -9
  43. package/docs/en/dictionary/content_file.md +0 -22
  44. package/docs/en/dictionary/function_fetching.md +23 -0
  45. package/docs/en/eslint.md +336 -0
  46. package/docs/en/packages/intlayer/getLocalizedPath.md +70 -19
  47. package/docs/en-GB/configuration.md +33 -9
  48. package/docs/en-GB/dictionary/content_file.md +0 -22
  49. package/docs/en-GB/dictionary/function_fetching.md +23 -0
  50. package/docs/en-GB/eslint.md +336 -0
  51. package/docs/en-GB/intlayer_with_create_react_app.md +32 -35
  52. package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +1 -1
  53. package/docs/es/bundle_optimization.md +1 -1
  54. package/docs/es/configuration.md +35 -9
  55. package/docs/es/dictionary/content_file.md +0 -22
  56. package/docs/es/dictionary/function_fetching.md +23 -0
  57. package/docs/es/eslint.md +336 -0
  58. package/docs/fr/bundle_optimization.md +1 -1
  59. package/docs/fr/configuration.md +35 -9
  60. package/docs/fr/dictionary/content_file.md +0 -22
  61. package/docs/fr/dictionary/function_fetching.md +23 -0
  62. package/docs/fr/eslint.md +336 -0
  63. package/docs/hi/configuration.md +35 -9
  64. package/docs/hi/dictionary/content_file.md +0 -22
  65. package/docs/hi/dictionary/function_fetching.md +23 -0
  66. package/docs/hi/eslint.md +336 -0
  67. package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +1 -1
  68. package/docs/hi/intlayer_with_vite+svelte.md +2 -2
  69. package/docs/id/configuration.md +35 -9
  70. package/docs/id/dictionary/content_file.md +0 -22
  71. package/docs/id/dictionary/function_fetching.md +23 -0
  72. package/docs/id/eslint.md +336 -0
  73. package/docs/it/bundle_optimization.md +1 -1
  74. package/docs/it/configuration.md +35 -9
  75. package/docs/it/dictionary/content_file.md +0 -22
  76. package/docs/it/dictionary/function_fetching.md +23 -0
  77. package/docs/it/eslint.md +336 -0
  78. package/docs/ja/configuration.md +30 -9
  79. package/docs/ja/dictionary/content_file.md +0 -22
  80. package/docs/ja/dictionary/function_fetching.md +23 -0
  81. package/docs/ja/eslint.md +336 -0
  82. package/docs/ja/intlayer_with_react_router_v7.md +1 -146
  83. package/docs/ja/intlayer_with_vite+react.md +5 -1
  84. package/docs/ko/configuration.md +31 -9
  85. package/docs/ko/dictionary/content_file.md +0 -22
  86. package/docs/ko/dictionary/function_fetching.md +23 -0
  87. package/docs/ko/eslint.md +336 -0
  88. package/docs/ko/intlayer_with_lynx+react.md +4 -0
  89. package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +1 -1
  90. package/docs/ko/intlayer_with_storybook.md +5 -5
  91. package/docs/nl/configuration.md +33 -9
  92. package/docs/nl/eslint.md +336 -0
  93. package/docs/pl/bundle_optimization.md +1 -1
  94. package/docs/pl/configuration.md +34 -9
  95. package/docs/pl/dictionary/content_file.md +0 -22
  96. package/docs/pl/dictionary/function_fetching.md +23 -0
  97. package/docs/pl/eslint.md +336 -0
  98. package/docs/pl/intlayer_with_astro.md +1 -114
  99. package/docs/pl/migration_from_i18next_to_intlayer.md +4 -0
  100. package/docs/pl/migration_from_next-i18next_to_intlayer.md +8 -4
  101. package/docs/pl/migration_from_next-intl_to_intlayer.md +11 -5
  102. package/docs/pl/migration_from_nuxtjs_i18n_to_intlayer.md +8 -4
  103. package/docs/pl/migration_from_react-i18next_to_intlayer.md +8 -4
  104. package/docs/pl/migration_from_vue-i18n_to_intlayer.md +4 -0
  105. package/docs/pt/bundle_optimization.md +1 -1
  106. package/docs/pt/configuration.md +34 -9
  107. package/docs/pt/dictionary/content_file.md +0 -22
  108. package/docs/pt/dictionary/function_fetching.md +23 -0
  109. package/docs/pt/eslint.md +336 -0
  110. package/docs/pt/intlayer_with_astro.md +1 -114
  111. package/docs/ru/bundle_optimization.md +1 -1
  112. package/docs/ru/configuration.md +34 -9
  113. package/docs/ru/dictionary/content_file.md +0 -22
  114. package/docs/ru/dictionary/function_fetching.md +23 -0
  115. package/docs/ru/eslint.md +336 -0
  116. package/docs/tr/bundle_optimization.md +1 -1
  117. package/docs/tr/configuration.md +33 -9
  118. package/docs/tr/dictionary/content_file.md +0 -22
  119. package/docs/tr/dictionary/function_fetching.md +23 -0
  120. package/docs/tr/eslint.md +336 -0
  121. package/docs/uk/configuration.md +35 -9
  122. package/docs/uk/dictionary/content_file.md +0 -22
  123. package/docs/uk/dictionary/function_fetching.md +23 -0
  124. package/docs/uk/eslint.md +336 -0
  125. package/docs/uk/packages/angular-intlayer/exports.md +2 -2
  126. package/docs/ur/configuration.md +35 -9
  127. package/docs/ur/eslint.md +336 -0
  128. package/docs/vi/bundle_optimization.md +1 -1
  129. package/docs/vi/configuration.md +33 -9
  130. package/docs/vi/dictionary/content_file.md +0 -22
  131. package/docs/vi/dictionary/function_fetching.md +23 -0
  132. package/docs/vi/eslint.md +336 -0
  133. package/docs/zh/bundle_optimization.md +1 -1
  134. package/docs/zh/configuration.md +29 -9
  135. package/docs/zh/dictionary/content_file.md +0 -22
  136. package/docs/zh/dictionary/function_fetching.md +23 -0
  137. package/docs/zh/eslint.md +336 -0
  138. package/docs/zh/intlayer_with_create_react_app.md +4 -0
  139. package/docs/zh/intlayer_with_lynx+react.md +4 -0
  140. package/docs/zh/intlayer_with_nextjs_14.md +0 -2
  141. package/docs/zh/intlayer_with_nextjs_15.md +0 -2
  142. package/docs/zh/intlayer_with_nextjs_page_router.md +0 -2
  143. package/docs/zh/intlayer_with_nuxt.md +1 -1
  144. package/docs/zh/intlayer_with_react_router_v7.md +4 -0
  145. package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +4 -0
  146. package/docs/zh/intlayer_with_solid_start.md +1 -1
  147. package/docs/zh/intlayer_with_vite+vue.md +0 -2
  148. package/docs/zh-TW/bundle_optimization.md +1 -1
  149. package/docs/zh-TW/eslint.md +336 -0
  150. package/package.json +7 -7
  151. package/src/generated/docs.entry.ts +20 -0
@@ -0,0 +1,336 @@
1
+ ---
2
+ createdAt: 2026-08-12
3
+ updatedAt: 2026-08-13
4
+ title: Plugin de ESLint | Reglas de lint para Intlayer
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
+ keywords:
7
+ - Intlayer
8
+ - ESLint
9
+ - oxlint
10
+ - Lint
11
+ - i18n
12
+ - Internacionalización
13
+ - no-raw-text
14
+ - Cadenas hardcodeadas
15
+ - Traducciones sin usar
16
+ - Contenido muerto
17
+ - React
18
+ - Vue
19
+ - Svelte
20
+ - Angular
21
+ slugs:
22
+ - doc
23
+ - eslint
24
+ history:
25
+ - version: 9.3.1
26
+ date: 2026-08-12
27
+ changes: "Historial inicial"
28
+ author: aymericzip
29
+ ---
30
+
31
+ # Plugin de ESLint x OXLint
32
+
33
+ `eslint-plugin-intlayer` detecta los tipos de error de i18n que TypeScript no puede ver:
34
+
35
+ 1. **Texto hardcodeado** que nunca llegó a un diccionario.
36
+ 2. **Llamadas dinámicas** que pasan el chequeo de tipos y se ejecutan, pero que el compilador de Intlayer no puede optimizar.
37
+ 3. **Contenido muerto** — diccionarios y campos que nada en el proyecto lee (opcional mediante activación).
38
+
39
+ Las claves de diccionario desconocidas, las rutas de campo desconocidas y las locales faltantes ya son errores de compilación, así que el plugin no las repite.
40
+
41
+ ## Instalación
42
+
43
+ ```bash packageManager="npm"
44
+ npm install --save-dev eslint-plugin-intlayer
45
+ ```
46
+
47
+ ```bash packageManager="pnpm"
48
+ pnpm add --save-dev eslint-plugin-intlayer
49
+ ```
50
+
51
+ ```bash packageManager="yarn"
52
+ yarn add --dev eslint-plugin-intlayer
53
+ ```
54
+
55
+ Requiere ESLint 9 o posterior (flat config). ESLint 10 es compatible.
56
+
57
+ ## Uso
58
+
59
+ El plugin funciona tanto en ESLint como en [oxlint](https://oxc.rs): las mismas reglas, las mismas opciones.
60
+
61
+ <Tabs defaultTab="eslint">
62
+ <Tab label="ESLint" value="eslint">
63
+
64
+ ```javascript fileName="eslint.config.mjs"
65
+ import intlayer from "eslint-plugin-intlayer";
66
+
67
+ export default [...intlayer.configs.recommended];
68
+ ```
69
+
70
+ O expande una configuración y define tú mismo las severidades:
71
+
72
+ ```javascript fileName="eslint.config.mjs"
73
+ import intlayer from "eslint-plugin-intlayer";
74
+
75
+ export default [
76
+ ...intlayer.configs.recommended,
77
+ {
78
+ rules: {
79
+ "intlayer/no-raw-text": "warn",
80
+ "intlayer/static-dictionary-key": "error",
81
+ "intlayer/no-dynamic-field-access": "error",
82
+ "intlayer/enforce-adapter-import": "warn",
83
+ "intlayer/no-unused-content": "warn",
84
+ },
85
+ },
86
+ ];
87
+ ```
88
+
89
+ </Tab>
90
+ <Tab label="oxlint" value="oxlint">
91
+
92
+ ```json fileName=".oxlintrc.json"
93
+ {
94
+ "jsPlugins": ["eslint-plugin-intlayer"],
95
+ "rules": {
96
+ "intlayer/no-raw-text": "warn",
97
+ "intlayer/static-dictionary-key": "error",
98
+ "intlayer/no-dynamic-field-access": "error",
99
+ "intlayer/enforce-adapter-import": "warn"
100
+ }
101
+ }
102
+ ```
103
+
104
+ Dos advertencias: el soporte de plugins JS en oxlint aún está en fase alfa, y oxlint no admite parsers personalizados; por lo tanto, los archivos `.vue`, `.svelte`, `.astro` y las plantillas de Angular no se analizan allí. Ejecuta oxlint sobre tus archivos JS/TS/JSX y mantén ESLint para el resto.
105
+
106
+ `no-unused-content` se omite intencionadamente arriba: necesita el directorio de trabajo y la ruta del archivo analizado del contexto de la regla, lo cual el puente alfa de plugins JS no garantiza. Ejecútala bajo ESLint.
107
+
108
+ </Tab>
109
+ </Tabs>
110
+
111
+ ### Configuraciones
112
+
113
+ | Configuración | `no-raw-text` | `static-dictionary-key` | `no-dynamic-field-access` | `enforce-adapter-import` | `no-unused-content` |
114
+ | --------------- | -------------------------------- | ----------------------- | ------------------------- | ------------------------ | ------------------- |
115
+ | `recommended` | warn | error | error | off | off |
116
+ | `strict` | error (+ literales fuera de JSX) | error | error | error | off |
117
+ | `contract-only` | off | error | error | off | off |
118
+
119
+ `recommended` mantiene deliberadamente `no-raw-text` en `warn`: apuntarla a una base de código existente detecta todas las cadenas no traducidas de golpe, lo cual no debería romper tu compilación desde el primer día.
120
+
121
+ `enforce-adapter-import` está desactivada por defecto — actívala explícitamente si la deseas.
122
+
123
+ `no-unused-content` está desactivada en todas las configuraciones, incluida `strict`. Es la única regla que lee tu configuración de Intlayer y recorre tus archivos fuente desde el disco, por lo que activarla debe ser una elección deliberada en lugar de algo que un ajuste preestablecido haga por ti.
124
+
125
+ ## Reglas
126
+
127
+ ### `no-raw-text`
128
+
129
+ Informa sobre el texto orientado al usuario que no está declarado en un diccionario. Utiliza la misma detección que `intlayer extract`, por lo que se ignoran nombres de marcas, clases CSS e identificadores técnicos.
130
+
131
+ ```jsx
132
+ // ✗ Reportado
133
+ <h1>Welcome to our documentation</h1>
134
+ <input placeholder="Enter your email address" />
135
+
136
+ // ✓ Correcto
137
+ const { title } = useIntlayer("home");
138
+ <h1>{title}</h1>
139
+ ```
140
+
141
+ Los archivos de declaración de contenido (`*.content.ts`, …) se ignoran.
142
+
143
+ Para corregir un archivo completo de una vez, ejecuta `npx intlayer extract` y deja que el compilador mueva las cadenas a un diccionario por ti.
144
+
145
+ **Opciones**
146
+
147
+ ```javascript fileName="eslint.config.mjs"
148
+ {
149
+ "intlayer/no-raw-text": [
150
+ "warn",
151
+ {
152
+ // Atributos cuyo valor es texto orientado al usuario.
153
+ // Por defecto: title, placeholder, alt, aria-label, label
154
+ attributes: ["title", "placeholder", "alt", "aria-label", "label"],
155
+
156
+ // Elementos cuyo contenido nunca es texto orientado al usuario.
157
+ // Por defecto: code, pre, script, style
158
+ ignoreElements: ["code", "pre", "script", "style"],
159
+
160
+ // Expresiones regulares para texto que nunca se debe reportar.
161
+ ignorePatterns: ["^Powered by"],
162
+
163
+ // También reportar literales de cadena fuera del marcado. Por defecto: false
164
+ includeStringLiterals: false,
165
+ },
166
+ ],
167
+ }
168
+ ```
169
+
170
+ ### `static-dictionary-key`
171
+
172
+ Requiere que la clave del diccionario sea un literal de cadena.
173
+
174
+ El compilador solo puede precargar un diccionario cuando puede leer la clave directamente en el punto de llamada. Con una clave calculada, omite silenciosamente la optimización e incluye todos los diccionarios en el empaquetado.
175
+
176
+ ```typescript
177
+ // ✗ Reportado
178
+ useIntlayer(dictionaryKey);
179
+ useIntlayer(`home-${suffix}`);
180
+ getTranslations({ namespace: page });
181
+
182
+ // ✗ Una variable sigue sin ser un literal
183
+ const key = "home";
184
+ useIntlayer(key);
185
+
186
+ // ✓ Correcto
187
+ useIntlayer("home");
188
+ getTranslations({ namespace: "home" });
189
+ ```
190
+
191
+ Esto se aplica a `useIntlayer`, `getIntlayer` y a todos los adaptadores de compatibilidad (`useTranslation`, `useTranslations`, `formatMessage`, `<FormattedMessage id>`, `<Trans i18nKey>`, …).
192
+
193
+ ### `no-dynamic-field-access`
194
+
195
+ Requiere que el campo que lees de un diccionario sea conocido estáticamente.
196
+
197
+ El compilador elimina los campos que no ve utilizados. Un acceso dinámico le resulta invisible, por lo que la lectura puede devolver `undefined` en tiempo de ejecución.
198
+
199
+ ```typescript
200
+ // ✗ Reportado
201
+ const content = useIntlayer("home");
202
+ content[fieldName];
203
+
204
+ const t = useTranslations("home");
205
+ t(messageKey);
206
+
207
+ // ✓ Correcto
208
+ content.title;
209
+ content["title"];
210
+ content.items[0];
211
+ t("hero.title");
212
+ ```
213
+
214
+ ### `enforce-adapter-import`
215
+
216
+ Prefiere el adaptador de compatibilidad `@intlayer/*` sobre el paquete original. El original solo se resuelve a Intlayer cuando el alias del empaquetador está configurado; el adaptador siempre lo hace. Corregible automáticamente con `--fix`.
217
+
218
+ ```typescript
219
+ // ✗ Reportado
220
+ import { useTranslation } from "react-i18next";
221
+ import { getTranslations } from "next-intl/server";
222
+
223
+ // ✓ Correcto
224
+ import { useTranslation } from "@intlayer/react-i18next";
225
+ import { getTranslations } from "@intlayer/next-intl/server";
226
+ ```
227
+
228
+ ### `no-unused-content`
229
+
230
+ **Desactivada por defecto.** Informa sobre contenido que nada en tu proyecto lee, además de claves de diccionario declaradas en más de un lugar.
231
+
232
+ ```typescript fileName="src/home.content.ts"
233
+ export default {
234
+ key: "home", // ✗ Reportado si ninguna llamada en el proyecto solicita "home"
235
+ content: {
236
+ title: t({ es: "Título", en: "Title" }),
237
+
238
+ // ✗ Reportado si nada lee `hero`
239
+ hero: {
240
+ subtitle: t({ es: "Subtítulo", en: "Subtitle" }),
241
+ },
242
+ },
243
+ };
244
+ ```
245
+
246
+ A diferencia de las otras reglas, esta no puede responder solo a partir del archivo evaluado: un campo no se usa únicamente en relación con todo el proyecto. En la primera declaración de contenido de una ejecución de lint, carga tu configuración de Intlayer, busca los archivos fuente que declara dicha configuración (`build.traversePattern`, `compiler.transformPattern`) y ejecuta el mismo analizador de uso que alimenta `@intlayer/lsp` y el tachado de "no utilizado" en la extensión de VS Code. El resultado se almacena en caché durante `cacheTtl` milisegundos, por lo que el escaneo ocurre una vez por ejecución en lugar de una vez por archivo.
247
+
248
+ **Opciones**
249
+
250
+ ```javascript fileName="eslint.config.mjs"
251
+ {
252
+ "intlayer/no-unused-content": [
253
+ "warn",
254
+ {
255
+ // Reportar claves de diccionario que nada referencia. Por defecto: true
256
+ reportUnusedDictionaries: true,
257
+
258
+ // Reportar campos de contenido que nada lee. Por defecto: true
259
+ reportUnusedFields: true,
260
+
261
+ // Reportar claves declaradas en más de un lugar. Por defecto: true
262
+ reportDuplicateKeys: true,
263
+
264
+ // Expresiones regulares para rutas de campos que nunca se deben reportar.
265
+ ignoreFields: ["^meta"],
266
+
267
+ // Raíz del proyecto desde donde comienza el escaneo. Por defecto: directorio de trabajo de ESLint
268
+ baseDir: process.cwd(),
269
+
270
+ // Tiempo que se reutiliza un escaneo de proyecto, en ms. Por defecto: 30000
271
+ cacheTtl: 30000,
272
+ },
273
+ ],
274
+ }
275
+ ```
276
+
277
+ Reduce `cacheTtl` cuando ejecutes lint desde un servidor de editor de larga duración y quieras que tus ediciones se reflejen antes; configura `baseDir` cuando una sola ejecución de lint abarque varios proyectos de Intlayer en un monorepo.
278
+
279
+ > **Tiende al silencio.** Un falso positivo aquí eliminaría una traducción, por lo que no se reporta nada cuando el diccionario se consume de una manera que el análisis no puede rastrear: el objeto de contenido pasado en su totalidad, una función de traducción vinculada a partir de él (`const t = useTranslations("home")`), una declaración alcanzada mediante una importación directa (`useDictionary(myDictionary)`), un `nest()` de otro diccionario, o una lista de campos hecha no exhaustiva por un spread. Los componentes de un solo archivo (`.vue`, `.svelte`, `.astro`) se consideran como si usaran cada campo de los diccionarios que mencionan, ya que sus bloques de script no se analizan aquí.
280
+
281
+ `reportDuplicateKeys` lee los diccionarios no fusionados que la compilación escribe bajo `.intlayer/`, por lo que permanece silenciosa hasta que el proyecto se haya compilado al menos una vez. Dos declaraciones que comparten una clave se fusionan, lo cual es un patrón legítimo; el reporte existe porque un campo definido en ambos lados conserva silenciosamente solo uno de los dos valores.
282
+
283
+ El analizador se carga desde `@intlayer/lsp`, que se distribuye como ESM. Por lo tanto, la regla necesita una versión de Node que pueda hacer `require()` de un módulo ES: Node 20.19+ o 22.12+. En versiones anteriores no reporta nada en lugar de fallar la ejecución del lint.
284
+
285
+ ## Frameworks
286
+
287
+ Todas las reglas funcionan en todas las integraciones de Intlayer, incluso dentro de plantillas de Vue, Svelte y Angular. Solo necesitas indicarle a ESLint qué parser lee cada tipo de archivo.
288
+
289
+ | Framework | Archivos | Parser |
290
+ | ------------------------- | ----------------- | --------------------------------- |
291
+ | React, Preact, Solid, Lit | `.jsx` `.tsx` | `typescript-eslint` |
292
+ | Next.js | `.jsx` `.tsx` | `typescript-eslint` |
293
+ | Vue, Nuxt | `.vue` | `vue-eslint-parser` |
294
+ | Svelte, SvelteKit | `.svelte` | `svelte-eslint-parser` |
295
+ | Angular | `.ts` | `typescript-eslint` |
296
+ | Plantillas de Angular | `.component.html` | `@angular-eslint/template-parser` |
297
+ | Astro | `.astro` | `astro-eslint-parser` |
298
+
299
+ ```javascript fileName="eslint.config.mjs"
300
+ import intlayer from "eslint-plugin-intlayer";
301
+ import tseslint from "typescript-eslint";
302
+ import vueParser from "vue-eslint-parser";
303
+ import svelteParser from "svelte-eslint-parser";
304
+ import angularTemplateParser from "@angular-eslint/template-parser";
305
+
306
+ export default [
307
+ ...intlayer.configs.recommended,
308
+
309
+ {
310
+ files: ["**/*.{ts,tsx,jsx}"],
311
+ languageOptions: { parser: tseslint.parser },
312
+ },
313
+ {
314
+ files: ["**/*.vue"],
315
+ languageOptions: {
316
+ parser: vueParser,
317
+ parserOptions: { parser: tseslint.parser },
318
+ },
319
+ },
320
+ {
321
+ files: ["**/*.svelte"],
322
+ languageOptions: {
323
+ parser: svelteParser,
324
+ parserOptions: { parser: tseslint.parser },
325
+ },
326
+ },
327
+ {
328
+ files: ["**/*.component.html"],
329
+ languageOptions: { parser: angularTemplateParser },
330
+ },
331
+ ];
332
+ ```
333
+
334
+ Instala solo los parsers que tu proyecto necesite.
335
+
336
+ > **Limitación conocida.** En plantillas de Vue y Angular, una expresión como `{{ content[key] }}` no se verifica con `no-dynamic-field-access`. Las lecturas dinámicas escritas en el bloque script se detectan normalmente.
@@ -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 {
@@ -478,6 +478,30 @@ const config: IntlayerConfig = {
478
478
  */
479
479
  purge: true,
480
480
 
481
+ /**
482
+ * Regrouper les chunks de dictionnaire par locale selon la frontière de
483
+ * code-splitting qui les utilise, pour qu'une page chargée paresseusement
484
+ * récupère son contenu en une seule requête.
485
+ * Par défaut : true
486
+ *
487
+ * Note :
488
+ * - S'applique uniquement aux dictionnaires utilisant `importMode: 'dynamic'`.
489
+ */
490
+ chunkGrouping: true,
491
+
492
+ /**
493
+ * Charger un dictionnaire en même temps que le chunk qui l'utilise, au lieu de
494
+ * le récupérer une fois ce chunk rendu. Les lecteurs s'affichent de façon
495
+ * synchrone au lieu de suspendre, donc la navigation ne fait plus clignoter
496
+ * d'état de chargement.
497
+ * Par défaut : true
498
+ *
499
+ * Note :
500
+ * - Seule la locale résolue est attendue, la page ne télécharge donc que la
501
+ * langue qu'elle affiche.
502
+ */
503
+ dictionariesPreload: true,
504
+
481
505
  /**
482
506
  * Format de sortie pour les fichiers de dictionnaire générés.
483
507
  * Par défaut : ['cjs', 'esm']
@@ -1058,15 +1082,17 @@ Les options de build s'appliquent aux plugins `@intlayer/babel` et `@intlayer/sw
1058
1082
 
1059
1083
  > Lorsqu'il est optimisé, Intlayer remplacera les appels de dictionnaire pour optimiser le chunking, de sorte que le bundle final n'importe que les dictionnaires réellement utilisés.
1060
1084
 
1061
- | Champ | Description | Type | Par défaut | Exemple | Note |
1062
- | ----------------- | ----------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1063
- | `mode` | Contrôle le mode du build. | `'auto'` &#124; <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: build activé automatiquement lors du build de l'application.<br/>• `'manual'`: ne s'exécute que lorsque la commande de build est exécutée.<br/>• Peut être utilisé pour désactiver les builds de dictionnaires (ex: pour éviter l'exécution dans des environnements Node.js). |
1064
- | `optimize` | Contrôle si le build doit être optimisé. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • Si non défini, l'optimisation est déclenchée lors du build du framework (Vite/Next.js).<br/>• `true` force l'optimisation y compris en mode dev.<br/>• `false` la désactive.<br/>• Une fois activé, remplace les appels de dictionnaire pour optimiser le chunking.<br/>• Repose sur les plugins `@intlayer/babel` et `@intlayer/swc`. |
1065
- | `minify` | Minifier les dictionnaires pour réduire la taille du bundle. | `boolean` | `false` | | • Indique si le bundle doit être minifié.<br/>• Par défaut : `true` en production.<br/>• Cette option sera ignorée si `optimize` est désactivé.<br/>• Cette option sera ignorée si `editor.enabled` est vrai. |
1066
- | `purge` | Purger les clés inutilisées dans les dictionnaires. | `boolean` | `false` | | • Indique si le bundle doit être purgé.<br/>• Par défaut : `true` en production.<br/>• Cette option sera ignorée si `optimize` est désactivé. |
1067
- | `checkTypes` | Indique si le build doit vérifier les types TypeScript et loguer les erreurs. | `boolean` | `false` | | Peut ralentir le build. |
1068
- | `outputFormat` | Contrôle le format de sortie des dictionnaires. | `('esm' &#124; 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
1069
- | `traversePattern` | Motifs définissant quels fichiers parcourir lors de l'optimisation. | `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/**']` | Limitez l'optimisation aux fichiers pertinents pour améliorer les performances de build.<br/>• Ignoré si `optimize` est désactivé.<br/>• Utilise des motifs glob. |
1085
+ | Champ | Description | Type | Par défaut | Exemple | Note |
1086
+ | --------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1087
+ | `mode` | Contrôle le mode du build. | `'auto'` &#124; <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: build activé automatiquement lors du build de l'application.<br/>• `'manual'`: ne s'exécute que lorsque la commande de build est exécutée.<br/>• Peut être utilisé pour désactiver les builds de dictionnaires (ex: pour éviter l'exécution dans des environnements Node.js). |
1088
+ | `optimize` | Contrôle si le build doit être optimisé. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • Si non défini, l'optimisation est déclenchée lors du build du framework (Vite/Next.js).<br/>• `true` force l'optimisation y compris en mode dev.<br/>• `false` la désactive.<br/>• Une fois activé, remplace les appels de dictionnaire pour optimiser le chunking.<br/>• Repose sur les plugins `@intlayer/babel` et `@intlayer/swc`. |
1089
+ | `minify` | Minifier les dictionnaires pour réduire la taille du bundle. | `boolean` | `false` | | • Indique si le bundle doit être minifié.<br/>• Par défaut : `true` en production.<br/>• Cette option sera ignorée si `optimize` est désactivé.<br/>• Cette option sera ignorée si `editor.enabled` est vrai. |
1090
+ | `purge` | Purger les clés inutilisées dans les dictionnaires. | `boolean` | `false` | | • Indique si le bundle doit être purgé.<br/>• Par défaut : `true` en production.<br/>• Cette option sera ignorée si `optimize` est désactivé. |
1091
+ | `checkTypes` | Indique si le build doit vérifier les types TypeScript et loguer les erreurs. | `boolean` | `false` | | Peut ralentir le build. |
1092
+ | `chunkGrouping` | Indique s'il faut regrouper les chunks de dictionnaire par locale selon la frontière de code-splitting qui les utilise. | `boolean` | `true` | | • Sans regroupement, une page composée de nombreux composants émet une requête par dictionnaire.<br/>• Les dictionnaires atteints depuis plusieurs frontières sont placés dans un chunk partagé, aucune page n'embarque donc le contenu d'une autre.<br/>• S'applique uniquement aux dictionnaires utilisant `importMode: 'dynamic'`.<br/>• S'applique uniquement au build client, et uniquement lors du bundling (pas en dev). |
1093
+ | `dictionariesPreload` | Indique si un dictionnaire doit être chargé avec le chunk qui l'utilise, au lieu d'être récupéré une fois ce chunk rendu. | `boolean` | `true` | | Le point d'entrée généré attend la locale de navigation au niveau racine, une route chargée paresseusement n'est donc pas considérée comme chargée tant que son contenu n'est pas là.<br/>• Les lecteurs s'affichent de façon synchrone au lieu de suspendre, la navigation ne fait donc plus clignoter d'état de chargement.<br/>• Seule la locale résolue est attendue, la page ne télécharge donc que la langue qu'elle affiche.<br/>• S'applique uniquement aux dictionnaires utilisant `importMode: 'dynamic'`, sur le build client.<br/>• Nécessite un bundler supportant le top-level await (Vite, esbuild). |
1094
+ | `outputFormat` | Contrôle le format de sortie des dictionnaires. | `('esm' &#124; 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
1095
+ | `traversePattern` | Motifs définissant quels fichiers parcourir lors de l'optimisation. | `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/**']` | • Limitez l'optimisation aux fichiers pertinents pour améliorer les performances de build.<br/>• Ignoré si `optimize` est désactivé.<br/>• Utilise des motifs glob. |
1070
1096
 
1071
1097
  ---
1072
1098
 
@@ -532,28 +532,6 @@ Utilisé en conjonction avec les Variantes, ce champ définit des alternatives d
532
532
 
533
533
  > Voir [Variantes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/variants.md) pour plus d'informations.
534
534
 
535
- #### `meta` (`Record<string, string | number | boolean>`)
536
-
537
- Utilisé en conjonction avec les Enregistrements Dynamiques, ce champ permet de déclarer des enregistrements gérés par le CMS ou des données arbitraires récupérées à l'exécution par un identifiant opaque. L'identité du dictionnaire est définie par l'ensemble arbitraire de paires clé-valeur déclarées dans ce champ `meta`.
538
-
539
- **Exemple :**
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
- > Voir [Enregistrements Dynamiques](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/dynamic_content.md) pour plus d'informations.
556
-
557
535
  ### Propriétés CMS
558
536
 
559
537
  ##### `version` (string)
@@ -89,6 +89,29 @@ Impossible de récupérer du contenu depuis un fichier JSON, utilisez plutôt un
89
89
 
90
90
  Dans ce cas, la fonction `fakeFetch` imite un délai pour simuler le temps de réponse du serveur. Intlayer exécute la fonction asynchrone et utilise le résultat comme contenu pour la clé `text`.
91
91
 
92
+ ## Récupération de contenu distant
93
+
94
+ Vous pouvez également assigner directement une promesse à un champ de contenu. Intlayer l'attend lors de la construction des dictionnaires et y insère la valeur résolue :
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
+ Impossible de récupérer du contenu depuis un fichier JSON, utilisez plutôt un fichier .ts ou .js
111
+ ```
112
+
113
+ > La requête est exécutée au moment du build, les données récupérées sont donc un instantané intégré au dictionnaire. Reconstruisez vos dictionnaires pour les actualiser.
114
+
92
115
  ## Utilisation de contenu basé sur une fonction dans les composants React
93
116
 
94
117
  Pour utiliser un contenu basé sur une fonction dans un composant React, vous devez importer `useIntlayer` depuis `react-intlayer` et l'appeler avec l'ID du contenu pour récupérer ce contenu. Voici un exemple :