https://github.com/saadeghi/svelte-component-template
https://github.com/saadeghi/svelte-component-template
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/saadeghi/svelte-component-template
- Owner: saadeghi
- Created: 2022-03-01T14:26:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-01T14:27:14.000Z (over 3 years ago)
- Last Synced: 2025-03-10T13:45:35.139Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Svelte component template
To create a svelte component package or a web component package
## Usage
1. In `package.json` file change `name` of your package (kebab-case string)
1. In `package.json` file change `componentname` value to your own component name (PascalCase string).
## Try it in your app
1. Run `npm pack`
1. Test your component in your Svelte app by installing it locally `npm i ./path/to/package/`
1. Import it in your app `import YourComponentName from 'your-package-name'`
## Publish your package to npm
1. Deploy your package to npm with `npm publish`
## Make it a web component
1. Add `` tag to your component where `custom-element` is the tag name of your web component
1. In `rollup.config.js` file set `plugins > svelte > compilerOptions > customElement` to `true`
1. Import your component like `import 'your-package-name'`
1. Use your web component like `` tag where `custom-element` is the tag name you chose in step 1