{"id":19891401,"url":"https://github.com/mohamed-kaizen/unplugin-svelte-components","last_synced_at":"2026-03-01T12:31:30.418Z","repository":{"id":37982068,"uuid":"502550153","full_name":"Mohamed-Kaizen/unplugin-svelte-components","owner":"Mohamed-Kaizen","description":"On-demand components auto importing for Svelte","archived":false,"fork":false,"pushed_at":"2023-10-22T06:53:10.000Z","size":750,"stargazers_count":38,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-01T15:45:41.362Z","etag":null,"topics":["auto-import","components","esbuild","rollup","svelte","svelte-auto-import","unplugin","vite","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mohamed-Kaizen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-12T07:39:28.000Z","updated_at":"2025-01-27T19:39:34.000Z","dependencies_parsed_at":"2024-11-10T09:32:31.970Z","dependency_job_id":"b097da85-d603-41f3-aa26-9d9a6f1c8145","html_url":"https://github.com/Mohamed-Kaizen/unplugin-svelte-components","commit_stats":{"total_commits":53,"total_committers":4,"mean_commits":13.25,"dds":0.09433962264150941,"last_synced_commit":"da26b96a92a254380eab2ae674dd7705c8cd9702"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Kaizen%2Funplugin-svelte-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Kaizen%2Funplugin-svelte-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Kaizen%2Funplugin-svelte-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Kaizen%2Funplugin-svelte-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mohamed-Kaizen","download_url":"https://codeload.github.com/Mohamed-Kaizen/unplugin-svelte-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252088414,"owners_count":21692791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-import","components","esbuild","rollup","svelte","svelte-auto-import","unplugin","vite","webpack"],"created_at":"2024-11-12T18:18:09.594Z","updated_at":"2026-03-01T12:31:29.754Z","avatar_url":"https://github.com/Mohamed-Kaizen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# unplugin-svelte-components\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-svelte-components?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-svelte-components)\n\nOn-demand components auto importing for Svelte.\n\n[Sveltekit Demo](https://stackblitz.com/edit/sveltejs-kit-template-default-bmc4wn)\n[Svelte Vite Demo](https://stackblitz.com/edit/vitejs-vite-19qjgd)\n\n## Features\n\n- ⚡️ Supports Vite, Webpack, Rollup, esbuild and more, powered by \u003ca href=\"https://github.com/unjs/unplugin\"\u003eunplugin\u003c/a\u003e.\n- 🏝 Tree-shakable, only registers the components you use.\n- 🪐 Folder names as namespaces.\n- 🦾 Full TypeScript support.\n- 😃 Works perfectly with [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import).\n\n## Installation\n\n```bash\npnpm add -D unplugin-svelte-components\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport Components from 'unplugin-svelte-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    Components({ /* options */ }),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport Components from 'unplugin-svelte-components/rollup'\n\nexport default {\n  plugins: [\n    Components({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-svelte-components/webpack')({ /* options */ }),\n  ],\n}\n```\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\n\nbuild({\n  /* ... */\n  plugins: [\n    require('unplugin-svelte-components/esbuild')({\n      /* options */\n    }),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003esveltekit\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport Components from 'unplugin-svelte-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    Components({ /* options */ }), // before sveltekit plugin\n    sveltekit(),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Usage\n\nUse components as you would usually do, it will import components on demand, and there is no `import` required anymore!\n\nIt will automatically turn this\n\n```html\n\u003cHelloWorld msg=\"Hello Svelte\" /\u003e\n```\n\ninto this\n\n```html\n\u003cHelloWorld msg=\"Hello Svelte\" /\u003e\n\n\u003cscript\u003e\nimport HelloWorld from './src/components/HelloWorld.svelte'\n\u003c/script\u003e\n```\n\n## TypeScript\n\nTo get TypeScript support for auto-imported components, you can change the config as following to get the support.\n\n```ts\nComponents({\n  dts: true, // enabled by default if `typescript` is installed\n})\n```\n\nOnce 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.\n\n\u003e **Make sure you also add `components.d.ts` to your `tsconfig.json` under `includes`.**\n\n## Registered third party components\n\nIt's cool to have your own components have been import it, but sometime you want to import third party components.\n\nThus `unplugin-svelte-components` provided a way to import these components.\n\n```ts\nComponents({\n  dts: true,\n  external: [\n    {\n      from: \"agnostic-svelte\", // import from third party\n      names: [ // import these components\n        \"Alert\",\n        \"Button as AButton\", // import as `AButton`\n      ],\n      defaultImport: false, // telling `unplugin-svelte-components` to import any component as non-default export\n    },\n  ],\n})\n```\n\nSo the `Alert` and `AButton` will be available to use.\n\n## Disabling\n\nIn 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 `\u003c!-- unplugin-svelte-components disabled --\u003e` in your **.svelte** file\n\n```html\n\u003c!-- unplugin-svelte-components disabled --\u003e\n\u003cHelloWorld msg=\"Hello Svelte\" /\u003e\n```\n\n## Configuration\n\nThe following show the default values of the configuration\n\n```ts\nComponents({\n  // relative paths to the directory to search for components.\n  dirs: ['src/components'],\n\n  // valid file extensions for components.\n  extensions: ['svelte'],\n\n// search for subdirectories\n  deep: true,\n\n  // generate `components.d.ts` global declarations,\n  // also accepts a path for custom filename\n  // default: `true` if package typescript is installed\n  dts: false,\n\n  // Allow subdirectories as namespace prefix for components.\n  directoryAsNamespace: false,\n  // Subdirectory paths for ignoring namespace prefixes\n  // works when `directoryAsNamespace: true`\n  globalNamespaces: [],\n\n  // Transform path before resolving\n  importPathTransform: v =\u003e v,\n\n  // Allow for components to override other components with the same name\n  allowOverrides: false,\n\n  // Accept a svelte pre-processor (e.g. svelte-preprocess)\n  preprocess:  null,\n\n  // filters for transforming targets\n  include: [/\\.svelte$/, /\\.svelte\\?svelte/],\n  exclude: [/[\\\\/]node_modules[\\\\/]/, /[\\\\/]\\.git[\\\\/]/, /[\\\\/]\\.svelte-kit[\\\\/]/,],\n\n  // Generate corresponding .eslintrc-components.json file.\n  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals\n  eslintrc:{\n    enabled: true, // Default `true`\n    filepath: './.eslintrc-components.json', // Default `./.eslintrc-components.json`\n    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')\n  }\n\n})\n```\n\n## Thanks\n\nThanks to [Anthony Fu](https://github.com/antfu), this project is heavily inspired by [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components/).\n\n## License\n\nMIT License © 2022-PRESENT [Mohamed Nesredin](https://github.com/Mohamed-Kaizen)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamed-kaizen%2Funplugin-svelte-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohamed-kaizen%2Funplugin-svelte-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamed-kaizen%2Funplugin-svelte-components/lists"}