@xeonr/renderer-sdk 1.0.4 → 1.1.0

package/src/react/dom.ts

@@ -0,0 +1,53 @@
+/**
+ * Drop-in replacement for `react-dom/client` that auto-wraps the rendered
+ * tree in `<RendererErrorBoundary>`. Used by `@xeonr/renderer-plugin-vite`
+ * to rewrite renderer-archive build imports so the boundary is mandatory
+ * without renderer authors having to opt in.
+ *
+ * Renderer authors do NOT need to import this directly — the vite plugin
+ * substitutes `react-dom/client` specifiers in renderer source code at
+ * build time. If a renderer is built outside the plugin (e.g. a custom
+ * pipeline), authors can import from here explicitly instead.
+ *
+ * Mirrors React 18+ `Root` / `RootOptions` surface; passes everything
+ * through unchanged except for `render` and `hydrateRoot`'s initial
+ * children, which are wrapped in the boundary so a single render-time
+ * crash is forwarded to the host overlay rather than tearing down the
+ * iframe silently.
+ */
+import {
+	createRoot as origCreateRoot,
+	hydrateRoot as origHydrateRoot,
+	type Root,
+	type RootOptions,
+	type HydrationOptions,
+} from 'react-dom/client';
+import { createElement, type ReactNode } from 'react';
+import { RendererErrorBoundary } from './RendererErrorBoundary.js';
+
+function wrap(children: ReactNode): ReactNode {
+	return createElement(RendererErrorBoundary, null, children);
+}
+
+export function createRoot(container: Element | DocumentFragment, options?: RootOptions): Root {
+	const root = origCreateRoot(container, options);
+	const originalRender = root.render.bind(root);
+	root.render = (children: ReactNode) => originalRender(wrap(children));
+	return root;
+}
+
+export function hydrateRoot(
+	container: Element | Document,
+	initialChildren: ReactNode,
+	options?: HydrationOptions,
+): Root {
+	const root = origHydrateRoot(container, wrap(initialChildren), options);
+	const originalRender = root.render.bind(root);
+	root.render = (children: ReactNode) => originalRender(wrap(children));
+	return root;
+}
+
+// Re-export every remaining symbol from `react-dom/client` so renderers
+// importing other named bindings (e.g. `Root` type) continue to work
+// after the specifier rewrite.
+export type { Root, RootOptions, HydrationOptions } from 'react-dom/client';

package/src/react/index.ts

@@ -1,2 +1,4 @@
 export { useRendererClient } from './useRendererClient.js';
 export type { UseRendererClientOptions, UseRendererClientResult } from './useRendererClient.js';
+export { RendererErrorBoundary } from './RendererErrorBoundary.js';
+export type { RendererErrorBoundaryProps } from './RendererErrorBoundary.js';

package/src/react/useRendererClient.ts

@@ -5,6 +5,25 @@ import type { RendererApiAdapter, RendererConfig, RendererScope, RenderingType,
 
 export interface UseRendererClientOptions extends RendererClientOptions {}
 
+/**
+ * Apply the host's theme to the renderer document. Two distinct effects:
+ *
+ *   - `documentElement.dataset.theme` — surfaces the theme as a
+ *     `[data-theme="dark"]` selector for renderer-authored CSS.
+ *   - `documentElement.style.colorScheme` — tells the browser to render
+ *     scrollbars, form controls, and (critically) the iframe's default
+ *     canvas in the matching mode. Without this, a cross-origin iframe
+ *     defaults to a white canvas regardless of what the host's
+ *     `color-scheme` is — so `background: transparent` in the renderer
+ *     reveals white, not the host's dark surface. This is the fix for
+ *     "renderer shows light mode when host is dark".
+ */
+function applyThemeToDocument(theme: 'light' | 'dark'): void {
+	if (typeof document === 'undefined') return;
+	document.documentElement.dataset.theme = theme;
+	document.documentElement.style.colorScheme = theme;
+}
+
 export interface UseRendererClientResult {
 	/** Whether the host has sent the init message. */
 	connected: boolean;
@@ -95,12 +114,12 @@ export function useRendererClient(options?: UseRendererClientOptions): UseRender
 			setEntrypoint(payload.entrypoint);
 			setApiBaseUrl(payload.apiBaseUrl);
 			setPath(client.getPath());
-			document.documentElement.dataset.theme = payload.theme;
+			applyThemeToDocument(payload.theme);
 		});
 
 		const unsubTheme = client.onThemeChange((newTheme) => {
 			setTheme(newTheme);
-			document.documentElement.dataset.theme = newTheme;
+			applyThemeToDocument(newTheme);
 		});
 
 		const unsubToken = client.onTokenRefresh((newToken, newExpiresAt) => {

package/src/types.ts

@@ -11,6 +11,27 @@ export interface RendererConfig {
 		allowForms?: boolean;
 		allowDownloads?: boolean;
 	};
+	/**
+	 * Extra origins this renderer needs to reach via `fetch` / `XMLHttpRequest`
+	 * / WebSocket. Surfaced to the browser as additional entries in the CSP
+	 * `connect-src` directive. The upl.im API + auth hosts are always allowed
+	 * by the renderer-proxy; only list extras here (e.g. a third-party API
+	 * the renderer integrates with).
+	 *
+	 * Each entry is a fully-qualified origin like `https://api.example.com`
+	 * or a wildcarded host like `https://*.example.com`. No paths, no
+	 * trailing slashes. Origins are validated at deploy time.
+	 */
+	connectHosts?: string[];
+	/**
+	 * Short build identifier the build pipeline stamps into config.json
+	 * (e.g. the renderer-plugin-vite hash of the output directory).
+	 * Surfaced in crash telemetry as a separate dimension so we can
+	 * distinguish "crashed in build A" from "crashed in build B" even
+	 * when both builds share the same archive_upload_id (the developer
+	 * republished without bumping the archive). Bounded to 64 chars.
+	 */
+	buildHash?: string;
 }
 
 export type RendererPermission =