Psst — looking for an app template? Go here --> sveltejs/template
Svelte 3 Component Template
Table of Contents
- Template Types
- Features
- Getting started
- Developing
- Consuming components
- Backward Compatibility
- Preprocessors
- Testing
- Publishing to npm
- FAQ
- Credits & Inspiration
Features
- Autoprefixing
- Formating
- Linting
- Preprocessing
- Testing
Getting Started
-
Choose your template (regular/monorepo)
-
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
cd
into the folder and install thenode_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 thepackage-lock.json
(See here).
- Run
npm init
, to configure the project. - 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
- Start Rollup:
npm run dev
-
Edit a component file in
src/components
, save it, and reload the page to see your changes. -
Make sure your component is exported in
src/components/components.module.js
. -
Make sure your component is imported and nested in
src/App.svelte
. -
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 thepackage.json
(You can find more info here).
Usage
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.
npm
Publishing toContributing
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