All projects

Developer Tool / Bundler

NGAPACK

A lightweight experimental JavaScript bundler focusing on semantic correctness, deterministic output, and runtime-oriented module loading. Preserves native ESM semantics while validating runtime behavior.

  • TypeScript
  • JavaScript
  • ESM
  • Bundler
NGAPACK interface
NGAPACK — lightweight JavaScript bundler with namespace isolation.

Overview

A bundler focused on correctness over aggressive optimization.

NGAPACK avoids aggressive build-time transformations. Instead, it focuses on preserving native ESM semantics, validating how code behaves in the browser, and making bundler internals inspectable.

The project serves as both a learning tool and a practical bundler for specific use cases.

The problem

Modern bundlers prioritize optimization over correctness.

Modern bundlers often prioritize optimization over correctness, making debugging difficult. Developers learning bundler internals have few readable, minimal implementations to study.

  • Aggressive optimizations can break code that relies on ESM semantics.
  • Bundler internals are opaque and hard to debug.
  • Few minimal implementations exist for learning purposes.

Approach

Four-phase pipeline with namespace-based module isolation.

Built a four-phase pipeline: analyze (static module parsing), graph (dependency graph construction), emit (output generation), and runtime (browser helpers). Introduced namespace-based module isolation.

The approach prioritizes inspectability and correctness at every phase of the bundling process.

Solution

Separated analyzer from orchestrator with injected runtime helpers.

Separated analyzer (pure, side-effect free) from orchestrator (graph + emit). Injected browser-only runtime helpers for module registry, dynamic loading, and CSS module application. Namespaces prevent module identity collisions.

This separation makes each phase independently testable and the overall system easier to understand.

NGAPACK architecture diagram
Four-phase pipeline with namespace-based module isolation.

Implementation

Technical implementation.

Built with TypeScript using native ESM, the bundler performs static analysis without side effects and provides a readable end-to-end implementation.

Pipeline

Analyze, graph, emit, runtime phases with clear separation of concerns.

Isolation

Namespace-based module isolation preventing identity collisions.

Testing

Integration test suite executed in browser-like runtime.

Results

What changed.

The experimental bundler achieved its goals of correctness, determinism, and inspectability.

Deterministicbundle output verified by tests
Namespaceisolation verified by integration tests
Readableend-to-end implementation for learning

Links

Let's work together

Have a problem worth solving?

Let's talk about your project, technical challenge, or next idea.

Get in touch