- Notifications
You must be signed in to change notification settings - Fork7
On-demand components auto importing for Svelte
License
Mohamed-Kaizen/unplugin-svelte-components
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
On-demand components auto importing for Svelte.
Sveltekit DemoSvelte Vite Demo
- ⚡️ Supports Vite, Webpack, Rollup, esbuild and more, powered byunplugin.
- 🏝 Tree-shakable, only registers the components you use.
- 🪐 Folder names as namespaces.
- 🦾 Full TypeScript support.
- 😃 Works perfectly withunplugin-auto-import.
pnpm add -D unplugin-svelte-components
Vite
// vite.config.tsimportComponentsfrom'unplugin-svelte-components/vite'exportdefaultdefineConfig({plugins:[Components({/* options */}),],})
Rollup
// rollup.config.jsimportComponentsfrom'unplugin-svelte-components/rollup'exportdefault{plugins:[Components({/* options */}),],}
Webpack
// webpack.config.jsmodule.exports={/* ... */plugins:[require('unplugin-svelte-components/webpack')({/* options */}),],}
esbuild
// esbuild.config.jsimport{build}from'esbuild'build({/* ... */plugins:[require('unplugin-svelte-components/esbuild')({/* options */}),],})
sveltekit
// vite.config.tsimportComponentsfrom'unplugin-svelte-components/vite'exportdefaultdefineConfig({plugins:[Components({/* options */}),// before sveltekit pluginsveltekit(),],})
Use components as you would usually do, it will import components on demand, and there is noimport required anymore!
It will automatically turn this
<HelloWorldmsg="Hello Svelte"/>
into this
<HelloWorldmsg="Hello Svelte"/><script>importHelloWorldfrom'./src/components/HelloWorld.svelte'</script>
To get TypeScript support for auto-imported components, you can change the config as following to get the support.
Components({dts:true,// enabled by default if `typescript` is installed})
Once the setup is done, acomponents.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.tsto yourtsconfig.jsonunderincludes.
It's cool to have your own components have been import it, but sometime you want to import third party components.
Thusunplugin-svelte-components provided a way to import these components.
Components({dts:true,external:[{from:"agnostic-svelte",// import from third partynames:[// 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 theAlert andAButton will be available to use.
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<!-- unplugin-svelte-components disabled --> in your.svelte file
<!-- unplugin-svelte-components disabled --><HelloWorldmsg="Hello Svelte"/>
The following show the default values of the configuration
Components({// relative paths to the directory to search for components.dirs:['src/components'],// valid file extensions for components.extensions:['svelte'],// search for subdirectoriesdeep:true,// generate `components.d.ts` global declarations,// also accepts a path for custom filename// default: `true` if package typescript is installeddts:false,// Allow subdirectories as namespace prefix for components.directoryAsNamespace:false,// Subdirectory paths for ignoring namespace prefixes// works when `directoryAsNamespace: true`globalNamespaces:[],// Transform path before resolvingimportPathTransform:v=>v,// Allow for components to override other components with the same nameallowOverrides:false,// Accept a svelte pre-processor (e.g. svelte-preprocess)preprocess:null,// filters for transforming targetsinclude:[/\.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-globalseslintrc:{enabled:true,// Default `true`filepath:'./.eslintrc-components.json',// Default `./.eslintrc-components.json`globalsPropValue:true,// Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')}})
Thanks toAnthony Fu, this project is heavily inspired byunplugin-vue-components.
MIT License © 2022-PRESENTMohamed Nesredin
About
On-demand components auto importing for Svelte
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.