أصدر Auto-Animate أول محول (adapter) رسمي له لـ Marko 6، مما يتيح للمطورين تحريك تغييرات القائمة باستخدام وسم واحد ودون الحاجة إلى JavaScript إضافي. وتكمن أهمية هذه الخطوة في أنها تزيل الكود المتكرر (boilerplate) الذي جعل إضافة الحركة في مشاريع Marko لفترة طويلة تبدو وكأنها مجهود خاص ومستقل.

يتخطى نموذج الرندرة (rendering model) في Marko خطوة الـ "hydration" في جانب العميل التي تعتمد عليها أطر عمل مثل React أو Vue. فبعد أن يرسل الخادم كود HTML، يقوم Marko ببساطة باستئناف ذلك التنسيق في مكانه، مما يحافظ على صغر حجم الحزم — حوالي 7 كيلوبايت فقط عند ضغطها بصيغة gzipped لوقت التشغيل (runtime). ومع ذلك، فإن هذا الاختصار نفسه يمنع العديد من مكتبات الرسوم المتحركة التي تنتظر عملية الرندرة في جانب العميل قبل أن تتمكن من إرفاق التأثيرات. وبدون وجود رابط (hook) في الـ DOM الموجود بالفعل، كان على المطورين تقليديًا كتابة كود مخصص لكل تحديث للقائمة.

يتجاوز المحول الجديد هذا القيد من خلال الربط بدورة حياة onMount في Marko. فعندما يتم تحميل المكون (mount)، ينشئ المحول MutationObserver يراقب العقدة الأب للقائمة بحثًا عن أي تغييرات. ومع إضافة العناصر أو تصفيتها أو إعادة ترتيبها، يقوم المراقب بتشغيل محرك الانتقالات المدمج في auto-animate، مما يوفر حركات دخول وخروج وإعادة ترتيب سلسة تلقائيًا. كل هذا يحدث خلف وسم <auto-animate> واحد.

يقبل الوسم ثلاث سمات (attributes):

  • parent – متغير وسم Marko يشير إلى حاوية القائمة.
  • options – كائن (object) لضبط المدة، وتسهيل الحركة (easing)، وإعدادات التوقيت الأخرى.
  • enabled – قيمة منطقية تفاعلية (reactive boolean) يمكنها تشغيل الرسوم المتحركة أو إيقافها أثناء وقت التشغيل.

نظرًا لأن enabled تفاعلية، يمكن للمطورين ربطها بأي قيمة حالة (state value) وتبديل الحركة دون المساس بالـ DOM أو إعادة كتابة المعالجات (handlers). وبذلك يوفر المحول مرونة أكبر من التوجيهات الثابتة مع بقائه غير مرئي لبقية شجرة المكونات.

بالنسبة للفرق التي تستخدم Vite، قد تتسبب الحزمة في ظهور تحذير "unresolved import". ويمكن حل هذه المشكلة بإضافة ما يلي إلى vite.config.ts:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

يخبر هذا Vite بالسماح لإضافة (plugin) Marko بالتعامل مع الاستيراد بدلاً من محاولة تجميعه مسبقًا.

الفائدة العملية فورية. فقائمة Marko النموذجية التي كانت تتطلب سابقًا خطاف useEffect وتبديل الفئات (classes) يدويًا وعدة أسطر من كود الرسوم المتحركة، يمكن الآن كتابتها كما يلي:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

بدون JavaScript إضافي، وبدون زيادة في حجم الحزمة، ومع نفس الحركة السلسة التي يوفرها auto-animate لأطر العمل الأخرى.

من الرابح ومن المراقب؟

ستحصل فرق الواجهة الأمامية (front-end) التي اعتمدت Marko بالفعل على حل جاهز لنمط متكرر في واجهة المستخدم — القوائم الديناميكية. وتحافظ الطبيعة الخفيفة للمحول على ميزة Marko المتمثلة في صغر حجم الحزم، وهو أمر بالغ الأهمية للمواقع التي تتطلب أداءً عاليًا. ومن ناحية أخرى، يركز المحول حاليًا على تغييرات القوائم؛ لذا سيضطر المطورون الذين يحتاجون إلى تحكم مخصص في الجدول الزمني أو تنسيق حركات معقد إلى العودة إلى الكود المخصص أو استخدام مكتبة أخرى.

ما الذي يجب مراقبته لاحقًا

المحول مفتوح المصدر ويوجد بالفعل بيئة تجريبية (demo sandbox) مرتبطة في ملاحظات الإصدار. ومن المرجح أن تشكل ملاحظات المجتمع التوسعات المستقبلية، مثل دعم إعادة تدفق الشبكة (grid reflows) أو التكامل مع انتقالات مستوى المكون القادمة في Marko. وإذا عكس منحنى الاعتماد التبني السريع لـ auto-animate في React و Vue، فقد نشهد دفعًا أوسع نحو الحركة "بدون كود" (zero-code) عبر منظومة واجهات مستخدم JavaScript.

الخلاصة: يحول محول Auto-Animate لـ Marko 6 مهمة كانت مرهقة تاريخيًا — وهي تحريك القوائم التي يتم رندرتها من جانب الخادم — إلى وسم واحد وصفي، مما يحافظ على حجم حزمة Marko الأدنى مع منح المطورين طبقة حركة فورية وقابلة للتبديل.