أنماط التدويل (i18n)
تعلم كيفية التعامل مع التدويل (i18n) كعقد طبقة العرض، والتفكير في رسائل الترجمة، والجمع، والتنسيق، وتخطيط RTL، وتبديل اللغة كعناصر معمارية في React 19.
تبدأ العديد من تطبيقات React باستخدام لغة برمجة واحدة. تُكتب نصوص واجهة المستخدم مباشرةً داخل المكونات. تُنسق الأرقام وفقًا لسلوك المتصفح الافتراضي. تُعرض التواريخ بتنسيق مألوف. يفترض التصميم ترتيب القراءة من اليسار إلى اليمين. كل شيء يبدو واضحًا ومباشرًا. ثم يتوسع المنتج.
نضيف لغة ثانية ونقدم وظيفة ترجمة. يتم استبدال السلاسل النصية المضمنة بـt("key") يستمر الأمر على هذا النحو حتى نلاحظ وجود تشققات دقيقة.
تختلف قواعد الجمع بين اللغات. يصبح التمييز بين "عنصر واحد" و"عنصرين" أكثر تعقيدًا في اللغة العربية، التي تضم فئات جمع متعددة. يختلف سلوك الاستيفاء المتغير باختلاف ترتيب الكلمات. تتبع تنسيقات التواريخ والعملات الأعراف الإقليمية التي لا يمكن معالجتها بدمج السلاسل النصية. تعكس اللغات التي تُكتب من اليمين إلى اليسار اتجاه التخطيط، ولكن المسافات ومحاذاة الأيقونات وتدفق التنقل مصممة للتخطيطات التي تُكتب من اليسار إلى اليمين. يؤدي تغيير اللغة إلى وميض التطبيق بأكمله لأن ملفات الترجمة تُحمّل بشكل غير متزامن. تُعاد تحميل بعض المكونات، مما يؤدي إلى فقدان الحالة المحلية. تتغير بنية العناوين، مما يؤدي إلى تغيير الأسماء التي يمكن الوصول إليها أثناء التنقل.
تكمن المشكلة الأعمق في الجانب المعماري. فنحن نتعامل مع التدويل كطبقة لاستبدال النصوص بدلاً من كونه عقدًا للعرض. ولكن في React 19، يتم العرض بشكل متزامن ومرحلي وقائم على الحدود. تغيير اللغة ليس مجرد تعديل بسيط، بل هو بمثابة إعادة عرض التطبيق بالكامل وفقًا لإعدادات اللغة الجديدة. إذا لم يتم تصميم بيانات الترجمة وقواعد التنسيق والاتجاه كمدخلات ثابتة للعرض، فإن التزامن يكشف عن تناقضات: أسماء غير مستقرة يسهل الوصول إليها، وتحولات في التخطيط، وإعادة تحميل، وعدم تطابق في التنسيق. لذلك، فإن المشكلة التي نحلها في هذا الدرس ليست كيفية ترجمة النصوص، بل كيفية تصميم التدويل بحيث تتكامل اللغة والتنسيق والجمع واتجاه التخطيط بسلاسة في نموذج عرض React، مع الحفاظ على الاستقرار وإمكانية التنبؤ والسلامة من حيث التزامن.
في الرسم التخطيطي أعلاه، يستقبل I18nlocale قيمة من تفضيلات المستخدم. أسفلها يوجد حد سياق التدويل (I18n Context). يوفر هذا الحد ما يلي:
كتالوج رسائل الترجمة
قواعد التنسيق (الجمع، العدد، التاريخ)
الاتجاه (من اليسار إلى اليمين أو من اليمين إلى اليسار)
تقرأ جميع مكونات واجهة المستخدم من هذا السياق أثناء العرض. عند تغيير اللغة، يُهيئ React شجرة جديدة باستخدام كتالوج الرسائل الجديد وقواعد التنسيق. يتم تحديث اتجاه التخطيط في الحاوية الجذرية. يستبدل الالتزام النص والتنسيق بشكل ذري. يوضح الرسم التخطيطي أن اللغة تتدفق نزولاً إدخال ثابت، وليس كاستدعاءات ترجمة متناثرة عبر الشجرة.
التدويل إدخال عرض من الدرجة الأولى في React
يجب فهم التدويل في React إدخال أساسي لعملية العرض. فعند عرض أي مكون، لا يعتمد الأمر على الحالة والخصائص فحسب، بل يعتمد أيضًا على اللغة. تحدد اللغة فهرس الرسائل المستخدم، وكيفية التعامل مع الفئات الجمع، وكيفية استيفاء المتغيرات، وكيفية تنسيق الأرقام والتواريخ، وما إذا كان اتجاه تدفق التخطيط من اليسار إلى اليمين أو من اليمين إلى اليسار. لهذا السبب، يجب أن تكون اللغة في مستوى أعلى تمامًا مثل السمات أو موفري البيانات.
تتمثل الطبقة المعمارية الأولى في استخراج الرسائل . فبدلاً من تضمين سلاسل نصية حرفية داخل المكونات، نستخرج النص إلى رسائل ترجمة مُعرَّفة بمفاتيح ثابتة. تُعرِض المكونات مُعرِّفات الرسائل باستخدام متغيرات، وليس نصًا خامًا. وهذا يجعل اللغة تبعية بيانات خارجية بدلاً من منطق مضمَّن.
الطبقة الثانية هي التنسيق المُهيكل . يجب أن تكون عمليات الجمع، وتنسيق الأرقام، وإدراج متغير مُراعية للغة ومُحددة مسبقًا. بدلًا من إنشاء السلاسل النصية يدويًا، نعتمد على أدوات تنسيق تفهم فئات الجمع والقواعد الإقليمية. يصبح التنسيق وظيفةً خالصةً للغة والقيم.
الطبقة الثالثة هي العرض الاتجاهي . تتطلب بعض اللغات تخطيطًا من اليمين إلى اليسار. بدلًا من عكس الأنماط في كل مكون، نستخلص الاتجاه من اللغة ونطبقه على جذر المستند أو التطبيق. وبذلك، تستطيع أنظمة التخطيط الاستجابة تلقائيًا عند تغيير الاتجاه.
الطبقة الرابعة هي التحكم في تبديل اللغة . عندما يُغيّر المستخدم اللغة، يجب أن يتعامل React مع ذلك إدخال عرض جديد. يقوم مُزوّد السياق بتحديث اللغة، ويُهيّئ React شجرة جديدة ضمن هذا السياق، ويتم استبدال النص بشكل ذري. إذا تم تحميل ملفات الترجمة بشكل غير متزامن، يُمكن تغليف التبديل بانتقال للحفاظ على تفاعلية واجهة المستخدم الحالية أثناء إعداد الواجهة التالية.
النموذج الذهني مفتاح بسيط ولكنه قوي: التدويل ليس ميزة ثانوية. إنه اعتماد عالمي للعرض يشكل الدلالات والتنسيق واتجاه التخطيط.
مثال: استخدام إدخال كمدخل للعرض: تغيير اللغة دون التأثير على دلالات العرض
سنثبت الآن صحة النموذج الذهني من خلال بناء واجهة مستخدم صغيرة حيث تكون اللغة إدخال رئيسي للعرض. سيقوم التطبيق بما يلي:
استخراج النص إلى رسائل الترجمة.
التعامل مع الجمع والتنسيق والاستيفاء متغير .
ادعم الكتابة من اليمين إلى اليسار عن طريق عكس الاتجاه عند حدود التطبيق.
قم بتنفيذ تبديل اللغة عبر السياق. ...