كيف يعمل Intlayer

نظرة عامة

دور Intlayer هو تفسير ملفات إعلان محتوى JavaScript إلى قواميس.

للقيام بذلك، يمر Intlayer بعدة خطوات:

1. إعلان ملفات المحتوى

   • يمكن تعريف ملفات المحتوى بتنسيقات مختلفة، مثل TypeScript، ECMAScript، CommonJS، أو JSON.
   • يمكن تعريف ملفات المحتوى في أي مكان في المشروع، مما يسمح بتحسين الصيانة وقابلية التوسع. من المهم احترام تقاليد امتداد الملف لملفات المحتوى. هذا الامتداد بشكل افتراضي هو *.content.{js|cjs|mjs|ts|tsx|json}، ولكن يمكن تعديله في ملف التكوين.

2. إنشاء القواميس

   • يتم إنشاء القواميس من ملفات المحتوى. بشكل افتراضي، يتم إنشاء قواميس intlayer في الدليل .intlayer/dictionary الخاص بالمشروع.
   • يمكن إنشاء نوعين من القواميس: قواميس intlayer وقواميس i18n (بيتا).

3. إنشاء أنواع القواميس

   • يتم إنشاء أنواع القواميس من قواميس intlayer. بشكل افتراضي، يتم إنشاء أنواع قواميس intlayer في الدليل .intlayer/types الخاص بالمشروع.

4. إنشاء زيادة وحدة Intlayer

   • زيادة وحدة Intlayer module augmentation هي ميزة TypeScript تسمح لك بتعريف أنواع إضافية لـ Intlayer. هذا يسهل تجربة التطوير من خلال اقتراح الحجج المتاحة أو الحجج المطلوبة. من بين الأنواع التي يتم إنشاؤها، تتم إضافة أنواع قواميس intlayer أو حتى أنواع تكوين اللغة إلى ملف types/intlayer.d.ts، ويتم استخدامها بواسطة حزم أخرى. للقيام بذلك، من الضروري أن يكون ملف tsconfig.json مكونًا لتضمين الدليل .intlayer/types الخاص بالمشروع.

5. مراقبة ملفات المحتوى

   • يتم مراقبة ملفات المحتوى ليتم إعادة تجديدها في كل مرة يتم تعديلها.

6. تفسير القواميس

   • أخيرًا، يتم تفسير القواميس ليتم استخدامها في التطبيقات.

الحزم

يتكون Intlayer من عدة حزم، كل منها له دور محدد في عملية الترجمة. إليك تمثيل رسومي لبنية هذه الحزمة:

intlayer

تستخدم حزمة intlayer في التطبيقات لإعلان المحتوى في ملفات المحتوى.

react-intlayer

تستخدم حزمة react-intlayer لتفسير قواميس intlayer وجعلها قابلة للاستخدام في تطبيقات React.

next-intlayer

تستخدم حزمة next-intlayer كطبقة فوق react-intlayer لجعل قواميس intlayer قابلة للاستخدام في تطبيقات Next.js. تقوم بتكامل الميزات الأساسية لجعل Intlayer يعمل في بيئة Next.js، مثل وسائط الترجمة، التوجيه، أو تكوين ملف next.config.js.

intlayer-editor

تستخدم حزمة intlayer-editor للسماح باستخدام المحرر المرئي. يمكن تثبيت هذه الحزمة الاختيارية في التطبيقات وسيتم استخدامها بواسطة حزمة react-intlayer. تتكون من جزئين: الخادم والعميل.

يحتوي العميل على عناصر واجهة المستخدم التي ستستخدمها حزمة react-intlayer.

يستخدم الخادم، المستند إلى Express، لاستقبال الطلبات المرئية للمحرر وإدارة أو تعديل ملفات المحتوى.

intlayer-cli

يمكن استخدام حزمة intlayer-cli لإنشاء قواميس باستخدام الأمر npx intlayer build. إذا كان intlayer مثبتًا بالفعل، يتم تثبيت cli تلقائيًا ولا تكون هذه الحزمة ضرورية.

@intlayer/core

حزمة @intlayer/core هي الحزمة الرئيسية لـ Intlayer. تحتوي على وظائف إدارة الترجمة والقواميس. تعتبر @intlayer/core متعددة المنصات وتستخدمها حزم أخرى لأداء تفسير القواميس.

@intlayer/config

تستخدم حزمة @intlayer/config لتكوين إعدادات Intlayer، مثل اللغات المتاحة ومعلمات وسائط Next.js أو إعدادات المحرر المدمج.

@intlayer/webpack

تستخدم حزمة @intlayer/webpack لإضافة مكونات تجميعية إلى Next.js وReact.

@intlayer/cli

تستخدم حزمة @intlayer/cli لضمان توحيد جميع أوامر intlayer CLI.

@intlayer/dictionaries-entry

حزمة @intlayer/dictionaries-entry هي حزمة ترجع فقط مسار الدخول لقواميس intlayer. نظرًا لأن البحث في نظام الملفات مستحيل من المتصفح، فإن استخدام المجمّعين مثل Webpack أو Rollup لاسترداد مسار دخول القواميس غير ممكن. تهدف هذه الحزمة إلى أن تكون معروفة بالاسم المستعار.

@intlayer/chokidar

تستخدم حزمة @intlayer/chokidar لمراقبة ملفات المحتوى وإعادة إنشاء القاموس المعدل في كل تعديل.