https://github.com/zerodevx/svelte-component
An opinionated Svelte component starter template
https://github.com/zerodevx/svelte-component
Last synced: 6 months ago
JSON representation
An opinionated Svelte component starter template
- Host: GitHub
- URL: https://github.com/zerodevx/svelte-component
- Owner: zerodevx
- Created: 2020-09-11T09:35:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-20T09:28:36.000Z (almost 5 years ago)
- Last Synced: 2025-06-10T23:47:46.238Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-component
An opinionated starter template to create shareable Svelte components, featuring:
- [x] Linting with [Standardjs](https://github.com/standard/standard)
- [x] Workflow for local development cum demo site
## Usage
Clone with [degit](https://github.com/Rich-Harris/degit) and install dependencies
```bash
$ npx degit zerodevx/svelte-component my-component
$ cd my-component
$ npm i
```
Your component's source code lives in `src/Component.svelte`.
You can create a package that exports multiple components by adding them to the `src` directory and editing `src/index.js` to reexport them as named exports.
## Develop your component
Start the server:
```bash
$ npm run dev
```
This serves the `/docs` directory at `http://localhost:5000`, and doubles-up as a demo site as well via Github Pages.
## Consuming components
Your package.json has a `"svelte"` field pointing to `src/index.js`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`dist/index.mjs`) and a UMD script (`dist/index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.