Auto-animate, Marko 6 కోసం అధికారిక అడాప్టర్‌ను విడుదల చేసింది, దీని ద్వారా డెవలపర్లు ఎటువంటి కస్టమ్ కోడ్ లేకుండా, కేవలం ఒకే ఒక ట్యాగ్‌తో లిస్ట్ మార్పులను యానిమేట్ చేయవచ్చు. ఈ ప్యాకేజీని npm ద్వారా ఇన్‌స్టాల్ చేయవచ్చు, AutoAnimate గా ఇంపోర్ట్ చేయవచ్చు మరియు ఇది అడిషన్స్ (additions), రిమూవల్స్ (removals) మరియు రీఆర్డర్స్ (reorders) కోసం నేరుగా పనిచేస్తుంది.

Marko కి ఇది ఎందుకు అవసరమైంది

Marko యొక్క రెండరింగ్ మోడల్ సాధారణ హైడ్రేషన్ (hydration) దశను దాటవేస్తుంది. సర్వర్ HTMLని స్ట్రీమ్ చేస్తుంది, క్లయింట్ సర్వర్ ఎక్కడ ఆగిందో అక్కడి నుండే "రీజ్యూమ్" (resume) చేస్తుంది, మరియు ఎటువంటి సెకండ్ రెండర్ కాంపోనెంట్ ట్రీని మళ్ళీ నిర్మించదు. ఈ ఫ్రేమ్‌వర్క్ దాదాపుగా ఎటువంటి జావాస్క్రిప్ట్ లేకుండా వస్తుంది కాబట్టి, భారీ రన్‌టైమ్‌ను ఇంజెక్ట్ చేసే ఏ అదనపు లైబ్రరీ అయినా ఆ ప్రయోజనాన్ని దెబ్బతీస్తుంది.

ఈ కొత్త అడాప్టర్ Marko ఇప్పటికే అందిస్తున్న రియల్ DOM నోడ్స్‌తో నేరుగా అనుసంధానించబడుతుంది. ఇది ఒక MutationObserverను సృష్టిస్తుంది—ఇది DOM మార్పులను గమనించే బ్రౌజర్ API—మరియు లిస్ట్ యొక్క అండర్లయింగ్ డేటా మ్యుటేట్ (mutate) అయినప్పుడల్లా 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 మ్యుటేషన్లను గమనించడానికి అవసరమైన కోడ్‌ను మాత్రమే జోడిస్తుంది; ఇది Marko యొక్క ఇప్పటికే తక్కువ పరిమాణంలో ఉన్న బండిల్‌ను పెంచదు.
  • Reactive toggling – ఒక సాధారణ రియాక్టివ్ ఆట్రిబ్యూట్ (reactive attribute) ద్వారా రన్‌టైమ్‌లో యానిమేషన్లను ఆన్ లేదా ఆఫ్ చేయవచ్చు.
  • Zero ceremony – ప్రతి ఐటెమ్ కోసం యానిమేషన్ లాజిక్‌ను రాయాల్సిన లేదా మౌంట్/అన్‌మౌంట్ (mount/unmount) హుక్స్‌ను మేనేజ్ చేయాల్సిన అవసరం లేదు.
  • Automatic cleanup – కాంపోనెంట్ అన్‌మౌంట్ అయినప్పుడు, ఈ ట్యాగ్ తన అబ్జర్వర్‌ను డిస్పోజ్ చేస్తుంది, తద్వారా మెమరీ లీక్‌లను నివారిస్తుంది.

ఒక లైవ్ డెమో పూర్తి APIని చూపుతుంది, ఇందులో బౌన్స్ (bounce) మరియు స్ప్రింగ్-స్టైల్ (spring-style) ఎఫెక్ట్‌ల కోసం ఆప్షనల్ ప్లగిన్‌లు కూడా ఉన్నాయి. ఒరిజినల్ అనౌన్స్‌మెంట్‌లో శాండ్‌బాక్స్ లింక్ అందించబడింది.

ఉండగలిగే లోపాలు

ఈ అడాప్టర్ లిస్ట్ యానిమేషన్లపై దృష్టి పెడుతుంది; మరింత సంక్లిష్టమైన కొరియోగ్రఫీ (ఉదాహరణకు, సంబంధం లేని ఎలిమెంట్స్ యొక్క స్టాగర్డ్ ఎంట్రన్స్) కోసం ఇంకా కస్టమ్ కోడ్ లేదా వేరే లైబ్రరీ అవసరమవుతుంది. Vite ఉపయోగించే డెవలపర్లు కాన్ఫిగరేషన్ మార్పును గుర్తుంచుకోవాలి, లేకపోతే ఇంపోర్ట్ ఎర్రర్ ఎదురవుతుంది. చివరగా, ఈ మెకానిజం MutationObserverపై ఆధారపడి ఉండటం వల్ల, పూర్తి DOM లేని వాతావరణాలలో (సర్వర్-సైడ్ రెండరింగ్ టెస్ట్‌ల వంటివి) యానిమేషన్లు కనిపించవు, కానీ అవి UIని దెబ్బతీయవు.

తదుపరి ఏం చూడవచ్చు

Marko యొక్క “resume-from-HTML” ఫిలాసఫీని అనుసరించే ఇతర ఫ్రేమ్‌వర్క్‌ల కోసం అదనపు అడాప్టర్‌లను అందించనున్నట్లు Auto-animate మెయింటైనర్లు సూచించారు. Marko ప్లగిన్ ప్రాచుర్యం పొందితే, రాబోయే నెలల్లో డ్రాగ్-అండ్-డ్రాప్ సపోర్ట్ లేదా స్టేట్-మేనేజ్‌మెంట్ లైబ్రరీలతో ఇంటిగ్రేషన్ వంటి కమ్యూనిటీ-కంట్రిబ్యూటెడ్ ఎక్స్‌టెన్షన్లను మనం చూడవచ్చు.

ముఖ్య అంశం: auto-animate యొక్క డిక్లరేటివ్ ట్రాన్సిషన్ ఇంజిన్‌ను Marko యొక్క మినిమల్-రన్‌టైమ్ విధానంతో కలపడం ద్వారా, ఈ కొత్త అడాప్టర్ బండిల్ సైజులో దాదాపుగా ఏమీ ఖర్చు చేయకుండా మరియు ఎటువంటి అదనపు కోడ్ అవసరం లేకుండా లిస్ట్ యానిమేషన్లను అందిస్తుంది, తద్వారా డెవలపర్ అనుభవాన్ని ఫ్రేమ్‌వర్క్ వలె సులభంగా ఉంచుతుంది.