svelte-component-template

A base for building shareable Svelte 3 components

Github星跟踪图

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


Svelte 3 Component Template


Known Vulnerabilities

PRs Welcome
Contributor Covenant

Table of Contents

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

Features

  • Autoprefixing CSS
  • Formating
  • Linting
  • Preprocessing
  • Testing

Getting Started

  1. Choose your template (regular/monorepo)

  2. Clone it with degit:

npx degit YogliB/svelte-component-template my-new-component
  1. cd into the folder and install the node_modules:
cd my-new-component
git init
npm ci
  • The ci command makes sure your packages match the one in the package-lock.json (See here).
  1. Run npm init, to configure the project.

Your component's source code lives in src/components/[MyComponent].svelte.

Developing

  1. Start Rollup:
npm run dev
  1. Edit a component file in src/components, save it, and reload the page to see your changes.

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

  3. Make sure your component is imported and nested in src/App.svelte, so you can preview and test it.

  4. 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 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.
  3. Configure if needed.

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

主要指标

概览
名称与所有者YogliB/svelte-component-template
主编程语言JavaScript
编程语言JavaScript (语言数: 4)
平台
许可证Other
所有者活动
创建于2019-05-31 21:17:22
推送于2023-07-06 20:30:00
最后一次提交
发布数0
用户参与
星数335
关注者数2
派生数19
提交数2.7k
已启用问题?
问题数11
打开的问题数1
拉请求数1541
打开的拉请求数10
关闭的拉请求数145
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?