feat: migrate to Vite+ (Oxlint, Oxfmt, vp run)

.claude/skills/create-signalstore/SKILL.md

@@ -51,7 +51,16 @@ Place the resource in `withProps` so it's accessible to downstream `withMethods`
 ```typescript
 import { computed, inject } from '@angular/core';
 import { rxResource } from '@angular/core/rxjs-interop';
-import { patchState, signalStore, signalStoreFeature, withComputed, withHooks, withMethods, withProps, withState } from '@ngrx/signals';
+import {
+  patchState,
+  signalStore,
+  signalStoreFeature,
+  withComputed,
+  withHooks,
+  withMethods,
+  withProps,
+  withState,
+} from '@ngrx/signals';
 
 export type MyState = { query: string };
 export const myInitialState: MyState = { query: '' };
@@ -84,7 +93,10 @@ export function withMyFeature() {
   );
 }
 
-export const MyStore = signalStore(withMyFeature(), withHooks({ onInit: ({ setQuery }) => setQuery('') }));
+export const MyStore = signalStore(
+  withMyFeature(),
+  withHooks({ onInit: ({ setQuery }) => setQuery('') }),
+);
 ```
 
 **Using the resource in a template:**
@@ -138,7 +150,9 @@ it('should load results', async () => {
 
 it('should capture error', async () => {
   const appRef = TestBed.inject(ApplicationRef);
-  vi.spyOn(service, 'search').mockReturnValue(throwError(() => new Error('oops')));
+  vi.spyOn(service, 'search').mockReturnValue(
+    throwError(() => new Error('oops')),
+  );
 
   store.setQuery('hello');
   await appRef.whenStable();
@@ -156,7 +170,17 @@ Use when you have plain state + computed values + methods. No entity collection.
 
 ```typescript
 import { computed, inject } from '@angular/core';
-import { patchState, signalStore, signalStoreFeature, withComputed, withHooks, withMethods, withProps, withState, type } from '@ngrx/signals';
+import {
+  patchState,
+  signalStore,
+  signalStoreFeature,
+  withComputed,
+  withHooks,
+  withMethods,
+  withProps,
+  withState,
+  type,
+} from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { tapResponse } from '@ngrx/operators';
 import { pipe, switchMap, tap } from 'rxjs';
@@ -241,7 +265,8 @@ withLinkedState(({ options }) => ({
   // Advanced — preserve selection if it still exists in the new list:
   selectedOption: linkedSignal<Option[], Option>({
     source: options,
-    computation: (newOptions, previous) => newOptions.find((o) => o.id === previous?.value.id) ?? newOptions[0],
+    computation: (newOptions, previous) =>
+      newOptions.find((o) => o.id === previous?.value.id) ?? newOptions[0],
   }),
 }));
 ```
@@ -254,7 +279,17 @@ Use when managing a collection of items. Provides `entityMap`, `ids`, and `entit
 
 ```typescript
 import { computed, inject } from '@angular/core';
-import { patchState, signalStore, signalStoreFeature, withComputed, withHooks, withMethods, withProps, withState, type } from '@ngrx/signals';
+import {
+  patchState,
+  signalStore,
+  signalStoreFeature,
+  withComputed,
+  withHooks,
+  withMethods,
+  withProps,
+  withState,
+  type,
+} from '@ngrx/signals';
 import {
   addEntity,
   addEntities,
@@ -303,7 +338,8 @@ export function withTodosFeature() {
           switchMap(() =>
             todosService.getAll().pipe(
               tapResponse({
-                next: (todos) => patchState(store, setAllEntities(todos), { loading: false }),
+                next: (todos) =>
+                  patchState(store, setAllEntities(todos), { loading: false }),
                 error: (error) => patchState(store, { error, loading: false }),
               }),
             ),
@@ -323,7 +359,10 @@ export function withTodosFeature() {
         ),
       ),
       toggle(id: string) {
-        patchState(store, updateEntity({ id, changes: (t) => ({ completed: !t.completed }) }));
+        patchState(
+          store,
+          updateEntity({ id, changes: (t) => ({ completed: !t.completed }) }),
+        );
       },
       remove(id: string) {
         patchState(store, removeEntity(id));
@@ -332,7 +371,10 @@ export function withTodosFeature() {
   );
 }
 
-export const TodosStore = signalStore(withTodosFeature(), withHooks({ onInit: ({ loadAll }) => loadAll() }));
+export const TodosStore = signalStore(
+  withTodosFeature(),
+  withHooks({ onInit: ({ loadAll }) => loadAll() }),
+);
 
 export type TodosStore = InstanceType<typeof TodosStore>;
 ```
@@ -344,7 +386,10 @@ If your entity's ID field isn't named `id`:
 ```typescript
 withEntities<WeatherForecast>();
 // then pass selectId to entity updaters:
-patchState(store, setAllEntities(items, { selectId: (item) => item.dateFormatted }));
+patchState(
+  store,
+  setAllEntities(items, { selectId: (item) => item.dateFormatted }),
+);
 
 // Or use entityConfig to define it once:
 import { entityConfig } from '@ngrx/signals/entities';
@@ -388,7 +433,14 @@ withEntities({ entity: type<Post>(), collection: 'posts' });
 Use when you want explicit Redux-style events with a reducer (e.g. a counter, form steps, wizard).
 
 ```typescript
-import { patchState, signalStore, signalStoreFeature, withMethods, withState, type } from '@ngrx/signals';
+import {
+  patchState,
+  signalStore,
+  signalStoreFeature,
+  withMethods,
+  withState,
+  type,
+} from '@ngrx/signals';
 import { signalMethod } from '@ngrx/signals';
 import { eventGroup, on, withReducer } from '@ngrx/signals/events';
 
@@ -427,7 +479,10 @@ export function withCounterReducer() {
   );
 }
 
-export const CounterStore = signalStore(withCounterFeature(), withCounterReducer());
+export const CounterStore = signalStore(
+  withCounterFeature(),
+  withCounterReducer(),
+);
 
 export type CounterStore = InstanceType<typeof CounterStore>;
 ```
@@ -479,7 +534,9 @@ describe('MyStore', () => {
   });
 
   it('should handle an event via reducer', () => {
-    const dispatch = TestBed.runInInjectionContext(() => injectDispatch(myEvents));
+    const dispatch = TestBed.runInInjectionContext(() =>
+      injectDispatch(myEvents),
+    );
     dispatch.someEvent(42);
     TestBed.flushEffects();
     expect(store.someValue()).toBe(42);

.claude/skills/update-packages/SKILL.md

@@ -39,8 +39,8 @@ The tool is a React Ink interactive CLI. In interactive mode (default) it will:
 1. Show a table of all outdated packages
 2. Prompt you to select any packages to **omit** via a multi-select (major bumps
    are pre-selected when `--minor-only` is passed)
-3. Show live progress as each `nx migrate` runs
-4. Prompt to run `pnpm install` and `npx nx migrate --run-migrations` on completion
+3. Show live progress as each `pnpm up --latest` runs
+4. Prompt to run `pnpm install` on completion
 
 In non-interactive mode (`--interactive false`), it skips all prompts and runs
 through all packages automatically, still streaming live progress.
@@ -57,49 +57,41 @@ Key flags:
 The script will:
 
 - Detect all outdated packages via `pnpm outdated`
-- Run `nx migrate <pkg>@latest` for each one
-- Merge any generated migrations into `migrations.json`
-- Print next steps (install + run migrations if needed)
+- Run `pnpm up --latest <pkg>` for each one
+- Print next steps (install if needed)
 
 ### 4. Install updated packages
 
 ```bash
 pnpm install --no-frozen-lockfile
 ```
 
-If the install fails, check for postinstall build errors (e.g. tsconfig
-issues in `tools/builders/dotnet-builder`).
+If the install fails, check for postinstall build errors.
 
-### 5. Run migrations (only if migrations.json was updated)
+### 5. Run all tests
 
 ```bash
-npx nx migrate --run-migrations
+vp test
+vp check
 ```
 
-### 6. Run all tests
+All tests must pass before committing.
 
-```bash
-nx reset
-nx run-many -t build,test
-```
-
-All 9 projects must pass before committing.
-
-### 7. Commit
+### 6. Commit
 
 ```bash
 git add -A
 git commit -m "chore: update all packages to latest (closes #<issue-number>)"
 ```
 
-### 8. Push and open PR
+### 7. Push and open PR
 
 ```bash
 git push origin feat/consolidate-deps-<issue-number>
 gh pr create --title "chore: update all packages to latest" --body "Closes #<issue-number> ..."
 ```
 
-### 9. Close stale dependabot PRs
+### 8. Close stale dependabot PRs
 
 Close any open dependabot PRs that are now covered by this update:
 

.config/dotnet-tools.json

@@ -4,9 +4,7 @@
   "tools": {
     "csharpier": {
       "version": "0.26.7",
-      "commands": [
-        "dotnet-csharpier"
-      ]
+      "commands": ["dotnet-csharpier"]
     }
   }
-}
+}

.github/dependabot.yml

@@ -8,20 +8,20 @@ updates:
       day: monday
     groups:
       angular:
-        patterns: ["@angular/*", "@angular-devkit/*"]
+        patterns: ['@angular/*', '@angular-devkit/*']
       ngrx:
-        patterns: ["@ngrx/*"]
+        patterns: ['@ngrx/*']
       nx:
-        patterns: ["@nx/*", "nx"]
+        patterns: ['@nx/*', 'nx']
       material:
-        patterns: ["@angular/material", "@angular/cdk"]
+        patterns: ['@angular/material', '@angular/cdk']
       all-deps:
-        patterns: ["*"]
+        patterns: ['*']
 
   - package-ecosystem: github-actions
     directory: /
     schedule:
       interval: monthly
     groups:
       github-actions:
-        patterns: ["*"]
+        patterns: ['*']

.github/workflows/ci.yml

@@ -23,8 +23,6 @@ jobs:
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 10
 
       - uses: actions/setup-node@v6
         with:
@@ -41,41 +39,14 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Set Nx base for affected commands (PR only)
-        if: github.event_name == 'pull_request'
-        run: echo "NX_BASE=origin/${{ github.base_ref }}" >> $GITHUB_ENV
-
       - name: Lint
-        run: |
-          if [ "${{ github.event_name }}" = "pull_request" ]; then
-            pnpm nx affected --target=lint --base=$NX_BASE
-          else
-            pnpm lint:all
-          fi
+        run: pnpm lint
 
       - name: Test
-        run: |
-          if [ "${{ github.event_name }}" = "pull_request" ]; then
-            pnpm nx affected --target=test --base=$NX_BASE
-          else
-            pnpm test:all
-          fi
+        run: pnpm test:all
 
       - name: Build
-        run: |
-          if [ "${{ github.event_name }}" = "pull_request" ]; then
-            pnpm nx affected --target=build --base=$NX_BASE
-          else
-            pnpm build:prod
-          fi
-
-      - name: Pack
-        run: |
-          if [ "${{ github.event_name }}" = "pull_request" ]; then
-            pnpm nx affected --target=pack --base=$NX_BASE
-          else
-            pnpm nx run update-packages:pack
-          fi
+        run: pnpm build:prod
 
       - name: Upload coverage report
         if: always()

.github/workflows/deploy.yml

@@ -37,8 +37,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 10
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/preview.yml

@@ -21,8 +21,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 10
 
       - uses: actions/setup-node@v4
         with:
@@ -33,7 +31,9 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build web app (preview)
-        run: pnpm nx build web-app --configuration preview
+        run: pnpm build:prod
+        env:
+          NX_TASK_TARGET_CONFIGURATION: preview
 
       - name: Copy SWA routing config
         run: cp apps/web-app/src/staticwebapp.config.json dist/apps/web-app/client/

.lintstagedrc.cjs

@@ -1,4 +1,4 @@
 module.exports = {
-  '*.{ts,js}': 'eslint --cache --cache-location=.husky/_ --fix',
-  '*.{ts,js,css,scss,md,mdx}': 'prettier --write',
+  '*.{ts,js}': () => 'vp lint',
+  '*.{ts,js,css,scss,md,mdx}': () => 'vp fmt',
 };