الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

Svelte-Web-Components-Template

قالب أساسي لإنشاء مكتبة مكونات ويب قابلة للمشاركة باستخدام Vite و Svelte و TypeScript.

تقوم هذه القوالب بإنشاء مكونات ويب الفانيليا مما يمكن استخدامه باستخدام HTML العادي أو داخل أي أطر رئيسية ، مثل React أو Angular أو Vue أو Svelte (انظر التوافق).

كيفية استخدام هذا القالب

يمكنك إنشاء ريبو GitHub جديد مباشرة من هذا القالب عن طريق تحديد زر استخدام هذا القالب على Github.

يمكنك أيضًا استنساخه محليًا بالأوامر التالية: 

npx degit sinedied/svelte-web-components-template#main my-component-lib
cd my-component-lib
npm install

يعيش كود المصدر المكونات الخاصة بك في lib/ المجلد. سيتم تصدير المكونات فقط مع امتداد .wc.svelte كمكونات ويب ومتاحة في مكتبتك. هذا يعني أنه يمكنك أيضًا استخدام مكونات Svelte العادية مع امتداد .svelte كمكونات طفل لتفاصيل التنفيذ الخاصة بك.

يمكنك إضافة مكونات إضافية عن طريق إضافتها إلى مجلد lib وتحرير lib/index.js .

اختبار مكوناتك

يمكنك بدء خادم تطوير مع: 

npm start

ثم افتح متصفحك إلى مضيف محلي: 5173.

سيؤدي ذلك إلى إنشاء التطبيق التجريبي الموجود في demo/ المجلد ، حيث يمكنك استخدام مكونات الويب الخاصة بك واختبارها أثناء التطوير.

إذا كنت بحاجة إلى اختبارات الوحدة ، فيمكنك إلقاء نظرة على مكتبة اختبار Jest و Jest.

باستخدام مكونات الويب المصممة مع التطبيق التجريبي

يتم توفير التطبيق التجريبي لتطوير واختبار مكوناتك ، ولهذا السبب يستورد ملفات .svelte من المجلد lib/ المجلد بشكل افتراضي.

إذا كنت تفضل ذلك ، يمكنك استيراد مكونات الويب المصممة من المجلد dist/ المجلد بدلاً من ذلك ، عن طريق تحرير demo/src/App.svelte واستبدال import '../../lib'; بيان مع import '../../../dist/lib'; إذا تم تمكين خيار bundleComponents ، أو استيراد مكوناتك بشكل فردي مع import import '../../dist/MyComponent.wc.js'; خلاف ذلك.

يجب عليك أيضًا التأكد من تشغيل برنامج npm run build Script لإنشاء المجلد dist/lib/ المجلد أولاً.

بناء المكتبة

سيقوم Command npm run build بإنشاء مكتبة مكونات الويب في المجلد dist/lib/ . إنه ينشئ كل من وحدة ES ( dist/lib/<your-lib>.js ) مناسبة للمصاعد (غير مصححة) ، ووحدة ES مصغرة ( dist/lib/<your-lib>.min.js ) وبرنامج UMD منتظم ( dist/lib/<your-lib>.umd.js ).

يتم استدعاء البناء تلقائيًا عند تنفيذ npm publish لتوزيع مكتبتك ، وذلك بفضل إدخال البرنامج النصي prepublishOnly في package.json .

ملاحظات والقيود

لا يوفر هذا القالب أي مكونات ويب لدعم المتصفحات القديمة. من الأفضل عادة ترك هذه المهمة للتطبيق المضيف ، وبالتالي سبب استبعادها.

الدعائم

يتم تحويل أي دعائم مقبولة بواسطة مكون الويب الخاص بك تلقائيًا إلى سمات العناصر. نظرًا لأن Camelcase أو Pascalcase لا يعمل في HTML ، يجب عليك التأكد من تسمية الدعائم الخاصة بك في Secondcase. 

 < script >
  export let myvalue = "Default" ;
</ script >

الأحداث

حدث Svelte Syntax للاستماع إلى أحداث مثل on:myevent لا يعمل مع الأحداث التي تم إرسالها من مكون ويب Svelte (#3119).

تحتاج إلى استخدام حل بديل لذلك ، من خلال إنشاء CustomEvent وإرساله.

هذا مثال: 

// MyComponent.wc.svelte
< svelte:options tag =" my-component " />
< script >
  import { get_current_component } from "svelte/internal" ;
  const component = get_current_component ( ) ;
  
  // example function for dispatching events
  const dispatchEvent = ( name , detail ) =>
    component . dispatchEvent ( new CustomEvent ( name , { detail } ) ) ;
</ script >
< button on:click = {() = > dispatchEvent("test", "Hello!")} >
  Click to dispatch event
</ button >

بناء كل مكون في الوحدة النمطية الخاصة به

بشكل افتراضي ، سيقوم هذا القالب ببناء جميع المكونات في وحدة واحدة.

إذا كنت تفضل إنشاء كل مكون في الوحدة النمطية الخاصة به ، فيمكنك القيام بذلك عن طريق ضبط البيئة المتغيرة BUNDLE_COMPONENTS إلى false ، أو تحرير vite.config.js ووضع خيار bundleComponents إلى false .

ثم تحتاج أيضًا إلى استبدال محتوى packages/lib/index.ts بـ: 

 export default ( ) => {
  import ( './MyComponent.wc.svelte' ) ;
  // Import each of your component this way
} ;

سيمكن ذلك تقسيم الكود وسيقوم بإنشاء وحدة ES لكل مكون في dist/lib/ المجلد.

عندما غيرت الطريقة التي يتم بها تصدير المكونات ، تحتاج أيضًا إلى استبدال import '../../lib'; بيان في demo/src/App.svelte إلى import '../../lib/MyComponent.wc.svelte'; .

لماذا تمكين allowJs في قالب TS؟

على الرغم من أن allowJs: false من شأنه أن يمنع بالفعل استخدام ملفات .js في المشروع ، فإنه لا يمنع استخدام بناء جملة JavaScript في ملفات .svelte . بالإضافة إلى ذلك ، فإنه سيجبر checkJs: false ، وبالنسبة للأسوأ في كلا العالمين: عدم القدرة على ضمان قاعدة الكود بأكملها هي typextript ، وأيضًا وجود مجموعة أسوأ لجافا سكريبت الحالية. بالإضافة إلى ذلك ، هناك حالات استخدام صالحة قد تكون فيها قاعدة كود مختلطة ذات صلة.

لماذا لا يحافظ HMR على حالتي المكونة المحلية؟

الحافظة على حالة HMR يأتي مع عدد من gotchas! لقد تم تعطيله افتراضيًا في كل من svelte-hmr و @sveltejs/vite-plugin-svelte بسبب سلوكه المثير للدهشة في كثير من الأحيان. يمكنك قراءة التفاصيل هنا.

إذا كان لديك حالة مهمة للاحتفاظ بها داخل مكون ما ، ففكر في إنشاء متجر خارجي لن يتم استبداله بـ HMR. 

 // store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable ( 0 )
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل