Auto-Animate משיקה מתאם ל-Marko 6, ומנפישה רשימות באמצעות תגית אחת

Auto-Animate שחרר את המתאם הרשמי הראשון שלו עבור Marko 6, המאפשר למפתחים להנפיש שינויים ברשימות באמצעות תגית אחת בלבד וללא JavaScript נוסף. המהלך חשוב מכיוון שהוא מסיר את ה-boilerplate שהפך במשך זמן רב את השימוש באנימציה בפרויקטים של Marko למאמץ מיוחד במינו.

מודל הרינדור של Marko מדלג על שלב ה-"hydration" בצד הלקוח שהמסגרות (frameworks) כמו React או Vue מסתמכות עליו. לאחר שהשרת שולח HTML, Marko פשוט ממשיך את ה-markup במקומו, מה ששומר על חבילות (bundles) קטנות מאוד — בערך 7KB בפורמט gzipped עבור ה-runtime. עם זאת, אותו קיצור דרך חוסם ספריות אנימציה רבות שממתינות לרינדור בצד הלקוח לפני שהן יכולות להצמיד אפקטים. ללא hook ל-DOM הקיים, מפתחים נאלצו באופן מסורתי לכתוב קוד מותאם אישית עבור כל עדכון רשימה.

המתאם החדש עוקף את המגבלה הזו על ידי חיבור ל-onMount lifecycle של Marko. כאשר רכיב עובר mount, המתאם יוצר MutationObserver שצופה בצומת האב (parent node) של הרשימה עבור שינויים. כאשר פריטים מתווספים, מסוננים או משנים את סדרם, ה-observer מפעיל את מנוע ה-transition המובנה של auto-animate, ומספק אנימציות כניסה, יציאה וסידור מחדש חלקות באופן אוטומטי. כל זה קורה מאחורי תגית <auto-animate> אחת.

התגית מקבלת שלושה מאפיינים (attributes):

• parent – משתנה תגית של Marko שמצביע על מיכל הרשימה (list container).
• options – אובייקט עבור duration, easing והגדרות תזמון אחרות.
• enabled – ערך בוליאני ריאקטיבי שיכול להפעיל או לכבות אנימציות בזמן ריצה.

מכיוון ש-enabled הוא ריאקטיבי, מפתחים יכולים לקשור אותו לכל ערך state ולעבור בין מצבי אנימציה מבלי לגעת ב-DOM או לכתוב מחדש מנהלי אירועים (handlers). לכן, המתאם מציע גמישות רבה יותר מ-directive סטטי, תוך שהוא נשאר שקוף לשאר עץ הרכיבים.

עבור צוותים המשתמשים ב-Vite, החבילה עלולה לגרום לאזהרת "unresolved import". הוספת הקוד הבא ל-vite.config.ts פותרת את הבעיה:

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

זה אומר ל-Vite לאפשר לתוסף (plugin) של Marko לטפל ב-import במקום לנסות לבצע לו pre-bundle.

התועלת המעשית היא מיידית. רשימת Marko טיפוסית שבעבר דרשה שימוש ב-useEffect hook, החלפת מחלקות (class toggles) ידנית ומספר שורות של קוד אנימציה, יכולה כעת להיכתב כך:

<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 מספקת עבור מסגרות עבודה אחרות.

מי מרוויח, ומי צופה מהצד

צוותי front-end שכבר אימצו את Marko מקבלים פתרון מוכן לדפוס UI נפוץ — רשימות דינמיות. הטבע הקליל של המתאם שומר על סימן ההיכר של Marko — חבילות קטנות מאוד, דבר שקריטי לאתרים שבהם הביצועים הם בעדיפות עליונה. מצד שני, המתאם מתמקד כרגע בשינויים (mutations) ברשימות; מפתחים הזקוקים לשליטה מותאמת אישית ב-timeline או לכוריאוגרפיה מורכבת יצטרכו עדיין להסתמך על קוד מותאם אישית או על ספרייה אחרת.

מה כדאי לעקוב אחריו בהמשך

המתאם הוא קוד פתוח וכבר קיים לו sandbox להדגמה המקושר מתוך הערות הגרסה (release notes). משוב מהקהילה ככל הנראה יעצב הרחבות עתידיות, כגון תמיכה בסידור מחדש של גריד (grid reflows) או אינטגרציה עם מעברי רכיבים (component-level transitions) קרובים של Marko. אם עקומת האימוץ תהיה דומה לאימוץ המהיר של auto-animate ב-React וב-Vue, אנו עשויים לראות דחיפה רחבה יותר לכיוון אנימציה ב-"zero-code" בכל המערכת האקולוגית של UI ב-JavaScript.

בשורה התחתונה: המתאם של Auto-Animate עבור Marko 6 הופך משימה שהייתה היסטורית מסורבלת — אנימציה של רשימות שרונדרו בשרת — לתגית דקלרטיבית אחת, תוך שמירה על גודל החבילה המינימלי של Marko ומעניק למפתחים שכבת אנימציה מיידית הניתנת להפעלה ולכיבוי.