open-index/open-npm huggingface dataset:
npm package: @milencode/bundlewatch-cli
Description: CLI utilities for BundleWatch
Latest version: 2.3.0

# @milencode/bundlewatch-cli

> **⚠️ EXPERIMENTAL - DO NOT USE IN PRODUCTION**
>
> This package is currently in active development and is not ready for production use. The API is unstable and may change without notice. Features may be incomplete, buggy, or break unexpectedly.
>
> **Use at your own risk.** This is published for testing purposes only.

CLI utilities for BundleWatch - analyze bundle size history across your git commits.

## Installation

```bash
npm install -g @milencode/bundlewatch-cli
# or
pnpm add -g @milencode/bundlewatch-cli
```

## Commands

### `bundlewatch backfill`

Analyze historical commits to populate bundle metrics. Perfect for getting instant value when adding BundleWatch to an existing project.

**Basic Usage:**

```bash
# Analyze all tagged releases
bundlewatch backfill --releases-only

# Analyze last 50 commits
bundlewatch backfill --last 50

# Analyze specific range
bundlewatch backfill --from=v1.0.0 --to=HEAD

# Sample ~20 commits from history
bundlewatch backfill --sample 20
```

**Options:**

- `--from <ref>` - Start from this git ref (default: `HEAD~100`)
- `--to <ref>` - Analyze up to this git ref (default: `HEAD`)
- `--last <n>` - Analyze only the last N commits
- `--releases-only` - Only analyze tagged releases (v1.0.0, v2.0.0, etc.)
- `--sample <n>` - Sample approximately N commits from the range
- `--build-command <cmd>` - Command to build the project (default: `pnpm build`)
- `--skip-install` - Skip dependency installation (faster if deps unchanged)

**How it works:**

1. Creates isolated git worktrees for each commit
2. Installs dependencies and builds the project
3. Analyzes build output (works with any build tool: Vite, Webpack, Next.js, etc.)
4. Stores metrics in your `bundlewatch-data` branch
5. Cleans up worktrees automatically

**Example workflow:**

```bash
# First time setup - backfill historical data
bundlewatch backfill --releases-only

# Or get last 3 months of weekly commits
bundlewatch backfill --sample 12

# From now on, the plugin handles new commits automatically in CI
```

## Features

- ✅ **Works with any build tool** - Analyzes build output, not tied to specific bundlers
- ✅ **Handles build tool migrations** - Works even if you switched from Webpack to Vite
- ✅ **Smart sampling** - Multiple strategies to balance speed vs coverage
- ✅ **Graceful error handling** - Skips broken builds, continues processing
- ✅ **Progress tracking** - Shows real-time progress with ora spinners
- ✅ **Git worktrees** - Safe isolated builds without affecting your working directory

## License

MIT
npm package: @milencode/bundlewatch-parsers
Description: Parse existing bundle analyzer outputs instead of re-analyzing files.
Latest version: 2.3.0

# @milencode/bundlewatch-parsers

Parse existing bundle analyzer outputs instead of re-analyzing files.

## Why?

Existing tools like `webpack-bundle-analyzer` and `rollup-plugin-visualizer` already do excellent analysis and visualization. Instead of duplicating that work, BundleWatch parses their output and adds:

- ✅ Time-series tracking (git-based storage)
- ✅ Build comparisons
- ✅ Trend analysis
- ✅ CI/CD integration
- ✅ Alerting

**Result:** 10-100x faster than re-analyzing files!

## Supported Formats

### Webpack Stats

```typescript
import { parseWebpackStats } from '@milencode/bundlewatch-parsers';
import stats from './stats.json';

const metrics = parseWebpackStats(stats, {
  branch: 'main',
  commit: 'abc123',
  estimateCompression: true, // Estimate gzip/brotli sizes
});

// metrics is now in BuildMetrics format
// Ready for comparison, storage, etc.
```

### Coming Soon

- `parseRollupVisualizer()` - Parse rollup-plugin-visualizer output
- `parseViteManifest()` - Parse Vite's .vite/manifest.json
- `parseNextjsStats()` - Parse Next.js build output

## Usage with Webpack

```javascript
// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'json',      // Generate stats.json
      generateStatsFile: true,
      statsFilename: 'stats.json',
    }),
  ],
};
```

Then in your CI/post-build:

```typescript
import { parseWebpackStats } from '@milencode/bundlewatch-parsers';
import { GitStorage } from '@milencode/bundlewatch-core';
import fs from 'fs';

// Read their stats
const stats = JSON.parse(fs.readFileSync('dist/stats.json', 'utf-8'));

// Parse to our format (< 1ms)
const metrics = parseWebpackStats(stats);

// Add our layer (time-series tracking)
const storage = new GitStorage();
await storage.save(metrics);

// Compare against baseline
const baseline = await storage.load('main');
const comparison = compare(metrics, baseline);

console.log(comparison); // See what changed!
```

## Performance

**Before (re-analyzing files):**
- Read all files from disk: ~500ms
- Compress with gzip: ~800ms
- Compress with brotli: ~600ms
- **Total: ~2 seconds**

**After (parsing stats):**
- Parse JSON: <1ms
- **Total: <1ms** ⚡

**~2000x faster!**

## API

### `parseWebpackStats(stats, options)`

Converts webpack stats.json to BuildMetrics format.

**Parameters:**
- `stats` - Webpack stats object (from stats.json)
- `options` (optional):
  - `branch` - Git branch name
  - `commit` - Git commit hash
  - `estimateCompression` - Estimate gzip/brotli sizes (default: true)

**Returns:** `BuildMetrics` object

## License

MIT
npm package: @milencode/bundlewatch-vite-plugin
Description: Vite plugin for automatic bundle size analysis and tracking.
Latest version: 2.3.0

# @bundle-watch/vite-plugin

Vite plugin for automatic bundle size analysis and tracking.

## Installation

```bash
pnpm add -D @bundle-watch/vite-plugin
```

## Usage

Add to your `vite.config.ts`:

```typescript
import { defineConfig } from 'vite';
import { bundleWatch } from '@bundle-watch/vite-plugin';

export default defineConfig({
  plugins: [
    bundleWatch({
      // Options (all optional)
      enabled: true,
      printReport: true,
      saveToGit: true, // Auto-enabled in CI
      compareAgainst: 'main',
      failOnSizeIncrease: false,
      sizeIncreaseThreshold: 10,
    }),
  ],
});
```

## Options

- **`enabled`**: Enable/disable the plugin (default: `true`)
- **`printReport`**: Print analysis report to console (default: `true`)
- **`saveToGit`**: Save metrics to git branch (default: `true` in CI, `false` locally)
- **`compareAgainst`**: Branch to compare against (default: `'main'`)
- **`failOnSizeIncrease`**: Fail build if size exceeds threshold (default: `false`)
- **`sizeIncreaseThreshold`**: Size increase threshold percentage (default: `10`)

## Output

After each build, you'll see a report like:

```
📊 Bundle Watch Report
══════════════════════════════════════════════════

Total Size:    245.5 KB
Gzipped:       89.2 KB
Brotli:        78.1 KB
Build Time:    3.24s
Chunks:        3

By Type:
  JavaScript:  185.3 KB
  CSS:         45.2 KB
  Images:      15.0 KB
  Fonts:       0 B
  Other:       0 B

──────────────────────────────────────────────────
Comparison vs main:

📉 Bundle is 12.5 KB (4.8%) smaller than main

💡 Insights:
  ✅ Great job! Bundle size reduced by 4.8%
  📦 index.js grew by 3.2 KB (7.2%)

══════════════════════════════════════════════════
```

## CI Integration

The plugin automatically detects CI environments and saves metrics to a git branch for historical tracking.

See the main [@bundle-watch/core](../core) documentation for more details.
npm package: @milencode/bundlewatch-webpack-plugin
Description: Bundle Watch plugin for Webpack.
Latest version: 2.3.0

# @bundlewatch/webpack-plugin

Bundle Watch plugin for Webpack.

## Features

- 📊 **Bundle Analysis** - Track sizes, compressions, build time
- 📈 **Historical Tracking** - Compare against previous builds
- 🚀 **CI/CD Ready** - Works with GitHub Actions
- ⚡ **Zero Config** - Works out of the box
- 🎯 **Size Budgets** - Fail builds on size increases

## Installation

```bash
pnpm add -D @bundlewatch/webpack-plugin
```

## Usage

### Webpack 5

```javascript
// webpack.config.js
const { BundleWatchPlugin } = require('@bundlewatch/webpack-plugin');

module.exports = {
  // ... your config
  plugins: [
    new BundleWatchPlugin({
      enabled: true,
      printReport: true,
      saveToGit: process.env.CI === 'true',
    }),
  ],
};
```

### ESM / TypeScript

```typescript
// webpack.config.ts
import { BundleWatchPlugin } from '@bundlewatch/webpack-plugin';

export default {
  plugins: [
    new BundleWatchPlugin(),
  ],
};
```

## Configuration

```typescript
interface WebpackBundleWatchOptions {
  /** Enable/disable the plugin */
  enabled?: boolean;
  
  /** Print report to console after build */
  printReport?: boolean;
  
  /** Save metrics to git storage */
  saveToGit?: boolean;
  
  /** Compare against target branch */
  compareAgainst?: string;
  
  /** Fail build if size increases beyond threshold */
  failOnSizeIncrease?: boolean;
  
  /** Size increase threshold (percentage) */
  sizeIncreaseThreshold?: number;
}
```

## Example Output

```
📊 Bundle Watch Report
══════════════════════════════════════════════════

Total Size:    245.5 KB
Gzipped:       89.2 KB
Brotli:        75.8 KB
Build Time:    3.24s
Chunks:        3

By Type:
  JavaScript:  185.3 KB
  CSS:         45.2 KB
  Images:      15.0 KB

══════════════════════════════════════════════════
```

## CI/CD Integration

```yaml
# .github/workflows/build.yml
- name: Build with Webpack
  run: npm run build
  env:
    CI: true
```

## Examples

See [examples/webpack-app](../../examples/webpack-app) for a complete example.

## License

MIT