Automatically detect and import components/modules for SvelteKit projects.
npm i -D sveltekit-autoimport
Inside vite.config.js
.
import { sveltekit } from '@sveltejs/kit/vite';
import autoImport from 'sveltekit-autoimport';
export default {
plugins: [
autoImport({
components: ['./src/components'],
}),
// must be placed before sveltekit()
sveltekit()
]
}
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.
autoImport({
components: ['./src/components']
})
autoImport({
mapping: {
API: `import API from '~/api/api.js'`,
MY_FUNCTION: `import MY_FUNCTION from 'lib/my-function'`
}
})
autoImport({
module: {
'carbon-components-svelte': [
'Button',
'Accordion',
'AccordionItem',
'Grid as CarbonGrid', /* rename */
]
}
})
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 -->
Components can be prefixed with a given name.
autoImport({
components: [{ name: './src/components', prefix: 'shared' } ],
})
So that
<SharedComponent />
<!-- component.svelte -->
<SharedFormInput />
<!-- form/input.svelte -->
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 -->
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import autoImport from 'sveltekit-autoimport';
export default {
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/**'],
// if reading svelte.config.js to get preprocesses
configFile: true
}),
sveltekit()
]
}
https://stackblitz.com/edit/vitejs-vite-tfpzge?file=src%2Froutes%2F%2Bpage.svelte