Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/el3um4s/svelte-component-package-starter
Create Svelte Component Packages
https://github.com/el3um4s/svelte-component-package-starter
npm npm-package svelte svelte-component svelte-component-generator svelte-template svelte-test sveltejs sveltekit typescript
Last synced: 11 days ago
JSON representation
Create Svelte Component Packages
- Host: GitHub
- URL: https://github.com/el3um4s/svelte-component-package-starter
- Owner: el3um4s
- Created: 2021-10-13T15:29:16.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:11:54.000Z (almost 2 years ago)
- Last Synced: 2024-10-22T09:07:03.222Z (17 days ago)
- Topics: npm, npm-package, svelte, svelte-component, svelte-component-generator, svelte-template, svelte-test, sveltejs, sveltekit, typescript
- Language: TypeScript
- Homepage:
- Size: 2.22 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# SVELTE COMPONENT PACKAGE STARTER
My template for creating Svelte Component Packages
- [TypeScript](https://www.typescriptlang.org/)
- [SvelteKit](https://kit.svelte.dev/)
- TS to JS
- ESLint
- [TailwindCSS](https://tailwindcss.com/)
- [Jest](https://jestjs.io/)
- [Playwright](https://playwright.dev/)
NPM link: [@el3um4s/svelte-component-package-starter](https://www.npmjs.com/package/@el3um4s/svelte-component-package-starter)
### Getting Started
To create a new project based on this template using degit:
```bash
npx degit el3um4s/svelte-component-package-starter
```
Then install the dependecies with:
```bash
npm install
```
Now update the name field in package.json with your desired package name. Then update the homepage field in package.json. And finally add your code.
You can clean up the sample code with:
```bash
npm run clean
```
### Build the package
Run
```bash
npm run build
```
### Create the package
```bash
npm run package
```
### Test the package
You can test the code with Jest
```bash
npm run test
```
You can find the test coverage in `coverage/lcov-report/index.html`.
You can use Playwright to perform a visual regression test:
```bash
npm run test:e2e
```
### Check dependencies
You can check and upgrade dependencies to the latest versions, ignoring specified versions. with [npm-check-updates](https://www.npmjs.com/package/npm-check-updates):
```bash
npm run check-updates
```
You can also use `npm run check-updates:minor` to update only patch and minor.
Instead `npm run check-updates:patch` only updates patch.
### Publish
First commit the changes to GitHub. Then login to your [NPM](https://www.npmjs.com) account (If you don’t have an account you can do so on [https://www.npmjs.com/signup](https://www.npmjs.com/signup))
```bash
npm login
```
Then run publish:
```bash
npm publish
```
If you're using a scoped name use:
```bash
npm publish --access public
```
### Bumping a new version
To update the package use:
```bash
npm version patch
```
and then
```bash
npm publish
```
### Install and use the package
To use the package in a project:
```bash
npm i @el3um4s/svelte-component-package-starter
```
and then in a svelte file:
```html
import { GridColors } from '@el3um4s/svelte-component-package-starter';
```