@foxlight/bundle 0.1.0

package/README.md

@@ -0,0 +1,59 @@
+# @foxlight/bundle
+
+Bundle size analysis for [Foxlight](https://github.com/josegabrielcruz/foxlight) — the open-source front-end intelligence platform.
+
+## What's Inside
+
+- **Size Tracker** — computes raw and gzip sizes, per-component bundle breakdown (self, exclusive, total), chunk tracking
+- **Vite Plugin** — Rollup-based dependency resolution with BFS traversal, JSON report output, console summary
+- **Webpack Plugin** — hooks into Webpack's emit phase for per-module size extraction and reporting
+
+## Installation
+
+```bash
+npm install @foxlight/bundle
+```
+
+## Vite Plugin
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { foxlightVitePlugin } from '@foxlight/bundle/vite';
+
+export default defineConfig({
+  plugins: [
+    foxlightVitePlugin({
+      outputPath: '.foxlight/bundle-report.json',
+    }),
+  ],
+});
+```
+
+## Webpack Plugin
+
+```typescript
+// webpack.config.js
+import { FoxlightWebpackPlugin } from '@foxlight/bundle/webpack';
+
+export default {
+  plugins: [
+    new FoxlightWebpackPlugin({
+      outputPath: '.foxlight/bundle-report.json',
+    }),
+  ],
+};
+```
+
+## Programmatic API
+
+```typescript
+import { computeSize, computeComponentBundleInfo, formatBytes } from '@foxlight/bundle';
+
+const size = computeSize(sourceCode);
+console.log(formatBytes(size.gzip)); // "12.4 KB"
+```
+
+## License
+
+MIT

package/dist/chunk-KFZFLOGH.js

@@ -0,0 +1,151 @@
+import {
+  computeComponentBundleInfo,
+  computeSize,
+  formatBytes
+} from "./chunk-NAMHCMIC.js";
+
+// src/plugins/vite-plugin.ts
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+function foxlightBundle(options = {}) {
+  const { outputPath = ".foxlight/bundle-report.json", printSummary = true } = options;
+  let rootDir;
+  return {
+    name: "foxlight-bundle",
+    enforce: "post",
+    configResolved(config) {
+      rootDir = config.root;
+    },
+    async generateBundle(_outputOptions, bundle) {
+      const modules = /* @__PURE__ */ new Map();
+      const chunkSizes = [];
+      for (const [fileName, chunk] of Object.entries(bundle)) {
+        if (chunk.type !== "chunk") continue;
+        const chunkSize = computeSize(chunk.code);
+        chunkSizes.push({ name: fileName, size: chunkSize });
+        if (chunk.modules) {
+          for (const [moduleId, moduleInfo] of Object.entries(
+            chunk.modules
+          )) {
+            const existing = modules.get(moduleId);
+            if (existing) {
+              existing.chunks.push(fileName);
+            } else {
+              modules.set(moduleId, {
+                id: moduleId,
+                code: moduleInfo.code ?? "",
+                chunks: [fileName]
+              });
+            }
+          }
+        }
+      }
+      let componentInfo;
+      if (options.componentModules) {
+        const moduleDeps = /* @__PURE__ */ new Map();
+        for (const [_fileName, chunk] of Object.entries(bundle)) {
+          if (chunk.type !== "chunk") continue;
+          if (chunk.modules) {
+            for (const moduleId of Object.keys(
+              chunk.modules
+            )) {
+              if (!moduleDeps.has(moduleId)) {
+                moduleDeps.set(moduleId, []);
+              }
+            }
+          }
+          if (chunk.imports) {
+            for (const imp of chunk.imports) {
+              const importedChunk = bundle[imp];
+              if (importedChunk && importedChunk.type === "chunk" && importedChunk.modules) {
+                for (const moduleId of Object.keys(
+                  chunk.modules
+                )) {
+                  const deps = moduleDeps.get(moduleId) ?? [];
+                  for (const depId of Object.keys(
+                    importedChunk.modules
+                  )) {
+                    if (!deps.includes(depId)) {
+                      deps.push(depId);
+                    }
+                  }
+                  moduleDeps.set(moduleId, deps);
+                }
+              }
+            }
+          }
+        }
+        const dependencyResolver = (moduleId) => {
+          const visited = /* @__PURE__ */ new Set();
+          const queue = [moduleId];
+          const result = [];
+          while (queue.length > 0) {
+            const current = queue.shift();
+            if (visited.has(current)) continue;
+            visited.add(current);
+            const deps = moduleDeps.get(current) ?? [];
+            for (const dep of deps) {
+              if (!visited.has(dep)) {
+                result.push(dep);
+                queue.push(dep);
+              }
+            }
+          }
+          return result;
+        };
+        componentInfo = computeComponentBundleInfo(
+          options.componentModules,
+          modules,
+          dependencyResolver
+        );
+      }
+      const report = {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        rootDir,
+        chunks: chunkSizes.map((c) => ({
+          name: c.name,
+          rawSize: c.size.raw,
+          gzipSize: c.size.gzip
+        })),
+        modules: Array.from(modules.values()).map((m) => ({
+          id: m.id,
+          rawSize: Buffer.byteLength(m.code, "utf-8"),
+          chunks: m.chunks
+        })),
+        components: componentInfo,
+        totalModules: modules.size,
+        totalChunks: chunkSizes.length
+      };
+      const reportPath = join(rootDir, outputPath);
+      const reportDir = reportPath.substring(0, reportPath.lastIndexOf("/"));
+      await mkdir(reportDir, { recursive: true });
+      await writeFile(reportPath, JSON.stringify(report, null, 2));
+      if (printSummary) {
+        const totalRaw = chunkSizes.reduce((sum, c) => sum + c.size.raw, 0);
+        const totalGzip = chunkSizes.reduce((sum, c) => sum + c.size.gzip, 0);
+        console.log("\n\u{1F4E6} Foxlight Bundle Report");
+        console.log("\u2500".repeat(50));
+        console.log(`   Chunks: ${chunkSizes.length}`);
+        console.log(`   Modules: ${modules.size}`);
+        console.log(`   Total (raw): ${formatBytes(totalRaw)}`);
+        console.log(`   Total (gzip): ${formatBytes(totalGzip)}`);
+        console.log(`   Report: ${outputPath}`);
+        console.log("\u2500".repeat(50));
+        if (componentInfo && componentInfo.length > 0) {
+          console.log("\n   Components by size (gzip):");
+          const sorted = [...componentInfo].sort((a, b) => b.selfSize.gzip - a.selfSize.gzip);
+          for (const comp of sorted.slice(0, 10)) {
+            console.log(
+              `     ${formatBytes(comp.selfSize.gzip).padStart(10)}  ${comp.componentId}`
+            );
+          }
+        }
+        console.log("");
+      }
+    }
+  };
+}
+
+export {
+  foxlightBundle
+};

package/dist/chunk-LMLCG5N6.js

@@ -0,0 +1,130 @@
+import {
+  computeComponentBundleInfo,
+  computeSize,
+  formatBytes
+} from "./chunk-NAMHCMIC.js";
+
+// src/plugins/webpack-plugin.ts
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+var FoxlightWebpackPlugin = class {
+  options;
+  constructor(options = {}) {
+    this.options = options;
+  }
+  apply(compiler) {
+    const pluginName = "FoxlightWebpackPlugin";
+    const { outputPath = ".foxlight/bundle-report.json", printSummary = true } = this.options;
+    compiler.hooks.emit.tapAsync(pluginName, async (compilation, callback) => {
+      try {
+        const rootDir = compiler.options.context ?? process.cwd();
+        const modules = /* @__PURE__ */ new Map();
+        const chunkSizes = [];
+        for (const [fileName, asset] of Object.entries(compilation.assets)) {
+          if (!fileName.endsWith(".js") && !fileName.endsWith(".mjs")) continue;
+          const source = asset.source();
+          const code = typeof source === "string" ? source : source.toString("utf-8");
+          const size = computeSize(code);
+          chunkSizes.push({ name: fileName, size });
+        }
+        for (const mod of compilation.modules) {
+          const id = mod.resource ?? mod.identifier();
+          if (!id || id.includes("node_modules")) continue;
+          const code = mod._source?._value ?? "";
+          if (!code) continue;
+          const chunks = [];
+          for (const chunk of mod.chunks) {
+            const chunkName = chunk.name ?? String(chunk.id);
+            chunks.push(chunkName);
+          }
+          modules.set(id, { id, code, chunks });
+        }
+        const moduleDeps = /* @__PURE__ */ new Map();
+        for (const mod of compilation.modules) {
+          const id = mod.resource ?? mod.identifier();
+          if (!id) continue;
+          if (!moduleDeps.has(id)) {
+            moduleDeps.set(id, []);
+          }
+        }
+        let componentInfo;
+        if (this.options.componentModules) {
+          const dependencyResolver = (moduleId) => {
+            const visited = /* @__PURE__ */ new Set();
+            const queue = [moduleId];
+            const result = [];
+            while (queue.length > 0) {
+              const current = queue.shift();
+              if (visited.has(current)) continue;
+              visited.add(current);
+              const deps = moduleDeps.get(current) ?? [];
+              for (const dep of deps) {
+                if (!visited.has(dep)) {
+                  result.push(dep);
+                  queue.push(dep);
+                }
+              }
+            }
+            return result;
+          };
+          componentInfo = computeComponentBundleInfo(
+            this.options.componentModules,
+            modules,
+            dependencyResolver
+          );
+        }
+        const report = {
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          rootDir,
+          chunks: chunkSizes.map((c) => ({
+            name: c.name,
+            rawSize: c.size.raw,
+            gzipSize: c.size.gzip
+          })),
+          modules: Array.from(modules.values()).map((m) => ({
+            id: m.id,
+            rawSize: Buffer.byteLength(m.code, "utf-8"),
+            chunks: m.chunks
+          })),
+          components: componentInfo,
+          totalModules: modules.size,
+          totalChunks: chunkSizes.length
+        };
+        const reportPath = join(rootDir, outputPath);
+        const reportDir = reportPath.substring(0, reportPath.lastIndexOf("/"));
+        await mkdir(reportDir, { recursive: true });
+        await writeFile(reportPath, JSON.stringify(report, null, 2));
+        if (printSummary) {
+          const totalRaw = chunkSizes.reduce((sum, c) => sum + c.size.raw, 0);
+          const totalGzip = chunkSizes.reduce((sum, c) => sum + c.size.gzip, 0);
+          console.log("\n\u{1F4E6} Foxlight Bundle Report");
+          console.log("\u2500".repeat(50));
+          console.log(`   Chunks: ${chunkSizes.length}`);
+          console.log(`   Modules: ${modules.size}`);
+          console.log(`   Total (raw): ${formatBytes(totalRaw)}`);
+          console.log(`   Total (gzip): ${formatBytes(totalGzip)}`);
+          console.log(`   Report: ${outputPath}`);
+          console.log("\u2500".repeat(50));
+          if (componentInfo && componentInfo.length > 0) {
+            console.log("\n   Components by size (gzip):");
+            const sorted = [...componentInfo].sort((a, b) => b.selfSize.gzip - a.selfSize.gzip);
+            for (const comp of sorted.slice(0, 10)) {
+              console.log(
+                `     ${formatBytes(comp.selfSize.gzip).padStart(10)}  ${comp.componentId}`
+              );
+            }
+          }
+          console.log("");
+        }
+        callback();
+      } catch (error) {
+        console.error("[foxlight] Error generating bundle report:", error);
+        callback();
+      }
+    });
+  }
+};
+
+export {
+  FoxlightWebpackPlugin
+};

package/dist/chunk-NAMHCMIC.js

@@ -0,0 +1,86 @@
+// src/size-tracker.ts
+import { gzipSync } from "zlib";
+function computeSize(code) {
+  const raw = Buffer.byteLength(code, "utf-8");
+  const gzip = gzipSync(Buffer.from(code, "utf-8")).byteLength;
+  return { raw, gzip };
+}
+function computeComponentBundleInfo(componentModules, allModules, dependencyResolver) {
+  const results = [];
+  const allComponentIds = Array.from(componentModules.keys());
+  for (const [componentId, moduleIds] of componentModules) {
+    const selfSize = aggregateSize(moduleIds, allModules);
+    const allDeps = /* @__PURE__ */ new Set();
+    for (const modId of moduleIds) {
+      allDeps.add(modId);
+      for (const dep of dependencyResolver(modId)) {
+        allDeps.add(dep);
+      }
+    }
+    const totalSize = aggregateSize(Array.from(allDeps), allModules);
+    const otherDeps = /* @__PURE__ */ new Set();
+    for (const otherId of allComponentIds) {
+      if (otherId === componentId) continue;
+      const otherModules = componentModules.get(otherId) ?? [];
+      for (const modId of otherModules) {
+        otherDeps.add(modId);
+        for (const dep of dependencyResolver(modId)) {
+          otherDeps.add(dep);
+        }
+      }
+    }
+    const exclusiveModules = Array.from(allDeps).filter((d) => !otherDeps.has(d));
+    const exclusiveSize = aggregateSize(exclusiveModules, allModules);
+    const chunks = /* @__PURE__ */ new Set();
+    for (const modId of moduleIds) {
+      const mod = allModules.get(modId);
+      if (mod) {
+        for (const chunk of mod.chunks) {
+          chunks.add(chunk);
+        }
+      }
+    }
+    results.push({
+      componentId,
+      selfSize,
+      exclusiveSize,
+      totalSize,
+      chunks: Array.from(chunks)
+    });
+  }
+  return results;
+}
+function aggregateSize(moduleIds, allModules) {
+  let totalRaw = 0;
+  let totalGzip = 0;
+  for (const id of moduleIds) {
+    const mod = allModules.get(id);
+    if (mod) {
+      const size = computeSize(mod.code);
+      totalRaw += size.raw;
+      totalGzip += size.gzip;
+    }
+  }
+  return { raw: totalRaw, gzip: totalGzip };
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+  const sign = bytes < 0 ? "-" : "";
+  return `${sign}${Math.abs(value).toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)} ${units[i]}`;
+}
+function formatDelta(before, after) {
+  const delta = after.gzip - before.gzip;
+  const sign = delta > 0 ? "+" : "";
+  const percent = before.gzip > 0 ? ` (${sign}${(delta / before.gzip * 100).toFixed(1)}%)` : "";
+  return `${sign}${formatBytes(delta)}${percent}`;
+}
+
+export {
+  computeSize,
+  computeComponentBundleInfo,
+  formatBytes,
+  formatDelta
+};

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import { ComponentId, ComponentBundleInfo, SizeInfo } from '@foxlight/core';
+export { FoxlightVitePluginOptions, foxlightBundle } from './plugins/vite-plugin.js';
+export { FoxlightWebpackPlugin, FoxlightWebpackPluginOptions } from './plugins/webpack-plugin.js';
+import 'vite';
+
+/** A module in the build output. */
+interface ModuleEntry {
+    /** Unique module identifier (usually the file path) */
+    id: string;
+    /** Raw source code or bundled code for this module */
+    code: string;
+    /** Which chunk(s) this module ended up in */
+    chunks: string[];
+}
+/**
+ * Compute size info for a piece of code.
+ */
+declare function computeSize(code: string): SizeInfo;
+/**
+ * Compute per-component bundle info.
+ *
+ * Takes a mapping of componentId → moduleIds and the full list of
+ * modules from the build output, then calculates self, exclusive,
+ * and total sizes.
+ *
+ * @param componentModules - Map of componentId to its direct module IDs
+ * @param allModules - All modules from the build output
+ * @param dependencyResolver - Function that returns transitive dependencies for a module
+ */
+declare function computeComponentBundleInfo(componentModules: Map<ComponentId, string[]>, allModules: Map<string, ModuleEntry>, dependencyResolver: (moduleId: string) => string[]): ComponentBundleInfo[];
+/**
+ * Format bytes into a human-readable string.
+ */
+declare function formatBytes(bytes: number): string;
+/**
+ * Format a size delta with a +/- prefix and color indicator.
+ */
+declare function formatDelta(before: SizeInfo, after: SizeInfo): string;
+
+export { type ModuleEntry, computeComponentBundleInfo, computeSize, formatBytes, formatDelta };

package/dist/index.js

@@ -0,0 +1,20 @@
+import {
+  foxlightBundle
+} from "./chunk-KFZFLOGH.js";
+import {
+  FoxlightWebpackPlugin
+} from "./chunk-LMLCG5N6.js";
+import {
+  computeComponentBundleInfo,
+  computeSize,
+  formatBytes,
+  formatDelta
+} from "./chunk-NAMHCMIC.js";
+export {
+  FoxlightWebpackPlugin,
+  computeComponentBundleInfo,
+  computeSize,
+  formatBytes,
+  formatDelta,
+  foxlightBundle
+};

package/dist/plugins/vite-plugin.d.ts

@@ -0,0 +1,35 @@
+import { Plugin } from 'vite';
+
+interface FoxlightVitePluginOptions {
+    /**
+     * Path to the output report file.
+     * @default ".foxlight/bundle-report.json"
+     */
+    outputPath?: string;
+    /**
+     * Map of componentId → module file paths.
+     * If not provided, the plugin will report per-module sizes
+     * without component mapping.
+     */
+    componentModules?: Map<string, string[]>;
+    /**
+     * Whether to print a summary to the console.
+     * @default true
+     */
+    printSummary?: boolean;
+}
+/**
+ * Vite plugin for Foxlight bundle analysis.
+ *
+ * Usage in vite.config.ts:
+ * ```ts
+ * import { foxlightBundle } from "@foxlight/bundle/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [foxlightBundle()],
+ * });
+ * ```
+ */
+declare function foxlightBundle(options?: FoxlightVitePluginOptions): Plugin;
+
+export { type FoxlightVitePluginOptions, foxlightBundle };

package/dist/plugins/vite-plugin.js

@@ -0,0 +1,7 @@
+import {
+  foxlightBundle
+} from "../chunk-KFZFLOGH.js";
+import "../chunk-NAMHCMIC.js";
+export {
+  foxlightBundle
+};

package/dist/plugins/webpack-plugin.d.ts

@@ -0,0 +1,74 @@
+interface FoxlightWebpackPluginOptions {
+    /**
+     * Path to the output report file.
+     * @default ".foxlight/bundle-report.json"
+     */
+    outputPath?: string;
+    /**
+     * Map of componentId → module file paths.
+     * If not provided, the plugin will report per-module sizes
+     * without component mapping.
+     */
+    componentModules?: Map<string, string[]>;
+    /**
+     * Whether to print a summary to the console.
+     * @default true
+     */
+    printSummary?: boolean;
+}
+/**
+ * Webpack-compatible compiler and compilation types.
+ * Kept minimal to avoid requiring webpack as a dependency.
+ */
+interface WebpackCompiler {
+    hooks: {
+        emit: {
+            tapAsync(name: string, callback: (compilation: WebpackCompilation, cb: () => void) => void): void;
+        };
+    };
+    options: {
+        context?: string;
+    };
+}
+interface WebpackCompilation {
+    assets: Record<string, WebpackAsset>;
+    chunks: Iterable<WebpackChunk>;
+    modules: Iterable<WebpackModule>;
+}
+interface WebpackAsset {
+    source(): string | Buffer;
+    size(): number;
+}
+interface WebpackChunk {
+    name: string | null;
+    files: Set<string>;
+    id: string | number | null;
+}
+interface WebpackModule {
+    identifier(): string;
+    resource?: string;
+    size(): number;
+    _source?: {
+        _value?: string;
+    };
+    chunks: Iterable<WebpackChunk>;
+}
+/**
+ * Webpack plugin for Foxlight bundle analysis.
+ *
+ * Usage in webpack.config.js:
+ * ```js
+ * const { FoxlightWebpackPlugin } = require("@foxlight/bundle/webpack");
+ *
+ * module.exports = {
+ *   plugins: [new FoxlightWebpackPlugin()],
+ * };
+ * ```
+ */
+declare class FoxlightWebpackPlugin {
+    private options;
+    constructor(options?: FoxlightWebpackPluginOptions);
+    apply(compiler: WebpackCompiler): void;
+}
+
+export { FoxlightWebpackPlugin, type FoxlightWebpackPluginOptions };

package/dist/plugins/webpack-plugin.js

@@ -0,0 +1,7 @@
+import {
+  FoxlightWebpackPlugin
+} from "../chunk-LMLCG5N6.js";
+import "../chunk-NAMHCMIC.js";
+export {
+  FoxlightWebpackPlugin
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@foxlight/bundle",
+  "version": "0.1.0",
+  "description": "Bundle size analysis for Foxlight — Vite and Webpack plugins for per-component size tracking.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/plugins/vite-plugin.d.ts",
+      "import": "./dist/plugins/vite-plugin.js"
+    },
+    "./webpack": {
+      "types": "./dist/plugins/webpack-plugin.d.ts",
+      "import": "./dist/plugins/webpack-plugin.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@foxlight/core": "*"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0",
+    "webpack": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "author": "Jose Cruz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/josegabrielcruz/foxlight.git",
+    "directory": "packages/bundle"
+  },
+  "homepage": "https://github.com/josegabrielcruz/foxlight/tree/master/packages/bundle#readme",
+  "bugs": {
+    "url": "https://github.com/josegabrielcruz/foxlight/issues"
+  },
+  "keywords": [
+    "foxlight",
+    "bundle-size",
+    "vite-plugin",
+    "webpack-plugin",
+    "performance"
+  ]
+}