Component library output/template

[dummdidumm]

We need to provide a clear way for library authors on how to build a Svelte component library, ideally with CLI support and conventions. My idea for a solution is this:

The very first step of create-svelte is to ask whether you want to build an app or a component library. Depending on that, different templates are used.
It would also be good to have some way of testing out the library yourself, so maybe we could have some kind of showcase folder where you can try out the components; this folder would be ignored when building/bundling the library. Generation of such a folder should be optional, though, because library authors might do it differently.
It would also be good to have support for TypeScript. There's some new package for generating types from the Svelte components called svelte2dts which we could use for it. If it works well, we can also ask the maintainer to move the package into language-tools and make it official.

In general, it might be good to get some feedback from library authors on what they like currently and what they need.

Further reading:

• Angular does this through the CLI and a predefined folder-structure. They have app where your application lives and projects where you can add libraries, each with a predefined folder structure.
• React has no official stance on this AFAIK, but there's a community CLI to setup something for you
• [please add more if you know of other solutions]

[Rich-Harris]

The very first step of create-svelte is to ask whether you want to build an app or a component library. Depending on that, different templates are used

I disagree! I think we can use a single template for both, and it will be a much better experience. We can have a CLI command that packages components up for distribution (exact definition TBD, though it would include things like applying preprocessors and extracting types where appropriate) alongside the ones for build and dev which are concerned with apps — except that conveniently, your showcase/demo site/development sandbox is your app in the case where you're preparing components for distribution. I see no benefit to having multiple templates; every app has a component library at some level, and there's no real reason to treat internal component libraries/design systems as categorically distinct from those intended for public consumption.

[dummdidumm]

So you mean we would always include some kind of generate component library from stuff inside src/components script?

[Rich-Harris]

Yep. It'd be part of the @sveltejs/kit CLI

[josdejong]

I was just trying out sveltekit which is now in beta, and I'm really impressed with the fast hot reloading 😎 🚀 . I can't wait to start using it for real. So far the docs are talking only about creating web applications, but I'm developing a library. I've been looking into the docs of Vite about "Library mode", see https://vitejs.dev/guide/build.html#library-mode, this is exactly what I'm looking for (i.e. a setup for a library plus demo/test page).

I'm wondering if it is already possible to generate a library using sveltekit. If so, a few pointers would be great. I can also understand though that I may be too early with this question 😉

[Rich-Harris]

Closing in favour of #518, which starts to flesh this idea out a bit more