one ai prompt

packages/react-native-xtermjs-webview/src-internal/main.tsx

@@ -1,33 +1,137 @@
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { Base64 } from 'js-base64';
-
 import '@xterm/xterm/css/xterm.css';
 
-const terminal = new Terminal();
-const fitAddon = new FitAddon();
-terminal.loadAddon(fitAddon);
-terminal.open(document.getElementById('terminal')!);
-fitAddon.fit();
-window.terminal = terminal;
-window.fitAddon = fitAddon;
-const postMessage = (arg: string) => {
-	window.ReactNativeWebView?.postMessage?.(arg);
-};
-setTimeout(() => {
-	postMessage('initialized');
-}, 10);
-
-terminal.onData((data) => {
-	const base64Data = Base64.encode(data);
-	postMessage(base64Data);
+/**
+ * Xterm setup
+ */
+const term = new Terminal({
+	allowProposedApi: true,
+	convertEol: true,
+	scrollback: 10000,
 });
-function terminalWriteBase64(base64Data: string) {
+const fitAddon = new FitAddon();
+term.loadAddon(fitAddon);
+
+const root = document.getElementById('terminal')!;
+term.open(root);
+fitAddon.fit();
+
+// Expose for debugging (optional)
+window.terminal = term;
+window.fitAddon = fitAddon;
+
+/**
+ * Post typed messages to React Native
+ */
+const post = (msg: unknown) =>
+	window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg));
+
+/**
+ * Encode/decode helpers
+ */
+const enc = new TextEncoder();
+
+/**
+ * Initial handshake
+ */
+setTimeout(() => post({ type: 'initialized' }), 0);
+
+/**
+ * User input from xterm -> RN (SSH)
+ * Send UTF-8 bytes only (Base64-encoded)
+ */
+term.onData((data /* string */) => {
+	const bytes = enc.encode(data);
+	const b64 = Base64.fromUint8Array(bytes);
+	post({ type: 'input', b64 });
+});
+
+/**
+ * Message handler for RN -> WebView control/data
+ * We support: write, resize, setFont, setTheme, clear, focus
+ */
+window.addEventListener('message', (e: MessageEvent<string>) => {
 	try {
-		const data = Base64.toUint8Array(base64Data);
-		terminal.write(data);
-	} catch (e) {
-		postMessage(`DEBUG: terminalWriteBase64 error ${e}`);
+		const msg = JSON.parse(e.data);
+		if (!msg || typeof msg.type !== 'string') return;
+
+		switch (msg.type) {
+			case 'write': {
+				// Either a single b64 or an array of chunks
+				if (typeof msg.b64 === 'string') {
+					const bytes = Base64.toUint8Array(msg.b64);
+					term.write(bytes);
+				} else if (Array.isArray(msg.chunks)) {
+					for (const b64 of msg.chunks) {
+						const bytes = Base64.toUint8Array(b64);
+						term.write(bytes);
+					}
+				}
+				break;
+			}
+
+			case 'resize': {
+				if (typeof msg.cols === 'number' && typeof msg.rows === 'number') {
+					try {
+						term.resize(msg.cols, msg.rows);
+					} finally {
+						fitAddon.fit();
+					}
+				} else {
+					// If cols/rows not provided, try fit
+					fitAddon.fit();
+				}
+				break;
+			}
+
+			case 'setFont': {
+				const { family, size } = msg;
+				if (family) document.body.style.fontFamily = family;
+				if (typeof size === 'number')
+					document.body.style.fontSize = `${size}px`;
+				fitAddon.fit();
+				break;
+			}
+
+			case 'setTheme': {
+				const { background, foreground } = msg;
+				if (background) document.body.style.backgroundColor = background;
+				// xterm theme API (optional)
+				term.options = {
+					...term.options,
+					theme: {
+						...(term.options.theme ?? {}),
+						background,
+						foreground,
+					},
+				};
+				break;
+			}
+
+			case 'clear': {
+				term.clear();
+				break;
+			}
+
+			case 'focus': {
+				term.focus();
+				break;
+			}
+		}
+	} catch (err) {
+		post({ type: 'debug', message: `message handler error: ${String(err)}` });
 	}
-}
-window.terminalWriteBase64 = terminalWriteBase64;
+});
+
+/**
+ * Handle container resize
+ */
+new ResizeObserver(() => {
+	try {
+		fitAddon.fit();
+	} catch (err) {
+		post({ type: 'debug', message: `resize observer error: ${String(err)}` });
+	}
+});

packages/react-native-xtermjs-webview/src/index.tsx

@@ -1,12 +1,48 @@
-import { useImperativeHandle, useRef, type ComponentProps } from 'react';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import { WebView } from 'react-native-webview';
 import htmlString from '../dist-internal/index.html?raw';
 import { Base64 } from 'js-base64';
 
 type StrictOmit<T, K extends keyof T> = Omit<T, K>;
 
+type InboundMessage =
+	| { type: 'initialized' }
+	| { type: 'input'; b64: string } // user typed data from xterm -> RN
+	| { type: 'debug'; message: string };
+
+type OutboundMessage =
+	| { type: 'write'; b64: string }
+	| { type: 'write'; chunks: string[] }
+	| { type: 'resize'; cols?: number; rows?: number }
+	| { type: 'setFont'; family?: string; size?: number }
+	| { type: 'setTheme'; background?: string; foreground?: string }
+	| { type: 'clear' }
+	| { type: 'focus' };
+
 export type XtermWebViewHandle = {
+	/**
+	 * Push raw bytes (Uint8Array) into the terminal.
+	 * Writes are batched (rAF or >=8KB) for performance.
+	 */
 	write: (data: Uint8Array) => void;
+
+	/** Force-flush any buffered output immediately. */
+	flush: () => void;
+
+	/** Resize the terminal to given cols/rows (optional, fit addon also runs). */
+	resize: (cols?: number, rows?: number) => void;
+
+	/** Set font props inside the WebView page. */
+	setFont: (family?: string, size?: number) => void;
+
+	/** Set basic theme colors (background/foreground). */
+	setTheme: (background?: string, foreground?: string) => void;
+
+	/** Clear terminal contents. */
+	clear: () => void;
+
+	/** Focus the terminal input. */
+	focus: () => void;
 };
 
 export function XtermJsWebView({
@@ -14,26 +50,95 @@ export function XtermJsWebView({
 	onMessage,
 	...props
 }: StrictOmit<
-	ComponentProps<typeof WebView>,
+	React.ComponentProps<typeof WebView>,
 	'source' | 'originWhitelist' | 'onMessage'
 > & {
 	ref: React.RefObject<XtermWebViewHandle | null>;
 	onMessage?: (
-		data: { type: 'data'; data: Uint8Array } | { type: 'initialized' },
+		msg:
+			| { type: 'initialized' }
+			| { type: 'data'; data: Uint8Array } // input from xterm (user typed)
+			| { type: 'debug'; message: string },
 	) => void;
 }) {
 	const webViewRef = useRef<WebView>(null);
 
-	useImperativeHandle(ref, () => {
-		return {
-			write: (data) => {
-				const base64Data = Base64.fromUint8Array(data.slice());
-				webViewRef.current?.injectJavaScript(`
-					window?.terminalWriteBase64?.('${base64Data}');
-				`);
-			},
+	// ---- RN -> WebView message sender via injectJavaScript + window MessageEvent
+	const send = (obj: OutboundMessage) => {
+		const payload = JSON.stringify(obj);
+		const js = `window.dispatchEvent(new MessageEvent('message',{data:${JSON.stringify(
+			payload,
+		)}})); true;`;
+		webViewRef.current?.injectJavaScript(js);
+	};
+
+	// ---- rAF + 8KB coalescer for writes
+	const writeBufferRef = useRef<Uint8Array | null>(null);
+	const rafIdRef = useRef<number | null>(null);
+	const THRESHOLD = 8 * 1024; // 8KB
+
+	const flush = () => {
+		if (!writeBufferRef.current) return;
+		const b64 = Base64.fromUint8Array(writeBufferRef.current);
+		writeBufferRef.current = null;
+		if (rafIdRef.current != null) {
+			cancelAnimationFrame(rafIdRef.current);
+			rafIdRef.current = null;
+		}
+		send({ type: 'write', b64 });
+	};
+
+	const scheduleFlush = () => {
+		if (rafIdRef.current != null) return;
+		rafIdRef.current = requestAnimationFrame(() => {
+			rafIdRef.current = null;
+			flush();
+		});
+	};
+
+	const write = (data: Uint8Array) => {
+		if (!data || data.length === 0) return;
+		const chunk = data; // already a fresh Uint8Array per caller
+		if (!writeBufferRef.current) {
+			writeBufferRef.current = chunk;
+		} else {
+			// concat
+			const a = writeBufferRef.current;
+			const merged = new Uint8Array(a.length + chunk.length);
+			merged.set(a, 0);
+			merged.set(chunk, a.length);
+			writeBufferRef.current = merged;
+		}
+		if ((writeBufferRef.current?.length ?? 0) >= THRESHOLD) {
+			flush();
+		} else {
+			scheduleFlush();
+		}
+	};
+
+	useImperativeHandle(ref, () => ({
+		write,
+		flush,
+		resize: (cols?: number, rows?: number) =>
+			send({ type: 'resize', cols, rows }),
+		setFont: (family?: string, size?: number) =>
+			send({ type: 'setFont', family, size }),
+		setTheme: (background?: string, foreground?: string) =>
+			send({ type: 'setTheme', background, foreground }),
+		clear: () => send({ type: 'clear' }),
+		focus: () => send({ type: 'focus' }),
+	}));
+
+	// Cleanup pending rAF on unmount
+	useEffect(() => {
+		return () => {
+			if (rafIdRef.current != null) {
+				cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = null;
+			}
+			writeBufferRef.current = null;
 		};
-	});
+	}, []);
 
 	return (
 		<WebView
@@ -41,13 +146,25 @@ export function XtermJsWebView({
 			originWhitelist={['*']}
 			source={{ html: htmlString }}
 			onMessage={(event) => {
-				const message = event.nativeEvent.data;
-				if (message === 'initialized') {
-					onMessage?.({ type: 'initialized' });
-					return;
+				try {
+					const msg: InboundMessage = JSON.parse(event.nativeEvent.data);
+					if (msg.type === 'initialized') {
+						onMessage?.({ type: 'initialized' });
+						return;
+					}
+					if (msg.type === 'input') {
+						// Convert base64 -> bytes for the caller (SSH writer)
+						const bytes = Base64.toUint8Array(msg.b64);
+						onMessage?.({ type: 'data', data: bytes });
+						return;
+					}
+					if (msg.type === 'debug') {
+						onMessage?.({ type: 'debug', message: msg.message });
+						return;
+					}
+				} catch {
+					// ignore unknown payloads
 				}
-				const data = Base64.toUint8Array(message.slice());
-				onMessage?.({ type: 'data', data });
 			}}
 			{...props}
 		/>