AUI-51 / Feat: Upgrade to Angular 21, Vitest, standalone, oxfmt

.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,10 +11,10 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v4
 
-      - name: Set up Node 20
+      - name: Set up Node 22
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
           cache: 'npm'
 
       - name: NPM Install
@@ -30,10 +30,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set up Node 20
+      - name: Set up Node 22
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
           cache: 'npm'
 
       - name: NPM Install
@@ -42,12 +42,6 @@ jobs:
       - name: Test
         run: npm run test:ci
 
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          fail_ci_if_error: true
-          token: ${{ secrets.CODECOV_TOKEN }}
-
       - name: Publish Unit Test Results
         uses: EnricoMi/publish-unit-test-result-action@v2
         continue-on-error: true

.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": []
+}

CLAUDE.md

@@ -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
+- Pre-commit hook runs oxfmt on staged files
 
 ## ESLint Rules of Note
 

README.md

@@ -1,24 +1,31 @@
 # Hyperdash Angular
 
 ![build-and-test](https://github.com/hypertrace/hyperdash-angular/workflows/build-and-test/badge.svg)
-[![codecov](https://codecov.io/gh/hypertrace/hyperdash-angular/branch/main/graph/badge.svg)](https://codecov.io/gh/hypertrace/hyperdash-angular)
 
 ## Prerequisites
 
-Install Node + NPM
+- Angular `^21.0.0`
+- Node `^20.19.0 || ^22.12.0 || >=23`
+- NPM
 
 ## Setup
 
 `npm install`
 
+## RxJS Compatibility
+
+`@hypertrace/hyperdash-angular` supports both RxJS 6 (`^6.5.5`) and RxJS 7 (`^7.0.0`).
+
+The library code is kept compatible with both RxJS 6 and RxJS 7 import styles where practical.
+
 ## Development server
 
 Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Running unit tests
 
-Run `npm run test` to execute the unit tests via Jest
+Run `npm run test` to execute the unit tests via Vitest
 
 ## Commit
 
-Run `npm commit` and follow the prompts provided to create a properly formatted commit
+Run `npm run commit` and follow the prompts provided to create a properly formatted commit

angular.json

@@ -78,9 +78,13 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "detectOpenHandles": true
+            "buildTarget": "hyperdash-angular-app:build",
+            "tsConfig": "tsconfig.spec.json",
+            "runner": "vitest",
+            "runnerConfig": "vitest.config.ts",
+            "reporters": ["default", ["junit", { "outputFile": "test-results/hyperdash-angular-app/results.xml" }]]
           }
         },
         "lint": {
@@ -110,8 +114,22 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/jest:run",
-          "options": {}
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "buildTarget": "hyperdash-angular:build",
+            "tsConfig": "projects/hyperdash-angular/tsconfig.spec.json",
+            "runner": "vitest",
+            "runnerConfig": "vitest.config.ts",
+            "coverage": true,
+            "coverageInclude": ["projects/hyperdash-angular/src/**/*.ts"],
+            "coverageExclude": [
+              "**/*.module.ts",
+              "**/public_api.ts",
+              "projects/hyperdash-angular/src/test/**",
+              "projects/hyperdash-angular/src/util/**"
+            ],
+            "reporters": ["default", ["junit", { "outputFile": "test-results/hyperdash-angular/results.xml" }]]
+          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",