@wyatex/caniuse-cli

A powerful CLI tool for analyzing browser compatibility of your JavaScript/TypeScript projects

Features

• Real-time Analysis - Live scanning progress with WebSocket updates
• File Tree Navigation - Interactive directory tree with file selection
• Browser Compatibility Matrix - Minimum required versions for Chrome, Firefox, Safari, Edge
• Feature Detection - Comprehensive ES6+ syntax and API detection
• Source Code Links - Click to open files in your IDE at the exact line
• Vue SFC Support - Analyze Vue single-file components out of the box

Supported File Types

| Type | Extensions | | ---------- | ------------- | | JavaScript | .js, .jsx | | TypeScript | .ts, .tsx | | Vue | .vue |

Installation

# Using bun
bun add -g @wyatex/caniuse-cli

# Using npm
npm install -g @wyatex/caniuse-cli

# Using pnpm
pnpm add -g @wyatex/caniuse-cli

Usage

# Analyze current directory
caniuse-cli

# Analyze specific directory
caniuse-cli ./src

# Specify port
caniuse-cli --port 8080

# Don't open browser automatically
caniuse-cli --no-open

# Short flags
caniuse-cli -p 8080 -o

Command Line Options

| Option | Alias | Description | | ----------------- | ----- | ------------------------------------------------- | | [directory] | - | Directory to analyze (default: current directory) | | --port <number> | -p | Server port (default: 3000) | | --open | -o | Open browser automatically | | --no-open | - | Don't open browser automatically |

Screenshot

┌─────────────────────────────────────────────────────────────────────┐
│  caniuse-cli - Browser Compatibility Analyzer                       │
├────────────────────────────┬────────────────────────────────────────┤
│  FILE TREE                 │  BROWSER REQUIREMENTS                  │
│  ├─ src                    │                                        │
│  │  ├─ components          │  ┌──────────┐ ┌──────────┐            │
│  │  │  └─ App.tsx    ◀────│  │ Chrome   │ │ Firefox  │            │
│  │  ├─ utils               │  │   80+    │ │   72+    │            │
│  │  │  └─ helper.ts        │  └──────────┘ └──────────┘            │
│  │  └─ index.ts            │                                        │
│  └─ package.json           │  DETECTED FEATURES                     │
│                            │  ─────────────────────                 │
│                            │  Optional Chaining    (v80+ / v74+)   │
│                            │  Nullish Coalescing   (v80+ / v72+)   │
│                            │  Async/Await          (v55+ / v52+)   │
│                            │  Arrow Functions      (v45+ / v22+)   │
│                            │                                        │
│                            │  [src/components/App.tsx:42]           │
│                            │  [src/utils/helper.ts:15]             │
└────────────────────────────┴────────────────────────────────────────┘

Detected Features

ES6+ (2015)

• Arrow Functions
• Classes
• Template Literals
• Destructuring
• Spread Operator
• Object.values() / Object.entries()

ES2016+

• Exponentiation Operator
• Array.prototype.includes

ES2017+

• Async/Await
• Object.entries / Object.values

ES2019+

• Optional Chaining (?.)
• Nullish Coalescing (??)

ES2020+

• BigInt
• Dynamic Import

ES2021+

• Logical Assignment (??=, ||=, &&=)

ES2022+

• Top-level Await
• Class Fields

ES2023+

• Array Methods (toSorted, toReversed, with, etc.)

Data Sources

This tool combines multiple data sources for accurate compatibility information:

| Source | Purpose | | ------------------------------------------------------------ | ------------------------ | | caniuse-lite | Native API support | | @babel/compat-data | Syntax transform plugins | | core-js-compat | Polyfill requirements |

Tech Stack

| Layer | Technology | | -------- | --------------------------------------------------------------------------------------------------------------- | | Runtime | Bun | | Backend | ElysiaJS | | Frontend | React + TypeScript | | Build | Vite + vite-plugin-singlefile | | Parser | @babel/parser + @vue/compiler-sfc |

Development

# Clone the repository
git clone https://github.com/wyatex/caniuse-cli.git
cd caniuse-cli

# Install dependencies
bun install

# Build frontend
bun run build

# Run in development mode
bun run dev

# Run frontend dev server (separate terminal)
bun run web:dev

License

MIT License - see LICENSE for details.

Made with by wyatex