Architecture

Tracker decides something changed

packages/dom-tracker/src/Tracker.ts

A MutationObserver watches childList, attributes, characterData and subtree. Each record contributes bits to pendingMask:

Structural changes flush immediately; everything else waits on a 200 ms debounce, which collapses a burst of edits into one extraction.

renderLoop then fires five hook sets in order: onBeforeRender, onLayoutChange (only if dirty), onScrollChange, onStyleChange, onRender.

Syncer wires hooks to work

packages/core/src/core/Syncer.ts

Syncer owns no loop of its own — it is the adapter between tracker hooks and renderer calls.

tracker.onLayoutChange.add((mask, deletions) => {
  renderer.updateScroll();
  const graph = extractSceneGraph(target, mask, USER_LAYER, /* … */ ctx);
  renderer.syncScene(graph, deletions);
  renderer.saveInitialLocals(sharedArray);
});
 
tracker.onStyleChange.add((styles) => animateMeshByData(registry, styles, sharedArray));
 
tracker.onRender.add(() => {
  renderer.updateScroll();
  wasmSync.updatePhysics(lastNodeCount);
  renderer.syncMeshesByWasm(sharedArray);
  renderer.render();
});

Extractor flattens the DOM

packages/core/src/dom/Extractor.ts

One recursive function, extractSceneGraph, produces the SceneNode tree. Per node it:

• reads getBoundingClientRect() and getComputedStyle()
• parses data-mirage-filter / -select into visibility bits
• parses data-mirage-travel into isTraveler, captureLayer, nativeLayer and native style overrides
• parses data-mirage-shader into ShaderHooks
• resolves imageSrc for <img>, inline-serialized <svg>, or background-image
• splits text nodes into per-line boxes with Range.getClientRects()
• assigns wasmIndex and writes [parent, localX, localY] into shared memory

Because parents are visited before children, the shared array comes out in topological order — which is what lets the WASM pass resolve in one sweep.

Renderer reconciles meshes

packages/core/src/renderer/Renderer.ts

syncScene detects resize/move, then calls reconcileNode recursively:

• look up the mesh in MeshRegistry by element
• if the shader hash changed, dispose and rebuild
• otherwise update scale, position, layers and material uniforms
• TEXT nodes go through reconcileTextChild, which rebuilds one child mesh per line when content or style changed
• register/unregister image textures with TextureLifecycleManager

Deleted elements arrive in pendingDeletions and their meshes, geometries, materials and textures are disposed.

WASM resolves positions

packages/wasm-compute/src/lib.rs

for i in 0..node_count {
    let offset = i * 5;
    let parent = buffer[offset];
    if parent >= 0.0 {
        let p = parent as usize * 5;
        buffer[offset + 3] = buffer[p + 3] + buffer[offset + 1];
        buffer[offset + 4] = buffer[p + 4] + buffer[offset + 2];
    } else {
        buffer[offset + 3] = buffer[offset + 1];
        buffer[offset + 4] = buffer[offset + 2];
    }
}

syncMeshesByWasm then reads world coordinates and converts them to WebGL space, applying scroll offset (skipped for position: fixed meshes).

Render

Travelers first: for each layer, the camera switches to capture channel 31 - n, a scissor box is set per traveler, and the scene renders into that layer's WebGLRenderTarget. Then the camera returns to base and the visible frame is drawn, with per-mesh scissor hooks applied for overflow: hidden clipping.