Quickly build a svelte library with SvelteKit
Tags: svelte, tutorial, library, npm
Published: 2022-09-16 20:19:04


In this post we are going to build a simple button as a svelte library within `15 minutes`.

## Prerequisites:
 - [Connect to GitHub with SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)
 - [Sign up an npm account](https://www.npmjs.com/signup)

Run this command to command to create the project:


```bash
npm create svelte@latest svelte-button-example
```

While the command running, choose the following answers:
- **Which Svelte app template?** > `Library skeleton project`
- **Add type checking with TypeScript?** > `Yes, using TypeScript syntax`
 > For people who don't want to use TypeScript or don't want to build a TypeScript library, feel free to use the option above. Because we can write code in javascript without type and SvelteKit will generate types automatically for the build. Then the lib can be used in both javascript and typescript projects.

- **Add ESLint for code linting?** > `Yes`
- **Add Prettier for code formatting?** > `Yes`
- **Add Playwright for browser testing?** > `Yes`

Then follow the instructions on the terminal to install packages and start the project:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbut8mmweud5wzssnlcm.png)


Don't forget to do `step 3` because we want to manage package version via git

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op3y467xp6v211rdr51h.png)


If you see the hint (yellow) section as image above, no worries, in the next step we will change the branch name and push the local repo to GitHub.

## Setting up GitHub repo
Open GitHub website and create a repository `svelte-button-example` (same name with your project).
Then follow the instruction for an existing repository

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0al3zzk4pvysm01nkvm5.png)


## Setting up extensions and auto formatting for VSCode
Create `.vscode/settings.json`
```json
{
	"editor.formatOnSave": true,
	"editor.tabSize": 2,
}
```
Then install [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
 extensions.

If you want nice vscode icons, install [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons).

## Creating the component

Create the `Button.svelte` in `src/lib` folder
```html
<button class="btn" on:click>
	<slot />
</button>
<style>
.btn {
	border: 1px solid rgb(209, 213, 219);
	border-radius: 0.375rem;
 	cursor: pointer;
	padding: 0.375rem 1rem;
	font-size: 100%;
	background-color: inherit;
	color: #212121;
}
.btn:hover {
	border-width: 1px;
	border-radius: 0.375rem;
	border-color: rgb(164, 164, 164);
	background-color: rgb(238 238 238);
}
</style>
```
To test during development, use the button on the home page `/routes/+page.svelte`

```html
<script>
	import Button from '$lib/Button.svelte';
	function handleClick() {
		console.log('clicked');
	}
</script>

<Button on:click={handleClick}>My Button</Button>
```
Then you can see the button on `http://localhost:5173/`

## Publishing to npm
- Write `README.md` first
- Log in to npm running:

```bash
npm add user
```
enter your `credentials` and your `email` to get the OTP

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppokmcqylpppg0mmc29g.png)

Then run these command to create `/package` folder

```bash
npm run build
cd package
npm publish
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzdhf6e20z6pii93pvfd.png)

The package folder is exactly what will be published to npm, then it will be downloaded to `/node_modules` of users's projects.
If users want to use your package they can do:

```html
<script>
import Button from 'svelte-button-example/Button.svelte'
...
</script>
...
```
or with TypeScript:
```html
<script lang="ts">
import Button from 'svelte-button-example/Button.svelte'
...
</script>
...
```

Thanks to the type generator of SvelteKit, not much differences for JS users or TS users.

> Let's take a look on the package folder, we did not re-export the Button
> component to `package/index.js` so users have specify which component
> they want in `svelte-button-example` folder,
> I love this because it's good for tree shaking and simple enough.
>
> But if you want users are able to do:
> ```javascript
> import { Button } from 'svelte-button-example';
> ```
> Or
> ```javascript
> import Button from 'svelte-button-example';
> ```
> Re-export the component in `lib/index.js`, read more at the SvelteKit official packaging [document](https://kit.svelte.dev/docs/packaging)

## Updating your package to a new version
First, make some update to your component then:
- Write some test/demo code on the dev-mode homepage: `routes/+page.svelte` (optional)
- Update version on the `package.json` and update `README.md` about the new changes
- Push new commit to the GitHub
- Run:

```bash
npm run build
npm publish ./package
```