@intlayer/docs 9.0.0-canary.7 → 9.0.0-canary.9

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 (98) hide show
  1. package/dist/cjs/generated/docs.entry.cjs +0 -20
  2. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  3. package/dist/esm/generated/docs.entry.mjs +0 -20
  4. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  5. package/dist/types/generated/docs.entry.d.ts +0 -1
  6. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  7. package/docs/ar/dynamic_dictionaries/index.md +24 -18
  8. package/docs/ar/dynamic_dictionaries/variants.md +280 -22
  9. package/docs/ar/plugins/sync-json.md +0 -1
  10. package/docs/ar/releases/v9.md +35 -12
  11. package/docs/de/dynamic_dictionaries/index.md +22 -22
  12. package/docs/de/dynamic_dictionaries/variants.md +272 -14
  13. package/docs/de/plugins/sync-json.md +0 -1
  14. package/docs/de/releases/v9.md +35 -12
  15. package/docs/en/dynamic_dictionaries/index.md +20 -14
  16. package/docs/en/dynamic_dictionaries/variants.md +266 -8
  17. package/docs/en/plugins/sync-json.md +0 -1
  18. package/docs/en/releases/v9.md +35 -12
  19. package/docs/en-GB/dynamic_dictionaries/index.md +21 -15
  20. package/docs/en-GB/dynamic_dictionaries/variants.md +268 -10
  21. package/docs/en-GB/plugins/sync-json.md +0 -1
  22. package/docs/en-GB/releases/v9.md +35 -12
  23. package/docs/es/dynamic_dictionaries/index.md +25 -19
  24. package/docs/es/dynamic_dictionaries/variants.md +275 -17
  25. package/docs/es/plugins/sync-json.md +0 -1
  26. package/docs/es/releases/v9.md +35 -12
  27. package/docs/fr/dynamic_dictionaries/index.md +26 -20
  28. package/docs/fr/dynamic_dictionaries/variants.md +273 -15
  29. package/docs/fr/plugins/sync-json.md +0 -1
  30. package/docs/fr/releases/v9.md +35 -12
  31. package/docs/hi/dynamic_dictionaries/index.md +28 -22
  32. package/docs/hi/dynamic_dictionaries/variants.md +282 -24
  33. package/docs/hi/plugins/sync-json.md +0 -1
  34. package/docs/hi/releases/v9.md +35 -12
  35. package/docs/id/dynamic_dictionaries/index.md +25 -19
  36. package/docs/id/dynamic_dictionaries/variants.md +274 -16
  37. package/docs/id/plugins/sync-json.md +0 -1
  38. package/docs/id/releases/v9.md +35 -12
  39. package/docs/it/dynamic_dictionaries/index.md +26 -20
  40. package/docs/it/dynamic_dictionaries/variants.md +273 -15
  41. package/docs/it/plugins/sync-json.md +0 -1
  42. package/docs/it/releases/v9.md +35 -12
  43. package/docs/ja/dynamic_dictionaries/index.md +27 -21
  44. package/docs/ja/dynamic_dictionaries/variants.md +276 -18
  45. package/docs/ja/plugins/sync-json.md +0 -1
  46. package/docs/ja/releases/v9.md +35 -12
  47. package/docs/ko/dynamic_dictionaries/index.md +23 -17
  48. package/docs/ko/dynamic_dictionaries/variants.md +273 -15
  49. package/docs/ko/plugins/sync-json.md +0 -1
  50. package/docs/ko/releases/v9.md +35 -12
  51. package/docs/pl/dynamic_dictionaries/index.md +26 -20
  52. package/docs/pl/dynamic_dictionaries/variants.md +275 -17
  53. package/docs/pl/plugins/sync-json.md +0 -1
  54. package/docs/pl/releases/v9.md +35 -12
  55. package/docs/pt/dynamic_dictionaries/index.md +25 -19
  56. package/docs/pt/dynamic_dictionaries/variants.md +276 -18
  57. package/docs/pt/plugins/sync-json.md +0 -1
  58. package/docs/pt/releases/v9.md +35 -12
  59. package/docs/ru/dynamic_dictionaries/index.md +25 -19
  60. package/docs/ru/dynamic_dictionaries/variants.md +277 -19
  61. package/docs/ru/plugins/sync-json.md +0 -1
  62. package/docs/ru/releases/v9.md +35 -12
  63. package/docs/tr/dynamic_dictionaries/index.md +27 -21
  64. package/docs/tr/dynamic_dictionaries/variants.md +274 -16
  65. package/docs/tr/plugins/sync-json.md +0 -1
  66. package/docs/tr/releases/v9.md +35 -12
  67. package/docs/uk/dynamic_dictionaries/index.md +25 -19
  68. package/docs/uk/dynamic_dictionaries/variants.md +277 -19
  69. package/docs/uk/plugins/sync-json.md +0 -1
  70. package/docs/uk/releases/v9.md +35 -12
  71. package/docs/vi/dynamic_dictionaries/index.md +28 -22
  72. package/docs/vi/dynamic_dictionaries/variants.md +278 -20
  73. package/docs/vi/plugins/sync-json.md +0 -1
  74. package/docs/vi/releases/v9.md +35 -12
  75. package/docs/zh/dynamic_dictionaries/index.md +24 -18
  76. package/docs/zh/dynamic_dictionaries/variants.md +274 -16
  77. package/docs/zh/plugins/sync-json.md +0 -1
  78. package/docs/zh/releases/v9.md +35 -12
  79. package/package.json +6 -6
  80. package/src/generated/docs.entry.ts +0 -20
  81. package/docs/ar/dynamic_dictionaries/dynamic_content.md +0 -271
  82. package/docs/de/dynamic_dictionaries/dynamic_content.md +0 -271
  83. package/docs/en/dynamic_dictionaries/dynamic_content.md +0 -271
  84. package/docs/en-GB/dynamic_dictionaries/dynamic_content.md +0 -271
  85. package/docs/es/dynamic_dictionaries/dynamic_content.md +0 -271
  86. package/docs/fr/dynamic_dictionaries/dynamic_content.md +0 -271
  87. package/docs/hi/dynamic_dictionaries/dynamic_content.md +0 -271
  88. package/docs/id/dynamic_dictionaries/dynamic_content.md +0 -271
  89. package/docs/it/dynamic_dictionaries/dynamic_content.md +0 -271
  90. package/docs/ja/dynamic_dictionaries/dynamic_content.md +0 -271
  91. package/docs/ko/dynamic_dictionaries/dynamic_content.md +0 -271
  92. package/docs/pl/dynamic_dictionaries/dynamic_content.md +0 -271
  93. package/docs/pt/dynamic_dictionaries/dynamic_content.md +0 -271
  94. package/docs/ru/dynamic_dictionaries/dynamic_content.md +0 -271
  95. package/docs/tr/dynamic_dictionaries/dynamic_content.md +0 -271
  96. package/docs/uk/dynamic_dictionaries/dynamic_content.md +0 -271
  97. package/docs/vi/dynamic_dictionaries/dynamic_content.md +0 -271
  98. package/docs/zh/dynamic_dictionaries/dynamic_content.md +0 -271
@@ -1,271 +0,0 @@
1
- ---
2
- createdAt: 2026-06-12
3
- updatedAt: 2026-06-12
4
- title: Dinamik Kayıtlar
5
- description: Derleme zamanı numaralandırması olmadan kesin tür atanmış (strongly-typed) dinamik içerik sağlamak üzere çalışma zamanında opak bir ID ile getirilen CMS yönetimli kayıtları bildirmek için Intlayer içerik dosyalarındaki meta alanını kullanın.
6
- keywords:
7
- - Dinamik Kayıtlar
8
- - Dinamik İçerik
9
- - CMS
10
- - Çalışma Zamanı İçeriği
11
- - Intlayer
12
- - Uluslararasılaştırma
13
- slugs:
14
- - doc
15
- - concept
16
- - dynamic-records
17
- history:
18
- - version: 9.0.0
19
- date: 2026-06-12
20
- changes: "Dinamik içerik özelliğinin sürümü"
21
- author: aymericzip
22
- ---
23
-
24
- # Dinamik Kayıtlar
25
-
26
- Bir **dinamik kayıt** (dynamic record), kimliği sıralı bir dizin (index) veya adlandırılmış bir varyant olmayan, bunun yerine bir `meta` alanında bildirilen rastgele anahtar-değer çiftleri kümesi olan bir içerik dosyasıdır. Intlayer, çalışma zamanında (runtime) bu alanları seçici olarak kullanır. Bu sayede CMS kayıtlarını, kullanıcıya özel metinleri veya derleme zamanında anahtarları bilinmeyen herhangi bir içeriği adreslemeyi mümkün kılar.
27
-
28
- ## Dinamik kayıtları bildirme
29
-
30
- ```ts fileName="product-copy.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
31
- import { t, type Dictionary } from "intlayer";
32
-
33
- const dictionary = {
34
- key: "product-copy",
35
- meta: {
36
- id: "prod_abc",
37
- userId: "user_123",
38
- },
39
- content: {
40
- name: t({ en: "Widget Pro", fr: "Widget Pro" }),
41
- description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
42
- },
43
- } satisfies Dictionary;
44
-
45
- export default dictionary;
46
- ```
47
-
48
- ```ts fileName="product-copy.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
49
- import { t, type Dictionary } from "intlayer";
50
-
51
- const dictionary = {
52
- key: "product-copy",
53
- meta: {
54
- id: "prod_abcd",
55
- userId: "user_123",
56
- },
57
- content: {
58
- name: t({ en: "Widget Lite", fr: "Widget Lite" }),
59
- description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
60
- },
61
- } satisfies Dictionary;
62
-
63
- export default dictionary;
64
- ```
65
-
66
- ## Dinamik kayıtları tüketme
67
-
68
- Seçicide tüm `meta` alanları **zorunludur**. Herhangi bir alanın atlanması `null` döndürür ve bir TypeScript hatasıdır.
69
-
70
- <Tabs group="framework">
71
- <Tab label="React" value="react">
72
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
73
- import { useIntlayer } from "react-intlayer";
74
-
75
- export const ProductCopy = ({
76
- productId,
77
- userId,
78
- }: {
79
- productId: string;
80
- userId: string;
81
- }) => {
82
- const content = useIntlayer("product-copy", { id: productId, userId });
83
- // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.
84
-
85
- if (!content) return null;
86
-
87
- return <p>{content.description}</p>;
88
- };
89
- ```
90
-
91
- </Tab>
92
- <Tab label="Next.js" value="nextjs">
93
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
94
- import { useIntlayer } from "next-intlayer";
95
-
96
- export const ProductCopy = ({
97
- productId,
98
- userId,
99
- }: {
100
- productId: string;
101
- userId: string;
102
- }) => {
103
- const content = useIntlayer("product-copy", { id: productId, userId });
104
- // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.
105
-
106
- if (!content) return null;
107
-
108
- return <p>{content.description}</p>;
109
- };
110
- ```
111
-
112
- </Tab>
113
- <Tab label="Vue" value="vue">
114
- ```vue fileName="ProductCopy.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
115
- <script setup>
116
- import { useIntlayer } from "vue-intlayer";
117
-
118
- const props = defineProps({
119
- productId: String,
120
- userId: String,
121
- });
122
-
123
- const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
124
- </script>
125
-
126
- <template>
127
- <p v-if="content">{{ content.description }}</p>
128
- </template>
129
- ```
130
-
131
- </Tab>
132
- <Tab label="Svelte" value="svelte">
133
- ```svelte fileName="ProductCopy.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
134
- <script lang="ts">
135
- import { useIntlayer } from "svelte-intlayer";
136
-
137
- export let productId: string;
138
- export let userId: string;
139
-
140
- const content = useIntlayer("product-copy", { id: productId, userId });
141
- </script>
142
-
143
- {#if $content}
144
- <p>{$content.description}</p>
145
- {/if}
146
- ```
147
-
148
- </Tab>
149
- <Tab label="Preact" value="preact">
150
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
151
- import { useIntlayer } from "preact-intlayer";
152
-
153
- export const ProductCopy = ({
154
- productId,
155
- userId,
156
- }: {
157
- productId: string;
158
- userId: string;
159
- }) => {
160
- const content = useIntlayer("product-copy", { id: productId, userId });
161
- // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.
162
-
163
- if (!content) return null;
164
-
165
- return <p>{content.description}</p>;
166
- };
167
- ```
168
-
169
- </Tab>
170
- <Tab label="Solid" value="solid">
171
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
172
- import { useIntlayer } from "solid-intlayer";
173
-
174
- export const ProductCopy = (props: {
175
- productId: string;
176
- userId: string;
177
- }) => {
178
- const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
179
- // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.
180
-
181
- return (
182
- <>
183
- {content() && <p>{content().description}</p>}
184
- </>
185
- );
186
- };
187
- ```
188
-
189
- </Tab>
190
- <Tab label="Angular" value="angular">
191
- ```typescript fileName="product-copy.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
192
- import { Component, Input, OnInit } from "@angular/core";
193
- import { useIntlayer } from "angular-intlayer";
194
-
195
- @Component({
196
- selector: "app-product-copy",
197
- template: `
198
- @if (content()) {
199
- <p>{{ content().description }}</p>
200
- }
201
- `,
202
- })
203
- export class ProductCopyComponent implements OnInit {
204
- @Input() productId!: string;
205
- @Input() userId!: string;
206
-
207
- content: any;
208
-
209
- ngOnInit() {
210
- this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
211
- }
212
- }
213
- ```
214
-
215
- </Tab>
216
- <Tab label="Vanilla JS" value="vanilla">
217
- ```javascript fileName="product-copy.js"
218
- import { useIntlayer } from "vanilla-intlayer";
219
-
220
- const content = useIntlayer("product-copy", {
221
- id: "prod_abcd",
222
- userId: "user_123"
223
- });
224
-
225
- if (content) {
226
- document.body.innerHTML = `<p>${content.description}</p>`;
227
- }
228
- ```
229
-
230
- </Tab>
231
- </Tabs>
232
-
233
- ### Belirli dil seçeneği ile
234
-
235
- ```tsx
236
- const content = useIntlayer("product-copy", {
237
- id: "prod_abc",
238
- userId: "user_123",
239
- locale: "tr",
240
- });
241
- ```
242
-
243
- ### Eksik meta alanı — derleme zamanı hatası
244
-
245
- ```ts
246
- // Tip hatası: `userId` eksik
247
- const content = useIntlayer("product-copy", { id: "prod_abc" });
248
- ```
249
-
250
- ## Yükleme modu (loading mode)
251
-
252
- Dinamik kayıtlar genellikle geç (lazy) yüklenir. Bunu kontrol etmek için sözlükte `importMode` alanını ayarlayın:
253
-
254
- ```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
255
- const dictionary = {
256
- key: "product-copy",
257
- importMode: "fetch", // veya "dynamic"
258
- meta: { id: "prod_abc", userId: "user_123" },
259
- content: { … },
260
- } satisfies Dictionary;
261
-
262
- export default dictionary;
263
- ```
264
-
265
- `static`, `dynamic` ve `fetch` modları hakkında ayrıntılı bilgi için [paket optimizasyonu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/bundle_optimization.md) sayfasına bakın.
266
-
267
- ## Tipik kullanım senaryoları
268
-
269
- - Bir CMS'de yönetilen ürün başına pazarlama metinleri
270
- - Kullanıcıya veya hesaba özel içerik
271
- - Çalışma zamanında opak bir kimlikle (ID) anahtarlanan tüm içerikler
@@ -1,271 +0,0 @@
1
- ---
2
- createdAt: 2026-06-12
3
- updatedAt: 2026-06-12
4
- title: Динамічні Записи
5
- description: Використовуйте поле meta у файлах вмісту Intlayer для оголошення записів, керованих CMS, що отримуються під час виконання за непрозорим ідентифікатором ID, що дозволяє створювати строго типізований динамічний вміст без перерахування під час складання.
6
- keywords:
7
- - Динамічні Записи
8
- - Динамічний Вміст
9
- - CMS
10
- - Вміст під Час Виконання
11
- - Intlayer
12
- - Інтернаціоналізація
13
- slugs:
14
- - doc
15
- - concept
16
- - dynamic-records
17
- history:
18
- - version: 9.0.0
19
- date: 2026-06-12
20
- changes: "Випуск функції динамічного контенту"
21
- author: aymericzip
22
- ---
23
-
24
- # Динамічні Записи
25
-
26
- **Динамічний запис** (dynamic record) — це файл вмісту, ідентифікація якого базується не на послідовному індексі чи іменованому варіанті, а на довільному наборі пар ключ-значення, оголошених у полі `meta`. Intlayer використовує ці поля як селектор під час виконання, що дозволяє адресувати записи CMS, вміст конкретного користувача або будь-які дані, ключі яких невідомі під час збирання проекту.
27
-
28
- ## Оголошення динамічних записів
29
-
30
- ```ts fileName="product-copy.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
31
- import { t, type Dictionary } from "intlayer";
32
-
33
- const dictionary = {
34
- key: "product-copy",
35
- meta: {
36
- id: "prod_abc",
37
- userId: "user_123",
38
- },
39
- content: {
40
- name: t({ en: "Widget Pro", fr: "Widget Pro" }),
41
- description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
42
- },
43
- } satisfies Dictionary;
44
-
45
- export default dictionary;
46
- ```
47
-
48
- ```ts fileName="product-copy.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
49
- import { t, type Dictionary } from "intlayer";
50
-
51
- const dictionary = {
52
- key: "product-copy",
53
- meta: {
54
- id: "prod_abcd",
55
- userId: "user_123",
56
- },
57
- content: {
58
- name: t({ en: "Widget Lite", fr: "Widget Lite" }),
59
- description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
60
- },
61
- } satisfies Dictionary;
62
-
63
- export default dictionary;
64
- ```
65
-
66
- ## Використання динамічних записів
67
-
68
- Усі поля `meta` є **обов'язковими** в селекторі. Опущення будь-якого поля повертає `null` і є помилкою TypeScript.
69
-
70
- <Tabs group="framework">
71
- <Tab label="React" value="react">
72
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
73
- import { useIntlayer } from "react-intlayer";
74
-
75
- export const ProductCopy = ({
76
- productId,
77
- userId,
78
- }: {
79
- productId: string;
80
- userId: string;
81
- }) => {
82
- const content = useIntlayer("product-copy", { id: productId, userId });
83
- // TypeScript гарантує, що надано як `id`, так і `userId`.
84
-
85
- if (!content) return null;
86
-
87
- return <p>{content.description}</p>;
88
- };
89
- ```
90
-
91
- </Tab>
92
- <Tab label="Next.js" value="nextjs">
93
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
94
- import { useIntlayer } from "next-intlayer";
95
-
96
- export const ProductCopy = ({
97
- productId,
98
- userId,
99
- }: {
100
- productId: string;
101
- userId: string;
102
- }) => {
103
- const content = useIntlayer("product-copy", { id: productId, userId });
104
- // TypeScript гарантує, що надано як `id`, так і `userId`.
105
-
106
- if (!content) return null;
107
-
108
- return <p>{content.description}</p>;
109
- };
110
- ```
111
-
112
- </Tab>
113
- <Tab label="Vue" value="vue">
114
- ```vue fileName="ProductCopy.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
115
- <script setup>
116
- import { useIntlayer } from "vue-intlayer";
117
-
118
- const props = defineProps({
119
- productId: String,
120
- userId: String,
121
- });
122
-
123
- const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
124
- </script>
125
-
126
- <template>
127
- <p v-if="content">{{ content.description }}</p>
128
- </template>
129
- ```
130
-
131
- </Tab>
132
- <Tab label="Svelte" value="svelte">
133
- ```svelte fileName="ProductCopy.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
134
- <script lang="ts">
135
- import { useIntlayer } from "svelte-intlayer";
136
-
137
- export let productId: string;
138
- export let userId: string;
139
-
140
- const content = useIntlayer("product-copy", { id: productId, userId });
141
- </script>
142
-
143
- {#if $content}
144
- <p>{$content.description}</p>
145
- {/if}
146
- ```
147
-
148
- </Tab>
149
- <Tab label="Preact" value="preact">
150
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
151
- import { useIntlayer } from "preact-intlayer";
152
-
153
- export const ProductCopy = ({
154
- productId,
155
- userId,
156
- }: {
157
- productId: string;
158
- userId: string;
159
- }) => {
160
- const content = useIntlayer("product-copy", { id: productId, userId });
161
- // TypeScript гарантує, що надано як `id`, так і `userId`.
162
-
163
- if (!content) return null;
164
-
165
- return <p>{content.description}</p>;
166
- };
167
- ```
168
-
169
- </Tab>
170
- <Tab label="Solid" value="solid">
171
- ```tsx fileName="ProductCopy.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
172
- import { useIntlayer } from "solid-intlayer";
173
-
174
- export const ProductCopy = (props: {
175
- productId: string;
176
- userId: string;
177
- }) => {
178
- const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
179
- // TypeScript гарантує, что надано як `id`, так і `userId`.
180
-
181
- return (
182
- <>
183
- {content() && <p>{content().description}</p>}
184
- </>
185
- );
186
- };
187
- ```
188
-
189
- </Tab>
190
- <Tab label="Angular" value="angular">
191
- ```typescript fileName="product-copy.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
192
- import { Component, Input, OnInit } from "@angular/core";
193
- import { useIntlayer } from "angular-intlayer";
194
-
195
- @Component({
196
- selector: "app-product-copy",
197
- template: `
198
- @if (content()) {
199
- <p>{{ content().description }}</p>
200
- }
201
- `,
202
- })
203
- export class ProductCopyComponent implements OnInit {
204
- @Input() productId!: string;
205
- @Input() userId!: string;
206
-
207
- content: any;
208
-
209
- ngOnInit() {
210
- this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
211
- }
212
- }
213
- ```
214
-
215
- </Tab>
216
- <Tab label="Vanilla JS" value="vanilla">
217
- ```javascript fileName="product-copy.js"
218
- import { useIntlayer } from "vanilla-intlayer";
219
-
220
- const content = useIntlayer("product-copy", {
221
- id: "prod_abcd",
222
- userId: "user_123"
223
- });
224
-
225
- if (content) {
226
- document.body.innerHTML = `<p>${content.description}</p>`;
227
- }
228
- ```
229
-
230
- </Tab>
231
- </Tabs>
232
-
233
- ### З явною локаллю
234
-
235
- ```tsx
236
- const content = useIntlayer("product-copy", {
237
- id: "prod_abc",
238
- userId: "user_123",
239
- locale: "uk",
240
- });
241
- ```
242
-
243
- ### Відсутність поля meta — помилка під час компіляції
244
-
245
- ```ts
246
- // Помилка типу: відсутній `userId`
247
- const content = useIntlayer("product-copy", { id: "prod_abc" });
248
- ```
249
-
250
- ## Режим завантаження (loading mode)
251
-
252
- Динамічні записи зазвичай завантажуються відкладено. Установіць `importMode` для словника, щоб налаштувати це:
253
-
254
- ```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
255
- const dictionary = {
256
- key: "product-copy",
257
- importMode: "fetch", // або "dynamic"
258
- meta: { id: "prod_abc", userId: "user_123" },
259
- content: { … },
260
- } satisfies Dictionary;
261
-
262
- export default dictionary;
263
- ```
264
-
265
- Детальніше про режими `static`, `dynamic` та `fetch` див. у розділі [оптимізація пакетів](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md).
266
-
267
- ## Типові варіанти використання
268
-
269
- - Маркетингові тексти для окремих продуктів, керовані в CMS
270
- - Вміст конкретного користувача або облікового запису
271
- - Будь-який вміст, що отримується на основі непрозорого runtime ID