Auto-animate એ Marko 6 માટે સત્તાવાર એડેપ્ટર રિલીઝ કર્યું છે, જે ડેવલપર્સને કોઈપણ કસ્ટમ કોડ વગર માત્ર એક ટેગ સાથે લિસ્ટના ફેરફારોને એનિમેટ કરવાની સુવિધા આપે છે. આ પેકેજ npm દ્વારા ઇન્સ્ટોલ કરી શકાય છે, AutoAnimate તરીકે ઇમ્પોર્ટ થાય છે અને એડિશન (ઉમેરાવ), રીમુવલ (કાઢી નાખવા) અને રીઓર્ડર (ક્રમ બદલવા) માટે સીધું જ કામ કરે છે.

Marko ને આની જરૂર કેમ હતી

Marko નું રેન્ડરિંગ મોડેલ સામાન્ય હાઇડ્રેશન (hydration) સ્ટેપને સ્કીપ કરે છે. સર્વર HTML સ્ટ્રીમ કરે છે, ક્લાયન્ટ બરાબર તે જ બિંદુથી "રીઝ્યુમ" (resume) કરે છે જ્યાંથી સર્વર અટક્યું હતું, અને કોઈ બીજું રેન્ડરિંગ કમ્પોનન્ટ ટ્રીને ફરીથી બનાવતું નથી. કારણ કે આ ફ્રેમવર્ક લગભગ કોઈ JavaScript વગર આવે છે, તેથી કોઈપણ વધારાનું લાઇબ્રેરી જે હેવી રનટાઇમ ઇન્જેક્ટ કરે તે તેનો ફાયદો ઘટાડી શકે છે.

નવું એડેપ્ટર સીધું જ એવા રિયલ DOM નોડ્સ સાથે જોડાય છે જે Marko પહેલેથી જ ડિલિવર કરે છે. તે MutationObserver બનાવે છે—જે એક બ્રાઉઝર API છે જે DOM માં થતા ફેરફારો પર નજર રાખે છે—અને જ્યારે પણ લિસ્ટના અન્ડરલાઇંગ ડેટામાં ફેરફાર થાય ત્યારે auto-animate ના ટ્રાન્ઝિશન લોજિકને ટ્રિગર કરે છે. વ્યવહારમાં, ડેવલપર્સને માત્ર તેમનો ડેટા બદલવાનો રહે છે; 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 ના પહેલેથી જ લિન (lean) બંડલને વધારતું નથી.
  • રિએક્ટિવ ટોગલિંગ (Reactive toggling) – એક સાદું રિએક્ટિવ એટ્રિબ્યુટ રનટાઇમ પર એનિમેશનને ચાલુ અથવા બંધ કરી શકે છે.
  • ઝીરો સેરેમની (Zero ceremony) – દરેક આઇટમ માટે એનિમેશન લોજિક લખવાની અથવા માઉન્ટ/અનમાઉન્ટ હૂક્સ મેનેજ કરવાની જરૂર નથી.
  • ઓટોમેટિક ક્લીનઅપ (Automatic cleanup) – જ્યારે કમ્પોનન્ટ અનમાઉન્ટ થાય ત્યારે ટેગ તેના ઓબ્ઝર્વરને ડિસ્પોઝ કરે છે, જે મેમરી લીક અટકાવે છે.

એક લાઈવ ડેમો સંપૂર્ણ API દર્શાવે છે, જેમાં બાઉન્સ અને સ્પ્રિંગ-સ્ટાઇલ ઇફેક્ટ્સ માટેના વૈકલ્પિક પ્લગઇન્સનો સમાવેશ થાય છે. સેન્ડબોક્સ લિંક મૂળ જાહેરાતમાં આપવામાં આવી છે.

શક્ય ગેરફાયદા

એડેપ્ટર લિસ્ટ એનિમેશન પર ધ્યાન કેન્દ્રિત કરે છે; વધુ જટિલ કોરિયોગ્રાફી (દા.ત., અસંબંધિત એલિમેન્ટ્સનું સ્ટેગર્ડ એન્ટ્રન્સ) માટે હજુ પણ કસ્ટમ કોડ અથવા અલગ લાઇબ્રેરીની જરૂર પડે છે. Vite નો ઉપયોગ કરતા ડેવલપર્સે કોન્ફિગરેશનમાં ફેરફાર કરવાનું યાદ રાખવું પડશે, અન્યથા તેમને ઇમ્પોર્ટ એરર આવશે. છેલ્લે, કારણ કે આ મિકેનિઝમ MutationObserver પર આધારિત છે, જે વાતાવરણમાં સંપૂર્ણ DOM નથી (જેમ કે સર્વર-સાઇડ રેન્ડરિંગ ટેસ્ટ), ત્યાં એનિમેશન દેખાશે નહીં, જોકે તે UI ને બગાડશે નહીં.

આગળ શું જોવું

Auto-animate ના મેન્ટેનર્સ દ્વારા અન્ય ફ્રેમવર્ક માટે વધારાના એડેપ્ટર્સના સંકેત આપવામાં આવ્યા છે જે Marko ની "resume-from-HTML" ફિલોસોફી ધરાવે છે. જો Marko પ્લગઇન લોકપ્રિય સાબિત થાય છે, તો આપણે આગામી મહિનાઓમાં કોમ્યુનિટી દ્વારા યોગદાન આપેલા એક્સ્ટેન્શન જોઈ શકીએ છીએ—જેમ કે ડ્રેગ-એન્ડ-ડ્રોપ સપોર્ટ અથવા સ્ટેટ-મેનેજમેન્ટ લાઇબ્રેરીઓ સાથે ઇન્ટિગ્રેશન.

મુખ્ય વાત (Takeaway): auto-animate ના ડિકલેરેટિવ ટ્રાન્ઝિશન એન્જિનને Marko ના મિનિમલ-રનટાઇમ એપ્રોચ સાથે જોડીને, નવું એડેપ્ટર લિસ્ટ એનિમેશન પ્રદાન કરે છે જે બંડલ સાઇઝમાં લગભગ કંઈ જ ખર્ચતું નથી અને વધારાના કોડની જરૂર પડતી નથી, જે ડેવલપર એક્સપિરિયન્સને ફ્રેમવર્કની જેમ જ સરળ રાખે છે.