React × Compose Interop Roadmap

Goal: eliminate dangerous assumptions before writing the kernel.

• Build tiny probes for react-reconciler HostConfig lifecycle: create, append, insert, remove, update, commit.
• Build tiny Compose custom Applier sample that emits mutations into a fake tree.
• Read React Native Fabric concepts: ShadowTree, ShadowNode, surface, mounting, JSI, codegen.
• Define forbidden dependencies: no private Fiber field coupling, no SlotTable assumptions, no renderer-specific public APIs.
• Decide initial platform target: Android first, then iOS/Desktop, then Web.

Goal: build the canonical retained tree with stable identity and fast mutation.

@JvmInline value class NodeId(val raw: Long)

data class HostNode(
    val id: NodeId,
    var type: HostType,
    var parent: NodeId?,
    val children: ChildBuffer<NodeId>,
    var propsRef: PropsRef,
    var eventRef: EventRef?,
    var owner: BoundaryId,
    var flags: DirtyFlags
)

• Implement NodeId as index + generation to detect stale handles.
• Implement arena/slab storage with free list and generation counter.
• Implement adaptive child storage: empty, inline small array, gap buffer, chunked vector.
• Implement structural invariants: no cycles, valid parent pointers, boundary ownership.
• Implement immutable TreeSnapshot view for tooling and tests.
• Implement TreeVisitor and TreeDiff primitives.

Goal: make React, Compose, Blueprint, and server UI all speak the same low-level operation language.

sealed interface TreeOp {
    data class CreateNode(val id: NodeId, val type: HostType) : TreeOp
    data class InsertChild(val parent: NodeId, val child: NodeId, val index: Int) : TreeOp
    data class MoveChild(val parent: NodeId, val from: Int, val to: Int, val count: Int) : TreeOp
    data class RemoveChild(val parent: NodeId, val index: Int, val count: Int) : TreeOp
    data class UpdateProps(val id: NodeId, val patch: PropsPatch) : TreeOp
    data class DeleteNode(val id: NodeId) : TreeOp
}

• Implement TreeMutationBatch with validation, compaction, and deterministic application order.
• Support frame transactions: begin, append ops, validate, commit, publish TreeCommit.
• Add op coalescing: repeated prop updates collapse; remove+insert can become move where safe.
• Add debug-mode invariant checks and release-mode fast path.
• Design binary encoding path, initially simple; leave room for FlatBuffers/FlexBuffers later.

Goal: prove Compose can author into the Reaktor HostTree.

class ReaktorApplier(
    root: ReaktorComposeNode,
    private val buffer: MutationBuffer
) : AbstractApplier<ReaktorComposeNode>(root) {

    override fun insertTopDown(index: Int, instance: ReaktorComposeNode) {
        buffer.insert(current.nodeId, instance.nodeId, index)
    }

    override fun remove(index: Int, count: Int) {
        buffer.remove(current.nodeId, index, count)
    }

    override fun move(from: Int, to: Int, count: Int) {
        buffer.move(current.nodeId, from, to, count)
    }

    override fun onClear() {
        buffer.clearBoundary(current.boundaryId)
    }
}

• Create primitive composables: RText, RBox, RRow, RColumn, RButton.
• Map composable calls to HostType + props + events.
• Support keys and boundary identity explicitly.
• Validate recomposition produces minimal op sequences.
• Build an Android demo where Compose-authored Reaktor UI updates the HostTree.

Goal: render HostTree through Compose while keeping ShadowTree as the renderer-facing derived structure.

• Define ShadowNode: source id, resolved style, layout box, dirty flags, event mask, renderer handle.
• Implement dirty propagation: structure, props, style, measure, layout, paint, semantics, events.
• Build Compose renderer for common primitives.
• Keep actual text input and platform components delegated to Compose initially.
• Expose snapshot inspection for visualizer/debug tools.

Goal: React components commit into the same HostTree through a custom renderer.

type ReaktorHostInstance = {
  nodeId: number
  boundaryId: number
  type: string
}

const hostConfig = {
  createInstance(type, props, root, hostContext) {
    const id = ids.next()
    buffer.create(id, type)
    buffer.updateProps(id, encodeProps(type, props))
    return { nodeId: id, boundaryId: root.boundaryId, type }
  },

  appendChild(parent, child) {
    buffer.insert(parent.nodeId, child.nodeId, parent.childCount++)
  },

  commitUpdate(instance, updatePayload, type, oldProps, newProps) {
    buffer.updateProps(instance.nodeId, encodePatch(type, oldProps, newProps))
  }
}

• Start with a local JS-only renderer committing into a Kotlin/JVM or TS HostTree test implementation.
• Move to Android via JSI/TurboModule-style bridge after lifecycle is stable.
• Batch all host mutations until commit boundary; avoid per-op native calls.
• Support text nodes, prop diffing, event refs, refs, boundary roots, and unmount cleanup.
• Build demo: React-authored card rendered by Compose renderer through Reaktor HostTree.

Goal: replace slow JS/native serialization with a compact batched commit path.

• Implement C++/Kotlin native runtime boundary for mutation batches.
• Represent batch as ArrayBuffer or FlatBuffer-backed payload.
• Use generated prop encoders for hot primitives.
• Use opaque event handler ids instead of passing callbacks through every node.
• Build bidirectional event batch: native hit-test → event queue → JS/Compose owner boundary.
• Measure JSI commit overhead vs classic bridge-like JSON batch.

Goal: let React and Compose coexist safely in one tree.

• Implement RuntimeBoundary: owner, root node, scheduler, event sink, resource scope.
• Implement event delegation through ShadowTree hit-testing and EventRef routing.
• Implement shared StateCell abstraction for durable shared state.
• Support React island inside Compose parent and Compose island inside React parent.
• Forbid structural mutation across boundary ownership unless mediated by explicit commands.

Goal: coordinate cross-runtime work without pretending React and Compose have one scheduler.

enum class ReaktorPriority {
    ImmediateInput,
    Animation,
    VisibleUi,
    BackgroundUi,
    Data,
    Idle
}

• Map React-originated commits to Reaktor priorities.
• Map Compose invalidations/frame updates to Reaktor priorities.
• Introduce frame scheduler: input → animation → visible UI → background UI → data → idle.
• Add backpressure: large React batch should not starve input or animation work.
• Add offscreen/precompute support for hidden screens and upcoming routes.

Goal: turn Reaktor’s runtime tree into a product moat.

• Expose HostTree + ShadowTree snapshots through a debugger protocol.
• Show owner boundary, NodeId, props schema, dirty flags, layout bounds, event refs, and state dependencies.
• Export trace events compatible with Perfetto-style timelines.
• Build Blueprint editor integration: selected graph node maps to rendered bounds.
• Build AI-agent diff format: typed graph/tree commands, not text patches.

Goal: make it usable without exposing the internal complexity.

• Publish stable primitive set: layout, text, image, button, input, list, surface, navigation, modal.
• Create docs for authoring in Compose, authoring in React, and mixed ownership islands.
• Add migration guide for Reaktor apps: native Compose first, React dynamic islands second.
• Write a “performance contract” page documenting what is stable, internal, and experimental.
• Build sample apps: chat screen, feed, form builder, visual editor, dynamic campaign card.