@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/ar/dictionary/plurial.md

@@ -35,10 +35,82 @@ author: aymericzip
 
 ## متى تستخدم `plural` مقابل `enu`
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## إعداد محتوى الجمع
+
+لإعداد محتوى الجمع في مشروع Intlayer الخاص بك، قم بإنشاء وحدة محتوى تستخدم مساعد `plural`. فئة `other` مطلوبة وتستخدم كبديل عندما لا تحدد اللغة فئة أكثر تحديدًا.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      ar: plural({
+        zero: "لا توجد وظائف شاغرة",
+        one: "وظيفة شاغرة واحدة",
+        two: "وظيفتان شاغرتان",
+        few: "{{count}} وظائف شاغرة",
+        many: "{{count}} وظيفة شاغرة",
+        other: "{{count}} وظيفة شاغرة",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "ar": {
+          "nodeType": "plural",
+          "plural": {
+            "zero": "لا توجد وظائف شاغرة",
+            "one": "وظيفة شاغرة واحدة",
+            "two": "وظيفتان شاغرتان",
+            "few": "{{count}} وظائف شاغرة",
+            "many": "{{count}} وظيفة شاغرة",
+            "other": "{{count}} وظيفة شاغرة"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> الفئات المدعومة هي `zero` و `one` و `two` و `few` و `many` و `other`. تحتاج فقط إلى التصريح عن الفئات التي تستخدمها لغتك المستهدفة, يعود Intlayer إلى `other` عندما لا تتطابق أي فئة محددة.
+>
+> يتم استبدال العنصر النائب `{{count}}` تلقائيًا بالعدد الذي تمرره في وقت التشغيل. يمكنك تضمين عناصر نائبة أخرى أيضًا (انظر [العناصر النائبة المخصصة](#custom-placeholders) أدناه).
+
+## استخدام محتوى الجمع مع React Intlayer
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+لاستخدام محتوى الجمع داخل مكون React، قم باسترجاعه عبر خطاف `useIntlayer` واستدعه مع العدد. يتم دمج اللغة النشطة والعدد لاختيار فئة CLDR المطابقة.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -60,7 +132,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+لاستخدام محتوى جمع في Next.js Client Components، استرجعه عبر hook `useIntlayer` واستدعه مع عدد. إليك مثال:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +156,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+لاستخدام محتوى جمع في مكونات Vue، استرجعه عبر hook `useIntlayer` واستدعه مع عدد. إليك مثال:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +177,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+لاستخدام محتوى جمعي في مكونات Svelte، قم باسترجاعه عبر hook `useIntlayer` واستدعه مع عدد. يتم الوصول إلى المتجر باستخدام `$`. إليك مثال:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,17 +196,22 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+لاستخدام محتوى جمع في مكونات Preact، استرجعه عبر hook `useIntlayer` واستدعه مع عدد. إليك مثال:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* باللغة الإنجليزية:                                 */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -146,13 +223,14 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+لاستخدام محتوى جمعي في مكونات SolidJS، استرجعها عبر hook `useIntlayer` واستدعها بعدد. إليك مثال:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
 import { useIntlayer } from "solid-intlayer";
 
 const OpeningsComponent: Component<{ count: number }> = (props) => {
+  // احصل على إجمالي الفتحات من intlayer
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
@@ -168,7 +246,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+لاستخدام محتوى الجمع في مكونات Angular، استرجعه عبر hook `useIntlayer` واستدعِه مع عدد. إليك مثال:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -187,129 +265,20 @@ export class OpeningsComponent {
 
   content = useIntlayer("total_openings");
 }
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## إعداد محتوى الجمع
-
-لإعداد محتوى الجمع في مشروع Intlayer الخاص بك، قم بإنشاء وحدة محتوى تستخدم مساعد `plural`. فئة `other` مطلوبة وتستخدم كبديل عندما لا تحدد اللغة فئة أكثر تحديدًا.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      ar: plural({
-        zero: "لا توجد وظائف شاغرة",
-        one: "وظيفة شاغرة واحدة",
-        two: "وظيفتان شاغرتان",
-        few: "{{count}} وظائف شاغرة",
-        many: "{{count}} وظيفة شاغرة",
-        other: "{{count}} وظيفة شاغرة",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "ar": {
-          "nodeType": "plural",
-          "plural": {
-            "zero": "لا توجد وظائف شاغرة",
-            "one": "وظيفة شاغرة واحدة",
-            "two": "وظيفتان شاغرتان",
-            "few": "{{count}} وظائف شاغرة",
-            "many": "{{count}} وظيفة شاغرة",
-            "other": "{{count}} وظيفة شاغرة"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> الفئات المدعومة هي `zero` و `one` و `two` و `few` و `many` و `other`. تحتاج فقط إلى التصريح عن الفئات التي تستخدمها لغتك المستهدفة, يعود Intlayer إلى `other` عندما لا تتطابق أي فئة محددة.
->
-> يتم استبدال العنصر النائب `{{count}}` تلقائيًا بالعدد الذي تمرره في وقت التشغيل. يمكنك تضمين عناصر نائبة أخرى أيضًا (انظر [العناصر النائبة المخصصة](#custom-placeholders) أدناه).
-
-## استخدام محتوى الجمع مع React Intlayer
-
-لاستخدام محتوى الجمع داخل مكون React، قم باسترجاعه عبر خطاف `useIntlayer` واستدعه مع العدد. يتم دمج اللغة النشطة والعدد لاختيار فئة CLDR المطابقة.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* باللغة الإنجليزية:                                 */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
 ```
 
 يمكنك استدعاء الوظيفة المرجعة بطريقتين متكافئتين:
 
+لاستخدام محتوى جمع مع `vanilla-intlayer`، قم باسترجاعه عبر hook `useIntlayer` واستدعه مع عدد. إليك مثال:
+
 ```tsx
 totalOpenings(21); // اختصار: العدد فقط
 totalOpenings({ count: 21 }); // النموذج الصريح
 ```
 
+  </Tab>
+</Tabs>
+
 ## العناصر النائبة المخصصة
 
 يمكن أن تتضمن سلاسل الجمع عناصر نائبة أخرى غير `{{count}}`. قم بتمريرها في شكل كائن بجانب `count`:

package/docs/ar/dynamic_dictionaries/variants.md

@@ -118,42 +118,6 @@ useIntlayer("hero-banner", { variant: "never-declared" });
 
 #### المتغير الافتراضي
 
-```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const dictionary = {
-  key: "hero-banner",
-  variant: "default",
-  content: {
-    headline: t({
-      en: "Build faster with Intlayer",
-      fr: "Développez plus vite avec Intlayer",
-    }),
-    cta: t({ en: "Get started", fr: "Commencer" }),
-  },
-} satisfies Dictionary;
-
-export default dictionary;
-```
-
-```ts fileName="hero-banner.black-friday.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const dictionary = {
-  key: "hero-banner",
-  variant: "black_friday",
-  content: {
-    headline: t({
-      en: "50 % off — today only",
-      fr: "−50 % — aujourd'hui seulement",
-    }),
-    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
-  },
-} satisfies Dictionary;
-
-export default dictionary;
-```
-
 <Tabs group="framework">
   <Tab label="React" value="react">
     ```tsx fileName="Hero.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -559,6 +523,27 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -577,6 +562,9 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}

package/docs/ar/formatters.md

@@ -52,42 +52,12 @@ author: aymericzip
 
 نظرًا لأن إنشاء أداة التنسيق مكلف نسبيًا، فإن هذا التخزين المؤقت يحسن الأداء دون تغيير السلوك. الغلاف يعرض نفس واجهة برمجة التطبيقات `Intl` الأصلية، لذا فإن الاستخدام متطابق.
 
-- التخزين المؤقت يتم لكل عملية وهو شفاف للمستدعين.
-
 > إذا لم يكن `Intl.DisplayNames` متاحًا في البيئة، يتم طباعة تحذير واحد مخصص للمطور فقط (فكر في استخدام polyfill).
 
-أمثلة:
-
-```ts
-import { Intl } from "intlayer";
-
-// تنسيق الأرقام
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// أسماء العرض للغات والمناطق، إلخ.
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// الترتيب للفرز
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (متساوي)
-
-// قواعد الجمع
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "واحد"
-pluralRules.select(2); // "آخر"
-```
-
 ## أدوات اللغة
 
 ### `getLocaleFromPath(inputUrl)`
 
-يستخرج جزء اللغة من عنوان URL أو مسار:
-
 ```ts
 import { getLocaleFromPath } from "intlayer";
 
@@ -97,29 +67,16 @@ getLocaleFromPath("/dashboard"); // "en" (اللغة الافتراضية)
 getLocaleFromPath("https://example.com/es/about"); // "es"
 ```
 
-- **inputUrl**: سلسلة عنوان URL الكاملة أو مسار المعالجة
-- **returns**: اللغة المكتشفة أو اللغة الافتراضية إذا لم يتم العثور على لغة
-
 ### `getPathWithoutLocale(inputUrl, locales?)`
 
 يزيل جزء اللغة من عنوان URL أو مسار:
 
-```ts
-import { getPathWithoutLocale } from "intlayer";
-
-getPathWithoutLocale("/en/dashboard"); // "/dashboard"
-getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
-getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
-```
-
 - **inputUrl**: سلسلة عنوان URL الكاملة أو مسار المعالجة
 - **locales**: مصفوفة اختيارية من اللغات المدعومة (افتراضيًا إلى اللغات المُعدة)
 - **returns**: عنوان URL بدون جزء اللغة
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-ينشئ عنوان URL محلي للغة الحالية:
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -128,12 +85,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**: عنوان URL الأصلي لتوطينه
-- **currentLocale**: اللغة الحالية
-- **locales**: مصفوفة اختيارية من اللغات المدعومة (افتراضيًا إلى اللغات المُعدة)
-- **defaultLocale**: اللغة الافتراضية الاختيارية (افتراضيًا إلى اللغة الافتراضية المُعدة)
-- **prefixDefault**: ما إذا كان يجب إضافة بادئة للغة الافتراضية (افتراضيًا إلى القيمة المُعدة)
-
 ### `getHTMLTextDir(locale?)`
 
 يعيد اتجاه النص للغة معينة:
@@ -146,15 +97,10 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**: اللغة التي يتم الحصول على اتجاه النص لها (افتراضيًا إلى اللغة الحالية)
-- **returns**: `"ltr"`، `"rtl"`، أو `"auto"`
-
 ## أدوات معالجة المحتوى
 
 ### `getContent(node, nodeProps, locale?)`
 
-يقوم بتحويل عقدة المحتوى باستخدام جميع الإضافات المتاحة (الترجمة، الترقيم، الإدراج، إلخ):
-
 ```ts
 import { getContent } from "intlayer";
 
@@ -165,36 +111,16 @@ const content = getContent(
 );
 ```
 
-- **node**: عقدة المحتوى التي سيتم تحويلها
-- **nodeProps**: خصائص سياق التحويل
-- **locale**: اللغة الاختيارية (افتراضيًا إلى اللغة الافتراضية المُعدة)
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 يستخرج المحتوى للغة معينة من كائن محتوى متعدد اللغات:
 
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
 - **languageContent**: كائن يربط اللغات بالمحتوى
 - **locale**: اللغة المستهدفة (الافتراضي هو اللغة الافتراضية المُعدة)
 - **fallback**: ما إذا كان يجب الرجوع إلى اللغة الافتراضية (الافتراضي هو true)
 
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
-يسترجع ويحوّل المحتوى من قاموس حسب المفتاح:
-
 ```ts
 import { getIntlayer } from "intlayer";
 
@@ -202,10 +128,6 @@ const content = getIntlayer("common", "fr");
 const nestedContent = getIntlayer("common", "fr", customPlugins);
 ```
 
-- **dictionaryKey**: مفتاح القاموس الذي سيتم استرجاعه
-- **locale**: اللغة الاختيارية (الافتراضي هو اللغة الافتراضية المُعدة)
-- **plugins**: مصفوفة اختيارية من الإضافات المخصصة للتحويل
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 يسترجع المحتوى بشكل غير متزامن من قاموس بعيد:
@@ -216,25 +138,12 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**: مفتاح القاموس الذي سيتم استرجاعه
-- **locale**: اللغة الاختيارية (الافتراضي هو اللغة الافتراضية المُعدة)
-- **plugins**: مصفوفة اختيارية من الإضافات المخصصة للتحويل
-
 ## أدوات التنسيق
 
 جميع الأدوات التالية مُصدرة من `intlayer`.
 
 ### `percentage(value, options?)`
 
-يقوم بتنسيق رقم كسلسلة نسبة مئوية.
-
-السلوك: القيم الأكبر من 1 تُفسر كنسب مئوية كاملة ويتم تطبيعها (مثلاً، `25` → `25%`، `0.25` → `25%`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-أمثلة:
-
 ```ts
 import { percentage } from "intlayer";
 
@@ -430,13 +339,6 @@ pluralRules.select(11); // "many"
 
 ### `list(values, options?)`
 
-يقوم بتنسيق مصفوفة من القيم إلى سلسلة قائمة محلية باستخدام `Intl.ListFormat`.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - الحقول الشائعة: `type` (`"conjunction" | "disjunction" | "unit"`)، `style` (`"long" | "short" | "narrow"`)
-  - القيم الافتراضية: `type: 'conjunction'`، `style: 'long'`
-
 أمثلة:
 
 ```ts
@@ -558,34 +460,6 @@ const MyComponent = () => {
 };
 ```
 
-مكونات الخادم (أو وقت تشغيل خادم React):
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/server/format";
-// أو في تطبيقات Next.js
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/server/format";
-```
-
-> ستأخذ هذه الخطافات في الاعتبار اللغة من `IntlayerProvider` أو `IntlayerServerProvider`
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 استخراج المحتوى لمحلية معينة:
@@ -617,8 +491,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> ستأخذ هذه التركيبات في الاعتبار اللغة من `IntlayerProvider` المحقون
-
 ## ملاحظات
 
 - جميع المساعدات تقبل مدخلات `string`؛ يتم تحويلها داخليًا إلى أرقام أو تواريخ.

package/docs/ar/how_works_intlayer.md

@@ -61,7 +61,9 @@ author: aymericzip
    - يتم إنشاء القواميس من ملفات المحتوى. افتراضيًا، يتم إنشاء قواميس Intlayer في دليل `.intlayer/dictionaries` الخاص بالمشروع.
    - يتم إنشاء هذه القواميس بتنسيقات مختلفة لتلبية جميع الاحتياجات وتحسين أداء التطبيق.
 
-3. إنشاء أنواع القواميس
+3. توليد أنواع القاموس
+
+4. إنشاء أنواع القواميس
    بناءً على `القواميس` الخاصة بك، سيقوم Intlayer بإنشاء أنواع لجعلها قابلة للاستخدام في تطبيقك.
 
 - يتم إنشاء أنواع القواميس من `ملفات إعلان المحتوى` الخاصة بـ Intlayer. افتراضيًا، يتم إنشاء أنواع القواميس الخاصة بـ Intlayer في دليل `.intlayer/types` الخاص بالمشروع.
@@ -98,6 +100,9 @@ const MyComponent = () => {
 
 ![المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- الخادم هو تطبيق Express بسيط يستمع إلى طلبات العميل ويسترجع محتوى تطبيقك، مثل `dictionaries` والإعدادات لجعله متاحًا على جانب العميل.
+- من ناحية أخرى، العميل هو تطبيق React يُستخدم للتفاعل مع محتواك باستخدام واجهة بصرية.
+
 - الخادم هو تطبيق Express بسيط يستمع إلى الطلبات من العميل ويسترجع محتوى تطبيقك، مثل `dictionaries` والتكوين لجعله متاحًا على جانب العميل.
 - من ناحية أخرى، العميل هو تطبيق React يُستخدم للتفاعل مع المحتوى الخاص بك باستخدام واجهة مرئية.
   عندما تستدعي المحتوى الخاص بك باستخدام `useIntlayer` ويكون المحرر مفعّلًا، فإنه يلف تلقائيًا سلاسل النصوص الخاصة بك بكائن Proxy يُسمى `IntlayerNode`. يستخدم هذا الكائن `window.postMessage` للتواصل مع iframe مغلف يحتوي على واجهة المحرر المرئي.
@@ -108,6 +113,8 @@ const MyComponent = () => {
 لتحسين حجم الحزمة لتطبيقك، يوفر Intlayer مكونين إضافيين لتحسين بناء تطبيقك: مكونات `@intlayer/babel` و `@intlayer/swc`.
 تعمل مكونات Babel و SWC عن طريق تحليل شجرة بناء الجملة المجردة (AST) لتطبيقك لاستبدال استدعاءات دوال Intlayer بكود محسن. تجعل هذه العملية الحزمة النهائية أخف في الإنتاج من خلال التأكد من استيراد القواميس المستخدمة فقط، مما يحسن تقسيم الحزم ويقلل من حجم الحزمة.
 
+تعمل مكونات Babel و SWC من خلال تحليل شجرة بناء الجملة المجردة (AST) لتطبيقك لاستبدال استدعاءات دوال Intlayer بكود محسّن. تجعل هذه العملية حزمتك النهائية أخف وزناً في الإنتاج من خلال التأكد من أن قواميس المعجم التي تُستخدم فعلاً فقط يتم استيرادها، مع تحسين التقسيم والحد من حجم الحزمة.
+
 في وضع التطوير، يستخدم Intlayer استيرادًا ثابتًا مركزيًا للقواميس لتبسيط تجربة التطوير.
 
 بتفعيل الخيار `importMode = "dynamic"` في [التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md)، سيستخدم Intlayer الاستيراد الديناميكي لتحميل القواميس. هذا الخيار معطل افتراضيًا لتجنب المعالجة غير المتزامنة عند عرض التطبيق.