@uniview/react-renderer

The react-renderer package provides a custom React reconciler that produces serializable tree structures instead of DOM nodes.

Installation

pnpm add @uniview/react-renderer react

Basic Usage

import {
  render,
  createRenderBridge,
  serializeTree,
  HandlerRegistry
} from "@uniview/react-renderer";

// Create handler registry
const registry = new HandlerRegistry();

// Create render bridge
const bridge = createRenderBridge();

// Subscribe to tree updates
bridge.subscribe((root) => {
  if (root) {
    const tree = serializeTree(root, registry);
    console.log('Tree updated:', tree);
  }
});

// Render your React app
render(<App />, bridge);

HandlerRegistry

Manages the mapping between event handler functions and their IDs:

import { HandlerRegistry } from "@uniview/react-renderer";

const registry = new HandlerRegistry();

// Register a handler
const id = registry.register(() => console.log("clicked"));
// Returns something like "h_abc123"

// Execute by ID
await registry.execute(id, ["arg1", "arg2"]);

// Clear all handlers (on plugin destroy)
registry.clear();

serializeTree

Converts the internal tree to protocol-compliant UINode:

import { serializeTree } from "@uniview/react-renderer";

bridge.subscribe((root) => {
  const tree = serializeTree(root, registry);
  // tree is now JSON-serializable
  // - Functions replaced with handler IDs
  // - Props validated for serializability
});

Internal Types

// In-memory tree node (before serialization)
interface InternalNode {
  id: string;
  type: string;
  props: Record<string, unknown>;
  children: (InternalNode | TextNode)[];
  parent: InternalNode | null;
}

// Text content node
interface TextNode {
  _isTextNode: true;
  text: string;
}

The reconciler has no DOM dependencies. It works in Web Workers, Node.js, Deno, and Bun.

How It Works

React calls reconciler with element tree
Reconciler creates InternalNode for each element
Event handlers stored in HandlerRegistry
serializeTree() produces JSON-safe UINode
UINode sent to host via RPC