توطين تطبيق التفاعل

مرحبا بالجميع!

لم يتبق سوى أيام قليلة حتى العام الجديد. صادفت قائمة الحالات التي كنت سأفعلها في عام 2019 ، ومن بينها تبين أن كتابة مقال عن هبر. حان الوقت للهبوط في السيارة الصادرة).

سأقوم بالحجز على الفور ، PR دراجتي ، إذا كنت لا تحب ذلك ، فيمكنك تخطي المقال بأمان.

ما هو التعريب؟

من خلال التعريب فيما بعد ، سوف نفهم عملية تكييف التطبيق مع لغات ومناطق مختلفة. الترجمة لا تتعلق فقط بترجمة النص. من الممتع للمستخدمين رؤية التنسيق المعتاد للتواريخ والقيم النقدية ، وحتى الفواصل في الأرقام يمكن أن تلعب دورًا.

حافز

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

ما أردت من مكتبة الترجمة

1. دعم قواعد ICU
2. تنسيق التاريخ
3. تنسيق الأرقام

ماذا حدث

رابط إلى جيثب .

استند إلى المكتبة الأكثر شعبية (وفقًا لتحليل النجمة) لتوطين تفاعل React لتطبيق React. تحت الغطاء ، يستخدم react-int حزمة محلل intl-messageformat الذي يبني شجرة AST. وفقا ل bundlephobia ، حجم كبير هو ما يأخذ المحلل اللغوي. إنه غير مكتوب باليد ، ولكنه يستخدم PEG.js. لقد كتبت هذه الأغراض الخاصة بي ، والتي تزن 6 أضعاف. من المحتمل جدًا أن أفتقد أي قضية ، وسأكون ممتنًا إذا أخبرني أحدهم.

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

وبالتالي ، كانت الحزمة @ eo-locale / core ، والتي لا ترتبط عمومًا بأي إطار أو مكتبة ويمكن استخدامها بمرونة كبيرة.

رد فعل

إصدار React عبارة عن مجموعة من المكونات والسنانير.

لبدء استخدام eo-locale لف التطبيق في Provider.

 import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { hello: 'Hello {name}!' } }, ]; <EOLocale.Provider language="en" locales={locales}> <span> <EOLocale.Text id="hello" name="World" /> // Helo World! </span> </EOLocale.Provider> 

تنسيق الأرقام متاح من خلال Proxying خصائص Intl.NumberFormat القياسية

 import { EOLocale } from 'eo-locale'; <EOLocale.Number value={1000} /> // 1,000 <EOLocale.Number value={1000} currency="EUR" maximumFractionDigits={2} minimumFractionDigits={2} style="currency" /> // €1,000.00 

يتم تنفيذ تنسيق التواريخ بالمثل:

 import { EOLocale } from 'eo-locale'; <EOLocale.Date value={new Date(2019, 2, 19)} /> // 3/19/2019 <EOLocale.Date value={new Date(2019, 2, 19)} day="numeric" month="long" year="numeric" weekday="long" /> // Tuesday, March 19, 2019 

يمكن أيضًا تنفيذ كل ما سبق ليس من خلال المكونات ، ولكن باستخدام خطاف useTranslator :

 import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; } 

واحدة من المزايا المهمة على المكتبات الأخرى المماثلة هي القدرة على استخدام المكونات كدعائم. على سبيل المثال ، لديك مكون منقطع Money من Money ، والذي يعرض القيمة في لون واحد ، وتوقيع العملة في آخر وتحتاج إلى إدراج بعض المبلغ في الإعدادات المحلية:

 import { EOLocale } from 'eo-locale'; import { Money } from '...somewhere'; const locales = [ { language: 'en', messages: { total: 'Total price is {price}' } }, ]; <EOLocale.Text id="total" price={<Money amount={1000} />} /> // Total price is €1,000.00 

هناك أيضا القدرة على عرض القيم الجمع. يتم تنفيذه باستخدام Intl.PluralRules .

 import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { items: '{count, plural, one {You have one item} other {You have {count} items}}' } }, ]; <EOLocale.Text id="items" count={3} /> // You have 3 items 

Preact

يتم تنفيذ جميع الميزات نفسها ل Preact في الحزمة المقابلة.

بعض الميزات

المكتبة مكتوبة بالكامل في Typescript ، لذلك يخرج التايب من الصندوق.

منذ وقت ليس ببعيد ، واجهنا مشكلة أنه عند ترجمة رموز الخطأ التي يرسلها الخادم ، لم تكن هناك ترجمات على العميل. للقيام بذلك ، تمت إضافة الموفر القدرة على رمي معالج onIdMissing ، والذي يمكنك من خلاله تسجيل هذا النوع من الأخطاء.

استنتاج

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