Comcast · nstepien · Apr 2, 2026 · Apr 2, 2026 · Apr 2, 2026 · Apr 2, 2026
@@ -11,10 +11,6 @@ updates:
         patterns:
           - 'react'
           - 'react-dom'
-      vitest:
-        patterns:
-          - 'vitest'
-          - '@vitest/*'
 
   - package-ecosystem: 'github-actions'
     directory: '/'

@@ -11,34 +11,20 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: actions/setup-node@v6
+      - uses: voidzero-dev/setup-vp@v1
         with:
           node-version: 25
-          check-latest: true
 
-      - name: Install dependencies
-        run: npm i
-
-      - name: Typecheck
-        run: node --run typecheck
-
-      - name: ESLint
-        run: node --run eslint
-
-      - name: Oxfmt
-        run: node --run format:check
-
-      - name: Bundle
-        run: node --run build
-
-      - name: Build website
-        run: node --run build:website
+      - run: vp check
+      - run: vpr typecheck
+      - run: vpr eslint
+      - run: vp pack
+      - run: vp build
 
       - name: Install Playwright Browsers
-        run: npx playwright install chromium firefox
+        run: vpx playwright install chromium firefox
 
-      - name: Test
-        run: node --run test:ci
+      - run: vp test
         timeout-minutes: 4
 
       - name: Upload test failure artifacts

@@ -21,46 +21,32 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v6
+      - uses: voidzero-dev/setup-vp@v1
         with:
           node-version: 25
-          check-latest: true
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Install dependencies
-        run: npm i
-
-      - name: Typecheck
-        run: node --run typecheck
-
-      - name: ESLint
-        run: node --run eslint
-
-      - name: Oxfmt
-        run: node --run format:check
-
-      - name: Bundle
-        run: node --run build
-
-      - name: Build website
-        run: node --run build:website
+      - run: vp check
+      - run: vpr typecheck
+      - run: vpr eslint
+      - run: vp pack
+      - run: vp build
 
       - name: Install Playwright Browsers
-        run: npx playwright install chromium firefox
+        run: vpx playwright install chromium firefox
 
-      - name: Test
-        run: node --run test:ci
+      - run: vp test
         timeout-minutes: 4
 
       - name: Update version
         run: |
           git config user.name "${{ github.actor }}"
           git config user.email "${{ github.actor_id }}+${{ github.actor }}@users.noreply.github.com"
-          npm version ${{ inputs.version }}
+          vp env exec npm version ${{ inputs.version }}
 
       # https://docs.npmjs.com/trusted-publishers
       - name: Publish to npm
-        run: npm publish --tag latest
+        run: vp env exec npm publish --tag latest
 
       - name: Push tag
         run: git push origin v${{ inputs.version }}

@@ -23,23 +23,25 @@ jobs:
       - uses: actions/checkout@v6
         with:
           ref: ${{ github.head_ref }}
-      - uses: actions/setup-node@v6
+
+      - uses: voidzero-dev/setup-vp@v1
         with:
           node-version: 25
-          check-latest: true
+
       - name: Remove label
         if: github.event_name == 'pull_request'
         run: gh pr edit --remove-label 'Update Screenshots'
         env:
           GH_TOKEN: ${{ github.token }}
-      - name: Install dependencies
-        run: npm i
+
       - name: Install Playwright Browsers
-        run: npx playwright install chromium firefox
+        run: vpx playwright install chromium firefox
+
       - name: Update screenshots
         run: |
           rm -r test/**/screenshots/**
-          node --run test:ci:update
+          vp test --project visual --update
+
       - name: Push new screenshots
         run: |
           git config user.name "${{ github.actor }}"

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "oxc.oxc-vscode", "typescriptteam.native-preview"]
+  "recommendations": [
+    "VoidZero.vite-plus-extension-pack",
+    "dbaeumer.vscode-eslint",
+    "typescriptteam.native-preview"
+  ]
 }
@@ -60,3 +60,93 @@ website/              # demo site (Vite + TanStack Router)
 ## Validation
 
 Run before submitting changes: `node --run typecheck`, `node --run eslint`, `node --run format`, `node --run test`.
+
+<!-- TODO: review -->
+<!--VITE PLUS START-->
+
+<!-- # Using Vite+, the Unified Toolchain for the Web -->
+
+This project is using Vite+, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite+ wraps runtime management, package management, and frontend tooling in a single global CLI called `vp`. Vite+ is distinct from Vite, but it invokes Vite through `vp dev` and `vp build`.
+
+## Vite+ Workflow
+
+`vp` is a global binary that handles the full development lifecycle. Run `vp help` to print a list of commands and `vp <command> --help` for information about a specific command.
+
+### Start
+
+- create - Create a new project from a template
+- migrate - Migrate an existing project to Vite+
+- config - Configure hooks and agent integration
+- staged - Run linters on staged files
+- install (`i`) - Install dependencies
+- env - Manage Node.js versions
+
+### Develop
+
+- dev - Run the development server
+- check - Run format, lint, and TypeScript type checks
+- lint - Lint code
+- fmt - Format code
+- test - Run tests
+
+### Execute
+
+- run - Run monorepo tasks
+- exec - Execute a command from local `node_modules/.bin`
+- dlx - Execute a package binary without installing it as a dependency
+- cache - Manage the task cache
+
+### Build
+
+- build - Build for production
+- pack - Build libraries
+- preview - Preview production build
+
+### Manage Dependencies
+
+Vite+ automatically detects and wraps the underlying package manager such as pnpm, npm, or Yarn through the `packageManager` field in `package.json` or package manager-specific lockfiles.
+
+- add - Add packages to dependencies
+- remove (`rm`, `un`, `uninstall`) - Remove packages from dependencies
+- update (`up`) - Update packages to latest versions
+- dedupe - Deduplicate dependencies
+- outdated - Check for outdated packages
+- list (`ls`) - List installed packages
+- why (`explain`) - Show why a package is installed
+- info (`view`, `show`) - View package information from the registry
+- link (`ln`) / unlink - Manage local package links
+- pm - Forward a command to the package manager
+
+### Maintain
+
+- upgrade - Update `vp` itself to the latest version
+
+These commands map to their corresponding tools. For example, `vp dev --port 3000` runs Vite's dev server and works the same as Vite. `vp test` runs JavaScript tests through the bundled Vitest. The version of all tools can be checked using `vp --version`. This is useful when researching documentation, features, and bugs.
+
+## Common Pitfalls
+
+- **Using the package manager directly:** Do not use pnpm, npm, or Yarn directly. Vite+ can handle all package manager operations.
+- **Always use Vite commands to run tools:** Don't attempt to run `vp vitest` or `vp oxlint`. They do not exist. Use `vp test` and `vp lint` instead.
+- **Running scripts:** Vite+ built-in commands (`vp dev`, `vp build`, `vp test`, etc.) always run the Vite+ built-in tool, not any `package.json` script of the same name. To run a custom script that shares a name with a built-in command, use `vp run <script>`. For example, if you have a custom `dev` script that runs multiple services concurrently, run it with `vp run dev`, not `vp dev` (which always starts Vite's dev server).
+- **Do not install Vitest, Oxlint, Oxfmt, or tsdown directly:** Vite+ wraps these tools. They must not be installed directly. You cannot upgrade these tools by installing their latest versions. Always use Vite+ commands.
+- **Use Vite+ wrappers for one-off binaries:** Use `vp dlx` instead of package-manager-specific `dlx`/`npx` commands.
+- **Import JavaScript modules from `vite-plus`:** Instead of importing from `vite` or `vitest`, all modules should be imported from the project's `vite-plus` dependency. For example, `import { defineConfig } from 'vite-plus';` or `import { expect, test, vi } from 'vite-plus/test';`. You must not install `vitest` to import test utilities.
+- **Type-Aware Linting:** There is no need to install `oxlint-tsgolint`, `vp lint --type-aware` works out of the box.
+
+## CI Integration
+
+For GitHub Actions, consider using [`voidzero-dev/setup-vp`](https://github.com/voidzero-dev/setup-vp) to replace separate `actions/setup-node`, package-manager setup, cache, and install steps with a single action.
+
+```yaml
+- uses: voidzero-dev/setup-vp@v1
+  with:
+    cache: true
+- run: vp check
+- run: vp test
+```
+
+## Review Checklist for Agents
+
+- [ ] Run `vp install` after pulling remote changes and before getting started.
+- [ ] Run `vp check` and `vp test` to validate changes.
+<!--VITE PLUS END-->
@@ -66,18 +66,15 @@ The DataGrid component is designed to handle large datasets efficiently while of
 Install `react-data-grid` using your favorite package manager:
 
 ```sh
+# npm
 npm i react-data-grid
-```
-
-```sh
+# Vite+
+vp add react-data-grid
+# pnpm
 pnpm add react-data-grid
-```
-
-```sh
+# Yarn
 yarn add react-data-grid
-```
-
-```sh
+# Bun
 bun add react-data-grid
 ```