How to create and publish Svelte components

In my last articles I have mainly talked about how to integrate Svelte, Tailwind, Jest and how to use NPM. Why all this? To get to understand how to create a Svelte component and how to publish it as an NPM package. Below, as is my habit now, I report the various steps I followed and the link to a template that should simplify everything.

Create components with SvelteKit

First of all the technology: SvelteKit. It may seem like a bizarre choice but I think it’s the simplest way. The SvelteKit documentation also has a section dedicated to packaging.

In short, you can take the contents of the src/lib folder and save it as a package. It is also possible to publish it on NPM. In addition, the contents of the main folder can be exported in order to simplify the creation of documentation.

I omit the explanation of how to create a component with SvelteKit and the integration with Jest and TailwindCSS. I’ve written a couple of articles about it:

NPM Packages with TypeScript

Tailwind CSS & Svelte

How to test SvelteKit app with Jest

I go directly to what to change: the svelte.config.js file. I add the package entry and set the directory to export the compiled package to (by default it is the package folder)

const config = {
  // ...
  kit: {
    target: '#svelte',
    package: {
	dir: 'package',
	emitTypes: true
        }
   }
  // ...
};

Then I download and install svelte2tsx to generate TSX files from SVELTE files.

npm i svelte2tsx