DOCS / INTERNALS
Architecture
One render cycle, end to end: React commits a change → the reconciler’s host config serializes it as mutation ops → the JSON batch crosses the C bridge → the shadow tree applies it, Yoga recomputes layout, and the painter repaints the dirty region. Events travel the other way: JUCE mouse events hit-test into the tree and dispatch to JS listeners.
The mutation protocol
| OP | SHAPE |
|---|---|
create | ["create", id, type] — vs-view, vs-text, vs-image, vs-textinput, vs-native |
setProps | ["setProps", id, {style, hoverStyle, activeStyle, …}] — resolved styles, listener flags, text, scrollTop |
appendChild / insertBefore / removeChild | Tree mutations, mirroring the reconciler exactly |
setText | ["setText", id, value] |
clearContainer | Root unmount |
Ops are batched per React commit and flushed once — a full remount of the StashTrack UI is a single bridge crossing, not hundreds.
The engine
The engine is QuickJS-ng — a complete ES2023 interpreter around one megabyte, running in-process on the message thread. Timers (setTimeout, setInterval) are provided by the native scheduler; promise rejections and uncaught exceptions route to the error overlay. There is no JIT, and there doesn’t need to be: JS runs only when your components render, and everything hot (layout, painting, hover) is C++.
Layout & painting
Yoga v2 provides the exact flexbox semantics React Native uses, so layout intuition transfers directly. The shadow tree owns one Yoga node per element; text nodes install measure functions so type sets its own size. The painter walks the laid-out tree with juce::Graphics: fills, borders, corner radii, shadows, knob arcs, glyph runs, scroll clipping. Hosted components (NativeView, TextInput) are real JUCE children positioned from layout results and visibility-synced with painted opacity.
The C bridge
Five host functions are all that connect the two worlds: __vsreact_flush (ops out), __vsreact_dispatch (events in), __vsreact_nativeCall (synchronous app calls), __vsreact_setTimer/clearTimer (scheduler), and __vsreact_log (console). Everything else — components, styling, parameters — is built on top of those in TypeScript and C++.