v1 — cd demo/v1 && npm install && npm start → http://localhost:8080
v2 / v3 — cd demo/v3 && npm install && npm run dev → https://localhost:8080
HTTPS is required (HTTP/2). Accept the self-signed certificate warning. If the
page fails to load, run npm install inside node_modules/modulizer and
node_modules/replay manually.
For developers who use React or Vue but treat them as black boxes, we want to demonstrate that the core mechanisms are not magic. Reactivity, incremental DOM, SSR, and code splitting are each a solution to a specific, well-defined problem — and each solution fits in a few hundred lines.
A fully functional demo. The demo is a Gmail-like mail client — routing, lazy-loaded threads, drag-and-drop, a rich text editor — running on the framework implemented here. The purpose is to show that a from-scratch implementation can support a realistic application, not just a contrived example. If you can read the entire framework source and watch it run something non-trivial, the demystification is complete.
The dependency graph has stored properties as sources, component instances as sinks, and computed properties as intermediate nodes. When a source is accessed during a derivation, the currently-executing derivation is implicitly registered as a dependent. Mutations then invalidate all derived data reachable downstream.
The subscriptions are one-shot, analogous to long-polling: an observer watches for invalidation of its current value rather than for the arrival of a new one, so it only needs to fire once before being re-registered on the next read. No explicit unsubscription is required.
Rather than diffing two virtual DOM trees, the renderer walks the component tree directly against the live DOM. Each render function is a sequence of "step into / step over / step out" operations that advance a cursor through the live tree. On first render the cursor inserts nodes; on re-render it updates in place or removes them. No intermediate tree is allocated.
The dev server (modulizer) serves each source file as a native ES module,
transforming it on demand: JSX is compiled, TypeScript is stripped, CSS is
injected as a <link>, and CommonJS modules are wrapped. No bundling occurs
during development. At build time, the static import graph is traced and
partitioned into vendor, common, and async chunks.