React Integration Module

New module com.top_logic.layout.react that enables React-based UI controls in TopLogic with server-to-client state updates delivered via Server-Sent Events (SSE).

This enables incremental migration from server-rendered HTML controls to client-rendered React controls, while both types coexist and update together within the same page.

Components

Wire Protocol (msgbuf)

sse.proto defines the SSE event hierarchy using msgbuf:

• StateEvent / PatchEvent - full state replacement and incremental patches for React controls
• ContentReplacement / ElementReplacement / RangeReplacement / FragmentInsertion - DOM mutations for non-React controls
• PropertyUpdate / CssClassUpdate - attribute and class updates
• JSSnipplet / FunctionCall - JavaScript execution

Server-Side Java

• ReactControl - mounts a React component via TLReact.mount(), delivers state via SSE
• ReactFormFieldControl - form field variant with ValueChanged command handling
• SSEUpdateQueue - per-session event queue with AsyncContext connections
• ClientActionConverter - converts existing ClientAction objects to SSE protocol events, enabling non-React controls to participate in SSE delivery
• ReactComponentRegistry - ConfiguredManagedClass mapping TopLogic model types to React component modules
• SSEServlet - /react-api/events endpoint establishing SSE connections
• ReactServlet - /react-api/command and /react-api/state endpoints for client-to-server communication

TypeScript/React Client

Bridge library (tl-react-bridge.js) built with Vite/React:

• Component registry with register() / getComponent()
• SSE client with automatic reconnect and DOM action processing
• React hooks: useTLState(), useTLCommand(), useTLFieldValue()
• MutationObserver-based auto-unmount
• 6 built-in controls: TLTextInput, TLNumberInput, TLDatePicker, TLSelect, TLCheckbox, TLTable

tl-core Modifications

Added public accessors to ClientAction subclasses to enable the converter:

• DOMModification.getFragment()
• RangeReplacement.getStopID()
• JSSnipplet.getCode() and JSSnipplet.getCodeFragment()

Open TODOs

• ReactServlet.handleCommand(): full control resolution via FrameScope / subsession locking
• ReactFormFieldControl: incremental SSE patches instead of full repaint on field changes