mirror of
https://github.com/EthanShoeDev/fressh.git
synced 2026-01-12 23:02:49 +00:00
Better xtermjs api
This commit is contained in:
EthanShoeDev
@@ -1,8 +1,8 @@
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
import { Terminal, type ITerminalOptions, type ITheme } from '@xterm/xterm';
|
||||
import { Base64 } from 'js-base64';
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import '@xterm/xterm/css/xterm.css';
|
||||
import {
|
||||
bStrToBinary,
|
||||
type BridgeInboundMessage,
|
||||
type BridgeOutboundMessage,
|
||||
} from '../src/bridge';
|
||||
@@ -14,14 +14,13 @@ declare global {
|
||||
terminalWriteBase64?: (data: string) => void;
|
||||
ReactNativeWebView?: { postMessage?: (data: string) => void };
|
||||
__FRESSH_XTERM_BRIDGE__?: boolean;
|
||||
__FRESSH_XTERM_MSG_HANDLER__?: (e: MessageEvent<string>) => void;
|
||||
__FRESSH_XTERM_MSG_HANDLER__?: (
|
||||
e: MessageEvent<BridgeOutboundMessage>,
|
||||
) => void;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post typed messages to React Native
|
||||
*/
|
||||
const post = (msg: BridgeInboundMessage) =>
|
||||
const sendToRn = (msg: BridgeInboundMessage) =>
|
||||
window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg));
|
||||
|
||||
/**
|
||||
@@ -29,7 +28,7 @@ const post = (msg: BridgeInboundMessage) =>
|
||||
* If the script happens to run twice (dev reloads, double-mounts), we bail out early.
|
||||
*/
|
||||
if (window.__FRESSH_XTERM_BRIDGE__) {
|
||||
post({
|
||||
sendToRn({
|
||||
type: 'debug',
|
||||
message: 'bridge already installed; ignoring duplicate boot',
|
||||
});
|
||||
@@ -55,152 +54,84 @@ if (window.__FRESSH_XTERM_BRIDGE__) {
|
||||
window.fitAddon = fitAddon;
|
||||
|
||||
// Encode helper
|
||||
const enc = new TextEncoder();
|
||||
|
||||
// Initial handshake (send once)
|
||||
setTimeout(() => post({ type: 'initialized' }), 500);
|
||||
// const enc = new TextEncoder();
|
||||
|
||||
// User input from xterm -> RN (SSH) as UTF-8 bytes (Base64)
|
||||
term.onData((data /* string */) => {
|
||||
const bytes = enc.encode(data);
|
||||
const b64 = Base64.fromUint8Array(bytes);
|
||||
post({ type: 'input', b64 });
|
||||
term.onData((data) => {
|
||||
// const bytes = enc.encode(data);
|
||||
// const bStr = binaryToBStr(bytes);
|
||||
sendToRn({ type: 'input', str: data });
|
||||
});
|
||||
|
||||
// Remove old handler if any (just in case)
|
||||
if (window.__FRESSH_XTERM_MSG_HANDLER__) {
|
||||
if (window.__FRESSH_XTERM_MSG_HANDLER__)
|
||||
window.removeEventListener('message', window.__FRESSH_XTERM_MSG_HANDLER__!);
|
||||
}
|
||||
|
||||
// RN -> WebView handler (write, resize, setFont, setTheme, setOptions, clear, focus)
|
||||
const handler = (e: MessageEvent<string>) => {
|
||||
const handler = (e: MessageEvent<BridgeOutboundMessage>) => {
|
||||
try {
|
||||
const msg = JSON.parse(e.data) as BridgeOutboundMessage;
|
||||
const msg = e.data;
|
||||
|
||||
if (!msg || typeof msg.type !== 'string') return;
|
||||
|
||||
// TODO: https://xtermjs.org/docs/guides/flowcontrol/#ideas-for-a-better-mechanism
|
||||
const termWrite = (bStr: string) => {
|
||||
const bytes = bStrToBinary(bStr);
|
||||
term.write(bytes);
|
||||
};
|
||||
|
||||
switch (msg.type) {
|
||||
case 'write': {
|
||||
if ('b64' in msg) {
|
||||
const bytes = Base64.toUint8Array(msg.b64);
|
||||
term.write(bytes);
|
||||
post({ type: 'debug', message: `write(bytes=${bytes.length})` });
|
||||
} else if ('chunks' in msg && 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})`,
|
||||
});
|
||||
termWrite(msg.bStr);
|
||||
break;
|
||||
}
|
||||
case 'writeMany': {
|
||||
for (const bStr of msg.chunks) {
|
||||
termWrite(bStr);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'resize': {
|
||||
if (typeof msg.cols === 'number' && typeof msg.rows === 'number') {
|
||||
term.resize(msg.cols, msg.rows);
|
||||
post({ type: 'debug', message: `resize(${msg.cols}x${msg.rows})` });
|
||||
}
|
||||
term.resize(msg.cols, msg.rows);
|
||||
break;
|
||||
}
|
||||
case 'fit': {
|
||||
fitAddon.fit();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'setFont': {
|
||||
const { family, size } = msg;
|
||||
const patch: Partial<ITerminalOptions> = {};
|
||||
if (family) patch.fontFamily = family;
|
||||
if (typeof size === 'number') patch.fontSize = size;
|
||||
if (Object.keys(patch).length) {
|
||||
term.options = patch; // never spread existing options (avoids cols/rows setters)
|
||||
post({
|
||||
type: 'debug',
|
||||
message: `setFont(${family ?? ''}, ${size ?? ''})`,
|
||||
});
|
||||
fitAddon.fit();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'setTheme': {
|
||||
const { background, foreground } = msg;
|
||||
const theme: Partial<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 incoming = (msg.opts ?? {}) as Record<string, unknown>;
|
||||
type PatchRecord = Partial<
|
||||
Record<
|
||||
keyof ITerminalOptions,
|
||||
ITerminalOptions[keyof ITerminalOptions]
|
||||
>
|
||||
>;
|
||||
const patch: PatchRecord = {};
|
||||
for (const [k, v] of Object.entries(incoming)) {
|
||||
// Avoid touching cols/rows via options setters here
|
||||
if (k === 'cols' || k === 'rows') continue;
|
||||
// Theme: also mirror background to page for seamless visuals
|
||||
if (k === 'theme' && v && typeof v === 'object') {
|
||||
const theme = v as ITheme;
|
||||
if (theme.background) {
|
||||
document.body.style.backgroundColor = theme.background;
|
||||
}
|
||||
patch.theme = theme;
|
||||
continue;
|
||||
}
|
||||
const key = k as keyof ITerminalOptions;
|
||||
patch[key] = v as ITerminalOptions[keyof ITerminalOptions];
|
||||
}
|
||||
if (Object.keys(patch).length) {
|
||||
term.options = patch;
|
||||
post({
|
||||
type: 'debug',
|
||||
message: `setOptions(${Object.keys(patch).join(',')})`,
|
||||
});
|
||||
// If dimensions-affecting options changed, refit
|
||||
if (
|
||||
patch.fontFamily !== undefined ||
|
||||
patch.fontSize !== undefined ||
|
||||
patch.letterSpacing !== undefined ||
|
||||
patch.lineHeight !== undefined
|
||||
) {
|
||||
fitAddon.fit();
|
||||
}
|
||||
const newOpts = msg.opts;
|
||||
term.options = newOpts;
|
||||
if (
|
||||
'theme' in newOpts &&
|
||||
newOpts.theme &&
|
||||
'background' in newOpts.theme &&
|
||||
newOpts.theme.background
|
||||
) {
|
||||
document.body.style.backgroundColor = newOpts.theme.background;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'clear': {
|
||||
term.clear();
|
||||
post({ type: 'debug', message: 'clear()' });
|
||||
break;
|
||||
}
|
||||
|
||||
case 'focus': {
|
||||
term.focus();
|
||||
post({ type: 'debug', message: 'focus()' });
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
post({ type: 'debug', message: `message handler error: ${String(err)}` });
|
||||
sendToRn({
|
||||
type: 'debug',
|
||||
message: `message handler error: ${String(err)}`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.__FRESSH_XTERM_MSG_HANDLER__ = handler;
|
||||
window.addEventListener('message', handler);
|
||||
|
||||
// Initial handshake (send once)
|
||||
setTimeout(() => sendToRn({ type: 'initialized' }), 50);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user