मैंने स्वेल्टे में एक घटक पुस्तकालय लिखकर क्या सीखा

व्यक्तिगत परियोजनाओं में Svelte की कोशिश करने के बाद, मैं आगे बढ़ना चाहता था और परियोजना में एक बड़ा ढांचा तैयार करना चाहता था। ऐसा करने के लिए, मैंने घटकों की एक लाइब्रेरी svelte-atoms लिखी। एक आधार के रूप में, मैंने रिएक्ट पर यूआई किट लिया, जिसका उपयोग हम काम पर करते हैं।

Svelte मैंने कौन सी तकनीकें सीखीं, कट के नीचे पढ़ें।

यह लेख मानता है कि आप पहले से ही Svelte की मूल अवधारणाओं से परिचित हैं। यदि नहीं, तो मेरा सुझाव है कि आप पहले मेरे पिछले लेख पढ़ें:
स्वेल्टे पर पूरा जीवन
Svelte 3 पर एक गेम विकसित करना

पुस्तकालय सक्रिय संशोधन के चरण में है। कुछ घटक अभी भी गायब हैं, पहुंच के मुद्दों पर काम नहीं किया गया है, और सभी बग को ठीक नहीं किया गया है। अब मैं इस व्हेल पर एक प्रोजेक्ट कर रहा हूं ताकि मुकाबला मोड में समझा जा सके कि पहले क्या सुधार की जरूरत है।

इसलिए, मैंने स्वेल्टे में एक घटक पुस्तकालय लिखकर क्या सीखा।

1. वर्ग संपत्ति का उपयोग करना

यदि आप अपने घटक के मापदंडों में वर्ग की संपत्ति जोड़ना चाहते हैं, तो आपको एक त्रुटि मिलेगी, क्योंकि शब्द जावास्क्रिप्ट द्वारा ही आरक्षित है।

<script> export let class = ''; // !!!  !!! </script> 

आप आंतरिक Svelte Api का उपयोग करके इस समस्या को हल कर सकते हैं। $$ प्रॉप्स वैरिएबल में वे सभी गुण हैं जो घटक को पास किए जाते हैं। मूल घटक में, आप वर्ग गुण पास कर सकते हैं

 <Component class="someClass" /> 

और घटक में ही, $ $ प्रॉप्स चर से वर्ग सेट करें।

 <div class={$$props.class} /> 

REPL में उदाहरण

2. स्टाइलिंग बाल घटक

Svelte शैली अलगाव का उपयोग करता है। यदि आपने एक घटक में एक वर्ग जोड़ा है, तो इसमें एक हैश जोड़ा जाएगा और यह आपके घटक के लिए अद्वितीय होगा और कहीं भी लीक नहीं होगा। लेकिन क्या होगा अगर आपको बाल घटक को स्टाइल करने की आवश्यकता है? उसे कुछ कक्षा देने और माता-पिता में शैलियों को लिखने के लिए तर्कसंगत है। निर्देश का उपयोग करके यह समस्या काफी सरलता से हल हो गई है : वैश्विक ()

 <script> import Component from "./Component.svelte"; </script> <div class="parent"> <Component class="childClass" /> </div> <style> .parent :global(.childClass) { color: red; } </style> 

REPL में उदाहरण

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

3. सभी घटनाओं के हैंडलर

Svelte घटक को घटना का समर्थन करना चाहिए ताकि एक बाहरी हैंडलर को इसे सौंपा जा सके। घटनाओं के सभी विकल्पों का वर्णन करना थका देने वाला है। इसके बजाय, आप एक सार्वभौमिक हैंडलर लिख सकते हैं जो ईवेंट हैंडलर के लिए देखेगा जो कि घटक को पास कर दिया गया है और उन्हें हमारे घटक में जोड़ देगा। मैंने अपने svelte-chota लाइब्रेरी में AlexxNB के साथ विचार देखा ।

 <script> import { current_component, bubble, listen } from "svelte/internal"; function getEventsAction(component) { return node => { const events = Object.keys(component.$$.callbacks); const listeners = []; events.forEach(event => listeners.push(listen(node, event, e => bubble(component, e))) ); return { destroy: () => { listeners.forEach(listener => listener()); } }; }; } const events = getEventsAction(current_component); export let value; </script> <input use:events {value} /> 

REPL में उदाहरण

यह विधि पूरी तरह से कानूनी नहीं है, क्योंकि यह आंतरिक Svelte API का उपयोग करता है, जो बदल सकता है। मुझे आशा है कि भविष्य में समर्थन के लिए : * इश्यू निर्देश जीथब पर जोड़ा जाएगा

4. स्लॉट का पता लगाना

यदि आपको यह पता लगाने की आवश्यकता है कि क्या स्लॉट की सामग्री स्थानांतरित की जाती है, तो मैं आपको दो विकल्प प्रदान कर सकता हूं।

पहला तरीका, कानूनी

स्लॉट्स में एक फॉलबैक होता है, जो कंटेंट ट्रांसफर नहीं होने पर प्रदर्शित होता है। एक वेरिएबल में फोल्डिंग बैकिंग होने के बाद, हम अपने स्लॉट का पता लगा सकते हैं।

 <script> let footerRef = null; $: isFooterExists = Boolean(footerRef); </script> <slot name="footer"> <div bind:this={footerRef} /> </slot> {isFooterExists ? ' ' : ' '} 

दूसरा तरीका, अर्ध-कानूनी

आप आंतरिक Svelte Api का उपयोग कर सकते हैं

 const isFooterExists = Boolean($$props.$$slots && $$props.$$slots.footer); 

REPL में उदाहरण

5. पोर्टल

Svelte प्रतिक्रिया में पोर्टल्स को स्वीकार नहीं करता है, लेकिन ऐसा करना बहुत सरल है। इसके लिए आप DOM एपीआई का उपयोग कर सकते हैं।

 <script> import { onMount } from "svelte"; let ref; onMount(() => { document.body.appendChild(ref); return () => { document.body.removeChild(ref); }; }); </script> <div> <div bind:this={ref}>content</div> </div> 

घटक को माउंट करने के लिए, हम इसे शरीर में स्थानांतरित करते हैं, और हटाते समय हम अपने पोर्टल को हटा देते हैं।
महत्वपूर्ण नोट: अपने पोर्टल को एक डिव में लपेटें, अन्यथा स्वेल्ट अनमाउंटिंग के दौरान घटकों को गलत तरीके से हटा सकता है।

6. एनिमेशन

स्वेल्ट में तैयार एनिमेशन का एक बड़ा सेट है जो आपके काम में आपके लिए उपयोगी हो सकता है। घटकों की उपस्थिति और गायब होने को चेतन करना बहुत आसान है। लेकिन एक ब्लॉक को एनिमेट करने से पूरे पेज को हटाना धीमा हो सकता है। पेड़ से घटक को हटाने से पहले Svelte एनीमेशन के पूरा होने की प्रतीक्षा करेगा। इससे बचने के लिए, स्थानीय निर्देश का उपयोग करें।
ट्यूटोरियल उदाहरण

7. नामित स्लॉट और घटक

दुर्भाग्य से, आप किसी घटक को नामित स्लॉट में तुरंत स्थानांतरित नहीं कर सकते। गितुब पर जारी

 <Component> <Child slot='footer'/> </Component> <!--    --> 

किसी घटक को नामित स्लॉट में स्थानांतरित करने के लिए, इसे एक div या किसी अन्य HTML टैग में लपेटें।

 <Component> <div slot='footer'> <Child /> </div> </Component> <!-- ! --> 

8. घटक गुणों की एक सूची प्राप्त करना

यदि आपको उन गुणों की सूची प्राप्त करने की आवश्यकता है जो किसी घटक से निर्यात किए जाते हैं, तो आप निम्न निर्माण का उपयोग कर सकते हैं:

 <script> import Component from './Component.svelte'; const [_, ...props] = Object.getOwnPropertyNames(Component.prototype); </script> {JSON.stringify(props)} 

मुझे पॉलमैली का विचार आया ।

9. दो तरफा बंधन

रिएक्ट पर विकसित होने के बाद, दो-तरफा बंधन की अवधारणा डराने लगती है, लेकिन यह केवल पहली नज़र में है। नतीजतन, आपका आवेदन अधिक संक्षिप्त लगेगा और आपको हैंडलर के झुंड से छुटकारा पाने की अनुमति देगा। आप एक नियमित चर और भंडार दोनों का उपयोग भंडारण के रूप में कर सकते हैं।

 <script> import Input from "./Input.svelte"; import { writable } from "svelte/store"; let letValue = "test let"; const storeValue = writable("test store"); </script> <Input bind:value={letValue} /> <Input bind:value={$storeValue} /> 

REPL में उदाहरण

10. संपादन योग्य सामग्री

यदि आपको एक तत्व की सामग्री को संपादन योग्य बनाने की आवश्यकता है, तो आप सामग्री के अनुकूल निर्देश का उपयोग कर सकते हैं और मानों को एक चर में बाँध सकते हैं।

 <script> let value = "Edit me"; </script> <div contenteditable="true" bind:textContent={value}>{value}</div> <div>Value: {value}</div> 

REPL में उदाहरण

घटक का आकार

खैर, और जहां प्रतिक्रिया के बिना। Svelte और React पर घटकों के कोड की पंक्तियों की संख्या की तुलना रखें, जो लगभग उसी पर लागू की जाती हैं। कोड और शैलियों को ध्यान में रखा जाता है।

डेमो लाइब्रेरी
स्रोत कोड
यदि आप बग ढूंढते हैं, या कुछ सुझाव देना चाहते हैं, तो एक समस्या बनाएं

पुनश्च
22 फरवरी, 2020 को मॉस्को में स्वेल्ट रूसी मीटअप # 1 आयोजित किया जाएगा। विवरण और रूसी समुदाय समूह Svelte को तार में आधिकारिक घोषणा: @sveltejs

मैं सभी को भाग लेने के लिए आमंत्रित करता हूं!