@intlayer/docs 9.0.0-canary.7 → 9.0.0-canary.8
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/dist/cjs/generated/docs.entry.cjs +0 -20
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +0 -20
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +0 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/dynamic_dictionaries/index.md +24 -18
- package/docs/ar/dynamic_dictionaries/variants.md +280 -22
- package/docs/ar/plugins/sync-json.md +0 -1
- package/docs/ar/releases/v9.md +35 -12
- package/docs/de/dynamic_dictionaries/index.md +22 -22
- package/docs/de/dynamic_dictionaries/variants.md +272 -14
- package/docs/de/plugins/sync-json.md +0 -1
- package/docs/de/releases/v9.md +35 -12
- package/docs/en/dynamic_dictionaries/index.md +20 -14
- package/docs/en/dynamic_dictionaries/variants.md +266 -8
- package/docs/en/plugins/sync-json.md +0 -1
- package/docs/en/releases/v9.md +35 -12
- package/docs/en-GB/dynamic_dictionaries/index.md +21 -15
- package/docs/en-GB/dynamic_dictionaries/variants.md +268 -10
- package/docs/en-GB/plugins/sync-json.md +0 -1
- package/docs/en-GB/releases/v9.md +35 -12
- package/docs/es/dynamic_dictionaries/index.md +25 -19
- package/docs/es/dynamic_dictionaries/variants.md +275 -17
- package/docs/es/plugins/sync-json.md +0 -1
- package/docs/es/releases/v9.md +35 -12
- package/docs/fr/dynamic_dictionaries/index.md +26 -20
- package/docs/fr/dynamic_dictionaries/variants.md +273 -15
- package/docs/fr/plugins/sync-json.md +0 -1
- package/docs/fr/releases/v9.md +35 -12
- package/docs/hi/dynamic_dictionaries/index.md +28 -22
- package/docs/hi/dynamic_dictionaries/variants.md +282 -24
- package/docs/hi/plugins/sync-json.md +0 -1
- package/docs/hi/releases/v9.md +35 -12
- package/docs/id/dynamic_dictionaries/index.md +25 -19
- package/docs/id/dynamic_dictionaries/variants.md +274 -16
- package/docs/id/plugins/sync-json.md +0 -1
- package/docs/id/releases/v9.md +35 -12
- package/docs/it/dynamic_dictionaries/index.md +26 -20
- package/docs/it/dynamic_dictionaries/variants.md +273 -15
- package/docs/it/plugins/sync-json.md +0 -1
- package/docs/it/releases/v9.md +35 -12
- package/docs/ja/dynamic_dictionaries/index.md +27 -21
- package/docs/ja/dynamic_dictionaries/variants.md +276 -18
- package/docs/ja/plugins/sync-json.md +0 -1
- package/docs/ja/releases/v9.md +35 -12
- package/docs/ko/dynamic_dictionaries/index.md +23 -17
- package/docs/ko/dynamic_dictionaries/variants.md +273 -15
- package/docs/ko/plugins/sync-json.md +0 -1
- package/docs/ko/releases/v9.md +35 -12
- package/docs/pl/dynamic_dictionaries/index.md +26 -20
- package/docs/pl/dynamic_dictionaries/variants.md +275 -17
- package/docs/pl/plugins/sync-json.md +0 -1
- package/docs/pl/releases/v9.md +35 -12
- package/docs/pt/dynamic_dictionaries/index.md +25 -19
- package/docs/pt/dynamic_dictionaries/variants.md +276 -18
- package/docs/pt/plugins/sync-json.md +0 -1
- package/docs/pt/releases/v9.md +35 -12
- package/docs/ru/dynamic_dictionaries/index.md +25 -19
- package/docs/ru/dynamic_dictionaries/variants.md +277 -19
- package/docs/ru/plugins/sync-json.md +0 -1
- package/docs/ru/releases/v9.md +35 -12
- package/docs/tr/dynamic_dictionaries/index.md +27 -21
- package/docs/tr/dynamic_dictionaries/variants.md +274 -16
- package/docs/tr/plugins/sync-json.md +0 -1
- package/docs/tr/releases/v9.md +35 -12
- package/docs/uk/dynamic_dictionaries/index.md +25 -19
- package/docs/uk/dynamic_dictionaries/variants.md +277 -19
- package/docs/uk/plugins/sync-json.md +0 -1
- package/docs/uk/releases/v9.md +35 -12
- package/docs/vi/dynamic_dictionaries/index.md +28 -22
- package/docs/vi/dynamic_dictionaries/variants.md +278 -20
- package/docs/vi/plugins/sync-json.md +0 -1
- package/docs/vi/releases/v9.md +35 -12
- package/docs/zh/dynamic_dictionaries/index.md +24 -18
- package/docs/zh/dynamic_dictionaries/variants.md +274 -16
- package/docs/zh/plugins/sync-json.md +0 -1
- package/docs/zh/releases/v9.md +35 -12
- package/package.json +6 -6
- package/src/generated/docs.entry.ts +0 -20
- package/docs/ar/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/de/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/en/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/en-GB/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/es/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/fr/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/hi/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/id/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/it/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/ja/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/ko/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/pl/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/pt/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/ru/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/tr/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/uk/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/vi/dynamic_dictionaries/dynamic_content.md +0 -271
- package/docs/zh/dynamic_dictionaries/dynamic_content.md +0 -271
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-12
|
|
3
|
-
updatedAt: 2026-06-
|
|
3
|
+
updatedAt: 2026-06-26
|
|
4
4
|
title: Variantes
|
|
5
|
-
description:
|
|
5
|
+
description: Use el campo de metadatos variant en los archivos de contenido de Intlayer para declarar alternativas de contenido con nombre o estructuradas — pruebas A/B, banners de temporada, copia con feature flag, registros de CMS, contenido específico de usuario — y cambiar entre ellas en tiempo de ejecución sin cambios de código.
|
|
6
6
|
keywords:
|
|
7
7
|
- Variantes
|
|
8
8
|
- Pruebas A/B
|
|
9
|
-
-
|
|
10
|
-
- Contenido
|
|
9
|
+
- Feature Flags
|
|
10
|
+
- Contenido dinámico
|
|
11
|
+
- Registros dinámicos
|
|
12
|
+
- CMS
|
|
11
13
|
- Intlayer
|
|
12
14
|
- Internacionalización
|
|
13
15
|
slugs:
|
|
@@ -17,17 +19,27 @@ slugs:
|
|
|
17
19
|
history:
|
|
18
20
|
- version: 9.0.0
|
|
19
21
|
date: 2026-06-12
|
|
20
|
-
changes: "Lanzamiento de la función de variantes
|
|
22
|
+
changes: "Lanzamiento de la función de variantes"
|
|
23
|
+
- version: 9.1.0
|
|
24
|
+
date: 2026-06-26
|
|
25
|
+
changes: "`variant` ahora acepta una cadena o un objeto — los antiguos `meta` / registros dinámicos se declaran como variantes de objeto"
|
|
21
26
|
author: aymericzip
|
|
22
27
|
---
|
|
23
28
|
|
|
24
29
|
# Variantes
|
|
25
30
|
|
|
26
|
-
Una **variante** es un conjunto de archivos de contenido que comparten la misma clave de diccionario (`key`) pero cada uno
|
|
31
|
+
Una **variante** es un conjunto de archivos de contenido que comparten la misma clave de diccionario (`key`) pero llevan cada uno un valor `variant` diferente. Intlayer sirve el archivo adecuado según el selector pasado a `useIntlayer`.
|
|
27
32
|
|
|
28
|
-
|
|
33
|
+
El valor de `variant` puede adoptar **dos formas**:
|
|
29
34
|
|
|
30
|
-
|
|
35
|
+
- **Una cadena** — una única alternativa con nombre (pruebas A/B, banners de temporada, feature flags).
|
|
36
|
+
- **Un objeto** — un discriminador estructurado direccionado por un conjunto de campos (registros de CMS, contenido específico de usuario, cualquier contenido indexado por un ID opaco). El objeto completo es la identidad: el selector debe proporcionar un objeto **igual** para resolver la entrada.
|
|
37
|
+
|
|
38
|
+
> La forma de objeto sustituye al antiguo campo `meta`. Donde antes escribía `meta: { id, … }`, escriba `variant: { id, … }`, y selecciónela con `{ variant: { id, … } }`.
|
|
39
|
+
|
|
40
|
+
## Variantes con nombre (cadena)
|
|
41
|
+
|
|
42
|
+
Cada archivo representa una alternativa con nombre. Omitir `variant` (o establecerlo en `"default"`) lo marca como el valor de reserva.
|
|
31
43
|
|
|
32
44
|
```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
33
45
|
import { t, type Dictionary } from "intlayer";
|
|
@@ -65,9 +77,9 @@ const dictionary = {
|
|
|
65
77
|
export default dictionary;
|
|
66
78
|
```
|
|
67
79
|
|
|
68
|
-
|
|
80
|
+
### Consumir variantes con nombre
|
|
69
81
|
|
|
70
|
-
|
|
82
|
+
#### Variante por defecto
|
|
71
83
|
|
|
72
84
|
<Tabs group="framework">
|
|
73
85
|
<Tab label="React" value="react">
|
|
@@ -209,7 +221,7 @@ export default dictionary;
|
|
|
209
221
|
</Tab>
|
|
210
222
|
</Tabs>
|
|
211
223
|
|
|
212
|
-
|
|
224
|
+
#### Variante con nombre
|
|
213
225
|
|
|
214
226
|
```tsx
|
|
215
227
|
const { headline, cta } = useIntlayer("hero-banner", {
|
|
@@ -217,18 +229,264 @@ const { headline, cta } = useIntlayer("hero-banner", {
|
|
|
217
229
|
});
|
|
218
230
|
```
|
|
219
231
|
|
|
220
|
-
|
|
232
|
+
#### Variante con nombre con locale explícito
|
|
221
233
|
|
|
222
234
|
```tsx
|
|
223
235
|
const content = useIntlayer("hero-banner", {
|
|
224
236
|
variant: "black_friday",
|
|
225
|
-
locale: "
|
|
237
|
+
locale: "fr",
|
|
226
238
|
});
|
|
227
239
|
```
|
|
228
240
|
|
|
241
|
+
## Variantes de objeto (estructuradas)
|
|
242
|
+
|
|
243
|
+
Una variante de objeto direcciona el contenido mediante un conjunto arbitrario de pares clave-valor declarados en el campo `variant` — lo que permite modelar registros de CMS, contenido específico de usuario o cualquier contenido cuya clave sea un ID opaco. El **objeto completo** es la identidad: el selector debe proporcionar un objeto igual para que la entrada se resuelva.
|
|
244
|
+
|
|
245
|
+
```ts fileName="product.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
246
|
+
import { t, type Dictionary } from "intlayer";
|
|
247
|
+
|
|
248
|
+
const dictionary = {
|
|
249
|
+
key: "product",
|
|
250
|
+
variant: { id: "prod_abc", userId: "user_123" },
|
|
251
|
+
content: {
|
|
252
|
+
name: t({ en: "Widget Pro", fr: "Widget Pro" }),
|
|
253
|
+
description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
|
|
254
|
+
},
|
|
255
|
+
} satisfies Dictionary;
|
|
256
|
+
|
|
257
|
+
export default dictionary;
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
```ts fileName="product.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
261
|
+
import { t, type Dictionary } from "intlayer";
|
|
262
|
+
|
|
263
|
+
const dictionary = {
|
|
264
|
+
key: "product",
|
|
265
|
+
variant: { id: "prod_abcd", userId: "user_123" },
|
|
266
|
+
content: {
|
|
267
|
+
name: t({ en: "Widget Lite", fr: "Widget Lite" }),
|
|
268
|
+
description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
|
|
269
|
+
},
|
|
270
|
+
} satisfies Dictionary;
|
|
271
|
+
|
|
272
|
+
export default dictionary;
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### Consumir variantes de objeto
|
|
276
|
+
|
|
277
|
+
Pase el objeto coincidente a `variant`. Cada campo declarado en el diccionario debe proporcionarse e ser igual; de lo contrario el resultado es `null`. El orden de los campos no importa.
|
|
278
|
+
|
|
279
|
+
<Tabs group="framework">
|
|
280
|
+
<Tab label="React" value="react">
|
|
281
|
+
```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
282
|
+
import { useIntlayer } from "react-intlayer";
|
|
283
|
+
|
|
284
|
+
export const Product = ({
|
|
285
|
+
productId,
|
|
286
|
+
userId,
|
|
287
|
+
}: {
|
|
288
|
+
productId: string;
|
|
289
|
+
userId: string;
|
|
290
|
+
}) => {
|
|
291
|
+
const content = useIntlayer("product", {
|
|
292
|
+
variant: { id: productId, userId },
|
|
293
|
+
});
|
|
294
|
+
|
|
295
|
+
if (!content) return null;
|
|
296
|
+
|
|
297
|
+
return <p>{content.description}</p>;
|
|
298
|
+
};
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
</Tab>
|
|
302
|
+
<Tab label="Next.js" value="nextjs">
|
|
303
|
+
```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
304
|
+
import { useIntlayer } from "next-intlayer";
|
|
305
|
+
|
|
306
|
+
export const Product = ({
|
|
307
|
+
productId,
|
|
308
|
+
userId,
|
|
309
|
+
}: {
|
|
310
|
+
productId: string;
|
|
311
|
+
userId: string;
|
|
312
|
+
}) => {
|
|
313
|
+
const content = useIntlayer("product", {
|
|
314
|
+
variant: { id: productId, userId },
|
|
315
|
+
});
|
|
316
|
+
|
|
317
|
+
if (!content) return null;
|
|
318
|
+
|
|
319
|
+
return <p>{content.description}</p>;
|
|
320
|
+
};
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
</Tab>
|
|
324
|
+
<Tab label="Vue" value="vue">
|
|
325
|
+
```vue fileName="Product.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
326
|
+
<script setup>
|
|
327
|
+
import { useIntlayer } from "vue-intlayer";
|
|
328
|
+
|
|
329
|
+
const props = defineProps({
|
|
330
|
+
productId: String,
|
|
331
|
+
userId: String,
|
|
332
|
+
});
|
|
333
|
+
|
|
334
|
+
const content = useIntlayer("product", {
|
|
335
|
+
variant: { id: props.productId, userId: props.userId },
|
|
336
|
+
});
|
|
337
|
+
</script>
|
|
338
|
+
|
|
339
|
+
<template>
|
|
340
|
+
<p v-if="content">{{ content.description }}</p>
|
|
341
|
+
</template>
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
</Tab>
|
|
345
|
+
<Tab label="Svelte" value="svelte">
|
|
346
|
+
```svelte fileName="Product.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
347
|
+
<script lang="ts">
|
|
348
|
+
import { useIntlayer } from "svelte-intlayer";
|
|
349
|
+
|
|
350
|
+
export let productId: string;
|
|
351
|
+
export let userId: string;
|
|
352
|
+
|
|
353
|
+
const content = useIntlayer("product", {
|
|
354
|
+
variant: { id: productId, userId },
|
|
355
|
+
});
|
|
356
|
+
</script>
|
|
357
|
+
|
|
358
|
+
{#if $content}
|
|
359
|
+
<p>{$content.description}</p>
|
|
360
|
+
{/if}
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
</Tab>
|
|
364
|
+
<Tab label="Preact" value="preact">
|
|
365
|
+
```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
366
|
+
import { useIntlayer } from "preact-intlayer";
|
|
367
|
+
|
|
368
|
+
export const Product = ({
|
|
369
|
+
productId,
|
|
370
|
+
userId,
|
|
371
|
+
}: {
|
|
372
|
+
productId: string;
|
|
373
|
+
userId: string;
|
|
374
|
+
}) => {
|
|
375
|
+
const content = useIntlayer("product", {
|
|
376
|
+
variant: { id: productId, userId },
|
|
377
|
+
});
|
|
378
|
+
|
|
379
|
+
if (!content) return null;
|
|
380
|
+
|
|
381
|
+
return <p>{content.description}</p>;
|
|
382
|
+
};
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
</Tab>
|
|
386
|
+
<Tab label="Solid" value="solid">
|
|
387
|
+
```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
388
|
+
import { useIntlayer } from "solid-intlayer";
|
|
389
|
+
|
|
390
|
+
export const Product = (props: {
|
|
391
|
+
productId: string;
|
|
392
|
+
userId: string;
|
|
393
|
+
}) => {
|
|
394
|
+
const content = useIntlayer("product", {
|
|
395
|
+
variant: { id: props.productId, userId: props.userId },
|
|
396
|
+
});
|
|
397
|
+
|
|
398
|
+
return (
|
|
399
|
+
<>
|
|
400
|
+
{content() && <p>{content().description}</p>}
|
|
401
|
+
</>
|
|
402
|
+
);
|
|
403
|
+
};
|
|
404
|
+
```
|
|
405
|
+
|
|
406
|
+
</Tab>
|
|
407
|
+
<Tab label="Angular" value="angular">
|
|
408
|
+
```typescript fileName="product.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
409
|
+
import { Component, Input, OnInit } from "@angular/core";
|
|
410
|
+
import { useIntlayer } from "angular-intlayer";
|
|
411
|
+
|
|
412
|
+
@Component({
|
|
413
|
+
selector: "app-product",
|
|
414
|
+
template: `
|
|
415
|
+
@if (content()) {
|
|
416
|
+
<p>{{ content().description }}</p>
|
|
417
|
+
}
|
|
418
|
+
`,
|
|
419
|
+
})
|
|
420
|
+
export class ProductComponent implements OnInit {
|
|
421
|
+
@Input() productId!: string;
|
|
422
|
+
@Input() userId!: string;
|
|
423
|
+
|
|
424
|
+
content: any;
|
|
425
|
+
|
|
426
|
+
ngOnInit() {
|
|
427
|
+
this.content = useIntlayer("product", {
|
|
428
|
+
variant: { id: this.productId, userId: this.userId },
|
|
429
|
+
});
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
</Tab>
|
|
435
|
+
<Tab label="Vanilla JS" value="vanilla">
|
|
436
|
+
```javascript fileName="product.js"
|
|
437
|
+
import { useIntlayer } from "vanilla-intlayer";
|
|
438
|
+
|
|
439
|
+
const content = useIntlayer("product", {
|
|
440
|
+
variant: { id: "prod_abcd", userId: "user_123" },
|
|
441
|
+
});
|
|
442
|
+
|
|
443
|
+
if (content) {
|
|
444
|
+
document.body.innerHTML = `<p>${content.description}</p>`;
|
|
445
|
+
}
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
</Tab>
|
|
449
|
+
</Tabs>
|
|
450
|
+
|
|
451
|
+
#### Con locale explícito
|
|
452
|
+
|
|
453
|
+
```tsx
|
|
454
|
+
const content = useIntlayer("product", {
|
|
455
|
+
variant: { id: "prod_abc", userId: "user_123" },
|
|
456
|
+
locale: "fr",
|
|
457
|
+
});
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
#### Campo faltante — sin coincidencia
|
|
461
|
+
|
|
462
|
+
```ts
|
|
463
|
+
// Devuelve null: falta `userId`, por lo que el objeto no coincide con la variante declarada
|
|
464
|
+
const content = useIntlayer("product", { variant: { id: "prod_abc" } });
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
## Modo de carga
|
|
468
|
+
|
|
469
|
+
Las variantes de objeto suelen cargarse de forma diferida. Establezca `importMode` en el diccionario para controlarlo:
|
|
470
|
+
|
|
471
|
+
```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
472
|
+
const dictionary = {
|
|
473
|
+
key: "product",
|
|
474
|
+
importMode: "fetch", // or "dynamic"
|
|
475
|
+
variant: { id: "prod_abc", userId: "user_123" },
|
|
476
|
+
content: { … },
|
|
477
|
+
} satisfies Dictionary;
|
|
478
|
+
|
|
479
|
+
export default dictionary;
|
|
480
|
+
```
|
|
481
|
+
|
|
482
|
+
Consulte [optimización del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md) para detalles sobre los modos `static`, `dynamic` y `fetch`.
|
|
483
|
+
|
|
229
484
|
## Casos de uso típicos
|
|
230
485
|
|
|
231
|
-
- Pruebas A/B
|
|
232
|
-
- Banners
|
|
233
|
-
-
|
|
234
|
-
- Campañas de marketing específicas
|
|
486
|
+
- Pruebas A/B de texto dirigidas por una clave de experimento
|
|
487
|
+
- Banners de temporada o promocionales
|
|
488
|
+
- Mensajería con feature flag
|
|
489
|
+
- Campañas de marketing específicas por locale
|
|
490
|
+
- Copia de marketing por producto gestionada en un CMS
|
|
491
|
+
- Contenido específico de usuario o de cuenta
|
|
492
|
+
- Cualquier contenido indexado por un ID opaco en tiempo de ejecución
|
|
@@ -108,7 +108,6 @@ const config: IntlayerConfig = {
|
|
|
108
108
|
* Cargará y escribirá la salida y las traducciones de vuelta a los archivos JSON en el directorio locales
|
|
109
109
|
*/
|
|
110
110
|
syncJSON({
|
|
111
|
-
format: "i18next",
|
|
112
111
|
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
113
112
|
priority: 0,
|
|
114
113
|
format: "i18next",
|
package/docs/es/releases/v9.md
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-14
|
|
3
|
-
updatedAt: 2026-06-
|
|
3
|
+
updatedAt: 2026-06-26
|
|
4
4
|
title: Nuevo Intlayer v9 - ¿Qué hay de nuevo?
|
|
5
|
-
description: Descubre las novedades de Intlayer v9. Presentamos paquetes de compatibilidad directos para librerías i18n populares y soporte para Colecciones
|
|
5
|
+
description: Descubre las novedades de Intlayer v9. Presentamos paquetes de compatibilidad directos para librerías i18n populares y soporte para Colecciones y Variantes.
|
|
6
6
|
keywords:
|
|
7
7
|
- Intlayer
|
|
8
8
|
- Compatibility
|
|
9
9
|
- Migration
|
|
10
10
|
- Collections
|
|
11
11
|
- Variants
|
|
12
|
-
- Dynamic Records
|
|
13
12
|
- i18next
|
|
14
13
|
- next-intl
|
|
15
14
|
- vue-i18n
|
|
@@ -22,7 +21,7 @@ author: aymericzip
|
|
|
22
21
|
|
|
23
22
|
# Nuevo Intlayer v9 - ¿Qué hay de nuevo?
|
|
24
23
|
|
|
25
|
-
¡Bienvenido a Intlayer v9! Esta importante versión marca un gran hito al simplificar la ruta de migración a Intlayer con **Paquetes Adaptadores de Compatibilidad** para las principales librerías i18n (`react-i18next`, `next-intl`, `vue-i18n`, etc.) y añade soporte para estructuras de contenido enriquecido: **Colecciones
|
|
24
|
+
¡Bienvenido a Intlayer v9! Esta importante versión marca un gran hito al simplificar la ruta de migración a Intlayer con **Paquetes Adaptadores de Compatibilidad** para las principales librerías i18n (`react-i18next`, `next-intl`, `vue-i18n`, etc.) y añade soporte para estructuras de contenido enriquecido: **Colecciones** y **Variantes**.
|
|
26
25
|
|
|
27
26
|
## Tabla de contenidos
|
|
28
27
|
|
|
@@ -41,8 +40,10 @@ Al reemplazar los imports, obtienes todos los beneficios de Intlayer (incluida l
|
|
|
41
40
|
- `@intlayer/i18next`
|
|
42
41
|
- `@intlayer/react-i18next`
|
|
43
42
|
- `@intlayer/next-intl`
|
|
43
|
+
- `@intlayer/react-intl`
|
|
44
44
|
- `@intlayer/next-i18next`
|
|
45
45
|
- `@intlayer/vue-i18n`
|
|
46
|
+
- `@intlayer/lingui`
|
|
46
47
|
|
|
47
48
|
Por ejemplo, simplemente cambia:
|
|
48
49
|
|
|
@@ -100,7 +101,7 @@ Todos los adaptadores de compatibilidad ahora enrutan la resolución de traducci
|
|
|
100
101
|
|
|
101
102
|
---
|
|
102
103
|
|
|
103
|
-
## Especificación de Características: Colecciones
|
|
104
|
+
## Especificación de Características: Colecciones y Variantes
|
|
104
105
|
|
|
105
106
|
Intlayer v9 se expande más allá de los objetos estáticos clave-valor, permitiendo que los diccionarios declaren estructuras de diseño dinámicas que están completamente tipadas de principio a fin.
|
|
106
107
|
|
|
@@ -144,6 +145,8 @@ const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: s
|
|
|
144
145
|
|
|
145
146
|
Ofrece pruebas A/B, encabezados de temporada, feature flags o landing pages personalizadas:
|
|
146
147
|
|
|
148
|
+
#### Variantes de cadena (por ejemplo, pruebas A/B)
|
|
149
|
+
|
|
147
150
|
```ts fileName="hero.content.ts"
|
|
148
151
|
import { t, type Dictionary } => "intlayer";
|
|
149
152
|
|
|
@@ -163,16 +166,14 @@ export default {
|
|
|
163
166
|
const banner = useIntlayer("hero-banner", { variant: "black_friday" });
|
|
164
167
|
```
|
|
165
168
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
Define diccionarios cuyas entradas se cargan dinámicamente en tiempo de ejecución a través de IDs de consulta:
|
|
169
|
+
#### Variantes de objeto (por ejemplo, Dynamic Records)
|
|
169
170
|
|
|
170
171
|
```ts fileName="product.content.ts"
|
|
171
172
|
import { t, type Dictionary } from "intlayer";
|
|
172
173
|
|
|
173
174
|
export default {
|
|
174
175
|
key: "product-copy",
|
|
175
|
-
|
|
176
|
+
variant: {
|
|
176
177
|
id: "prod_123",
|
|
177
178
|
category: "books",
|
|
178
179
|
},
|
|
@@ -225,7 +226,7 @@ export default defineConfig({
|
|
|
225
226
|
});
|
|
226
227
|
```
|
|
227
228
|
|
|
228
|
-
- **Compilador**: Se activa automáticamente cuando `compiler.enabled` está configurado y se define una ruta `compiler.output`. Ya no necesitas registrar `intlayerCompiler()` por separado.
|
|
229
|
+
- **Compilador**: Se activa automáticamente cuando `compiler.enabled` está configurado en `true` y se define una ruta `compiler.output`. Ya no necesitas registrar `intlayerCompiler()` por separado.
|
|
229
230
|
- **Proxy**: Se activa automáticamente basado en la nueva opción `routing.enableProxy` (`true` por defecto). Conecta el middleware de detección de locales / redirección / reescritura en desarrollo, vista previa y SSR de producción. Ya no necesitas registrar `intlayerProxy()` por separado.
|
|
230
231
|
|
|
231
232
|
### Opción `routing.enableProxy`
|
|
@@ -248,6 +249,27 @@ Los plugins independientes `intlayerCompiler()` e `intlayerProxy()` siguen siend
|
|
|
248
249
|
|
|
249
250
|
---
|
|
250
251
|
|
|
252
|
+
## Compilador deshabilitado por defecto
|
|
253
|
+
|
|
254
|
+
A partir de Intlayer v9, el **compilador está deshabilitado por defecto** (`compiler.enabled` ahora tiene el valor predeterminado `false`). Para habilitar la extracción de tus archivos `.content.ts` en tiempo de compilación, establece `compiler.enabled: true` en tu configuración:
|
|
255
|
+
|
|
256
|
+
```ts fileName="intlayer.config.ts"
|
|
257
|
+
import type { IntlayerConfig } from "intlayer";
|
|
258
|
+
|
|
259
|
+
const config: IntlayerConfig = {
|
|
260
|
+
compiler: {
|
|
261
|
+
enabled: true, // Por defecto: false — requerido para habilitar el compilador desde la v9
|
|
262
|
+
output: ({ fileName }) => `./${fileName}.content.ts`,
|
|
263
|
+
},
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
export default config;
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
Cuando el compilador está deshabilitado, Intlayer omite el paso de extracción en tiempo de compilación y se basa en tus diccionarios ya declarados. Habilítalo solo cuando quieras que el plugin del bundler (`@intlayer/swc`, `@intlayer/babel` o el plugin de Vite `intlayer()`) extraiga el contenido automáticamente.
|
|
270
|
+
|
|
271
|
+
---
|
|
272
|
+
|
|
251
273
|
## React Native: importaciones desde un solo paquete
|
|
252
274
|
|
|
253
275
|
En una aplicación de React Native o Expo, ya no necesitas alternar entre `react-intlayer` y `react-native-intlayer`. El paquete `react-native-intlayer` ahora **reexporta la API completa de `react-intlayer`** (hooks, utilidades y las subrutas `/format`, `/html`, y `/markdown`), y su `IntlayerProvider` aplica automáticamente los polyfills de React Native.
|
|
@@ -274,13 +296,14 @@ npm install intlayer react-native-intlayer
|
|
|
274
296
|
|
|
275
297
|
Si estás actualizando desde v8, ten en cuenta que la v9 no incluye cambios disruptivos. Pero aquí están los cambios clave:
|
|
276
298
|
|
|
299
|
+
- **Compilador deshabilitado por defecto**: `compiler.enabled` ahora tiene el valor predeterminado `false`. Si dependes de la extracción de tus archivos `.content.ts` en tiempo de compilación, establece `compiler.enabled: true` en tu `intlayer.config.ts`.
|
|
277
300
|
- **Locales y Dialectos**: Si utilizas dependencias i18n externas, añade sus respectivos plugins adaptadores de compatibilidad en tu configuración o setup del bundler para reescribir automáticamente los imports.
|
|
278
|
-
- **Selectores Personalizados**: Al llamar a `useIntlayer`, el segundo parámetro ahora está reservado para un objeto de opciones que contiene `{ locale, item, variant
|
|
301
|
+
- **Selectores Personalizados**: Al llamar a `useIntlayer`, el segundo parámetro ahora está reservado para un objeto de opciones que contiene `{ locale, item, variant }`. Si anteriormente pasabas una cadena de locale directamente, aún puedes hacerlo, pero se recomienda usar el objeto de opciones para selecciones avanzadas.
|
|
279
302
|
|
|
280
303
|
---
|
|
281
304
|
|
|
282
305
|
## Enlaces útiles
|
|
283
306
|
|
|
284
307
|
- [Guía de Paquetes Adaptadores de Compatibilidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/index.md)
|
|
285
|
-
- [Diccionarios Dinámicos - Colecciones
|
|
308
|
+
- [Diccionarios Dinámicos - Colecciones y Variantes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md)
|
|
286
309
|
- [Referencia de Configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-12
|
|
3
|
-
updatedAt: 2026-06-
|
|
4
|
-
title: Dictionnaires
|
|
5
|
-
description:
|
|
3
|
+
updatedAt: 2026-06-26
|
|
4
|
+
title: Dictionnaires dynamiques
|
|
5
|
+
description: Vue d'ensemble des fonctionnalités de dictionnaires dynamiques d'Intlayer — collections et variantes — pour créer du contenu i18n flexible et piloté à l'exécution.
|
|
6
6
|
keywords:
|
|
7
|
-
- Dictionnaires
|
|
7
|
+
- Dictionnaires dynamiques
|
|
8
8
|
- Collections
|
|
9
9
|
- Variantes
|
|
10
|
-
- Enregistrements Dynamiques
|
|
11
10
|
- Intlayer
|
|
12
11
|
- Internationalisation
|
|
13
12
|
slugs:
|
|
@@ -17,32 +16,39 @@ slugs:
|
|
|
17
16
|
history:
|
|
18
17
|
- version: 9.0.0
|
|
19
18
|
date: 2026-06-12
|
|
20
|
-
changes: "
|
|
19
|
+
changes: "Sortie de la fonctionnalité des dictionnaires dynamiques"
|
|
20
|
+
- version: 9.1.0
|
|
21
|
+
date: 2026-06-26
|
|
22
|
+
changes: "Fusion des enregistrements dynamiques dans les variantes — `variant` accepte désormais une chaîne ou un objet"
|
|
21
23
|
author: aymericzip
|
|
22
24
|
---
|
|
23
25
|
|
|
24
|
-
# Dictionnaires
|
|
26
|
+
# Dictionnaires dynamiques
|
|
25
27
|
|
|
26
|
-
Intlayer prend en charge
|
|
28
|
+
Intlayer prend en charge deux mécanismes pour exprimer du contenu qui dépasse un simple dictionnaire statique par clé. Chacun est déclaré via un **champ de métadonnées de premier niveau** dans le fichier de contenu ; aucune fonction d'encapsulation n'est nécessaire.
|
|
27
29
|
|
|
28
|
-
| Fonctionnalité
|
|
29
|
-
|
|
|
30
|
-
| [Collections](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/collections.md)
|
|
31
|
-
| [Variantes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/variants.md)
|
|
32
|
-
| [Enregistrements Dynamiques](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }` | `{ id, … }` |
|
|
30
|
+
| Fonctionnalité | Champ de métadonnées | Sélecteur dans `useIntlayer` |
|
|
31
|
+
| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------- |
|
|
32
|
+
| [Collections](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/collections.md) | `item: N` | `{ item: N }` |
|
|
33
|
+
| [Variantes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/variants.md) | `variant: "name"` _ou_ `variant: { … }` | `{ variant: "name" }` _ou_ `{ variant: { … } }` |
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
Les deux se combinent avec l'argument de locale et prennent en charge le chargement sélectif / différé via `importMode`.
|
|
35
36
|
|
|
36
|
-
## Quand utiliser
|
|
37
|
+
## Quand utiliser quoi
|
|
37
38
|
|
|
38
39
|
- **Collections** — liste ordonnée d'éléments gérés dans des fichiers séparés (entrées de FAQ, articles de blog, produits).
|
|
39
|
-
- **Variantes** — alternatives de contenu nommées
|
|
40
|
-
-
|
|
40
|
+
- **Variantes** — alternatives de contenu nommées ou structurées :
|
|
41
|
+
- une variante **chaîne** pour les tests A/B, les bannières saisonnières ou les feature flags ;
|
|
42
|
+
- une variante **objet** pour les enregistrements de CMS, le contenu propre à un utilisateur ou tout contenu adressé par un ensemble de champs (les anciens « enregistrements dynamiques »).
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
> Les versions précédentes exposaient un champ `meta` distinct pour le contenu indexé par enregistrement. Il a été fusionné dans `variant` : passez un **objet** à `variant` au lieu d'utiliser `meta`.
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
## Désambiguïsation du sélecteur
|
|
47
|
+
|
|
48
|
+
Une clé peut déclarer les deux dimensions à la fois (par ex. une collection dont chaque élément possède une variante). Elles sont résolues dans l'ordre :
|
|
45
49
|
|
|
46
50
|
```
|
|
47
|
-
variant →
|
|
51
|
+
variant → item
|
|
48
52
|
```
|
|
53
|
+
|
|
54
|
+
Ainsi `{ variant: "promo" }` sur une clé variante × item renvoie tous les éléments promo sous forme de tableau, et ajouter `{ item: 2 }` réduit le résultat à une seule entrée.
|