في الأسبوع القادم سأقوم بدمج هذا الطلب الذي يسمح للمواضيع والمكونات بإجراء اختبارات QUnit، لكنه يغير أيضًا طريقة معالجة/تحويل كود JavaScript الخاص بالمواضيع بواسطة Discourse. جعل هذه التغييرات متوافقة مع الإصدارات السابقة أمر صعب للغاية دون إعادة هيكلة الكثير من الكود في النواة (وهو ما قد يؤدي على الأرجح إلى إدخال تغييرات أخرى غير متوافقة مع الإصدارات السابقة)، لذا قد تؤدي هذه التغييرات إلى تعطيل كود JavaScript الخاص بمواضيعك/مكوناتك عند ترقية موقعك.
في هذه المشاركة سأشرح التغييرات التي قد تؤثر على مواضيعك/مكوناتك وما يجب عليك فعله لإصلاحها.
1. سيتم استدعاء كود JavaScript داخل وسوم <script type="text/discourse-plugin"> مع تفعيل الوضع الصارم
هذا التغيير لا يؤثر على كود JavaScript الموجود خارج وسوم <script type="text/discourse-plugin">. أنت في أمان تام من هذا التغيير إذا كان كودك داخل وسوم <script> عادية أو في ملفات .js مستقلة.
أسهل طريقة لمعرفة ما إذا كان موضوعك/مكونك يتأثر بهذا التغيير هو تغليف كود JavaScript الخاص بك داخل دالة تُنفذ فورًا (IIFE) ووضع "use strict"; في أعلى الكود. على سبيل المثال، لنفترض أن كود موضوعك يبدو هكذا حاليًا:
<script type="text/discourse-plugin" version="0.8.11">
a = 5;
console.log(a);
</script>
بعد تغليفه داخل IIFE، يجب أن يبدو هكذا ("use strict"; مهم لأنه يفعّل الوضع الصارم ونريد اختبار كيفية تصرف كودنا في هذا الوضع):
<script type="text/discourse-plugin" version="0.8.11">
(function() {
"use strict";
a = 5;
console.log(a);
})();
</script>
إذا توقف مكونك عن العمل بعد القيام بذلك، فهذا يعني أنه سيتعطل عند ترقية موقعك. لإصلاح كودك، أنصحك بشدة بقراءة وثائق MDN الخاصة بالوضع الصارم في JavaScript أولاً، ثم التحقق مما إذا كان موضوعك/مكونك يقوم بأي شيء محظور في الوضع الصارم. إذا كان كذلك، فستحتاج إلى إعادة هيكلة كودك بحيث لا يقوم بأي شيء محظور.
الخطأ الأكثر شيوعًا الذي ستواجهه هو ReferenceError عند تعريف متغير دون استخدام الكلمة المفتاحية var (أو let/const). في المثال أعلاه، ستؤدي السطر a = 5; إلى طرح استثناء ReferenceError في الوضع الصارم لأننا نسينا إضافة var. يبدو الكود هكذا بعد إصلاحه:
<script type="text/discourse-plugin" version="0.8.11">
(function() {
"use strict";
var a = 5;
console.log(a);
})();
</script>
بمجرد الانتهاء من اختبار/إصلاح كودك، لا تتردد في إزالة الـ IIFE وخط "use strict";.
2. سيتم إضافة بادئة لمسارات وحدات JavaScript الخاصة بالمواضيع تحتوي على معرفات المواضيع.
قبل فترة أضفنا ميزة جديدة سمحت بتقسيم كود JavaScript الخاص بالمواضيع إلى ملفات متعددة، وأحتاج إلى تقديم بعض السياق حول هذه الميزة لتوضيح التغيير القادم.
عند تثبيت موضوع/مكون يأتي مع ملفات JavaScript مستقلة على مثيلة Discourse، يقوم Discourse بالمرور على جميع ملفات JavaScript وإنشاء وحدة JavaScript لكل ملف. تحتاج كل وحدة إلى معرف فريد (أي مسار)، لذا يستخدم Discourse مسار الملف (مع بعض التغييرات البسيطة) كمسار للوحدة.
على سبيل المثال، إذا كان لديك ملف في javascripts/discourse/helpers/my-helper.js ضمن موضوعك/مكونك، فسيقوم Discourse بإنشاء وحدة لهذا الملف وتعيين discourse/helpers/my-helper كمسار لها، وستحتوي الوحدة على نسخة محولة من كود JavaScript الموجود داخل الملف الأصلي.
الميزة الجميلة في الوحدات هي أنه يمكنك استيراد فئات/دوال/كائنات إلخ من وحدة إلى أخرى. على سبيل المثال، يمكنك استيراد دالة تسمى xyz من my-helper إلى وحدات أخرى باستخدام جملة import كما يلي:
// javascripts/discourse/controllers/my-theme-controller.js
import { xyz } from "discourse/helpers/my-helper";
سأضيف الطلب الذي سأقوم بدمجه الأسبوع القادم بادئة لمسارات وحدات المواضيع. لذا في مثالنا، سيتغير my-helper من discourse/helpers/my-helper إلى discourse/theme-<theme_id>/helpers/my-helper. هذا يعني أن جملة import الخاصة بنا ستتوقف عن العمل لأن مسار الوحدة قد تغير. لإصلاح ذلك، نحتاج ببساطة إلى تغيير المسار في جملة import من مطلق إلى نسبي كما يلي:
// javascripts/discourse/controllers/my-theme-controller.js
import { xyz } from "../helpers/my-helper";
والآن يجب أن تعمل جملة import الخاصة بنا مرة أخرى. راجع هذين الطلبين 1 و 2 للحصول على أمثلة حقيقية للمكونات المتأثرة بالنقطة (2) وكيفية إصلاحها.
مرة أخرى، يؤثر هذا فقط على موضوعك/مكونك إذا كان يستورد من إحدى وحداته الخاصة؛ استيراد وحدات النواة لا يتأثر بهذا التغيير.
أتمنى أن يكون هذا مفيدًا. إذا كان لديك أي أسئلة، فلا تتردد في إخباري!
