كيفية اختيار مكتبة Svelte i18n المناسبة

لا توفر Svelte أي أدوات مدمجة للتدويل (i18n). لا يوجد $t، ولا عنصر أولي للغة (locale primitive)، ولا تنسيق للرسائل. كل خيار هو خيار من طرف ثالث (third-party)، والنظام البيئي لـ Svelte هو المكان الذي ذهب فيه التدويل في وقت التحويل البرمجي (compile-time i18n) إلى أبعد مدى، لذا تختلف الخيارات عن بعضها البعض بشكل أكبر مما هي عليه في React أو Vue.

يسرد هذا الدليل الأسئلة التي يجب الإجابة عليها أولاً، ثم يطابق الإجابات مع svelte-i18n و Paraglide و typesafe-i18n و wuchale و Intlayer، لكل من Vite + Svelte و SvelteKit.

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

ستة أسئلة للإجابة عليها قبل مقارنة المكتبات

1. تطبيق Vite SPA أم SvelteKit؟ في تطبيق SPA، يُعد استخدام store على مستوى الوحدة (module-level store) أمراً صحيحاً: تبويب واحد، مستخدم واحد، لغة واحدة. أما في SvelteKit، تتم مشاركة نفس الـ singleton عبر الطلبات المتزامنة (concurrent requests) على الخادم، مما يؤدي إلى تصيير الطلب B بلغة الطلب A. إما أن توفر لك المكتبة هيكلاً لكل طلب (context أو locals) أو تترك مسؤولية بنائه عليك.
2. من يكتب الترجمات؟ المطورون، أم نظام إدارة الترجمة (TMS)، أم وكالة تسلم نصوص ICU، أم خط أنابيب ذكاء اصطناعي (AI pipeline). تدعم svelte-i18n تنسيق ICU، بينما تستخدم Paraglide و typesafe-i18n صيغتها الخاصة. طابق بين الأداة ومصدر الترجمات.
3. كم عدد اللغات والصفحات؟ لغتان وخمس صفحات يمكنها تضمين كل شيء في الحزمة. أما عشر لغات وأربعون مساراً فلا يمكنها ذلك، ويصبح الفرق بين كتالوجات وقت التشغيل (runtime catalogs) والرسائل المترجمة وقت البناء (compiled messages) هو التكلفة الأساسية.
4. هل تحتاج إلى أمان الأنواع على المفاتيح (types on keys)؟ كتابة $_("cart.totl") تؤدي إلى فشل أثناء وقت التشغيل (runtime failure) في svelte-i18n. بينما تجعل مكتبات وقت التحويل البرمجي (compile-time) ذلك خطأ في الأنواع (type error) بشكل تلقائي.
5. مخازن Svelte 4 stores أم Svelte 5 runes؟ تغير الـ runes طريقة كتابة حالة اللغة (locale state)، ولكنها لا تحل مشكلة المشاركة (sharing problem). كما أن $state في ملف .ts يُترجم إلى متغير عادي، لذا يجب أن يكون وقت تشغيل المكتبة (library runtime) متوافقاً مع الـ runes إذا كنت تستخدم Svelte 5.
6. هل يمكنك قبول وجود ملفات مُنشأة تلقائياً (generated files) في المستودع؟ تنشئ كل من Paraglide و typesafe-i18n ملفات JavaScript أو TypeScript داخل شجرة الشيفرة المصدرية (source tree). بعض الفرق تقبل ذلك، بينما تواجه فرق أخرى تعارضات دمج (merge conflicts) في كل فرع موازٍ.

اكتب الإجابات، فكل ما يلي يستند إليها.

المشهد العام في صورة واحدة

وصل تدويل Svelte لاحقاً مقارنة بـ React أو Vue، وتخطى المراحل الأولى مباشرة إلى موجات وقت التحويل البرمجي (compile-time).

يغطي مقال تاريخ JavaScript i18n كل موجة بالتفصيل.

القرار الأكثر أهمية: أين يعيش المحتوى ومتى يتم تحميله

يحدد خياران هيكليان معظم الفرق في حجم الحزمة بين الإعدادات المختلفة:

• المحتوى المركزي أو المخصص لكل مكون (Centralized vs Scoped). ملف locales/en.json واحد للتطبيق بالكامل، أو إعلان محتوى مستقل لكل مكون.
• الاستيراد الثابت أو الديناميكي (Static vs Dynamic import). تحميل كل شيء عند بدء التشغيل، أو جلب اللغة النشطة (ومسار الصفحة النشط) عند الطلب.

يوضح الرسم البياني التقديري حجم البيانات المنقولة (payload) لتطبيق نظري يحتوي على 1 إلى 10 صفحات، مترجم إلى 1 إلى 10 لغات، مع حوالي 30 كيلوبايت من النصوص لكل صفحة.

تقع svelte-i18n في أعلى اليسار افتراضياً: يمنحك استخدام register("fr", () => import("./fr.json")) تحميلاً ديناميكياً لكل لغة، ولكن كتالوج اللغة هو كائن واحد يؤدي تحميله إلى تحميل نصوص كل الصفحات. تُعد Paraglide حالة مثيرة للاهتمام: نظراً لأن كل رسالة هي تصدير مستقل، فإن الـ tree-shaking يمنحك ميزة التقسيم حسب الصفحة مجاناً، ويؤكد اختبار أداء Svelte (benchmark) أنها تعمل كما هو معلن مع Vite + Svelte (بينما لم تكن كذلك في اختبارات أداء React و Next.js). وتصل Intlayer إلى نفس النتيجة عبر إعلانات المحتوى لكل مكون.

إذا كانت إجابتك على السؤال الثالث هي "صفحات كثيرة"، فامنح هذا القسم وزناً أكبر من أي تفضيل لـ API. يغطي مقال التدويل لكل مكون مقابل التدويل المركزي جانب الصيانة لنفس المقايضة.

المكتبات المرشحة

أحجام المكتبات مأخوذة من اختبار أداء Svelte (benchmark): حجم الـ store بالإضافة إلى دالة الوصول (accessor) في مكون فارغ، بعد التجميع (bundling) والـ tree-shaking والضغط (minification)، على تطبيق مكون من 10 صفحات و 10 لغات. يتم قياس المحتوى بشكل منفصل.

الأرقام تمثل لقطة لإصدارات الاختبار. قم بتشغيل الاختبار على تطبيقك الخاص قبل اتخاذ القرار بناءً على الحجم فقط.

حجم مكتبة Paraglide الشبه منعدم هو نتيجة لتصميمها: يتم إنشاء وقت التشغيل (runtime) مباشرة داخل مستودعك. وتحتاج Intlayer إلى vite-intlayer، لذا لا يمكن تشغيلها بدون خطوة بناء (build step).

مطابقة إجاباتك مع المكتبة المناسبة

نقاط القصور في كل مكتبة

• svelte-i18n: الأثقل في المجموعة، لا توفر أنواعاً للمفاتيح، ولا تقسيماً لكل مسار، وتستخدم store على مستوى الوحدة يسرب الحالة عبر الطلبات في SvelteKit ما لم تقم بربط الـ context بنفسك.
• typesafe-i18n: تتطلب عملية مراقبة (watcher process)، وتنشئ ملفات داخل المستودع، والمستودع لم يشهد نشاطاً كبيراً مؤخراً.
• Paraglide: ملفات مُنشأة يتم تضمينها في المستودع وإعادة إنشائها قبل كل push، وتعارضات دمج في الفروع المتوازية، وتتم قراءة اللغة من ملفات تعريف الارتباط أو التخزين في كل استدعاء رسالة بدلاً من قراءتها من store، مما يتطلب جهداً إضافياً عند تغيير اللغة.
• wuchale: فكرة استخراج نصوص مثيرة للاهتمام، لكنها لا تزال في مراحلها الأولى. واجه اختبار أداء React مشاكل في التفاعلية تطلبت إعادة تصيير المزود قسراً، كما أن التوثيق محدود.
• Intlayer: تتطلب إضافة بناء إلزامية (build plugin)، ولها نظام بيئي أصغر، ودعم جزئي لـ ICU، والمحتوى موزع عبر قاعدة الشيفرة بالتصميم، لذا يتطلب تصدير ملف JSON واحد للمترجم أدوات مخصصة.

كيف تبدو كل مكتبة في الشيفرة البرمجية

المكون نفسه، ملخص عربة التسوق مع عنوان وصيغة جمع، مكتوب بكل مكتبة مرشحة. الجزء المثير للاهتمام ليس كود الواجهة، بل أين يعيش المحتوى، وكيف يتم تخزين اللغة، وما يعرفه فاحص الأنواع (type checker).

{
  "cart": {
    "title": "Your cart",
    "items": "{count, plural, one {# item} other {# items}}"
  }
}

<script lang="ts">
  import { _ } from "svelte-i18n";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$_("cart.title")}</h2>
  <p>{$_("cart.items", { values: { count } })}</p>
</section>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script lang="ts">
  import { m } from "$lib/paraglide/messages.js";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{m.cart_title()}</h2>
  <p>{m.cart_items({ count })}</p>
</section>

import type { BaseTranslation } from "../i18n-types";

const en = {
  cart: {
    title: "Your cart",
    items: "{count} item{{s}}",
  },
} satisfies BaseTranslation;

export default en;

<script lang="ts">
  import LL from "$i18n/i18n-svelte";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$LL.cart.title()}</h2>
  <p>{$LL.cart.items({ count })}</p>
</section>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({
      ar: "عربة التسوق الخاصة بك",
      en: "Your cart",
      fr: "Votre panier",
      es: "Tu carrito",
    }),
    items: t({
      ar: plural({ one: "{{count}} عنصر", other: "{{count}} عناصر" }),
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script lang="ts">
  import { useIntlayer } from "svelte-intlayer";

  let { count }: { count: number } = $props();
  const content = useIntlayer("cart-summary");
</script>

<section>
  <h2>{$content.title}</h2>
  <p>{$content.items(count)}</p>
</section>

هل تستخدم svelte-i18n بالفعل؟ يقوم محول التوافق @intlayer/svelte-i18n بإنشاء اسم مستعار (alias) للحزمة على مستوى أداة الحزم (bundler) حتى تستمر $_ و $date و $number ومفاتيحك المسطحة في العمل بينما تتولى Intlayer توفير المحتوى.

قبل أن تلتزم باختيارك

يخبرك جدول الميزات بما تفعله المكتبة اليوم. وتخبرك هذه النقاط بما ستكون عليه تجربة العمل معها على المدى الطويل.

تحقق من نشاط المستودع.

الالتزامات البرمجية (commits)، وسرعة الاستجابة للمشكلات (issues)، وما إذا كان آخر إصدار فرعي قد صدر هذا العام. التصميم المتين بدون مشرف صيانة هو مجرد هجرة مستقبلية مؤجلة.

لا تختر بناءً على عدد مرات التنزيل من npm.

المكتبة الأكثر تنزيلاً هي التي صدرت أولاً، وليست بالضرورة الأنسب لقاعدة شيفرة Svelte في عام 2026. تقيس التنزيلات التاريخ وليس الملاءمة.

اسأل من يمول المشرف، وماذا يبيعون.

تحظى svelte-i18n بدعم من Crowdin، تماماً مثل next-intl و vue-i18n. وتدعم Locize مكتبة i18next. وتدير كل من Tolgee و Paraglide (inlang) و Intlayer منصتها الخاصة. المزود الذي يعتمد دخله على الترجمة المستضافة ليس لديه حافز كبير لجعل الترجمة مجانية داخل أدوات التطوير الخاصة بك. وتُعد Intlayer الوحيدة في المجموعة التي توفر ترجمة بالذكاء الاصطناعي عبر CLI باستخدام مفتاح API الخاص بك، ونظام إدارة محتوى (CMS) يمكنك استضافته ذاتياً.

هل المكتبة جاهزة للعمل مع وكلاء الذكاء الاصطناعي (AI agents)؟

لا يزال وكلاء الذكاء الاصطناعي يواجهون صعوبة مع التدويل: فهم ينسون اللغات، ويخترعون مفاتيح، ويخلطون بين تنسيقات الرسائل. هل توفر المكتبة مهارات الوكيل (Agent Skills) أو خادم MCP حتى يتمكن الوكيل من سرد المحتوى وملئه واختباره؟ وهل تم تحسين تحميل المحتوى افتراضياً، أم يتعين على شخص ما مراجعة مساحات الأسماء والاستيراد الكسول كل ثلاثة أشهر؟

أمان الأنواع مباشرة بعد التثبيت (Type safety out of the box).

ليس "يمكن دعمه بالأنواع عبر إعدادات إضافية" بل "المفتاح الخاطئ يفشل فحص tsc في التثبيت الجديد مباشرة". تحقق مما يحدث مع مفتاح غير موجود، ومع لغة تفتقد إلى ترجمة واحدة.

اكتشاف المحتوى غير المستخدم.

الكتالوجات تنمو دائماً ولا تتقلص تلقائياً. يقوم بناء Intlayer بإزالة الحقول غير المستخدمة وتسجيلها (build.purge). وتحقق Paraglide ذلك معمارياً، حيث يتم استبعاد دوال الرسائل غير المستدعاة عبر tree-shaking. أما باقي الخيارات فتترك مهمة التنظيف لك.

تجربة المطور (Developer experience).

الوقت المستغرق من التثبيت حتى ظهور أول نص مترجم، ووجود LSP أو إضافة VS Code تعرض الترجمة عند التمرير وتنتقل إلى الإعلان، و CLI للملء والاختبار والنشر، وطريقة تتيح لغير المطورين تعديل المحتوى (المحرر المرئي أو CMS) بدون الحاجة إلى pull request.

الأسئلة الشائعة

للمزيد من التفاصيل

• اختبار أداء Svelte i18n: حجم الحزمة، والتسرب، وتوقيت تبديل اللغة
• تدويل Svelte: المخازن، والـ runes، وفخ مستوى الوحدة و تدويل SvelteKit: التوجيه، و SSR، والحالة المشتركة
• محول التوافق البديل لـ svelte-i18n
• تاريخ JavaScript i18n
• التدويل عبر المترجم مقابل التدويل التصريحي
• التدويل لكل مكون مقابل التدويل المركزي
• كيف يعمل تحسين الحزمة في وقت البناء
• إعداد i18n في تطبيق Vite + Svelte وفي تطبيق SvelteKit
• نفس الدليل لكل من React و Vue و Solid