@intlayer/docs 5.6.0 → 5.7.1
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/docs/ar/configuration.md +23 -18
- package/docs/ar/how_works_intlayer.md +1 -1
- package/docs/de/configuration.md +23 -18
- package/docs/de/how_works_intlayer.md +1 -1
- package/docs/en/configuration.md +40 -25
- package/docs/en/how_works_intlayer.md +1 -1
- package/docs/en-GB/configuration.md +23 -18
- package/docs/en-GB/how_works_intlayer.md +1 -1
- package/docs/es/configuration.md +28 -19
- package/docs/es/how_works_intlayer.md +1 -1
- package/docs/fr/configuration.md +23 -13
- package/docs/fr/how_works_intlayer.md +1 -1
- package/docs/hi/configuration.md +23 -18
- package/docs/hi/how_works_intlayer.md +1 -1
- package/docs/it/configuration.md +23 -18
- package/docs/it/how_works_intlayer.md +1 -1
- package/docs/ja/configuration.md +23 -18
- package/docs/ja/how_works_intlayer.md +1 -1
- package/docs/ko/configuration.md +23 -18
- package/docs/ko/how_works_intlayer.md +1 -1
- package/docs/pt/configuration.md +23 -18
- package/docs/pt/how_works_intlayer.md +1 -1
- package/docs/ru/configuration.md +23 -18
- package/docs/ru/how_works_intlayer.md +1 -1
- package/docs/zh/configuration.md +23 -18
- package/docs/zh/how_works_intlayer.md +1 -1
- package/package.json +9 -9
package/docs/ar/configuration.md
CHANGED
|
@@ -59,7 +59,7 @@ const config: IntlayerConfig = {
|
|
|
59
59
|
applicationContext: "This is a test application",
|
|
60
60
|
},
|
|
61
61
|
build: {
|
|
62
|
-
|
|
62
|
+
importMode: "dynamic",
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
65
|
|
|
@@ -89,7 +89,7 @@ const config = {
|
|
|
89
89
|
applicationContext: "This is a test application", // سياق التطبيق
|
|
90
90
|
},
|
|
91
91
|
build: {
|
|
92
|
-
|
|
92
|
+
importMode: "dynamic", // تفعيل الاستيراد الديناميكي
|
|
93
93
|
},
|
|
94
94
|
};
|
|
95
95
|
|
|
@@ -485,11 +485,9 @@ module.exports = config;
|
|
|
485
485
|
|
|
486
486
|
تنطبق خيارات البناء على إضافات `@intlayer/babel` و `@intlayer/swc`.
|
|
487
487
|
|
|
488
|
-
> في وضع التطوير، يستخدم Intlayer
|
|
488
|
+
> في وضع التطوير، يستخدم Intlayer استيرادات ثابتة للقواميس لتبسيط تجربة التطوير.
|
|
489
489
|
|
|
490
|
-
>
|
|
491
|
-
|
|
492
|
-
- **ملاحظة**: يتوفر `@intlayer/babel` بشكل افتراضي في حزمة `vite-intlayer`، لكن `@intlayer/swc` غير مثبت بشكل افتراضي في حزمة `next-intlayer` لأن إضافات SWC لا تزال تجريبية في Next.js.
|
|
490
|
+
> عند التحسين، سيقوم Intlayer باستبدال استدعاءات القواميس لتحسين التجزئة، بحيث يقوم البناء النهائي باستيراد القواميس المستخدمة فعليًا فقط.
|
|
493
491
|
|
|
494
492
|
#### الخصائص
|
|
495
493
|
|
|
@@ -499,21 +497,28 @@ module.exports = config;
|
|
|
499
497
|
- _القيمة الافتراضية_: `process.env.NODE_ENV === 'production'`
|
|
500
498
|
- _الوصف_: يتحكم في ما إذا كان يجب تحسين البناء.
|
|
501
499
|
- _مثال_: `true`
|
|
502
|
-
- _ملاحظة_:
|
|
503
|
-
- _ملاحظة_:
|
|
500
|
+
- _ملاحظة_: عند التمكين، سيقوم Intlayer باستبدال جميع استدعاءات القواميس لتحسين التجزئة. بهذه الطريقة سيقوم البناء النهائي باستيراد القواميس المستخدمة فقط. ستظل جميع عمليات الاستيراد كاستيرادات ثابتة لتجنب المعالجة غير المتزامنة عند تحميل القواميس.
|
|
501
|
+
- _ملاحظة_: سيقوم Intlayer باستبدال جميع استدعاءات `useIntlayer` بالوضع المحدد بواسطة خيار `importMode` و `getIntlayer` بـ `getDictionary`.
|
|
502
|
+
- _ملاحظة_: تعتمد هذه الخيارات على إضافات `@intlayer/babel` و `@intlayer/swc`.
|
|
504
503
|
- _ملاحظة_: تأكد من أن جميع المفاتيح معلنة بشكل ثابت في استدعاءات `useIntlayer`. مثال: `useIntlayer('navbar')`.
|
|
505
504
|
|
|
506
|
-
- **
|
|
507
|
-
|
|
508
|
-
- _النوع_: `
|
|
509
|
-
- _القيمة الافتراضية_: `
|
|
510
|
-
- _الوصف_: يتحكم في
|
|
511
|
-
- _مثال_: `
|
|
512
|
-
- _ملاحظة_:
|
|
513
|
-
|
|
514
|
-
|
|
505
|
+
- **importMode**:
|
|
506
|
+
|
|
507
|
+
- _النوع_: `'static' | 'dynamic' | 'async'`
|
|
508
|
+
- _القيمة الافتراضية_: `'static'`
|
|
509
|
+
- _الوصف_: يتحكم في كيفية استيراد القواميس.
|
|
510
|
+
- _مثال_: `'dynamic'`
|
|
511
|
+
- _ملاحظة_: الأوضاع المتاحة:
|
|
512
|
+
- "static": يتم استيراد القواميس بشكل ثابت. يستبدل `useIntlayer` بـ `useDictionary`.
|
|
513
|
+
- "dynamic": يتم استيراد القواميس ديناميكيًا باستخدام Suspense. يستبدل `useIntlayer` بـ `useDictionaryDynamic`.
|
|
514
|
+
- "async": يتم استيراد القواميس ديناميكيًا بشكل غير متزامن. يستبدل `useIntlayer` بـ `await useDictionaryAsync`.
|
|
515
|
+
- _ملاحظة_: تعتمد الاستيرادات الديناميكية على Suspense وقد تؤثر قليلاً على أداء العرض.
|
|
516
|
+
- _ملاحظة_: إذا تم تعطيلها، سيتم تحميل جميع اللغات مرة واحدة، حتى لو لم يتم استخدامها.
|
|
517
|
+
- _ملاحظة_: تعتمد هذه الخيارات على إضافات `@intlayer/babel` و `@intlayer/swc`.
|
|
518
|
+
- _ملاحظة_: تأكد من أن جميع المفاتيح معلنة بشكل ثابت في استدعاءات `useIntlayer`. مثال: `useIntlayer('navbar')`.
|
|
515
519
|
- _ملاحظة_: سيتم تجاهل هذا الخيار إذا تم تعطيل `optimize`.
|
|
516
|
-
- _ملاحظة_:
|
|
520
|
+
- _ملاحظة_: في معظم الحالات، سيتم استخدام `"dynamic"` للتطبيقات React، `"async"` لتطبيقات Vue.js.
|
|
521
|
+
- _ملاحظة_: لن تؤثر هذه الخيارات على الدوال `getIntlayer`، `getDictionary`، `useDictionary`، `useDictionaryAsync` و `useDictionaryDynamic`.
|
|
517
522
|
|
|
518
523
|
- **traversePattern**:
|
|
519
524
|
- _النوع_: `string[]`
|
|
@@ -103,7 +103,7 @@ const MyComponent = () => {
|
|
|
103
103
|
|
|
104
104
|
في وضع التطوير، يستخدم Intlayer استيرادًا ثابتًا مركزيًا للقواميس لتبسيط تجربة التطوير.
|
|
105
105
|
|
|
106
|
-
بتفعيل الخيار `
|
|
106
|
+
بتفعيل الخيار `importMode = "dynamic"` في [التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md)، سيستخدم Intlayer الاستيراد الديناميكي لتحميل القواميس. هذا الخيار معطل افتراضيًا لتجنب المعالجة غير المتزامنة عند عرض التطبيق.
|
|
107
107
|
|
|
108
108
|
> `@intlayer/babel` متاح افتراضيًا في حزمة `vite-intlayer`،
|
|
109
109
|
|
package/docs/de/configuration.md
CHANGED
|
@@ -59,7 +59,7 @@ const config: IntlayerConfig = {
|
|
|
59
59
|
applicationContext: "This is a test application",
|
|
60
60
|
},
|
|
61
61
|
build: {
|
|
62
|
-
|
|
62
|
+
importMode: "dynamic",
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
65
|
|
|
@@ -88,7 +88,7 @@ const config = {
|
|
|
88
88
|
applicationContext: "This is a test application",
|
|
89
89
|
},
|
|
90
90
|
build: {
|
|
91
|
-
|
|
91
|
+
importMode: "dynamic",
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
@@ -481,11 +481,9 @@ Einstellungen, die steuern, wie Intlayer die Internationalisierung Ihrer Anwendu
|
|
|
481
481
|
|
|
482
482
|
Build-Optionen gelten für die Plugins `@intlayer/babel` und `@intlayer/swc`.
|
|
483
483
|
|
|
484
|
-
> Im Entwicklungsmodus verwendet Intlayer
|
|
484
|
+
> Im Entwicklungsmodus verwendet Intlayer statische Importe für Wörterbücher, um die Entwicklungserfahrung zu vereinfachen.
|
|
485
485
|
|
|
486
|
-
>
|
|
487
|
-
|
|
488
|
-
- **Hinweis**: `@intlayer/babel` ist standardmäßig im `vite-intlayer`-Paket verfügbar, aber `@intlayer/swc` ist im `next-intlayer`-Paket nicht standardmäßig installiert, da SWC-Plugins in Next.js noch experimentell sind.
|
|
486
|
+
> Bei der Optimierung ersetzt Intlayer Wörterbuchaufrufe, um das Chunking zu optimieren, sodass das finale Bundle nur die tatsächlich verwendeten Wörterbücher importiert.
|
|
489
487
|
|
|
490
488
|
#### Eigenschaften
|
|
491
489
|
|
|
@@ -495,21 +493,28 @@ Build-Optionen gelten für die Plugins `@intlayer/babel` und `@intlayer/swc`.
|
|
|
495
493
|
- _Standard_: `process.env.NODE_ENV === 'production'`
|
|
496
494
|
- _Beschreibung_: Steuert, ob der Build optimiert werden soll.
|
|
497
495
|
- _Beispiel_: `true`
|
|
498
|
-
- _Hinweis_:
|
|
499
|
-
- _Hinweis_:
|
|
496
|
+
- _Hinweis_: Wenn aktiviert, ersetzt Intlayer alle Aufrufe von Wörterbüchern, um das Chunking zu optimieren. So importiert das finale Bundle nur die verwendeten Wörterbücher. Alle Importe bleiben als statische Importe, um asynchrone Verarbeitung beim Laden der Wörterbücher zu vermeiden.
|
|
497
|
+
- _Hinweis_: Intlayer ersetzt alle Aufrufe von `useIntlayer` mit dem durch die `importMode`-Option definierten Modus und `getIntlayer` mit `getDictionary`.
|
|
498
|
+
- _Hinweis_: Diese Option basiert auf den Plugins `@intlayer/babel` und `@intlayer/swc`.
|
|
500
499
|
- _Hinweis_: Stellen Sie sicher, dass alle Schlüssel statisch in den `useIntlayer`-Aufrufen deklariert sind, z. B. `useIntlayer('navbar')`.
|
|
501
500
|
|
|
502
|
-
- **
|
|
503
|
-
|
|
504
|
-
- _Typ_: `
|
|
505
|
-
- _Standard_: `
|
|
506
|
-
- _Beschreibung_: Steuert,
|
|
507
|
-
- _Beispiel_: `
|
|
508
|
-
- _Hinweis_:
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
501
|
+
- **importMode**:
|
|
502
|
+
|
|
503
|
+
- _Typ_: `'static' | 'dynamic' | 'async'`
|
|
504
|
+
- _Standard_: `'static'`
|
|
505
|
+
- _Beschreibung_: Steuert, wie Wörterbücher importiert werden.
|
|
506
|
+
- _Beispiel_: `'dynamic'`
|
|
507
|
+
- _Hinweis_: Verfügbare Modi:
|
|
508
|
+
- "static": Wörterbücher werden statisch importiert. Ersetzt `useIntlayer` durch `useDictionary`.
|
|
509
|
+
- "dynamic": Wörterbücher werden dynamisch mit Suspense importiert. Ersetzt `useIntlayer` durch `useDictionaryDynamic`.
|
|
510
|
+
- "async": Wörterbücher werden asynchron dynamisch importiert. Ersetzt `useIntlayer` durch `await useDictionaryAsync`.
|
|
511
|
+
- _Hinweis_: Dynamische Importe basieren auf Suspense und können die Rendering-Leistung leicht beeinträchtigen.
|
|
512
|
+
- _Hinweis_: Wenn deaktiviert, werden alle Locales auf einmal geladen, auch wenn sie nicht verwendet werden.
|
|
513
|
+
- _Hinweis_: Diese Option basiert auf den Plugins `@intlayer/babel` und `@intlayer/swc`.
|
|
512
514
|
- _Hinweis_: Stellen Sie sicher, dass alle Schlüssel statisch in den `useIntlayer`-Aufrufen deklariert sind, z. B. `useIntlayer('navbar')`.
|
|
515
|
+
- _Hinweis_: Diese Option wird ignoriert, wenn `optimize` deaktiviert ist.
|
|
516
|
+
- _Hinweis_: In den meisten Fällen wird `"dynamic"` für React-Anwendungen und `"async"` für Vue.js-Anwendungen verwendet.
|
|
517
|
+
- _Hinweis_: Diese Option beeinträchtigt nicht die Funktionen `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` und `useDictionaryDynamic`.
|
|
513
518
|
|
|
514
519
|
- **traversePattern**:
|
|
515
520
|
- _Typ_: `string[]`
|
|
@@ -103,7 +103,7 @@ Die Babel- und SWC-Plugins funktionieren, indem sie den Abstract Syntax Tree (AS
|
|
|
103
103
|
|
|
104
104
|
Im Entwicklungsmodus verwendet Intlayer einen zentralisierten statischen Import für Wörterbücher, um die Entwicklungserfahrung zu vereinfachen.
|
|
105
105
|
|
|
106
|
-
Durch Aktivieren der Option `
|
|
106
|
+
Durch Aktivieren der Option `importMode = "dynamic"` in der [Konfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md) verwendet Intlayer den dynamischen Import, um die Wörterbücher zu laden. Diese Option ist standardmäßig deaktiviert, um asynchrone Verarbeitung beim Rendern der Anwendung zu vermeiden.
|
|
107
107
|
|
|
108
108
|
> `@intlayer/babel` ist standardmäßig im `vite-intlayer`-Paket enthalten,
|
|
109
109
|
|
package/docs/en/configuration.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-08-13
|
|
3
|
-
updatedAt: 2025-07-
|
|
3
|
+
updatedAt: 2025-07-25
|
|
4
4
|
title: Configuration
|
|
5
5
|
description: Learn how to configure Intlayer for your application. Understand the various settings and options available to customize Intlayer to your needs.
|
|
6
6
|
keywords:
|
|
@@ -59,7 +59,7 @@ const config: IntlayerConfig = {
|
|
|
59
59
|
applicationContext: "This is a test application",
|
|
60
60
|
},
|
|
61
61
|
build: {
|
|
62
|
-
|
|
62
|
+
importMode: "dynamic",
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
65
|
|
|
@@ -88,7 +88,7 @@ const config = {
|
|
|
88
88
|
applicationContext: "This is a test application",
|
|
89
89
|
},
|
|
90
90
|
build: {
|
|
91
|
-
|
|
91
|
+
importMode: "dynamic",
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
@@ -101,11 +101,21 @@ module.exports = config;
|
|
|
101
101
|
"locales": ["en"],
|
|
102
102
|
},
|
|
103
103
|
"content": {
|
|
104
|
-
"
|
|
104
|
+
"contentDir": ["src", "../ui-library"],
|
|
105
105
|
},
|
|
106
106
|
"middleware": {
|
|
107
107
|
"noPrefix": false,
|
|
108
108
|
},
|
|
109
|
+
"editor": {
|
|
110
|
+
"applicationURL": "https://example.com",
|
|
111
|
+
},
|
|
112
|
+
"ai": {
|
|
113
|
+
"apiKey": "XXXX",
|
|
114
|
+
"applicationContext": "This is a test application",
|
|
115
|
+
},
|
|
116
|
+
"build": {
|
|
117
|
+
"importMode": "dynamic",
|
|
118
|
+
},
|
|
109
119
|
}
|
|
110
120
|
```
|
|
111
121
|
|
|
@@ -483,11 +493,9 @@ Settings that control how Intlayer optimizes and builds your application's inter
|
|
|
483
493
|
|
|
484
494
|
Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
485
495
|
|
|
486
|
-
> In development mode, Intlayer
|
|
496
|
+
> In development mode, Intlayer uses static imports for dictionaries to simplify the development experience.
|
|
487
497
|
|
|
488
|
-
>
|
|
489
|
-
|
|
490
|
-
- **Note**: `@intlayer/babel` is available by default on `vite-intlayer` package, but `@intlayer/swc` is not installed by default on `next-intlayer` package as SWC plugins are still experimental on Next.js.
|
|
498
|
+
> When optimized, Intlayer will replace dictionary calls to optimize chunking, so the final bundle only imports dictionaries that are actually used.
|
|
491
499
|
|
|
492
500
|
#### Properties
|
|
493
501
|
|
|
@@ -497,21 +505,28 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
|
497
505
|
- _Default_: `process.env.NODE_ENV === 'production'`
|
|
498
506
|
- _Description_: Controls whether the build should be optimized.
|
|
499
507
|
- _Example_: `true`
|
|
500
|
-
- _Note_:
|
|
501
|
-
- _Note_:
|
|
508
|
+
- _Note_: When enabled, Intlayer will replace all calls of dictionaries to optimize chunking. That way the final bundle will import only the dictionaries that are used. All imports will stay as static import to avoid async processing when loading the dictionaries.
|
|
509
|
+
- _Note_: Intlayer will replace all calls of `useIntlayer` with the defined mode by the `importMode` option and `getIntlayer` with `getDictionary`.
|
|
510
|
+
- _Note_: This option relies on the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
502
511
|
- _Note_: Ensure all keys are declared statically in the `useIntlayer` calls. e.g. `useIntlayer('navbar')`.
|
|
503
512
|
|
|
504
|
-
- **
|
|
505
|
-
|
|
506
|
-
- _Type_: `
|
|
507
|
-
- _Default_: `
|
|
508
|
-
- _Description_: Controls
|
|
509
|
-
- _Example_: `
|
|
510
|
-
- _Note_:
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
513
|
+
- **importMode**:
|
|
514
|
+
|
|
515
|
+
- _Type_: `'static' | 'dynamic' | 'async'`
|
|
516
|
+
- _Default_: `'static'`
|
|
517
|
+
- _Description_: Controls how dictionaries are imported.
|
|
518
|
+
- _Example_: `'dynamic'`
|
|
519
|
+
- _Note_: Available modes:
|
|
520
|
+
- "static": Dictionaries are imported statically. Replaces `useIntlayer` with `useDictionary`.
|
|
521
|
+
- "dynamic": Dictionaries are imported dynamically using Suspense. Replaces `useIntlayer` with `useDictionaryDynamic`.
|
|
522
|
+
- "async": Dictionaries are imported dynamically asynchronously. Replaces `useIntlayer` with `await useDictionaryAsync`.
|
|
523
|
+
- _Note_: Dynamic imports rely on Suspense and may slightly impact rendering performance.
|
|
524
|
+
- _Note_: If disabled all locales will be loaded at once, even if they are not used.
|
|
525
|
+
- _Note_: This option relies on the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
514
526
|
- _Note_: Ensure all keys are declared statically in the `useIntlayer` calls. e.g. `useIntlayer('navbar')`.
|
|
527
|
+
- _Note_: This option will be ignored if `optimize` is disabled.
|
|
528
|
+
- _Note_: In most cases, `"dynamic"` will be used for React applications, `"async"` for Vue.js applications.
|
|
529
|
+
- _Note_: This option will not impact the `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` and `useDictionaryDynamic` functions.
|
|
515
530
|
|
|
516
531
|
- **traversePattern**:
|
|
517
532
|
- _Type_: `string[]`
|
|
@@ -524,8 +539,8 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
|
524
539
|
|
|
525
540
|
## Doc History
|
|
526
541
|
|
|
527
|
-
| Version | Date | Changes
|
|
528
|
-
| ------- | ---------- |
|
|
529
|
-
| 5.6.
|
|
530
|
-
| 5.
|
|
531
|
-
| 5.5.
|
|
542
|
+
| Version | Date | Changes |
|
|
543
|
+
| ------- | ---------- | -------------------------------------------------------- |
|
|
544
|
+
| 5.6.1 | 2025-07-25 | Replace `activateDynamicImport` with `importMode` option |
|
|
545
|
+
| 5.6.0 | 2025-07-13 | Change default contentDir from `['src']` to `['.']` |
|
|
546
|
+
| 5.5.11 | 2025-06-29 | Add `docs` commands |
|
|
@@ -106,7 +106,7 @@ The Babel and SWC plugins work by analyzing your application's Abstract Syntax T
|
|
|
106
106
|
|
|
107
107
|
In development mode, Intlayer uses a centralized static import for dictionaries to simplify the development experience.
|
|
108
108
|
|
|
109
|
-
By activating the option `
|
|
109
|
+
By activating the option `importMode = "dynamic"` in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md), Intlayer will use the dynamic import to load the dictionaries. This option is disabled by default to avoid async processing when rendering the application.
|
|
110
110
|
|
|
111
111
|
> `@intlayer/babel` is available by default on `vite-intlayer` package,
|
|
112
112
|
|
|
@@ -59,7 +59,7 @@ const config: IntlayerConfig = {
|
|
|
59
59
|
applicationContext: "This is a test application",
|
|
60
60
|
},
|
|
61
61
|
build: {
|
|
62
|
-
|
|
62
|
+
importMode: "dynamic",
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
65
|
|
|
@@ -88,7 +88,7 @@ const config = {
|
|
|
88
88
|
applicationContext: "This is a test application",
|
|
89
89
|
},
|
|
90
90
|
build: {
|
|
91
|
-
|
|
91
|
+
importMode: "dynamic",
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
@@ -481,11 +481,9 @@ Settings that control how Intlayer optimises and builds your application's inter
|
|
|
481
481
|
|
|
482
482
|
Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
483
483
|
|
|
484
|
-
> In development mode, Intlayer uses
|
|
484
|
+
> In development mode, Intlayer uses static imports for dictionaries to simplify the development experience.
|
|
485
485
|
|
|
486
|
-
>
|
|
487
|
-
|
|
488
|
-
- **Note**: `@intlayer/babel` is available by default on `vite-intlayer` package, but `@intlayer/swc` is not installed by default on `next-intlayer` package as SWC plugins are still experimental on Next.js.
|
|
486
|
+
> When optimised, Intlayer will replace dictionary calls to optimise chunking, so the final bundle only imports dictionaries that are actually used.
|
|
489
487
|
|
|
490
488
|
#### Properties
|
|
491
489
|
|
|
@@ -495,21 +493,28 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
|
495
493
|
- _Default_: `process.env.NODE_ENV === 'production'`
|
|
496
494
|
- _Description_: Controls whether the build should be optimised.
|
|
497
495
|
- _Example_: `true`
|
|
498
|
-
- _Note_:
|
|
499
|
-
- _Note_:
|
|
496
|
+
- _Note_: When enabled, Intlayer will replace all calls of dictionaries to optimise chunking. That way the final bundle will import only the dictionaries that are used. All imports will stay as static import to avoid async processing when loading the dictionaries.
|
|
497
|
+
- _Note_: Intlayer will replace all calls of `useIntlayer` with the defined mode by the `importMode` option and `getIntlayer` with `getDictionary`.
|
|
498
|
+
- _Note_: This option relies on the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
500
499
|
- _Note_: Ensure all keys are declared statically in the `useIntlayer` calls. e.g. `useIntlayer('navbar')`.
|
|
501
500
|
|
|
502
|
-
- **
|
|
503
|
-
|
|
504
|
-
- _Type_: `
|
|
505
|
-
- _Default_: `
|
|
506
|
-
- _Description_: Controls
|
|
507
|
-
- _Example_: `
|
|
508
|
-
- _Note_:
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
501
|
+
- **importMode**:
|
|
502
|
+
|
|
503
|
+
- _Type_: `'static' | 'dynamic' | 'async'`
|
|
504
|
+
- _Default_: `'static'`
|
|
505
|
+
- _Description_: Controls how dictionaries are imported.
|
|
506
|
+
- _Example_: `'dynamic'`
|
|
507
|
+
- _Note_: Available modes:
|
|
508
|
+
- "static": Dictionaries are imported statically. Replaces `useIntlayer` with `useDictionary`.
|
|
509
|
+
- "dynamic": Dictionaries are imported dynamically using Suspense. Replaces `useIntlayer` with `useDictionaryDynamic`.
|
|
510
|
+
- "async": Dictionaries are imported dynamically asynchronously. Replaces `useIntlayer` with `await useDictionaryAsync`.
|
|
511
|
+
- _Note_: Dynamic imports rely on Suspense and may slightly impact rendering performance.
|
|
512
|
+
- _Note_: If disabled all locales will be loaded at once, even if they are not used.
|
|
513
|
+
- _Note_: This option relies on the `@intlayer/babel` and `@intlayer/swc` plugins.
|
|
512
514
|
- _Note_: Ensure all keys are declared statically in the `useIntlayer` calls. e.g. `useIntlayer('navbar')`.
|
|
515
|
+
- _Note_: This option will be ignored if `optimize` is disabled.
|
|
516
|
+
- _Note_: In most cases, `"dynamic"` will be used for React applications, `"async"` for Vue.js applications.
|
|
517
|
+
- _Note_: This option will not impact the `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` and `useDictionaryDynamic` functions.
|
|
513
518
|
|
|
514
519
|
- **traversePattern**:
|
|
515
520
|
- _Type_: `string[]`
|
|
@@ -103,7 +103,7 @@ The Babel and SWC plugins work by analysing your application's Abstract Syntax T
|
|
|
103
103
|
|
|
104
104
|
In development mode, Intlayer uses a centralised static import for dictionaries to simplify the development experience.
|
|
105
105
|
|
|
106
|
-
By activating the option `
|
|
106
|
+
By activating the option `importMode = "dynamic"` in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md), Intlayer will use the dynamic import to load the dictionaries. This option is disabled by default to avoid async processing when rendering the application.
|
|
107
107
|
|
|
108
108
|
> `@intlayer/babel` is available by default on the `vite-intlayer` package,
|
|
109
109
|
|
package/docs/es/configuration.md
CHANGED
|
@@ -59,7 +59,7 @@ const config: IntlayerConfig = {
|
|
|
59
59
|
applicationContext: "This is a test application",
|
|
60
60
|
},
|
|
61
61
|
build: {
|
|
62
|
-
|
|
62
|
+
importMode: "dynamic",
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
65
|
|
|
@@ -88,7 +88,7 @@ const config = {
|
|
|
88
88
|
applicationContext: "This is a test application",
|
|
89
89
|
},
|
|
90
90
|
build: {
|
|
91
|
-
|
|
91
|
+
importMode: "dynamic",
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
@@ -480,11 +480,9 @@ Ajustes que controlan cómo Intlayer optimiza y compila la internacionalización
|
|
|
480
480
|
|
|
481
481
|
Las opciones de compilación se aplican a los plugins `@intlayer/babel` y `@intlayer/swc`.
|
|
482
482
|
|
|
483
|
-
> En modo desarrollo, Intlayer utiliza
|
|
483
|
+
> En modo desarrollo, Intlayer utiliza importaciones estáticas para los diccionarios para simplificar la experiencia de desarrollo.
|
|
484
484
|
|
|
485
|
-
> Al optimizar
|
|
486
|
-
|
|
487
|
-
- **Nota**: `@intlayer/babel` está disponible por defecto en el paquete `vite-intlayer`, pero `@intlayer/swc` no está instalado por defecto en el paquete `next-intlayer` ya que los plugins SWC aún son experimentales en Next.js.
|
|
485
|
+
> Al optimizar, Intlayer reemplazará las llamadas a los diccionarios para optimizar el chunking, de modo que el bundle final solo importe los diccionarios que realmente se utilizan.
|
|
488
486
|
|
|
489
487
|
#### Propiedades
|
|
490
488
|
|
|
@@ -494,21 +492,28 @@ Las opciones de compilación se aplican a los plugins `@intlayer/babel` y `@intl
|
|
|
494
492
|
- _Valor por defecto_: `process.env.NODE_ENV === 'production'`
|
|
495
493
|
- _Descripción_: Controla si la compilación debe ser optimizada.
|
|
496
494
|
- _Ejemplo_: `true`
|
|
497
|
-
- _Nota_:
|
|
498
|
-
- _Nota_:
|
|
495
|
+
- _Nota_: Cuando está habilitado, Intlayer reemplazará todas las llamadas de diccionarios para optimizar el chunking. De esta manera, el bundle final solo importará los diccionarios que se utilizan. Todas las importaciones permanecerán como importaciones estáticas para evitar el procesamiento asíncrono al cargar los diccionarios.
|
|
496
|
+
- _Nota_: Intlayer reemplazará todas las llamadas de `useIntlayer` con el modo definido por la opción `importMode` y `getIntlayer` con `getDictionary`.
|
|
497
|
+
- _Nota_: Esta opción se basa en los plugins `@intlayer/babel` y `@intlayer/swc`.
|
|
499
498
|
- _Nota_: Asegúrate de que todas las claves estén declaradas estáticamente en las llamadas `useIntlayer`. por ejemplo: `useIntlayer('navbar')`.
|
|
500
499
|
|
|
501
|
-
- **
|
|
502
|
-
|
|
503
|
-
- _Tipo_: `
|
|
504
|
-
- _Valor por defecto_: `
|
|
505
|
-
- _Descripción_: Controla
|
|
506
|
-
- _Ejemplo_: `
|
|
507
|
-
- _Nota_:
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
500
|
+
- **importMode**:
|
|
501
|
+
|
|
502
|
+
- _Tipo_: `'static' | 'dynamic' | 'async'`
|
|
503
|
+
- _Valor por defecto_: `'static'`
|
|
504
|
+
- _Descripción_: Controla cómo se importan los diccionarios.
|
|
505
|
+
- _Ejemplo_: `'dynamic'`
|
|
506
|
+
- _Nota_: Modos disponibles:
|
|
507
|
+
- "static": Los diccionarios se importan estáticamente. Reemplaza `useIntlayer` con `useDictionary`.
|
|
508
|
+
- "dynamic": Los diccionarios se importan dinámicamente usando Suspense. Reemplaza `useIntlayer` con `useDictionaryDynamic`.
|
|
509
|
+
- "async": Los diccionarios se importan dinámicamente de forma asíncrona. Reemplaza `useIntlayer` con `await useDictionaryAsync`.
|
|
510
|
+
- _Nota_: Las importaciones dinámicas dependen de Suspense y pueden afectar ligeramente el rendimiento del renderizado.
|
|
511
|
+
- _Nota_: Si está deshabilitado, todos los idiomas se cargarán a la vez, incluso si no se utilizan.
|
|
512
|
+
- _Nota_: Esta opción se basa en los plugins `@intlayer/babel` y `@intlayer/swc`.
|
|
511
513
|
- _Nota_: Asegúrate de que todas las claves estén declaradas estáticamente en las llamadas `useIntlayer`. por ejemplo: `useIntlayer('navbar')`.
|
|
514
|
+
- _Nota_: Esta opción será ignorada si `optimize` está deshabilitado.
|
|
515
|
+
- _Nota_: En la mayoría de los casos, `"dynamic"` se usará para aplicaciones React, `"async"` para aplicaciones Vue.js.
|
|
516
|
+
- _Nota_: Esta opción no afectará las funciones `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` y `useDictionaryDynamic`.
|
|
512
517
|
|
|
513
518
|
- **traversePattern**:
|
|
514
519
|
- _Tipo_: `string[]`
|
|
@@ -521,4 +526,8 @@ Las opciones de compilación se aplican a los plugins `@intlayer/babel` y `@intl
|
|
|
521
526
|
|
|
522
527
|
## Historial de la documentación
|
|
523
528
|
|
|
524
|
-
|
|
529
|
+
| Versión | Fecha | Cambios |
|
|
530
|
+
| ------- | ---------- | --------------------------------------------------------------- |
|
|
531
|
+
| 5.6.1 | 2025-07-25 | Reemplazo de `activateDynamicImport` con la opción `importMode` |
|
|
532
|
+
| 5.6.0 | 2025-07-13 | Cambio del contentDir predeterminado a `['.']` |
|
|
533
|
+
| 5.5.11 | 2025-06-29 | Añadidos comandos `docs` |
|
|
@@ -104,7 +104,7 @@ Los plugins de Babel y SWC funcionan analizando el Árbol de Sintaxis Abstracta
|
|
|
104
104
|
|
|
105
105
|
En modo de desarrollo, Intlayer utiliza una importación estática centralizada para los diccionarios para simplificar la experiencia de desarrollo.
|
|
106
106
|
|
|
107
|
-
Al activar la opción `
|
|
107
|
+
Al activar la opción `importMode = "dynamic"` en la [configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md), Intlayer usará la importación dinámica para cargar los diccionarios. Esta opción está desactivada por defecto para evitar el procesamiento asíncrono al renderizar la aplicación.
|
|
108
108
|
|
|
109
109
|
> `@intlayer/babel` está disponible por defecto en el paquete `vite-intlayer`,
|
|
110
110
|
|
package/docs/fr/configuration.md
CHANGED
|
@@ -59,7 +59,7 @@ const config: IntlayerConfig = {
|
|
|
59
59
|
applicationContext: "Ceci est une application de test", // Contexte de l'application
|
|
60
60
|
},
|
|
61
61
|
build: {
|
|
62
|
-
|
|
62
|
+
importMode: "dynamic",
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
65
|
|
|
@@ -88,7 +88,7 @@ const config = {
|
|
|
88
88
|
applicationContext: "Ceci est une application de test", // Contexte de l'application
|
|
89
89
|
},
|
|
90
90
|
build: {
|
|
91
|
-
|
|
91
|
+
importMode: "dynamic",
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
@@ -499,17 +499,23 @@ Les options de build s'appliquent aux plugins `@intlayer/babel` et `@intlayer/sw
|
|
|
499
499
|
- _Remarque_ : Lorsqu’il est activé, Intlayer optimisera le découpage des dictionnaires en remplaçant tous les appels à `useIntlayer` par `useDictionary` et `getIntlayer` par `getDictionary`.
|
|
500
500
|
- _Remarque_ : Assurez-vous que toutes les clés soient déclarées statiquement dans les appels à `useIntlayer`. Par exemple : `useIntlayer('navbar')`.
|
|
501
501
|
|
|
502
|
-
- **
|
|
503
|
-
|
|
504
|
-
- _Type_ : `
|
|
505
|
-
- _Par défaut_ : `
|
|
506
|
-
- _Description_ : Contrôle
|
|
507
|
-
- _Exemple_ : `
|
|
508
|
-
- _Remarque_ :
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
502
|
+
- **importMode** :
|
|
503
|
+
|
|
504
|
+
- _Type_ : `'static' | 'dynamic' | 'async'`
|
|
505
|
+
- _Par défaut_ : `'static'`
|
|
506
|
+
- _Description_ : Contrôle comment les dictionnaires sont importés.
|
|
507
|
+
- _Exemple_ : `'dynamic'`
|
|
508
|
+
- _Remarque_ : Modes disponibles :
|
|
509
|
+
- "static" : Les dictionnaires sont importés statiquement. Remplace `useIntlayer` par `useDictionary`.
|
|
510
|
+
- "dynamic" : Les dictionnaires sont importés dynamiquement en utilisant Suspense. Remplace `useIntlayer` par `useDictionaryDynamic`.
|
|
511
|
+
- "async" : Les dictionnaires sont importés dynamiquement de manière asynchrone. Remplace `useIntlayer` par `await useDictionaryAsync`.
|
|
512
|
+
- _Remarque_ : Les imports dynamiques reposent sur Suspense et peuvent légèrement impacter les performances de rendu.
|
|
513
|
+
- _Remarque_ : Si désactivé, toutes les locales seront chargées en même temps, même si elles ne sont pas utilisées.
|
|
514
|
+
- _Remarque_ : Cette option s'appuie sur les plugins `@intlayer/babel` et `@intlayer/swc`.
|
|
512
515
|
- _Remarque_ : Assurez-vous que toutes les clés soient déclarées statiquement dans les appels à `useIntlayer`. Par exemple : `useIntlayer('navbar')`.
|
|
516
|
+
- _Remarque_ : Cette option sera ignorée si `optimize` est désactivé.
|
|
517
|
+
- _Remarque_ : Dans la plupart des cas, `"dynamic"` sera utilisé pour les applications React, `"async"` pour les applications Vue.js.
|
|
518
|
+
- _Remarque_ : Cette option n'impactera pas les fonctions `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` et `useDictionaryDynamic`.
|
|
513
519
|
|
|
514
520
|
- **traversePattern** :
|
|
515
521
|
- _Type_ : `string[]`
|
|
@@ -522,4 +528,8 @@ Les options de build s'appliquent aux plugins `@intlayer/babel` et `@intlayer/sw
|
|
|
522
528
|
|
|
523
529
|
## Historique de la documentation
|
|
524
530
|
|
|
525
|
-
|
|
531
|
+
| Version | Date | Changements |
|
|
532
|
+
| ------- | ---------- | ----------------------------------------------------------------- |
|
|
533
|
+
| 5.6.1 | 2025-07-25 | Remplacement de `activateDynamicImport` par l'option `importMode` |
|
|
534
|
+
| 5.6.0 | 2025-07-13 | Changement du contentDir par défaut vers `['.']` |
|
|
535
|
+
| 5.5.11 | 2025-06-29 | Ajout des commandes `docs` |
|
|
@@ -105,7 +105,7 @@ Les plugins Babel et SWC fonctionnent en analysant l'arbre de syntaxe abstraite
|
|
|
105
105
|
|
|
106
106
|
En mode développement, Intlayer utilise une importation statique centralisée pour les dictionnaires afin de simplifier l'expérience de développement.
|
|
107
107
|
|
|
108
|
-
En activant l'option `
|
|
108
|
+
En activant l'option `importMode = "dynamic"` dans la [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md), Intlayer utilisera l'importation dynamique pour charger les dictionnaires. Cette option est désactivée par défaut pour éviter le traitement asynchrone lors du rendu de l'application.
|
|
109
109
|
|
|
110
110
|
> `@intlayer/babel` est disponible par défaut dans le package `vite-intlayer`,
|
|
111
111
|
|