Skip to content

Commit

Permalink
feat(demo): use tabby as terminal emulator (#541)
Browse files Browse the repository at this point in the history
  • Loading branch information
yume-chan authored Apr 23, 2023
1 parent 0c304e9 commit 10f8128
Show file tree
Hide file tree
Showing 20 changed files with 888 additions and 313 deletions.
17 changes: 12 additions & 5 deletions packages/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"lint": "next lint"
},
"dependencies": {
"@angular/compiler": "^15.2.6",
"@fluentui/react": "^8.107.5",
"@fluentui/react-file-type-icons": "^8.8.13",
"@fluentui/react-hooks": "^8.6.20",
Expand All @@ -18,6 +19,7 @@
"@griffel/react": "^1.5.7",
"@yume-chan/adb": "workspace:^0.0.19",
"@yume-chan/adb-backend-direct-sockets": "workspace:^0.0.9",
"@yume-chan/adb-backend-proxy": "workspace:^0.0.9",
"@yume-chan/adb-backend-webusb": "workspace:^0.0.19",
"@yume-chan/adb-backend-ws": "workspace:^0.0.9",
"@yume-chan/adb-credential-web": "workspace:^0.0.19",
Expand All @@ -34,18 +36,23 @@
"@yume-chan/stream-extra": "workspace:^0.0.19",
"@yume-chan/stream-saver": "^2.0.6",
"@yume-chan/struct": "workspace:^0.0.19",
"@yume-chan/tabby-tango": "workspace:^0.0.19",
"@yume-chan/undici-browser": "5.21.2-mod.9",
"fflate": "^0.7.4",
"yaml": "^2.2.1",
"mobx": "^6.7.0",
"mobx-react-lite": "^3.4.3",
"next": "13.3.0",
"tabby-core": "^1.0.197-nightly.0",
"tabby-settings": "^1.0.197-nightly.0",
"tabby-terminal": "^1.0.197-nightly.0",
"tabby-community-color-schemes": "^1.0.197-nightly.0",
"tabby-web": "^1.0.197-nightly.0",
"tabby-web-container": "^1.0.197-nightly.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webm-muxer": "^2.2.3",
"xterm": "^5.1.0",
"xterm-addon-fit": "^0.7.0",
"xterm-addon-search": "^0.11.0",
"xterm-addon-webgl": "^0.14.0"
"rxjs": "^7.8.0",
"webm-muxer": "^2.2.3"
},
"devDependencies": {
"@mdx-js/loader": "^2.2.1",
Expand Down
24 changes: 24 additions & 0 deletions packages/demo/scripts/manifest.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,27 @@ fs.writeFileSync(
),
"utf8"
);

fs.writeFileSync(
new URL(
"../node_modules/tabby-web-container/dist/preload.mjs",
import.meta.url
),
"export {};\n" +
fs
.readFileSync(
new URL(
"../node_modules/tabby-web-container/dist/preload.js",
import.meta.url
),
"utf8"
)
.replaceAll(/__webpack_require__\.p \+ "(.+)"/g, (_, match) => {
return `new URL("./${match}", import.meta.url).toString()`;
})
.replaceAll(/__webpack_require__/g, "__webpack_require_nested__")
.replace(
"var scriptUrl;",
"var scriptUrl = import.meta.url.toString();"
)
);
19 changes: 0 additions & 19 deletions packages/demo/scripts/postinstall.js

This file was deleted.

21 changes: 11 additions & 10 deletions packages/demo/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
export * from './command-bar';
export * from './connect';
export * from './demo-mode-panel';
export * from './device-view';
export * from './error-dialog';
export * from './external-link';
export * from './grid';
export * from './hex-viewer';
export * from "./command-bar";
export * from "./connect";
export * from "./demo-mode-panel";
export * from "./device-view";
export * from "./error-dialog";
export * from "./external-link";
export * from "./grid";
export * from "./hex-viewer";
export * from "./list-selection";
export * from './log-view';
export * from './resize-observer';
export * from "./log-view";
export * from "./resize-observer";
export * from "./tabby-frame-manager";
80 changes: 80 additions & 0 deletions packages/demo/src/components/tabby-frame-manager.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { AdbProxyServer } from "@yume-chan/adb-backend-proxy";
import { autorun } from "mobx";
import getConfig from "next/config";
import { GLOBAL_STATE } from "../state";

let proxy: AdbProxyServer | undefined;
let resizeObserver: ResizeObserver | undefined;
let frame: HTMLIFrameElement | undefined;

function syncDevice() {
if (proxy) {
proxy.dispose();
proxy = undefined;
}

if (GLOBAL_STATE.device && frame) {
const proxy = new AdbProxyServer(GLOBAL_STATE.device);
const info = proxy.createPort();
frame.contentWindow?.postMessage(
{
type: "adb",
...info,
},
"*",
[info.port]
);
}
}

export function attachTabbyFrame(container: HTMLDivElement | null) {
if (container === null) {
if (resizeObserver !== undefined) {
resizeObserver.disconnect();
}
if (frame !== undefined) {
frame.style.visibility = "hidden";
}
return;
}

if (!frame) {
const {
publicRuntimeConfig: { basePath },
} = getConfig();

frame = document.createElement("iframe");
frame.src = `${basePath}/tabby-frame`;
frame.style.display = "block";
frame.style.position = "fixed";
frame.style.border = "none";
document.body.appendChild(frame);

window.addEventListener("message", (e) => {
// Wait for Tabby to be ready
if (e.source === frame?.contentWindow && e.data === "adb") {
syncDevice();
}
});

// Sync device when it's changed
autorun(syncDevice);
}

// Because re-parent an iframe will cause it to reload,
// use visibility to show/hide it
// and use a ResizeObserver to put it in the right place.
frame.style.visibility = "visible";
resizeObserver = new ResizeObserver(() => {
const { top, left, width, height } = container.getBoundingClientRect();
if (width === 0 || height === 0) {
// zero size makes xterm.js wrap lines incorrectly
return;
}
frame!.style.top = `${top}px`;
frame!.style.left = `${left}px`;
frame!.style.width = `${width}px`;
frame!.style.height = `${height}px`;
});
resizeObserver.observe(container);
}
112 changes: 0 additions & 112 deletions packages/demo/src/components/terminal.tsx

This file was deleted.

3 changes: 3 additions & 0 deletions packages/demo/src/pages/chrome-devtools-frame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ function ChromeDevToolsFrame() {
document.body.appendChild(script);
}, []);

// DevTools will set `document.title` to debugged page's title.
return (
<Stack
className={classes.body}
Expand All @@ -117,5 +118,7 @@ function ChromeDevToolsFrame() {
</Stack>
);
}

ChromeDevToolsFrame.noLayout = true;

export default ChromeDevToolsFrame;
Loading

0 comments on commit 10f8128

Please sign in to comment.