Auto-animate ने Marko 6 के लिए एक आधिकारिक अडैप्टर रिलीज़ किया है, जिससे डेवलपर्स एक सिंगल टैग और बिना किसी कस्टम कोड के लिस्ट में होने वाले बदलावों को एनिमेट कर सकते हैं। इस पैकेज को npm के ज़रिए इंस्टॉल किया जा सकता है, इसे AutoAnimate के रूप में इम्पोर्ट किया जाता है और यह जोड़ (additions), हटाने (removals) और क्रम बदलने (reorders) के लिए सीधे काम करता है।

Marko को इसकी आवश्यकता क्यों थी

Marko का रेंडरिंग मॉडल सामान्य हाइड्रेशन (hydration) स्टेप को छोड़ देता है। सर्वर HTML स्ट्रीम करता है, क्लाइंट ठीक उसी बिंदु से "रिज्यूम" करता है जहाँ सर्वर ने छोड़ा था, और कोई दूसरा रेंडर कंपोनेंट ट्री को दोबारा नहीं बनाता है। क्योंकि यह फ्रेमवर्क बहुत ही कम जावास्क्रिप्ट के साथ आता है, इसलिए कोई भी अतिरिक्त लाइब्रेरी जो भारी रनटाइम इंजेक्ट करती है, उस फायदे को खत्म कर देगी।

नया अडैप्टर सीधे उन रियल DOM नोड्स से जुड़ जाता है जिन्हें Marko पहले से ही डिलीवर करता है। यह एक MutationObserver बनाता है—जो एक ब्राउज़र API है और DOM में होने वाले बदलावों पर नज़र रखता है—और जब भी लिस्ट का अंतर्निहित डेटा बदलता है, तो यह auto-animate के ट्रांज़िशन लॉजिक को ट्रिगर करता है। व्यवहार में, डेवलपर्स को केवल अपने डेटा को म्यूटेट (mutate) करना होता है; DOM अपने आप अपडेट और एनिमेट हो जाता है।

शुरुआत कैसे करें

  1. कोर पैकेज इंस्टॉल करें 

    npm install @formkit/auto-animate

  2. Marko-विशिष्ट अडैप्टर शामिल करें 

    import AutoAnimate from "@formkit/auto-animate/marko"

  3. लिस्ट के पैरेंट एलिमेंट को <AutoAnimate> के साथ रैप करें।

बस इतना ही। कोई हुक्स नहीं, कोई अतिरिक्त डायरेक्टिव्स नहीं, और कोई मैनुअल लाइफसाइकिल मैनेजमेंट नहीं।

Vite टिप

नए Vite प्रोजेक्ट्स में कभी-कभी अडैप्टर के लिए इम्पोर्ट एरर आता है। vite.config.ts में निम्नलिखित जोड़ने से यह हल हो जाता है:

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

इसे बाहर रखने से Vite के ऑप्टिमाइज़र के बजाय Marko का अपना प्लगइन पैकेज को हैंडल कर पाता है।

डेवलपर्स को क्या लाभ होगा

  • छोटा फुटप्रिंट (Tiny footprint) – अडैप्टर केवल DOM म्यूटेशन को ऑब्ज़र्व करने के लिए आवश्यक कोड जोड़ता है; यह Marko के पहले से ही हल्के बंडल को बढ़ाता नहीं है।
  • रिएक्टिव टॉगलिंग (Reactive toggling) – एक साधारण रिएक्टिव एट्रिब्यूट रनटाइम पर एनिमेशन को चालू या बंद कर सकता है।
  • ज़ीरो सेरेमनी (Zero ceremony) – प्रति-आइटम एनिमेशन लॉजिक लिखने या माउंट/अनमाउंट हुक्स को मैनेज करने की आवश्यकता नहीं है।
  • ऑटोमैटिक क्लीनअप – जब कंपोनेंट अनमाउंट होता है, तो यह टैग अपने ऑब्ज़र्वर को हटा देता है, जिससे मेमोरी लीक से बचाव होता है।

एक लाइव डेमो पूरे API को प्रदर्शित करता है, जिसमें बाउंस और स्प्रिंग-स्टाइल इफेक्ट्स के लिए वैकल्पिक प्लगइन्स भी शामिल हैं। सैंडबॉक्स लिंक मूल घोषणा में दिया गया है।

संभावित कमियां

अडैप्टर लिस्ट एनिमेशन पर केंद्रित है; अधिक जटिल कोरियोग्राफी (जैसे, असंबंधित एलिमेंट्स का स्टैगर्ड एंट्रेंस) के लिए अभी भी कस्टम कोड या किसी अलग लाइब्रेरी की आवश्यकता होती है। Vite का उपयोग करने वाले डेवलपर्स को कॉन्फ़िगरेशन में बदलाव याद रखना होगा, अन्यथा उन्हें इम्पोर्ट एरर का सामना करना पड़ेगा। अंत में, क्योंकि यह मैकेनिज्म MutationObserver पर निर्भर करता है, इसलिए बिना पूर्ण DOM वाले वातावरण (जैसे सर्वर-साइड रेंडरिंग टेस्ट) में एनिमेशन दिखाई नहीं देंगे, हालांकि वे UI को खराब भी नहीं करेंगे।

आगे क्या देखने को मिल सकता है

Auto-animate के मेंटेनरों ने अन्य फ्रेमवर्क्स के लिए अतिरिक्त अडैप्टर्स का संकेत दिया है जो Marko की "resume-from-HTML" फिलॉसफी को साझा करते हैं। यदि Marko प्लगइन लोकप्रिय साबित होता है, तो हम आने वाले महीनों में कम्युनिटी द्वारा योगदान किए गए एक्सटेंशन देख सकते हैं—जैसे कि ड्रैग-एंड-ड्रॉप सपोर्ट या स्टेट-मैनेजमेंट लाइब्रेरीज़ के साथ एकीकरण।

निष्कर्ष (Takeaway): auto-animate के डिक्लेरेटिव ट्रांज़िशन इंजन को Marko के मिनिमल-रनटाइम अप्रोच के साथ जोड़कर, नया अडैप्टर ऐसी लिस्ट एनिमेशन प्रदान करता है जिनका बंडल साइज़ पर लगभग कोई प्रभाव नहीं पड़ता और किसी अतिरिक्त कोड की आवश्यकता नहीं होती, जिससे डेवलपर अनुभव फ्रेमवर्क की तरह ही बेहद आसान बना रहता है।