Auto-Animate তাদের Marko 6-এর জন্য প্রথম অফিসিয়াল অ্যাডাপ্টার রিলিজ করেছে, যা ডেভেলপারদের একটি মাত্র ট্যাগ ব্যবহার করে এবং কোনো অতিরিক্ত JavaScript ছাড়াই লিস্টের পরিবর্তনগুলো অ্যানিমেট করতে সাহায্য করবে। এই পদক্ষেপটি গুরুত্বপূর্ণ কারণ এটি সেই বাড়তি কোড (boiler-plate) দূর করে যা দীর্ঘ সময় ধরে Marko প্রজেক্টে মোশন বা অ্যানিমেশন করাকে একটি বিশেষ প্রচেষ্টার মতো করে তুলেছিল।

Marko-র রেন্ডারিং মডেল React বা Vue-এর মতো ফ্রেমওয়ার্কগুলোর ওপর নির্ভরশীল ক্লায়েন্ট-সাইড “hydration” ধাপটি এড়িয়ে চলে। সার্ভার HTML পাঠানোর পর, Marko সরাসরি সেই মার্কআপটি পুনরায় ব্যবহার করে, যা বান্ডেল সাইজকে অত্যন্ত ছোট রাখে—রানটাইমের জন্য গিপড (gzipped) অবস্থায় এটি মাত্র ৭ KB। তবে, এই একই শর্টকাট অনেক অ্যানিমেশন লাইব্রেরির ক্ষেত্রে বাধা হয়ে দাঁড়ায়, কারণ তারা ইফেক্ট যুক্ত করার আগে ক্লায়েন্ট-সাইড রেন্ডারের জন্য অপেক্ষা করে। ইতিমধ্যে বিদ্যমান DOM-এ কোনো হুক না থাকায়, ডেভেলপারদের ঐতিহ্যগতভাবে প্রতিটি লিস্ট আপডেটের জন্য কাস্টম কোড লিখতে হতো।

নতুন অ্যাডাপ্টারটি Marko-র onMount লাইফসাইকেলে হুক করার মাধ্যমে সেই সীমাবদ্ধতা কাটিয়ে ওঠে। যখন একটি কম্পোনেন্ট মাউন্ট হয়, অ্যাডাপ্টারটি একটি MutationObserver তৈরি করে যা লিস্টের প্যারেন্ট নোডের পরিবর্তনগুলো পর্যবেক্ষণ করে। যখন আইটেমগুলো পুশ (push), ফিল্টার বা শাফেল (shuffle) করা হয়, তখন এই অবজারভার auto-animate-এর বিল্ট-ইন ট্রানজিশন ইঞ্জিনকে ট্রিগার করে, যা স্বয়ংক্রিয়ভাবে মসৃণ এন্ট্রি, এক্সিট এবং রিয়ারর্ডার অ্যানিমেশন প্রদান করে। এই সবকিছুই একটি মাত্র <auto-animate> ট্যাগের মাধ্যমে ঘটে।

ট্যাগটি তিনটি অ্যাট্রিবিউট গ্রহণ করে:

  • parent – একটি Marko ট্যাগ ভেরিয়েবল যা লিস্ট কন্টেইনারকে নির্দেশ করে।
  • options – ডিউরেশন (duration), ইজিং (easing) এবং অন্যান্য টাইমিং সেটিংসের জন্য একটি অবজেক্ট।
  • enabled – একটি রিঅ্যাক্টিভ বুলিয়ান (boolean) যা রানটাইমে অ্যানিমেশন চালু বা বন্ধ করতে পারে।

যেহেতু enabled রিঅ্যাক্টিভ, তাই ডেভেলপাররা এটিকে যেকোনো স্টেট ভ্যালুর সাথে বাইন্ড করতে পারেন এবং DOM পরিবর্তন না করেই বা হ্যান্ডলার পুনরায় না লিখেই মোশন টগল করতে পারেন। ফলে, অ্যাডাপ্টারটি কম্পোনেন্ট ট্রির বাকি অংশের জন্য অদৃশ্য থেকেও একটি স্ট্যাটিক ডিরেক্টিভের চেয়ে অনেক বেশি নমনীয়তা প্রদান করে।

যারা Vite ব্যবহার করছেন, তাদের ক্ষেত্রে প্যাকেজটি “unresolved import” ওয়ার্নিং দিতে পারে। vite.config.ts-এ নিচের অংশটি যোগ করলে এই সমস্যাটি সমাধান হয়ে যাবে:

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

এটি Vite-কে নির্দেশ দেয় যেন এটি প্রি-বান্ডেল করার চেষ্টা না করে Marko-র প্লাগইনকে ইমপোর্ট হ্যান্ডেল করতে দেয়।

এর ব্যবহারিক সুবিধা তাৎক্ষণিক। একটি সাধারণ Marko লিস্ট, যার জন্য আগে useEffect হুক, ম্যানুয়াল ক্লাস টগল এবং অ্যানিমেশন কোডের বেশ কিছু লাইনের প্রয়োজন হতো, সেটি এখন এভাবে লেখা সম্ভব:

<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 অন্যান্য ফ্রেমওয়ার্কের জন্য যে মসৃণ মোশন প্রদান করে, ঠিক সেই একই মোশন এখানেও পাওয়া যাবে।

কারা লাভবান হচ্ছে, কারা পর্যবেক্ষণ করছে

ফ্রন্ট-এন্ড টিম যারা ইতিমধ্যে Marko গ্রহণ করেছে, তারা একটি সাধারণ UI প্যাটার্ন—ডায়নামিক লিস্টের জন্য একটি তৈরি সমাধান পেয়ে গেল। অ্যাডাপ্টারটির হালকা প্রকৃতি Marko-র ছোট বান্ডেল সাইজের বৈশিষ্ট্য বজায় রাখে, যা পারফরম্যান্স-ক্রিটিক্যাল সাইটের জন্য অত্যন্ত গুরুত্বপূর্ণ। অন্যদিকে, অ্যাডাপ্টারটি বর্তমানে শুধুমাত্র লিস্ট মিউটেশনের ওপর ফোকাস করে; যেসব ডেভেলপারদের কাস্টম টাইমলাইন কন্ট্রোল বা জটিল কোরিওগ্রাফির প্রয়োজন, তাদের এখনও কাস্টম কোড বা অন্য কোনো লাইব্রেরির ওপর নির্ভর করতে হবে।

পরবর্তীতে যা লক্ষ্যণীয়

অ্যাডাপ্টারটি ওপেন-সোর্স এবং রিলিজ নোটের সাথে একটি ডেমো স্যান্ডবক্স লিঙ্ক করা আছে। কমিউনিটির মতামত সম্ভবত ভবিষ্যতে এর সম্প্রসারণের পথ দেখাবে, যেমন গ্রিড রিফ্লো (grid reflows) সাপোর্ট বা Marko-র আসন্ন কম্পোনেন্ট-লেভেল ট্রানজিশনের সাথে ইন্টিগ্রেশন। যদি এর গ্রহণের হার React এবং Vue-তে auto-animate-এর দ্রুত জনপ্রিয়তার মতো হয়, তবে আমরা JavaScript UI ইকোসিস্টেম জুড়ে “zero-code” মোশনের একটি ব্যাপক প্রসার দেখতে পারি।

সারকথা: Auto-Animate-এর Marko 6 অ্যাডাপ্টার একটি ঐতিহাসিকভাবে জটিল কাজ—সার্ভার-রেন্ডার করা লিস্ট অ্যানিমেট করা—কে একটি মাত্র ডিক্লেয়ারেটিভ ট্যাগে রূপান্তরিত করেছে, যা Marko-র মিনিমাল বান্ডেল সাইজ বজায় রেখে ডেভেলপারদের একটি তাৎক্ষণিক, টগল-যোগ্য মোশন লেয়ার প্রদান করে।