Auto-animate, Marko 6 ಗಾಗಿ ಅಧಿಕೃತ ಅಡಾಪ್ಟರ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳು ಯಾವುದೇ ಕಸ್ಟಮ್ ಕೋಡ್ ಇಲ್ಲದೆ ಕೇವಲ ಒಂದು ಟ್ಯಾಗ್ ಮೂಲಕ ಲಿಸ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಪ್ಯಾಕೇಜ್ ಅನ್ನು npm ಮೂಲಕ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬಹುದು, ಇದನ್ನು AutoAnimate ಎಂದು ಇಂಪೋರ್ಟ್ ಮಾಡಬಹುದು ಮತ್ತು ಇದು ಅಡಿಷನ್ (additions), ರಿಮೂವಲ್ (removals) ಮತ್ತು ರಿಯೋಡರ್ಸ್ (reorders) ಗಾಗಿ ತಕ್ಷಣವೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

Marko ಗೆ ಇದು ಏಕೆ ಅಗತ್ಯವಾಗಿತ್ತು

Marko ನ ರೆಂಡರಿಂಗ್ ಮಾಡೆಲ್ ಸಾಮಾನ್ಯ hydration ಹಂತವನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತದೆ. ಸರ್ವರ್ HTML ಅನ್ನು ಸ್ಟ್ರೀಮ್ ಮಾಡುತ್ತದೆ, ಕ್ಲೈಂಟ್ ಸರ್ವರ್ ಎಲ್ಲಿ ಬಿಟ್ಟಿದ್ದನೋ ಅಲ್ಲಿಂದಲೇ "resume" ಮಾಡುತ್ತದೆ, ಮತ್ತು ಯಾವುದೇ ಎರಡನೇ ರೆಂಡರ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಅನ್ನು ಮರುನಿರ್ಮಿಸುವುದಿಲ್ಲ. ಈ ಫ್ರೇಮ್‌ವರ್ಕ್ ಅತಿ ಕಡಿಮೆ JavaScript ಅನ್ನು ಹೊಂದಿರುವುದರಿಂದ, ಯಾವುದೇ ಹೆಚ್ಚಿನ ಲೈಬ್ರರಿಯು ಭಾರೀ ರನ್‌ಟೈಮ್ ಅನ್ನು ಸೇರಿಸಿದರೆ, ಆ ಪ್ರಯೋಜನವು ಇಲ್ಲದಂತಾಗುತ್ತದೆ.

ಹೊಸ ಅಡಾಪ್ಟರ್ Marko ಈಗಾಗಲೇ ನೀಡುವ ನೈಜ DOM ನೋಡ್‌ಗಳಿಗೆ ನೇರವಾಗಿ ಕನೆಕ್ಟ್ ಆಗುತ್ತದೆ. ಇದು MutationObserver ಅನ್ನು ರಚಿಸುತ್ತದೆ—ಇದು DOM ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸುವ ಒಂದು ಬ್ರೌಸರ್ API ಆಗಿದೆ—ಮತ್ತು ಲಿಸ್ಟ್‌ನ ಅಡಿಗಟ್ಟಿನ ಡೇಟಾ ಬದಲಾದಾಗಲೆಲ್ಲಾ auto-animate ನ ಟ್ರಾನ್ಸಿಶನ್ ಲಾಜಿಕ್ ಅನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡುತ್ತದೆ. ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಡೇಟಾವನ್ನು ಬದಲಾಯಿಸಿದರೆ ಸಾಕು; DOM ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ ಮತ್ತು ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ.

ಪ್ರಾರಂಭಿಸುವುದು ಹೇಗೆ

  1. ಕೋರ್ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ 

    npm install @formkit/auto-animate

  2. Marko-ನಿರ್ದಿಷ್ಟ ಅಡಾಪ್ಟರ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಿ 

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

  3. ಲಿಸ್ಟ್‌ನ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು <AutoAnimate> ಮೂಲಕ ಸುತ್ತುವರಿಯಿರಿ (wrap).

ಅಷ್ಟೇ. ಯಾವುದೇ ಹುಕ್ಸ್ ಇಲ್ಲ, ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಡೈರೆಕ್ಟಿವ್‌ಗಳಿಲ್ಲ, ಯಾವುದೇ ಮ್ಯಾನುಯಲ್ ಲೈಫ್‌ಸೈಕಲ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಇಲ್ಲ.

Vite ಟಿಪ್

ಹೊಸ Vite ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಕೆಲವೊಮ್ಮೆ ಅಡಾಪ್ಟರ್‌ನಿಂದ ಇಂಪೋರ್ಟ್ ಎರ್ರರ್ ಅನ್ನು ತೋರಿಸಬಹುದು. vite.config.ts ಗೆ ಈ ಕೆಳಗಿನದ್ದನ್ನು ಸೇರಿಸುವುದರಿಂದ ಇದನ್ನು ಪರಿಹರಿಸಬಹುದು:

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

ಈ ಹೊರಗಿಡುವಿಕೆಯು (exclusion) Vite ನ ಆಪ್ಟಿಮೈಸರ್ ಬದಲಿಗೆ Marko ನ ಸ್ವಂತ ಪ್ಲಗಿನ್ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಿಗುವ ಪ್ರಯೋಜನಗಳು

  • Tiny footprint – ಅಡಾಪ್ಟರ್ DOM ಮ್ಯುಟೇಶನ್‌ಗಳನ್ನು ಗಮನಿಸಲು ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಸೇರಿಸುತ್ತದೆ; ಇದು Marko ನ ಈಗಾಗಲೇ ಕಡಿಮೆ ಇರುವ ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸುವುದಿಲ್ಲ.
  • Reactive toggling – ಒಂದು ಸರಳ ರಿಯಾಕ್ಟಿವ್ ಅಟ್ರಿಬ್ಯೂಟ್ ಮೂಲಕ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಆನ್ ಅಥವಾ ಆಫ್ ಮಾಡಬಹುದು.
  • Zero ceremony – ಪ್ರತಿ ಐಟೆಮ್‌ಗಾಗಿ ಅನಿಮೇಷನ್ ಲಾಜಿಕ್ ಬರೆಯುವ ಅಥವಾ ಮೌಂಟ್/ಅನ್ಮೌಂಟ್ ಹುಕ್ಸ್ ನಿರ್ವಹಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.
  • Automatic cleanup – ಕಾಂಪೊನೆಂಟ್ ಅನ್ಮೌಂಟ್ ಆದಾಗ ಈ ಟ್ಯಾಗ್ ತನ್ನ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ವಿಲೇವಾರಿ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯಬಹುದು.

ಲೈವ್ ಡೆಮೊವು ಬೌನ್ಸ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್-ಸ್ಟೈಲ್ ಎಫೆಕ್ಟ್‌ಗಳಿಗಾಗಿ ಐಚ್ಛಿಕ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಸಂಪೂರ್ಣ API ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್ ಲಿಂಕ್ ಅನ್ನು ಮೂಲ ಪ್ರಕಟಣೆಯಲ್ಲಿ ನೀಡಲಾಗಿದೆ.

ಸಂಭವನೀಯ ಅನಾನುಕೂಲಗಳು

ಅಡಾಪ್ಟರ್ ಲಿಸ್ಟ್ ಅನಿಮೇಷನ್‌ಗಳ ಮೇಲೆ ಗಮನ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ; ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಚೋರಿಯೋಗ್ರಫಿ (ಉದಾಹರಣೆಗೆ, ಸಂಬಂಧವಿಲ್ಲದ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಟ್ಯಾಗರ್ಡ್ ಎಂಟ್ರೆನ್ಸ್) ಗಾಗಿ ಇನ್ನೂ ಕಸ್ಟಮ್ ಕೋಡ್ ಅಥವಾ ಬೇರೆ ಲೈಬ್ರರಿ ಅಗತ್ಯವಿರುತ್ತದೆ. Vite ಬಳಸುವ ಡೆವಲಪರ್‌ಗಳು ಕಾನ್ಫಿಗರೇಶನ್ ಬದಲಾವಣೆಯನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಬೇಕು, ಇಲ್ಲದಿದ್ದರೆ ಇಂಪೋರ್ಟ್ ಎರ್ರರ್ ಎದುರಿಸಬೇಕಾಗುತ್ತದೆ. ಕೊನೆಯದಾಗಿ, ಈ ಮೆಕ್ಯಾನಿಸಂ MutationObserver ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವುದರಿಂದ, ಪೂರ್ಣ DOM ಇಲ್ಲದ ಪರಿಸರಗಳಲ್ಲಿ (ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಟೆಸ್ಟ್‌ಗಳಂತೆ) ಅನಿಮೇಷನ್‌ಗಳು ಕಾಣಿಸುವುದಿಲ್ಲ, ಆದರೆ ಅವು UI ಅನ್ನು ಹಾಳು ಮಾಡುವುದಿಲ್ಲ.

ಮುಂದೆ ಏನನ್ನು ಗಮನಿಸಬೇಕು

Auto-animate ನ ನಿರ್ವಾಹಕರು Marko ನ "resume-from-HTML" ತತ್ವವನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಇತರ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಗಾಗಿ ಹೆಚ್ಚುವರಿ ಅಡಾಪ್ಟರ್‌ಗಳ ಬಗ್ಗೆ ಸುಳಿವು ನೀಡಿದ್ದಾರೆ. Marko ಪ್ಲಗಿನ್ ಜನಪ್ರಿಯವಾಗಿದ್ದರೆ, ಮುಂದಿನ ತಿಂಗಳುಗಳಲ್ಲಿ ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ಸಪೋರ್ಟ್ ಅಥವಾ ಸ್ಟೇಟ್-ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಇಂಟಿಗ್ರೇಷನ್‌ನಂತಹ ಸಮುದಾಯದ ಕೊಡುಗೆಯಾಗಿ ವಿಸ್ತರಣೆಗಳನ್ನು ನಾವು ನೋಡಬಹುದು.

Takeaway: Auto-animate ನ ಡೆಕ್ಲರೇಟಿವ್ ಟ್ರಾನ್ಸಿಶನ್ ಇಂಜಿನ್ ಅನ್ನು Marko ನ ಮಿನಿಮಲ್-ರನ್‌ಟೈಮ್ ವಿಧಾನದೊಂದಿಗೆ ಜೋಡಿಸುವ ಮೂಲಕ, ಹೊಸ ಅಡಾಪ್ಟರ್ ಬಂಡಲ್ ಗಾತ್ರದಲ್ಲಿ ಏನನ್ನೂ ಖರ್ಚು ಮಾಡದ ಮತ್ತು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಕೋಡ್ ಅಗತ್ಯವಿಲ್ಲದ ಲಿಸ್ಟ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಷ್ಟೇ ಸುಲಭವಾಗಿರಿಸುತ್ತದೆ.