blog.robino.dev

Create a Svelte Component Library

  • components
  • library
  • npm
  • svelte
Jan 12, 2023
How to create a npm package with SvelteKit to share your components between projects.

svelte-package 2.0

This post was updated on Mar 22, 2023 to account for the changes in svelte-package 2.0. This update simplified the process for setting up a component library. See instructions on migrating an existing project here. You can also now find more information on svelte-package in the documentation.

Create a new SvelteKit project

If you frequently have components that you share between projects and want to keep a single repository of them, you can create a package on npm. Here’s how to create a Svelte component library with SvelteKit.

Setup

  • Navigate to a directory in your terminal where you will create your project
  • Run npx sv@latest create, configure your project with the CLI, select the Svelte library project template, I’m going to use TypeScript in this tutorial
  • Update README.md with information about your project

Project information

Since this is a library project, it’s important to add in your relevant information to the package.json file so it will appear on npm when the package is published. The template sets much of this up for us, but we will need to edit a few fields.

You can read more on this in the svelte-package documentation.

{
	"name": "@rossrobino/components",
	"version": "0.0.1",
	"description": "A reusable Svelte component library",
	"keywords": [
		"components",
		"documentation",
		"Svelte",
		"SvelteKit"
	],
	"homepage": "https://components.com",
	"license": "MIT",
	"author": {
		"name": "Ross Robino",
		"url": "https://robino.dev"
	},
	"repository": {
		"type": "git",
		"url": "git+https://github.com/rossrobino/components.git"
	},
	"sideEffects": false,
	...

sideEffects

An important note if you are planning on including CSS in your components–set the sideEffects field to false, if you want bundlers like Vite to be more aggressive with tree-shaking. If this field is not set, all of the CSS for every one of your exported components will be included when one component is imported. If your package does include modules with side effects that occur upon importing, you can specify them with an array of paths to the modules.

Find the latest information on this setting on this pull request I made.

lib directory

The contents of the src/lib directory are what will be packaged upon running npm run package. This is where components can reside for the project as well as an index.ts file that exports the components for the package.

Create a component

Create a component to export in your package, here’s my YouTube.svelte component as an example.

<!-- src/lib/YouTube.svelte -->

<script lang="ts">
	let { uid, title }: { uid: string; title: string } = $props();
</script>

<iframe
	src="https://www.youtube.com/embed/{uid}"
	{title}
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
></iframe>

Export

Import and export the component from src/lib/index.ts.

// src/lib/index.ts
import YouTube from "./YouTube.svelte";

export { YouTube };

Test locally

Do a quick test of your component on src/routes/+page.svelte by importing it to the page and running npm run dev -- --open.

<!-- src/routes/+page.svelte -->

<script lang="ts">
	import YouTube from "$lib/YouTube.svelte";
</script>

<YouTube uid="gouiY85kD2o" title="Renegade - Kevin Olusola" />

Ensure that the component is working as expected, then you are ready to create a package.

Package

Now we can package the library and publish it on npm for anyone to use. Repeat these steps each time you want to update your package.

If you are looking to automate some of these steps, check out the changesets project.

  • Update the version in package.json, this will have to be bumped up each time you publish the package (major.minor.patch)–you can leave this at 0.0.1 to start
  • Run npm install to sync your package-lock.json with the current version information
  • Run npm run package to execute the package script in package.json
  • You can verify the output of your build in the dist directory
  • Commit changes to your repository, it’s important to publish the same source code to both GitHub and npm to build trust in your package with users.
  • Run npm publish --access public to publicly publish your package on npm (if you don’t have an account you will need to create one and log in)

Test in a separate project

After verifying on the npm website that your package has been published, you can now use your package in a separate project.

  • Set up a new SvelteKit project or use a different existing one
  • Run npm install -D your-package-name to install it as a dependency
  • Import in src/routes/+page.svelte like before, but edit the import path to point to your package instead
  • Lastly, run npm run dev -- --open to see your imported component in action
<!-- src/routes/+page.svelte -->

<script lang="ts">
	import { YouTube } from "@rossrobino/components";
</script>

<YouTube uid="gouiY85kD2o" title="Renegade - Kevin Olusola" />

Conclusion

You have now built a Svelte component library you can access from any of your other SvelteKit projects to share code between them.

Thanks for reading!

Edit