@decky.fx/raven-tsx 0.0.0-stage → 0.1.0

package/src/core/window-instance.ts

@@ -0,0 +1,256 @@
+import * as r from "./raven";
+import { RavenError } from "./errors";
+import { closeEvents, WINDOW_EVENTS } from "./events";
+import type { EventHandler } from "./props";
+import { escapeXml, resolveProps, type RavenProps, type ResolvedProps } from "./props";
+import { WidgetInstance, type HostNode } from "./widget-instance";
+
+/** Where the widgets of a window go. Its size is the size of the window. */
+export const CONTENT_NAME = "raven-tsx.content";
+
+/** What each way of writing `Backdrop` means, as the XML loader reads it. */
+const BACKDROPS: Readonly<Record<string, r.RBackdrop>> = {
+	None: r.R_BACKDROP_NONE,
+	Opaque: r.R_BACKDROP_NONE,
+	Transparent: r.R_BACKDROP_TRANSPARENT,
+	Blur: r.R_BACKDROP_BLUR,
+	Acrylic: r.R_BACKDROP_ACRYLIC,
+	Mica: r.R_BACKDROP_MICA,
+};
+
+/** What a window can take while it is open, by calling Raven. */
+const SET_ON_OPEN_WINDOW: Readonly<Record<string, (window: r.Rid, value: string) => void>> = {
+	Title: (window, value) => r.Rwindow_set_title(window, value),
+	Theme: (window, value) => void r.Rwindow_set_theme(window, value),
+	Backdrop: (window, value) => {
+		const backdrop = BACKDROPS[value];
+		if (backdrop === undefined || !r.Rwindow_set_backdrop(window, backdrop)) {
+			console.warn(`raven-tsx: <Window> did not take Backdrop="${value}": it needs Transparent, and a window system that does it`);
+		}
+	},
+	Opacity: (window, value) => {
+		if (!r.Rwindow_set_opacity(window, Number(value))) {
+			console.warn("raven-tsx: this window system cannot make a window see-through with Opacity");
+		}
+	},
+	ContinuousRedraw: (window, value) => r.Rwindow_set_continuous_redraw(window, value === "true" ? r.R_TRUE : r.R_FALSE),
+};
+
+/** What the XML of a window does not take: it is set by calling Raven, once the window is there. */
+const NOT_IN_XML: ReadonlySet<string> = new Set(["Opacity", "ContinuousRedraw"]);
+
+/**
+ * Makes a window from attributes, with a place for widgets. That place is an `Overlay`, as for the
+ * content of a window in C: a child fills the window and follows its `Slot`. A `VBox` would not let
+ * it, and children that should stack go in one.
+ */
+export function makeWindow(attributes: ReadonlyMap<string, string>): { window: r.Rid; content: r.Rid } {
+	const text = [...attributes].filter(([name]) => !NOT_IN_XML.has(name)).map(([name, value]) => `${name}="${escapeXml(value)}"`).join(" ");
+	const window = r.Rwindow_create_from_xml(`<Window ${text}><Overlay Name="${CONTENT_NAME}"/></Window>`);
+	if (window === r.R_INVALID_ID) {
+		RavenError.fromLibrary("Raven cannot make the window");
+	}
+	for (const [name, value] of attributes) {
+		if (NOT_IN_XML.has(name)) {
+			SET_ON_OPEN_WINDOW[name]?.(window, value);
+		}
+	}
+	return { window, content: r.Rwidget_find(window, CONTENT_NAME) };
+}
+
+/** Sets or removes the events of a window, from what its props say now. */
+function setWindowEvents(window: r.Rid, handlers: ReadonlyMap<string, EventHandler>): void {
+	for (const [name, event] of Object.entries(WINDOW_EVENTS)) {
+		const handler = handlers.get(name);
+		if (handler) {
+			event.on(window, handler);
+		} else {
+			event.off(window, true);
+		}
+	}
+}
+
+/**
+ * A `<Window>` under a framework, and what a `ref` receives. It holds widgets but stands by itself:
+ * it can be anywhere in the tree, and goes away when its element does. It opens once it is placed:
+ * a render the framework throws away opens nothing.
+ */
+export class WindowInstance implements HostNode {
+	readonly tag = "Window";
+	readonly nativeWidget = null;
+	private id: r.Rid = r.R_INVALID_ID;
+	/** Where its widgets go, once it is open. */
+	private content: WidgetInstance | null = null;
+	/** The children rendered with it, which go in when it opens. */
+	private readonly initial: HostNode[] = [];
+	/** Its `<Island>`: it floats above the content, as in XML, and the window owns it. */
+	private island: WidgetInstance | null = null;
+	private state: "pending" | "live" | "gone" = "pending";
+
+	private constructor(private resolved: ResolvedProps) {}
+
+	/** A new window, as a framework renders it: it opens at `materialize`, with what its props say. */
+	static create<Child>(props: RavenProps<Child>): WindowInstance {
+		return new WindowInstance(resolveProps(props));
+	}
+
+	/** Raven's handle of the window, for the functions of the `raven` export: `R_INVALID_ID` until it is placed. */
+	get window(): r.Rid {
+		return this.id;
+	}
+
+	/** Opens the window, with its children. If any of it fails, the window is deleted. */
+	materialize(): void {
+		if (this.state !== "pending") {
+			return;
+		}
+		const { window, content } = makeWindow(this.resolved.attributes);
+		this.id = window;
+		this.content = WidgetInstance.forContainer(content);
+		this.state = "live";
+		try {
+			closeEvents.set(window, this.resolved.handlers.get("OnClose"));
+			setWindowEvents(window, this.resolved.handlers);
+			for (const child of this.initial.splice(0)) {
+				this.append(child);
+			}
+		} catch (error) {
+			this.forgetTree();
+			this.dispose();
+			throw error;
+		}
+	}
+
+	/** Whether the window still exists: without an `OnClose`, the user can close it at any time. */
+	get isOpen(): boolean {
+		return this.id !== r.R_INVALID_ID && r.Rwindow_is_valid(this.id) !== 0;
+	}
+
+	setParent(): void {}
+
+	applyParentAttributes(): void {}
+
+	/** What can change on a window that is open. The other attributes only count when it is made. */
+	update<Child>(props: RavenProps<Child>): void {
+		const next = resolveProps(props);
+		if (this.state === "live" && this.isOpen) {
+			this.applyChanges(next);
+		}
+		this.resolved = next;
+	}
+
+	/** Applies what changed in the props. */
+	private applyChanges(next: ResolvedProps): void {
+		const previous = this.resolved.attributes;
+		for (const [name, value] of next.attributes) {
+			if (value !== previous.get(name)) {
+				SET_ON_OPEN_WINDOW[name]?.(this.id, value);
+			}
+		}
+		const width = next.attributes.get("Width");
+		const height = next.attributes.get("Height");
+		if (width !== undefined && height !== undefined && (width !== previous.get("Width") || height !== previous.get("Height"))) {
+			r.Rwindow_set_size(this.id, Number(width), Number(height));
+		}
+		for (const [name, value] of next.attributes) {
+			if (previous.get(name) !== value && !SET_ON_OPEN_WINDOW[name] && name !== "Width" && name !== "Height") {
+				console.warn(`raven-tsx: <Window> ${name} only counts when the window is made`);
+			}
+		}
+		closeEvents.set(this.id, next.handlers.get("OnClose"));
+		setWindowEvents(this.id, next.handlers);
+	}
+
+	/** The place of its widgets: children are added and removed only once the window is placed. */
+	private get open(): WidgetInstance {
+		if (!this.content) {
+			return RavenError.throw("raven-tsx: a <Window> got a child before it was placed");
+		}
+		return this.content;
+	}
+
+	/** Makes a child the island of this window, if it is one and there is none yet. */
+	private takeIsland(child: HostNode): boolean {
+		if (child.tag !== "Island" || this.island || !(child instanceof WidgetInstance)) {
+			return false;
+		}
+		child.materialize();
+		const set = (widget: r.Rid): void => r.Rwindow_set_island(this.id, widget);
+		this.island = child;
+		child.setHolder(set);
+		set(child.widget);
+		return true;
+	}
+
+	append(child: HostNode): void {
+		if (child !== this.island && !this.takeIsland(child)) {
+			this.open.append(child);
+		}
+	}
+
+	appendInitial(child: HostNode): void {
+		if (this.state === "live") {
+			this.append(child);
+		} else {
+			this.initial.push(child);
+		}
+	}
+
+	insertBefore(child: HostNode, before: HostNode): void {
+		if (child === this.island || this.takeIsland(child)) {
+			return;
+		}
+		// (the island is not among the widgets of the content: nothing can go before it there)
+		if (before === this.island) {
+			this.open.append(child);
+		} else {
+			this.open.insertBefore(child, before);
+		}
+	}
+
+	remove(child: HostNode): void {
+		if (child !== this.island) {
+			this.open.remove(child);
+			return;
+		}
+		child.forgetTree();
+		this.island = null;
+		(child as WidgetInstance).setHolder(null);
+		if (this.isOpen) {
+			// (this deletes it: the window owns it. What it holds of registered tags is theirs)
+			(child as WidgetInstance).releaseAdopted();
+			r.Rwindow_set_island(this.id, r.R_INVALID_ID);
+		}
+		child.dispose();
+	}
+
+	forgetTree(): void {
+		if (this.state !== "live") {
+			return;
+		}
+		this.content?.forgetTree();
+		this.island?.forgetTree();
+		closeEvents.set(this.id, undefined, false);
+		for (const event of Object.values(WINDOW_EVENTS)) {
+			event.off(this.id, false);
+		}
+	}
+
+	dispose(): void {
+		const state = this.state;
+		this.state = "gone";
+		if (state !== "live") {
+			return;
+		}
+		if (this.isOpen) {
+			// (the window destroys what it holds: those of registered tags are theirs)
+			this.content?.releaseAdopted();
+			this.island?.releaseAdopted();
+		}
+		this.content?.disposeDetached();
+		this.island?.disposeDetached();
+		if (this.isOpen) {
+			r.Rwindow_destroy(this.id);
+		}
+	}
+}

package/src/react/components.generated.ts

@@ -0,0 +1,179 @@
+// Generated from the schema of Raven by src/tools/generate-components.ts: do not edit.
+import { createElement, type Key, type ReactElement, type ReactNode, type Ref } from "react";
+import type * as Props from "../core/props.generated";
+import type { WidgetInstance } from "../core/widget-instance";
+import type { WindowInstance } from "../core/window-instance";
+
+/** The props every component has from React. */
+interface ReactProps<R> {
+	readonly key?: Key | undefined;
+	readonly ref?: Ref<R> | undefined;
+	readonly children?: ReactNode | undefined;
+}
+
+/**
+ * A component for a tag of Raven, or one given to `Rxml_register_tag` with its props.
+ * JSX takes a capitalized name for a value, not for a tag.
+ */
+export function tag<P extends object, R = WidgetInstance>(name: string): (props: P & ReactProps<R>) => ReactElement {
+	return (props) => createElement(name, props);
+}
+
+/**
+ * A window of its own, wherever it is in the tree: it opens with its element and closes with it.
+ * With `OnClose`, closing is a request: the window stays until the element is taken out.
+ */
+export const Window = tag<Props.WindowProps, WindowInstance>("Window");
+
+/** Stacks its children from top to bottom. */
+export const VBox = tag<Props.VBoxProps>("VBox");
+
+/** Lines its children up from left to right. */
+export const HBox = tag<Props.HBoxProps>("HBox");
+
+/** Places its children in rows and columns (Slot.Column, Slot.Row). */
+export const Grid = tag<Props.GridProps>("Grid");
+
+/** Cells of the same size, filled in order. */
+export const UniformGrid = tag<Props.UniformGridProps>("UniformGrid");
+
+/** Puts its children on top of each other. */
+export const Overlay = tag<Props.OverlayProps>("Overlay");
+
+/** A surface with padding around one child. */
+export const Border = tag<Props.BorderProps>("Border");
+
+/** Gives one child a size or a shape. */
+export const SizeBox = tag<Props.SizeBoxProps>("SizeBox");
+
+/** Empty space. */
+export const Spacer = tag<Props.SpacerProps>("Spacer");
+
+/** Scrolls content that is larger than its place. */
+export const ScrollBox = tag<Props.ScrollBoxProps>("ScrollBox");
+
+/** Panes separated by bars the user drags. */
+export const Splitter = tag<Props.SplitterProps>("Splitter");
+
+/** Lines its children up and continues on the next line. */
+export const WrapBox = tag<Props.WrapBoxProps>("WrapBox");
+
+/** Places its children freely (Slot.Position, Slot.Size, Slot.Anchors). */
+export const Canvas = tag<Props.CanvasProps>("Canvas");
+
+/** Shows one of its children. */
+export const Switcher = tag<Props.SwitcherProps>("Switcher");
+
+/** Its children as tabs (Slot.Title). */
+export const TabView = tag<Props.TabViewProps>("TabView");
+
+/** A header that shows and hides one child. */
+export const Expander = tag<Props.ExpanderProps>("Expander");
+
+/** Text. */
+export const Label = tag<Props.LabelProps>("Label");
+
+/** A button, with a text or with one child. */
+export const Button = tag<Props.ButtonProps>("Button");
+
+/** A box to check, a radio button or a switch. */
+export const Checkbox = tag<Props.CheckboxProps>("Checkbox");
+
+/** A value chosen by dragging. */
+export const Slider = tag<Props.SliderProps>("Slider");
+
+/** How far something is. */
+export const ProgressBar = tag<Props.ProgressBarProps>("ProgressBar");
+
+/** A picture. */
+export const Image = tag<Props.ImageProps>("Image");
+
+/** One line of text to type. */
+export const TextInput = tag<Props.TextInputProps>("TextInput");
+
+/** A number to type or to step. */
+export const SpinBox = tag<Props.SpinBoxProps>("SpinBox");
+
+/** One choice in a list that drops down. */
+export const ComboBox = tag<Props.ComboBoxProps>("ComboBox");
+
+/** A line between things. */
+export const Separator = tag<Props.SeparatorProps>("Separator");
+
+/** Rows of text, one selected; any number of them. */
+export const ListView = tag<Props.ListViewProps>("ListView");
+
+/** Rows inside rows, made of Item elements. */
+export const TreeView = tag<Props.TreeViewProps>("TreeView");
+
+/** A grid of tiles, an icon over a name, given by the application (Rtile_view_set_items). */
+export const TileView = tag<Props.TileViewProps>("TileView");
+
+/** A bar of Menu elements; on macOS, shown in the menu bar of the system. */
+export const MenuBar = tag<Props.MenuBarProps>("MenuBar");
+
+/** A menu: MenuItem, Separator and Menu elements. */
+export const Menu = tag<Props.MenuProps>("Menu");
+
+/** An item of a menu. */
+export const MenuItem = tag<Props.MenuItemProps>("MenuItem");
+
+/** A place the application draws in with its own renderer. */
+export const Viewport = tag<Props.ViewportProps>("Viewport");
+
+/** A widget painted and measured by the application. */
+export const Custom = tag<Props.CustomProps>("Custom");
+
+/** Text of several lines: notes, code. */
+export const TextEditor = tag<Props.TextEditorProps>("TextEditor");
+
+/** The title bar of a window with a custom header; holds any widgets. */
+export const HeaderBar = tag<Props.HeaderBarProps>("HeaderBar");
+
+/** Folders and files to choose from. */
+export const FileBrowser = tag<Props.FileBrowserProps>("FileBrowser");
+
+/** Panels the user arranges by dragging their tabs. */
+export const DockArea = tag<Props.DockAreaProps>("DockArea");
+
+/** A pill at the top of the window that unfolds: first child folded, second unfolded. */
+export const Island = tag<Props.IslandProps>("Island");
+
+/** A panel that shows what is behind it out of focus, around one child. */
+export const BackgroundBlur = tag<Props.BackgroundBlurProps>("BackgroundBlur");
+
+/** Chooses a color: square, hues, opacity, code, numbers, swatches. */
+export const ColorPicker = tag<Props.ColorPickerProps>("ColorPicker");
+
+/** A sequencer: Track elements holding Clip and Key elements, and Marker elements. */
+export const Timeline = tag<Props.TimelineProps>("Timeline");
+
+/** Blocks that snap into each other (Scratch): Kind elements (Name, Label, Shape, Category) and Category elements (Name, Color). */
+export const BlockEditor = tag<Props.BlockEditorProps>("BlockEditor");
+
+/** Rows of cells under columns that can be resized and sorted: Column and Row elements; any number of rows. */
+export const Table = tag<Props.TableProps>("Table");
+
+/** A date, chosen in a calendar that drops down. */
+export const DatePicker = tag<Props.DatePickerProps>("DatePicker");
+
+/** A time of the day: hours, minutes, optionally seconds. */
+export const TimePicker = tag<Props.TimePickerProps>("TimePicker");
+
+/** A short message that rises over the content for a few seconds (in an Overlay). */
+export const Toast = tag<Props.ToastProps>("Toast");
+
+/** The path to the current place: links separated by chevrons. */
+export const Breadcrumb = tag<Props.BreadcrumbProps>("Breadcrumb");
+
+/** A score shown and chosen with stars. */
+export const Rating = tag<Props.RatingProps>("Rating");
+
+/** Page numbers with previous and next. */
+export const Pagination = tag<Props.PaginationProps>("Pagination");
+
+/** Curves of X / Y data: Series elements (Name, Color, Line, LineWidth, Marker, MarkerSize, MarkerFilled, Step, Fill, XAxis, Axis, MaxPoints, X and Y lists or Points "x,y x,y"), Scatter elements, and DragLine elements (Axis, Value, Label, Color). */
+export const Plot = tag<Props.PlotProps>("Plot");
+
+/** Nodes linked by wires: Node elements (Input, Output, any widget), Link and Type elements. */
+export const NodeGraph = tag<Props.NodeGraphProps>("NodeGraph");

package/src/react/hooks.ts

@@ -0,0 +1,51 @@
+import { useEffect, useLayoutEffect, useRef, type RefObject } from "react";
+import type * as r from "../core/raven";
+import type { FrameHandler } from "../core/frame";
+import { onAction, onFrame, onShortcut } from "../core/subscriptions";
+import type { WindowInstance } from "../core/window-instance";
+
+/**
+ * The function of the last commit, for a native callback to call. Not of the last render: React
+ * can throw a render away, and then its function would see state that never was.
+ */
+function useLatest<T>(value: T): RefObject<T> {
+	const latest = useRef(value);
+	useLayoutEffect(() => {
+		latest.current = value;
+	});
+	return latest;
+}
+
+/**
+ * Gives a name to a function, for what fires actions by name: `Rwidget_set_action`, the
+ * `Action` of a widget made from XML, `Raction_fire`. The function can change at each render.
+ * It receives the widget that fired the action.
+ */
+export function useAction(name: string, handler: (sender: r.Rid) => void): void {
+	const latest = useLatest(handler);
+	useEffect(() => onAction(name, (sender) => latest.current(sender)), [name]);
+}
+
+/** A keyboard shortcut of a window: `useShortcut(window, "Ctrl+S", save)`, with `window` the ref of a `<Window>`. */
+export function useShortcut(window: RefObject<WindowInstance | null>, keys: string, handler: () => void): void {
+	const latest = useLatest(handler);
+	useEffect(() => {
+		const owner = window.current;
+		if (!owner) {
+			return;
+		}
+		return onShortcut(owner.window, keys, () => latest.current());
+	}, [window, keys]);
+}
+
+/**
+ * A function called once per frame, before the layout, with the seconds since the last frame:
+ * what it changes is committed in time for that frame. It also runs when nothing is happening,
+ * about 60 times a second: `runApp` wakes that often so that Bun's timers run beside Raven, which
+ * `Rwait_frame(-1)` would stop. Any number of them can live side by side, and with
+ * `Rset_frame_callback`. The function can change at each render.
+ */
+export function useFrame(handler: FrameHandler): void {
+	const latest = useLatest(handler);
+	useEffect(() => onFrame((delta) => latest.current(delta)), []);
+}

package/src/react/host-config.ts

@@ -0,0 +1,138 @@
+import { createContext, type ReactNode } from "react";
+import ReactReconciler from "react-reconciler";
+import { DefaultEventPriority, DiscreteEventPriority } from "react-reconciler/constants";
+import { RavenError } from "../core/errors";
+import * as r from "../core/raven";
+import { eventScope } from "../core/events";
+import { childrenText, type RavenProps } from "../core/props";
+import { ADOPTED_TAG, finishPlacing, WidgetInstance, type HostNode } from "../core/widget-instance";
+import { WindowInstance } from "../core/window-instance";
+
+/** React asks for a context per level of the tree. Raven has no use for one, but it must exist. */
+type HostContext = { readonly inMenu: boolean };
+const HOST_CONTEXT: HostContext = { inMenu: false };
+const MENU_CONTEXT: HostContext = { inMenu: true };
+const NO_TIMEOUT = -1;
+
+/** The props of a widget under React, where children are React's. */
+type ReactRavenProps = RavenProps<ReactNode>;
+
+/** A `<Separator>` in a `<Menu>`: a line of the menu, as in XML, which is an item there and no widget of its own. */
+const menuSeparator = (props: ReactRavenProps): ReactRavenProps => ({ ...(props["Name"] === undefined ? {} : { Name: props["Name"] }), Separator: true });
+
+/** The priority React asks about: discrete while a native event runs, as a click in React DOM. */
+class UpdatePriority {
+	/** What React set, or 0. */
+	current = 0;
+
+	/** Runs something at the discrete priority. */
+	discrete(run: () => void): void {
+		const before = this.current;
+		this.current = DiscreteEventPriority;
+		try {
+			run();
+		} finally {
+			this.current = before;
+		}
+	}
+}
+
+const updatePriority = new UpdatePriority();
+
+type RavenHostConfig = ReactReconciler.HostConfig<
+	string, ReactRavenProps, HostNode, HostNode, never, never, never, never, never, HostNode,
+	HostContext, never, ReturnType<typeof setTimeout>, typeof NO_TIMEOUT, null, null, null, never, never, never
+>;
+
+const hostConfig: RavenHostConfig = {
+	supportsMutation: true,
+	supportsPersistence: false,
+	supportsHydration: false,
+	supportsMicrotasks: true,
+	isPrimaryRenderer: true,
+	warnsIfNotActing: false,
+	noTimeout: NO_TIMEOUT,
+	scheduleTimeout: setTimeout,
+	cancelTimeout: clearTimeout,
+	scheduleMicrotask: queueMicrotask,
+	NotPendingTransition: null,
+	HostTransitionContext: createContext<null>(null),
+
+	// (Raven makes nothing while React renders, which React may throw away: a node is made when it
+	// is placed, as React commits it, with what it holds. See `HostNode.materialize`)
+	createInstance: (tag, props, _root, context) => {
+		if (tag === "Window") {
+			return WindowInstance.create(props);
+		}
+		if (tag === ADOPTED_TAG) {
+			return WidgetInstance.adopt(typeof props["widget"] === "number" ? props["widget"] : r.R_INVALID_ID);
+		}
+		return tag === "Separator" && context.inMenu ? WidgetInstance.create("MenuItem", menuSeparator(props)) : WidgetInstance.create(tag, props);
+	},
+	createTextInstance: (text) => RavenError.throw(`raven-tsx: text must be alone in a widget: "${text}"`),
+	shouldSetTextContent: (_tag, props) => childrenText(props["children"]) !== null,
+	appendInitialChild: (parent, child) => parent.appendInitial(child),
+	finalizeInitialChildren: () => false,
+	commitMount: () => {},
+	getPublicInstance: (instance) => instance,
+	getRootHostContext: () => HOST_CONTEXT,
+	getChildHostContext: (parent, tag) => {
+		const inMenu = tag === "Menu";
+		return inMenu === parent.inMenu ? parent : inMenu ? MENU_CONTEXT : HOST_CONTEXT;
+	},
+	prepareForCommit: () => null,
+	resetAfterCommit: () => finishPlacing(),
+	preparePortalMount: () => {},
+	clearContainer: () => {},
+
+	appendChild: (parent, child) => parent.append(child),
+	appendChildToContainer: (container, child) => container.append(child),
+	insertBefore: (parent, child, before) => parent.insertBefore(child, before),
+	insertInContainerBefore: (container, child, before) => container.insertBefore(child, before),
+	removeChild: (parent, child) => parent.remove(child),
+	removeChildFromContainer: (container, child) => container.remove(child),
+	commitUpdate: (instance, tag, _previous, next) => instance.update(tag === "Separator" && instance.tag === "MenuItem" ? menuSeparator(next) : next),
+	commitTextUpdate: () => {},
+	hideInstance: () => {},
+	unhideInstance: () => {},
+	hideTextInstance: () => {},
+	unhideTextInstance: () => {},
+	detachDeletedInstance: () => {},
+	beforeActiveInstanceBlur: () => {},
+	afterActiveInstanceBlur: () => {},
+	prepareScopeUpdate: () => {},
+	getInstanceFromNode: () => null,
+	getInstanceFromScope: () => null,
+
+	setCurrentUpdatePriority: (priority) => {
+		updatePriority.current = priority;
+	},
+	getCurrentUpdatePriority: () => updatePriority.current,
+	resolveUpdatePriority: () => updatePriority.current || DefaultEventPriority,
+	shouldAttemptEagerTransition: () => false,
+	trackSchedulerEvent: () => {},
+	resolveEventType: () => null,
+	resolveEventTimeStamp: () => -1.1,
+	requestPostPaintCallback: () => {},
+	maySuspendCommit: () => false,
+	maySuspendCommitOnUpdate: () => false,
+	maySuspendCommitInSyncRender: () => false,
+	preloadInstance: () => true,
+	startSuspendingCommit: () => null,
+	suspendInstance: () => {},
+	suspendOnActiveViewTransition: () => {},
+	waitForCommitToBeReady: () => null,
+	bindToConsole: (_method, args) => console.log.bind(console, ...args),
+	getSuspendedCommitReason: () => null,
+	resetFormInstance: () => {},
+	rendererVersion: "0.1.0",
+	rendererPackageName: "raven-tsx-react",
+	extraDevToolsConfig: null,
+};
+
+export const reconciler = ReactReconciler(hostConfig);
+
+eventScope.setFlush(() => {
+	reconciler.flushSyncWork();
+});
+eventScope.setWrapper((run) => updatePriority.discrete(run));

package/src/react/index.ts

@@ -0,0 +1,26 @@
+/**
+ * raven-tsx for React: the interface in TSX, on Raven's widgets. It exports everything of the
+ * core too, so an application needs this one import.
+ *
+ *     import { useState } from "react";
+ *     import { Button, Label, runApp, VBox } from "@decky.fx/raven-tsx/react";
+ *
+ *     function App() {
+ *       const [count, setCount] = useState(0);
+ *       return (
+ *         <VBox Spacing={12} Slot={{ Padding: 24 }}>
+ *           <Label>Clicked {count} times</Label>
+ *           <Button Style="Primary" OnClicked={() => setCount(count + 1)}>Click me</Button>
+ *         </VBox>
+ *       );
+ *     }
+ *
+ *     await runApp(<App />, { Title: "Hello", Width: 480, Height: 240 });
+ */
+
+export * from "../core";
+export * from "./components.generated";
+export { useAction, useFrame, useShortcut } from "./hooks";
+export { createPortal, createWindow, RavenRoot, runApp, type RunOptions } from "./root";
+export { registerTag, type TagOptions } from "./tags";
+export { WebView } from "./web";