---
createdAt: 2025-09-22
updatedAt: 2026-01-26
title: "Intlayer v8 الجديد - ما الجديد؟"
description: "اكتشف ما الجديد في Intlayer v8. تحسينات كبيرة في تجربة المطور، والتحقق من صحة المحتوى بالمخططات، وإدارة القواميس."
keywords:
  - Intlayer
  - CMS
  - Developer Experience
  - Features
  - React
  - Next.js
  - JavaScript
  - TypeScript
youtubeVideo: https://www.youtube.com/watch?v=ia6JmVf-kkU
slugs:
  - doc
  - releases
  - v8
---

# Intlayer v8 الجديد - ما الجديد؟

مرحبًا بك في Intlayer v8! يركز هذا الإصدار على تعزيز تجربة المطور من خلال اكتشاف المحتوى التلقائي، وضمان سلامة البيانات عبر التحقق من صحة المخططات، وتوفير مزيد من التحكم في إدارة القواميس.

<iframe
  src="https://www.youtube.com/embed/ia6JmVf-kkU"
  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 Video - New Intlayer v8 - What's new?"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
  loading="lazy"
/>

## جدول المحتويات

<TOC levels={[2]} maxDepth={1} />

---

## تطور المحتوى الغني: Markdown و HTML

يجلب Intlayer v8 تحسينات كبيرة على كيفية التعامل مع المحتوى الغني، حيث يقدم **عقد HTML** (التي لم تكن موجودة في v7) ويوحد واجهة برمجة التطبيقات مع **عقد Markdown** (التي كانت موجودة في v7 ولكن تم تحسينها).

### واجهة برمجة التطبيقات الموحدة `.use()`

قدمنا طريقة `.use()` لكل من عقد Markdown و HTML. تتيح لك هذه الطريقة تخصيص وسوم HTML أو المكونات المستخدمة أثناء العرض.

- **استبدال المكونات**: يمكنك بسهولة استبدال وسوم HTML أو المكونات المخصصة بمكونات الإطار الخاص بك (مثل استبدال `<a>` بـ `NextLink` أو `<CustomCmp>` بمكون React).
- **سلامة النوع**: جميع الدوال الخاصة بتوفير المكونات مكتوبة بالكامل، مما يضمن تلقيك للخصائص الصحيحة.

### سلوك العرض الافتراضي

في v7، إذا لم يتم تعريف مزود، كانت عقد Markdown تُصير كسلاسل نصية خام، مما يتطلب غالبًا مكتبات خارجية لتحليلها.

**في v8، يتضمن Intlayer محلل Markdown داخلي خاص به.** بشكل افتراضي، تُصير عقد Markdown الآن مباشرة كـ HTML دون الحاجة إلى أي مكتبات خارجية.

### أدوات Renderer و Provider الجديدة

لقد قدمنا دوال ومكونات renderer مستقلة جديدة لمنحك مزيدًا من التحكم خارج تدفق `useIntlayer` القياسي.

- **Markdown**: `MarkdownRenderer` و `useMarkdownRenderer` و `renderMarkdown`. (ملاحظة: كان `MarkdownProvider` موجودًا في v7 ولكنه يتكامل الآن مع هذه الأدوات الجديدة).
- **HTML**: `HTMLRenderer` و `useHTMLRenderer` و `renderHTML` و `HTMLProvider`.

#### أمثلة: أدوات عرض Markdown

<Tabs group='framework'>
  <Tab label="React / Next.js" value="react">

    **1. استخدام المكون:**

    ```tsx
    import { MarkdownRenderer } from "react-intlayer";

    <MarkdownRenderer
      forceBlock={true}
      components={{
        h1: ({ children }) => <h1 className="text-2xl">{children}</h1>
      }}
    >
      {"# عنواني"}
    </MarkdownRenderer>
    ```

    **2. استخدام Hook:**

    ```tsx
    import { useMarkdownRenderer } from "react-intlayer";

    const renderMarkdown = useMarkdownRenderer({
      components: {
        h1: ({ children }) => <h1 className="text-red-500">{children}</h1>
      }
    });

    return <div>{renderMarkdown("# عنواني")}</div>;
    ```

    **3. استخدام أداة المساعدة:**

    ```tsx
    import { renderMarkdown } from "react-intlayer";

    const html = renderMarkdown("# عنواني", {
      forceBlock: true
    });
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    **1. استخدام المكون:**

    ```vue
    <script setup>
    import { MarkdownRenderer } from "vue-intlayer";
    </script>

    <template>
      <MarkdownRenderer :forceBlock="true" content="# عنواني" />
    </template>
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    **1. استخدام المكون:**

    ```svelte
    <script>
      import { MarkdownRenderer } from "svelte-intlayer";
    </script>

    <MarkdownRenderer forceBlock={true} value="# عنواني" />
    ```

    **2. استخدام Hook:**

    ```svelte
    <script>
      import { useMarkdownRenderer } from "svelte-intlayer";
      const render = useMarkdownRenderer();
    </script>

    {@html render("# عنواني")}
    ```

    **3. استخدام أداة المساعدة:**

    ```svelte
    <script>
      import { renderMarkdown } from "svelte-intlayer";
    </script>

    {@html renderMarkdown("# عنواني")}
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    **1. استخدام الخدمة:**

    ```typescript
    import { Component } from "@angular/core";
    import { IntlayerMarkdownService } from "angular-intlayer";

    @Component({ ... })
    export class MyComponent {
      constructor(private markdownService: IntlayerMarkdownService) {}

      render(markdown: string) {
        return this.markdownService.renderMarkdown(markdown);
      }
    }
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    **1. استخدام المكون:**

    ```tsx
    import { MarkdownRenderer } from "solid-intlayer";

    <MarkdownRenderer forceBlock={true}>
      {"# عنواني"}
    </MarkdownRenderer>
    ```

    **2. استخدام Hook:**

    ```tsx
    import { useMarkdownRenderer } from "solid-intlayer";

    const render = useMarkdownRenderer();

    return <div>{render("# عنواني")}</div>;
    ```

    **3. استخدام أداة المساعدة:**

    ```tsx
    import { renderMarkdown } from "solid-intlayer";

    return <div>{renderMarkdown("# عنواني")}</div>;
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    **1. استخدام المكون:**

    ```tsx
    import { MarkdownRenderer } from "preact-intlayer";

    <MarkdownRenderer forceBlock={true}>
      {"# عنواني"}
    </MarkdownRenderer>
    ```

    **2. استخدام Hook:**

    ```tsx
    import { useMarkdownRenderer } from "preact-intlayer";

    const render = useMarkdownRenderer();

    return <div>{render("# عنواني")}</div>;
    ```

    **3. استخدام أداة المساعدة:**

    ```tsx
    import { renderMarkdown } from "preact-intlayer";

    return <div>{renderMarkdown("# عنواني")}</div>;
    ```

  </Tab>
</Tabs>

#### أمثلة: أدوات عرض HTML

<Tabs group='framework'>
  <Tab label="React / Next.js" value="react">

    **1. استخدام المكون:**

    ```tsx
    import { HTMLRenderer } from "react-intlayer";

    <HTMLRenderer
      components={{
        p: ({ children }) => <p className="mb-4">{children}</p>
      }}
    >
      {"<p>Hello World</p>"}
    </HTMLRenderer>
    ```

    **2. استخدام Hook:**

    ```tsx
    import { useHTMLRenderer } from "react-intlayer";

    const renderHTML = useHTMLRenderer({
      components: {
        strong: ({ children }) => <b className="font-bold">{children}</b>
      }
    });

    return <div>{renderHTML("<p>مرحبًا <strong>العالم</strong></p>")}</div>;
    ```

    **3. استخدام أداة المساعدة:**

    ```tsx
    import { renderHTML } from "react-intlayer";

    const html = renderHTML("<p>Hello World</p>");
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    **1. استخدام المكون:**

    ```vue
    <script setup>
    import { HTMLRenderer } from "vue-intlayer";
    </script>

    <template>
      <HTMLRenderer content="<p>Hello World</p>" />
    </template>
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    **1. استخدام المكون:**

    ```svelte
    <script>
      import { HTMLRenderer } from "svelte-intlayer";
    </script>

    <HTMLRenderer value="<p>Hello World</p>" />
    ```

    **2. استخدام Hook:**

    ```svelte
    <script>
      import { useHTMLRenderer } from "svelte-intlayer";
      const render = useHTMLRenderer();
    </script>

    {@html render("<p>Hello World</p>")}
    ```

    **3. استخدام أداة المساعدة:**

    ```svelte
    <script>
      import { renderHTML } from "svelte-intlayer";
    </script>

    {@html renderHTML("<p>Hello World</p>")}
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    **1. الاستخدام المباشر:**

    في Angular، يمكنك استخدام ربط `[innerHTML]` القياسي.

    ```html
    <div [innerHTML]="'<p>Hello World</p>'"></div>
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    **1. استخدام المكون:**

    ```tsx
    import { HTMLRenderer } from "solid-intlayer";

    <HTMLRenderer>
      {"<p>Hello World</p>"}
    </HTMLRenderer>
    ```

    **2. استخدام Hook:**

    ```tsx
    import { useHTMLRenderer } from "solid-intlayer";

    const render = useHTMLRenderer();

    return <div>{render("<p>Hello World</p>")}</div>;
    ```

    **3. استخدام أداة المساعدة:**

    ```tsx
    import { renderHTML } from "solid-intlayer";

    return <div>{renderHTML("<p>Hello World</p>")}</div>;
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    **1. استخدام المكون:**

    ```tsx
    import { HTMLRenderer } from "preact-intlayer";

    <HTMLRenderer>
      {"<p>Hello World</p>"}
    </HTMLRenderer>
    ```

    **2. استخدام Hook:**

    ```tsx
    import { useHTMLRenderer } from "preact-intlayer";

    const render = useHTMLRenderer();

    return <div>{render("<p>Hello World</p>")}</div>;
    ```

    **3. استخدام أداة المساعدة:**

    ```tsx
    import { renderHTML } from "preact-intlayer";

    return <div>{renderHTML("<p>Hello World</p>")}</div>;
    ```

  </Tab>
</Tabs>

لمزيد من التفاصيل، راجع [توثيق محتوى HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/html.md) و [توثيق Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/markdown.md).

---

## إعادة كتابة عناوين URL المخصصة

تقدّم Intlayer v8 دعمًا لـ **إعادة كتابة عناوين URL المخصصة**، مما يتيح لك تعريف مسارات خاصة بكل لغة تختلف عن البنية القياسية `/locale/path`. هذه ميزة قوية لتحسين الـ SEO المحلي وتوفير تجربة مستخدم أكثر طبيعية للمتحدثين بغير الإنجليزية.

**التحسينات الرئيسية في v8:**

- **منسقات الأطر**: تمت إضافة `nextjsRewrite`, `svelteKitRewrite`, `reactRouterRewrite`, `vueRouterRewrite`, `solidRouterRewrite`, `tanstackRouterRewrite`, `nuxtRewrite`, و `viteRewrite` لتوفير صياغة نمطية ملائمة لكل راوتر.
- **`useRewriteURL` هوك**: هو هوك جديد على جهة العميل يصحح شريط العنوان بهدوء إلى العنوان المحلي الأجمل ("pretty" localized URL) دون تحفيز تنقلات الراوتر.
- **إعادة توجيه SEO التلقائية**: الوكلاء المدمجون يعيدون توجيه المستخدمين تلقائيًا من المسارات canonical المكتوبة يدويًا (على سبيل المثال، `/fr/about`) إلى نسخها المحلية الأجمل (على سبيل المثال، `/fr/a-propos`).

**مثال على التكوين:**

<Tabs group='routers'>
  <Tab label="Next.js" value="nextjs">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { nextjsRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-no-default",
        rewrite: nextjsRewrite({
          "/[locale]/about": {
            fr: "/[locale]/a-propos",
            es: "/[locale]/acerca-de",
          },
          "/[locale]/products/[id]": {
            fr: "/[locale]/produits/[id]",
            es: "/[locale]/productos/[id]",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
    <Tab label="راوتر React" value="reactrouter">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { reactRouterRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: reactRouterRewrite({
          "/:locale/about": {
            fr: "/:locale/a-propos",
            es: "/:locale/acerca-de",
          },
          "/:locale/products/:id": {
            fr: "/:locale/produits/:id",
            es: "/:locale/productos/:id",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
  <Tab label="Vite (Vue و Solid و Svelte)" value="vite">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { viteRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: viteRewrite({
          "/:locale/about": {
            fr: "/:locale/a-propos",
            es: "/:locale/acerca-de",
          },
          "/:locale/products/:id": {
            fr: "/:locale/produits/:id",
            es: "/:locale/productos/:id",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
  <Tab label="Nuxt" value="nuxt">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { nuxtRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: nuxtRewrite({
          "/[locale]/about": {
            fr: "/[locale]/a-propos",
            es: "/[locale]/acerca-de",
          },
          "/[locale]/products/[id]": {
            fr: "/[locale]/produits/[id]",
            es: "/[locale]/productos/[id]",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
  <Tab label="SvelteKit" value="sveltekit">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { svelteKitRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: svelteKitRewrite({
          "/[locale]/about": {
            fr: "/[locale]/a-propos",
            es: "/[locale]/acerca-de",
          },
          "/[locale]/products/[id]": {
            fr: "/[locale]/produits/[id]",
            es: "/[locale]/productos/[id]",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
</Tabs>

تدعم هذه الميزة مباشرةً في **Next.js** و **Vite** عبر بروكسيات Intlayer، ويمكن دمجها بسهولة مع موجهات أخرى مثل **TanStack Router** و **React Router** و **Vue Router** و **SvelteKit** و **Solid Router**.

لمزيد من المعلومات ودلائل التكامل، راجع توثيق [إعادة كتابة عناوين URL المخصصة](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/custom_url_rewrites.md).

---

### قيم الإدراج المحسّنة

في الإصدار v8، يمكن لقيم الإدراج الآن **قبول عناصر React (أو عقد Vue)** بالإضافة إلى السلاسل النصية والأرقام. يتيح لك هذا حقن مكونات غنية وتفاعلية مباشرة في قوالب الإدراج الخاصة بك.

يتعامل Intlayer الآن بشكل متين مع العقد المتداخلة من React وPreact داخل الإدخالات، مما يضمن الحفاظ على هياكل واجهة المستخدم المعقدة وعرضها بشكل صحيح.

**مثال:**

```typescript fileName="src/example.content.ts"
import { insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myInsertion: insert("مرحبًا {{name}}"),
  },
};
```

<Tabs group='framework'>
  <Tab label="Next.js" value="nextjs">

    ```tsx
    import { useIntlayer } from "next-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // رقم
          // أو
          name: "John", // نص
          // أو
          name: <span>John</span>, // عنصر React
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="React" value="react">

    ```tsx
    import { useIntlayer } from "react-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // عدد
          // أو
          name: "John", // نص
          // أو
          name: <span>John</span>, // عنصر React
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    ```vue
    <script setup>
    import { h } from "vue";
    import { useIntlayer } from "vue-intlayer";

    const { myInsertion } = useIntlayer("my-key");
    </script>

    <template>
      <div>
        <component
          :is="myInsertion({
            name: 2,
            // أو
            name: 'John',
            // أو
            name: h('span', 'John'),
          })"
        />
      </div>
    </template>
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    ```tsx
    import { useIntlayer } from "preact-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // رقم
          // أو
          name: "John", // سلسلة
          // أو
          name: <span>John</span>, // عنصر Preact
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    ```tsx
    import { useIntlayer } from "solid-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // رقم
          // أو
          name: "John", // سلسلة
          // أو
          name: <span>John</span>, // عنصر Solid
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    ```svelte
    <script>
      import { useIntlayer } from "svelte-intlayer";

      const { myInsertion } = useIntlayer("my-key");
    </script>

    <div>
      {myInsertion({
        name: 2, // عدد
        // or
        name: "John", // سلسلة
      })}
    </div>
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    ```typescript
    import { Component } from "@angular/core";
    import { useIntlayer } from "angular-intlayer";

    @Component({
      selector: "app-insertion-example",
      template: `
        <div>
          {{ content().myInsertion({
            name: 'John'
          }) }}
        </div>
      `,
    })
    export class InsertionExampleComponent {
      content = useIntlayer("my-key");
    }
    ```

  </Tab>
</Tabs>

## التحقق من صحة مخطط المحتوى

تقدم Intlayer v8 التحقق من صحة المخططات للقواميس. يمكنك الآن تعريف مخططات تحقق قابلة لإعادة الاستخدام في إعداداتك باستخدام Zod وتطبيقها على ملفات المحتوى الخاصة بك. يضمن ذلك التزام محتواك دائمًا بالهيكل المتوقع واكتشاف الأخطاء أثناء وقت البناء.

### 1. تعريف المخططات

عَرِّف مخططاتك في `intlayer.config.ts`:

```typescript fileName="intlayer.config.ts"
import { z } from "zod";

export default {
  schemas: {
    "seo-metadata": z.object({
      title: z.string().min(50).max(60),
      description: z.string().min(150).max(160),
    }),
  },
};
```

### 2. تطبيق المخططات على القواميس

أشر إلى مفتاح المخطط في تعريف القاموس الخاص بك:

```typescript fileName="src/example.content.ts"
import { type Dictionary } from "intlayer";

const aboutPageMetaContent = {
  key: "about-page-meta",
  schema: "seo-metadata", // <-- اسم المخطط المشار إليه
  content: {
    title: "حول شركتنا - تعرّف علينا أكثر",
    description: "اكتشف مهمة شركتنا وقيمها وفريق العمل.",
  },
} satisfies Dictionary<"seo-metadata">;

export default aboutPageMetaContent;
```

إذا لم يتطابق المحتوى مع المخطط (مثلاً، كان العنوان قصيراً جداً)، فستؤدي عملية البناء إلى رفع خطأ.

---

### الكشف التلقائي المحسَّن للمحتوى

في الإصدار v8، يقوم Intlayer باكتشاف صيغة Markdown وعلامات HTML وإدراج المتغيرات داخل سلاسل المحتوى بذكاء. هذا يعني أنه يمكنك غالبًا الاستغناء عن دوال المساعدة مثل `md()`، `html()`، أو `insert()`.

هذا السلوك مفعلٌ افتراضيًا. يمكنك الآن ضبط هذا الكشف بدقة إما على مستوى الإعدادات العامة في `intlayer.config.ts` أو لكل قاموس على حدة.

#### تحكم دقيق

يمكنك تفعيل أو تعطيل أنواع محددة من التحويلات:

```typescript fileName="intlayer.config.ts"
export default {
  dictionary: {
    // contentAutoTransformation: false (الافتراضي)
    contentAutoTransformation: {
      markdown: true,
      html: true,
      insertion: false, // تعطيل كشف الإدراج تلقائيًا
    },
  },
};
```

**سلوك v7 (التغليف اليدوي):**

```typescript fileName="src/example.content.ts"
import { md, insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myMarkdown: md("## Hello World"),
    myInsertion: insert("Hi {{name}}"),
  },
};
```

**سلوك v8 (الكشف التلقائي):**

```typescript fileName="src/example.content.ts"
export default {
  key: "my-key",
  contentAutoTransformation: true, // يمكن تعيينه أيضًا عبر تعريف القاموس أو عالميًا في intlayer.config.ts
  content: {
    myMarkdown: "## Hello World", // تم اكتشافه تلقائيًا كـ Markdown
    myHTML: "<p>Hello World</p>", // تم اكتشافه تلقائيًا كـ HTML
    myInsertion: "Hi {{name}}", // تم اكتشافه تلقائيًا كـ Insertion
  },
};
```

يظل ناتج JSON الأساسي كما هو، محافظًا على معلومات النوع الغنية اللازمة لعملية العرض:

```json
{
  "key": "my-key",
  "content": {
    "myMarkdown": {
      "nodeType": "markdown",
      "markdown": "## Hello World"
    },
    "myHTML": {
      "nodeType": "html",
      "html": "<p>Hello World</p>"
    },
    "myInsertion": {
      "nodeType": "insertion",
      "insertion": "Hi {{name}}"
    }
  }
}
```

---

## التوطين: الخطاف الجديد `useIntl`

يتوفر الآن خطاف `useIntl()` في React وNext.js وVue. يوفر هذا الخطاف كائن `Intl` مرتبطًا بالـ locale ويستخدم اللغة الحالية تلقائيًا لتنسيق الأرقام والتواريخ والمزيد، دون الحاجة إلى تمرير الـ locale يدويًا.

<Tabs group='framework'>
  <Tab label="Next.js" value="nextjs">

    ```tsx
    import { useIntl } from "next-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="React" value="react">

    ```tsx
    import { useIntl } from "react-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    ```vue
    <script setup>
    import { useIntl } from "vue-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    </script>
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    ```tsx
    import { useIntl } from "preact-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    ```tsx
    import { useIntl } from "solid-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    ```svelte
    <script>
      import { useIntl } from "svelte-intlayer";

      const intl = useIntl();

      const formattedPrice = new intl.NumberFormat({
        style: "currency",
        currency: "USD",
      }).format(123.45);
    </script>
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    ```typescript
    import { Component, computed } from "@angular/core";
    import { useIntl } from "angular-intlayer";

    @Component({
      selector: "app-intl-example",
      template: `<div>{{ formattedPrice() }}</div>`,
    })
    export class IntlExampleComponent {
      intl = useIntl();

      formattedPrice = computed(() =>
        new (this.intl().NumberFormat)({
          style: "currency",
          currency: "USD",
        }).format(123.45)
      );
    }
    ```

  </Tab>
</Tabs>

---

## الأدوات: تحسينات امتداد VSCode

تلقى امتداد Intlayer لـ VSCode تحديثات رئيسية في v8 لتبسيط سير عمل الترجمة الخاصة بك:

- **زمن البدء**: تحسينات في الأداء عند فتح المشروع.
- **التخزين المؤقت**: طبقة تخزين مؤقت محسّنة لتمكين التحقق من الصحة والإكمال التلقائي شبه الفوري.
- **اكتشاف المفاتيح غير المستخدمة والمفاتيح المكررة**: ميزات جديدة لاكتشاف **المفاتيح غير المستخدمة** و**المفاتيح المكررة** عبر قواميسك تلقائيًا، مما يساعدك على الحفاظ على محتوى نظيف وفعّال.

---

## تحسينات المجمّع

يتضمن Intlayer الإصدار 8 طبقة تخزين مؤقت جديدة لمجمّع Markdown وHTML. هذا يضمن أن سلاسل المحتوى المتطابقة بنفس التهيئة يتم تحليلها مرة واحدة فقط، مما يقلل بشكل كبير من العبء أثناء إعادة العرض أو عند استخدام نفس المحتوى في أماكن متعددة.

<Tabs group='bundler'>
  <Tab label="Next.js" value="nextjs">
  
    ```typescript fileName="babel.config.js"
      const {
      intlayerExtractBabelPlugin,
      intlayerOptimizeBabelPlugin,
      getExtractPluginOptions,
      getOptimizePluginOptions,
    } = require('@intlayer/babel');

    module.exports = {
      presets: ['next/babel'],
      plugins: [
        // استخراج المحتوى من المكونات إلى القواميس
        [intlayerExtractBabelPlugin, getExtractPluginOptions()],
        // تحسين الاستيراد عن طريق استبدال useIntlayer باستيرادات القواميس المباشرة
        [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
      ],
    };
    ```

  </Tab>
  <Tab label="Vite" value="vite">
   
    ```typescript fileName="vite.config.js"
    import { defineConfig } from 'vite';
    import {intlayer, intlayerCompiler} from 'vite-intlayer';

    export default defineConfig({
      plugins: [intlayer(), intlayerCompiler()],
    });
    ```

> بالنسبة لـ Vue / Svelte ستحتاج إلى تثبيت حزمة المترجم المناسبة:
>
> ```bash
> # من أجل Vue
> npm install @intlayer/vue-compiler
> ```
>
> ```bash
> # من أجل Svelte
> npm install @intlayer/svelte-compiler
> ```

  </Tab>
</Tabs>

---

## المرونة: وضع استيراد موحّد

تم إهمال الخاصية البوليانية `live` لصالح خاصية أكثر شمولاً تسمى `importMode`. تتيح هذه الخاصية تحديد صريح لكيفية تحميل القواميس: بشكل ثابت، أو ديناميكيًا، أو عبر مزامنة حية.

### الأوضاع

- **`static`** (افتراضي): يتم تجميع القاموس في وقت البناء. الأفضل للأداء.
- **`dynamic`**: يتم تحميل القاموس أثناء وقت التشغيل (مثلاً عبر جلب JSON أو باستخدام suspense).
- **`fetch`**: يتم جلب القاموس من الـ CMS/الخادم أثناء وقت التشغيل ومزامنته.

الترحيل:

| تكوين v7      | تكوين v8                              |
| :------------ | :------------------------------------ |
| `live: true`  | `importMode: 'fetch'`                 |
| `live: false` | `importMode: 'static'` (أو 'dynamic') |

ملاحظة: في Intlayer v8، تم نقل الخاصية `importMode` من تهيئة `build` إلى تهيئة `dictionary` في `intlayer.config.ts`. هذا يتيح لك تحديد وضع استيراد افتراضي لجميع قواميسك مع الحفاظ على إمكانية تجاوزه على مستوى كل قاموس على حدة.

**مثال التهيئة العامة:**

```typescript fileName="intlayer.config.ts"
export default {
  dictionary: {
    importMode: "dynamic", // الافتراضي العام
  },
  // ...
};
```

**مثال القاموس:**

```typescript fileName="src/example.content.ts"
export default {
    key: 'my-key',
    importMode: "fetch", // يتجاوز التهيئة العامة
    content: { ... }
}
```

---

## التحكم في موقع القواميس

تقدم النسخة v8 الخاصية `location` لإدارة مكان تواجد القواميس وكيفية تزامنها بشكل صريح. هذا مفيد بشكل خاص في سير عمل هجين يتضمن كلًا من الملفات المحلية ومحتوى أنظمة إدارة المحتوى (CMS) البعيدة.

### الخيارات

- **`local`**: يتواجد القاموس محليًا فقط. لن يتم دفعه إلى نظام إدارة المحتوى (CMS) البعيد.
- **`remote`**: يتم إدارة القاموس عن بُعد. بمجرد دفعه إلى نظام إدارة المحتوى (CMS)، سيتم فصله عن القاموس المحلي. وسيتم سحب القاموس البعيد من الـ CMS.
- **`local_and_remote`**: يتواجد القاموس في كلا الموقعين. التغييرات المحلية تُدفع، والتغييرات البعيدة تُسحب (مزامنة).

**مثال:**

```typescript fileName="src/example.content.ts"
export default {
    key: 'my-key',
    location: "local", // احتفظ بهذا القاموس محليًا فقط
    content: { ... }
}
```

---

## فصل تكوين النظام

يفصل Intlayer v8 تكوين مصادر المحتوى عن المسارات الداخلية للنظام والإخراج. هذا ينظف خاصية content ويوضح أي الإعدادات مخصصة لإدارة المستخدم مقابل تلك التي يديرها نظام Intlayer.

تم نقل الخصائص التالية من content إلى خاصية system الجديدة في intlayer.config.ts:

- `dictionariesDir`
- `moduleAugmentationDir`
- `unmergedDictionariesDir`
- `typesDir`
- `mainDir`
- `configDir`
- `cacheDir`
- `outputFilesPatternWithPath`

**سلوك v7:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src"],
    dictionariesDir: ".intlayer/dictionary", // مدموجة مع إعدادات المصدر
  },
};
```

**سلوك v8:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src"],
  },
  system: {
    dictionariesDir: ".intlayer/dictionary", // مفصولة بوضوح
  },
};
```

---

## فصل دلائل المحتوى وملفات الشيفرة

Intlayer v8 يفصل إعدادات تعريف ملفات المحتوى عن إعدادات تحويل الشيفرة. هذا يتيح مراقبة ومسح أدق، مما يحسّن أداء عملية البناء.

في السابق، كان يتم استخدام `contentDir` لكل من مراقبة ملفات `.content.*` ومسح الشيفرة بحثًا عن استدعاءات `useIntlayer`. الآن:

- **`contentDir`**: مخصّص لملفات تعريف المحتوى الخاصة بك.
- **`codeDir`**: مخصّص لشيفرة التطبيق التي تحتاج إلى تحويل (مثل: pruning، optimization).

**الترحيل:**

إذا كنت قد قمت سابقًا بتعيين `contentDir`، فسيستخدم Intlayer v8 هذا أيضًا كقيمة افتراضية لـ `codeDir`، لكنه سيعرض تحذيرًا. يجب عليك تعريف `codeDir` صراحةً في تكوينك.

**سلوك v7:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src", "@packages/design-system"], // يُستخدم لكلٍ من المحتوى والشفرة
  },
};
```

**سلوك v8:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src/content", "@packages/design-system"], // راقب هنا فقط ملفات src/content/*.content.* وملفات @packages/design-system/dist/*.content.*
    codeDir: ["src", "@packages/design-system"], // امسح هنا فقط لتحويل الشفرة وملفات @packages/design-system/src/*.content.*
  },
};
```

---

## إطار العمل: تحسينات Svelte

يتم الآن تحليل محتوى Markdown و HTML في Svelte تلقائيًا إلى HTML عند تحويله إلى سلسلة (stringified). هذا يجعل استخدامه مع تركيب Svelte `{@html}` أسهل بكثير، إذ يمكنك الآن ببساطة تمرير عقدة المحتوى مباشرة.

---

## ملاحظات الترحيل من الإصدار v7

### تغييرات التكوين

- **خاصية `live`**: تمت إزالة خاصية `live` من القواميس. استخدم `importMode: 'fetch'` بدلاً منها.
- **importMode**: تم إهمال خاصية `build.importMode` في التكوين. استخدم `dictionary.importMode` بدلاً منها.
- **`contentDir` و `codeDir`**: أصبح `contentDir` مخصّصًا الآن لملفات المحتوى. تمت إضافة خاصية جديدة `codeDir` لتحويل الكود. إذا لم يتم تعيين `codeDir`، فسيقوم Intlayer بالرجوع إلى `contentDir` وتسجيل تحذير.
- **التحقق من المخطط (Schema Validation)**: لاستخدام ميزة `schema` الجديدة، تأكد من تثبيت `zod` في مشروعك.

---

## روابط مفيدة

- [مرجع التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md)
- [توثيق ملف المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md)
- [توثيق محتوى HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/html.md)
- [توثيق محتوى Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/markdown.md)
- [توثيق إعادة كتابة عناوين URL المخصصة](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/custom_url_rewrites.md)
