JavaScript Bundlers: An Advanced Architecture

// A bundler performs these phases:
// 1. Entry Resolution  -> Find the starting module(s)
// 2. Dependency Graph   -> Recursively resolve all imports
// 3. Transform          -> Compile/transpile each module
// 4. Chunk Splitting    -> Group modules into output chunks
// 5. Code Generation    -> Produce final JavaScript output
// 6. Optimization       -> Minify, tree shake, scope hoist
 
// Simplified pipeline representation
class BundlerPipeline {
  constructor(config) {
    this.entry = config.entry;
    this.output = config.output;
    this.plugins = config.plugins || [];
    this.loaders = config.loaders || [];
  }
 
  async build() {
    // Phase 1: Resolve entry
    const entryModule = await this.resolve(this.entry);
 
    // Phase 2: Build dependency graph
    const graph = await this.buildGraph(entryModule);
 
    // Phase 3: Transform modules
    const transformed = await this.transformAll(graph);
 
    // Phase 4: Split into chunks
    const chunks = this.splitChunks(transformed);
 
    // Phase 5: Generate output
    const output = this.generate(chunks);
 
    // Phase 6: Optimize
    return this.optimize(output);
  }
}

class ModuleResolver {
  constructor(options = {}) {
    this.extensions = options.extensions || [".js", ".jsx", ".ts", ".tsx"];
    this.aliases = options.alias || {};
    this.mainFields = options.mainFields || ["module", "main"];
  }
 
  resolve(specifier, fromFile) {
    // Step 1: Check aliases
    for (const [alias, target] of Object.entries(this.aliases)) {
      if (specifier === alias || specifier.startsWith(alias + "/")) {
        specifier = specifier.replace(alias, target);
        break;
      }
    }
 
    // Step 2: Relative imports (./foo, ../bar)
    if (specifier.startsWith(".")) {
      return this.resolveRelative(specifier, fromFile);
    }
 
    // Step 3: Bare specifiers (node_modules)
    return this.resolvePackage(specifier, fromFile);
  }
 
  resolveRelative(specifier, fromFile) {
    const dir = path.dirname(fromFile);
    const base = path.join(dir, specifier);
 
    // Try exact path
    if (fs.existsSync(base) && fs.statSync(base).isFile()) {
      return base;
    }
 
    // Try with extensions
    for (const ext of this.extensions) {
      const withExt = base + ext;
      if (fs.existsSync(withExt)) return withExt;
    }
 
    // Try as directory with index file
    for (const ext of this.extensions) {
      const indexPath = path.join(base, `index${ext}`);
      if (fs.existsSync(indexPath)) return indexPath;
    }
 
    throw new Error(`Cannot resolve: ${specifier} from ${fromFile}`);
  }
 
  resolvePackage(specifier, fromFile) {
    const parts = specifier.split("/");
    const packageName = specifier.startsWith("@")
      ? parts.slice(0, 2).join("/")
      : parts[0];
    const subpath = parts.slice(packageName.split("/").length).join("/");
 
    // Walk up directories to find node_modules
    let dir = path.dirname(fromFile);
    while (dir !== path.dirname(dir)) {
      const pkgDir = path.join(dir, "node_modules", packageName);
      if (fs.existsSync(pkgDir)) {
        if (subpath) {
          return this.resolveRelative("./" + subpath, path.join(pkgDir, "index.js"));
        }
 
        // Read package.json for entry point
        const pkgJson = JSON.parse(
          fs.readFileSync(path.join(pkgDir, "package.json"), "utf8")
        );
 
        // Check exports map first (modern packages)
        if (pkgJson.exports) {
          return this.resolveExportsMap(pkgDir, pkgJson.exports);
        }
 
        // Fallback to mainFields
        for (const field of this.mainFields) {
          if (pkgJson[field]) {
            return path.join(pkgDir, pkgJson[field]);
          }
        }
 
        return path.join(pkgDir, "index.js");
      }
      dir = path.dirname(dir);
    }
 
    throw new Error(`Package not found: ${packageName}`);
  }
 
  resolveExportsMap(pkgDir, exports) {
    if (typeof exports === "string") {
      return path.join(pkgDir, exports);
    }
 
    // Check conditions: import > module > default
    const conditions = ["import", "module", "default"];
    const entry = exports["."] || exports;
 
    for (const condition of conditions) {
      if (entry[condition]) {
        return path.join(pkgDir, entry[condition]);
      }
    }
 
    return path.join(pkgDir, "index.js");
  }
}

class DependencyGraph {
  constructor(resolver) {
    this.resolver = resolver;
    this.modules = new Map();
    this.edges = new Map();
  }
 
  async build(entryPath) {
    const queue = [entryPath];
    const visited = new Set();
 
    while (queue.length > 0) {
      const currentPath = queue.shift();
      if (visited.has(currentPath)) continue;
      visited.add(currentPath);
 
      const source = fs.readFileSync(currentPath, "utf8");
      const imports = this.extractImports(source);
 
      const resolvedDeps = [];
      for (const imp of imports) {
        try {
          const resolved = this.resolver.resolve(imp.specifier, currentPath);
          resolvedDeps.push({
            ...imp,
            resolvedPath: resolved,
          });
          queue.push(resolved);
        } catch (error) {
          console.warn(`Failed to resolve: ${imp.specifier} from ${currentPath}`);
        }
      }
 
      this.modules.set(currentPath, {
        path: currentPath,
        source,
        imports: resolvedDeps,
      });
 
      this.edges.set(
        currentPath,
        resolvedDeps.map((d) => d.resolvedPath)
      );
    }
 
    return this;
  }
 
  extractImports(source) {
    const imports = [];
 
    // Static imports
    const staticPattern =
      /import\s+(?:\{[^}]+\}|\*\s+as\s+\w+|\w+)?\s*(?:,\s*\{[^}]+\})?\s*from\s+['"]([^'"]+)['"]/g;
    let match;
    while ((match = staticPattern.exec(source)) !== null) {
      imports.push({ specifier: match[1], type: "static" });
    }
 
    // Dynamic imports
    const dynamicPattern = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
    while ((match = dynamicPattern.exec(source)) !== null) {
      imports.push({ specifier: match[1], type: "dynamic" });
    }
 
    return imports;
  }
 
  getModuleOrder() {
    // Topological sort
    const result = [];
    const visited = new Set();
    const visiting = new Set();
 
    const visit = (modulePath) => {
      if (visited.has(modulePath)) return;
      if (visiting.has(modulePath)) return; // Circular dependency
 
      visiting.add(modulePath);
      const deps = this.edges.get(modulePath) || [];
      deps.forEach((dep) => visit(dep));
      visiting.delete(modulePath);
      visited.add(modulePath);
      result.push(modulePath);
    };
 
    for (const modulePath of this.modules.keys()) {
      visit(modulePath);
    }
 
    return result;
  }
 
  getStats() {
    return {
      totalModules: this.modules.size,
      totalEdges: [...this.edges.values()].reduce((s, e) => s + e.length, 0),
      entryPoints: [...this.modules.keys()].filter(
        (p) => ![...this.edges.values()].flat().includes(p)
      ).length,
    };
  }
}

class TransformPipeline {
  constructor() {
    this.transforms = [];
  }
 
  use(test, transform) {
    this.transforms.push({ test, transform });
    return this;
  }
 
  async process(modulePath, source) {
    let result = { code: source, map: null };
 
    for (const { test, transform } of this.transforms) {
      if (test(modulePath)) {
        result = await transform(result.code, modulePath);
      }
    }
 
    return result;
  }
}
 
// Usage
const pipeline = new TransformPipeline();
 
pipeline
  .use(
    (path) => path.endsWith(".ts"),
    async (code, path) => {
      // TypeScript compilation
      const ts = require("typescript");
      const result = ts.transpileModule(code, {
        compilerOptions: {
          module: ts.ModuleKind.ESNext,
          target: ts.ScriptTarget.ES2020,
          sourceMap: true,
        },
        fileName: path,
      });
      return { code: result.outputText, map: result.sourceMapText };
    }
  )
  .use(
    (path) => /\.(js|jsx)$/.test(path),
    async (code, path) => {
      // Babel transformation
      const babel = require("@babel/core");
      const result = await babel.transformAsync(code, {
        filename: path,
        presets: [["@babel/preset-env", { modules: false }]],
        sourceMaps: true,
      });
      return { code: result.code, map: result.map };
    }
  );

class PluginSystem {
  constructor() {
    this.hooks = {
      beforeBuild: [],
      afterResolve: [],
      beforeTransform: [],
      afterTransform: [],
      beforeChunk: [],
      afterChunk: [],
      beforeEmit: [],
      afterEmit: [],
    };
  }
 
  registerPlugin(plugin) {
    for (const [hookName, handler] of Object.entries(plugin.hooks || {})) {
      if (this.hooks[hookName]) {
        this.hooks[hookName].push(handler);
      }
    }
  }
 
  async runHook(hookName, context) {
    for (const handler of this.hooks[hookName]) {
      const result = await handler(context);
      if (result !== undefined) {
        context = result;
      }
    }
    return context;
  }
}
 
// Example plugin: Bundle Analyzer
const bundleAnalyzerPlugin = {
  name: "bundle-analyzer",
  hooks: {
    afterChunk(context) {
      const report = {};
      for (const chunk of context.chunks) {
        report[chunk.name] = {
          modules: chunk.modules.length,
          sizeKB: (chunk.code.length / 1024).toFixed(1),
        };
      }
      console.table(report);
      return context;
    },
  },
};
 
// Example plugin: Environment Variables
const envPlugin = {
  name: "env-replace",
  hooks: {
    beforeTransform(context) {
      context.code = context.code.replace(
        /process\.env\.(\w+)/g,
        (match, key) => JSON.stringify(process.env[key] || "")
      );
      return context;
    },
  },
};

// HMR consists of:
// 1. Server: watches files, builds updates, pushes via WebSocket
// 2. Client Runtime: receives updates, swaps modules in memory
// 3. Module API: accept/decline/dispose handlers
 
// Simplified HMR client runtime
class HMRRuntime {
  constructor(wsUrl) {
    this.modules = new Map();
    this.acceptHandlers = new Map();
    this.disposeHandlers = new Map();
    this.ws = new WebSocket(wsUrl);
 
    this.ws.onmessage = (event) => {
      const update = JSON.parse(event.data);
      this.applyUpdate(update);
    };
  }
 
  register(moduleId, factory) {
    this.modules.set(moduleId, {
      factory,
      exports: {},
      hot: {
        accept: (handler) => {
          this.acceptHandlers.set(moduleId, handler);
        },
        dispose: (handler) => {
          this.disposeHandlers.set(moduleId, handler);
        },
      },
    });
  }
 
  async applyUpdate(update) {
    const { moduleId, newCode } = update;
 
    // Step 1: Run dispose handler for old module
    const disposeHandler = this.disposeHandlers.get(moduleId);
    if (disposeHandler) {
      disposeHandler();
    }
 
    // Step 2: Create new module factory
    const newFactory = new Function("module", "exports", "require", newCode);
 
    // Step 3: Check if module self-accepts
    const acceptHandler = this.acceptHandlers.get(moduleId);
 
    if (acceptHandler) {
      // Module handles its own update
      const mod = this.modules.get(moduleId);
      mod.factory = newFactory;
      mod.exports = {};
      newFactory(mod, mod.exports, this.require.bind(this));
      acceptHandler(mod.exports);
      console.log(`[HMR] Updated: ${moduleId}`);
    } else {
      // Bubble up to parent that accepts
      console.log(`[HMR] Full reload needed for: ${moduleId}`);
      location.reload();
    }
  }
 
  require(moduleId) {
    const mod = this.modules.get(moduleId);
    if (!mod) throw new Error(`Module not found: ${moduleId}`);
    return mod.exports;
  }
}