ইন্টারঅপারেবল ওয়েব কম্পোনেন্ট তৈরি করা যা এমনকি প্রতিক্রিয়ার সাথেও কাজ করে

আমরা যারা কয়েক বছরের বেশি সময় ধরে ওয়েব ডেভেলপার হয়েছি তারা সম্ভবত একাধিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করে কোড লিখেছি। সেখানে সমস্ত পছন্দের সাথে - প্রতিক্রিয়া, স্বেল্ট, ভিউ, কৌণিক, কঠিন - এটি সবই অনিবার্য। ফ্রেমওয়ার্ক জুড়ে কাজ করার সময় আমাদের আরও হতাশাজনক জিনিসগুলির মধ্যে একটি হল সেই সমস্ত নিম্ন-স্তরের UI উপাদানগুলিকে পুনরায় তৈরি করা: বোতাম, ট্যাব, ড্রপডাউন ইত্যাদি। বিশেষত হতাশার বিষয় হল যে আমরা সাধারণত সেগুলিকে একটি কাঠামোতে সংজ্ঞায়িত করব , প্রতিক্রিয়া বলুন, কিন্তু তারপরে সেগুলিকে আবার লিখতে হবে যদি আমরা Svelte-এ কিছু তৈরি করতে চাই। বা Vue. বা সলিড। ইত্যাদি।

আমরা যদি এই নিম্ন-স্তরের UI উপাদানগুলিকে একবার, ফ্রেমওয়ার্ক-অজ্ঞেয়বাদী উপায়ে সংজ্ঞায়িত করতে পারি এবং তারপরে ফ্রেমওয়ার্কগুলির মধ্যে পুনরায় ব্যবহার করতে পারি তবে কি ভাল হবে না? অবশ্যই এটা হবে! এবং আমরা পারি; ওয়েব উপাদান উপায়. এই পোস্টটি আপনাকে দেখাবে কিভাবে।

এখন পর্যন্ত, ওয়েব উপাদানগুলির জন্য এসএসআর গল্পের কিছুটা অভাব রয়েছে। ডিক্লারেটিভ শ্যাডো DOM (DSD) হল কিভাবে একটি ওয়েব কম্পোনেন্ট সার্ভার-সাইড রেন্ডার করা হয়, কিন্তু, এই লেখার মত, এটি নেক্সট, রিমিক্স বা SvelteKit এর মত আপনার প্রিয় অ্যাপ্লিকেশন ফ্রেমওয়ার্কের সাথে একত্রিত নয়। এটি আপনার জন্য প্রয়োজন হলে, DSD এর সর্বশেষ স্থিতি পরীক্ষা করতে ভুলবেন না। কিন্তু অন্যথায়, যদি SSR এমন কিছু না হয় যা আপনি ব্যবহার করছেন, পড়ুন।

প্রথমত, কিছু প্রসঙ্গ

ওয়েব উপাদানগুলি মূলত HTML উপাদান যা আপনি নিজেকে সংজ্ঞায়িত করেন, যেমন <yummy-pizza> বা যাই হোক না কেন, মাটি থেকে। সেগুলি এখানে সিএসএস-ট্রিক্সে (সহ ক্যালেব উইলিয়ামসের একটি বিস্তৃত সিরিজ এবং জন রিয়া দ্বারা একটি) তবে আমরা সংক্ষিপ্তভাবে প্রক্রিয়াটির মধ্য দিয়ে যাব। মূলত, আপনি একটি জাভাস্ক্রিপ্ট ক্লাস সংজ্ঞায়িত করেন, এটি থেকে উত্তরাধিকার সূত্রে প্রাপ্ত HTMLElement, এবং তারপর ওয়েব কম্পোনেন্টের যে কোন বৈশিষ্ট্য, বৈশিষ্ট্য এবং শৈলী এবং অবশ্যই, মার্কআপটি শেষ পর্যন্ত আপনার ব্যবহারকারীদের কাছে রেন্ডার করবে তা সংজ্ঞায়িত করুন।

কাস্টম এইচটিএমএল উপাদানগুলিকে সংজ্ঞায়িত করতে সক্ষম হওয়া যা কোনও নির্দিষ্ট উপাদানের সাথে আবদ্ধ নয়। কিন্তু এই স্বাধীনতাও একটা সীমাবদ্ধতা। যেকোন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক থেকে স্বাধীনভাবে বিদ্যমান থাকা মানে আপনি সেই জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলির সাথে সত্যিই ইন্টারঅ্যাক্ট করতে পারবেন না। একটি প্রতিক্রিয়া উপাদানের কথা চিন্তা করুন যা কিছু ডেটা নিয়ে আসে এবং তারপর কিছু রেন্ডার করে অন্যান্য প্রতিক্রিয়া উপাদান, তথ্য বরাবর পাস. এটি একটি ওয়েব কম্পোনেন্ট হিসেবে কাজ করবে না, যেহেতু একটি ওয়েব কম্পোনেন্ট জানে না কিভাবে একটি রিঅ্যাক্ট কম্পোনেন্ট রেন্ডার করতে হয়।

ওয়েব উপাদান বিশেষ করে এক্সেল হিসাবে পাতার উপাদান. পাতার উপাদান একটি উপাদান গাছে রেন্ডার করা শেষ জিনিস. এই উপাদান যা কিছু প্রপ গ্রহণ করে, এবং কিছু রেন্ডার UI। এইগুলো না আপনার উপাদান গাছের মাঝখানে বসে থাকা উপাদানগুলি, ডেটা পাস করা, প্রসঙ্গ সেট করা ইত্যাদি। - শুধুমাত্র বিশুদ্ধ টুকরা UI জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক বাকী অ্যাপকে শক্তি দিচ্ছে না কেন, সেটি একই রকম দেখাবে।

আমরা যে ওয়েব কম্পোনেন্ট তৈরি করছি

বোতামের মতো বিরক্তিকর (এবং সাধারণ) কিছু তৈরি করার পরিবর্তে, আসুন একটু ভিন্ন কিছু তৈরি করি। আমার মধ্যে সর্বশেষ পোস্ট আমরা বিষয়বস্তু পুনঃপ্রবাহ রোধ করতে অস্পষ্ট চিত্র প্রিভিউ ব্যবহার করে দেখেছি, এবং আমাদের ছবি লোড হওয়ার সময় ব্যবহারকারীদের জন্য একটি শালীন UI প্রদান করে। আমরা বেস64 এনকোডিং করে দেখেছি আমাদের ছবিগুলির একটি অস্পষ্ট, অবনমিত সংস্করণ, এবং বাস্তব চিত্র লোড হওয়ার সময় এটি আমাদের UI-তে দেখাচ্ছে৷ আমরা একটি টুল ব্যবহার করে অবিশ্বাস্যভাবে কমপ্যাক্ট, ঝাপসা প্রিভিউ তৈরি করার দিকেও নজর দিয়েছি ব্লুহ্যাশ.

সেই পোস্টটি আপনাকে দেখিয়েছে যে কীভাবে সেই পূর্বরূপগুলি তৈরি করতে হয় এবং একটি প্রতিক্রিয়া প্রকল্পে সেগুলি ব্যবহার করতে হয়। এই পোস্টটি আপনাকে দেখাবে কিভাবে একটি ওয়েব কম্পোনেন্ট থেকে সেই প্রিভিউগুলি ব্যবহার করতে হয় যাতে সেগুলি ব্যবহার করা যায়৷ কোন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।

কিন্তু দৌড়ানোর আগে আমাদের হাঁটতে হবে, তাই ওয়েব কম্পোনেন্টগুলি ঠিক কীভাবে কাজ করে তা দেখতে প্রথমে আমরা তুচ্ছ এবং মূর্খ কিছুর মধ্য দিয়ে হেঁটে যাব।

এই পোস্টের সবকিছুই কোনো টুলিং ছাড়াই ভ্যানিলা ওয়েব কম্পোনেন্ট তৈরি করবে। এর মানে কোডটিতে কিছুটা বয়লারপ্লেট থাকবে, তবে অনুসরণ করা তুলনামূলকভাবে সহজ হওয়া উচিত। যেমন সরঞ্জাম মাতাল 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> বর্তমান সংখ্যা মান ধরে রাখতে এবং ক <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;
}

এটি কাজ করে!

স্পষ্টতই এটি এমন কোড নয় যা আপনি স্কেলে বজায় রাখতে চান। এখানে একটি সম্পূর্ণ কাজের উদাহরণ যদি আপনি একটি ঘনিষ্ঠভাবে দেখতে চান. আমি যেমন বলেছি, লিট এবং স্টেনসিলের মতো সরঞ্জামগুলি এটিকে সহজ করার জন্য ডিজাইন করা হয়েছে।

আরও কিছু কার্যকারিতা যোগ করা হচ্ছে

এই পোস্টটি ওয়েব উপাদানের মধ্যে একটি গভীর ডুব নয়. আমরা সমস্ত API এবং জীবনচক্র কভার করব না; আমরা এমনকি আবরণ হবে না ছায়া শিকড় বা স্লট. এই বিষয়ে অবিরাম বিষয়বস্তু আছে. এখানে আমার লক্ষ্য হ'ল কিছু আগ্রহের জন্ম দেওয়ার জন্য একটি শালীন যথেষ্ট ভূমিকা প্রদান করা, এর সাথে প্রকৃতপক্ষে কিছু দরকারী নির্দেশিকা ব্যবহার জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক সহ ওয়েব উপাদান যা আপনি ইতিমধ্যেই জানেন এবং ভালবাসেন।

সেই লক্ষ্যে, আসুন আমাদের কাউন্টার ওয়েব কম্পোনেন্টকে একটু উন্নত করি। এর একটি গ্রহণ করা যাক color বৈশিষ্ট্য, প্রদর্শিত মানের রঙ নিয়ন্ত্রণ করতে। এবং এর এটি একটি গ্রহণ করা যাক increment সম্পত্তি, তাই এই ওয়েব কম্পোনেন্টের ভোক্তারা একবারে এটি 2, 3, 4 বৃদ্ধি পেতে পারে। এবং এই রাজ্যের পরিবর্তনগুলি চালাতে, আসুন একটি Svelte স্যান্ডবক্সে আমাদের নতুন কাউন্টার ব্যবহার করি — আমরা কিছুক্ষণের মধ্যে প্রতিক্রিয়া জানাব।

আমরা আগের মতো একই ওয়েব কম্পোনেন্ট দিয়ে শুরু করব এবং একটি কালার অ্যাট্রিবিউট যোগ করব। একটি বৈশিষ্ট্য গ্রহণ এবং প্রতিক্রিয়া জানাতে আমাদের ওয়েব উপাদান কনফিগার করতে, আমরা একটি স্ট্যাটিক যোগ করি 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 আমাদের অন্তর্নিহিত ওয়েব উপাদান উদাহরণে. এখানে বিশেষ কিছু নেই: এটি ইতিমধ্যেই এর বৈশিষ্ট্যগুলির জন্য একই জিনিস কোন এইচটিএমএল উপাদান।

জিনিস সঙ্গে একটি সামান্য বিট আকর্ষণীয় পেতে 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>

কিন্তু, ধারণায়, আমাদের ওয়েব কম্পোনেন্টের প্রকৃত উদাহরণ পেতে হবে। এই একই জিনিস আমরা সবসময় করি যে কোন সময় আমরা একটি যোগ করি 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 আমাদের জন্য যে সমস্ত লেগওয়ার্ক পরিচালনা করে। এই ডেমো এটি পরীক্ষা করে দেখুন. এটি প্রায় সব জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের জন্য আদর্শ আচরণ।

তাহলে কেন আমি আপনাকে ওয়েব কম্পোনেন্টের প্রপ সেট করার ম্যানুয়াল উপায় দেখালাম? দুটি কারণ: এই জিনিসগুলি কীভাবে কাজ করে তা বোঝার জন্য এটি দরকারী এবং, কিছুক্ষণ আগে, আমি বলেছিলাম যে এটি সমস্ত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের জন্য কাজ করে৷ কিন্তু একটা ফ্রেমওয়ার্ক আছে যা, পাগলামি করে, ওয়েব কম্পোনেন্ট প্রপ সেটিংকে সমর্থন করে না যেমনটা আমরা দেখেছি।

প্রতিক্রিয়া একটি ভিন্ন জন্তু

প্রতিক্রিয়া। গ্রহের সবচেয়ে জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ওয়েব উপাদানগুলির সাথে মৌলিক ইন্টারপ সমর্থন করে না। এটি একটি সুপরিচিত সমস্যা যা প্রতিক্রিয়ার জন্য অনন্য। মজার বিষয় হল, এটি আসলে রিঅ্যাক্টের পরীক্ষামূলক শাখায় স্থির করা হয়েছে, কিন্তু কিছু কারণে 18 সংস্করণে মার্জ করা হয়নি। এর অগ্রগতি ট্র্যাক করুন. এবং আপনি একটি দিয়ে এটি নিজে চেষ্টা করতে পারেন লাইভ ডেমো.

সমাধান, অবশ্যই, একটি ব্যবহার করা হয় 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: সর্বত্র বৈশিষ্ট্য ব্যবহার করুন

আমাদের গুণাবলী আছে। আপনি উপরের প্রতিক্রিয়া ডেমো ক্লিক করলে, increment প্রপ কাজ করছিল না, কিন্তু রঙ সঠিকভাবে পরিবর্তিত হয়েছে। আমরা কি গুণাবলী সহ সবকিছু কোড করতে পারি না? দুঃখজনকভাবে, না. বৈশিষ্ট্য মান শুধুমাত্র স্ট্রিং হতে পারে. এটি এখানে যথেষ্ট ভাল, এবং আমরা এই পদ্ধতির সাথে কিছুটা দূরে যেতে সক্ষম হব। সংখ্যা মত increment স্ট্রিং থেকে এবং থেকে রূপান্তর করা যেতে পারে। আমরা এমনকি JSON স্ট্রিংফাই/পার্স অবজেক্ট করতে পারি। কিন্তু অবশেষে আমাদের একটি ওয়েব কম্পোনেন্টে একটি ফাংশন পাস করতে হবে, এবং সেই সময়ে আমরা বিকল্পের বাইরে থাকব।

বিকল্প 2: এটি মোড়ানো

একটি পুরানো কথা আছে যে আপনি পরোক্ষ স্তর যোগ করে কম্পিউটার বিজ্ঞানের যেকোনো সমস্যা সমাধান করতে পারেন (অনেক স্তরের পরোক্ষের সমস্যা ছাড়া)। এই প্রপস সেট করার কোডটি বেশ অনুমানযোগ্য এবং সহজ। যদি আমরা একটি লাইব্রেরিতে লুকিয়ে রাখি? লিটের পিছনে স্মার্ট লোকেরা একটি সমাধান আছে. আপনি এটিকে একটি ওয়েব উপাদান দেওয়ার পরে এই লাইব্রেরিটি আপনার জন্য একটি নতুন প্রতিক্রিয়া উপাদান তৈরি করে এবং এটির প্রয়োজনীয় বৈশিষ্ট্যগুলি তালিকাভুক্ত করে৷ বুদ্ধিমান হলেও, আমি এই পদ্ধতির ভক্ত নই।

ম্যানুয়ালি তৈরি রিঅ্যাক্ট কম্পোনেন্টে ওয়েব কম্পোনেন্টের এক-একটা ম্যাপিং করার পরিবর্তে, আমি যা পছন্দ করি তা হল এক আমরা আমাদের ওয়েব উপাদান পাস যে উপাদান প্রতিক্রিয়া নাম যোগ করা প্রতি (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 });

এইভাবে আমরা একটি ডায়নামিক নাম দিয়ে প্রতিক্রিয়াতে একটি উপাদান তৈরি করি। প্রকৃতপক্ষে, এটিই প্রতিক্রিয়া যা সাধারণত JSX এর মধ্যে স্থানান্তর করে। আমাদের সমস্ত ডিভ-এ রূপান্তরিত হয় createElement("div") কল আমাদের সাধারণত এই API-কে সরাসরি কল করার প্রয়োজন হয় না কিন্তু আমাদের যখন প্রয়োজন হয় তখন এটি সেখানে থাকে।

এর বাইরে, আমরা একটি লেআউট প্রভাব চালাতে চাই এবং প্রতিটি প্রপের মাধ্যমে লুপ করতে চাই যা আমরা আমাদের উপাদানে পাস করেছি। আমরা তাদের সব মাধ্যমে লুপ এবং এটি একটি সঙ্গে একটি সম্পত্তি কিনা তা পরীক্ষা করুন in চেক করুন যে ওয়েব কম্পোনেন্ট ইন্সট্যান্স অবজেক্টের পাশাপাশি এর প্রোটোটাইপ চেইন চেক করে, যা ক্লাস প্রোটোটাইপে যে কোনো গেটার/সেটারকে ধরবে। যদি এই ধরনের কোনো সম্পত্তি বিদ্যমান না থাকে, তাহলে এটি একটি বৈশিষ্ট্য বলে ধরে নেওয়া হয়। উভয় ক্ষেত্রেই, মান আসলে পরিবর্তিত হলেই আমরা এটি সেট করি।

আপনি যদি ভাবছেন কেন আমরা ব্যবহার করি useLayoutEffect পরিবর্তে useEffect, কারণ আমাদের সামগ্রী রেন্ডার হওয়ার আগে আমরা অবিলম্বে এই আপডেটগুলি চালাতে চাই৷ এছাড়াও, নোট করুন যে আমাদের কোন নির্ভরতা অ্যারে নেই useLayoutEffect; এর মানে আমরা এই আপডেটটি চালাতে চাই প্রতিটি রেন্ডার. এটি ঝুঁকিপূর্ণ হতে পারে যেহেতু প্রতিক্রিয়া পুনরায় রেন্ডার করার প্রবণতা রয়েছে৷ অনেক. আমি পুরো জিনিসটি গুটিয়ে নিয়ে এটিকে উন্নত করি React.memo. এটি মূলত এর আধুনিক সংস্করণ React.PureComponent, যার মানে কম্পোনেন্টটি শুধুমাত্র রি-রেন্ডার করবে যদি এর প্রকৃত প্রপগুলির কোনো পরিবর্তন হয়ে থাকে — এবং এটি একটি সাধারণ সমতা যাচাইয়ের মাধ্যমে তা ঘটেছে কিনা তা পরীক্ষা করে।

এখানে একমাত্র ঝুঁকি হল যে আপনি যদি একটি অবজেক্ট প্রপ পাস করেন যা আপনি পুনরায় বরাদ্দ না করে সরাসরি মিউটেশন করছেন, তাহলে আপনি আপডেটগুলি দেখতে পাবেন না। তবে এটি অত্যন্ত নিরুৎসাহিত করা হয়, বিশেষ করে প্রতিক্রিয়া সম্প্রদায়ে, তাই আমি এটি নিয়ে চিন্তা করব না।

এগিয়ে যাওয়ার আগে, আমি একটি শেষ কথা বলতে চাই। ব্যবহারটি দেখতে কেমন তা নিয়ে আপনি খুশি নাও হতে পারেন। আবার, এই উপাদানটি এভাবে ব্যবহার করা হয়:

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

বিশেষত, আপনি ওয়েব কম্পোনেন্ট ট্যাগ নাম পাস করতে পছন্দ নাও হতে পারে <WcWrapper> উপাদান এবং পরিবর্তে পছন্দ @lit-labs/react উপরের প্যাকেজ, যা প্রতিটি ওয়েব উপাদানের জন্য একটি নতুন পৃথক প্রতিক্রিয়া উপাদান তৈরি করে। এটি সম্পূর্ণরূপে ন্যায্য এবং আমি আপনাকে যা কিছুতে সবচেয়ে আরামদায়ক তা ব্যবহার করতে উত্সাহিত করব৷ কিন্তু আমার জন্য, এই পদ্ধতির একটি সুবিধা হল যে এটি করা সহজ মুছে ফেলা. যদি কিছু অলৌকিক প্রতিক্রিয়া দ্বারা তাদের পরীক্ষামূলক শাখা থেকে সঠিক ওয়েব উপাদান হ্যান্ডলিং একত্রিত হয় main আগামীকাল, আপনি এটি থেকে উপরের কোডটি পরিবর্তন করতে সক্ষম হবেন:

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

…এতে:

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

আপনি সম্ভবত সর্বত্র এটি করতে একটি একক কোডমড লিখতে পারেন এবং তারপর মুছে ফেলতে পারেন <WcWrapper> সব মিলিয়ে প্রকৃতপক্ষে, স্ক্র্যাচ করুন: একটি বিশ্বব্যাপী অনুসন্ধান এবং একটি RegEx দিয়ে প্রতিস্থাপন সম্ভবত কাজ করবে।

রুপায়ণ

আমি জানি, মনে হচ্ছে এখানে আসতে একটা যাত্রা লেগেছে। যদি আপনি মনে করেন, আমাদের মূল লক্ষ্য ছিল ইমেজ প্রিভিউ কোডটি নেওয়া যা আমরা আমার মধ্যে দেখেছি সর্বশেষ পোস্ট, এবং এটিকে একটি ওয়েব কম্পোনেন্টে নিয়ে যান যাতে এটি যেকোনো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কে ব্যবহার করা যায়। প্রতিক্রিয়ার সঠিক ইন্টারপের অভাব মিশ্রণে অনেক বিশদ যোগ করেছে। কিন্তু এখন যেহেতু আমাদের কাছে একটি শালীন হ্যান্ডেল আছে কিভাবে একটি ওয়েব কম্পোনেন্ট তৈরি করা যায় এবং এটি ব্যবহার করা যায়, বাস্তবায়নটি প্রায় ক্লাইমেকটিক হবে।

আমি এখানে সম্পূর্ণ ওয়েব কম্পোনেন্ট ড্রপ করব এবং কিছু আকর্ষণীয় বিট কল করব। আপনি যদি এটিকে কর্মক্ষেত্রে দেখতে চান তবে এখানে একটি কাজের ডেমো. এটি আমার তিনটি প্রিয় প্রোগ্রামিং ভাষায় আমার তিনটি প্রিয় বইয়ের মধ্যে পরিবর্তন করবে। প্রতিটি বইয়ের 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;
}

পরবর্তীতে আমাদের প্রিভিউ প্রপার্টি আছে, যা হয় আমাদের বেস64 প্রিভিউ স্ট্রিং বা আমাদের হতে পারে 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); }
}

যদি আমরা এটিকে একটি কাঠামোতে তৈরি করি তবে এটি আমাদের প্রয়োজনের চেয়ে কিছুটা বেশি বয়লারপ্লেট, তবে উল্টো দিকটি হল যে আমরা এটিকে আমাদের পছন্দসই যে কোনও কাঠামোতে পুনরায় ব্যবহার করতে পারি — যদিও প্রতিক্রিয়াটির জন্য আপাতত একটি মোড়কের প্রয়োজন হবে, যেমন আমরা আলোচনা করেছি .

টুকিটাকি

আমি ইতিমধ্যে লিটস রিঅ্যাক্ট র্যাপার উল্লেখ করেছি। কিন্তু আপনি যদি নিজেকে স্টেনসিল ব্যবহার করতে দেখেন, এটি আসলে একটি সমর্থন করে শুধুমাত্র প্রতিক্রিয়া জন্য পৃথক আউটপুট পাইপলাইন. এবং মাইক্রোসফ্ট এ ভাল লোকেরা আছে Lit এর মোড়ক অনুরূপ কিছু তৈরি, ফাস্ট ওয়েব কম্পোনেন্ট লাইব্রেরির সাথে সংযুক্ত।

আমি যেমন উল্লেখ করেছি, সমস্ত ফ্রেমওয়ার্ক যা রিঅ্যাক্ট নামে পরিচিত নয় সেগুলি আপনার জন্য ওয়েব কম্পোনেন্ট প্রপার্টি সেটিং পরিচালনা করবে। শুধু মনে রাখবেন যে কারো কারো সিনট্যাক্সের কিছু বিশেষ স্বাদ আছে। উদাহরণস্বরূপ, Solid.js এর সাথে, <your-wc value={12}> সর্বদা অনুমান করে যে value একটি সম্পত্তি, যা আপনি একটি দিয়ে ওভাররাইড করতে পারেন attr উপসর্গ, মত <your-wc attr:value={12}>.

মোড়ক উম্মচন

ওয়েব কম্পোনেন্ট হল ওয়েব ডেভেলপমেন্ট ল্যান্ডস্কেপের একটি আকর্ষণীয়, প্রায়ই কম ব্যবহার করা অংশ। তারা আপনার UI, বা "লিফ" ​​উপাদানগুলি পরিচালনা করে যেকোন একক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের উপর আপনার নির্ভরতা কমাতে সাহায্য করতে পারে। ওয়েব উপাদান হিসাবে এইগুলি তৈরি করার সময় - Svelte বা প্রতিক্রিয়া উপাদানগুলির বিপরীতে - ততটা ergonomic হবে না, উল্টো দিক হল যে তারা ব্যাপকভাবে পুনঃব্যবহারযোগ্য হবে।

ইন্টারঅপারেবল ওয়েব কম্পোনেন্ট তৈরি করা যা এমনকি প্রতিক্রিয়ার সাথেও কাজ করে মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.