SVELTE COMPONENT PACKAGE STARTER

My template for creating Svelte Component Packages

• TypeScript
• SvelteKit
• TS to JS
• ESLint
• TailwindCSS
• Jest
• Playwright

NPM link: @el3um4s/svelte-component-package-starter

Getting Started

To create a new project based on this template using degit:

npx degit el3um4s/svelte-component-package-starter

Then install the dependecies with:

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:

npm run clean

Build the package

Run

npm run build

Create the package

npm run package

Test the package

You can test the code with Jest

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:

npm run test:e2e

Check dependencies

You can check and upgrade dependencies to the latest versions, ignoring specified versions. with npm-check-updates:

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 account (If you don’t have an account you can do so on https://www.npmjs.com/signup)

npm login

Then run publish:

npm publish

If you're using a scoped name use:

npm publish --access public

Bumping a new version

To update the package use:

npm version patch

and then

npm publish

Install and use the package

To use the package in a project:

npm i @el3um4s/svelte-component-package-starter

and then in a svelte file:

<script lang="ts">
	import { GridColors } from '@el3um4s/svelte-component-package-starter';
</script>

<GridColors />