वेब घटक लिखने का पारंपरिक तरीका बहुत SSR (सर्वर साइड रेंडरिंग) अनुकूल नहीं है। इस पोस्ट में, मैं आपको दिखाता हूं कि आप कैसे प्रतिक्रियाशील वेब घटक बना सकते हैं जो एसएसआर और किसी भी जावास्क्रिप्ट फ्रेमवर्क (व्यू, रिएक्ट, स्वेल्ट, सॉलिड, ब्रिसा) या वेनिला जेएस के साथ काम करते हैं।

• परिचय
• ब्रिसा के साथ एक वेब घटक लिखना
• वेब घटक का निर्माण
• वेनिला जेएस प्रोजेक्ट में वेब घटक लोड हो रहा है
• वेब घटक का एसएसआर
• मुझे ब्रिसा के बारे में और बताएं... कृपया...
• वेब घटक पुस्तकालय रचनाकारों के लिए नोट
• उदाहरण
• निष्कर्ष

परिचय

हम ब्रिसा वेब कंपोनेंट कंपाइलर का उपयोग करने जा रहे हैं। ब्रिसा एक वेब फ्रेमवर्क है, जो Next.js या Nuxt.js जैसे अन्य फ्रेमवर्क के समान होने के अलावा, आपको प्रतिक्रियाशील वेब घटक बनाने की भी अनुमति देता है जो JSX और SSR के साथ प्रतिक्रियाशीलता के लिए संकेतों के साथ काम करते हैं।

ऐसा करने के लिए, आपको वेब कंपोनेंट्स लिखते समय केवल ब्रिसा के सिंटैक्स को जानना होगा। ब्रिसा अभी तक सार्वजनिक नहीं है क्योंकि यह वर्तमान में v0.1 रूटमैप के 95.48% पर है, लेकिन हमारा अनुमान है कि 1 महीने में यह लॉन्च के लिए तैयार हो जाएगा और हर कोई इस तक पहुंच सकेगा। हालाँकि, भले ही यह बिल्कुल भी सार्वजनिक न हो, आप पहले से ही इसका उपयोग अपनी स्वयं की वेब घटक लाइब्रेरी बनाने के लिए कर सकते हैं।

ब्रिसा के साथ एक वेब घटक लिखना

एक उदाहरण के रूप में, हम एक काउंटर का एक वेब घटक लिखने जा रहे हैं, हमेशा की तरह, क्लासिक उदाहरण।

counter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

ब्रिसा चयनकर्ता को जानने के लिए फ़ाइलों के नाम का उपयोग करता है, यहां चयनकर्ता काउंटर-डब्ल्यूसी होगा।

टिप: हालांकि ब्रिसा अभी तक सार्वजनिक नहीं है, आप वेब घटकों को लिखने के तरीके पर मार्गदर्शन करने के लिए टाइपस्क्रिप्ट प्रकारों का उपयोग कर सकते हैं।

उपरोक्त उदाहरण में, राज्य का उपयोग सिग्नल बनाने के लिए किया जाता है और फिर .value का उपयोग करके आप इसे JSX के अंदर प्रतिक्रियाशील बनाते हैं। प्रॉप्स भी विशेष सिग्नल हैं, क्योंकि वे केवल-पढ़ने के लिए होते हैं, .वैल्यू का उपयोग इसे आसान बनाने और डिफ़ॉल्ट मानों को अधिक आसानी से परिभाषित करने के लिए नहीं किया जाता है, यह बिल्ड-टाइम ऑप्टिमाइज़ेशन के माध्यम से किया जाता है, रिएक्ट के समान कार्य करने के लिए यदि वे सिग्नल का उपयोग कर रहे थे, लेकिन इसके विपरीत।

सीएसएस टेम्पलेट शाब्दिक रंग संपत्ति के इस मामले में प्रतिक्रियाशील परिवर्तनों पर प्रतिक्रिया करने की अनुमति देता है। इस उदाहरण के बाहर यह सीएसएस टेम्पलेट आसानी से प्रतिक्रियाशील एनिमेशन बनाने के लिए बहुत उपयोगी है। यह याद रखना महत्वपूर्ण है कि वेब घटक शैडो डोम के साथ काम करते हैं, इसलिए सीएसएस शेष पृष्ठ को प्रभावित नहीं करता है।

वेब घटक का निर्माण

वेब घटक बनाने के लिए, आपको निम्नलिखित कमांड चलाने की आवश्यकता है:

brisa build -w counter-wc.tsx

यह कमांड 2 फ़ाइलें उत्पन्न करेगा:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

ये फ़ाइलें वेब घटक नहीं हैं, यह केवल वेब घटक का रेंडरिंग फ़ंक्शन है जिसे बिल्ड-टाइम पर जितना संभव हो उतना हल्का बनाने के लिए अनुकूलित किया गया है (जो बाइट्स बाहर आते हैं वे बिना gzip के हैं) । &&&]

तो, हम वेब घटक कैसे लोड करें?

वेनिला जेएस प्रोजेक्ट में वेब घटक लोड हो रहा है

ऐसा करने के लिए, आपको HTML में ब्रिसा/क्लाइंट के साथ इंपोर्टमैप जोड़ना होगा और फिर काउंटर-wc.client.js फ़ाइल आयात करना होगा:

ब्रिसा वेब घटक उदाहरणशीर्षक> { "आयात": { "ब्रिसा/क्लाइंट": "https://unpkg.com/brisa@latest/client-simplified/index.js" } } स्क्रिप्ट> काउंटर-डब्ल्यूसी>