Psst — looking for an app template? Go here --> sveltejs/template
- Template Types
- Features
- Getting started
- Developing
- Consuming components
- Backward Compatibility
- Preprocessors
- Testing
- Publishing to npm
- FAQ
- Credits & Inspiration
- Autoprefixing
- Formating
- Linting
- Preprocessing
- Testing
-
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.
- 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.
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.
This template uses svelte-preprocess in order to integrate PostCSS auto-prefixing capabilities into the build process.
PostCSS
uses browserlist under the hood, in order to "know" what css to prefix.
The browserlist
configuration is located inside the package.json
.
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).
This template uses testing-library for testing.
I highly recommend going through their docs if you intend on testing your components.
Here lies what you seek.
Publishing to npm
All contributions are welcome! 😊
Just make sure you read this before contributing.
- Official component-template by @Rich-Harris
- Official app-template by @Rich-Harris
- This PR by @sisou