Switch to vite-plus (vp) tooling & update configs

[rlauuzo]

Migrate build/test/lint workflow to VoidZero's vite-plus (vp): CI now uses voidzero-dev/setup-vp and build/test/preview scripts use vp commands. Add vp pre-commit hook (.vite-hooks/pre-commit) and a VSCode recommendation/settings for vite-plus and formatting. Remove legacy prettier/eslint config files and update package.json scripts and dependencies to match the new toolchain. Also add a new DevTools component and apply widespread updates to tests, components, hooks, and configs to align with the tooling and dependency bumps.

Summary by Sourcery

Migrate the project tooling to vite-plus (vp) and update configuration, code, and tests to align with the new build, lint, and test pipeline while introducing a dedicated DevTools component for development diagnostics.

New Features:

• Add a dedicated DevTools React component that composes TanStack Router and Query devtools and is lazily loaded into the root layout in development mode.

Enhancements:

• Switch the Vite configuration and plugin setup to vite-plus, including integrated lint and format configuration, React compiler support via a Babel plugin, and updated code-splitting groups for key dependency bundles.
• Apply assorted code quality and safety improvements across components, hooks, and utilities, including stable references, explicit handling of async calls, and minor TypeScript and lint-related adjustments.
• Update runtime and development dependencies, including TanStack, Motion, Base UI, and tooling packages, and configure pnpm catalog overrides for vite, vitest, and vite-plus.

Build:

• Replace npm scripts to use vp (vite-plus) commands for dev, build, preview, test, lint, format, and config, and wire vite-plus into the TypeScript and Vitest configuration files.
• Adopt pnpm workspace catalog mappings and overrides so vite, vitest, and vite-plus resolve through the new vite-plus toolchain.

CI:

• Update the FTPS build-and-publish workflow to use voidzero-dev/setup-vp and build the app with vp instead of manually setting up Node and pnpm.

Tests:

• Adapt Vitest setup and property-based tests to the vite-plus test runner, including importing from vite-plus/test and awaiting async fast-check assertions, along with assorted test tweaks to satisfy the new linting rules.

Chores:

• Add a vite-plus pre-commit hook and VSCode extension recommendations/settings, and remove legacy Prettier and ESLint configuration files that are now superseded by the vite-plus lint/format setup.

[sourcery-ai]

Reviewer's Guide

Migrates the project from plain Vite/Vitest/Prettier/ESLint CLI usage to the vite-plus (vp) toolchain, wiring vp into configs, CI, and local workflows, while introducing a reusable DevTools component and applying minor code/test tweaks for async handling, linting, and type-safety.

Sequence diagram for lazy loading DevTools in the root route

sequenceDiagram
  actor Dev
  participant Browser
  participant RootComponent
  participant DevToolsLazy as DevTools_lazy_import
  participant DevTools
  participant TanStackDevtools
  participant RouterPanel as TanStackRouterDevtoolsPanel
  participant QueryDevtools as TanStackQueryDevtools

  Dev->>Browser: Open_app_in_dev_mode
  Browser->>RootComponent: Render_root_route
  RootComponent->>RootComponent: Check_import_meta_env_DEV
  alt DEV_true
    RootComponent->>DevToolsLazy: lazy(import_DevTools)
    RootComponent->>DevToolsLazy: Render_inside_Suspense
    DevToolsLazy-->>DevTools: Load_DevTools_component
    DevTools->>TanStackDevtools: Render_with_config_and_plugins
    TanStackDevtools->>RouterPanel: Mount_router_devtools_panel
    TanStackDevtools->>QueryDevtools: Mount_query_devtools
  else DEV_false
    RootComponent-->>RootComponent: DevTools_reference_is_null
    RootComponent-->>Browser: Render_without_devtools
  end

  Browser-->>Dev: App_UI_displayed

Loading

Class diagram for the new DevTools component

classDiagram
  class DevTools {
    +DevTools()
  }

  class TanStackDevtools {
    +config
    +plugins
  }

  class TanStackRouterDevtoolsPanel {
  }

  class TanStackQueryDevtools {
  }

  DevTools --> TanStackDevtools : renders
  TanStackDevtools o-- TanStackRouterDevtoolsPanel : plugin
  TanStackDevtools o-- TanStackQueryDevtools : plugin

Loading

File-Level Changes

Change	Details	Files
Adopt vite-plus as the primary toolchain for dev/build/test/format/lint and centralize tool configuration in Vite config and workspace catalog.	Switch Vite/Vitest imports and configuration helpers to vite-plus, including vite.config.ts, vite-env.d.ts, vitest.config.ts, and vite.config.plugin.ts. Add staged, lint, and fmt configuration blocks to the Vite config to drive vp check, oxlint-based linting, and formatting, replacing standalone ESLint/Prettier config files. Update package.json scripts to use vp commands for dev/build/preview/test/lint/fmt/check and add a prepare script to generate vp config. Introduce pnpm catalog entries and overrides for vite, vite-plus, and vitest and loosen peer dependency version constraints to work with vite-plus test/core packages. Update Vitest setup to import from vite-plus/test and ensure async property tests use await fc.assert.	vite.config.ts vite-env.d.ts vitest.config.ts vite.config.plugin.ts package.json pnpm-workspace.yaml src/vitest.setup.ts src/__tests__/**/*.test.ts src/__tests__/**/*.test.tsx
Integrate new DevTools component and modernize devtools usage, while preserving code splitting and build behavior under vite-plus.	Replace direct use of TanStackDevtools in the root route with a lazily loaded DevTools component that aggregates router and query devtools. Adjust TanStack devtools Vite plugin usage to avoid stripping devtools in production builds and to match vite-plus plugin expectations. Refactor Rollup manualChunks configuration into the new codeSplitting.groups structure supported by vite-plus for vendor chunking.	src/routes/__root.tsx src/components/DevTools.tsx vite.config.ts
Update CI workflow to use the vite-plus setup action and build entrypoint.	Replace pnpm/action-setup and actions/setup-node steps with voidzero-dev/setup-vp, relying on its integrated Node/pnpm tooling. Change the build step to run vp build directly instead of pnpm build.	.github/workflows/build-and-publish-ftps.yml
Clean up legacy lint/format configuration and align source code with new linting rules and async best practices.	Remove top-level Prettier and ESLint config files in favor of vite-plus integrated lint/fmt configuration and a new pre-commit hook under .vite-hooks. Add VSCode extension recommendations/settings files for vite-plus and formatting support. Apply pervasive code changes to add void to ignored promises (navigate, async init/destroy helpers, i18n language changes, data fetching utilities, query invalidation, etc.) and to fix lint warnings (stable EMPTY_ITEMS constant, additional effect dependencies, explicit eslint/oxlint disables). Tweak test and component logic for correctness and type-safety, such as fixing playback cleanup logic, using a stable empty array default, tightening form refs, and removing unused counters/unsafe non-null assertions.	.vite-hooks/pre-commit .vscode/extensions.json .vscode/settings.json .prettierignore eslint.config.js prettier.config.js src/components/**/*.tsx src/hooks/**/*.ts src/services/**/*.ts src/i18n/config.ts src/__tests__/**/*.test.ts tsconfig.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.