انٹرآپریبل ویب اجزاء بنانا جو ری ایکٹ کے ساتھ بھی کام کرتے ہیں۔

ہم میں سے جو لوگ چند سالوں سے ویب ڈویلپر رہے ہیں انہوں نے شاید ایک سے زیادہ JavaScript فریم ورک کا استعمال کرتے ہوئے کوڈ لکھا ہے۔ وہاں موجود تمام انتخاب کے ساتھ — React، Svelte، Vue، Angular، Solid — یہ سب ناگزیر ہے۔ فریم ورک میں کام کرتے وقت ہمیں جس سے زیادہ مایوس کن چیزوں سے نمٹنا پڑتا ہے وہ ان تمام نچلے درجے کے UI اجزاء کو دوبارہ بنانا ہے: بٹن، ٹیبز، ڈراپ ڈاؤن وغیرہ۔ خاص طور پر مایوس کن بات یہ ہے کہ ہم انہیں عام طور پر ایک فریم ورک میں بیان کریں گے۔ , React کا کہنا ہے، لیکن پھر اگر ہم Svelte میں کچھ بنانا چاہتے ہیں تو انہیں دوبارہ لکھنے کی ضرورت ہے۔ یا Vue. یا ٹھوس۔ اور اسی طرح.

کیا یہ بہتر نہیں ہوگا کہ ہم ان نچلے درجے کے UI اجزاء کو ایک بار، ایک فریم ورک-ایگنوسٹک انداز میں بیان کر سکیں، اور پھر انہیں فریم ورک کے درمیان دوبارہ استعمال کریں؟ یقیناً ایسا ہوگا! اور ہم کر سکتے ہیں؛ ویب اجزاء راستہ ہیں. یہ پوسٹ آپ کو دکھائے گی کہ کیسے۔

ابھی تک، ویب اجزاء کے لیے SSR کی کہانی میں تھوڑی کمی ہے۔ ڈیکلریٹو شیڈو DOM (DSD) یہ ہے کہ کس طرح ویب جزو کو سرور کی طرف پیش کیا جاتا ہے، لیکن، اس تحریر کے مطابق، یہ آپ کے پسندیدہ ایپلیکیشن فریم ورک جیسے Next، Remix یا SvelteKit کے ساتھ مربوط نہیں ہے۔ اگر یہ آپ کے لیے ضروری ہے، تو DSD کی تازہ ترین حیثیت کو ضرور چیک کریں۔ لیکن دوسری صورت میں، اگر SSR ایسی چیز نہیں ہے جسے آپ استعمال کر رہے ہیں، تو پڑھیں۔

سب سے پہلے، کچھ سیاق و سباق

ویب اجزاء بنیادی طور پر HTML عناصر ہیں جن کی آپ خود وضاحت کرتے ہیں، جیسے <yummy-pizza> یا کچھ بھی، زمین سے۔ وہ یہاں CSS-Tricks (بشمول کالیب ولیمز کی ایک وسیع سیریز اور ایک جان ریا کی طرف سے) لیکن ہم مختصراً اس عمل سے گزریں گے۔ بنیادی طور پر، آپ جاوا اسکرپٹ کلاس کی وضاحت کرتے ہیں، اس سے وراثت حاصل کریں۔ HTMLElement، اور پھر ویب جزو میں جو بھی خصوصیات، صفات اور طرزیں ہیں ان کی وضاحت کریں اور یقیناً، مارک اپ جو یہ بالآخر آپ کے صارفین کو فراہم کرے گا۔

حسب ضرورت HTML عناصر کی وضاحت کرنے کے قابل ہونا جو کسی خاص جزو کے پابند نہیں ہیں دلچسپ ہے۔ لیکن یہ آزادی بھی ایک حد ہے۔ کسی بھی JavaScript فریم ورک سے آزادانہ طور پر موجود ہونے کا مطلب ہے کہ آپ واقعی ان JavaScript فریم ورک کے ساتھ تعامل نہیں کر سکتے۔ ایک React جزو کے بارے میں سوچو جو کچھ ڈیٹا لاتا ہے اور پھر کچھ رینڈر کرتا ہے۔ دیگر رد عمل کا جز، ڈیٹا کے ساتھ گزر رہا ہے۔ یہ واقعی ایک ویب جزو کے طور پر کام نہیں کرے گا، کیونکہ ایک ویب جزو نہیں جانتا کہ ری ایکٹ جزو کو کیسے پیش کیا جائے۔

ویب اجزاء خاص طور پر ایکسل کے طور پر پتی کے اجزاء. پتی کے اجزاء جزو درخت میں پیش کی جانے والی آخری چیز ہے۔ یہ وہ اجزاء ہیں جو کچھ پروپس وصول کرتے ہیں، اور کچھ پیش کرتے ہیں۔ UI. یہ ہیں نوٹ آپ کے اجزاء کے درخت کے بیچ میں بیٹھے اجزاء، ڈیٹا کو ساتھ میں منتقل کرنا، سیاق و سباق ترتیب دینا وغیرہ۔ - کے صرف خالص ٹکڑے UI یہ ایک جیسا نظر آئے گا، چاہے جاوا اسکرپٹ کا کون سا فریم ورک باقی ایپ کو طاقت دے رہا ہو۔

ویب جزو جو ہم بنا رہے ہیں۔

بٹن جیسی بورنگ (اور عام) چیز بنانے کے بجائے، آئیے کچھ مختلف بنائیں۔ میرے میں آخری پوسٹ ہم نے مواد کے ری فلو کو روکنے کے لیے دھندلی تصویری جھلکیاں استعمال کرنے پر غور کیا، اور ہماری تصاویر لوڈ ہونے کے دوران صارفین کو ایک معقول UI فراہم کیا۔ ہم نے اپنی امیجز کے دھندلے، گھٹے ہوئے ورژن کو انکوڈنگ کرتے ہوئے بیس 64 کو دیکھا اور اسے اپنے UI میں دکھایا جب کہ حقیقی تصویر لوڈ ہو رہی تھی۔ ہم نے ایک ٹول کا استعمال کرتے ہوئے ناقابل یقین حد تک کمپیکٹ، دھندلے جھلکیاں پیدا کرنے پر بھی غور کیا۔ بلرش.

اس پوسٹ نے آپ کو دکھایا کہ ان پیش نظاروں کو کیسے بنایا جائے اور انہیں React پروجیکٹ میں استعمال کیا جائے۔ یہ پوسٹ آپ کو دکھائے گی کہ ویب اجزاء سے ان پیش نظاروں کو کس طرح استعمال کیا جائے تاکہ وہ استعمال کر سکیں کوئی بھی جاوا اسکرپٹ فریم ورک۔

لیکن ہمیں چلانے سے پہلے چلنے کی ضرورت ہے، لہذا ہم سب سے پہلے کسی معمولی اور احمقانہ چیز سے گزریں گے تاکہ یہ معلوم ہو سکے کہ ویب کے اجزاء کیسے کام کرتے ہیں۔

اس پوسٹ میں موجود ہر چیز بغیر کسی ٹولنگ کے ونیلا ویب کے اجزاء بنائے گی۔ اس کا مطلب ہے کہ کوڈ میں تھوڑا سا بوائلر پلیٹ ہوگا، لیکن اس کی پیروی کرنا نسبتاً آسان ہونا چاہیے۔ جیسے اوزار لت or سٹینسل ویب اجزاء کی تعمیر کے لیے ڈیزائن کیا گیا ہے اور اس بوائلر پلیٹ کے زیادہ تر کو ہٹانے کے لیے استعمال کیا جا سکتا ہے۔ میں آپ سے گزارش کرتا ہوں کہ انہیں چیک کریں! لیکن اس پوسٹ کے لیے، میں کسی اور انحصار کو متعارف کروانے اور سکھانے کی ضرورت نہ ہونے کے بدلے میں تھوڑی زیادہ بوائلر پلیٹ کو ترجیح دوں گا۔

ایک سادہ کاؤنٹر جزو

آئیے جاوا اسکرپٹ کے اجزاء کی کلاسک "ہیلو ورلڈ" بنائیں: ایک کاؤنٹر۔ ہم ایک قدر رینڈر کریں گے، اور ایک بٹن جو اس قدر کو بڑھاتا ہے۔ سادہ اور بورنگ، لیکن یہ ہمیں سب سے آسان ویب جزو کو دیکھنے دیتا ہے۔

ویب جزو بنانے کے لیے، پہلا قدم جاوا اسکرپٹ کلاس بنانا ہے، جو اس سے وراثت میں ملتا ہے۔ HTMLElement:

class Counter extends HTMLElement {}

آخری مرحلہ ویب اجزاء کو رجسٹر کرنا ہے، لیکن صرف اس صورت میں جب ہم نے اسے پہلے سے رجسٹر نہیں کیا ہے:

if (!customElements.get("counter-wc")) { customElements.define("counter-wc", Counter);
}

اور، یقینا، اسے پیش کریں:

<counter-wc></counter-wc>

اور اس کے درمیان ہر چیز یہ ہے کہ ہم ویب اجزاء کو جو کچھ بھی کرنا چاہتے ہیں وہ کریں۔ ایک عام لائف سائیکل طریقہ ہے۔ connectedCallback، جو ہمارے ویب اجزاء کو DOM میں شامل کرنے پر فائر کرتا ہے۔ ہم جو بھی مواد چاہتے ہیں اسے پیش کرنے کے لیے ہم اس طریقہ کو استعمال کر سکتے ہیں۔ یاد رکھیں، یہ ایک جے ایس کلاس ہے جو وراثت میں ملتی ہے۔ HTMLElementجس کا مطلب ہے ہمارا this قدر خود ویب جزو عنصر ہے، تمام عام DOM ہیرا پھیری کے طریقوں کے ساتھ جو آپ پہلے سے جانتے اور پسند کرتے ہیں۔

یہ سب سے آسان ہے، ہم یہ کر سکتے ہیں:

class Counter extends HTMLElement { connectedCallback() { this.innerHTML = "<div style='color: green'>Hey</div>"; }
} if (!customElements.get("counter-wc")) { customElements.define("counter-wc", Counter);
}

… جو بالکل ٹھیک کام کرے گا۔

اصلی مواد شامل کرنا

آئیے کچھ مفید، انٹرایکٹو مواد شامل کریں۔ ہمیں ایک کی ضرورت ہے۔ <span> موجودہ نمبر کی قدر کو رکھنے کے لیے اور a <button> کاؤنٹر کو بڑھانے کے لئے. ابھی کے لیے، ہم اس مواد کو اپنے کنسٹرکٹر میں بنائیں گے اور اس کو شامل کریں گے جب ویب کا جزو درحقیقت DOM میں ہوگا:

constructor() { super(); const container = document.createElement('div'); this.valSpan = document.createElement('span'); const increment = document.createElement('button'); increment.innerText = 'Increment'; increment.addEventListener('click', () => { this.#value = this.#currentValue + 1; }); container.appendChild(this.valSpan); container.appendChild(document.createElement('br')); container.appendChild(increment); this.container = container;
} connectedCallback() { this.appendChild(this.container); this.update();
}

اگر آپ واقعی دستی DOM کی تخلیق سے حاصل کر چکے ہیں، تو یاد رکھیں کہ آپ سیٹ کر سکتے ہیں۔ innerHTML، یا یہاں تک کہ ایک ٹیمپلیٹ عنصر کو ایک بار اپنی ویب اجزاء کی کلاس کی جامد خاصیت کے طور پر بنائیں، اسے کلون کریں، اور نئے ویب اجزاء کی مثالوں کے لیے مواد داخل کریں۔ شاید کچھ اور اختیارات ہیں جن کے بارے میں میں نہیں سوچ رہا ہوں، یا آپ ہمیشہ ویب اجزاء کا فریم ورک استعمال کرسکتے ہیں جیسے لت or سٹینسل. لیکن اس پوسٹ کے لیے، ہم اسے سادہ رکھنا جاری رکھیں گے۔

آگے بڑھتے ہوئے، ہمیں سیٹ ایبل جاوا اسکرپٹ کلاس پراپرٹی کی ضرورت ہے۔ value

#currentValue = 0; set #value(val) { this.#currentValue = val; this.update();
}

یہ صرف ایک معیاری کلاس پراپرٹی ہے جس میں سیٹر ہے، اس کے ساتھ قیمت رکھنے کے لیے دوسری پراپرٹی ہے۔ ایک تفریحی موڑ یہ ہے کہ میں ان اقدار کے لیے پرائیویٹ جاوا اسکرپٹ کلاس پراپرٹی نحو استعمال کر رہا ہوں۔ اس کا مطلب ہے کہ ہمارے ویب اجزاء سے باہر کوئی بھی ان اقدار کو کبھی نہیں چھو سکتا۔ یہ معیاری جاوا اسکرپٹ ہے۔ جو تمام جدید براؤزرز میں تعاون یافتہ ہے۔، لہذا اسے استعمال کرنے سے نہ گھبرائیں۔

یا بلا جھجھک اسے کال کریں۔ _value اگر آپ ترجیح دیں. اور، آخر میں، ہمارے update طریقہ:

update() { this.valSpan.innerText = this.#currentValue;
}

یہ کام کرتا ہے!

ظاہر ہے یہ کوڈ نہیں ہے جسے آپ پیمانے پر برقرار رکھنا چاہتے ہیں۔ یہاں ایک مکمل ہے کام کرنے کی مثال اگر آپ قریب سے دیکھنا چاہتے ہیں۔ جیسا کہ میں نے کہا ہے، Lit اور Stencil جیسے ٹولز اس کو آسان بنانے کے لیے بنائے گئے ہیں۔

کچھ اور فعالیت شامل کرنا

یہ پوسٹ ویب اجزاء میں گہرا غوطہ نہیں ہے۔ ہم تمام APIs اور لائف سائیکل کا احاطہ نہیں کریں گے۔ ہم احاطہ بھی نہیں کریں گے۔ سائے کی جڑیں یا سلاٹ. ان موضوعات پر لامتناہی مواد ہے۔ میرا مقصد یہاں پر کچھ مفید رہنمائی کے ساتھ کچھ دلچسپی پیدا کرنے کے لیے ایک معقول تعارف فراہم کرنا ہے۔ کا استعمال کرتے ہوئے مشہور JavaScript فریم ورک کے ساتھ ویب اجزاء جنہیں آپ پہلے سے جانتے اور پسند کرتے ہیں۔

اس مقصد کے لیے، آئیے اپنے کاؤنٹر ویب جزو کو تھوڑا سا بڑھاتے ہیں۔ آئیے اسے قبول کرنے دیں۔ color attribute، ظاہر ہونے والی قدر کے رنگ کو کنٹرول کرنے کے لیے۔ اور آئیے بھی اسے قبول کر لیں۔ increment پراپرٹی، لہذا اس ویب اجزاء کے صارفین اس میں ایک وقت میں 2، 3، 4 کا اضافہ کر سکتے ہیں۔ اور ان ریاستی تبدیلیوں کو آگے بڑھانے کے لیے، آئیے اپنا نیا کاؤنٹر Svelte سینڈ باکس میں استعمال کریں — ہم تھوڑی دیر میں React کریں گے۔

ہم پہلے کی طرح اسی ویب جزو کے ساتھ شروع کریں گے اور ایک رنگ وصف شامل کریں گے۔ کسی وصف کو قبول کرنے اور اس کا جواب دینے کے لیے اپنے ویب جزو کو ترتیب دینے کے لیے، ہم ایک جامد شامل کرتے ہیں۔ observedAttributes پراپرٹی جو ان صفات کو لوٹاتی ہے جن کے لیے ہمارا ویب جزو سنتا ہے۔

static observedAttributes = ["color"];

اس جگہ کے ساتھ، ہم ایک شامل کر سکتے ہیں attributeChangedCallback لائف سائیکل طریقہ، جو اس وقت چلے گا جب کوئی بھی صفات درج ہوں گی۔ observedAttributes سیٹ ہیں، یا اپ ڈیٹ ہیں۔

attributeChangedCallback(name, oldValue, newValue) { if (name === "color") { this.update(); }
}

اب ہم اپنی تازہ کاری کرتے ہیں۔ update اصل میں اسے استعمال کرنے کا طریقہ:

update() { this.valSpan.innerText = this._currentValue; this.valSpan.style.color = this.getAttribute("color") || "black";
}

آخر میں، آئیے شامل کرتے ہیں۔ increment جائیداد:

increment = 1;

سادہ اور شائستہ۔

Svelte میں انسداد جزو کا استعمال کرتے ہوئے

آئیے استعمال کریں جو ہم نے ابھی بنایا ہے۔ ہم اپنے Svelte ایپ کے جزو میں جائیں گے اور کچھ اس طرح شامل کریں گے:

<script> let color = "red";
</script> <style> main { text-align: center; }
</style> <main> <select bind:value={color}> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <counter-wc color={color}></counter-wc>
</main>

اور یہ کام کرتا ہے! ہمارا کاؤنٹر رینڈر، اضافہ، اور ڈراپ ڈاؤن رنگ کو اپ ڈیٹ کرتا ہے۔ جیسا کہ آپ دیکھ سکتے ہیں، ہم اپنے Svelte ٹیمپلیٹ میں رنگ کا وصف پیش کرتے ہیں اور، جب قدر میں تبدیلی آتی ہے، Svelte کال کرنے کا کام سنبھالتا ہے۔ setAttribute ہمارے بنیادی ویب جزو مثال پر۔ یہاں کچھ خاص نہیں ہے: یہ وہی چیز ہے جو یہ پہلے ہی کی صفات کے لیے کرتی ہے۔ کوئی بھی HTML عنصر۔

کے ساتھ چیزیں تھوڑی بہت دلچسپ ہوجاتی ہیں۔ increment سہارا یہ وہ جگہ ہے نوٹ ہمارے ویب جزو پر ایک وصف؛ یہ ویب اجزاء کی کلاس پر ایک سہارا ہے۔ اس کا مطلب ہے کہ اسے ویب اجزاء کی مثال پر سیٹ کرنے کی ضرورت ہے۔ میرے ساتھ برداشت کریں، کیونکہ چیزیں تھوڑی دیر میں بہت آسان ہو جائیں گی۔

سب سے پہلے، ہم اپنے Svelte جزو میں کچھ متغیرات شامل کریں گے:

let increment = 1;
let wcInstance;

کاؤنٹر پرزنٹ کا ہمارا پاور ہاؤس آپ کو 1، یا 2 تک بڑھانے دے گا:

<button on:click={() => increment = 1}>Increment 1</button>
<button on:click={() => increment = 2}>Increment 2</button>

لیکن، اصول میں، ہمیں اپنے ویب اجزاء کی اصل مثال حاصل کرنے کی ضرورت ہے۔ یہ وہی چیز ہے جو ہم ہمیشہ کرتے ہیں جب بھی ہم a شامل کرتے ہیں۔ ref رد عمل کے ساتھ۔ Svelte کے ساتھ، یہ ایک سادہ ہے bind:this ہدایات:

<counter-wc bind:this={wcInstance} color={color}></counter-wc>

اب، ہمارے Svelte ٹیمپلیٹ میں، ہم اپنے اجزاء کے انکریمنٹ متغیر میں تبدیلیوں کو سنتے ہیں اور بنیادی ویب اجزاء کی خاصیت کو سیٹ کرتے ہیں۔

$: { if (wcInstance) { wcInstance.increment = increment; }
}

آپ اسے آزما سکتے ہیں۔ اس لائیو ڈیمو پر ختم.

ہم ظاہر ہے کہ ہر ویب جزو یا سہارے کے لیے ایسا نہیں کرنا چاہتے جس کا ہمیں انتظام کرنے کی ضرورت ہے۔ کیا یہ اچھا نہیں ہوگا اگر ہم صرف سیٹ کر سکیں increment ہمارے ویب جزو پر، مارک اپ میں، جیسا کہ ہم عام طور پر اجزاء کے پرپس کے لیے کرتے ہیں، اور آپ جانتے ہیں، صرف کام? دوسرے لفظوں میں، یہ اچھا ہوگا اگر ہم تمام استعمالات کو حذف کر دیں۔ wcInstance اور اس کے بجائے یہ آسان کوڈ استعمال کریں:

<counter-wc increment={increment} color={color}></counter-wc>

یہ پتہ چلتا ہے کہ ہم کر سکتے ہیں۔ یہ کوڈ کام کرتا ہے؛ Svelte ہمارے لیے وہ تمام ٹانگ ورک ہینڈل کرتا ہے۔ اس ڈیمو میں اسے چیک کریں. یہ تمام جاوا اسکرپٹ فریم ورک کے لیے معیاری طرز عمل ہے۔

تو میں نے آپ کو ویب اجزاء کے سہارے کو ترتیب دینے کا دستی طریقہ کیوں دکھایا؟ دو وجوہات: یہ سمجھنا مفید ہے کہ یہ چیزیں کیسے کام کرتی ہیں اور، ایک لمحے پہلے، میں نے کہا تھا کہ یہ تمام JavaScript فریم ورکس کے لیے "بہت زیادہ" کام کرتا ہے۔ لیکن ایک فریم ورک ہے جو، دیوانہ وار، ویب کمپوننٹ پروپ سیٹنگ کو سپورٹ نہیں کرتا جیسا کہ ہم نے ابھی دیکھا ہے۔

ردعمل ایک مختلف حیوان ہے۔

رد عمل سیارے پر سب سے زیادہ مقبول JavaScript فریم ورک ویب اجزاء کے ساتھ بنیادی انٹراپ کو سپورٹ نہیں کرتا ہے۔ یہ ایک معروف مسئلہ ہے جو ردعمل کے لیے منفرد ہے۔ دلچسپ بات یہ ہے کہ یہ حقیقت میں React کی تجرباتی شاخ میں طے شدہ ہے، لیکن کسی وجہ سے اسے ورژن 18 میں ضم نہیں کیا گیا تھا۔ اس نے کہا، ہم اب بھی اس کی ترقی کو ٹریک کریں. اور آپ اسے ایک کے ساتھ خود بھی آزما سکتے ہیں۔ لائیو ڈیمو.

حل، یقینا، استعمال کرنا ہے a ref، ویب جزو مثال کو پکڑو، اور دستی طور پر سیٹ کریں۔ increment جب وہ قدر بدل جاتی ہے۔ ایسا لگتا ہے:

import React, { useState, useRef, useEffect } from 'react';
import './counter-wc'; export default function App() { const [increment, setIncrement] = useState(1); const [color, setColor] = useState('red'); const wcRef = useRef(null); useEffect(() => { wcRef.current.increment = increment; }, [increment]); return ( <div> <div className="increment-container"> <button onClick={() => setIncrement(1)}>Increment by 1</button> <button onClick={() => setIncrement(2)}>Increment by 2</button> </div> <select value={color} onChange={(e) => setColor(e.target.value)}> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <counter-wc ref={wcRef} increment={increment} color={color}></counter-wc> </div> );
}

جیسا کہ ہم نے تبادلہ خیال کیا ہے، ہر ویب اجزاء کی خاصیت کے لیے اسے دستی طور پر کوڈ کرنا آسانی سے قابل توسیع نہیں ہے۔ لیکن سب کچھ ضائع نہیں ہوا کیونکہ ہمارے پاس کچھ اختیارات ہیں۔

آپشن 1: ہر جگہ اوصاف استعمال کریں۔

ہماری صفات ہیں۔ اگر آپ نے اوپر React ڈیمو پر کلک کیا ہے، increment prop کام نہیں کر رہا تھا، لیکن رنگ صحیح طریقے سے بدل گیا ہے۔ کیا ہم ہر چیز کو اوصاف کے ساتھ کوڈ نہیں کر سکتے؟ افسوس کی بات ہے، نہیں۔ انتساب کی قدریں صرف سٹرنگ ہو سکتی ہیں۔ یہ یہاں کافی اچھا ہے، اور ہم اس نقطہ نظر سے کچھ دور جانے کے قابل ہو جائیں گے۔ جیسے نمبر increment تاروں میں اور اس سے تبدیل کیا جا سکتا ہے۔ یہاں تک کہ ہم JSON اشیاء کو سٹرنگائی/پارس کر سکتے ہیں۔ لیکن آخر کار ہمیں ایک فنکشن کو ویب جزو میں منتقل کرنے کی ضرورت ہوگی، اور اس وقت ہمارے پاس اختیارات نہیں ہوں گے۔

آپشن 2: اسے لپیٹیں۔

ایک پرانی کہاوت ہے کہ آپ کمپیوٹر سائنس میں کسی بھی مسئلے کو بالواسطہ سطح کا اضافہ کر کے حل کر سکتے ہیں (سوائے انڈائریکشن کی بہت سی سطحوں کے مسئلے کے)۔ ان پرپس کو سیٹ کرنے کا کوڈ کافی قابل قیاس اور آسان ہے۔ اگر ہم اسے کسی لائبریری میں چھپا دیں تو کیا ہوگا؟ لٹ کے پیچھے ہوشیار لوگ ایک حل ہے. یہ لائبریری آپ کے لیے ایک نیا React جزو تخلیق کرتی ہے جب آپ اسے ویب جزو دیتے ہیں، اور اس کی مطلوبہ خصوصیات کی فہرست بناتے ہیں۔ ہوشیار ہونے کے باوجود، میں اس نقطہ نظر کا پرستار نہیں ہوں۔

دستی طور پر بنائے گئے React اجزاء کے لیے ویب کے اجزاء کی ون ٹو ون میپنگ کرنے کے بجائے، میں جس چیز کو ترجیح دیتا ہوں وہ ہے ایک رد عمل کا جزو جسے ہم اپنے ویب جزو کو پاس کرتے ہیں۔ ٹیگ کا نام کو (counter-wc ہمارے معاملے میں) — تمام اوصاف اور خصوصیات کے ساتھ — اور اس جزو کے لیے ہمارے ویب جزو کو پیش کرنے کے لیے، شامل کریں ref، پھر معلوم کریں کہ سہارا کیا ہے اور ایک وصف کیا ہے۔ یہ میری رائے میں مثالی حل ہے۔ میں کسی ایسی لائبریری کے بارے میں نہیں جانتا جو ایسا کرتی ہے، لیکن اسے بنانا سیدھا ہونا چاہیے۔ آئیے اسے ایک شاٹ دیں!

یہ جملہ ہم تلاش کر رہے ہیں:

<WcWrapper wcTag="counter-wc" increment={increment} color={color} />

wcTag ویب اجزاء کے ٹیگ کا نام ہے؛ باقی وہ خواص اور صفات ہیں جو ہم چاہتے ہیں۔

یہاں میرا نفاذ کیسا لگتا ہے:

import React, { createElement, useRef, useLayoutEffect, memo } from 'react'; const _WcWrapper = (props) => { const { wcTag, children, ...restProps } = props; const wcRef = useRef(null); useLayoutEffect(() => { const wc = wcRef.current; for (const [key, value] of Object.entries(restProps)) { if (key in wc) { if (wc[key] !== value) { wc[key] = value; } } else { if (wc.getAttribute(key) !== value) { wc.setAttribute(key, value); } } } }); return createElement(wcTag, { ref: wcRef });
}; export const WcWrapper = memo(_WcWrapper);

سب سے دلچسپ لائن آخر میں ہے:

return createElement(wcTag, { ref: wcRef });

اس طرح ہم متحرک نام کے ساتھ React میں ایک عنصر بناتے ہیں۔ درحقیقت، یہ وہی ہے جو React عام طور پر JSX کو منتقل کرتا ہے۔ ہمارے تمام divs میں تبدیل ہو گئے ہیں۔ createElement("div") کالز ہمیں عام طور پر اس API کو براہ راست کال کرنے کی ضرورت نہیں ہوتی ہے لیکن جب ہمیں اس کی ضرورت ہوتی ہے تو یہ موجود ہوتا ہے۔

اس سے آگے، ہم ایک لے آؤٹ اثر چلانا چاہتے ہیں اور ہر اس پروپ کے ذریعے لوپ کرنا چاہتے ہیں جو ہم نے اپنے اجزاء تک پہنچایا ہے۔ ہم ان سب کو لوپ کرتے ہیں اور یہ دیکھنے کے لیے چیک کرتے ہیں کہ آیا یہ ایک پراپرٹی کے ساتھ ہے۔ in چیک کریں کہ ویب کمپوننٹ انسٹینس آبجیکٹ کے ساتھ ساتھ اس کے پروٹو ٹائپ چین کو بھی چیک کرتا ہے، جو کلاس پروٹوٹائپ پر سمیٹنے والے کسی بھی گیٹرز/سیٹرز کو پکڑے گا۔ اگر ایسی کوئی خاصیت موجود نہیں ہے تو اسے ایک وصف سمجھا جاتا ہے۔ دونوں صورتوں میں، ہم اسے صرف اس صورت میں سیٹ کرتے ہیں جب قدر حقیقت میں بدل گئی ہو۔

اگر آپ سوچ رہے ہیں کہ ہم کیوں استعمال کرتے ہیں۔ useLayoutEffect بجائے useEffectاس کی وجہ یہ ہے کہ ہم اپنے مواد کو پیش کرنے سے پہلے ان اپڈیٹس کو فوری طور پر چلانا چاہتے ہیں۔ اس کے علاوہ، نوٹ کریں کہ ہمارے پاس ہمارے پاس کوئی انحصار نہیں ہے۔ useLayoutEffect; اس کا مطلب ہے کہ ہم اس اپ ڈیٹ کو چلانا چاہتے ہیں۔ ہر رینڈر. یہ خطرناک ہوسکتا ہے کیونکہ React دوبارہ پیش کرتا ہے۔ بہت زیادہ. میں پوری چیز کو لپیٹ کر اس کو بہتر بناتا ہوں۔ React.memo. یہ بنیادی طور پر کا جدید ورژن ہے۔ React.PureComponent، جس کا مطلب ہے کہ جزو صرف اس صورت میں دوبارہ پیش کرے گا جب اس کا کوئی اصل پرپس تبدیل ہوا ہو — اور یہ چیک کرتا ہے کہ آیا یہ ایک سادہ مساوات کی جانچ کے ذریعے ہوا ہے۔

یہاں صرف خطرہ یہ ہے کہ اگر آپ کسی آبجیکٹ پروپ کو پاس کر رہے ہیں جسے آپ دوبارہ تفویض کیے بغیر براہ راست تبدیل کر رہے ہیں، تو آپ کو اپ ڈیٹس نظر نہیں آئیں گے۔ لیکن یہ انتہائی حوصلہ شکنی ہے، خاص طور پر React کمیونٹی میں، اس لیے میں اس کی فکر نہیں کروں گا۔

آگے بڑھنے سے پہلے، میں ایک آخری بات بتانا چاہوں گا۔ ہو سکتا ہے آپ اس سے خوش نہ ہوں کہ استعمال کیسا لگتا ہے۔ ایک بار پھر، یہ جزو اس طرح استعمال کیا جاتا ہے:

<WcWrapper wcTag="counter-wc" increment={increment} color={color} />

خاص طور پر، آپ کو ویب اجزاء کے ٹیگ کا نام پاس کرنا پسند نہیں ہوگا۔ <WcWrapper> جزو اور اس کے بجائے ترجیح دیں۔ @lit-labs/react مندرجہ بالا پیکیج، جو ہر ویب اجزاء کے لیے ایک نیا انفرادی React جزو بناتا ہے۔ یہ بالکل منصفانہ ہے اور میں آپ کی حوصلہ افزائی کروں گا کہ آپ جس چیز سے بھی زیادہ آرام دہ ہوں اسے استعمال کریں۔ لیکن میرے نزدیک اس نقطہ نظر کا ایک فائدہ یہ ہے کہ یہ آسان ہے۔ حذف. اگر کسی معجزے سے React اپنی تجرباتی شاخ سے مناسب ویب اجزاء کی ہینڈلنگ کو ضم کر دیتا ہے۔ main کل، آپ مندرجہ بالا کوڈ کو اس سے تبدیل کر سکیں گے:

<WcWrapper wcTag="counter-wc" increment={increment} color={color} />

…اس کے لیے:

<counter-wc ref={wcRef} increment={increment} color={color} />

آپ شاید ہر جگہ ایسا کرنے کے لیے ایک کوڈ موڈ بھی لکھ سکتے ہیں، اور پھر حذف کر سکتے ہیں۔ <WcWrapper> ایک ساتھ. دراصل، اس کو سکریچ کریں: ایک عالمی تلاش اور RegEx کے ساتھ بدلنا شاید کام کرے گا۔

نفاذ

مجھے معلوم ہے، ایسا لگتا ہے کہ یہاں تک پہنچنے کے لیے اسے سفر کرنا پڑا۔ اگر آپ کو یاد ہے تو ہمارا اصل مقصد تصویر کے پیش نظارہ کوڈ کو لینا تھا جسے ہم نے اپنے میں دیکھا تھا۔ آخری پوسٹ، اور اسے کسی ویب جزو میں منتقل کریں تاکہ اسے کسی بھی JavaScript فریم ورک میں استعمال کیا جا سکے۔ ری ایکٹ کے مناسب انٹراپ کی کمی نے مکس میں بہت سی تفصیل شامل کی۔ لیکن اب جب کہ ہمارے پاس ویب اجزاء بنانے اور اسے استعمال کرنے کے بارے میں ایک مہذب ہینڈل ہے، اس پر عمل درآمد تقریباً مخالف موسمی ہوگا۔

میں ویب کا پورا جزو یہاں چھوڑ دوں گا اور کچھ دلچسپ بٹس کو کال کروں گا۔ اگر آپ اسے عملی شکل میں دیکھنا چاہتے ہیں، تو یہ ہے۔ کام کرنے والا ڈیمو. یہ میری تین پسندیدہ پروگرامنگ زبانوں پر میری تین پسندیدہ کتابوں کے درمیان سوئچ کر دے گا۔ ہر کتاب کا URL ہر بار منفرد ہوگا، اس لیے آپ پیش نظارہ دیکھ سکتے ہیں، حالانکہ آپ ممکنہ طور پر اپنے DevTools نیٹ ورک ٹیب میں چیزوں کو وقوع پذیر ہوتے دیکھنا چاہیں گے۔

class BookCover extends HTMLElement { static observedAttributes = ['url']; attributeChangedCallback(name, oldValue, newValue) { if (name === 'url') { this.createMainImage(newValue); } } set preview(val) { this.previewEl = this.createPreview(val); this.render(); } createPreview(val) { if (typeof val === 'string') { return base64Preview(val); } else { return blurHashPreview(val); } } createMainImage(url) { this.loaded = false; const img = document.createElement('img'); img.alt = 'Book cover'; img.addEventListener('load', () => { if (img === this.imageEl) { this.loaded = true; this.render(); } }); img.src = url; this.imageEl = img; } connectedCallback() { this.render(); } render() { const elementMaybe = this.loaded ? this.imageEl : this.previewEl; syncSingleChild(this, elementMaybe); }
}

سب سے پہلے، ہم اس وصف کو رجسٹر کرتے ہیں جس میں ہماری دلچسپی ہے اور جب یہ تبدیل ہوتا ہے تو ہم اس کا رد عمل ظاہر کرتے ہیں:

static observedAttributes = ['url']; attributeChangedCallback(name, oldValue, newValue) { if (name === 'url') { this.createMainImage(newValue); }
}

اس کی وجہ سے ہمارا امیج کا جزو بنتا ہے، جو صرف لوڈ ہونے پر ظاہر ہوگا:

createMainImage(url) { this.loaded = false; const img = document.createElement('img'); img.alt = 'Book cover'; img.addEventListener('load', () => { if (img === this.imageEl) { this.loaded = true; this.render(); } }); img.src = url; this.imageEl = img;
}

اس کے بعد ہمارے پاس ہماری پیش نظارہ پراپرٹی ہے، جو یا تو ہماری base64 پیش نظارہ سٹرنگ ہوسکتی ہے، یا ہماری blurhash پیکٹ:

set preview(val) { this.previewEl = this.createPreview(val); this.render();
} createPreview(val) { if (typeof val === 'string') { return base64Preview(val); } else { return blurHashPreview(val); }
}

یہ کسی بھی مددگار فنکشن کو موخر کرتا ہے جس کی ہمیں ضرورت ہے:

function base64Preview(val) { const img = document.createElement('img'); img.src = val; return img;
} function blurHashPreview(preview) { const canvasEl = document.createElement('canvas'); const { w: width, h: height } = preview; canvasEl.width = width; canvasEl.height = height; const pixels = decode(preview.blurhash, width, height); const ctx = canvasEl.getContext('2d'); const imageData = ctx.createImageData(width, height); imageData.data.set(pixels); ctx.putImageData(imageData, 0, 0); return canvasEl;
}

اور، آخر میں، ہمارے render طریقہ:

connectedCallback() { this.render();
} render() { const elementMaybe = this.loaded ? this.imageEl : this.previewEl; syncSingleChild(this, elementMaybe);
}

اور ہر چیز کو جوڑنے کے لیے چند مددگار طریقے:

export function syncSingleChild(container, child) { const currentChild = container.firstElementChild; if (currentChild !== child) { clearContainer(container); if (child) { container.appendChild(child); } }
} export function clearContainer(el) { let child; while ((child = el.firstElementChild)) { el.removeChild(child); }
}

اگر ہم اسے ایک فریم ورک میں بناتے ہیں تو یہ اس سے تھوڑا سا زیادہ بوائلر پلیٹ ہے جس کی ہمیں ضرورت ہے، لیکن اس کا فائدہ یہ ہے کہ ہم اسے کسی بھی فریم ورک میں دوبارہ استعمال کر سکتے ہیں - حالانکہ React کو ابھی ایک ریپر کی ضرورت ہوگی، جیسا کہ ہم نے بحث کی ہے۔ .

مشکلات اور خاتمے

میں نے پہلے ہی Lit's React wrapper کا ذکر کیا ہے۔ لیکن اگر آپ اپنے آپ کو سٹینسل استعمال کرتے ہوئے پاتے ہیں، تو یہ دراصل a کو سپورٹ کرتا ہے۔ صرف رد عمل کے لیے الگ آؤٹ پٹ پائپ لائن. اور مائیکرو سافٹ کے اچھے لوگوں کے پاس بھی ہے۔ لٹ کے ریپر سے ملتا جلتا کچھ بنایا، فاسٹ ویب جزو لائبریری سے منسلک۔

جیسا کہ میں نے ذکر کیا ہے، تمام فریم ورک جن کا نام React نہیں ہے آپ کے لیے ویب اجزاء کی خصوصیات کی ترتیب کو سنبھالیں گے۔ ذرا نوٹ کریں کہ کچھ میں نحو کے کچھ خاص ذائقے ہوتے ہیں۔ مثال کے طور پر، Solid.js کے ساتھ، <your-wc value={12}> ہمیشہ یہ فرض کرتا ہے value ایک پراپرٹی ہے، جسے آپ ایک کے ساتھ اوور رائیڈ کر سکتے ہیں۔ attr سابقہ، جیسے <your-wc attr:value={12}>.

اپ ریپنگ

ویب اجزاء ویب ڈویلپمنٹ لینڈ اسکیپ کا ایک دلچسپ، اکثر زیر استعمال حصہ ہیں۔ وہ آپ کے UI، یا "لیف" اجزاء کا نظم کر کے کسی ایک JavaScript فریم ورک پر آپ کا انحصار کم کرنے میں مدد کر سکتے ہیں۔ ان کو ویب اجزاء کے طور پر تخلیق کرتے وقت - جیسا کہ Svelte یا React اجزاء کے برخلاف - اتنا ایرگونومک نہیں ہوگا، الٹا یہ ہے کہ وہ بڑے پیمانے پر دوبارہ استعمال کے قابل ہوں گے۔

انٹرآپریبل ویب اجزاء بنانا جو ری ایکٹ کے ساتھ بھی کام کرتے ہیں۔ اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.