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

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.1",
+	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";

package/src/react/root.ts

@@ -0,0 +1,119 @@
+import { createElement, type ReactNode, type ReactPortal } from "react";
+import { ConcurrentRoot } from "react-reconciler/constants";
+import * as r from "../core/raven";
+import { RavenError } from "../core/errors";
+import { resolveProps, type RavenProps } from "../core/props";
+import type { WindowOptions } from "../core/props.generated";
+import { WidgetInstance } from "../core/widget-instance";
+import { makeWindow } from "../core/window-instance";
+import { Window } from "./components.generated";
+import { reconciler } from "./host-config";
+
+/** Says what a component threw during a render or an effect. */
+function report(error: unknown): void {
+	console.error("raven-tsx: error in a component:", error);
+}
+
+/**
+ * A tree of React, as `createRoot` of ReactDOM. Given a widget, it renders into it.
+ * Without one, it renders `<Window>` elements, each its own window.
+ */
+export class RavenRoot {
+	private readonly root: ReturnType<typeof reconciler.createContainer>;
+
+	constructor(parent: r.Rid = r.R_INVALID_ID) {
+		this.root = reconciler.createContainer(
+			WidgetInstance.forContainer(parent), ConcurrentRoot, null, false, null, "raven-tsx", report, report, report, () => {}, null,
+		);
+	}
+
+	/** Renders or updates the tree. */
+	render(element: ReactNode): void {
+		reconciler.updateContainer(element, this.root, null, null);
+	}
+
+	/** Removes the tree and runs the cleanups of its effects, now. */
+	unmount(): void {
+		reconciler.updateContainerSync(null, this.root, null, null);
+		reconciler.flushSyncWork();
+		reconciler.flushPassiveEffects();
+	}
+}
+
+/** What portals render into, by handle: React takes a container that changes as another place. */
+const portalContainers = new Map<r.Rid, WidgetInstance>();
+
+/**
+ * Renders children into a widget outside this part of the tree, as `createPortal` of ReactDOM:
+ * context goes on as if they were here, which a second `RavenRoot` cannot do. For a widget given
+ * to Raven by hand, the content of a graph node for one:
+ *
+ *     const [box] = useState(() => raven.Rwidget_create_from_xml("<VBox/>"));
+ *     useLayoutEffect(() => raven.Rnode_graph_set_node_content(graph, node, box), [graph, node, box]);
+ *     return createPortal(<Button>Run</Button>, box);
+ *
+ * What holds the widget owns it: the portal only adds and removes the children.
+ */
+export function createPortal(children: ReactNode, widget: r.Rid, key: string | null = null): ReactPortal {
+	for (const id of portalContainers.keys()) {
+		if (!r.Rwidget_is_valid(id)) {
+			portalContainers.delete(id);
+		}
+	}
+	let container = portalContainers.get(widget);
+	if (!container) {
+		container = WidgetInstance.forContainer(widget);
+		portalContainers.set(widget, container);
+	}
+	return reconciler.createPortal(children, container, null, key);
+}
+
+/** Makes a window with a place for a tree, and returns the handle of the window with its root. */
+export function createWindow(options: WindowOptions = {}): { window: r.Rid; root: RavenRoot } {
+	const { window, content } = makeWindow(resolveProps(options as RavenProps).attributes);
+	return { window, root: new RavenRoot(content) };
+}
+
+/** How `runApp` starts Raven. */
+export interface RunOptions {
+	/** The name of the application: `RInitDesc::app_name`, which system notifications show. */
+	readonly appName?: string | undefined;
+	/** Runs after Raven started and before the first render: for a look, a theme, a registered tag. */
+	readonly setup?: (() => void) | undefined;
+	/** Raven's allocator: functions of C only, as it allocates on several threads. See `Rset_allocator`. */
+	readonly allocator?: Parameters<typeof r.Rset_allocator>[0] | undefined;
+}
+
+/**
+ * Starts Raven, shows a tree and runs until the last window closes, the event loop of Bun
+ * running beside it. Then the effects are cleaned up and Raven stops, also when the run ends
+ * with an error, so that it can start again.
+ *
+ * With options, the tree goes in one window made from them. Without, the tree says what
+ * windows there are, with `<Window>` elements.
+ */
+export async function runApp(element: ReactNode, options?: WindowOptions, start?: RunOptions): Promise<void> {
+	if (start?.allocator) {
+		r.Rset_allocator(start.allocator);
+	}
+	const desc = new r.RInitDesc();
+	desc.backend = r.R_BACKEND_VULKAN;
+	desc.app_name = start?.appName ?? null;
+	if (!r.Rinit_ex(desc)) {
+		RavenError.fromLibrary("Raven cannot start");
+	}
+	let root: RavenRoot | null = null;
+	try {
+		start?.setup?.();
+		root = new RavenRoot();
+		root.render(options ? createElement(Window, options, element) : element);
+		// (React commits in the loop, and makes the windows then. Rwait_frame ends once the last one closed: until there was one, it goes on)
+		await r.runLoop();
+	} finally {
+		try {
+			root?.unmount();
+		} finally {
+			r.Rshutdown();
+		}
+	}
+}

package/src/react/tags.ts

@@ -0,0 +1,50 @@
+/**
+ * React components as tags of Raven: what `<Widget Name="...">` does in XML, with a component.
+ * The core does the part that speaks to Raven; this renders the component, a root of its own per
+ * element, so context does not reach it from the tree around it.
+ */
+
+import { createElement, type ComponentType, type ReactNode } from "react";
+import * as r from "../core/raven";
+import { registerTagWith, type TagAdapter, type TagContent, type TagOptions as CoreTagOptions } from "../core/tags";
+import { ADOPTED_TAG } from "../core/widget-instance";
+import { RavenRoot } from "./root";
+
+/** What a tag takes from its element. */
+export type TagOptions<P> = CoreTagOptions<P, ReactNode>;
+
+/** What a registered component is given: its attributes, and its places with their widgets. */
+type TagProps = Readonly<Record<string, string | number | boolean | ReactNode>>;
+
+/** The elements of adopted widgets, in their order. */
+function adopted(widgets: readonly r.Rid[]): ReactNode {
+	return widgets.length === 0 ? undefined : widgets.map((widget) => createElement(ADOPTED_TAG, { key: widget, widget }));
+}
+
+/** The element of a component, with what its element in XML gives it. */
+function elementOf(component: ComponentType<TagProps>, content: TagContent): ReactNode {
+	const slots = Object.fromEntries(Object.entries(content.slots).map(([name, widgets]) => [name, adopted(widgets)]));
+	return createElement(component, { ...content.attributes, ...slots, children: adopted(content.children) });
+}
+
+/** Renders a registered component in a root of its own. */
+const reactAdapter: TagAdapter<ComponentType<TagProps>> = {
+	mount(component, props, container) {
+		const root = new RavenRoot(container);
+		root.render(elementOf(component, props));
+		return {
+			update: (next) => root.render(elementOf(component, next)),
+			unmount: () => root.unmount(),
+		};
+	},
+};
+
+/**
+ * Makes a component a tag Raven knows, built from XML as its own tags are: in documents, in
+ * `Markup`, in files. Its attributes become props of the kinds given; the widgets of its children
+ * are placed where it renders `children`, and those of `<Into Name="...">` where it renders the
+ * prop of that name. Registering a name again replaces it. Returns what unregisters it.
+ */
+export function registerTag<P extends object>(name: string, component: ComponentType<P>, options: TagOptions<P> = {}): () => void {
+	return registerTagWith<ComponentType<TagProps>, P, ReactNode>(reactAdapter, name, component as ComponentType<TagProps>, options);
+}

package/src/react/web.ts

@@ -0,0 +1,5 @@
+import type { WebViewProps } from "../core/web";
+import { tag } from "./components.generated";
+
+/** A page of the web, after `registerWebView`. */
+export const WebView = tag<WebViewProps>("WebView");

package/src/solid/babel-preset-solid.d.ts

@@ -0,0 +1,7 @@
+// babel-preset-solid has no types of its own: the plugin only hands it to Babel.
+declare module "babel-preset-solid" {
+	import type { PluginItem } from "@babel/core";
+
+	const preset: PluginItem;
+	export default preset;
+}