Create a Svelte Component Library
How to create a npm package with SvelteKit to share your components between projects.
Jan 12, 2023
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 like this one. 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
npm create svelte@latest
, configure your project with the CLI, select theLibrary skeleton project
template - 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 in npm when the package is published.
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.robino.dev",
"license": "MIT",
"author": {
"name": "Ross Robino",
"url": "https://robino.dev"
},
"repository": "github:rossrobino/components",
...
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.js
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/svelte/YouTube.svelte -->
<script>
let className = "";
let idName = "";
export { className as class, idName as id };
export let uid;
export let title = "";
</script>
<iframe
class={className}
id={idName}
src="https://www.youtube.com/embed/{uid}"
{title}
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
Export
Import and export the component from src/lib/index.js
.
// src/lib/index.js
import YouTube from "./svelte/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>
import YouTube from "$lib/svelte/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.
- Set the
version
inpackage.json
, this will have to be bumped up each time you publish the package (major.minor.patch)—you can leave this at0.0.1
to start - Run
npm install
to sync yourpackage-lock.json
with the current version information - Run
npm run package
to execute thepackage
script inpackage.json
- You can verify the output of your build in the
dist
directory - Commit changes to your repository
- Run
npm publish --access public
to publically 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 yourPackageName
to install it as a dev 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>
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.
You can check out my library as an example or fork it to create your own version. It has a documentation website included in the same project to make updates easier.
Thanks for reading!
Find an error in this post? Any updates are appreciated. Edit this post