sorta working but bad init

This commit is contained in:
EthanShoeDev
2025-09-17 20:38:09 -04:00
parent c445eef1d1
commit b5410f0394
3 changed files with 233 additions and 119 deletions

View File

@@ -19,7 +19,7 @@ const root = document.getElementById('terminal')!;
term.open(root);
fitAddon.fit();
// Expose for debugging (optional)
// Expose for debugging (typed via vite-env.d.ts)
window.terminal = term;
window.fitAddon = fitAddon;
@@ -30,7 +30,7 @@ const post = (msg: unknown) =>
window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg));
/**
* Encode/decode helpers
* Encode helper
*/
const enc = new TextEncoder();
@@ -50,74 +50,123 @@ term.onData((data /* string */) => {
});
/**
* Message handler for RN -> WebView control/data
* We support: write, resize, setFont, setTheme, clear, focus
* RN -> WebView control/data
* Supported: write, resize, setFont, setTheme, setOptions, clear, focus
* NOTE: Never spread term.options (it contains cols/rows). Only set keys you intend.
*/
window.addEventListener('message', (e: MessageEvent<string>) => {
try {
const msg = JSON.parse(e.data);
const msg = JSON.parse(e.data) as
| { type: 'write'; b64?: string; chunks?: string[] }
| { type: 'resize'; cols?: number; rows?: number }
| { type: 'setFont'; family?: string; size?: number }
| { type: 'setTheme'; background?: string; foreground?: string }
| {
type: 'setOptions';
opts: Partial<{
cursorBlink: boolean;
scrollback: number;
fontFamily: string;
fontSize: number;
}>;
}
| { type: 'clear' }
| { type: 'focus' };
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);
post({ type: 'debug', message: `write(bytes=${bytes.length})` });
} else if (Array.isArray(msg.chunks)) {
for (const b64 of msg.chunks) {
const bytes = Base64.toUint8Array(b64);
term.write(bytes);
}
post({
type: 'debug',
message: `write(chunks=${msg.chunks.length})`,
});
}
break;
}
case 'resize': {
// Prefer fitAddon.fit(); only call resize if explicit cols/rows provided.
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();
term.resize(msg.cols, msg.rows);
post({ type: 'debug', message: `resize(${msg.cols}x${msg.rows})` });
}
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();
const patch: Partial<import('@xterm/xterm').ITerminalOptions> = {};
if (family) patch.fontFamily = family;
if (typeof size === 'number') patch.fontSize = size;
if (Object.keys(patch).length) {
term.options = patch; // no spread -> avoids cols/rows setters
post({
type: 'debug',
message: `setFont(${family ?? ''}, ${size ?? ''})`,
});
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,
},
};
const theme: Partial<import('@xterm/xterm').ITheme> = {};
if (background) {
theme.background = background;
document.body.style.backgroundColor = background;
}
if (foreground) theme.foreground = foreground;
if (Object.keys(theme).length) {
term.options = { theme }; // set only theme
post({
type: 'debug',
message: `setTheme(bg=${background ?? ''}, fg=${foreground ?? ''})`,
});
}
break;
}
case 'setOptions': {
const opts = msg.opts ?? {};
// Filter out cols/rows defensively
const { cursorBlink, scrollback, fontFamily, fontSize } = opts;
const patch: Partial<import('@xterm/xterm').ITerminalOptions> = {};
if (typeof cursorBlink === 'boolean') patch.cursorBlink = cursorBlink;
if (typeof scrollback === 'number') patch.scrollback = scrollback;
if (fontFamily) patch.fontFamily = fontFamily;
if (typeof fontSize === 'number') patch.fontSize = fontSize;
if (Object.keys(patch).length) {
term.options = patch;
post({
type: 'debug',
message: `setOptions(${Object.keys(patch).join(',')})`,
});
if (patch.fontFamily || patch.fontSize) fitAddon.fit();
}
break;
}
case 'clear': {
term.clear();
post({ type: 'debug', message: 'clear()' });
break;
}
case 'focus': {
term.focus();
post({ type: 'debug', message: 'focus()' });
break;
}
}
@@ -127,7 +176,7 @@ window.addEventListener('message', (e: MessageEvent<string>) => {
});
/**
* Handle container resize
* Keep terminal size in sync with container
*/
new ResizeObserver(() => {
try {