@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/ar/intlayer_with_nuxt.md

@@ -27,6 +27,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "بدء السجل"
+author: aymericzip
 ---
 
 # ترجمة موقع Nuxt و Vue الخاص بك باستخدام Intlayer | التدويل (i18n)
@@ -109,28 +110,44 @@ history:
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> علامة `--interactive` اختيارية. استخدم `intlayer-cli init` إذا كنت وكيل ذكاء اصطناعي.
+
+> سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:
+
 ```bash packageManager="npm"
 npm install intlayer vue-intlayer
 npm install --save-dev nuxt-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer vue-intlayer
 pnpm add --save-dev nuxt-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer vue-intlayer
 yarn add --save-dev nuxt-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer vue-intlayer
 bun add --dev nuxt-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -590,9 +607,7 @@ export default aboutPageContent;
 
 </Step>
 
-</Steps>
-
-### (اختياري) الخطوة 6ب: إنشاء تخطيط مع التنقل
+<Step number="6ب" title="إنشاء تخطيط مع التنقل" isOptional={true}>
 
 تسمح تخطيطات Nuxt بتعريف هيكل مشترك لصفحاتك. قم بإنشاء تخطيط افتراضي يتضمن مفتاح تبديل اللغة والتنقل:
 
@@ -619,6 +634,10 @@ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
 
 مكون `Links` (الموضح أدناه) يضمن أن روابط التنقل الداخلية تتم ترجمتها تلقائيًا.
 
+</Step>
+
+</Steps>
+
 ### تكوين Git
 
 يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب الالتزام بها في مستودع Git الخاص بك.

package/docs/ar/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "تدويل Expo + React Native - الدليل الكامل لترجمة تطبيقك"
 description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Expo + React Native متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "استيراد موفّري السياق والخطافات مباشرةً من react-native-intlayer؛ لم يعد react-intlayer ضروريًا كاعتمادية مباشرة"
   - version: 8.9.0
     date: 2026-05-04
     changes: "تحديث استخدام واجهة برمجة تطبيقات useIntlayer في Solid للوصول المباشر إلى الخصائص"
@@ -26,6 +29,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "بداية التاريخ"
+author: aymericzip
 ---
 
 # ترجم تطبيق Expo و React Native الخاص بك | التدويل (i18n)
@@ -36,7 +40,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -55,109 +59,101 @@ history:
   </Tab>
 </Tabs>
 
-راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-react-native-template) على GitHub.
+## جدول المحتويات
+
+<TOC/>
 
 ## لماذا Intlayer على البدائل؟
 
 بالمقارنة مع الحلول الرئيسية مثل `react-native-localize` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-** تغطية رد الفعل الأصلية الكاملة **
+<AccordionGroup>
+
+<Accordion header="تغطية React Native الكاملة">
 
 تم تحسين Intlayer للعمل بشكل مثالي مع React Native وExpo من خلال تقديم **نطاق المحتوى على مستوى المكونات**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n) في تطبيقات الأجهزة المحمولة.
 
-** الصيانة **
+</Accordion>
+
+<Accordion header="الصيانة">
+
+يؤدي تحديد نطاق محتوى تطبيقك إلى **تسهيل الصيانة** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
+
+</Accordion>
 
-يؤدي تحديد نطاق محتوى تطبيقك ** إلى تسهيل الصيانة ** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
+<Accordion header="وكيل الذكاء الاصطناعي">
 
-** وكيل الذكاء الاصطناعي **
+يؤدي تحديد موقع المحتوى المشترك إلى **تقليل السياق المطلوب** بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل **CLI** لاختبار الترجمات المفقودة،**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**، **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** و**[مهارات الوكيل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.
 
-يؤدي تحديد موقع المحتوى المشترك ** إلى تقليل السياق المطلوب ** بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل **CLI** لاختبار الترجمات المفقودة،**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**، **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** و**[مهارات الوكيل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.
+</Accordion>
 
-**الأتمتة**
+<Accordion header="الأتمتة">
 
 استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا **مترجمًا** لأتمتة استخراج المحتوى، بالإضافة إلى [منصة ويب](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) للمساعدة في **الترجمة في الخلفية**.
 
-**أداء**
+</Accordion>
+
+<Accordion header="الأداء">
 
 يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.
 
-**التحجيم مع عدم وجود مطور**
+</Accordion>
+
+<Accordion header="التحجيم مع غير المطورين">
+
+أكثر من مجرد حل i18n، يوفر Intlayer **[محررًا مرئيًا مستضافًا ذاتيًا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** و**[نظام إدارة محتوى كامل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
+
+</Accordion>
+
+<Accordion header="حجم الحزمة">
 
-أكثر من مجرد حل i18n، يوفر Intlayer **[محررًا مرئيًا] مستضافًا ذاتيًا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** و**[كامل CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
+بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل حجم الحزمة وأحجام العرض بنسبة تصل إلى 50%**.
 
-**حجم البندل**
+</Accordion>
+</AccordionGroup>
 
-بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل حجم البندل وعرض الأحجام بنسبة تصل إلى 50%**.
+<Steps>
 
-## الخطوة 1: تثبيت التبعيات
+<Step number={1} title="تثبيت التبعيات">
 
 راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-react-native-template) على GitHub.
 
 من مشروع React Native الخاص بك، قم بتثبيت الحزم التالية:
 
-```bash packageManager='npm'
-npm تثبيت طبقة رد فعل طبقة داخلية
-تثبيت npm --save-dev رد الفعل الأصلي-inlayer
-npx الطبقة البينية init
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="pnpm"
-أضف pnpm طبقة تفاعلية داخلية
-إضافة pnpm --save-dev رد الفعل الأصلي-inlayer
-pnpm intlayer init
+pnpm dlx intlayer-cli init --interactive
 ```
 
-```bash packageManager = "غزل"
-الغزل إضافة طبقة داخلية رد فعل طبقة داخلية
-إضافة الغزل --save-dev رد الفعل الأصلي-inlayer
-الغزل الضمني الحرف الأول
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
 ```
 
-```باش باكدج ماناجر = "كعكة""
-كعكة إضافة طبقة داخلية رد فعل طبقة داخلية
-إضافة كعكة --dev رد الفعل الأصلي-inlayer
-كعكة x الطبقة البينية init
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
 ```
 
-### الحزم
-
-- **الطبقة الداخلية**  
-  مجموعة أدوات i18n الأساسية للتكوين ومحتوى القاموس وإنشاء الأنواع وأوامر CLI.
-
-- **رد الفعل الضمني**  
-  تكامل React الذي يوفر موفري السياق وخطافات React التي ستستخدمها في React Native للحصول على اللغات وتبديلها.
+> علامة `--interactive` اختيارية. استخدم `intlayer-cli init` إذا كنت وكيل ذكاء اصطناعي.
 
-- **رد الفعل الأصلي-الطبقة الداخلية**  
-  تكامل React Native الذي يوفر البرنامج الإضافي Metro لدمج Intlayer مع مجمّع React Native.
-
----
-
-## الخطوة 1: تثبيت التبعيات
-
-من مشروع React Native الخاص بك، قم بتثبيت الحزم التالية:
+> سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
-npx intlayer init
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
-pnpm intlayer init
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
-yarn intlayer init
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
-bun x intlayer init
+bun add intlayer react-native-intlayer
 ```
 
 ### الحزم
@@ -165,15 +161,14 @@ bun x intlayer init
 - **intlayer**  
   مجموعة أدوات i18n الأساسية للتكوين، محتوى القاموس، توليد الأنواع، وأوامر CLI.
 
-- **react-intlayer**  
-  تكامل React الذي يوفر موفري السياق وReact hooks التي ستستخدمها في React Native للحصول على اللغات وتبديلها.
-
 - **react-native-intlayer**  
-  تكامل React Native الذي يوفر إضافة Metro لدمج Intlayer مع مجمع React Native.
+  تكامل React Native الذي يوفر موفّري السياق وReact hooks التي ستستخدمها للحصول على اللغات وتبديلها، وpolyfills لـ React Native، وإضافة Metro لدمج Intlayer مع مجمع React Native. يُعيد تصدير كل شيء من `react-intlayer`، لذلك تحتاج فقط إلى هذه الحزمة الواحدة في تطبيق React Native.
 
 ---
 
-## الخطوة 2: إنشاء تكوين Intlayer
+</Step>
+
+<Step number={2} title="إنشاء تكوين Intlayer">
 
 في جذر مشروعك (أو في أي مكان مناسب)، أنشئ ملف **تكوين Intlayer**. قد يبدو كالتالي:
 
@@ -205,7 +200,9 @@ export default config;
 - لاحقًا، يمكنك إضافة خيارات أكثر تقدمًا (مثل السجلات، مجلدات المحتوى المخصصة، إلخ).
 - راجع [وثائق تكوين Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md) للمزيد.
 
-## الخطوة 3: إضافة ملحق Metro
+</Step>
+
+<Step number={3} title="إضافة ملحق Metro">
 
 Metro هو أداة تجميع (bundler) لـ React Native. وهو أداة التجميع الافتراضية لمشاريع React Native التي تم إنشاؤها باستخدام الأمر `react-native init`. لاستخدام Intlayer مع Metro، تحتاج إلى إضافة الملحق إلى ملف `metro.config.js` الخاص بك:
 
@@ -220,11 +217,18 @@ module.exports = (async () => {
 })();
 ```
 
-## الخطوة 4: إضافة موفر Intlayer
+> ملاحظة: `configMetroIntlayer` هي دالة غير متزامنة (promise). استخدم `configMetroIntlayerSync` بدلاً من ذلك إذا كنت تريد استخدامها بشكل متزامن، أو تجنب IFFE (التعبير الدالي المستدعى فورًا).
+> ملاحظة: `configMetroIntlayerSync` لا تسمح ببناء قواميس Intlayer عند بدء تشغيل الخادم
+
+</Step>
+
+<Step number={4} title="إضافة موفّر Intlayer">
+
+للحفاظ على مزامنة لغة المستخدم في جميع أنحاء تطبيقك، تحتاج إلى تغليف المكون الجذر الخاص بك بمكون `IntlayerProvider` من `react-native-intlayer`.
 
-للحفاظ على مزامنة لغة المستخدم في جميع أنحاء تطبيقك، تحتاج إلى تغليف المكون الجذر الخاص بك بمكون `IntlayerProvider` من `react-intlayer-native`.
+> قم دائمًا بالاستيراد من `react-native-intlayer`. يتضمن `IntlayerProvider` الخاص به polyfills لواجهة برمجة تطبيقات الويب المستخدمة بواسطة Intlayer، والحزمة تُعيد تصدير جميع الخطافات والأدوات من `react-intlayer`.
 
-> تأكد من استخدام الموفر من `react-native-intlayer` بدلاً من `react-intlayer`. يتضمن التصدير من `react-native-intlayer` بدائل (polyfills) لواجهة برمجة التطبيقات للويب.
+بالإضافة إلى ذلك، تحتاج إلى إضافة دالة `intlayerPolyfill` إلى ملف `index.js` الخاص بك لضمان عمل Intlayer بشكل صحيح.
 
 ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
@@ -247,11 +251,15 @@ const RootLayout: FC = () => {
 export default RootLayout;
 ```
 
-## الخطوة 5: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={5} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء ملفات **إعلان المحتوى** في أي مكان داخل مشروعك (عادةً داخل مجلد `src/`)، باستخدام أي من صيغ الامتداد التي يدعمها Intlayer:
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -259,9 +267,20 @@ export default RootLayout;
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - إلخ.
 
+> **Expo Router (الويب): احتفظ بملفات `.content.*` خارج مجلد `app/`.** يعامل Expo Router كل ملف JavaScript/TypeScript داخل `app/` كمسار. على الويب، يقوم اكتشاف المسار بمسح نظام الملفات مباشرة ولا **يحترم** `resolver.blockList` الخاص بـ Metro، لذلك يتم تسجيل `*.content.ts` الموجود في نفس المكان كمسار. حتى أن ملفًا مثل `app/(tabs)/_layout.content.ts` يتم تحليله كتخطيط (تُقرأ اللاحقة `.content` كلاحقة للمنصة)، مما يتعارض مع `_layout.tsx` الحقيقي ويطرح الخطأ:
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> ضع تصريحاتك في مجلد خارج `app/` (على سبيل المثال `content/` أو `src/content/`). يكتشف Intlayer ملفات `.content.*` في أي مكان في المشروع ويتم الإشارة إلى القواميس من خلال `key` الخاص بها، لذلك لا توجد حاجة لتغيير الاستيرادات. على التطبيقات الأصلية (native)، هذا غير مطلوب (يخفيها `blockList` الخاص بـ Metro بالفعل)، ولكن استخدام مجلد غير `app/` يحافظ على عمل كلتا المنصتين.
+
 مثال (TypeScript مع عقد TSX لـ React Native):
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -308,7 +327,9 @@ export default homeScreenContent;
 
 ---
 
-## الخطوة 4: استخدام Intlayer في مكوناتك
+</Step>
+
+<Step number={6} title="استخدام Intlayer في مكوناتك">
 
 استخدم الخطاف `useIntlayer` في المكونات الفرعية للحصول على المحتوى المحلي.
 
@@ -316,7 +337,7 @@ export default homeScreenContent;
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "react-intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -361,7 +382,9 @@ export default HomeScreen;
 
 ---
 
-## (اختياري) الخطوة 5: تغيير لغة التطبيق
+</Step>
+
+<Step number={7} title="تغيير لغة التطبيق" isOptional={true}>
 
 لتغيير اللغة من داخل مكوناتك، يمكنك استخدام دالة `setLocale` من الخطاف `useLocale`:
 
@@ -369,7 +392,7 @@ export default HomeScreen;
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -414,6 +437,10 @@ const styles = StyleSheet.create({
 
 > راجع [`useLocale` docs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md) لمزيد من التفاصيل.
 
+</Step>
+
+</Steps>
+
 ## تكوين TypeScript (إذا كنت تستخدم TypeScript)
 
 يقوم Intlayer بإنشاء تعريفات النوع في مجلد مخفي (افتراضيًا `.intlayer`) لتحسين الإكمال التلقائي واكتشاف أخطاء الترجمة:
@@ -442,7 +469,7 @@ const styles = StyleSheet.create({
 لتجنب الالتزام بالملفات التي تم إنشاؤها تلقائيًا بواسطة Intlayer، أضف ما يلي إلى ملف `.gitignore` الخاص بك:
 
 ```bash
-#  تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
+# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
 .intlayer
 ```
 
@@ -474,3 +501,31 @@ const styles = StyleSheet.create({
 استمتع ببناء تطبيقات **React Native** الخاصة بك مع دعم كامل للترجمة الدولية (i18n) من خلال **Intlayer**!
 
 ---
+
+### التصحيح
+
+React Native قد يكون أقل استقراراً من React Web، لذلك انتبه جيداً لمحاذاة الإصدارات.
+
+يستهدف Intlayer بشكل أساسي Web Intl API؛ على React Native يجب عليك تضمين polyfills المناسبة.
+
+قائمة التحقق:
+
+- استخدم أحدث إصدارات `intlayer` و `react-native-intlayer`.
+- قم بتفعيل polyfill الخاص بـ Intlayer.
+- إذا كنت تستخدم `getLocaleName` أو أدوات أخرى قائمة على Intl-API، قم باستيراد هذه polyfills مبكراً (على سبيل المثال في `index.js` أو `App.tsx`):
+
+```ts
+import "intl";
+import "@formatjs/intl-getcanonicallocales/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-listformat/polyfill";
+import "@formatjs/intl-numberformat/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-datetimeformat/polyfill";
+```
+
+- تحقق من إعدادات Metro الخاصة بك (resolver aliases و asset plugins و مسارات `tsconfig`) إذا فشل استيراد الوحدات.
+
+---

package/docs/ar/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "تدويل React Router v7 - الدليل الكامل لترجمة تطبيقك"
 description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق React Router v7 متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 keywords:
@@ -36,6 +36,7 @@ history:
   - version: 5.8.2
     date: 2025-09-04
     changes: "أضيف دعم React Router v7"
+author: aymericzip
 ---
 
 # ترجم React Router v7 باستخدام Intlayer | التدويل (i18n)
@@ -88,28 +89,44 @@ history:
 
 قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> علامة `--interactive` اختيارية. استخدم `intlayer-cli init` إذا كنت وكيل ذكاء اصطناعي.
+
+> سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:
+
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -601,6 +618,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='مترجم Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 قم بتحديث `vite.config.ts` لتضمين مكون `intlayerCompiler` الإضافي:
 
 ```ts fileName="vite.config.ts"
@@ -610,7 +629,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // يضيف المكون الإضافي للمترجم
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -694,100 +713,6 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 ---
 
-## Documentation References
-
-- [Intlayer Documentation](https://intlayer.org)
-- [React Router v7 Documentation](https://reactrouter.com/)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
-
-This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
-
-<Steps>
-
-<Step number={11} title="إضافة الوسيط">
-
-يمكنك أيضًا استخدام `intlayerProxy` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
-
-> لاحظ أنه لاستخدام `intlayerProxy` في بيئة الإنتاج، تحتاج إلى نقل حزمة `vite-intlayer` من `devDependencies` إلى `dependencies`.
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayerProxy(), // should be placed first
-    reactRouter(),
-
-    intlayer(),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## تكوين TypeScript
-
-يستخدم Intlayer توسيع الوحدات (module augmentation) للاستفادة من TypeScript وجعل قاعدة الشيفرة الخاصة بك أقوى.
-
-تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع التي تم إنشاؤها تلقائيًا:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... التكوينات الحالية الخاصة بك
-  include: [
-    // ... الملفات المضمنة الحالية الخاصة بك
-    ".intlayer/**/*.ts", // تضمين الأنواع التي تم إنشاؤها تلقائيًا
-  ],
-}
-```
-
----
-
-## تكوين Git
-
-يوصى بتجاهل الملفات التي تم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب الالتزام بها في مستودع Git الخاص بك.
-
-للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف `.gitignore` الخاص بك:
-
-```plaintext fileName=".gitignore"
-# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
-.intlayer
-```
-
----
-
-## إضافة VS Code
-
-لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
-
-[التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-تقدم هذه الإضافة:
-
-- **الإكمال التلقائي** لمفاتيح الترجمة.
-- **الكشف الفوري عن الأخطاء** للترجمات المفقودة.
-- **معاينات داخلية** للمحتوى المترجم.
-- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
-
-لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع [توثيق إضافة Intlayer لـ VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
-## التقدم أكثر
-
-للمضي قدمًا، يمكنك تنفيذ [المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) أو إخراج محتواك باستخدام [نظام إدارة المحتوى (CMS)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md).
-
----
-
 ## مراجع التوثيق
 
 - [توثيق Intlayer](https://intlayer.org)