Angular Baseline Devkit

Automated Angular compatibility analyzer using official Baseline data. Detect 150+ features, prevent bugs, ship with confidence.

Comment

Inspiration

As an Angular developer, I experienced the frustration of shipping code that worked perfectly in Chrome but crashed on Firefox. I used document.startViewTransition() for a smooth theme toggle—it looked good in my testing, but silently failed for users on other browsers. I had no idea this API wasn't universally supported.

When I discovered the Baseline initiative and the web-features dataset, I realized we could automate compatibility checking. What if Angular developers could catch these issues before production, with actionable guidance on how to fix them? That's when Angular Baseline DevKit was born.

What it does

Angular Baseline DevKit automatically analyzes Angular projects for browser compatibility issues:

  • Scans TypeScript, HTML, and CSS files using AST parsing
  • Detects 150+ modern web features (:has() selectors, View Transitions, container queries, etc.)
  • Cross-references against the official web-features dataset (the same data powering MDN and Can I Use)
  • Reports compatibility issues with implementation-ready fixes
  • Integrates with CI/CD pipelines to prevent incompatible code from reaching production

Instead of just warning you, it tells you exactly which browsers support each feature, whether it's widely/newly/limited available, and provides ready code to fix it using feature detection, polyfills, or progressive enhancement.

How we built it

This was my first hackathon and my first time creating npm packages. I learned everything from scratch.

Architecture: I built a monorepo with multiple packages—analyzer-core for AST parsing, cli-builder for the command-line interface, and reporters for JSON/HTML output generation. I had no idea how to structure workspaces or manage cross-package dependencies at first.

Technology Stack:

  • AST Parsing: Used css-tree and postcss for CSS, ts-morph for TypeScript, and @angular/compiler for HTML templates—no fragile regex patterns
  • Baseline Data: Integrated the official web-features npm package maintained by Google, Mozilla, Apple, and Microsoft
  • Reporting: Built three output formats—console for quick feedback, JSON for CI/CD, and interactive HTML for humans

Optimization: Initially, analyzing 500 files took 3+ minutes. I implemented parallel processing with configurable concurrency, caching, and file size limits. Now it runs in 30-60 seconds.

Challenges we ran into

Learning package development: I spent 8+ hours just understanding monorepo structure, workspace configuration, and build order. My first builds failed constantly until I studied the Angular CLI source code.

Performance at scale: AST parsing is computationally expensive. I had to learn about concurrency control, caching strategies, and performance profiling.

Accomplishments that we're proud of

Building my first npm packages: From not knowing how package.json workspaces work to publishing a functional monorepo with multiple interconnected packages.

Solving a real problem: I built this because I personally experienced the pain.

What's next for Angular Baseline DevKit

IDE integration (Priority #1): Real-time compatibility warnings while you type, like GitHub Copilot. Squiggly lines under incompatible code with quick-fix code actions. I ran out of time learning the Language Server Protocol, but this would make the tool 10x more useful.

Framework expansion: Support React (JSX via Babel), Vue (template compiler), and Svelte. The CSS and TypeScript analysis already works universally—I just need framework-specific template analyzers.

Smart polyfill detection: Auto-detect polyfills in package.json or code and skip warnings for features you've already handled.

Community contributions: Open the feature registry for community additions. If someone uses a niche API I haven't mapped, they should be able to contribute it.

This hackathon taught me I can build tools that solve real problems. Angular Baseline DevKit is just the beginning.

Built With

Share this project:

Updates