How to Publish an Unbundled Svelte Package to npm

In the world of modern web development, creating reusable components and libraries is a common practice. If you're working with Svelte, you might want to share your components with the community by publishing them to npm.

But should you publish your Svelte components as compiled JavaScript or in their original, unbundled form?

In this post, we'll explore why publishing unbundled Svelte packages is often the better choice and how to do it.

Why Publish Unbundled?

Before we dive into the how, let's briefly discuss why you might want to publish your Svelte package unbundled:

1. Flexibility: Users can compile your components with their own build setup, ensuring compatibility with their projects.
2. Tree-shaking: Unbundled packages allow for better tree-shaking, reducing the final bundle size for users.
3. Customization: Users can more easily modify or extend your components if needed.
4. Consistency: Many popular Svelte libraries are distributed this way, making it a familiar pattern for developers.

Step-by-Step Guide to Publishing an Unbundled Svelte Package

We're going to create four short files and make quick work of publishing and sharing our code..

Set Up Your Project Structure

First, ensure your project is structured properly. Here's a basic example:

Configure package.json

Your package.json file is crucial. Here's a sample configuration:

{
  "name": "@mateothegreat/svelte-library-module-template",
  "type": "module",
  "version": "0.0.1",
  "svelte": "src/index.ts",
  "module": "src/index.ts",
  "exports": {
    ".": {
      "import": "./src/index.ts"
    }
  },
  "files": [
    "src",
    "dist"
  ]
}

Key points:

• The "svelte" and "module" fields point to your entry file.
• "files" specifies which files to include when publishing.
• "exports" defines the entry points for different module systems.
• Include Svelte as a peer dependency.

Create a Svelte Component

Create a simple Svelve component that we will import from an outside app:

<script lang="ts">
  import { MyLib } from "./my-lib.ts";
</script>

<div style="color: red">My Component: {MyLib.hello()}</div>

Create a Library

Create a file as src/my-lib.ts that contains a simple method that you can import and call:

export class MyLib {
  public static hello() {
    return "Hello, world!";
  }
}

Create an Index File

Use an "index" file (also known as a barrel) to make importing our assets easily.

In src/index.ts, export your components and code:

export { default as MyComponent } from "./my-component.svelte";
export { MyLib } from "./my-lib";

Prepare for Publishing

Before publishing:

1. Ensure you have an npm account and are logged in (npm login).
2. Update your README.md with installation and usage instructions.
3. Initialize a git repository and commit your changes.

Publish to npm

Run the following command to publish your package:

npm version patch
npm publish

In this case, I created script called "release" that performs both of the commands above:

Using Your Unbundled Svelte Package

Now that your package is published, others can use it in their Svelte projects:

<script lang="ts">
  import { MyComponent, MyLib } from "@mateothegreat/svelte-library-module-template";
</script>

<MyComponent />

MyLib method call: {MyLib.hello()}

Best Practices and Tips

1. Versioning: Use semantic versioning and update your package version (npm version patch/minor/major) before publishing new versions.
2. Documentation: Provide clear documentation on how to use your components, including props and events.
3. TypeScript: If you're using TypeScript, include type definitions in your package.
4. Testing: Include tests for your components to ensure reliability.
5. CI/CD: Set up continuous integration to run tests and automate the publishing process.

Happy publishing!