Auto-Animate એ Marko 6 એડેપ્ટર લોન્ચ કર્યું, હવે માત્ર એક ટેગથી લિસ્ટ એનિમેટ કરો

Auto-Animate એ Marko 6 માટે તેનું પ્રથમ સત્તાવાર એડેપ્ટર રિલીઝ કર્યું છે, જે ડેવલપર્સને વધારાના JavaScript વગર માત્ર એક ટેગ દ્વારા લિસ્ટના ફેરફારોને એનિમેટ કરવાની સુવિધા આપે છે. આ પગલું મહત્વનું છે કારણ કે તે બોઈલરપ્લેટ (boilerplate) દૂર કરે છે, જેના કારણે લાંબા સમયથી Marko પ્રોજેક્ટ્સમાં મોશન (ગતિ) ઉમેરવી એ એક વિશેષ પ્રયાસ જેવું લાગતું હતું.

Marko નું રેન્ડરિંગ મોડલ React અથવા Vue જેવા ફ્રેમવર્ક પર આધારિત ક્લાયન્ટ-સાઇડ "hydration" સ્ટેપને સ્કીપ કરે છે. સર્વર HTML મોકલ્યા પછી, Marko તે માર્કઅપને તે જ જગ્યાએ ફરીથી શરૂ કરે છે, જેનાથી બંડલ સાઈઝ નાની રહે છે—રનટાઇમ માટે અંદાજે 7 KB gzipped. જોકે, આ જ શોર્ટકટ ઘણી એનિમેશન લાઇબ્રેરીઓને રોકે છે જે ઇફેક્ટ્સ જોડવા માટે ક્લાયન્ટ-સાઇડ રેન્ડરિંગની રાહ જોતી હોય છે. પહેલેથી હાજર DOM માં હૂક વગર, ડેવલપર્સ પરંપરાગત રીતે દરેક લિસ્ટ અપડેટ માટે કસ્ટમ કોડ લખવા માટે મજબૂર હતા.

નવું એડેપ્ટર Marko ના onMount લાઇફસાયકલ સાથે જોડાઈને તે મર્યાદાને દૂર કરે છે. જ્યારે કોઈ કમ્પોનન્ટ માઉન્ટ થાય છે, ત્યારે એડેપ્ટર એક MutationObserver બનાવે છે જે લિસ્ટના પેરેન્ટ નોડમાં થતા ફેરફારો પર નજર રાખે છે. જેમ જેમ આઇટમ્સ પુશ, ફિલ્ટર અથવા શફલ થાય છે, તેમ ઓબ્ઝર્વર auto-animate ના બિલ્ટ-ઇન ટ્રાન્ઝિશન એન્જિનને ટ્રિગર કરે છે, જે આપમેળે સ્મૂધ એન્ટ્રી, એક્ઝિટ અને રીઓર્ડર એનિમેશન આપે છે. આ બધું જ માત્ર એક <auto-animate> ટેગ દ્વારા થાય છે.

આ ટેગ ત્રણ એટ્રિબ્યુટ્સ સ્વીકારે છે:

• parent – એક Marko ટેગ વેરિએબલ જે લિસ્ટ કન્ટેનર તરફ નિર્દેશ કરે છે.
• options – ડ્યુરેશન, ઈઝિંગ અને અન્ય ટાઈમિંગ સેટિંગ્સ માટેનું એક ઓબ્જેક્ટ.
• 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 ની નાની બંડલ સાઈઝની વિશેષતા જાળવી રાખે છે, જે પરફોર્મન્સ-ક્રિટિકલ સાઇટ્સ માટે અત્યંત મહત્વપૂર્ણ છે. બીજી બાજુ, એડેપ્ટર હાલમાં લિસ્ટ મ્યુટેશન પર ધ્યાન કેન્દ્રિત કરે છે; જે ડેવલપર્સને કસ્ટમ ટાઈમલાઈન કંટ્રોલ અથવા જટિલ કોરિયોગ્રાફીની જરૂર છે, તેમણે હજુ પણ કસ્ટમ કોડ અથવા અન્ય લાઇબ્રેરીનો ઉપયોગ કરવો પડશે.

આગળ શું જોવું

એડેપ્ટર ઓપન-સોર્સ છે અને રિલીઝ નોટ્સમાંથી ડેમો સેન્ડબોક્સ લિંક કરેલું છે. કોમ્યુનિટી ફીડબેક સંભવતઃ ભવિષ્યના એક્સ્ટેન્શનને આકાર આપશે, જેમ કે ગ્રીડ રિફ્લો માટે સપોર્ટ અથવા Marko ના આગામી કમ્પોનન્ટ-લેવલ ટ્રાન્ઝિશન સાથે ઇન્ટિગ્રેશન. જો આ અપનાવવાનો વળાંક (adoption curve) React અને Vue માં auto-animate ના ઝડપી સ્વીકાર જેવો જ હશે, તો આપણે JavaScript UI ઇકોસિસ્ટમમાં "zero-code" મોશન માટે વ્યાપક પ્રયાસો જોઈ શકીએ છીએ.

મુખ્ય વાત: Auto-Animate નું Marko 6 એડેપ્ટર ઐતિહાસિક રીતે મુશ્કેલ કાર્ય—સર્વર-રેન્ડર કરેલા લિસ્ટને એનિમેટ કરવું—તેને એક સિંગલ ડિકલેરેટિવ ટેગમાં ફેરવે છે, જે Marko ની લઘુત્તમ બંડલ સાઈઝ જાળવી રાખવાની સાથે ડેવલપર્સને ઇન્સ્ટન્ટ, ટોગલ કરી શકાય તેવું મોશન લેયર આપે છે.