@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,12 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-12
|
|
3
|
-
updatedAt: 2026-06-
|
|
3
|
+
updatedAt: 2026-06-26
|
|
4
4
|
title: Dynamische Wörterbücher
|
|
5
|
-
description:
|
|
5
|
+
description: Überblick über die Funktionen für dynamische Wörterbücher von Intlayer — Sammlungen und Varianten — zum Erstellen flexibler, zur Laufzeit gesteuerter i18n-Inhalte.
|
|
6
6
|
keywords:
|
|
7
7
|
- Dynamische Wörterbücher
|
|
8
8
|
- Sammlungen
|
|
9
9
|
- Varianten
|
|
10
|
-
- Dynamische Einträge
|
|
11
10
|
- Intlayer
|
|
12
11
|
- Internationalisierung
|
|
13
12
|
slugs:
|
|
@@ -17,38 +16,39 @@ slugs:
|
|
|
17
16
|
history:
|
|
18
17
|
- version: 9.0.0
|
|
19
18
|
date: 2026-06-12
|
|
20
|
-
changes: "Veröffentlichung der
|
|
19
|
+
changes: "Veröffentlichung der Funktion für dynamische Wörterbücher"
|
|
20
|
+
- version: 9.1.0
|
|
21
|
+
date: 2026-06-26
|
|
22
|
+
changes: "Dynamische Datensätze in Varianten zusammengeführt — `variant` akzeptiert jetzt einen String oder ein Objekt"
|
|
21
23
|
author: aymericzip
|
|
22
24
|
---
|
|
23
25
|
|
|
24
26
|
# Dynamische Wörterbücher
|
|
25
27
|
|
|
26
|
-
Intlayer unterstützt
|
|
28
|
+
Intlayer unterstützt zwei Mechanismen, um Inhalte auszudrücken, die über ein einzelnes statisches Wörterbuch pro Schlüssel hinausgehen. Jeder wird über ein **Metadatenfeld auf oberster Ebene** in der Inhaltsdatei deklariert; es ist keine Wrapper-Funktion nötig.
|
|
27
29
|
|
|
28
|
-
| Funktion
|
|
29
|
-
|
|
|
30
|
-
| [Sammlungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/collections.md)
|
|
31
|
-
| [Varianten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/variants.md)
|
|
32
|
-
| [Dynamische Einträge](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }` | `{ id, … }` |
|
|
30
|
+
| Funktion | Metadatenfeld | Selektor in `useIntlayer` |
|
|
31
|
+
| --------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------- |
|
|
32
|
+
| [Sammlungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/collections.md) | `item: N` | `{ item: N }` |
|
|
33
|
+
| [Varianten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/variants.md) | `variant: "name"` _oder_ `variant: { … }` | `{ variant: "name" }` _oder_ `{ variant: { … } }` |
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
Beide lassen sich mit dem locale-Argument kombinieren und unterstützen selektives / verzögertes Laden über `importMode`.
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
## Wann was verwenden
|
|
37
38
|
|
|
38
39
|
- **Sammlungen** — geordnete Liste von Elementen, die in separaten Dateien verwaltet werden (FAQ-Einträge, Blogbeiträge, Produkte).
|
|
39
|
-
- **Varianten** — benannte
|
|
40
|
-
-
|
|
40
|
+
- **Varianten** — benannte oder strukturierte Inhaltsalternativen:
|
|
41
|
+
- eine **String**-Variante für A/B-Tests, saisonale Banner oder Funktion-Flags;
|
|
42
|
+
- eine **Objekt**-Variante für CMS-Datensätze, benutzerspezifische Inhalte oder beliebige Inhalte, die über eine Reihe von Feldern adressiert werden (die früheren „dynamischen Datensätze").
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
> Frühere Versionen boten ein separates `meta`-Feld für datensatzbasierte Inhalte. Es wurde in `variant` zusammengeführt: Übergeben Sie ein **Objekt** an `variant`, anstatt `meta` zu verwenden.
|
|
43
45
|
|
|
44
|
-
|
|
45
|
-
- **Variants** — benannte Inhaltsvarianten für A/B-Tests, saisonale Banner oder Feature Flags.
|
|
46
|
-
- **Dynamic records** — Inhalte, die zur Laufzeit über eine undurchsichtige ID abgerufen werden (CMS-Datensätze, benutzerspezifische Texte).
|
|
46
|
+
## Selektor-Disambiguierung
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
Wenn mehrere Selektoren für ein Wörterbuch vorhanden sind, ist die Reihenfolge der Auflösung:
|
|
48
|
+
Ein Schlüssel kann beide Dimensionen gleichzeitig deklarieren (z. B. eine Sammlung, deren Elemente jeweils eine Variante haben). Sie werden in dieser Reihenfolge aufgelöst:
|
|
51
49
|
|
|
52
50
|
```
|
|
53
|
-
variant →
|
|
51
|
+
variant → item
|
|
54
52
|
```
|
|
53
|
+
|
|
54
|
+
So gibt `{ variant: "promo" }` bei einem Variant-×-Item-Schlüssel alle Promo-Elemente als Array zurück, und das Hinzufügen von `{ item: 2 }` grenzt es auf einen einzelnen Eintrag ein.
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-12
|
|
3
|
-
updatedAt: 2026-06-
|
|
3
|
+
updatedAt: 2026-06-26
|
|
4
4
|
title: Varianten
|
|
5
|
-
description: Verwenden Sie das Metadatenfeld
|
|
5
|
+
description: Verwenden Sie das variant-Metadatenfeld in Intlayer-Inhaltsdateien, um benannte oder strukturierte Inhaltsalternativen zu deklarieren — A/B-Tests, saisonale Banner, Feature-Flag-Texte, CMS-Datensätze, benutzerspezifische Inhalte — und zur Laufzeit ohne Codeänderungen zwischen ihnen zu wechseln.
|
|
6
6
|
keywords:
|
|
7
7
|
- Varianten
|
|
8
8
|
- A/B-Tests
|
|
9
9
|
- Feature-Flags
|
|
10
10
|
- Dynamischer Inhalt
|
|
11
|
+
- Dynamische Datensätze
|
|
12
|
+
- CMS
|
|
11
13
|
- Intlayer
|
|
12
14
|
- Internationalisierung
|
|
13
15
|
slugs:
|
|
@@ -18,16 +20,26 @@ history:
|
|
|
18
20
|
- version: 9.0.0
|
|
19
21
|
date: 2026-06-12
|
|
20
22
|
changes: "Veröffentlichung der Varianten-Funktion"
|
|
23
|
+
- version: 9.1.0
|
|
24
|
+
date: 2026-06-26
|
|
25
|
+
changes: "`variant` akzeptiert jetzt einen String oder ein Objekt — die früheren `meta` / dynamischen Datensätze werden als Objekt-Varianten deklariert"
|
|
21
26
|
author: aymericzip
|
|
22
27
|
---
|
|
23
28
|
|
|
24
29
|
# Varianten
|
|
25
30
|
|
|
26
|
-
Eine **Variante**
|
|
31
|
+
Eine **Variante** ist eine Gruppe von Inhaltsdateien, die denselben Wörterbuch-`key` teilen, aber jeweils einen anderen `variant`-Wert tragen. Intlayer liefert die passende Datei basierend auf dem an `useIntlayer` übergebenen Selektor.
|
|
27
32
|
|
|
28
|
-
|
|
33
|
+
Der `variant`-Wert kann **zwei Formen** annehmen:
|
|
29
34
|
|
|
30
|
-
|
|
35
|
+
- **Ein String** — eine einzelne benannte Alternative (A/B-Tests, saisonale Banner, Feature-Flags).
|
|
36
|
+
- **Ein Objekt** — ein strukturierter Diskriminator, der über eine Reihe von Feldern adressiert wird (CMS-Datensätze, benutzerspezifische Inhalte, beliebige Inhalte mit einer opaken ID als Schlüssel). Das gesamte Objekt ist die Identität: Der Selektor muss ein **gleiches** Objekt liefern, um den Eintrag aufzulösen.
|
|
37
|
+
|
|
38
|
+
> Die Objektform ersetzt das frühere `meta`-Feld. Überall, wo Sie zuvor `meta: { id, … }` geschrieben haben, schreiben Sie `variant: { id, … }` und wählen es mit `{ variant: { id, … } }` aus.
|
|
39
|
+
|
|
40
|
+
## Benannte (String-)Varianten
|
|
41
|
+
|
|
42
|
+
Jede Datei stellt eine benannte Alternative dar. Das Weglassen von `variant` (oder das Setzen auf `"default"`) markiert sie als Fallback.
|
|
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
|
+
### Benannte Varianten verwenden
|
|
69
81
|
|
|
70
|
-
|
|
82
|
+
#### Standardvariante
|
|
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
|
+
#### Benannte Variante
|
|
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
|
+
#### Benannte Variante mit explizitem Locale
|
|
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
|
+
## Objekt-Varianten (strukturiert)
|
|
242
|
+
|
|
243
|
+
Eine Objekt-Variante adressiert Inhalte über eine beliebige Menge von Schlüssel-Wert-Paaren, die im `variant`-Feld deklariert sind — wodurch sich CMS-Datensätze, benutzerspezifische Inhalte oder beliebige Inhalte mit einer opaken ID als Schlüssel modellieren lassen. Das **gesamte Objekt** ist die Identität: Der Selektor muss ein gleiches Objekt liefern, damit der Eintrag aufgelöst wird.
|
|
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
|
+
### Objekt-Varianten verwenden
|
|
276
|
+
|
|
277
|
+
Übergeben Sie das passende Objekt an `variant`. Jedes im Wörterbuch deklarierte Feld muss angegeben und gleich sein; andernfalls ist das Ergebnis `null`. Die Reihenfolge der Felder spielt keine Rolle.
|
|
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
|
+
#### Mit explizitem Locale
|
|
452
|
+
|
|
453
|
+
```tsx
|
|
454
|
+
const content = useIntlayer("product", {
|
|
455
|
+
variant: { id: "prod_abc", userId: "user_123" },
|
|
456
|
+
locale: "fr",
|
|
457
|
+
});
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
#### Fehlendes Feld — keine Übereinstimmung
|
|
461
|
+
|
|
462
|
+
```ts
|
|
463
|
+
// Gibt null zurück: `userId` fehlt, daher passt das Objekt nicht zur deklarierten Variante
|
|
464
|
+
const content = useIntlayer("product", { variant: { id: "prod_abc" } });
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
## Lademodus
|
|
468
|
+
|
|
469
|
+
Objekt-Varianten werden oft verzögert geladen. Setzen Sie `importMode` im Wörterbuch, um dies zu steuern:
|
|
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
|
+
Siehe [Bundle-Optimierung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/bundle_optimization.md) für Details zu den Modi `static`, `dynamic` und `fetch`.
|
|
483
|
+
|
|
229
484
|
## Typische Anwendungsfälle
|
|
230
485
|
|
|
231
|
-
- A/B-
|
|
232
|
-
- Saisonale oder
|
|
233
|
-
-
|
|
234
|
-
-
|
|
486
|
+
- A/B-Texttests, gesteuert durch einen Experiment-Schlüssel
|
|
487
|
+
- Saisonale oder Werbebanner
|
|
488
|
+
- Feature-Flag-gesteuerte Nachrichten
|
|
489
|
+
- Locale-spezifische Marketingkampagnen
|
|
490
|
+
- Produktspezifische Marketingtexte, die in einem CMS verwaltet werden
|
|
491
|
+
- Benutzer- oder kontospezifische Inhalte
|
|
492
|
+
- Beliebige Inhalte, die durch eine opake Laufzeit-ID adressiert werden
|
|
@@ -108,7 +108,6 @@ const config: IntlayerConfig = {
|
|
|
108
108
|
* Lädt die Ausgabe und Übersetzungen und schreibt sie zurück in die JSON-Dateien im locales-Verzeichnis
|
|
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/de/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: Neues Intlayer v9 – Was ist neu?
|
|
5
|
-
description: Entdecken Sie die Neuerungen in Intlayer v9. Einführung von Drop-in-Kompatibilitätspaketen für beliebte i18n-Bibliotheken und Unterstützung für Collections
|
|
5
|
+
description: Entdecken Sie die Neuerungen in Intlayer v9. Einführung von Drop-in-Kompatibilitätspaketen für beliebte i18n-Bibliotheken und Unterstützung für Collections und Variants.
|
|
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
|
# Neues Intlayer v9 – Was ist neu?
|
|
24
23
|
|
|
25
|
-
Willkommen bei Intlayer v9! Dieses Major Release markiert einen riesigen Meilenstein bei der Vereinfachung des Migrationspfads zu Intlayer mit **Compat Adapter Packages** für wichtige i18n-Bibliotheken (`react-i18next`, `next-intl`, `vue-i18n`, etc.) und fügt Unterstützung für reichhaltige Inhaltsstrukturen hinzu: **Collections
|
|
24
|
+
Willkommen bei Intlayer v9! Dieses Major Release markiert einen riesigen Meilenstein bei der Vereinfachung des Migrationspfads zu Intlayer mit **Compat Adapter Packages** für wichtige i18n-Bibliotheken (`react-i18next`, `next-intl`, `vue-i18n`, etc.) und fügt Unterstützung für reichhaltige Inhaltsstrukturen hinzu: **Collections** und **Variants**.
|
|
26
25
|
|
|
27
26
|
## Inhaltsverzeichnis
|
|
28
27
|
|
|
@@ -41,8 +40,10 @@ Durch das Ersetzen von Imports erhalten Sie alle Vorteile von Intlayer (einschli
|
|
|
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
|
Ändern Sie zum Beispiel einfach:
|
|
48
49
|
|
|
@@ -100,7 +101,7 @@ Alle Kompatibilitätsadapter leiten die Übersetzungsauflösung nun über einen
|
|
|
100
101
|
|
|
101
102
|
---
|
|
102
103
|
|
|
103
|
-
## Feature Spec: Collections
|
|
104
|
+
## Feature Spec: Collections & Variants
|
|
104
105
|
|
|
105
106
|
Intlayer v9 geht über statische Schlüssel-Wert-Objekte hinaus und ermöglicht es Dictionaries, dynamische Layout-Strukturen zu deklarieren, die End-to-End vollständig typisiert sind.
|
|
106
107
|
|
|
@@ -144,6 +145,8 @@ const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: s
|
|
|
144
145
|
|
|
145
146
|
Liefern Sie A/B-Tests, saisonale Header, Feature Flags oder benutzerdefinierte Landing Pages:
|
|
146
147
|
|
|
148
|
+
#### String-Varianten (z. B. A/B-Tests)
|
|
149
|
+
|
|
147
150
|
```ts fileName="hero.content.ts"
|
|
148
151
|
import { t, type Dictionary } from "intlayer";
|
|
149
152
|
|
|
@@ -167,16 +170,14 @@ export default {
|
|
|
167
170
|
const banner = useIntlayer("hero-banner", { variant: "black_friday" });
|
|
168
171
|
```
|
|
169
172
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
Definieren Sie Dictionaries, deren Einträge zur Laufzeit dynamisch über Query-IDs geladen werden:
|
|
173
|
+
#### Objekt-Varianten (z. B. Dynamic Records)
|
|
173
174
|
|
|
174
175
|
```ts fileName="product.content.ts"
|
|
175
176
|
import { t, type Dictionary } from "intlayer";
|
|
176
177
|
|
|
177
178
|
export default {
|
|
178
179
|
key: "product-copy",
|
|
179
|
-
|
|
180
|
+
variant: {
|
|
180
181
|
id: "prod_123",
|
|
181
182
|
category: "books",
|
|
182
183
|
},
|
|
@@ -229,7 +230,7 @@ export default defineConfig({
|
|
|
229
230
|
});
|
|
230
231
|
```
|
|
231
232
|
|
|
232
|
-
- **Compiler**: Aktiviert sich automatisch, wenn `compiler.enabled` gesetzt ist und ein `compiler.output` Pfad konfiguriert ist. Sie müssen `intlayerCompiler()` nicht mehr separat registrieren.
|
|
233
|
+
- **Compiler**: Aktiviert sich automatisch, wenn `compiler.enabled` auf `true` gesetzt ist und ein `compiler.output` Pfad konfiguriert ist. Sie müssen `intlayerCompiler()` nicht mehr separat registrieren.
|
|
233
234
|
- **Proxy**: Aktiviert sich automatisch basierend auf der neuen `routing.enableProxy` Option (`true` standardmäßig). Es verbindet die Locale-Erkennung / Umleitung / Rewrite Middleware in Entwicklung, Preview und Production SSR. Sie müssen `intlayerProxy()` nicht mehr separat registrieren.
|
|
234
235
|
|
|
235
236
|
### `routing.enableProxy` Option
|
|
@@ -252,6 +253,27 @@ Die eigenständigen `intlayerCompiler()` und `intlayerProxy()` Plugins bleiben f
|
|
|
252
253
|
|
|
253
254
|
---
|
|
254
255
|
|
|
256
|
+
## Compiler standardmäßig deaktiviert
|
|
257
|
+
|
|
258
|
+
Ab Intlayer v9 ist der **Compiler standardmäßig deaktiviert** (`compiler.enabled` ist jetzt standardmäßig `false`). Um die Extraktion Ihrer `.content.ts`-Dateien zur Build-Zeit zu aktivieren, setzen Sie `compiler.enabled: true` in Ihrer Konfiguration:
|
|
259
|
+
|
|
260
|
+
```ts fileName="intlayer.config.ts"
|
|
261
|
+
import type { IntlayerConfig } from "intlayer";
|
|
262
|
+
|
|
263
|
+
const config: IntlayerConfig = {
|
|
264
|
+
compiler: {
|
|
265
|
+
enabled: true, // Standard: false — seit v9 erforderlich, um den Compiler zu aktivieren
|
|
266
|
+
output: ({ fileName }) => `./${fileName}.content.ts`,
|
|
267
|
+
},
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
export default config;
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
Wenn der Compiler deaktiviert ist, überspringt Intlayer den Extraktionsschritt zur Build-Zeit und verlässt sich auf Ihre bereits deklarierten Dictionaries. Aktivieren Sie ihn nur, wenn das Bundler-Plugin (`@intlayer/swc`, `@intlayer/babel` oder das `intlayer()` Vite-Plugin) den Inhalt automatisch extrahieren soll.
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
255
277
|
## React Native: Importe aus einem einzigen Paket
|
|
256
278
|
|
|
257
279
|
In einer React Native- oder Expo-App müssen Sie nicht mehr beide Pakete `react-intlayer` und `react-native-intlayer` jonglieren. Das Paket `react-native-intlayer` **re-exportiert nun die vollständige `react-intlayer` API** (Hooks, Utilities sowie die Subpfade `/format`, `/html` und `/markdown`), und sein `IntlayerProvider` wendet automatisch die React Native Polyfills an.
|
|
@@ -278,13 +300,14 @@ npm install intlayer react-native-intlayer
|
|
|
278
300
|
|
|
279
301
|
Wenn Sie von v8 upgraden, beachten Sie, dass v9 keine Breaking Changes enthält. Hier sind jedoch die wichtigsten Änderungen:
|
|
280
302
|
|
|
303
|
+
- **Compiler standardmäßig deaktiviert**: `compiler.enabled` ist jetzt standardmäßig `false`. Wenn Sie auf die Extraktion Ihrer `.content.ts`-Dateien zur Build-Zeit angewiesen sind, setzen Sie `compiler.enabled: true` in Ihrer `intlayer.config.ts`.
|
|
281
304
|
- **Locales & Dialects**: Wenn Sie externe i18n-Abhängigkeiten verwenden, fügen Sie deren entsprechende Kompatibilitätsadapter-Plugins in Ihrer Konfiguration oder Ihrem Bundler-Setup hinzu, um Imports automatisch umzuschreiben.
|
|
282
|
-
- **Custom Selectors**: Beim Aufruf von `useIntlayer` ist der zweite Parameter nun für ein Options-Objekt reserviert, das `{ locale, item, variant
|
|
305
|
+
- **Custom Selectors**: Beim Aufruf von `useIntlayer` ist der zweite Parameter nun für ein Options-Objekt reserviert, das `{ locale, item, variant }` enthält. Wenn Sie zuvor direkt einen Locale-String übergeben haben, können Sie dies weiterhin tun, aber die Verwendung des Options-Objekts wird für erweiterte Auswahlen empfohlen.
|
|
283
306
|
|
|
284
307
|
---
|
|
285
308
|
|
|
286
309
|
## Nützliche Links
|
|
287
310
|
|
|
288
311
|
- [Leitfaden für Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/index.md)
|
|
289
|
-
- [Dynamische Dictionaries – Collections
|
|
312
|
+
- [Dynamische Dictionaries – Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/index.md)
|
|
290
313
|
- [Konfigurationsreferenz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-12
|
|
3
|
-
updatedAt: 2026-06-
|
|
3
|
+
updatedAt: 2026-06-26
|
|
4
4
|
title: Dynamic Dictionaries
|
|
5
|
-
description: Overview of Intlayer's
|
|
5
|
+
description: Overview of Intlayer's dynamic dictionary features — collections and variants — for building flexible, runtime-driven i18n content.
|
|
6
6
|
keywords:
|
|
7
7
|
- Dynamic Dictionaries
|
|
8
8
|
- Collections
|
|
9
9
|
- Variants
|
|
10
|
-
- Dynamic Records
|
|
11
10
|
- Intlayer
|
|
12
11
|
- Internationalization
|
|
13
12
|
slugs:
|
|
@@ -18,31 +17,38 @@ history:
|
|
|
18
17
|
- version: 9.0.0
|
|
19
18
|
date: 2026-06-12
|
|
20
19
|
changes: "Release of the dynamic dictionaries feature"
|
|
20
|
+
- version: 9.1.0
|
|
21
|
+
date: 2026-06-26
|
|
22
|
+
changes: "Merged dynamic records into variants — `variant` now accepts a string or an object"
|
|
21
23
|
author: aymericzip
|
|
22
24
|
---
|
|
23
25
|
|
|
24
26
|
# Dynamic Dictionaries
|
|
25
27
|
|
|
26
|
-
Intlayer supports
|
|
28
|
+
Intlayer supports two mechanisms for expressing content that goes beyond a single static dictionary per key. Each is declared through a **top-level metadata field** in the content file; no wrapper function is needed.
|
|
27
29
|
|
|
28
|
-
| Feature
|
|
29
|
-
|
|
|
30
|
-
| [Collections](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/collections.md)
|
|
31
|
-
| [Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/variants.md)
|
|
32
|
-
| [Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }` | `{ id, … }` |
|
|
30
|
+
| Feature | Metadata field | Selector in `useIntlayer` |
|
|
31
|
+
| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------- |
|
|
32
|
+
| [Collections](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/collections.md) | `item: N` | `{ item: N }` |
|
|
33
|
+
| [Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/variants.md) | `variant: "name"` _or_ `variant: { … }` | `{ variant: "name" }` _or_ `{ variant: { … } }` |
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
Both compose with the locale argument and support selective / lazy loading via `importMode`.
|
|
35
36
|
|
|
36
37
|
## When to use which
|
|
37
38
|
|
|
38
39
|
- **Collections** — ordered list of items managed in separate files (FAQ entries, blog posts, products).
|
|
39
|
-
- **Variants** — named content alternatives
|
|
40
|
-
-
|
|
40
|
+
- **Variants** — named or structured content alternatives:
|
|
41
|
+
- a **string** variant for A/B tests, seasonal banners, or feature flags;
|
|
42
|
+
- an **object** variant for CMS records, user-specific copy, or any content addressed by a set of fields (the former "dynamic records").
|
|
43
|
+
|
|
44
|
+
> Earlier versions exposed a separate `meta` field for record-keyed content. It has been merged into `variant`: pass an **object** to `variant` instead of using `meta`.
|
|
41
45
|
|
|
42
46
|
## Selector disambiguation
|
|
43
47
|
|
|
44
|
-
|
|
48
|
+
A key may declare both dimensions at once (e.g. a collection whose items each have a variant). They are resolved in the order:
|
|
45
49
|
|
|
46
50
|
```
|
|
47
|
-
variant →
|
|
51
|
+
variant → item
|
|
48
52
|
```
|
|
53
|
+
|
|
54
|
+
So `{ variant: "promo" }` on a variant × item key returns every promo item as an array, and adding `{ item: 2 }` narrows it to a single entry.
|