vpa
vite-plugin-autoimport
npm i vite-plugin-autoimport
vpa

vite-plugin-autoimport

Automatically detect and import components/modules for SvelteKit projects

by Yuan Chuan

1.6.6 (see all)License:MITTypeScript:Not Found
npm i vite-plugin-autoimport
Readme

vite-plugin-autoimport


Warning: This package has been renamed to sveltekit-autoimport.


Build Status

Automatically detect and import components/modules for SvelteKit projects.

Before

Code without sveltekit-autoimport

After

Code with sveltekit-autoimport

Installation

npm i -D sveltekit-autoimport

Basic configuration

Inside svelte.config.js.

/* As a vite plugin (recommended) */

import autoImport from 'sveltekit-autoimport';

export default {
  kit: {
    vite: {
      plugins: [
        autoImport({
          components: ['./src/components'],
        })
      ]
    }
  }
}
/* Or as a svelte preprocessor for some special modules */

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

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

How it works?

This tool will NOT add global components blindly into your files. Instead, it searches for undefined components or modules, and then try to fix them by auto importing.

You need to guide it where to import the components from:

autoImport({
  components: ['./src/components']
})

Or tell it how to import for some specific variables:

autoImport({
  mapping: {
    API: `import API from '~/api/api.js'`,
    MY_FUNCTION: `import MY_FUNCTION from 'lib/my-function'`
  }
})

Or explictly list the components being used from a third party module:

autoImport({
  module: {
    'carbon-components-svelte': [
      'Button',
      'Accordion',
      'AccordionItem',
      'Grid as CarbonGrid', /* rename */
    ]
  }
})

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

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/**'],

        })
      ]
    }
  }
}

Downloads/wk

98

GitHub Stars

138

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
1.6.6
latest
7mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate