Skip to content

Latest commit

 

History

History
91 lines (62 loc) · 3.25 KB

CLAUDE.md

File metadata and controls

91 lines (62 loc) · 3.25 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Hyperdash Angular (@hypertrace/hyperdash-angular) is an Angular library providing dashboard runtime capabilities. It wraps the core @hypertrace/hyperdash library with Angular services, components, and directives.

Structure: Monorepo with a publishable library (projects/hyperdash-angular/) and demo app (src/).

Common Commands

# Development
pnpm start                    # Dev server at localhost:4200
pnpm run build               # Build app and library

# Testing
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
pnpm run lint                # Run ESLint
pnpm run commit              # Interactive conventional commit (commitizen)

Architecture

Injectable Wrappers Pattern

Core @hypertrace/hyperdash classes are wrapped as Angular injectable services following the pattern [ClassName]Service:

  • DashboardManagerService, ModelManagerService, ThemeManagerService, etc.
  • Always use the service wrapper (e.g., DashboardManagerService) rather than the core class directly.

Module System

  • 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: Re-exports standalone editor components

Key Injection Tokens

  • MODEL_PROPERTY_TYPES: Register custom property types
  • DASHBOARD_DESERIALIZERS: Register custom deserializers

Rendering

  • DashboardComponent (<hda-dashboard>): Main rendering component
  • DashboardModelDirective (hdaDashboardModel): Injects models into template context
  • ThemePropertyPipe: Theme-aware property rendering

Code Conventions

Selectors

  • Library components: hda-* prefix (kebab-case)
  • Library directives: hda* prefix (camelCase)
  • App components: app-* prefix

TypeScript

  • Strict mode enabled with noUnusedLocals, noUnusedParameters, strictNullChecks
  • Explicit access modifiers required (public/private/protected)
  • No any types allowed
  • Parameter properties preferred: constructor(private readonly service: Service)

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 pnpm run commit for interactive commit wizard
  • Pre-commit hook runs oxfmt on staged files

ESLint Rules of Note

  • Max 500 lines per file
  • Template conditional complexity: max 4
  • Template cyclomatic complexity: max 5
  • No inline templates > 10 lines
  • Arrow functions: as-needed body style
  • Prefer template literals over string concatenation