DEV Community

Cover image for Creating a package for Svelte

Creating a package for Svelte

Agustín on January 10, 2020

Intro The idea of the following post is to make a quick, practical and simple version of how to create a package that can be downloaded ...
Collapse
 
johannchopin profile image
johannchopin •

Really nice post thanks 👍 Nevertheless, I would encourage to use vanilla js in the export of the Svelte component in index.js:

module.exports = require('./src/Name.svelte');
Enter fullscreen mode Exit fullscreen mode

If this is not done the users of the library will probably have some trouble testing the application with Jest because the node_module files are ignored by default (so es6 is not supported).

Collapse
 
khrome83 profile image
Zane Milakovic •

Great write up.

What does the svelte part o the npm package do. I understand the standard entry point or module reference. What is actually using that?

Collapse
 
agustinl profile image
Agustín •

Hey Zane, specifically which part are you referring to?

Collapse
 
khrome83 profile image
Zane Milakovic •

‘’’
"main": "dist/index.js",
"module": "dist/index.mjs",
"svelte": "src/index.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},

‘’’

Just the svelte key in the package.json. What uses that?

Thread Thread
 
agustinl profile image
Agustín •

From the svelte repository:

Your package.json has a "svelte" field pointing to src/index.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.

👌

Thread Thread
 
khrome83 profile image
Zane Milakovic •

Awesome! Ty.

Collapse
 
rleddy profile image
Richard Leddy •

Thanks, that helped.

I have been writing code using Svelte for several months now. And, I am just now getting some stuff out into components. I think this worked.

github.com/copious-world/svelte-fl...

Collapse
 
the_previ profile image
Luca • • Edited

I think that in the rollup.config.js file there's a typo:

{ file: pkg.module, 'format': 'en' }

should be

{ file: pkg.module, 'format': 'es' }

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀 •

@agustinl thanks for the write up. I should be using it shortly, bookmarked !!

Collapse
 
jofont profile image
Diogo Fontainhas Garcia Marques •

I have a question, how would you go about publishing a package that exports many components?

Thank you very much for the article btw! :)

Collapse
 
agustinl profile image
Agustín •

Hi Diogo :)

You can export all components into the index.js file.
View this repo example github.com/joeattardi/svelte-tabs/...

Does this help you? If not, write to me!

Good weekend

Collapse
 
jofont profile image
Diogo Fontainhas Garcia Marques •

Hi Augistín!

Yep this solved the problem, thank you very much!!

Have a wonderful week. :)