A template for a ready-to-publish Svelte component. Makes use of Sveltekit's packaging feature.

Get started

You can use GitHub's handy "Use this template" feature, which opens a new repo based on this template. You could do this manually as well:

# Clone the repo
git clone https://github.com/himynameisdave/svelte-component-template

# Rename it
mv ./svelte-component-template ./svelte-my-component

# Change into that dir
cd ./svelte-my-component

# Remove the git history for this template
rm -rf ./.git/

# Start a new git history
git init

# Add the changes
git add .

# Commit them
git commit -m "✨ Initial commit"

Developing

For building your component/library, you can mostly just follow the guidelines outlined in Sveltekit's packaging documentation.

The best part about this approach is that you get a "playground" to test your component: everything in lib/routes/ operates like a typical Sveltekit app, and you can pull in your component to test here in the browser.

Testing

This is set up to use vitest for unit testing and playwright for integration testing. Playwright tests will run against the lib/routes/ project.

Linting is handled by eslint-config-himynameisdave.

Publishing

You can publish your component/library to NPM via the release command:

# Should use npm instead of yarn for this
npm run release

This will first build your package and test that everything is ready to publish. You will be prompted for info about the release, including your NPM 2FA password.

✌️ Built by Dave Lunny.