Auto-animate ने Marko 6 साठी अधिकृत अडॅप्टर (adapter) रिलीज केला आहे, ज्यामुळे डेव्हलपर्स एका सिंगल टॅगद्वारे आणि कोणत्याही कस्टम कोडशिवाय लिस्टमधील बदल ॲनिमेट करू शकतात. हे पॅकेज npm द्वारे उपलब्ध आहे, AutoAnimate म्हणून इम्पोर्ट केले जाते आणि नवीन आयटम जोडणे, काढून टाकणे आणि क्रम बदलणे (reorders) यासाठी थेट वापरता येते.

Marko ला याची गरज का होती

Marko चे रेंडरिंग मॉडेल नेहमीची hydration स्टेप वगळते. सर्व्हर HTML स्ट्रीम करतो, क्लायंट अगदी त्याच बिंदूपासून "resume" करतो जिथे सर्व्हर थांबला होता, आणि कोणताही दुसरा रेंडर कंपोनंट ट्री पुन्हा तयार करत नाही. हे फ्रेमवर्क अत्यंत कमी JavaScript सह येते, त्यामुळे कोणताही अतिरिक्त लायब्ररी जो जड (heavy) रनटाइम समाविष्ट करेल, तो या फायद्याला नष्ट करेल.

नवीन अडॅप्टर थेट त्या रिअल DOM नोड्सशी जोडला जातो जे Marko आधीच प्रदान करते. हे एक MutationObserver तयार करते—जे एक ब्राउझर API आहे आणि DOM मधील बदलांवर लक्ष ठेवते—आणि जेव्हा जेव्हा लिस्टचा मूळ डेटा बदलतो (mutates), तेव्हा auto-animate चे ट्रान्झिशन लॉजिक ट्रिगर करते. प्रत्यक्ष व्यवहारात, डेव्हलपर्सना फक्त त्यांचा डेटा बदलण्याची गरज असते; DOM आपोआप अपडेट होतो आणि ॲनिमेट होतो.

सुरुवात कशी करावी

  1. कोअर पॅकेज इंस्टॉल करा 

    npm install @formkit/auto-animate

  2. Marko-विशिष्ट अडॅप्टर मिळवा 

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

  3. लिस्टच्या पेरेंट एलिमेंटला <AutoAnimate> ने वेढून (wrap) घ्या.

बस एवढेच. कोणतेही हुक्स (hooks), अतिरिक्त डायरेक्टिव्ह्स (directives) किंवा मॅन्युअल लाइफसायकल मॅनेजमेंटची गरज नाही.

Vite टीप

नवीन Vite प्रोजेक्ट्समध्ये कधीकधी अडॅप्टरसाठी इम्पोर्ट एरर येतो. vite.config.ts मध्ये खालील गोष्टी जोडल्यास तो सुटेल:

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

या अपवर्जनामुळे (exclusion) Vite च्या ऑप्टिमायझरऐवजी Marko चे स्वतःचे प्लगइन या पॅकेजला हाताळू शकते.

डेव्हलपर्सना काय फायदा होईल

  • Tiny footprint – अडॅप्टर फक्त DOM mutations ऑब्झर्व्ह करण्यासाठी आवश्यक असलेला कोड जोडतो; यामुळे Marko च्या आधीच हलक्या (lean) बंडलचा आकार वाढत नाही.
  • Reactive toggling – एक साधा रिॲक्टिव्ह ॲट्रिब्युट रनटाइममध्ये ॲनिमेशन चालू किंवा बंद करू शकतो.
  • Zero ceremony – प्रत्येक आयटमसाठी ॲनिमेशन लॉजिक लिहिण्याची किंवा mount/unmount हुक्स मॅनेज करण्याची गरज नाही.
  • Automatic cleanup – जेव्हा कंपोनंट अनमाउंट (unmount) होतो, तेव्हा टॅग त्याचा ऑब्झर्व्हर काढून टाकतो, ज्यामुळे मेमरी लीक (memory leaks) टाळता येतात.

एक लाईव्ह डेमो पूर्ण API दर्शवतो, ज्यामध्ये bounce आणि spring-style इफेक्ट्ससाठी पर्यायी प्लगइन्सचा समावेश आहे. सँडबॉक्स लिंक मूळ घोषणेत (announcement) दिली आहे.

संभाव्य तोटे

हा अडॅप्टर लिस्ट ॲनिमेशनवर लक्ष केंद्रित करतो; अधिक जटिल कोरिओग्राफीसाठी (उदा. असंबद्ध घटकांचे टप्प्याटप्प्याने येणे/staggered entrance) अजूनही कस्टम कोड किंवा वेगळ्या लायब्ररीची आवश्यकता असते. Vite वापरणाऱ्या डेव्हलपर्सना कॉन्फिगमध्ये बदल करायला विसरता कामा नये, अन्यथा त्यांना इम्पोर्ट एरर येईल. शेवटी, ही यंत्रणा MutationObserver वर अवलंबून असल्याने, पूर्ण DOM नसलेल्या वातावरणात (जसे की सर्व्हर-साइड रेंडरिंग टेस्ट्स) ॲनिमेशन दिसणार नाहीत, तरीही त्यामुळे UI खराब होणार नाही.

पुढे काय पाहायचे

Auto-animate च्या मेंटेनर्सनी इतर फ्रेमवर्क्ससाठी देखील अतिरिक्त अडॅप्टर्सचे संकेत दिले आहेत जे Marko च्या "resume-from-HTML" तत्त्वज्ञानाचे पालन करतात. जर Marko प्लगइन लोकप्रिय ठरले, तर येत्या काही महिन्यांत आपण कम्युनिटी-कंट्रिब्युटेड एक्स्टेंशन्स—जसे की ड्रॅग-अँड-ड्रॉप सपोर्ट किंवा स्टेट-मॅनेजमेंट लायब्ररीसोबत इंटिग्रेशन—पाहू शकतो.

थोडक्यात सांगायचे तर: auto-animate चे डिक्लेरेटिव्ह ट्रान्झिशन इंजिन आणि Marko चा मिनिमल-रनटाइम दृष्टिकोन एकत्र करून, नवीन अडॅप्टर लिस्ट ॲनिमेशन प्रदान करतो ज्याचा बंडल साईजवर कोणताही परिणाम होत नाही आणि अतिरिक्त कोडचीही गरज पडत नाही, ज्यामुळे डेव्हलपरचा अनुभव फ्रेमवर्कप्रमाणेच सुलभ (frictionless) राहतो.