ethan/fressh
1
0
Fork 0
mirror of https://github.com/EthanShoeDev/fressh.git synced 2026-01-11 14:22:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

more stuff

Browse Source
This commit is contained in:
EthanShoeDev
2025-09-17 21:08:58 -04:00
parent b5410f0394
commit beb3b5fc6c
4 changed files with 176 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/mobile/src/app/(tabs)/shell/detail.tsx
View File

@@ -19,8 +19,8 @@ export default function TabsShellDetail() {
function ShellDetail() { function ShellDetail() {
const xtermRef = useRef<XtermWebViewHandle>(null); const xtermRef = useRef<XtermWebViewHandle>(null);
const terminalReadyRef = useRef(false); // gate for initial SSH output buffering const terminalReadyRef = useRef(false);
const pendingOutputRef = useRef<Uint8Array[]>([]); // bytes we got before xterm init const pendingOutputRef = useRef<Uint8Array[]>([]);
const { connectionId, channelId } = useLocalSearchParams<{ const { connectionId, channelId } = useLocalSearchParams<{
connectionId?: string; connectionId?: string;
@@ -38,24 +38,19 @@ function ShellDetail() {
? RnRussh.getSshShell(String(connectionId), channelIdNum) ? RnRussh.getSshShell(String(connectionId), channelIdNum)
: undefined; : undefined;
/** // SSH -> xterm (remote output). Buffer until xterm is initialized.
* SSH -> xterm (remote output)
* If xterm isn't ready yet, buffer and flush on 'initialized'.
*/
useEffect(() => { useEffect(() => {
if (!connection) return; if (!connection) return;
const xterm = xtermRef.current; const xterm = xtermRef.current;
const listenerId = connection.addChannelListener((ab: ArrayBuffer) => { const listenerId = connection.addChannelListener((ab: ArrayBuffer) => {
const bytes = new Uint8Array(ab); const bytes = new Uint8Array(ab);
if (!terminalReadyRef.current) { if (!terminalReadyRef.current) {
// Buffer until WebView->xterm has signaled 'initialized'
pendingOutputRef.current.push(bytes); pendingOutputRef.current.push(bytes);
// Debug
console.log('SSH->buffer', { len: bytes.length }); console.log('SSH->buffer', { len: bytes.length });
return; return;
} }
// Forward bytes immediately
console.log('SSH->xterm', { len: bytes.length }); console.log('SSH->xterm', { len: bytes.length });
xterm?.write(bytes); xterm?.write(bytes);
}); });
@@ -104,7 +99,7 @@ function ShellDetail() {
<XtermJsWebView <XtermJsWebView
ref={xtermRef} ref={xtermRef}
style={{ flex: 1 }} style={{ flex: 1 }}
// WebView controls that make terminals feel right: // WebView behavior that suits terminals
keyboardDisplayRequiresUserAction={false} keyboardDisplayRequiresUserAction={false}
setSupportMultipleWindows={false} setSupportMultipleWindows={false}
overScrollMode="never" overScrollMode="never"
@@ -115,25 +110,21 @@ function ShellDetail() {
textZoom={100} textZoom={100}
allowsLinkPreview={false} allowsLinkPreview={false}
textInteractionEnabled={false} textInteractionEnabled={false}
onRenderProcessGone={() => { // xterm-ish props (applied via setOptions inside the page)
console.log('WebView render process gone, clearing terminal');
xtermRef.current?.clear?.();
}}
onContentProcessDidTerminate={() => {
console.log(
'WKWebView content process terminated, clearing terminal',
);
xtermRef.current?.clear?.();
}}
// xterm-flavored props for styling/behavior
fontFamily="Menlo, ui-monospace, monospace" fontFamily="Menlo, ui-monospace, monospace"
fontSize={15} fontSize={18} // bump if it still feels small
cursorBlink cursorBlink
scrollback={10000} scrollback={10000}
themeBackground={theme.colors.background} themeBackground={theme.colors.background}
themeForeground={theme.colors.textPrimary} themeForeground={theme.colors.textPrimary}
// page load => we can push initial options/theme right away; onRenderProcessGone={() => {
// xterm itself will still send 'initialized' once it's truly ready. console.log('WebView render process gone -> clear()');
xtermRef.current?.clear?.();
}}
onContentProcessDidTerminate={() => {
console.log('WKWebView content process terminated -> clear()');
xtermRef.current?.clear?.();
}}
onLoadEnd={() => { onLoadEnd={() => {
console.log('WebView onLoadEnd'); console.log('WebView onLoadEnd');
}} }}
@@ -142,7 +133,7 @@ function ShellDetail() {
if (m.type === 'initialized') { if (m.type === 'initialized') {
terminalReadyRef.current = true; terminalReadyRef.current = true;
// Flush any buffered SSH output (welcome banners, etc.) // Flush buffered banner/welcome lines
if (pendingOutputRef.current.length) { if (pendingOutputRef.current.length) {
const total = pendingOutputRef.current.reduce( const total = pendingOutputRef.current.reduce(
(n, a) => n + a.length, (n, a) => n + a.length,
@@ -159,13 +150,11 @@ function ShellDetail() {
xtermRef.current?.flush?.(); xtermRef.current?.flush?.();
} }
// Focus after ready to pop the soft keyboard (iOS needs this prop) // Focus to pop the keyboard (iOS needs the prop we set)
xtermRef.current?.focus?.(); xtermRef.current?.focus?.();
return; return;
} }
if (m.type === 'data') { if (m.type === 'data') {
// xterm user input -> SSH
// NOTE: msg.data is a fresh Uint8Array starting at offset 0
console.log('xterm->SSH', { len: m.data.length }); console.log('xterm->SSH', { len: m.data.length });
void shell?.sendData(m.data.buffer as ArrayBuffer); void shell?.sendData(m.data.buffer as ArrayBuffer);
return; return;

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

@@ -3,25 +3,16 @@ import { FitAddon } from '@xterm/addon-fit';
import { Base64 } from 'js-base64'; import { Base64 } from 'js-base64';
import '@xterm/xterm/css/xterm.css'; import '@xterm/xterm/css/xterm.css';
/** declare global {
* Xterm setup interface Window {
*/ terminal?: Terminal;
const term = new Terminal({ fitAddon?: FitAddon;
allowProposedApi: true, terminalWriteBase64?: (data: string) => void;
convertEol: true, ReactNativeWebView?: { postMessage?: (data: string) => void };
scrollback: 10000, __FRESSH_XTERM_BRIDGE__?: boolean;
cursorBlink: true, __FRESSH_XTERM_MSG_HANDLER__?: (e: MessageEvent<string>) => void;
}); }
const fitAddon = new FitAddon(); }
term.loadAddon(fitAddon);
const root = document.getElementById('terminal')!;
term.open(root);
fitAddon.fit();
// Expose for debugging (typed via vite-env.d.ts)
window.terminal = term;
window.fitAddon = fitAddon;
/** /**
* Post typed messages to React Native * Post typed messages to React Native
@@ -30,158 +21,173 @@ const post = (msg: unknown) =>
window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg)); window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg));
/** /**
* Encode helper * Idempotent boot guard: ensure we only install once.
* If the script happens to run twice (dev reloads, double-mounts), we bail out early.
*/ */
const enc = new TextEncoder(); if (window.__FRESSH_XTERM_BRIDGE__) {
post({
type: 'debug',
message: 'bridge already installed; ignoring duplicate boot',
});
} else {
window.__FRESSH_XTERM_BRIDGE__ = true;
/** // ---- Xterm setup
* Initial handshake const term = new Terminal({
*/ allowProposedApi: true,
setTimeout(() => post({ type: 'initialized' }), 0); convertEol: true,
scrollback: 10000,
cursorBlink: true,
});
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
/** const root = document.getElementById('terminal')!;
* User input from xterm -> RN (SSH) term.open(root);
* Send UTF-8 bytes only (Base64-encoded) fitAddon.fit();
*/
term.onData((data /* string */) => {
const bytes = enc.encode(data);
const b64 = Base64.fromUint8Array(bytes);
post({ type: 'input', b64 });
});
/** // Expose for debugging (typed)
* RN -> WebView control/data window.terminal = term;
* Supported: write, resize, setFont, setTheme, setOptions, clear, focus window.fitAddon = fitAddon;
* 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) 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; // Encode helper
const enc = new TextEncoder();
switch (msg.type) { // Initial handshake (send once)
case 'write': { setTimeout(() => post({ type: 'initialized' }), 8_000);
if (typeof msg.b64 === 'string') {
const bytes = Base64.toUint8Array(msg.b64); // User input from xterm -> RN (SSH) as UTF-8 bytes (Base64)
term.write(bytes); term.onData((data /* string */) => {
post({ type: 'debug', message: `write(bytes=${bytes.length})` }); const bytes = enc.encode(data);
} else if (Array.isArray(msg.chunks)) { const b64 = Base64.fromUint8Array(bytes);
for (const b64 of msg.chunks) { post({ type: 'input', b64 });
const bytes = Base64.toUint8Array(b64); });
// Remove old handler if any (just in case)
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>) => {
try {
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': {
if (typeof msg.b64 === 'string') {
const bytes = Base64.toUint8Array(msg.b64);
term.write(bytes); 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})`,
});
} }
post({ break;
type: 'debug',
message: `write(chunks=${msg.chunks.length})`,
});
} }
break;
}
case 'resize': { case 'resize': {
// Prefer fitAddon.fit(); only call resize if explicit cols/rows provided. if (typeof msg.cols === 'number' && typeof msg.rows === 'number') {
if (typeof msg.cols === 'number' && typeof msg.rows === 'number') { term.resize(msg.cols, msg.rows);
term.resize(msg.cols, msg.rows); post({ type: 'debug', message: `resize(${msg.cols}x${msg.rows})` });
post({ type: 'debug', message: `resize(${msg.cols}x${msg.rows})` }); }
}
fitAddon.fit();
break;
}
case 'setFont': {
const { family, size } = msg;
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(); fitAddon.fit();
break;
} }
break;
}
case 'setTheme': { case 'setFont': {
const { background, foreground } = msg; const { family, size } = msg;
const theme: Partial<import('@xterm/xterm').ITheme> = {}; const patch: Partial<import('@xterm/xterm').ITerminalOptions> = {};
if (background) { if (family) patch.fontFamily = family;
theme.background = background; if (typeof size === 'number') patch.fontSize = size;
document.body.style.backgroundColor = background; 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;
} }
if (foreground) theme.foreground = foreground;
if (Object.keys(theme).length) { case 'setTheme': {
term.options = { theme }; // set only theme const { background, foreground } = msg;
post({ const theme: Partial<import('@xterm/xterm').ITheme> = {};
type: 'debug', if (background) {
message: `setTheme(bg=${background ?? ''}, fg=${foreground ?? ''})`, 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;
} }
break;
}
case 'setOptions': { case 'setOptions': {
const opts = msg.opts ?? {}; const opts = msg.opts ?? {};
// Filter out cols/rows defensively const { cursorBlink, scrollback, fontFamily, fontSize } = opts;
const { cursorBlink, scrollback, fontFamily, fontSize } = opts; const patch: Partial<import('@xterm/xterm').ITerminalOptions> = {};
const patch: Partial<import('@xterm/xterm').ITerminalOptions> = {}; if (typeof cursorBlink === 'boolean') patch.cursorBlink = cursorBlink;
if (typeof cursorBlink === 'boolean') patch.cursorBlink = cursorBlink; if (typeof scrollback === 'number') patch.scrollback = scrollback;
if (typeof scrollback === 'number') patch.scrollback = scrollback; if (fontFamily) patch.fontFamily = fontFamily;
if (fontFamily) patch.fontFamily = fontFamily; if (typeof fontSize === 'number') patch.fontSize = fontSize;
if (typeof fontSize === 'number') patch.fontSize = fontSize; if (Object.keys(patch).length) {
if (Object.keys(patch).length) { term.options = patch;
term.options = patch; post({
post({ type: 'debug',
type: 'debug', message: `setOptions(${Object.keys(patch).join(',')})`,
message: `setOptions(${Object.keys(patch).join(',')})`, });
}); if (patch.fontFamily || patch.fontSize) fitAddon.fit();
if (patch.fontFamily || patch.fontSize) fitAddon.fit(); }
break;
} }
break;
}
case 'clear': { case 'clear': {
term.clear(); term.clear();
post({ type: 'debug', message: 'clear()' }); post({ type: 'debug', message: 'clear()' });
break; break;
} }
case 'focus': { case 'focus': {
term.focus(); term.focus();
post({ type: 'debug', message: 'focus()' }); post({ type: 'debug', message: 'focus()' });
break; break;
}
} }
} catch (err) {
post({ type: 'debug', message: `message handler error: ${String(err)}` });
} }
} catch (err) { };
post({ type: 'debug', message: `message handler error: ${String(err)}` });
}
});
/** window.__FRESSH_XTERM_MSG_HANDLER__ = handler;
* Keep terminal size in sync with container window.addEventListener('message', handler);
*/ }
new ResizeObserver(() => {
try {
fitAddon.fit();
} catch (err) {
post({ type: 'debug', message: `resize observer error: ${String(err)}` });
}
});

9
packages/react-native-xtermjs-webview/src-internal/vite-env.d.ts vendored
View File

@@ -1,10 +1 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
interface Window {
terminal?: Terminal;
fitAddon?: FitAddon;
terminalWriteBase64?: (data: string) => void;
ReactNativeWebView?: {
postMessage?: (data: string) => void;
};
}

2
packages/react-native-xtermjs-webview/src/index.tsx
View File

@@ -56,7 +56,7 @@ export interface XtermJsWebViewProps
ref: React.RefObject<XtermWebViewHandle | null>; ref: React.RefObject<XtermWebViewHandle | null>;
onMessage?: (msg: XtermInbound) => void; onMessage?: (msg: XtermInbound) => void;
// xterm-ish props (applied via setOptions before/after init) // xterm-ish props
fontFamily?: string; fontFamily?: string;
fontSize?: number; fontSize?: number;
cursorBlink?: boolean; cursorBlink?: boolean;