Psst — looking for an app template? Go here --> sveltejs/template

---

Svelte 3 Component Template

Table of Contents

1. Template Types
2. Features
3. Getting started
4. Developing
5. Consuming components
6. Backward Compatibility
7. Preprocessors
8. Testing
9. Publishing to npm
10. FAQ
11. Credits & Inspiration

• Regular (You're here)
• Minimal
• Monorepo

Features

• Autoprefixing
• Formating
• Linting
• Preprocessing
• Testing

Getting Started

1. Choose your template (regular/monorepo)

2. Clone it with degit:

The regular version:

npx degit YogliB/svelte-component-template my-new-component

The minimal version:

npx degit YogliB/svelte-component-template#minimal my-new-component

or the monorepo version:

npx degit YogliB/svelte-component-template#monorepo my-new-component-library

2. cd into the folder and install the node_modules:

cd my-new-component
npm ci
git init

For monorepo:

npm run bootstrap

• The ci command makes sure your packages match the one in the package-lock.json (See here).

3. Run npm init, to configure the project.
4. Replace this README with your own.

Your component's source code lives in src/components/[MyComponent].svelte or packages/* if you chose the monorepo option.

Developing

1. Start Rollup:

npm run dev

2. Edit a component file in src/components, save it, and reload the page to see your changes.

3. Make sure your component is exported in src/components/components.module.js.

4. Make sure your component is imported and nested in src/App.svelte.

5. Navigate to localhost:5000 to see your components live.

Consuming Components

Your package.json has a "svelte" field pointing to src/components/components.module.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.

For everyone else, npm run build will bundle your component's source code into a plain JavaScript module (index.mjs) and a UMD script (index.js), in the dist folder.
This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly hook in package.json.

Backward Compatibility

This template uses svelte-preprocess in order to integrate PostCSS auto-prefixing capabilities into the build process.

Browserlist

PostCSS uses browserlist under the hood, in order to "know" what css to prefix.

The browserlist configuration is located inside the package.json.

Preprocessors

This template comes with the svelte-preprocess by default, which simplifies the use of preprocessors in components.

• If you're using preprocessors, make sure you remove the svelte property from the package.json (You can find more info here).

Usage

1. Install the required preprocessors.
2. Enable the preprocessor in the component.

Testing

This template uses testing-library for testing.

I highly recommend going through their docs if you intend on testing your components.

FAQ

Here lies what you seek.

Publishing to npm

• Creating and publishing scoped public packages
• Creating and publishing unscoped public packages

Contributing

All contributions are welcome! 😊

Just make sure you read this before contributing.

Credits & Inspiration

• Official component-template by @Rich-Harris
• Official app-template by @Rich-Harris
• This PR by @sisou