svelte component

This is a project template for Svelte apps.

To create a new project based on this template using degit:

npx degit qhrtech/svelte-component-template component-name

Get started

Install the dependencies...

cd component-name
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your component running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Lint and Style Checking

Prettier

An opinionated code formatter for svelte, typescript, javascript and json.

• Developers shgould setup to run on save in your editor. https://prettier.io/docs/en/editors.html

To check manually:

npm run prettier --silent

To apply fixes manually:

npm run prettier-fix

Svelte support is provided by prettier-plugin-svelte and config is prettier.config.js.

ESLint

ESLint statically analyzes your code to quickly find problems.

To run:

npm run lint

To apply fixes:

npm run lint-fix

• Svelte support is provided by eslint-plugin-svelte3 and config is eslintrc.js.

Svelte Check

• Unused CSS
• Svelte A11y hints
• JavaScript/TypeScript compiler errors

To run:

npm run check

Testing

• Tests should end in *.test.ts

To run:

npm run test

To run on change:

npm run test-watch

To run with coverage:

npm run coverage
# results can be viewed in coverage/lcov-report/index.html

Testing Library

Simple and complete testing utilities that encourage good testing practices

• Svelte tests mostly uses the API from DOM Testing Library
• Svelte has a few extenstions that allow access to the svelte component. Svelte Testing Library
• The biggest difference is the need to use await for events.

  fireEvent is an async method when imported from @testing-library/svelte. This is because it calls tick which tells Svelte to apply any new changes to the DOM.

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

• Here is a cheatsheet Jest cheatsheet