Creating a Svelte Components Library

The Simple Way (Template Included)

Svelte 3.0 was released on April 2019, and as indicated by the growing number of companies and brands using it to develop their web apps (listed on svelte.dev) - it’s awesome!

TLDR:

I’ve created this svelte-component-library-template, it contains:
a Svelte component, storybook, tests and Rollup.

Who wouldn’t want a simpler way?

When I first tried Svelte it wasn’t yet quite the improvement that I was looking for. Coming from Angular/React/Vue, for me it (simply) wasn’t simplifying enough things to stimulate an urge to “jump ship”. I was so happy to see that Svelte 3 is a big improvement and so simple to use.

Angular/React/Vue

Sharing your components

If you’re reading this, then it means that you already know how easy it is to create new Svelte components. But when the time comes to share your amazing new components, how do you go about it?

A good starting point

Fortunately, the official component-template on GitHub is a very good starting point, but for me it’s missing a few things. Fortunately those things can easily be added.

What goes inside a components library?

First of course we’ll want our Components, then we need a way to test them. We’ll also want to provide users with examples of how to use the components, and finally we’ll need to bundle it all together for easy consumption, so here is our list:

• Components - (Svelte)
• Usage Examples - (Storybook)
• Tests - (svelte-testing-library + Jest)
• Bundler - (Rollup)

Don’t worry, there’s a template

As mentioned in the beginning of this article, I went ahead and created this svelte-component-library-template. let’s see how to use it and what it does:

Step 1: clone

npx degit nirmaoz/svelte-component-library-template my-new-component

Step 2: install

cd my-new-component
npm install

Looking at the package.json file you can see that there are some useful scripts that will be described further below. You can also see that there are no dependencies (that’s good!), but we do have some devDependencies:

• babel + plugins, to compile our code
• rollup + plugins, to bundle our code
• storybook+plugins, to generate usage examples
• Jest + testing-library/svelte, to test our components.

The rollup.config.js file configures rollup to export the following files:

• package_name.js (umd),
• package_name.min.js (iife),
• package_name.mjs (es module)

Step 3: init

• Run npm init and follow the instructions to update package.json
• Replace README.md with your own

Step 4: Create and export your components

The /src folder will contain all of the components. Currently it contains a basic example component called Component.svelte, You can replace it and add your own components.

In src/index.js, add each component you would like your library to export:

// example of adding components to src/index.js
export { default as Component1 } from './Component1';
export { default as Component2 } from './Component2';

Step 5: Test your components

The /test folder contains a single test file: component.spec.js, to test the example component. You can replace it and add your own tests.

// One of the tests inside component.spec.js
it('shows proper heading when rendered', () => {
    const { getByText } = render(Component, { name: 'World' })

    expect(getByText('Hello World!')).toBeInTheDocument()
  });

To run tests:

npm test

Step 6: Storybook

Using Storybook is a great way to add usage examples to a components library. You can add stories to the /stories folder, it currently contains component.stories.js that has stories for the example component.

To serve development build:

npm run storybook

To build static storybook site (default output folder is /docs for easily sharing on GitHub pages):

npm run build-storybook

Step 7: Publish

To publish your new svelte components library, you can use:

npm publish

See here for more details about npm publish.

That’s it!

Please feel free to clone the svelte-component-library-template, hack away and post any issues or suggestions on GitHub.