Advanced examples with multiple components? about component-template

[Conduitry]

Closed this in #20 which makes it a bit easier to transition to a multiple-component package and adds a short note to the readme.

[rixo]

Currently, Svelma is shipping precompiled components. That means you can use them anywhere, especially outside of a Svelte application. However, that also means that they are bundled with their own copy of Svelte's runtime.

This is suboptimal if you use the components in a Svelte application that you compile yourself. And, depending on the Svelte features that are used by your components, mixing different Svelte runtime can also cause weird issues for the consumer. That's why you've got this recommendation in the README of this template:

Your package.json has a "svelte" field pointing to src/index.svelte, which allows Svelte apps to import the source code directly

I've not tested this extensively, but apparently the following seems to work (at least with rollup-plugin-svelte) for what you want to do.

In your package.json:

-  "svelte": "src/index.svelte",
+  "svelte": "src/index.js",

In index.js:

export { default as FirstComponent } from './FirstComponent.svelte'
export { default as SecondComponent } from './SecondComponent.svelte'
// etc...

[mvolkmann]

Which is the more common case, that people want to use this to create a library containing one component or multiple? My guess is that multiple is more common. But this is set up to only support one and changes are required to support multiple. I think it should be changed to support multiple components out of the box.

[soullivaneuh]

I found an example here : https://github.com/c0bra/svelma/blob/master/src/index.js

But it is not a svelte file. What is the difference comparing this template?

[soullivaneuh]

Thanks for your knowledge share @rixo ! 👍

I'll try it as soon as possible.

[mvolkmann]

I have documented all the steps required to get this to work at https://github.com/mvolkmann/svelte-components. Some of these steps could be removed with minor changes to component-template.

[soullivaneuh]

Thanks a lot @Conduitry, great addition to simplify the usage and motivate people to do more awesome stuff with svelte! 👍

I'll try it right now.