How to Create Svelte Component Libraries with SvelteKit
Tags: svelte, webdev, javascript, architecture
Published: 2022-07-15 16:22:49

Read if:
- You have basic understanding of SvelteKit.
- Wanna learn best thing about SvelteKit

Complete Example:
- [Link for live example on stackblitz](https://stackblitz.com/edit/svelte-kit-component-library)

**Introduction**
I love SvelteKit, there are many reasons for that but on of them is svelte-kit inbuilt packaging module.

The [SvelteKit documentation](https://kit.svelte.dev/docs/packaging) states that you can use the SvelteKit to build component libraries as well as apps. So I'm going to tell you every single step including publishing the package to _npm_.

**Setting Up SvelteKit**

- Steps to create your SvelteKit project `MyComponentsLibrary`

```javascript
~ npm init svelte@next MyComponentsLibrary
~ cd MyComponentsLibrary
~ npm i
~ npm run dev
```

- Current project tree

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

As you can see above `dir tree` there is one folder inside `src` named `lib`. This is the place where you going to make your components.

- Now make a `Button.svelte` and `index.js` file in `lib` directory. Which will going to look like this:

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

As you can see i have added both the file and now we gonna make our Button Component.

**Code `Button.svelte`**
```javascript
<script lang="ts">
	export let label = '';
	export let disabled = false;
	let props = { ...$$restProps };
</script>

<button class={props.class} {disabled} style={props.style} props on:click on:*>
	{label}
	<slot />
</button>

```

Now, I'll explain what's happening here :
- As you can see we are using export let label, this line means where we use Button component we can pass label value in that. same for disabled.

- { ...$$restProps } this is a special thing in SvelteKit. If you pass extra parameter to component you can access them using this inside the component. As you can in button tag where I'm passing style and classes to it.

- `<slot />` means what ever you write between your component tag will be render on the web page.

Now we are done with `Button.svelte`.

**Code `index.js`**

```javascript
export { default as Button } from './Button.svelte';
```

- This line means be gonna export Button as Button from Button.svelte file.

**Setting Up `package.json`**

- First assign name like this `"name": "svexy-ui"`. This will be the package name of your library.
- Add exports like `"exports": {
		".": "./index.js"
	}`. This is root file.
- Add module like `"module": "index.js"`. This is main file.

> For more info please google them `exports in package.json` and `module in package.json`.

**Setting Up `svelte.config.js`**
- Add `package: {
			dir: 'folder that will be generated'
		}` in kit.

>You can find all code in the live example.

**Packaging on our components**

- First install `svelte2tsx` using `npm`.
- Second run this ```npm run package ``` in your terminal. This will generate a dir in root of the project.

![Generated Package Dir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32czie0t9s9eaco7g9ln.png)

- In image you can see it generated a folder by the name `svexy-ui`. This contains you package that you can publish on `npm`.It contains your `index.js` file with `lib` directory files with `package.json` and with a `README.md`.

**Publishing to NPM**

If you are ready you can publish it on `npm`. You must log in to `npm` from your terminal using `npm` login.

Change the directory to package and run `npm` publish command.

```javascript
cd svexy-ui
npm publish --access public
```
...
That's all we have to do and you gonna have your svelte component library on `npm`.

**Resources**
1. [Video link from LevelUpTuts](https://www.youtube.com/watch?v=_TymiadmPrc)
2. [Article by CodeWithShin](https://medium.com/mkdir-awesome/how-to-create-svelte-component-libraries-with-sveltekit-98fd2ff12f0f)

This is me writing for you. If you wanna ask or suggest anything please put it in comment.