Auto-Animate نے Marko 6 اڈاپٹر لانچ کر دیا، اب صرف ایک ٹیگ سے لسٹوں کو اینیمیٹ کریں

Auto-Animate نے Marko 6 کے لیے اپنا پہلا آفیشل اڈاپٹر (adapter) جاری کر دیا ہے، جس سے ڈویلپرز ایک ہی ٹیگ کے ذریعے اور بغیر کسی اضافی JavaScript کے لسٹ کی تبدیلیوں کو اینیمیٹ (animate) کر سکتے ہیں۔ یہ قدم اس لیے اہم ہے کیونکہ یہ اس اضافی کوڈ (boiler-plate) کو ختم کر دیتا ہے جس کی وجہ سے طویل عرصے سے Marko پروجیکٹس میں موشن (motion) کو ایک خاص قسم کی محنت سمجھا جاتا رہا ہے۔

Marko کا رینڈرنگ ماڈل کلائنٹ سائیڈ "hydration" کے مرحلے کو چھوڑ دیتا ہے جس پر React یا Vue جیسے فریم ورکس انحصار کرتے ہیں۔ جب سرور HTML بھیج دیتا ہے، تو Marko اسی مارک اپ کو وہیں سے دوبارہ شروع کر دیتا ہے، جس سے بنڈلز (bundles) بہت چھوٹے رہتے ہیں—رن ٹائم کے لیے تقریباً 7 KB gzipped۔ تاہم، یہی شارٹ کٹ بہت سی اینیمیشن لائبریریز کو روک دیتا ہے جو اثرات (effects) لگانے سے پہلے کلائنٹ سائیڈ رینڈر کا انتظار کرتی ہیں۔ پہلے موجودہ DOM میں کسی ہک (hook) کے بغیر، ڈویلپرز کو روایتی طور پر ہر لسٹ اپ ڈیٹ کے لیے کسٹم کوڈ لکھنا پڑتا تھا۔

نیا اڈاپٹر Marko کے onMount لائف سائیکل (lifecycle) میں ہک کر کے اس حد سے بچ نکلتا ہے۔ جب کوئی کمپوننٹ ماؤنٹ (mount) ہوتا ہے، تو اڈاپٹر ایک MutationObserver تخلیق کرتا ہے جو لسٹ کے پیرنٹ نوڈ (parent node) میں ہونے والی تبدیلیوں پر نظر رکھتا ہے۔ جیسے ہی آئٹمز کو پش (push)، فلٹر یا شفل (shuffle) کیا جاتا ہے، یہ آبزروور auto-animate کے بلٹ ان ٹرانزیشن انجن کو ٹرگر کرتا ہے، جس سے خودکار طور پر ہموار انٹری (entry)، ایگزٹ (exit) اور ری آرڈر (reorder) اینیمیشنز فراہم کی جاتی ہیں۔ یہ سب کچھ ایک ہی <auto-animate> ٹیگ کے پیچھے ہوتا ہے۔

یہ ٹیگ تین ایٹریبیوٹس (attributes) قبول کرتا ہے:

• parent – ایک Marko ٹیگ ویری ایبل جو لسٹ کنٹینر کی طرف اشارہ کرتا ہے۔
• options – ڈوریشن (duration)، ایزنگ (easing) اور دیگر ٹائمنگ سیٹنگز کے لیے ایک آبجیکٹ۔
• enabled – ایک ری ایکٹیو (reactive) بولین جو رن ٹائم پر اینیمیشنز کو آن یا آف کر سکتا ہے۔

چونکہ enabled ری ایکٹیو ہے، اس لیے ڈویلپرز اسے کسی بھی اسٹیٹ ویلیو (state value) کے ساتھ باندھ سکتے ہیں اور DOM کو چھوئے بغیر یا ہینڈلرز (handlers) کو دوبارہ لکھے بغیر موشن کو آن یا آف کر سکتے ہیں۔ اس طرح، یہ اڈاپٹر کمپوننٹ ٹری کے باقی حصوں کے لیے غیر مرئی (invisible) رہتے ہوئے ایک اسٹیٹک ڈائریکٹیو (static directive) کے مقابلے میں زیادہ لچک فراہم کرتا ہے۔

Vite استعمال کرنے والی ٹیموں کے لیے، یہ پیکیج "unresolved import" کی وارننگ پیدا کر سکتا ہے۔ vite.config.ts میں درج ذیل کوڈ شامل کرنے سے یہ مسئلہ حل ہو جاتا ہے:

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

یہ Vite کو بتاتا ہے کہ امپورٹ کو پری بنڈل (pre-bundle) کرنے کی کوشش کرنے کے بجائے 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 پیٹرن—ڈائنامک لسٹس (dynamic lists)—کے لیے ایک تیار شدہ حل مل گیا ہے۔ اڈاپٹر کی ہلکی پھلکی نوعیت Marko کے چھوٹے بنڈلز کے خاصہ کو برقرار رکھتی ہے، جو کارکردگی کے لحاظ سے اہم سائٹس کے لیے بہت ضروری ہے۔ دوسری طرف، اڈاپٹر فی الحال صرف لسٹ کے تغیرات (mutations) پر توجہ مرکوز کرتا ہے؛ جن ڈویلپرز کو مخصوص ٹائم لائن کنٹرول یا پیچیدہ ترتیب (choreography) کی ضرورت ہے، انہیں اب بھی کسٹم کوڈ یا کسی دوسری لائبریری کا سہارا لینا پڑے گا۔

آگے کیا دیکھنا ہے

یہ اڈاپٹر اوپن سورس ہے اور ریلیز نوٹس میں اس کا ڈیمو سینڈ باکس (demo sandbox) بھی لنک کیا گیا ہے۔ کمیونٹی کا فیڈ بیک ممکنہ طور پر مستقبل کی توسیع کی شکل دے گا، جیسے کہ گرڈ ری فلو (grid reflows) کے لیے سپورٹ یا Marko کے آنے والے کمپوننٹ لیول ٹرانزیشنز کے ساتھ انٹیگریشن۔ اگر اس کے اپنانے کی رفتار React اور Vue میں auto-animate کی تیز رفتار مقبولیت کی طرح رہی، تو ہم JavaScript UI ایکو سسٹم میں "zero-code" موشن کے لیے ایک وسیع تر کوشش دیکھ سکتے ہیں۔

خلاصہ: Auto-Animate کا Marko 6 اڈاپٹر ایک تاریخی طور پر مشکل کام—سرور رینڈرڈ لسٹس کو اینیمیٹ کرنا—کو ایک ہی ڈیکلیریٹو ٹیگ (declarative tag) میں بدل دیتا ہے، جو Marko کے کم سے کم بنڈل سائز کو برقرار رکھتے ہوئے ڈویلپرز کو ایک فوری، آن/آف ہونے والا موشن لیئر فراہم کرتا ہے۔