Reusable Svelte Component Library.

If you want to create a library of reusable svelte components that you intend to use privately (not publish):

Choose a location on your computer where you will store your reuseable svelte components, eg: /home/janwillem/libraries/svelte-components

change to that directory and type npm init

Give the package a name @janwillem/svelte-components (the @janwillem part helps to ensure you don't collide with existing package names, and will come in handy if you decide to publish in future.) and then go with the options

package name: (libraries) @janwillem/svelte-components
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

You get a basic package.json file that looks like this

{
  "name": "@janwillem/svelte-components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now, create a ./src directory eg: /home/janwillem/libraries/svelte-components/src place your components into the ./src folder eg ./src/Cat.svelte:

<pre>
   |\---/|
   | o_o |
   \_^_/
</pre>

Finally create an index.js file eg: /home/janwillem/libraries/svelte-components/index.js

export {default as Cat} from './src/Cat.svelte';

Over in a svelte project where you want to use your reusable component, link your library like this: npm i --save-dev /home/janwillem/libraries/svelte-components

Then inside your `App.svelte'

<script>
  import {Cat} from '@janwillem/svelte-components'
</script>

<Cat />

You've now got a reusable component. And - the live hot reloading works if you update your component!

To add more components, just put them in that src directory and reference them in the index.js in your new reusable component library!