Psst — looking for an app template? Go here --> sveltejs/template
Svelte 3 Component Template
Table of Contents
- Features
- Getting started
- Developing
- Consuming components
- Backward Compatibility
- Preprocessors
- Testing
- Publishing to npm
- FAQ
- Credits & Inspiration
Features
- Autoprefixing CSS
- Formating
- Linting
- Preprocessing
- Testing
Getting Started
-
Choose your template (regular/monorepo)
-
Clone it with degit:
npx degit YogliB/svelte-component-template my-new-component
cdinto the folder and install thenode_modules:
cd my-new-component
git init
npm ci
- The
cicommand makes sure your packages match the one in thepackage-lock.json(See here).
- Run
npm init, to configure the project.
Your component's source code lives in src/components/[MyComponent].svelte.
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, so you can preview and test it. -
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.
This is only relevant when the svelte property is not present in the package.json or when using the components via a JS bundle.
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
svelteproperty from thepackage.json(You can find more info here).
Usage
Testing
This template uses Cypress & testing-library for testing.
It is highly recommended going through their docs if you intend on testing your components.
You can witness a simple example by running npm run cy:open.
FAQ
Here lies what you seek.
Publishing to npm
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