Unduh unplugin svelte components - Unduh Kode Sumber unplugin svelte components

unplugin svelte components

Komponen pihak ketiga

1.0.0

Unduh

Komponen Unplugin-Svelte

Komponen On-Demand Impor Otomatis untuk Svelte.

Demo Sveltekit Demo Vite Svelte

Fitur

⚡️ Mendukung Vite, Webpack, Rollup, Esbuild dan banyak lagi, ditenagai oleh Unplugin.
? Tree-shakable, hanya mendaftarkan komponen yang Anda gunakan.
? Nama folder sebagai ruang nama.
? Dukungan TypePript Lengkap.
? Bekerja dengan sempurna dengan Unplugin-Auto-Import.

Instalasi

pnpm add -D unplugin-svelte-components

Vite

 // vite.config.ts
import Components from 'unplugin-svelte-components/vite'

export default defineConfig ( {
  plugins : [
    Components ( { /* options */ } ) ,
  ] ,
} )

Rollup

 // rollup.config.js
import Components from 'unplugin-svelte-components/rollup'

export default {
  plugins : [
    Components ( { /* options */ } ) ,
  ] ,
}

Webpack

 // webpack.config.js
module . exports = {
  /* ... */
  plugins : [
    require ( 'unplugin-svelte-components/webpack' ) ( { /* options */ } ) ,
  ] ,
}

Esbuild

 // esbuild.config.js
import { build } from 'esbuild'

build ( {
  /* ... */
  plugins : [
    require ( 'unplugin-svelte-components/esbuild' ) ( {
      /* options */
    } ) ,
  ] ,
} )

Sveltekit

 // vite.config.ts
import Components from 'unplugin-svelte-components/vite'

export default defineConfig ( {
  plugins : [
    Components ( { /* options */ } ) , // before sveltekit plugin
    sveltekit ( ) ,
  ] ,
} )

Penggunaan

Gunakan komponen seperti yang biasanya Anda lakukan, itu akan mengimpor komponen sesuai permintaan, dan tidak ada import yang diperlukan lagi!

Itu akan secara otomatis mengubah ini

 < HelloWorld msg =" Hello Svelte " />

ke dalam ini

 < HelloWorld msg =" Hello Svelte " />

< script >
import HelloWorld from './src/components/HelloWorld.svelte'
</ script >

Naskah

Untuk mendapatkan dukungan TypeScript untuk komponen yang diimpor otomatis, Anda dapat mengubah konfigurasi sebagai berikut untuk mendapatkan dukungan.

 Components ( {
  dts : true , // enabled by default if `typescript` is installed
} )

Setelah pengaturan selesai, components.d.ts akan dihasilkan dan pembaruan secara otomatis dengan definisi tipe. Jangan ragu untuk melakukan ke dalam git atau tidak seperti yang Anda inginkan.

Pastikan Anda juga menambahkan components.d.ts ke tsconfig.json Anda di bawah includes .

Komponen pihak ketiga terdaftar

Sangat keren memiliki komponen Anda sendiri telah mengimpornya, tetapi kadang -kadang Anda ingin mengimpor komponen pihak ketiga.

Dengan demikian, unplugin-svelte-components menyediakan cara untuk mengimpor komponen-komponen ini.

 Components ( {
  dts : true ,
  external : [
    {
      from : "agnostic-svelte" , // import from third party
      names : [ // import these components
        "Alert" ,
        "Button as AButton" , // import as `AButton`
      ] ,
      defaultImport : false , // telling `unplugin-svelte-components` to import any component as non-default export
    } ,
  ] ,
} )

Jadi Alert dan AButton akan tersedia untuk digunakan.

Melumpuhkan

Dalam beberapa kasus, Anda mungkin ingin menonaktifkan auto-impor di halaman Anda, unplugin-svelte-components menyediakan cara untuk melakukannya dengan hanya menambahkan  dalam file .svelte Anda

 <!-- unplugin-svelte-components disabled -->
< HelloWorld msg =" Hello Svelte " />

Konfigurasi

Berikut menunjukkan nilai default konfigurasi

 Components ( {
  // relative paths to the directory to search for components.
  dirs : [ 'src/components' ] ,

  // valid file extensions for components.
  extensions : [ 'svelte' ] ,

// search for subdirectories
  deep : true ,

  // generate `components.d.ts` global declarations,
  // also accepts a path for custom filename
  // default: `true` if package typescript is installed
  dts : false ,

  // Allow subdirectories as namespace prefix for components.
  directoryAsNamespace : false ,
  // Subdirectory paths for ignoring namespace prefixes
  // works when `directoryAsNamespace: true`
  globalNamespaces : [ ] ,

  // Transform path before resolving
  importPathTransform : v => v ,

  // Allow for components to override other components with the same name
  allowOverrides : false ,

  // Accept a svelte pre-processor (e.g. svelte-preprocess)
  preprocess :  null ,

  // filters for transforming targets
  include : [ / .svelte$ / , / .svelte?svelte / ] ,
  exclude : [ / [\/]node_modules[\/] / , / [\/].git[\/] / , / [\/].svelte-kit[\/] / , ] ,

  // Generate corresponding .eslintrc-components.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc : {
    enabled : true , // Default `true`
    filepath : './.eslintrc-components.json' , // Default `./.eslintrc-components.json`
    globalsPropValue : true , // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  }

} )