{"id":15639625,"url":"https://github.com/sinedied/svelte-web-components-template","last_synced_at":"2025-07-22T10:38:06.322Z","repository":{"id":143334825,"uuid":"334156041","full_name":"sinedied/svelte-web-components-template","owner":"sinedied","description":"A base template for building a shareable web components library with Vite, Svelte and TypeScript.","archived":false,"fork":false,"pushed_at":"2024-07-22T05:45:14.000Z","size":238,"stargazers_count":90,"open_issues_count":6,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-19T18:52:15.439Z","etag":null,"topics":["components","custom-elements","library","svelte","template","vite","web-components"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sinedied.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-01-29T13:37:47.000Z","updated_at":"2025-05-07T14:23:30.000Z","dependencies_parsed_at":"2024-10-22T21:37:22.562Z","dependency_job_id":null,"html_url":"https://github.com/sinedied/svelte-web-components-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/sinedied/svelte-web-components-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinedied%2Fsvelte-web-components-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinedied%2Fsvelte-web-components-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinedied%2Fsvelte-web-components-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinedied%2Fsvelte-web-components-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sinedied","download_url":"https://codeload.github.com/sinedied/svelte-web-components-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinedied%2Fsvelte-web-components-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266477155,"owners_count":23935390,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["components","custom-elements","library","svelte","template","vite","web-components"],"created_at":"2024-10-03T11:26:43.700Z","updated_at":"2025-07-22T10:38:06.288Z","avatar_url":"https://github.com/sinedied.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌐 svelte-web-components-template\n\n\u003e A base template for building a shareable web components library using [Vite](https://vitejs.dev), [Svelte](https://svelte.dev) and [TypeScript](https://www.typescriptlang.org).\n\nThis templates generates vanilla [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) than can be used with [plain HTML](https://www.webcomponents.org/introduction#how-do-i-use-a-web-component-) or within any major frameworks, such as React, Angular, Vue or Svelte (see [compatibility](https://custom-elements-everywhere.com/)).\n\n## How to use this template\n\nYou can directly create a new GitHub repo from this template by selecting the **Use this template** button on GitHub.\n\nYou can also clone it locally with the following commands:\n\n```bash\nnpx degit sinedied/svelte-web-components-template#main my-component-lib\ncd my-component-lib\nnpm install\n```\n\nYour components source code lives in `lib/` folder. Only components with the `.wc.svelte` extension will be exported as web components and available in your library. This means that you can also use regular Svelte components with the `.svelte` extension as child components for your implementation details.\n\nYou can add additional components by adding them to the `lib` folder and editing `lib/index.js`.\n\n## Testing your components\n\nYou can start a development server with:\n\n```bash\nnpm start\n```\n\nThen open your browser to [localhost:5173](http://localhost:5173).\n\nThis will build the demo application located in the `demo/` folder, in which you can use and test your web components during development.\n\nIf you need unit tests, you can take a look at [Jest](https://jestjs.io) and [Jest testing library](https://github.com/testing-library/svelte-testing-library).\n\n### Using the built web components with the demo app\n\nThe demo application is provided for development and testing of your components, that's why it imports the `.svelte` files from the `lib/` folder directly by default.\n\nIf you prefer, you can import the built web components from the `dist/` folder instead, by editing `demo/src/App.svelte` and replacing the `import '../../lib';` statement with `import '../../../dist/lib';` if you have the `bundleComponents` option enabled, or individually import your components with `import import '../../dist/MyComponent.wc.js';` otherwise.\n\nYou'll also have to make sure to run the `npm run build` script to generate the `dist/lib/` folder first.\n\n## Building the library\n\nThe command `npm run build` will create the web components library in the `dist/lib/` folder. It creates both an ES module (`dist/lib/\u003cyour-lib\u003e.js`) suitable for bundler (non-minified), a minified ES module (`dist/lib/\u003cyour-lib\u003e.min.js`) and a regular UMD script (`dist/lib/\u003cyour-lib\u003e.umd.js`).\n\nThe build is automatically called when executing `npm publish` to distribute your library, thanks to the `prepublishOnly` script entry in `package.json`.\n\n## Notes and limitations\n\nThis template does not provide any web components polyfills for older browsers support. It's usually best to leave that task to the host application, hence why they're left out.\n\n### Props\n\nAny props accepted by your web component are automatically transformed to element attributes. Since camelCase or PascalCase does not work in HTML, you have to make sure to name your props in lowercase.\n\n```html\n\u003cscript\u003e\n  export let myvalue = \"Default\";\n\u003c/script\u003e\n```\n\n### Events\n\nThe Svelte syntax event for listening to events like `on:myevent` doesn't work with events dispatched from a Svelte web component ([#3119](https://github.com/sveltejs/svelte/issues/3119)).\n\nYou need to use a workaround for that, by creating a `CustomEvent` and dispatching it.\n\nHere's an example:\n\n```html\n// MyComponent.wc.svelte\n\u003csvelte:options tag=\"my-component\" /\u003e\n\u003cscript\u003e\n  import { get_current_component } from \"svelte/internal\";\n  const component = get_current_component();\n  \n  // example function for dispatching events\n  const dispatchEvent = (name, detail) =\u003e\n    component.dispatchEvent(new CustomEvent(name, { detail }));\n\u003c/script\u003e\n\u003cbutton on:click={() =\u003e dispatchEvent(\"test\", \"Hello!\")}\u003e\n  Click to dispatch event\n\u003c/button\u003e\n```\n\n## Building each component into its own module\n\nBy default this template will build all components into a single module.\n\nIf you prefer to build each component into its own module, you can do so by setting the environment variable `BUNDLE_COMPONENTS` to `false`, or editing `vite.config.js` and setting the `bundleComponents` option to `false`.\n\nThen you also need to replace the content of `packages/lib/index.ts` with:\n\n```js\nexport default () =\u003e {\n  import('./MyComponent.wc.svelte');\n  // Import each of your component this way\n};\n```\n\nThis will enable code-splitting and will generate an ES module for each component in the `dist/lib/` folder.\n\nAs you changed the way components are exported, you also need to replace the `import '../../lib';` statement in `demo/src/App.svelte` to `import '../../lib/MyComponent.wc.svelte';`.\n\n## Why enable `allowJs` in the TS template?\n\nWhile `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.\n\n\n## Why is HMR not preserving my local component state?\n\nHMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#svelte-hmr).\n\nIf you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.\n\n```ts\n// store.ts\n// An extremely simple external store\nimport { writable } from 'svelte/store'\nexport default writable(0)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinedied%2Fsvelte-web-components-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinedied%2Fsvelte-web-components-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinedied%2Fsvelte-web-components-template/lists"}