├── .gitignore
├── README.md
├── package.json
├── rollup.config.js
└── src
    ├── Component.svelte
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist/
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | *Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev) and its [package command](https://kit.svelte.dev/docs/packaging) which gives you more built-in features like TypeScript transpilation, type definition generation and a built-in playground to test your library.*
 2 | 
 3 | *Looking for an app template instead? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
 4 | 
 5 | ---
 6 | 
 7 | # component-template
 8 | 
 9 | A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit):
10 | 
11 | ```bash
12 | npx degit sveltejs/component-template my-new-component
13 | cd my-new-component
14 | npm install # or yarn
15 | ```
16 | 
17 | Your component's source code lives in `src/Component.svelte`.
18 | 
19 | You can create a package that exports multiple components by adding them to the `src` directory and editing `src/index.js` to reexport them as named exports.
20 | 
21 | TODO
22 | 
23 | * [ ] some firm opinions about the best way to test components
24 | * [ ] update `degit` so that it automates some of the setup work
25 | 
26 | 
27 | ## Setting up
28 | 
29 | * Run `npm init` (or `yarn init`)
30 | * Replace this README with your own
31 | 
32 | 
33 | ## Consuming components
34 | 
35 | 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](https://github.com/sveltejs/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
36 | 
37 | For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`dist/index.mjs`) and a UMD script (`dist/index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "SvelteComponent",
 3 |   "svelte": "src/index.js",
 4 |   "module": "dist/index.mjs",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "build": "rollup -c",
 8 |     "prepublishOnly": "npm run build"
 9 |   },
10 |   "devDependencies": {
11 |     "@rollup/plugin-node-resolve": "^9.0.0",
12 |     "rollup": "^2.0.0",
13 |     "rollup-plugin-svelte": "^7.0.0",
14 |     "svelte": "^3.5.0"
15 |   },
16 |   "keywords": [
17 |     "svelte"
18 |   ],
19 |   "files": [
20 |     "src",
21 |     "dist"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from '@rollup/plugin-node-resolve';
 3 | import pkg from './package.json';
 4 | 
 5 | const name = pkg.name
 6 | 	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
 7 | 	.replace(/^\w/, m => m.toUpperCase())
 8 | 	.replace(/-\w/g, m => m[1].toUpperCase());
 9 | 
10 | export default {
11 | 	input: 'src/index.js',
12 | 	output: [
13 | 		{ file: pkg.module, 'format': 'es' },
14 | 		{ file: pkg.main, 'format': 'umd', name }
15 | 	],
16 | 	plugins: [
17 | 		svelte(),
18 | 		resolve()
19 | 	]
20 | };
21 | 


--------------------------------------------------------------------------------
/src/Component.svelte:
--------------------------------------------------------------------------------
1 | <!-- your code here -->


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as default } from './Component.svelte';
2 | 


--------------------------------------------------------------------------------