Zap Studio

Code Quality

Checks, testing, and direct Vite+ workflows in Local.ts.

Local.ts uses Vite+ directly for checks, dev/build, and test execution. Rust-specific quality checks remain in Cargo and Tauri.

Vite+ Checks

The root vite.config.ts enables type-aware checking and staged-file fixes directly in Vite+:

export default defineConfig({
  lint: {
    options: {
      typeAware: true,
      typeCheck: true,
    },
  },
  staged: {
    "*": "vp check --fix",
  },
});

Why this setup?

  • Fast — Rust-based engine runs in milliseconds
  • Type-aware — TypeScript checking is part of the default workflow
  • Unified — One command surface for checks, tasks, and tests
  • Auto-fix — The same checker can apply safe fixes when requested

Commands

# Run checks
vp check

# Apply automatic fixes
vp check --fix

This keeps the workflow simple: run vp check to validate the project, and use vp check --fix when you want Vite+ to rewrite fixable issues.

Testing with Vitest

Local.ts uses a Vitest-compatible test runner through Vite+. You still get the familiar Vitest API, and the default workflow runs through direct vp test commands instead of package scripts.

Running Tests

# Run tests once
vp test

# Watch mode for development
vp test watch

# Generate coverage report
vp test run --coverage

Configuration

Coverage is configured in vite.config.ts:

export default defineConfig({
  // ... other config
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
});

Writing Tests

Create test files with the .test.ts or .test.tsx extension:

import { describe, expect, it } from "vite-plus/test";

describe("myFunction", () => {
  it("should return the correct value", () => {
    expect(myFunction(2)).toBe(4);
  });
});

Coverage Reports

Coverage reports are generated in the coverage/ directory:

  • coverage/index.html — Interactive HTML report
  • Terminal output shows summary

Direct Commands

Use Vite+ commands directly and refer to the Vite+ docs for the current command reference:

For Local.ts specifically, use vp exec tauri dev and vp exec tauri build for native Tauri workflows. src-tauri/tauri.conf.json points beforeDevCommand to vp dev and beforeBuildCommand to vp build.

Cargo

Local.ts includes a Rust backend in src-tauri/ with comprehensive tooling for code quality.

The Rust toolchain provides native tools for formatting, linting, type checking, testing, and coverage.

Available Cargo Commands

CommandDescription
cargo fmtFormat Rust code with rustfmt
cargo clippyLint Rust code with Clippy
cargo checkType check without building
cargo testRun Rust unit and integration tests
cargo tarpaulinGenerate code coverage reports

Cargo-specific Workflows

For Rust-specific tasks, navigate to src-tauri/ and use Cargo directly:

cd src-tauri

# Watch tests during development
cargo watch -x test

# Run tests with output
cargo test -- --nocapture

# Generate coverage report
cargo tarpaulin --out Html

# Fix clippy warnings automatically
cargo clippy --fix

Tarpaulin Coverage

Cargo Tarpaulin generates code coverage for Rust tests:

# Install tarpaulin
cargo install cargo-tarpaulin

# Generate HTML coverage report
cargo tarpaulin --out Html

# View in browser
open tarpaulin-report.html

Coverage reports help identify untested code paths in your Rust backend.

CI Integration

Local.ts includes separate CI workflows for the frontend toolchain and the native Tauri layer, plus a separate publish workflow for release bundles.

Existing Workflows

WorkflowFileDescription
Frontend CIfrontend-ci.ymlRuns vp check, vp test, and vp build
Tauri CItauri-ci.ymlRuns cargo check, cargo test, and a debug Tauri build
Publishpublish.ymlBuilds and drafts Tauri release bundles

Workflow Triggers

  • frontend-ci.yml runs on pull requests and pushes to main
  • tauri-ci.yml runs on pull requests and pushes to main
  • publish.yml runs on manual dispatch and pushes to the release branch

Frontend CI Setup

The frontend workflow uses a local composite action to install Vite+, restore dependency cache, and install dependencies before running each job:

- name: Setup vp
  uses: ./.github/actions/setup-vp

Each CI job then runs one focused command:

  • vp check
  • vp test
  • vp build

Tauri CI Setup

The native workflow installs Linux system dependencies, restores the Rust cache, and runs three checks:

  • cargo check --manifest-path src-tauri/Cargo.toml
  • cargo test --manifest-path src-tauri/Cargo.toml
  • vp exec tauri build --debug --no-bundle --ci

This keeps frontend validation and native validation independent while still verifying that the Tauri shell can compile on CI.

Edit on GitHub

Last updated on

On this page