Skip to content

feat(frontend): migrate toolchain to vite-plus#386

Draft
nakatanakatana wants to merge 4 commits intomainfrom
vp
Draft

feat(frontend): migrate toolchain to vite-plus#386
nakatanakatana wants to merge 4 commits intomainfrom
vp

Conversation

@nakatanakatana
Copy link
Copy Markdown
Owner

Description

Migrated the frontend toolchain from standalone Vite, Vitest, and Biome to the unified Vite+ toolchain. This change consolidates development, build, testing, and validation into a single, cohesive workflow powered by the vp CLI.

Key Changes

  • Unified Configuration: Consolidated vite.config.js, Biome settings, and Vitest configurations into a single, type-safe vite.config.ts.
  • Vite+ Integration:
    • Updated package.json scripts to use vp dev, vp build, vp test, and vp check.
    • Replaced vitest imports with vite-plus/test across all test files.
  • Dependency Optimization:
    • Removed @biomejs/biome, vite, vitest, and other redundant devDependencies.
    • Added vite-plus as the primary development dependency.
  • Spec Sync & Archive:
    • Defined the frontend-unified-tooling capability in openspec/specs/.
    • Archived the migration change proposal to openspec/changes/archive/2026-03-18-migrate-to-vite-plus/.

Verification Results

  • Validation: vp check passes (linting, formatting, and type-checking).
  • Testing: vp test passes for both Node.js and Browser-based tests.
  • Build: vp build successfully generates optimized production assets.
  • Dev Server: Confirmed vp dev starts the server with functional HMR.

Copilot AI review requested due to automatic review settings March 18, 2026 12:28
@github-actions

This comment has been minimized.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Migrates the repo’s frontend tooling from separate Vite/Vitest/Biome setup to the unified Vite+ toolchain driven by the vp CLI, consolidating configuration and updating test imports accordingly.

Changes:

  • Replaces legacy config (vite.config.js, biome.json) with a consolidated vite.config.ts (build/test/lint/fmt/staged).
  • Updates package.json scripts/deps and TypeScript types to use Vite+ (vp) and vite-plus/test.
  • Adds an OpenSpec capability doc and a Vite+ pre-commit hook.

Reviewed changes

Copilot reviewed 172 out of 175 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
vite.config.js Removed legacy Vite/Vitest config in favor of unified Vite+ config.
vite.config.ts New unified Vite+ config (Vite plugins, Vitest projects, lint/fmt/staged).
biome.json Removed Biome configuration (migrated under Vite+ workflow).
package.json Switches scripts to vp and updates deps/overrides for Vite+ core/test packages.
tsconfig.json Updates global test types to vite-plus/test/globals and includes vite.config.ts.
panda.config.ts Formatting-only change to keep config consistent with new formatter.
.vite-hooks/pre-commit Adds Vite+ hook entrypoint (vp staged).
openspec/specs/frontend-unified-tooling/spec.md Adds OpenSpec capability describing the unified frontend tooling.
frontend/src/vitest-setup.ts Switches setup imports from vitest to vite-plus/test.
frontend/src/vite-plus-test-env.d.ts Adds Vite+ test environment type imports.
frontend/src/** Broad mechanical updates: replace vitest / vitest/browser imports with vite-plus/test / vite-plus/test/browser and apply formatting normalization.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment on lines +1 to +5
## ADDED Requirements

### Requirement: Unified Frontend CLI

The system SHALL provide a single CLI (`vp`) to handle all frontend development, build, testing, and validation tasks.
Comment thread vite.config.ts
Comment on lines +77 to +86
plugins: [
devtools() as any,
tanstackRouter({
target: "solid",
routesDirectory: path.join(workspaceRoot, "frontend/src/routes"),
generatedRouteTree: path.join(workspaceRoot, "frontend/src/routeTree.gen.ts"),
autoCodeSplitting: true,
}),
solid(),
process.env.ANALYZE === "true" && [
Comment thread vite.config.ts
Comment on lines +209 to +214
staged: {
"*.{js,jsx,ts,tsx}": "vp check --fix",
},
} as any;

export default defineConfig(config);
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

@github-actions
Copy link
Copy Markdown

Code Metrics Report

main (7242a8a) #386 (68ae1cc) +/-
Coverage 55.1% 54.9% -0.2%
Code to Test Ratio 1:1.3 1:1.2 -0.1
Test Execution Time 1m52s 2m19s +27s
Details
  |                     | main (7242a8a) | #386 (68ae1cc) |  +/-  |
  |---------------------|----------------|----------------|-------|
- | Coverage            |          55.1% |          54.9% | -0.2% |
  |   Files             |            137 |            137 |     0 |
  |   Lines             |           9706 |           9648 |   -58 |
- |   Covered           |           5351 |           5300 |   -51 |
- | Code to Test Ratio  |          1:1.3 |          1:1.2 |  -0.1 |
  |   Code              |          12664 |          12534 |  -130 |
- |   Test              |          16754 |          15742 | -1012 |
- | Test Execution Time |          1m52s |          2m19s |  +27s |

Code coverage of files in pull request scope (88.9% → 89.1%)

Files Coverage +/- Status
frontend/src/components/BlockRulesTable.tsx 90.1% -0.3% affected
frontend/src/components/BulkAddBlockRulesModal.tsx 97.4% -0.1% affected
frontend/src/components/FeedList.tsx 85.3% -0.1% affected
frontend/src/components/ImportOpmlModal.tsx 98.4% -0.1% affected
frontend/src/components/ItemDetailModal.tsx 92.4% +0.5% affected
frontend/src/components/ItemList.tsx 87.9% -0.4% affected
frontend/src/components/ui/Modal.tsx 94.5% -0.1% affected
frontend/src/lib/item-db.ts 69.8% -0.5% affected
frontend/src/lib/item-utils.ts 90.4% -1.2% affected
frontend/src/lib/queries/feed-queries.ts 92.6% -0.7% affected
frontend/src/mocks/connect.ts 82.2% -0.4% affected
frontend/src/mocks/handlers.ts 80.3% +0.8% affected
frontend/src/routes/_items.tsx 85.7% -0.4% affected
frontend/src/routes/block-rules.tsx 93.0% +0.7% affected
frontend/src/routes/feeds.tsx 87.5% +5.1% affected
frontend/src/routes/url-rules.tsx 98.3% -0.1% affected
vite.config.ts 0.0% 0.0% added

Reported by octocov

@nakatanakatana nakatanakatana marked this pull request as draft March 18, 2026 13:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants