Svelte

Naming convenctions

Unlike Vue, Svelte has less restriction when it comes to naming convenctions and thus doesn’t have an official style guide at the time of writting. The only thing that is necessary is to be consisent. We will follow the most used naming convenctions from Svelte community: PascalCase for Svelte components, for everything else use kebab-case.

SvelteKit project structure

SvelteKit has a build in router. Routes are automatically generated from directory structure - subdirectories, pages and layouts. When we are extracting components that are only used in one page we have two popular options:

Keep components near pages that use them
Manage all components as global and have clear router directory

We will be using the first option.

Project
── lib
│   ├── components/
│   ├── models/
│   ├── types/
├── routes
│   ├── moduleA
│   │   ├── components/
│   │   ├── models/
│   │   ├── types/
│   │   ├── +page.server.ts
│   │   ├── +page.svelte
│   ├── moduleB
│   │   ├── components/
│   │   ├── models/
│   │   ├── types/
│   │   ├── +page.server.ts
│   │   ├── +page.svelte

Pre-commit hooks

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.5.0
    hooks:
      - id: check-case-conflict
      - id: check-symlinks
      - id: check-yaml
      - id: destroyed-symlinks
      - id: end-of-file-fixer
      - id: mixed-line-ending
      - id: trailing-whitespace

  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v3.1.0
    hooks:
      - id: prettier
        args: [--config, .prettierrc, --write] # edit files in-place
        additional_dependencies:
          - prettier
          - prettier-plugin-svelte
          - svelte

  - repo: https://github.com/pre-commit/mirrors-eslint
    rev: v8.54.0
    hooks:
      - id: eslint
        types: [file]
        args: [--fix]
        files: \.(js|ts|svelte)$
        additional_dependencies:
          - eslint
          - svelte
          - typescript
          - eslint-plugin-svelte
          - '@typescript-eslint/eslint-plugin'
          - '@typescript-eslint/parser'
          - svelte-eslint-parser

Testing

For testing, we use Vitest + testing-library and Playwright. We have 4 scripts for testing:

test - runs all tests
test:unit - runs Vitest tests
test:ui - runs Vitest in UI mode
test:integration - runs Playwright tests

Unit tests

Unit tests are designed to test individual functions or components in isolation. They ensure that each part of the application works as expected on its own. In our setup, these tests are run using Vitest. To run the unit tests, use the test:unit script.

Component tests

Component tests are a type of unit test that specifically test individual Svelte components. They ensure that each component behaves as expected in isolation. This includes rendering correctly, responding to user input, and managing state. Component tests can be run using the test:unit script.

Integration tests

Integration tests are designed to test how different parts of the application work together. They ensure that the application works as expected when all its parts are combined. In our setup, these tests are run using Playwright. To run the integration tests, use the test:integration script.

End-to-end tests

End-to-end tests are a type of test that tests the application as a whole. They simulate real user scenarios, ensuring that the application works as expected from start to finish. These tests are also run using Playwright. To run the end-to-end tests, use the test:integration script, which runs all tests, or create a separate script for end-to-end tests if needed.