أصدر Auto-animate محولاً (adapter) رسمياً لـ Marko 6، مما يتيح للمطورين تحريك تغييرات القائمة باستخدام وسم واحد ودون الحاجة إلى كتابة كود مخصص. يمكن تثبيت الحزمة عبر npm، واستيرادها باسم AutoAnimate؛ وهي تعمل مباشرة (out-of-the-box) مع عمليات الإضافة والحذف وإعادة الترتيب.
لماذا احتاج Marko إلى ذلك
يتخطى نموذج الرندرة (rendering) في Marko خطوة الـ hydration المعتادة. يقوم الخادم ببث HTML، ويستأنف العميل العمل من النقطة التي توقف عندها الخادم تماماً، ولا تقوم عملية رندرة ثانية بإعادة بناء شجرة المكونات. ولأن الإطار البرمجي يأتي مع القليل جداً من JavaScript، فإن أي مكتبة إضافية تقوم بحقن وقت تشغيل (runtime) ثقيل ستلغي هذه الميزة.
يتصل المحول الجديد مباشرة بعقد DOM الحقيقية التي يوفرها Marko بالفعل. يقوم بإنشاء MutationObserver — وهو واجهة برمجة تطبيقات (API) للمتصفح تراقب التغييرات في الـ DOM — ويقوم بتفعيل منطق الانتقال الخاص بـ auto-animate كلما تغيرت البيانات الأساسية للقائمة. من الناحية العملية، يتعين على المطورين فقط تغيير بياناتهم؛ وسيقوم الـ DOM بالتحديث والتحريك تلقائياً.
البدء
تثبيت الحزمة الأساسية
npm install @formkit/auto-animateجلب المحول الخاص بـ Marko
import AutoAnimate from "@formkit/auto-animate/marko"تغليف العنصر الأب للقائمة باستخدام
<AutoAnimate>.
هذا كل شيء. لا حاجة لـ hooks، ولا توجيهات إضافية، ولا إدارة يدوية لدورة حياة المكون (lifecycle management).
نصيحة لمستخدمي Vite
أحياناً تظهر مشاريع Vite الجديدة خطأ في الاستيراد (import error) للمحول. إضافة ما يلي إلى vite.config.ts يحل هذه المشكلة:
optimizeDeps: {
exclude: ["@formkit/auto-animate"]
}
يسمح هذا الاستثناء لإضافة (plugin) Marko الخاصة بالتعامل مع الحزمة بدلاً من مُحسِّن Vite (Vite’s optimizer).
ما الذي يكتسبه المطورون
- بصمة برمجية ضئيلة – يضيف المحول فقط الكود اللازم لمراقبة تغييرات الـ DOM؛ ولا يتسبب في تضخم حجم حزمة Marko الرشيقة بالفعل.
- تبديل تفاعلي – يمكن لخاصية تفاعلية (reactive attribute) بسيطة تشغيل الرسوم المتحركة أو إيقافها أثناء وقت التشغيل.
- بدون تعقيدات إضافية – لا حاجة لكتابة منطق تحريك لكل عنصر أو إدارة hooks الـ mount/unmount.
- تنظيف تلقائي – يقوم الوسم بالتخلص من المراقب (observer) الخاص به عند إلغاء تثبيت المكون (unmount)، مما يمنع تسرب الذاكرة (memory leaks).
يعرض العرض التجريبي المباشر واجهة برمجة التطبيقات (API) الكاملة، بما في ذلك الإضافات الاختيارية لتأثيرات الارتداد (bounce) والزنبرك (spring-style). يتوفر رابط الـ sandbox في الإعلان الأصلي.
السلبيات المحتملة
يركز المحول على تحريك القوائم؛ أما التنسيق الأكثر تعقيداً (مثل الدخول المتتابع لعناصر غير مرتبطة) فلا يزال يتطلب كوداً مخصصاً أو مكتبة مختلفة. يجب على المطورين الذين يستخدمون Vite تذكر تعديل الإعدادات، وإلا سيواجهون خطأ في الاستيراد. أخيراً، ولأن الآلية تعتمد على MutationObserver فإن البيئات التي تفتقر إلى DOM كامل (مثل اختبارات الرندرة من جانب الخادم - SSR) لن تظهر فيها الرسوم المتحركة، رغم أنها لن تؤدي إلى تعطل واجهة المستخدم أيضاً.
ما الذي يجب ترقبه لاحقاً
ألمح القائمون على صيانة Auto-animate إلى وجود محولات إضافية لأطر عمل أخرى تشارك Marko فلسفة "الاستئناف من HTML". إذا أثبتت إضافة Marko شعبيتها، فقد نرى إضافات يساهم بها المجتمع — مثل دعم السحب والإفلات أو التكامل مع مكتبات إدارة الحالة (state-management) — تظهر في الأشهر القادمة.
الخلاصة: من خلال الجمع بين محرك الانتقالات التصريحي (declarative) الخاص بـ auto-animate ونهج Marko القائم على الحد الأدنى من وقت التشغيل (minimal-runtime)، يوفر المحول الجديد رسوماً متحركة للقوائم لا تكلف شيئاً تقريباً من حيث حجم الحزمة ولا تتطلب أي كود إضافي، مما يحافظ على تجربة مطور سلسة تماماً مثل الإطار البرمجي نفسه.