Auto-Animate Launches Marko 6 Adapter, Animates Lists with One Tag

Auto-Animate ਨੇ Marko 6 ਲਈ ਆਪਣਾ ਪਹਿਲਾ ਅਧਿਕਾਰਤ ਐਡਾਪਟਰ ਜਾਰੀ ਕੀਤਾ ਹੈ, ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ JavaScript ਦੇ, ਸਿਰਫ਼ ਇੱਕ ਟੈਗ ਨਾਲ ਲਿਸਟ ਦੇ ਬਦਲਾਅ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਕਦਮ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿਉਂਕਿ ਇਹ ਉਸ ਬੋਇਲਰਪਲੇਟ (boiler-plate) ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ ਜਿਸ ਕਾਰਨ ਲੰਬੇ ਸਮੇਂ ਤੋਂ Marko ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਮੋਸ਼ਨ ਨੂੰ ਇੱਕ ਵਿਸ਼ੇਸ਼-ਕੇਸ ਕੋਸ਼ਿਸ਼ ਵਾਂਗ ਮਹਿਸੂਸ ਕੀਤਾ ਜਾਂਦਾ ਰਿਹਾ ਹੈ।

Marko ਦਾ ਰੈਂਡਰਿੰਗ ਮਾਡਲ ਕਲਾਇੰਟ-ਸਾਈਡ “hydration” ਸਟੈਪ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ ਜਿਸ 'ਤੇ React ਜਾਂ Vue ਵਰਗੇ ਫਰੇਮਵਰਕ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਸਰਵਰ ਦੁਆਰਾ HTML ਭੇਜਣ ਤੋਂ ਬਾਅਦ, Marko ਸਿੱਧਾ ਉਸ ਮਾਰਕਅੱਪ ਨੂੰ ਉੱਥੇ ਹੀ ਜਾਰੀ ਰੱਖਦਾ ਹੈ, ਜੋ ਬੰਡਲ ਦੇ ਆਕਾਰ ਨੂੰ ਬਹੁਤ ਛੋਟਾ ਰੱਖਦਾ ਹੈ—ਰਨਟਾਈਮ ਲਈ ਗਜ਼ਿਪਡ (gzipped) ਲਗਭਗ 7 KB। ਹਾਲਾਂਕਿ, ਇਹੀ ਸ਼ਾਰਟਕੱਟ ਕਈ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਜੋ ਇਫੈਕਟਸ ਲਗਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਰੈਂਡਰ ਦੀ ਉਡੀਕ ਕਰਦੀਆਂ ਹਨ। ਪਹਿਲਾਂ ਮੌਜੂਦ DOM ਵਿੱਚ ਹੁੱਕ (hook) ਨਾ ਹੋਣ ਕਰਕੇ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਰਵਾਇਤੀ ਤੌਰ 'ਤੇ ਹਰ ਲਿਸਟ ਅਪਡੇਟ ਲਈ ਕਸਟਮ ਕੋਡ ਲਿਖਣਾ ਪੈਂਦਾ ਸੀ।

ਨਵਾਂ ਐਡਾਪਟਰ Marko ਦੇ onMount ਲਾਈਫਸਾਈਕਲ ਵਿੱਚ ਹੁੱਕ ਕਰਕੇ ਉਸ ਸੀਮਾ ਤੋਂ ਬਚਦਾ ਹੈ। ਜਦੋਂ ਕੋਈ ਕੰਪੋਨੈਂਟ ਮਾਊਂਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਐਡਾਪਟਰ ਇੱਕ MutationObserver ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਲਿਸਟ ਦੇ ਪੇਰੈਂਟ ਨੋਡ ਵਿੱਚ ਹੋਣ ਵਾਲੇ ਬਦਲਾਅ ਨੂੰ ਦੇਖਦਾ ਹੈ। ਜਿਵੇਂ ਹੀ ਆਈਟਮਾਂ ਨੂੰ ਪੁਸ਼, ਫਿਲਟਰ ਜਾਂ ਸ਼ਫਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਆਬਜ਼ਰਵਰ auto-animate ਦੇ ਬਿਲਟ-ਇਨ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਇੰਜਣ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ, ਜੋ ਆਪਣੇ ਆਪ ਸਮੂਥ ਐਂਟਰੀ, ਐਗਜ਼ਿਟ ਅਤੇ ਰੀਆਰਡਰ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਸਭ ਕੁਝ ਇੱਕ ਸਿੰਗਲ <auto-animate> ਟੈਗ ਦੇ ਪਿੱਛੇ ਹੁੰਦਾ ਹੈ।

ਟੈਗ ਤਿੰਨ ਐਟਰੀਬਿਊਟਸ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ:

• parent – ਇੱਕ Marko ਟੈਗ ਵੇਰੀਏਬਲ ਜੋ ਲਿਸਟ ਕੰਟੇਨਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ।
• options – ਡਿਊਰੇਸ਼ਨ, ਈਜ਼ਿੰਗ ਅਤੇ ਹੋਰ ਟਾਈਮਿੰਗ ਸੈਟਿੰਗਾਂ ਲਈ ਇੱਕ ਆਬਜੈਕਟ।
• enabled – ਇੱਕ ਰੀਐਕਟਿਵ ਬੂਲੀਅਨ ਜੋ ਰਨਟਾਈਮ 'ਤੇ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਚਾਲੂ ਜਾਂ ਬੰਦ ਕਰ ਸਕਦਾ ਹੈ।

ਕਿਉਂਕਿ 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 ਦੇ ਆਉਣ ਵਾਲੇ ਕੰਪੋਨੈਂਟ-ਲੇਵਲ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨਾਂ ਨਾਲ ਇੱਕਤਾ, ਸੰਭਵ ਤੌਰ 'ਤੇ ਭਾਈਚਾਰਕ ਫੀਡਬੈਕ ਦੁਆਰਾ ਰੂਪ ਲਵੇਗਾ। ਜੇਕਰ ਅਪਣਾਉਣ ਦੀ ਦਰ React ਅਤੇ Vue ਵਿੱਚ auto-animate ਦੀ ਤੇਜ਼ੀ ਨਾਲ ਵਧਦੀ ਵਰਤੋਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਤਾਂ ਅਸੀਂ JavaScript UI ਈਕੋਸਿਸਟਮ ਵਿੱਚ “ਜ਼ੀਰੋ-ਕੋਡ” ਮੋਸ਼ਨ ਲਈ ਇੱਕ ਵਿਆਪਕ ਦਬਾਅ ਦੇਖ ਸਕਦੇ ਹਾਂ।

Takeaway: Auto-Animate ਦਾ Marko 6 ਐਡਾਪਟਰ ਇੱਕ ਇਤਿਹਾਸਕ ਤੌਰ 'ਤੇ ਮੁਸ਼ਕਲ ਕੰਮ—ਸਰਵਰ-ਰੈਂਡਰਡ ਲਿਸਟਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਾ—ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਡਿਕਲੇਰੇਟਿਵ ਟੈਗ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਇੱਕ ਤੁਰੰਤ, ਟੌਗਲ-ਏਬਲ ਮੋਸ਼ਨ ਲੇਅਰ ਦਿੰਦੇ ਹੋਏ Marko ਦੇ ਨਿਮਨਤਮ ਬੰਡਲ ਸਾਈਜ਼ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ।