Package Exports

sveltekit-autoimport
sveltekit-autoimport/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sveltekit-autoimport) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sveltekit-autoimport

Automatically detect and import components/modules for SvelteKit projects. (Previously vite-plugin-autoimport)

Before

After

Installation

npm i -D sveltekit-autoimport

Basic configuration

// svelte.config.js

import autoImport from 'sveltekit-autoimport';

export default {
  kit: {
    vite: {
      plugins: [
        autoImport({
          components: ['./src/components'],
        })
      ]
    }
  }
}

It can be used as a preprocessor to transform code before other modules like mdsvex.

import autoImport from 'sveltekit-autoimport';
import { mdsvex } from 'mdsvex';

export default {
  preprocess: [
    autoImport({
      components: ['./src/components'],
      include: ['**/*.(svelte|md)'],
    }),
    mdsvex()
  ],
  kit: {}
}

Name strategy

By default the component names will be namespaced with their directory names and then normalized to upper camel case format. For example:

<MyComponent />
<!-- my-component.svelte -->

<MyAnotherComponent />
<!-- my_another_component.svelte -->

<FormInput />
<!-- form/input.svelte -->

<Modal />
<!-- modal/index.svelte -->

Prefix

All components can be prefixed with a given name.

autoImport({
  components: [{ name: './src/components', prefix: 'shared' } ],
})

So that

<SharedComponent />
<!-- component.svelte -->

<SharedFormInput />
<!-- form/input.svelte -->

Flat

If the flat option is set to be true, no namespace will be added.

autoImport({
  components: [{ name: './src/components', flat: true } ],
})

So that

<Input />
<!-- form/input.svelte -->

<Popup />
<!-- modal/inline/popup.svelte -->

Full options

// svelte.config.js
import autoImport from 'sveltekit-autoimport';

export default {
  kit: {
    vite: {
      plugins: [
        autoImport({

          // where to search for the components
          components: [
            './src/components',
            './src/routes/_fragments',
            { name: './src/lib', flat: true, prefix: 'lib' },
          ],

          // some frequently used modules
          module: {
            svelte: ['onMount', 'createEventDispatcher']
          },

          // manually import
          mapping: {
            API:  `import API from '~/src/api'`,
            Icon: `import * as Icon from '$components/icon'`,
          },

          // autoimport only for .svelte files
          // and only search for .svelte files inside components
          include: ['**/*.svelte'],

          // node_modules is ignored by default
          exclude: ['**/node_modules/**'],

        })
      ]
    }
  }
}