svelte-kit package command for building components

[Rich-Harris]

Now that #511 is merged, it makes sense to have an issue for this, if only to bat around ideas. It doesn't need to be part of the public beta, but ideally would be part of 1.0.

To recap:

Almost every app has an internal library of some sort. In a SvelteKit app, the library lives in src/lib and is available as $lib. Meanwhile, almost every component library has a demo/documentation site, or at the very least something Storybook-esque during development.

Therefore an app and a component library are the same thing, but with a different focus: in SvelteKit, an app is a project where the content of src/routes is the important thing, while a component library is a project where the content of src/lib is the important thing. Other than that, they're basically the same, and can benefit from the same development workflow.

We already have a way of building apps — svelte-kit build. Component libraries also need to be built for distribution. We should add a svelte-kit package command (open to alternative name suggestions) that does the following:

• Finds components/modules that should be public. I'd suggest the same logic as in src/routes — any file that doesn't have a leading _ in its filename (or that of a parent directory) is considered public
• Builds them for distribution. In the case of .svelte files, this would mean applying preprocessors, but otherwise leaving components uncompiled. In the case of everything else, it would presumably mean running everything through the same Vite config as would normally apply to an app, except on a 1:1 transform basis since bundling is probably impossible to do in the general case given the requirement to leave .svelte files uncompiled
• Creates a package.json with an "exports" field that exposes the public files (with similar name handling as routes — for example a src/lib/Foo/index.svelte might become import Foo from 'my-lib/Foo')
• Probably some other stuff

The output of this would be a dist folder with everything the component library needs neatly packaged up, ready for npm publish.

[dummdidumm]

I like this idea!

I think the trickiest part is going to be preprocessing. There's an issue in component-template repo asking for this. There's also a exploratory PR implementing this (but only for Svelte files) and also a POC specifically for TypeScript. The problem with preprocessing in general is that you can't just get away with preprocessing Svelte files only, you need the same for all your .ts / .scss /etc files. In the case of TypeScript, you also want to create type definitions which can be used, and ideally you don't need to write them yourself.

[josdejong]

First, thanks for all your work on Svelte and SvelteKit, it's all really promising! It would be awesome when setting up a library would be as simple as running a single command, like setting up a new app 😎

From a library developer perspective, the following are the points that give me a hard time when setting up a new a library:

1. create a setup containing both the library code and a test/demo page, like Rich explains in the introductory text
   (similar to Library Mode of Vite)
2. generate output that can be consumed in various ways:
   • A Svelte application
   • Other frameworks: React, Vue, Angular (Svelte is perfect in this regard because it delivers real standalone components 😄)
   • A bundle that can be loaded directly in a browser (typically UMD output)
   • Different environments: ES Modules, CommonJS

Those outputs have overlap. I can imagine in the end it is sufficient to generate three outputs to address all those needs I list above: Svelte, ES bundle, UMD bundle.

[benmccann]

This exists now: https://kit.svelte.dev/docs#packaging

[josdejong]

Awesome, thanks for all your effort!

After some difficulties I managed to refactor the setup of my library to SvelteKit 😎 . The refresh speed of the dev server is really a game changer 🚀 .

[lokimckay]

• A bundle that can be loaded directly in a browser (typically UMD output)
• Different environments: ES Modules, CommonJS

Could anyone please provide / point to an example Svelte Kit configuration that produces UMD/ESM/CJS components?
Does this require defining your own rollup config from scratch?

[josdejong]

Could anyone please provide / point to an example Svelte Kit configuration that produces UMD/ESM/CJS components?
Does this require defining your own rollup config from scratch?

As far as I understand you have to create a separate config for that yourself. I did that in https://github.com/josdejong/svelte-jsoneditor/ for now, but it is not ideal. Right now both svelte code and bundles are published in a single npm package. It is probably better though to publish two separate npm packages instead.