Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuanchuan/sveltekit-autoimport
Automatically detect and import components/modules for SvelteKit projects
https://github.com/yuanchuan/sveltekit-autoimport
autoimport svelte sveltekit
Last synced: 24 days ago
JSON representation
Automatically detect and import components/modules for SvelteKit projects
- Host: GitHub
- URL: https://github.com/yuanchuan/sveltekit-autoimport
- Owner: yuanchuan
- License: mit
- Created: 2021-04-21T05:20:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-27T03:21:06.000Z (4 months ago)
- Last Synced: 2024-10-01T12:35:40.192Z (about 1 month ago)
- Topics: autoimport, svelte, sveltekit
- Language: JavaScript
- Homepage: https://npm.im/sveltekit-autoimport
- Size: 196 KB
- Stars: 228
- Watchers: 4
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web - Svelte Auto Import
README
# sveltekit-autoimport
Automatically detect and import components/modules for SvelteKit projects.
### Before
### After
## Installation
```bash
npm i -D sveltekit-autoimport
```
## Basic configuration
Inside `vite.config.js`.
```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()
]
}
```
## 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:
```js
autoImport({
components: ['./src/components']
})
```
#### Or tell it how to import for some specific variables:
```js
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:
```js
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:
```html
```
## Prefix
Components can be prefixed with a given name.
```js
autoImport({
components: [{ name: './src/components', prefix: 'shared' } ],
})
```
So that
```html
```
## Flat
If the `flat` option is set to be true, no namespace will be added.
```js
autoImport({
components: [{ name: './src/components', flat: true } ],
})
```
So that
```html
```
## Full options
```js
// 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()
]
}
```
## Example
https://stackblitz.com/edit/vitejs-vite-tfpzge?file=src%2Froutes%2F%2Bpage.svelte