Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohamed-kaizen/unplugin-svelte-components
On-demand components auto importing for Svelte
https://github.com/mohamed-kaizen/unplugin-svelte-components
auto-import components esbuild rollup svelte svelte-auto-import unplugin vite webpack
Last synced: about 1 month ago
JSON representation
On-demand components auto importing for Svelte
- Host: GitHub
- URL: https://github.com/mohamed-kaizen/unplugin-svelte-components
- Owner: Mohamed-Kaizen
- License: mit
- Created: 2022-06-12T07:39:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-22T06:53:10.000Z (about 1 year ago)
- Last Synced: 2024-11-10T09:41:06.852Z (about 2 months ago)
- Topics: auto-import, components, esbuild, rollup, svelte, svelte-auto-import, unplugin, vite, webpack
- Language: TypeScript
- Homepage:
- Size: 732 KB
- Stars: 37
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-svelte-components
[](https://www.npmjs.com/package/unplugin-svelte-components)
On-demand components auto importing for Svelte.
[Sveltekit Demo](https://stackblitz.com/edit/sveltejs-kit-template-default-bmc4wn)
[Svelte Vite Demo](https://stackblitz.com/edit/vitejs-vite-19qjgd)
## 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](https://github.com/antfu/unplugin-auto-import).
## Installation
```bash
pnpm add -D unplugin-svelte-components
```
Vite
```ts
// vite.config.ts
import Components from 'unplugin-svelte-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
```
Rollup
```ts
// rollup.config.js
import Components from 'unplugin-svelte-components/rollup'
export default {
plugins: [
Components({ /* options */ }),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-svelte-components/webpack')({ /* options */ }),
],
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
build({
/* ... */
plugins: [
require('unplugin-svelte-components/esbuild')({
/* options */
}),
],
})
```
sveltekit
```ts
// 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
```html
```
into this
```html
import HelloWorld from './src/components/HelloWorld.svelte'
```
## TypeScript
To get TypeScript support for auto-imported components, you can change the config as following to get the support.
```ts
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.
```ts
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 `` in your **.svelte** file
```html
```
## Configuration
The following show the default values of the configuration
```ts
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,
// Accept a svelte pre-processor (e.g. svelte-preprocess)
preprocess: null,
// filters for transforming targets
include: [/\.svelte$/, /\.svelte\?svelte/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.svelte-kit[\\/]/,],
// Generate corresponding .eslintrc-components.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc:{
enabled: true, // Default `true`
filepath: './.eslintrc-components.json', // Default `./.eslintrc-components.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
}
})
```
## Thanks
Thanks to [Anthony Fu](https://github.com/antfu), this project is heavily inspired by [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components/).
## License
MIT License © 2022-PRESENT [Mohamed Nesredin](https://github.com/Mohamed-Kaizen)