AUI-51 / Feat: Upgrade to Angular 21, Vitest, standalone, oxfmt (#1420)

* feat!: update packages to 21, make standalone, switch from jest to vite

- Upgrade all @angular/* packages from v20 to v21
- Replace @angular-builders/jest with @angular/build:unit-test (Vitest runner)
- Upgrade RxJS from v6 to v7, add npm overrides for @hypertrace/hyperdash peer dep
- Make all library and app components/directives/pipes standalone
- Remove deprecated APIs: ComponentFactoryResolver, HttpClientTestingModule, *ngIf/*ngFor
- Replace zone-dependent test utilities (fakeAsync/tick) with Vitest fake timers
- Remove @ngneat/spectator, zone.js, and all Jest-related dependencies

BREAKING CHANGE: Update Angular to v21, RxJS to v7,
make components standalone, switch from Jest to Vitest

* chore: change from prettier to oxfmt

* fix: fix broken test under node 20

* docs: update README for Vitest and fix commit command

* chore: remove check overrides

* test: replace istanbul comments with v8 comments

* test: make test components standalone

* fix: restore RxJS 6 compatibility for Angular 21

Revert the branch to RxJS 6 and align published peer
constraints with upstream hyperdash requirements.
Add a shared Vitest runner config so Angular 21 tests
resolve correctly when RxJS 6 is installed.

* chore: remove redundant standalone directive

* chore: remove redundant standlone metadata

* chore: remove Codecov

* chore: clean up stale tooling artifacts and review findings

- Remove eslint-config-prettier and its ESLint extends entry (replaced by oxfmt)
- Remove ts-node devDependency (no longer needed after Jest→Vitest)
- Remove stale .vscode/launch.json (referenced deleted Jest config)
- Remove emitDecoratorMetadata from tsconfig (unnecessary for Angular)
- Remove duplicate deserialization-manager.service export in public_api
- Remove vestigial standalone param from mockDirective test utility
- Widen rxjs peer dependency to ^6.5.5 || ^7.0.0
- Enable @angular-eslint/prefer-standalone lint rule
- Add non-standalone renderer backward compatibility test
- Add util/ to coverage exclusions (types-only files)
- Update README with Angular 21 prerequisites and RxJS 6+7 support

* fix: filter pre-commit hook to formattable file types

* chore: change to node 22

* chore: migrate from npm to pnpm

Replace npm with pnpm as the package manager across the repo:
- Add packageManager field and pnpm config to package.json
- Add ci script for frozen-lockfile installs
- Update CI workflows to use pnpm with node_modules caching
- Align publish workflow to Node 22
- Replace package-lock.json with pnpm-lock.yaml
- Update CLAUDE.md command references

* fix: approve lmdb and msgpackr-extract build scripts for pnpm

These native addons are transitive dependencies of @parcel/watcher
used by the Angular build toolchain. Without their build scripts
running, native bindings aren't compiled, causing AOT compilation
issues in CI.

Author: knagurski

.eslintrc.json

@@ -11,8 +11,7 @@
       "extends": [
         "plugin:@typescript-eslint/recommended",
         "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates",
-        "prettier"
+        "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "plugins": ["eslint-plugin-no-null", "eslint-plugin-unicorn"],
       "rules": {
@@ -28,7 +27,7 @@
         "@angular-eslint/no-pipe-impure": "error",
         "@angular-eslint/no-queries-metadata-property": "error",
         "@angular-eslint/prefer-output-readonly": "error",
-        "@angular-eslint/prefer-standalone": "off",
+        "@angular-eslint/prefer-standalone": "error",
         "@angular-eslint/use-component-selector": "error",
         "@angular-eslint/use-component-view-encapsulation": "error",
         "@angular-eslint/prefer-inject": "off",

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,5 @@
 ## Description
+
 Please include a summary of the change, motivation and context.
 
 <!--
@@ -7,16 +8,18 @@ Please include a summary of the change, motivation and context.
 - **on a bugfix**: link relevant information about the bug (github issue or slack thread) and how this change solves it e.g. this change fixes #99999 by adding a lock on read/write to avoid data races.
 -->
 
-
 ### Testing
-Please describe the tests that you ran to verify your changes. Please summarize what did you test and what needs to be tested e.g. deployed and tested helm chart locally. 
+
+Please describe the tests that you ran to verify your changes. Please summarize what did you test and what needs to be tested e.g. deployed and tested helm chart locally.
 
 ### Checklist:
+
 - [ ] My changes generate no new warnings
 - [ ] I have added tests that prove my fix is effective or that my feature works
 - [ ] Any dependent changes have been merged and published in downstream modules
 
 ### Documentation
+
 Make sure that you have documented corresponding changes in this repository or [hypertrace docs repo](https://github.com/hypertrace/hypertrace-docs-website) if required.
 
 <!--

.github/dependabot.yml

@@ -3,6 +3,6 @@ updates:
   - package-ecosystem: 'npm'
     directory: '/'
     commit-message:
-      prefix: "chore"
+      prefix: 'chore'
     schedule:
       interval: 'weekly'

.github/workflows/build-and-test.yml

@@ -11,17 +11,25 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v4
 
-      - name: Set up Node 20
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node 22
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: '22'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
 
-      - name: NPM Install
-        run: npm ci
+      - name: Install
+        run: pnpm run ci
 
       - name: Build
-        run: npm run build:ci
+        run: pnpm run build:ci
   test:
     runs-on: ubuntu-24.04
     steps:
@@ -30,23 +38,25 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set up Node 20
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node 22
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: '22'
 
-      - name: NPM Install
-        run: npm ci
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
 
-      - name: Test
-        run: npm run test:ci
+      - name: Install
+        run: pnpm run ci
 
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          fail_ci_if_error: true
-          token: ${{ secrets.CODECOV_TOKEN }}
+      - name: Test
+        run: pnpm run test:ci
 
       - name: Publish Unit Test Results
         uses: EnricoMi/publish-unit-test-result-action@v2

.github/workflows/publish.yml

@@ -15,17 +15,25 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v4
 
-      - name: Set up Node 20
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node 22
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: '22'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
 
-      - name: NPM Install
-        run: npm ci
+      - name: Install
+        run: pnpm run ci
 
       - name: Build
-        run: npm run build:ci
+        run: pnpm run build:ci
 
       - uses: google-github-actions/auth@v2
         id: auth
@@ -36,10 +44,10 @@ jobs:
       # Ref https://github.com/semantic-release/npm/pull/844
       - name: Update npmrc for publish
         shell: bash
-        run: npm config set -L project @hypertrace:registry ${{ secrets.GAR_NPM_PUBLISH_REGISTRY }}
+        run: echo "@hypertrace:registry=${{ secrets.GAR_NPM_PUBLISH_REGISTRY }}" >> .npmrc
 
       - name: Publish
-        run: npm run semantic-release
+        run: pnpm run semantic-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ steps.auth.outputs.access_token }}

.husky/pre-commit

@@ -1 +1,4 @@
-npx --no-install pretty-quick --staged
+FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.(ts|js|json|html|css|scss)$' || true)
+[ -z "$FILES" ] && exit 0
+echo "$FILES" | xargs npx --no-install oxfmt
+echo "$FILES" | xargs git add

.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "sortPackageJson": false,
+  "ignorePatterns": []
+}

.prettierrc

@@ -12,18 +12,18 @@ Hyperdash Angular (`@hypertrace/hyperdash-angular`) is an Angular library provid
 
 ```bash
 # Development
-npm start                    # Dev server at localhost:4200
-npm run build               # Build app and library
+pnpm start                    # Dev server at localhost:4200
+pnpm run build               # Build app and library
 
 # Testing
-npm test                    # Run tests (watch mode)
-npm run test:ci:lib         # Library tests only (CI mode)
-npm run test:ci:app         # App tests only (CI mode)
-npm run test:ci             # Full CI suite (lint + all tests)
+pnpm test                    # Run tests (watch mode)
+pnpm run test:ci:lib         # Library tests only (CI mode)
+pnpm run test:ci:app         # App tests only (CI mode)
+pnpm run test:ci             # Full CI suite (lint + all tests)
 
 # Code Quality
-npm run lint                # Run ESLint
-npm run commit              # Interactive conventional commit (commitizen)
+pnpm run lint                # Run ESLint
+pnpm run commit              # Interactive conventional commit (commitizen)
 ```
 
 ## Architecture
@@ -37,9 +37,10 @@ Core `@hypertrace/hyperdash` classes are wrapped as Angular injectable services
 
 ### Module System
 
-- `DashboardCoreModule`: Main runtime module with default property types and deserializers
+- All library components, directives, and pipes are **standalone**
+- `DashboardCoreModule`: Re-exports standalone declarables with default property types and deserializers
 - `DashboardCoreModule.with(metadata)`: Extend with custom types, models, renderers, editors, deserializers
-- `DashboardEditorModule`: Separate module for editing capabilities
+- `DashboardEditorModule`: Re-exports standalone editor components
 
 ### Key Injection Tokens
 
@@ -69,15 +70,16 @@ Core `@hypertrace/hyperdash` classes are wrapped as Angular injectable services
 
 ### Testing
 
-- Jest with `@ngneat/spectator` for component testing
+- Vitest via `@angular/build:unit-test` (zoneless, AOT)
 - Test files: `*.test.ts` or `*.spec.ts`
 - Coverage excludes: `*.module.ts`, `public_api.ts`, `test/` directory
+- Zoneless requires `fixture.changeDetectorRef.markForCheck()` before `fixture.detectChanges()` when mutating component properties between change detection cycles
 
 ### Commits
 
 - Conventional commits required (enforced via commitlint)
-- Use `npm run commit` for interactive commit wizard
-- Pre-commit hook runs Prettier on staged files
+- Use `pnpm run commit` for interactive commit wizard
+- Pre-commit hook runs oxfmt on staged files
 
 ## ESLint Rules of Note