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

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

@@ -3,9 +3,36 @@ import { FitAddon } from '@xterm/addon-fit';
import { Base64 } from 'js-base64';
import '@xterm/xterm/css/xterm.css';
declare global {
interface Window {
terminal?: Terminal;
fitAddon?: FitAddon;
terminalWriteBase64?: (data: string) => void;
ReactNativeWebView?: { postMessage?: (data: string) => void };
__FRESSH_XTERM_BRIDGE__?: boolean;
__FRESSH_XTERM_MSG_HANDLER__?: (e: MessageEvent<string>) => void;
}
}
/**
* Xterm setup
* Post typed messages to React Native
*/
const post = (msg: unknown) =>
window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg));
/**
* Idempotent boot guard: ensure we only install once.
* If the script happens to run twice (dev reloads, double-mounts), we bail out early.
*/
if (window.__FRESSH_XTERM_BRIDGE__) {
post({
type: 'debug',
message: 'bridge already installed; ignoring duplicate boot',
});
} else {
window.__FRESSH_XTERM_BRIDGE__ = true;
// ---- Xterm setup
const term = new Terminal({
allowProposedApi: true,
convertEol: true,
@@ -19,42 +46,30 @@ const root = document.getElementById('terminal')!;
term.open(root);
fitAddon.fit();
// Expose for debugging (typed via vite-env.d.ts)
// Expose for debugging (typed)
window.terminal = term;
window.fitAddon = fitAddon;
/**
* Post typed messages to React Native
*/
const post = (msg: unknown) =>
window.ReactNativeWebView?.postMessage?.(JSON.stringify(msg));
/**
* Encode helper
*/
// Encode helper
const enc = new TextEncoder();
/**
* Initial handshake
*/
setTimeout(() => post({ type: 'initialized' }), 0);
// Initial handshake (send once)
setTimeout(() => post({ type: 'initialized' }), 8_000);
/**
* User input from xterm -> RN (SSH)
* Send UTF-8 bytes only (Base64-encoded)
*/
// 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 });
});
/**
* 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>) => {
// 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[] }
@@ -95,7 +110,6 @@ window.addEventListener('message', (e: MessageEvent<string>) => {
}
case 'resize': {
// Prefer fitAddon.fit(); only call resize if explicit cols/rows provided.
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})` });
@@ -110,7 +124,7 @@ window.addEventListener('message', (e: MessageEvent<string>) => {
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
term.options = patch; // never spread existing options (avoids cols/rows setters)
post({
type: 'debug',
message: `setFont(${family ?? ''}, ${size ?? ''})`,
@@ -140,7 +154,6 @@ window.addEventListener('message', (e: MessageEvent<string>) => {
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;
@@ -173,15 +186,8 @@ window.addEventListener('message', (e: MessageEvent<string>) => {
} catch (err) {
post({ type: 'debug', message: `message handler error: ${String(err)}` });
}
});
};
/**
* Keep terminal size in sync with container
*/
new ResizeObserver(() => {
try {
fitAddon.fit();
} catch (err) {
post({ type: 'debug', message: `resize observer error: ${String(err)}` });
window.__FRESSH_XTERM_MSG_HANDLER__ = handler;
window.addEventListener('message', handler);
}
});

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

@@ -1,10 +1 @@
/// <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>;
onMessage?: (msg: XtermInbound) => void;
// xterm-ish props (applied via setOptions before/after init)
// xterm-ish props
fontFamily?: string;
fontSize?: number;
cursorBlink?: boolean;