Component Usage Analytics

OpenClaw skill for tracking component usage in React/Vue/Web Components codebases with AST parsing and SQLite analytics.

Features

• 🔍 AST Parsing - Accurate component detection via AST analysis
• 📊 SQLite Database - Store and query usage data efficiently
• 📈 Trends - Track component adoption over time
• 🎨 Dashboard - Interactive web UI with charts
• 🚫 Unused Detection - Find components that aren't being used
• 📁 Framework Support - React, Vue, Web Components
• 🔄 CI/CD Ready - Integrate into GitHub Actions

Installation

npm install @openclaw/component-usage-analytics

Quick Start

# Scan your codebase
component-analytics scan ./src --framework react

# View statistics
component-analytics stats

# Find unused components
component-analytics unused --min-usage 5

# Start dashboard
component-analytics dashboard --port 3000

Usage

Scan Command

# Basic scan
component-analytics scan ./src --framework react

# Filter by library
component-analytics scan ./src --library @mycompany/design-system

# Track with commit hash
component-analytics scan ./src --commit $(git rev-parse HEAD)

# Whitelist specific components
component-analytics scan ./src --components Button,Input,Modal

Reports

# JSON export
component-analytics report --format json --output components.json

# CSV export
component-analytics report --format csv --output components.csv

Dashboard

# Start on port 3000
component-analytics dashboard --port 3000

Navigate to http://localhost:3000 to view:

• Component usage statistics
• Usage trends over time
• Unused components list
• Detailed component information

API Usage

import { ComponentAnalytics } from '@openclaw/component-usage-analytics';

const analytics = new ComponentAnalytics();

// Scan codebase
await analytics.scan('./src', {
  framework: 'react',
  library: '@mycompany/design-system',
});

// Get stats
const stats = analytics.getStats();
console.log(`Total components: ${stats.totalComponents}`);

// Find unused
const unused = analytics.getUnused({ minUsage: 5 });
console.log(`Unused: ${unused.length}`);

// Get trends
const trends = analytics.getTrends('Button', 7);
console.log(trends);

// Export
const json = analytics.export('json');

CI/CD Integration

# .github/workflows/component-analytics.yml
name: Component Analytics
on: [push]
jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm i -g @openclaw/component-usage-analytics
      - run: component-analytics scan ./src --framework react
      - run: component-analytics report --output usage.json

Use Cases

1. Design System Adoption - Track which components are being used
2. Component Cleanup - Identify unused components for removal
3. Migration Tracking - Monitor adoption of new component versions
4. Usage Trends - See component usage over time
5. Team Reporting - Generate usage reports for stakeholders

Database Schema

SQLite database stores:

• Components (name, library, first/last seen)
• Usages (file, line, timestamp, commit)
• Scans (metadata about each scan)

Performance

• Scans ~10,000 files in < 30 seconds
• Handles millions of usage records
• Dashboard loads instantly

License

MIT