ما تعلمته بكتابة مكتبة مكونة في Svelte

بعد أن جربت Svelte في مشاريع شخصية ، أردت المضي قدمًا واتخاذ إطار أكبر في المشروع. للقيام بذلك ، كتبت مكتبة مكونات ذرات svelte . كأساس ، أخذت مجموعة واجهة المستخدم على React ، والتي نستخدمها في العمل.

ما التقنيات Svelte تعلمت ، وقراءة تحت الخفض.

تفترض هذه المقالة أنك على دراية بالمفاهيم الأساسية لـ Svelte. إذا لم يكن كذلك ، أوصي بأن تقرأ مقالاتي السابقة أولاً:
حياة كاملة على Svelte
تطوير لعبة على Svelte 3

المكتبة في مرحلة المراجعة النشطة. لا تزال بعض المكونات مفقودة ، ولم يتم حل مشكلات إمكانية الوصول ، ولم يتم إصلاح جميع الأخطاء. الآن أقوم بتنفيذ مشروع على هذا الحوت لفهم ما يجب تحسينه أولاً في وضع القتال.

لذلك ، ما تعلمته بكتابة مكتبة مكونة في Svelte.

1. استخدام خاصية الصف

إذا كنت ترغب في إضافة خاصية الفئة إلى معلمات المكون الخاص بك ، فسوف تحصل على خطأ ، لأن الكلمة محجوزة بواسطة javascript نفسها.

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

يمكنك حل هذه المشكلة باستخدام واجهة Svelte الداخلية. يحتوي متغير الدعائم $$ على كل الخصائص التي يتم تمريرها إلى المكون. في المكون الأصل ، يمكنك تمرير خاصية الفئة

 <Component class="someClass" /> 

وفي المكون نفسه ، قم بتعيين الفئة من متغير الدعائم $$ .

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

مثال في REPL

2. تصميم مكونات الطفل

Svelte يستخدم أسلوب العزلة. إذا قمت بإضافة فصل دراسي في أحد المكونات ، فسيتم إضافة علامة التجزئة إليه وستكون فريدة بالنسبة للمكون ولن تتسرب إلى أي مكان. ولكن ماذا لو كنت بحاجة إلى نمط عنصر تابع؟ من المنطقي أن نمنحه بعض الدروس ويصف الأنماط في الوالد. يتم حل هذه المشكلة بكل بساطة ، باستخدام التوجيه : global ()

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

مثال في REPL

مع هذا النهج ، لا تزال تحصل على نمط منعزل ، ولكن هذا ينطبق خلال التسلسل الهرمي للمكونات الفرعية

3. معالجات جميع الأحداث

يجب أن يدعم مكون Svelte الحدث حتى يمكن تعيين معالج خارجي له. وصف جميع الخيارات للأحداث متعب. بدلاً من ذلك ، يمكنك كتابة معالج عالمي يبحث عن معالجات الأحداث التي يتم تمريرها إلى المكون وإضافتها إلى المكون الخاص بنا. لقد رصدت الفكرة مع AlexxNB في مكتبة svelte-chota الخاصة به .

 <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 الداخلية ، والتي قد تتغير. آمل في الدعم المستقبلي لـ on: * سيتم إضافة توجيه المشكلة على جيثب

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 بوابات ، كما هو الحال في React ، لكن الأمر بسيط للغاية. يمكنك استخدام DOM api لهذا الغرض.

 <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> 

لتركيب المكون ، نقوم بنقله إلى الجسم ، وعند الإزالة ، نقوم بإزالة بوابتنا.
ملاحظة مهمة: لف المدخل في div ، وإلا فقد تزيل Svelte المكونات بشكل غير صحيح عند إلغاء التثبيت.

6. الرسوم المتحركة

لدى Svelte مجموعة كبيرة من الرسوم المتحركة الجاهزة التي قد تكون مفيدة لك في عملك. من السهل جدًا تحريك مظهر المكونات واختفاءها. لكن تنشيط كتلة واحدة يمكن أن يبطئ من حذف الصفحة بأكملها. سينتظر 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)} 

حصلت على الفكرة من PaulMaly .

9. على الوجهين ملزمة

بعد التطوير على React ، يبدو مفهوم الربط ثنائي الاتجاه مخيفًا ، لكنه يبدو للوهلة الأولى فقط. نتيجةً لذلك ، سيبدو تطبيقك أكثر إيجازًا ويسمح لك بالتخلص من مجموعة من المعالجات. يمكنك استخدام متغير عادي وتخزينه كتخزين.

 <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 ، والتي يتم تنفيذها تقريبًا. تؤخذ التعليمات البرمجية والأنماط في الاعتبار.

مكتبة تجريبية
شفرة المصدر
إذا وجدت خطأ ، أو كنت ترغب في اقتراح شيء ، فقم بإنشاء مشكلة

PS
22 فبراير 2020 سيعقد Svelte Russian Meetup # 1 في موسكو. التفاصيل والإعلان الرسمي في برقية لمجموعة المجتمع الروسي Svelte: sveltejs

أدعو الجميع للمشاركة!