@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

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 للوصول المباشر إلى الخصائص"
@@ -37,7 +40,7 @@ author: aymericzip
 <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"
 />
@@ -56,88 +59,64 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-react-native-template) على GitHub.
+## جدول المحتويات
+
+<TOC/>
 
 ## لماذا Intlayer على البدائل؟
 
 بالمقارنة مع الحلول الرئيسية مثل `react-native-localize` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-** تغطية رد الفعل الأصلية الكاملة **
+<AccordionGroup>
 
-تم تحسين Intlayer للعمل بشكل مثالي مع React Native وExpo من خلال تقديم **نطاق المحتوى على مستوى المكونات**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n) في تطبيقات الأجهزة المحمولة.
+<Accordion header="تغطية React Native الكاملة">
 
-** الصيانة **
+تم تحسين Intlayer للعمل بشكل مثالي مع React Native وExpo من خلال تقديم **نطاق المحتوى على مستوى المكونات**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n) في تطبيقات الأجهزة المحمولة.
 
-يؤدي تحديد نطاق محتوى تطبيقك ** إلى تسهيل الصيانة ** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
+</Accordion>
 
-** وكيل الذكاء الاصطناعي **
+<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) أكثر سلاسة للذكاء الاصطناعي وكلاء.
+يؤدي تحديد نطاق محتوى تطبيقك إلى **تسهيل الصيانة** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
 
-**الأتمتة**
+</Accordion>
 
-استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا **مترجمًا** لأتمتة استخراج المحتوى، بالإضافة إلى [منصة ويب](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) للمساعدة في **الترجمة في الخلفية**.
+<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) أكثر سلاسة للذكاء الاصطناعي وكلاء.
 
-يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.
+</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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
-
-**حجم البندل**
+استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا **مترجمًا** لأتمتة استخراج المحتوى، بالإضافة إلى [منصة ويب](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) للمساعدة في **الترجمة في الخلفية**.
 
-بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل حجم البندل وعرض الأحجام بنسبة تصل إلى 50%**.
+</Accordion>
 
-<Steps>
-
-<Step number={1} title="تثبيت التبعيات">
+<Accordion header="الأداء">
 
-راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-react-native-template) على GitHub.
-
-من مشروع React Native الخاص بك، قم بتثبيت الحزم التالية:
+يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.
 
-```bash packageManager='npm'
-npm تثبيت طبقة رد فعل طبقة داخلية
-تثبيت npm --save-dev رد الفعل الأصلي-inlayer
-npx الطبقة البينية init
-```
+</Accordion>
 
-```bash packageManager="pnpm"
-أضف pnpm طبقة تفاعلية داخلية
-إضافة pnpm --save-dev رد الفعل الأصلي-inlayer
-pnpm intlayer init
-```
+<Accordion header="التحجيم مع غير المطورين">
 
-```bash packageManager = "غزل"
-الغزل إضافة طبقة داخلية رد فعل طبقة داخلية
-إضافة الغزل --save-dev رد الفعل الأصلي-inlayer
-الغزل الضمني الحرف الأول
-```
+أكثر من مجرد حل 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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
-```باش باكدج ماناجر = "كعكة""
-كعكة إضافة طبقة داخلية رد فعل طبقة داخلية
-إضافة كعكة --dev رد الفعل الأصلي-inlayer
-كعكة x الطبقة البينية init
-```
+</Accordion>
 
-### الحزم
+<Accordion header="حجم الحزمة">
 
-- **الطبقة الداخلية**  
-  مجموعة أدوات i18n الأساسية للتكوين ومحتوى القاموس وإنشاء الأنواع وأوامر CLI.
+بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل حجم الحزمة وأحجام العرض بنسبة تصل إلى 50%**.
 
-- **رد الفعل الضمني**  
-  تكامل React الذي يوفر موفري السياق وخطافات React التي ستستخدمها في React Native للحصول على اللغات وتبديلها.
+</Accordion>
+</AccordionGroup>
 
-- **رد الفعل الأصلي-الطبقة الداخلية**  
-  تكامل React Native الذي يوفر البرنامج الإضافي Metro لدمج Intlayer مع مجمّع React Native.
-
----
+<Steps>
 
-</Step>
+<Step number={1} title="تثبيت التبعيات">
 
-<Step number={2} title="تثبيت التبعيات">
+راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-react-native-template) على GitHub.
 
 من مشروع React Native الخاص بك، قم بتثبيت الحزم التالية:
 
@@ -162,23 +141,19 @@ bunx intlayer-cli init --interactive
 > سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
+bun add intlayer react-native-intlayer
 ```
 
 ### الحزم
@@ -186,17 +161,14 @@ bun add --dev react-native-intlayer
 - **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.
 
 ---
 
 </Step>
 
-<Step number={3} title="إنشاء تكوين Intlayer">
+<Step number={2} title="إنشاء تكوين Intlayer">
 
 في جذر مشروعك (أو في أي مكان مناسب)، أنشئ ملف **تكوين Intlayer**. قد يبدو كالتالي:
 
@@ -230,7 +202,7 @@ export default config;
 
 </Step>
 
-<Step number={4} title="إضافة ملحق Metro">
+<Step number={3} title="إضافة ملحق Metro">
 
 Metro هو أداة تجميع (bundler) لـ React Native. وهو أداة التجميع الافتراضية لمشاريع React Native التي تم إنشاؤها باستخدام الأمر `react-native init`. لاستخدام Intlayer مع Metro، تحتاج إلى إضافة الملحق إلى ملف `metro.config.js` الخاص بك:
 
@@ -245,13 +217,18 @@ module.exports = (async () => {
 })();
 ```
 
+> ملاحظة: `configMetroIntlayer` هي دالة غير متزامنة (promise). استخدم `configMetroIntlayerSync` بدلاً من ذلك إذا كنت تريد استخدامها بشكل متزامن، أو تجنب IFFE (التعبير الدالي المستدعى فورًا).
+> ملاحظة: `configMetroIntlayerSync` لا تسمح ببناء قواميس Intlayer عند بدء تشغيل الخادم
+
 </Step>
 
-<Step number={5} title="إضافة موفر Intlayer">
+<Step number={4} title="إضافة موفّر Intlayer">
 
-للحفاظ على مزامنة لغة المستخدم في جميع أنحاء تطبيقك، تحتاج إلى تغليف المكون الجذر الخاص بك بمكون `IntlayerProvider` من `react-intlayer-native`.
+للحفاظ على مزامنة لغة المستخدم في جميع أنحاء تطبيقك، تحتاج إلى تغليف المكون الجذر الخاص بك بمكون `IntlayerProvider` من `react-native-intlayer`.
 
-> تأكد من استخدام الموفر من `react-native-intlayer` بدلاً من `react-intlayer`. يتضمن التصدير من `react-native-intlayer` بدائل (polyfills) لواجهة برمجة التطبيقات للويب.
+> قم دائمًا بالاستيراد من `react-native-intlayer`. يتضمن `IntlayerProvider` الخاص به polyfills لواجهة برمجة تطبيقات الويب المستخدمة بواسطة Intlayer، والحزمة تُعيد تصدير جميع الخطافات والأدوات من `react-intlayer`.
+
+بالإضافة إلى ذلك، تحتاج إلى إضافة دالة `intlayerPolyfill` إلى ملف `index.js` الخاص بك لضمان عمل Intlayer بشكل صحيح.
 
 ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
@@ -276,7 +253,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="إعلان المحتوى الخاص بك">
+<Step number={5} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء ملفات **إعلان المحتوى** في أي مكان داخل مشروعك (عادةً داخل مجلد `src/`)، باستخدام أي من صيغ الامتداد التي يدعمها Intlayer:
 
@@ -291,6 +268,14 @@ export default RootLayout;
 - `.content.cjx`
 - إلخ.
 
+> **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"]}
@@ -339,7 +324,7 @@ export default homeScreenContent;
 
 </Step>
 
-<Step number={7} title="استخدام Intlayer في مكوناتك">
+<Step number={6} title="استخدام Intlayer في مكوناتك">
 
 استخدم الخطاف `useIntlayer` في المكونات الفرعية للحصول على المحتوى المحلي.
 
@@ -347,7 +332,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";
@@ -394,7 +379,7 @@ export default HomeScreen;
 
 </Step>
 
-<Step number={8} title="تغيير لغة التطبيق">
+<Step number={7} title="تغيير لغة التطبيق" isOptional={true}>
 
 لتغيير اللغة من داخل مكوناتك، يمكنك استخدام دالة `setLocale` من الخطاف `useLocale`:
 
@@ -402,7 +387,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();
@@ -479,7 +464,7 @@ const styles = StyleSheet.create({
 لتجنب الالتزام بالملفات التي تم إنشاؤها تلقائيًا بواسطة Intlayer، أضف ما يلي إلى ملف `.gitignore` الخاص بك:
 
 ```bash
-#  تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
+# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
 .intlayer
 ```
 
@@ -511,3 +496,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:
@@ -711,100 +711,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)

package/docs/ar/intlayer_with_react_router_v7_fs_routes.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:
@@ -146,6 +146,25 @@ bun add vite-intlayer --dev
 
 </Steps>
 
+#### بنية الملفات
+
+```bash
+app/
+├── root.tsx                         # Layout wrapper for locale routes
+└──routes/
+    ├── ($locale)._index.tsx         # Home page (/, /es, etc.)
+    ├── ($locale)._index.content.ts  # Home page content
+    ├── ($locale).about.tsx          # About page (/about, /es/about, etc.)
+    └── ($locale).about.content.ts   # About page content
+```
+
+اتفاقيات التسمية:
+
+- `($locale)` - مقطع ديناميكي اختياري لمعامل اللغة
+- `_layout` - مسار التخطيط الذي يغلف المسارات الفرعية
+- `_index` - مسار الفهرس (يتم عرضه في مسار العنصر الأب)
+- `.` (نقطة) - فاصل مقاطع المسار (مثال: `($locale).about` → `/:locale?/about`)
+
 ## دليل خطوة بخطوة لإعداد Intlayer في تطبيق React Router v7 مع مسارات قائمة على نظام الملفات
 
 <Tabs defaultTab="video">
@@ -657,101 +676,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/)
-- [React Router fs-routes Documentation](https://reactrouter.com/how-to/file-route-conventions)
-- [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 using file-system based routing 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)