How can you share code between SvelteKit projects?

A SvelteKit component library provides a convenient way to share code between different SvelteKit projects. The easiest way to do this is probably to create a new SvelteKit project, placing the components you want to share in the `src/lib`. You can set up any unit tests you want on the components, using uvu for example. Once you are happy, you can run `svelte-kit package` to create your component library. Now you can upload it to npm as a public or private package. Your other projects can now access the shared components via your new library. It doesn’t end there, though. As you discover a need for new components, add them to the package and push the updated package to npm.

Create a SvelteKit Component Library # Create a SvelteKit Component Library #

Create a SvelteKit Component Library #

Updated 4 months ago

4 minute read

Gunning Fog Index: 7.1 3 comments

Content by Rodney

🌟 Creating your own Custom Component Library for SvelteKit #

You can create a SvelteKit component library to level up your workflow. There are possibly a few components you use over and over in new SvelteKit apps you create. You might be copy-pasting the component into each new project. If you want a maintainability boost, how about you create a SvelteKit component library? With that done, all you have to do is import components into your new app like you do any external dependency. The bonus is you make changes once, in your component library, and they are propagated through to all your apps via the famous npm update command.

If that sounds like a productivity boost you’d sign up for, get your typing fingers out, then hit play on the video.

📹 Create a SvelteKit Component Library: Video #

Please enable JavaScript to watch the video 📼

Create a SvelteKit Component Library

🗳 Poll #

What’s the component you find yourself creating in every new app?

🖥 The 10 Steps #

Follow the video above for full, more detailed instructions.

Create a SvelteKit Component Library in 10 Steps #

Decide which components from an existing app you want to add to your component library.

Create a skeleton SvelteKit project.

    pnpm dlx sv create my-sveltekit-component-library && cd $_
pnpm install

src/lib folder.

Create a lib/index.js. Import your components, then export them as named exports.

    import Map from '$lib/components/Map.svelte';
 
export { Map };

Edit package.json, adding this line:

    "svelte": "index.js"

Install @sveltejs/package:

    pnpm add -D @sveltejs/package

Generate the package using svelte-kit package:

    pnpm svelte-package

Test locally, by creating a new skeleton project which uses the created package. Link using the relative path of the created package in the test site's `package.json`:

        "@rodneylab/sveltekit-components": "link:../../components/package",

Push your package to npm:

    pnpm whoami
pnpm login
pnpm publish --access public .

Install the npm package on your test site to check it works:

    pnpm install -D @you/yourpackage

🔗 Links #

🏁 Create a SvelteKit Component Library: Summary #

How can you share code between SvelteKit projects? #: A SvelteKit component library provides a convenient way to share code between different SvelteKit projects. The easiest way to do this is probably to create a new SvelteKit project, placing the components you want to share in the `src/lib`. You can set up any unit tests you want on the components, using uvu for example. Once you are happy, you can run `svelte-kit package` to create your component library. Now you can upload it to npm as a public or private package. Your other projects can now access the shared components via your new library. It doesn’t end there, though. As you discover a need for new components, add them to the package and push the updated package to npm.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Just updated the video on creating a SvelteKit 🧩component library for latest APIs.

We follow a reusable map component example, publishing to NPM for use in other projects.

Hope you find it useful!

https://t.co/t4KI5ztfU8
— Rodney (@askRodney) May 5, 2023

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.