Neatly Packaged Magic

    unplugin-svelte-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    unplugin-svelte-components

    NPM version

    On-demand components auto importing for Svelte.

    Features

    • ⚡️ Supports Vite, Webpack, Rollup, esbuild and more, powered by unplugin.
    • 🏝 Tree-shakable, only registers the components you use.
    • 🪐 Folder names as namespaces.
    • 🦾 Full TypeScript support.
    • 😃 Works perfectly with unplugin-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(),
      ],
    })


    Usage

    Use components as you would usually do, it will import components on demand, and there is no import required anymore!

    It will automatically turn this

    <HelloWorld msg="Hello Svelte" />

    into this

    <HelloWorld msg="Hello Svelte" />
    
    <script>
    import HelloWorld from './src/components/HelloWorld.svelte'
    </script>

    TypeScript

    To get TypeScript support for auto-imported components, you can change the config as following to get the support.

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

    Once the setup is done, a components.d.ts will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.

    Make sure you also add components.d.ts to your tsconfig.json under includes.

    Registered third party components

    It's cool to have your own components have been import it, but sometime you want to import third party components.

    Thus unplugin-svelte-components provided a way to import these components.

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

    So the Alert and AButton will be available to use.

    Disabling

    In some cases, you may want to disable the auto-import in your page, unplugin-svelte-components provides a way to do that by just adding <!-- unplugin-svelte-components disabled --> in your .svelte file

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

    Configuration

    The following show the default values of the configuration

    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,
    
      // filters for transforming targets
      include: [/\.svelte$/, /\.svelte\?svelte/],
      exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.svelte-kit[\\/]/,],
    })

    Thanks

    Thanks to Anthony Fu, this project is heavily inspired by unplugin-vue-components.

    License

    MIT License © 2022-PRESENT Mohamed Nesredin

    Install

    npm i unplugin-svelte-components

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    4.54 MB

    Total Files

    29

    Last publish

    Collaborators

    • mohamed-kaizen