unplugin svelte components

Unplugin-Velt-Komponenten

On-Demand-Komponenten automatisch importieren für Svelte.

Sufelskit Demo Svelte Vite Demo

Merkmale

• ⚡️ unterstützt vite, webpack, rollup, eSbuild und mehr, angetrieben von Unpugin.
• ? Baumschiffbar, registriert nur die von Ihnen verwendeten Komponenten.
• ? Ordnernamen als Namespaces.
• ? Vollständige Typuskriptsunterstützung.
• ? Funktioniert perfekt mit Unpugin-Auto-Import.

Installation

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 ( ) ,
  ] ,
} ) 

Verwendung

Verwenden Sie Komponenten, wie Sie es normalerweise tun würden, es importiert Komponenten bei Bedarf und es ist kein import mehr erforderlich!

Es wird dies automatisch drehen

 < HelloWorld msg =" Hello Svelte " />

in das

 < HelloWorld msg =" Hello Svelte " />

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

Typoskript

Um die typeScript-Unterstützung für automatisch importierte Komponenten zu erhalten, können Sie die Konfiguration so ändern, dass sie folgen, um die Unterstützung zu erhalten.

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

Sobald das Setup abgeschlossen ist, werden eine components.d.ts generiert und automatisch mit den Typdefinitionen aktualisiert. Fühlen Sie sich frei, es zu Git zu verpflichten oder nicht, wie Sie wollen.

Stellen Sie sicher, dass Sie Ihrem tsconfig.json unter includes auch components.d.ts hinzufügen.

Registrierte Drittkomponenten

Es ist cool, dass Ihre eigenen Komponenten es importiert haben, aber manchmal möchten Sie Komponenten von Drittanbietern importieren.

Daher boten unplugin-svelte-components eine Möglichkeit, diese Komponenten zu importieren.

 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
    } ,
  ] ,
} )

Daher können die Alert und AButton verwendet werden.

Deaktivierung

In einigen Fällen möchten Sie das automatische Import auf Ihrer Seite deaktivieren. unplugin-svelte-components bieten eine Möglichkeit, dies nur zu tun , indem Sie nur <!-- unplugin-svelte-components disabled -->

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

Konfiguration

Die folgenden Zeigen Sie die Standardwerte der Konfiguration an

 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')
  }

} ) 

Danke

Dank Anthony Fu ist dieses Projekt stark von Unentfuhr-Vorstellungskomponenten inspiriert.

Lizenz

MIT-Lizenz © 2022-Präsententen Mohamed Nesredin