svelte web components template

Svelte-Web-Components-Template

Templat dasar untuk membangun pustaka komponen web yang dapat dibagikan menggunakan vite, lsvelte dan naskah.

Templat ini menghasilkan komponen web vanilla daripada yang dapat digunakan dengan HTML polos atau dalam kerangka kerja utama, seperti reaksi, sudut, vue atau langsing (lihat kompatibilitas).

Cara menggunakan template ini

Anda dapat secara langsung membuat repo GitHub baru dari templat ini dengan memilih tombol Gunakan Template ini di GitHub.

Anda juga dapat mengkloningnya secara lokal dengan perintah berikut:

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

Kode Sumber Komponen Anda tinggal di lib/ folder. Hanya komponen dengan ekstensi .wc.svelte yang akan diekspor sebagai komponen web dan tersedia di perpustakaan Anda. Ini berarti bahwa Anda juga dapat menggunakan komponen langsing biasa dengan ekstensi .svelte sebagai komponen anak untuk detail implementasi Anda.

Anda dapat menambahkan komponen tambahan dengan menambahkannya ke folder lib dan mengedit lib/index.js .

Menguji komponen Anda

Anda dapat memulai server pengembangan dengan:

npm start

Kemudian buka browser Anda ke LocalHost: 5173.

Ini akan membangun aplikasi demo yang terletak di demo/ folder, di mana Anda dapat menggunakan dan menguji komponen web Anda selama pengembangan.

Jika Anda memerlukan tes unit, Anda dapat melihat perpustakaan pengujian Jest and Jest.

Menggunakan komponen web yang dibangun dengan aplikasi demo

Aplikasi demo disediakan untuk pengembangan dan pengujian komponen Anda, itulah sebabnya ia mengimpor file .svelte dari lib/ folder secara langsung secara default.

Jika lebih suka, Anda dapat mengimpor komponen web yang dibangun dari folder dist/ sebagai gantinya, dengan mengedit demo/src/App.svelte dan mengganti import '../../lib'; pernyataan dengan import '../../../dist/lib'; Jika Anda memiliki opsi bundleComponents diaktifkan, atau secara individual mengimpor komponen Anda dengan import import '../../dist/MyComponent.wc.js'; jika tidak.

Anda juga harus memastikan untuk menjalankan skrip npm run build untuk menghasilkan dist/lib/ folder terlebih dahulu.

Membangun Perpustakaan

Perintah npm run build akan membuat pustaka komponen web di folder dist/lib/ . Ini menciptakan modul ES ( dist/lib/<your-lib>.js ) yang cocok untuk bundler (non-minified), modul ES yang diminifikasi ( dist/lib/<your-lib>.min.js ) dan skrip UMD biasa ( dist/lib/<your-lib>.umd.js ).

Build secara otomatis dipanggil saat mengeksekusi npm publish untuk mendistribusikan perpustakaan Anda, berkat entri skrip prepublishOnly di package.json .

Catatan dan batasan

Template ini tidak menyediakan komponen web polyfill untuk dukungan browser yang lebih lama. Biasanya yang terbaik untuk meninggalkan tugas itu ke aplikasi host, karenanya mengapa mereka ditinggalkan.

Alat peraga

Setiap alat peraga yang diterima oleh komponen web Anda secara otomatis diubah menjadi atribut elemen. Karena Camelcase atau Pascalcase tidak berfungsi di HTML, Anda harus memastikan untuk memberi nama alat peraga Anda dengan huruf kecil.

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

Acara

Acara sintaks svelte untuk mendengarkan acara seperti on:myevent tidak bekerja dengan acara yang dikirim dari komponen web langsing (#3119).

Anda perlu menggunakan solusi untuk itu, dengan membuat CustomEvent dan mengirimkannya.

Inilah contohnya:

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

Membangun setiap komponen ke dalam modulnya sendiri

Secara default template ini akan membangun semua komponen menjadi satu modul.

Jika Anda lebih suka membangun setiap komponen ke dalam modulnya sendiri, Anda dapat melakukannya dengan mengatur variabel lingkungan BUNDLE_COMPONENTS menjadi false , atau mengedit vite.config.js dan mengatur opsi bundleComponents menjadi false .

Maka Anda juga perlu mengganti konten packages/lib/index.ts dengan:

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

Ini akan memungkinkan pemisahan kode dan akan menghasilkan modul ES untuk setiap komponen di folder dist/lib/ .

Saat Anda mengubah cara komponen diekspor, Anda juga perlu mengganti import '../../lib'; Pernyataan dalam demo/src/App.svelte untuk import '../../lib/MyComponent.wc.svelte'; .

Mengapa Mengaktifkan allowJs dalam Template TS?

Sementara allowJs: false memang akan mencegah penggunaan file .js dalam proyek, itu tidak mencegah penggunaan sintaks JavaScript dalam file .svelte . Selain itu, itu akan memaksa checkJs: false , membawa yang terburuk dari kedua dunia: tidak dapat menjamin seluruh basis kode adalah naskah, dan juga memiliki typechecking yang lebih buruk untuk javascript yang ada. Selain itu, ada kasus penggunaan yang valid di mana basis kode campuran mungkin relevan.

Mengapa HMR tidak melestarikan status komponen lokal saya?

HMR State Preservation hadir dengan sejumlah gotcha! Ini telah dinonaktifkan secara default di kedua svelte-hmr dan @sveltejs/vite-plugin-svelte karena perilakunya yang sering mengejutkan. Anda dapat membaca detailnya di sini.

Jika Anda memiliki status yang penting untuk dipertahankan dalam komponen, pertimbangkan untuk membuat toko eksternal yang tidak akan digantikan oleh HMR.

 // store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable ( 0 )