ethan/fressh
1
0
Fork 0
mirror of https://github.com/EthanShoeDev/fressh.git synced 2026-01-11 06:12: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;

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 '@xterm/xterm/css/xterm.css';
/**
* Xterm setup
*/
const term = new Terminal({
allowProposedApi: true,
convertEol: true,
scrollback: 10000,
cursorBlink: true,
});
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;
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;
}
}
/**
* Post typed messages to React Native
@@ -30,158 +21,173 @@ const post = (msg: unknown) =>
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;
/**
* Initial handshake
*/
setTimeout(() => post({ type: 'initialized' }), 0);
// ---- Xterm setup
const term = new Terminal({
allowProposedApi: true,
convertEol: true,
scrollback: 10000,
cursorBlink: true,
});
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
/**
* 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 });
});
const root = document.getElementById('terminal')!;
term.open(root);
fitAddon.fit();
/**
* 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) 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' };
// Expose for debugging (typed)
window.terminal = term;
window.fitAddon = fitAddon;
if (!msg || typeof msg.type !== 'string') return;
// Encode helper
const enc = new TextEncoder();
switch (msg.type) {
case 'write': {
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);
// Initial handshake (send once)
setTimeout(() => post({ type: 'initialized' }), 8_000);
// 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 });
});
// 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);
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({
type: 'debug',
message: `write(chunks=${msg.chunks.length})`,
});
break;
}
break;
}
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})` });
}
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 ?? ''})`,
});
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})` });
}
fitAddon.fit();
break;
}
break;
}
case 'setTheme': {
const { background, foreground } = msg;
const theme: Partial<import('@xterm/xterm').ITheme> = {};
if (background) {
theme.background = background;
document.body.style.backgroundColor = background;
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; // 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) {
term.options = { theme }; // set only theme
post({
type: 'debug',
message: `setTheme(bg=${background ?? ''}, fg=${foreground ?? ''})`,
});
case 'setTheme': {
const { background, foreground } = msg;
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;
}
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();
case 'setOptions': {
const opts = msg.opts ?? {};
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;
}
break;
}
case 'clear': {
term.clear();
post({ type: 'debug', message: 'clear()' });
break;
}
case 'clear': {
term.clear();
post({ type: 'debug', message: 'clear()' });
break;
}
case 'focus': {
term.focus();
post({ type: 'debug', message: 'focus()' });
break;
case 'focus': {
term.focus();
post({ type: 'debug', message: 'focus()' });
break;
}
}
} catch (err) {
post({ type: 'debug', message: `message handler error: ${String(err)}` });
}
} 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;