mirror of
https://github.com/khairul169/vaulterm.git
synced 2026-09-15 17:03:30 +07:00
update working ssh shell
This commit is contained in:
@@ -7,6 +7,7 @@
|
||||
"icon": "./assets/images/icon.png",
|
||||
"scheme": "myapp",
|
||||
"userInterfaceStyle": "automatic",
|
||||
"newArchEnabled": true,
|
||||
"splash": {
|
||||
"image": "./assets/images/splash.png",
|
||||
"resizeMode": "contain",
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
import { ScrollViewStyleReset } from "expo-router/html";
|
||||
import { type PropsWithChildren } from "react";
|
||||
|
||||
/**
|
||||
* This file is web-only and used to configure the root HTML for every web page during static rendering.
|
||||
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
|
||||
*/
|
||||
export default function Root({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
|
||||
{/*
|
||||
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
|
||||
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
|
||||
*/}
|
||||
<ScrollViewStyleReset />
|
||||
|
||||
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
|
||||
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
|
||||
{/* Add any additional <head> elements that you want globally available on web... */}
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
const responsiveBackground = `
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #000;
|
||||
}
|
||||
}`;
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
import { useFonts } from "expo-font";
|
||||
import { Stack } from "expo-router";
|
||||
import * as SplashScreen from "expo-splash-screen";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { useEffect } from "react";
|
||||
import "react-native-reanimated";
|
||||
|
||||
@@ -13,7 +14,7 @@ import "react-native-reanimated";
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
export default function RootLayout() {
|
||||
const colorScheme = "dark";
|
||||
const colorScheme: string = "light";
|
||||
const [loaded] = useFonts({
|
||||
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
|
||||
});
|
||||
@@ -33,6 +34,7 @@ export default function RootLayout() {
|
||||
<Stack>
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
<StatusBar style="auto" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import { Stack } from "expo-router";
|
||||
import Terminal from "@/components/containers/terminal";
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Stack.Screen options={{ title: "Home" }} />
|
||||
<Text>HomePage</Text>
|
||||
|
||||
<Terminal wsUrl="ws://10.0.0.100:3000/ws" />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,139 @@
|
||||
import React, { ComponentPropsWithoutRef } from "react";
|
||||
import XTermJs, { XTermRef } from "./xtermjs";
|
||||
import Ionicons from "@expo/vector-icons/Ionicons";
|
||||
import {
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextStyle,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
const Keys = {
|
||||
ArrowLeft: "\x1b[D",
|
||||
ArrowRight: "\x1b[C",
|
||||
ArrowUp: "\x1b[A",
|
||||
ArrowDown: "\x1b[B",
|
||||
Enter: "\x0D",
|
||||
Escape: "\x1b",
|
||||
Home: "\x1b[H",
|
||||
End: "\x1b[F",
|
||||
PageUp: "\x1b[5~",
|
||||
PageDown: "\x1b[6~",
|
||||
Alt: "\x1b",
|
||||
Tab: "\x09",
|
||||
};
|
||||
|
||||
type TerminalProps = ComponentPropsWithoutRef<typeof View> & {
|
||||
wsUrl: string;
|
||||
};
|
||||
|
||||
const Terminal = ({ wsUrl, style, ...props }: TerminalProps) => {
|
||||
const ref = React.useRef<XTermRef>(null);
|
||||
|
||||
const send = (data: string) => {
|
||||
ref.current?.send(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, style]} {...props}>
|
||||
<XTermJs ref={ref} dom={{ scrollEnabled: false }} wsUrl={wsUrl} />
|
||||
|
||||
<ScrollView
|
||||
horizontal
|
||||
style={{ flexGrow: 0 }}
|
||||
contentContainerStyle={styles.buttons}
|
||||
>
|
||||
<TerminalButton
|
||||
title={<Ionicons name="swap-horizontal" color="white" size={16} />}
|
||||
onPress={() => send(Keys.Tab)}
|
||||
/>
|
||||
<TerminalButton title="ESC" onPress={() => send(Keys.Escape)} />
|
||||
<TerminalButton
|
||||
title={<Ionicons name="home" color="white" size={16} />}
|
||||
onPress={() => send(Keys.Home)}
|
||||
/>
|
||||
<TerminalButton
|
||||
title={<Ionicons name="arrow-back" color="white" size={18} />}
|
||||
onPress={() => send(Keys.ArrowLeft)}
|
||||
/>
|
||||
<TerminalButton
|
||||
title={<Ionicons name="arrow-up" color="white" size={18} />}
|
||||
onPress={() => send(Keys.ArrowUp)}
|
||||
/>
|
||||
<TerminalButton
|
||||
title={<Ionicons name="arrow-down" color="white" size={18} />}
|
||||
onPress={() => send(Keys.ArrowDown)}
|
||||
/>
|
||||
<TerminalButton
|
||||
title={<Ionicons name="arrow-forward" color="white" size={18} />}
|
||||
onPress={() => send(Keys.ArrowRight)}
|
||||
/>
|
||||
<TerminalButton title="Enter" onPress={() => send(Keys.Enter)} />
|
||||
<TerminalButton title="End" onPress={() => send(Keys.End)} />
|
||||
<TerminalButton title="PgUp" onPress={() => send(Keys.PageUp)} />
|
||||
<TerminalButton title="PgDn" onPress={() => send(Keys.PageDown)} />
|
||||
{/* <TerminalButton title="Alt" onPress={() => send(Keys.Alt)} /> */}
|
||||
<TerminalButton title="^C" onPress={() => send("\x03")} />
|
||||
<TerminalButton title="^D" onPress={() => send("\x04")} />
|
||||
<TerminalButton title="^Q" onPress={() => send("\x11")} />
|
||||
<TerminalButton title="^V" onPress={() => send("\x11")} />
|
||||
<TerminalButton title="^S" onPress={() => send("\x13")} />
|
||||
<TerminalButton title="^W" onPress={() => send("\x18")} />
|
||||
<TerminalButton title="^X" onPress={() => send("\x18")} />
|
||||
<TerminalButton title="^Z" onPress={() => send("\x1a")} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const TerminalButton = ({
|
||||
title,
|
||||
textStyle,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<typeof Pressable> & {
|
||||
title: string | React.ReactNode;
|
||||
textStyle?: StyleProp<TextStyle>;
|
||||
}) => (
|
||||
<Pressable
|
||||
style={({ pressed }) => [styles.btn, pressed && styles.btnPressed]}
|
||||
{...props}
|
||||
>
|
||||
{typeof title === "string" ? (
|
||||
<Text style={[styles.btnText, textStyle]}>{title}</Text>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#232323",
|
||||
},
|
||||
buttons: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "stretch",
|
||||
backgroundColor: "#232323",
|
||||
},
|
||||
btn: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
btnPressed: {
|
||||
backgroundColor: "#3a3a3a",
|
||||
},
|
||||
btnText: {
|
||||
color: "white",
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
|
||||
export default Terminal;
|
||||
@@ -0,0 +1,130 @@
|
||||
"use dom";
|
||||
|
||||
import React, { CSSProperties, FC, forwardRef, useEffect, useRef } from "react";
|
||||
import {
|
||||
DOMImperativeFactory,
|
||||
DOMProps,
|
||||
useDOMImperativeHandle,
|
||||
} from "expo/dom";
|
||||
import { Terminal as XTerm } from "@xterm/xterm";
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import { FitAddon } from "@xterm/addon-fit/src/FitAddon";
|
||||
import { AttachAddon } from "@xterm/addon-attach/src/AttachAddon";
|
||||
import { JSONValue } from "expo/build/dom/dom.types";
|
||||
|
||||
type XTermJsProps = {
|
||||
onLoad?: () => void;
|
||||
dom?: DOMProps;
|
||||
style?: CSSProperties;
|
||||
wsUrl: string;
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const IS_DOM = typeof ReactNativeWebView !== "undefined";
|
||||
|
||||
export interface XTermRef extends DOMImperativeFactory {
|
||||
send: (...args: JSONValue[]) => void;
|
||||
}
|
||||
|
||||
const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const { wsUrl, onLoad, style = {} } = props;
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const xterm = new XTerm();
|
||||
xterm.open(container);
|
||||
|
||||
const fitAddon = new FitAddon();
|
||||
xterm.loadAddon(fitAddon);
|
||||
fitAddon.fit();
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
const attachAddon = new AttachAddon(ws);
|
||||
xterm.loadAddon(attachAddon);
|
||||
|
||||
if (xterm.element) {
|
||||
xterm.element.style.height = "100%";
|
||||
}
|
||||
|
||||
if (IS_DOM) {
|
||||
xterm.focus();
|
||||
}
|
||||
|
||||
function resizeTerminal() {
|
||||
const { cols, rows } = xterm;
|
||||
ws.send(`\x01${cols},${rows}`);
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
fitAddon.fit();
|
||||
resizeTerminal();
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
resizeTerminal();
|
||||
}
|
||||
|
||||
function onClose(e: CloseEvent) {
|
||||
// Check if the close event was abnormal
|
||||
if (!e.wasClean) {
|
||||
const reason = e.reason || `Code: ${e.code}`;
|
||||
xterm.write(`\r\nConnection closed unexpectedly: ${reason}\r\n`);
|
||||
} else {
|
||||
xterm.write("\r\nConnection closed.\r\n");
|
||||
}
|
||||
}
|
||||
|
||||
ws.addEventListener("open", onOpen);
|
||||
ws.addEventListener("close", onClose);
|
||||
xterm.onResize(resizeTerminal);
|
||||
window.addEventListener("resize", onResize);
|
||||
onLoad?.();
|
||||
|
||||
return () => {
|
||||
xterm.dispose();
|
||||
wsRef.current = null;
|
||||
containerRef.current = null;
|
||||
|
||||
ws.close();
|
||||
ws.removeEventListener("open", onOpen);
|
||||
ws.removeEventListener("close", onClose);
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [wsUrl]);
|
||||
|
||||
useDOMImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
send: (...args) => {
|
||||
const ws = wsRef.current;
|
||||
if (ws?.readyState === ws?.OPEN && args[0]) {
|
||||
ws?.send(String(args[0]));
|
||||
}
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{
|
||||
flex: !IS_DOM ? 1 : undefined,
|
||||
width: "100%",
|
||||
height: IS_DOM ? "100vh" : undefined,
|
||||
overflow: "hidden",
|
||||
...style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export default XTermJs;
|
||||
+32
-24
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"license": "0BSD",
|
||||
"main": "expo-router/entry",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
@@ -16,35 +17,42 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^14.0.2",
|
||||
"@react-navigation/native": "^6.0.2",
|
||||
"@react-navigation/bottom-tabs": "7.0.0-rc.36",
|
||||
"@react-navigation/native": "7.0.0-rc.21",
|
||||
"@xterm/addon-attach": "^0.11.0",
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"expo": "~51.0.28",
|
||||
"expo-constants": "~16.0.2",
|
||||
"expo-font": "~12.0.9",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-router": "~3.5.23",
|
||||
"expo-splash-screen": "~0.27.5",
|
||||
"expo-status-bar": "~1.12.1",
|
||||
"expo-system-ui": "~3.0.7",
|
||||
"expo-web-browser": "~13.0.3",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-native": "0.74.5",
|
||||
"react-native-gesture-handler": "~2.16.1",
|
||||
"react-native-reanimated": "~3.10.1",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-web": "~0.19.10"
|
||||
"expo": "~52.0.0-preview.19",
|
||||
"expo-blur": "~14.0.1",
|
||||
"expo-constants": "~17.0.2",
|
||||
"expo-font": "~13.0.0",
|
||||
"expo-haptics": "~14.0.0",
|
||||
"expo-linking": "~7.0.2",
|
||||
"expo-router": "~4.0.0-preview.12",
|
||||
"expo-splash-screen": "~0.29.1",
|
||||
"expo-status-bar": "~2.0.0",
|
||||
"expo-symbols": "~0.2.0",
|
||||
"expo-system-ui": "~4.0.2",
|
||||
"expo-web-browser": "~14.0.0",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-native": "0.76.1",
|
||||
"react-native-gesture-handler": "~2.20.2",
|
||||
"react-native-reanimated": "~3.16.1",
|
||||
"react-native-safe-area-context": "4.12.0",
|
||||
"react-native-screens": "4.0.0-beta.16",
|
||||
"react-native-web": "~0.19.13",
|
||||
"react-native-webview": "^13.12.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
"@babel/core": "^7.25.2",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/react": "~18.2.45",
|
||||
"@types/react-test-renderer": "^18.0.7",
|
||||
"@types/react": "~18.3.12",
|
||||
"@types/react-test-renderer": "^18.3.0",
|
||||
"jest": "^29.2.1",
|
||||
"jest-expo": "~51.0.3",
|
||||
"react-test-renderer": "18.2.0",
|
||||
"typescript": "~5.3.3"
|
||||
"jest-expo": "~52.0.0-preview.3",
|
||||
"react-test-renderer": "18.3.1",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
Generated
+1310
-2108
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user