mirror of
https://github.com/yudai/gotty.git
synced 2026-01-02 15:48:50 +01:00
js: update to latest xtermjs
This commit is contained in:
Will Owens
parent
b5d904cb14
commit
a36a5a5d1e
9 changed files with 952 additions and 2028 deletions
8
Makefile
8
Makefile
|
|
@ -46,12 +46,12 @@ bindata/static/css/index.css: bindata/static/css resources/index.css
|
|||
bindata/static/css/xterm_customize.css: bindata/static/css resources/xterm_customize.css
|
||||
cp resources/xterm_customize.css bindata/static/css/xterm_customize.css
|
||||
|
||||
bindata/static/css/xterm.css: bindata/static/css js/node_modules/xterm/css/xterm.css
|
||||
cp js/node_modules/xterm/css/xterm.css bindata/static/css/xterm.css
|
||||
bindata/static/css/xterm.css: bindata/static/css js/node_modules/@xterm/xterm/css/xterm.css
|
||||
cp js/node_modules/@xterm/xterm/css/xterm.css bindata/static/css/xterm.css
|
||||
|
||||
js/node_modules/xterm/css/xterm.css:
|
||||
js/node_modules/@xterm/xterm/css/xterm.css:
|
||||
cd js && \
|
||||
npm install
|
||||
npm ci
|
||||
|
||||
js/dist/gotty-bundle.js: js/src/* js/node_modules/webpack
|
||||
cd js && \
|
||||
|
|
|
|||
2
js/dist/gotty-bundle.js
vendored
2
js/dist/gotty-bundle.js
vendored
File diff suppressed because one or more lines are too long
2
js/dist/gotty-bundle.js.map
vendored
2
js/dist/gotty-bundle.js.map
vendored
File diff suppressed because one or more lines are too long
7
js/dist/xterm.d.ts
vendored
7
js/dist/xterm.d.ts
vendored
|
|
@ -1,7 +1,6 @@
|
|||
/// <reference types="node" />
|
||||
import { lib } from "libapps";
|
||||
import { IDisposable, Terminal } from "xterm";
|
||||
import { FitAddon } from "xterm-addon-fit";
|
||||
import { IDisposable, Terminal } from "@xterm/xterm";
|
||||
import { FitAddon } from "@xterm/addon-fit";
|
||||
export declare class Xterm {
|
||||
elem: HTMLElement;
|
||||
term: Terminal;
|
||||
|
|
@ -9,7 +8,7 @@ export declare class Xterm {
|
|||
decoder: lib.UTF8Decoder;
|
||||
message: HTMLElement;
|
||||
messageTimeout: number;
|
||||
messageTimer: NodeJS.Timer;
|
||||
messageTimer: ReturnType<typeof setTimeout>;
|
||||
fitAddon: FitAddon;
|
||||
disposables: IDisposable[];
|
||||
constructor(elem: HTMLElement);
|
||||
|
|
|
|||
2671
js/package-lock.json
generated
2671
js/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,16 +1,16 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"license-loader": "^0.5.0",
|
||||
"license-loader": "^0.7.0",
|
||||
"ts-loader": "^9.1.2",
|
||||
"typescript": "^4.4.4",
|
||||
"typescript-formatter": "^7.2.2",
|
||||
"webpack": "^5",
|
||||
"webpack-cli": "^4.9.2"
|
||||
"webpack-cli": "^6"
|
||||
},
|
||||
"dependencies": {
|
||||
"libapps": "github:yudai/libapps#release-hterm-1.70",
|
||||
"xterm": "^5.3.0",
|
||||
"xterm-addon-fit": "^0.8.0",
|
||||
"xterm-addon-webgl": "^0.16.0"
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/addon-webgl": "^0.18.0",
|
||||
"libapps": "github:yudai/libapps#release-hterm-1.70"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
258
js/src/webtty.ts
258
js/src/webtty.ts
|
|
@ -1,148 +1,146 @@
|
|||
export const protocols = ["webtty"];
|
||||
|
||||
export const msgInputUnknown = '0';
|
||||
export const msgInput = '1';
|
||||
export const msgPing = '2';
|
||||
export const msgResizeTerminal = '3';
|
||||
|
||||
export const msgUnknownOutput = '0';
|
||||
export const msgOutput = '1';
|
||||
export const msgPong = '2';
|
||||
export const msgSetWindowTitle = '3';
|
||||
export const msgSetPreferences = '4';
|
||||
export const msgSetReconnect = '5';
|
||||
export const msgInputUnknown = "0";
|
||||
export const msgInput = "1";
|
||||
export const msgPing = "2";
|
||||
export const msgResizeTerminal = "3";
|
||||
|
||||
export const msgUnknownOutput = "0";
|
||||
export const msgOutput = "1";
|
||||
export const msgPong = "2";
|
||||
export const msgSetWindowTitle = "3";
|
||||
export const msgSetPreferences = "4";
|
||||
export const msgSetReconnect = "5";
|
||||
|
||||
export interface Terminal {
|
||||
info(): { columns: number, rows: number };
|
||||
output(data: string): void;
|
||||
showMessage(message: string, timeout: number): void;
|
||||
removeMessage(): void;
|
||||
setWindowTitle(title: string): void;
|
||||
setPreferences(value: object): void;
|
||||
onInput(callback: (input: string) => void): void;
|
||||
onResize(callback: (colmuns: number, rows: number) => void): void;
|
||||
reset(): void;
|
||||
deactivate(): void;
|
||||
close(): void;
|
||||
info(): { columns: number; rows: number };
|
||||
output(data: string): void;
|
||||
showMessage(message: string, timeout: number): void;
|
||||
removeMessage(): void;
|
||||
setWindowTitle(title: string): void;
|
||||
setPreferences(value: object): void;
|
||||
onInput(callback: (input: string) => void): void;
|
||||
onResize(callback: (colmuns: number, rows: number) => void): void;
|
||||
reset(): void;
|
||||
deactivate(): void;
|
||||
close(): void;
|
||||
}
|
||||
|
||||
export interface Connection {
|
||||
open(): void;
|
||||
close(): void;
|
||||
send(data: string): void;
|
||||
isOpen(): boolean;
|
||||
onOpen(callback: () => void): void;
|
||||
onReceive(callback: (data: string) => void): void;
|
||||
onClose(callback: () => void): void;
|
||||
open(): void;
|
||||
close(): void;
|
||||
send(data: string): void;
|
||||
isOpen(): boolean;
|
||||
onOpen(callback: () => void): void;
|
||||
onReceive(callback: (data: string) => void): void;
|
||||
onClose(callback: () => void): void;
|
||||
}
|
||||
|
||||
export interface ConnectionFactory {
|
||||
create(): Connection;
|
||||
create(): Connection;
|
||||
}
|
||||
|
||||
|
||||
export class WebTTY {
|
||||
term: Terminal;
|
||||
connectionFactory: ConnectionFactory;
|
||||
args: string;
|
||||
authToken: string;
|
||||
reconnect: number;
|
||||
term: Terminal;
|
||||
connectionFactory: ConnectionFactory;
|
||||
args: string;
|
||||
authToken: string;
|
||||
reconnect: number;
|
||||
|
||||
constructor(term: Terminal, connectionFactory: ConnectionFactory, args: string, authToken: string) {
|
||||
this.term = term;
|
||||
this.connectionFactory = connectionFactory;
|
||||
this.args = args;
|
||||
this.authToken = authToken;
|
||||
this.reconnect = -1;
|
||||
constructor(
|
||||
term: Terminal,
|
||||
connectionFactory: ConnectionFactory,
|
||||
args: string,
|
||||
authToken: string,
|
||||
) {
|
||||
this.term = term;
|
||||
this.connectionFactory = connectionFactory;
|
||||
this.args = args;
|
||||
this.authToken = authToken;
|
||||
this.reconnect = -1;
|
||||
}
|
||||
|
||||
open() {
|
||||
let connection = this.connectionFactory.create();
|
||||
let pingTimer: ReturnType<typeof setInterval>;
|
||||
let reconnectTimeout: NodeJS.Timeout;
|
||||
|
||||
const setup = () => {
|
||||
connection.onOpen(() => {
|
||||
const termInfo = this.term.info();
|
||||
|
||||
connection.send(
|
||||
JSON.stringify({
|
||||
Arguments: this.args,
|
||||
AuthToken: this.authToken,
|
||||
}),
|
||||
);
|
||||
|
||||
const resizeHandler = (colmuns: number, rows: number) => {
|
||||
connection.send(
|
||||
msgResizeTerminal +
|
||||
JSON.stringify({
|
||||
columns: colmuns,
|
||||
rows: rows,
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
this.term.onResize(resizeHandler);
|
||||
resizeHandler(termInfo.columns, termInfo.rows);
|
||||
|
||||
this.term.onInput((input: string) => {
|
||||
connection.send(msgInput + input);
|
||||
});
|
||||
|
||||
pingTimer = setInterval(() => {
|
||||
connection.send(msgPing);
|
||||
}, 30 * 1000);
|
||||
});
|
||||
|
||||
connection.onReceive((data) => {
|
||||
const payload = data.slice(1);
|
||||
switch (data[0]) {
|
||||
case msgOutput:
|
||||
this.term.output(atob(payload));
|
||||
break;
|
||||
case msgPong:
|
||||
break;
|
||||
case msgSetWindowTitle:
|
||||
this.term.setWindowTitle(payload);
|
||||
break;
|
||||
case msgSetPreferences:
|
||||
const preferences = JSON.parse(payload);
|
||||
this.term.setPreferences(preferences);
|
||||
break;
|
||||
case msgSetReconnect:
|
||||
const autoReconnect = JSON.parse(payload);
|
||||
console.log("Enabling reconnect: " + autoReconnect + " seconds");
|
||||
this.reconnect = autoReconnect;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
connection.onClose(() => {
|
||||
clearInterval(pingTimer);
|
||||
this.term.deactivate();
|
||||
this.term.showMessage("Connection Closed", 0);
|
||||
if (this.reconnect > 0) {
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
connection = this.connectionFactory.create();
|
||||
this.term.reset();
|
||||
setup();
|
||||
}, this.reconnect * 1000);
|
||||
}
|
||||
});
|
||||
|
||||
connection.open();
|
||||
};
|
||||
|
||||
open() {
|
||||
let connection = this.connectionFactory.create();
|
||||
let pingTimer: NodeJS.Timer;
|
||||
let reconnectTimeout: NodeJS.Timeout;
|
||||
|
||||
const setup = () => {
|
||||
connection.onOpen(() => {
|
||||
const termInfo = this.term.info();
|
||||
|
||||
connection.send(JSON.stringify(
|
||||
{
|
||||
Arguments: this.args,
|
||||
AuthToken: this.authToken,
|
||||
}
|
||||
));
|
||||
|
||||
|
||||
const resizeHandler = (colmuns: number, rows: number) => {
|
||||
connection.send(
|
||||
msgResizeTerminal + JSON.stringify(
|
||||
{
|
||||
columns: colmuns,
|
||||
rows: rows
|
||||
}
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
this.term.onResize(resizeHandler);
|
||||
resizeHandler(termInfo.columns, termInfo.rows);
|
||||
|
||||
this.term.onInput(
|
||||
(input: string) => {
|
||||
connection.send(msgInput + input);
|
||||
}
|
||||
);
|
||||
|
||||
pingTimer = setInterval(() => {
|
||||
connection.send(msgPing)
|
||||
}, 30 * 1000);
|
||||
|
||||
});
|
||||
|
||||
connection.onReceive((data) => {
|
||||
const payload = data.slice(1);
|
||||
switch (data[0]) {
|
||||
case msgOutput:
|
||||
this.term.output(atob(payload));
|
||||
break;
|
||||
case msgPong:
|
||||
break;
|
||||
case msgSetWindowTitle:
|
||||
this.term.setWindowTitle(payload);
|
||||
break;
|
||||
case msgSetPreferences:
|
||||
const preferences = JSON.parse(payload);
|
||||
this.term.setPreferences(preferences);
|
||||
break;
|
||||
case msgSetReconnect:
|
||||
const autoReconnect = JSON.parse(payload);
|
||||
console.log("Enabling reconnect: " + autoReconnect + " seconds")
|
||||
this.reconnect = autoReconnect;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
connection.onClose(() => {
|
||||
clearInterval(pingTimer);
|
||||
this.term.deactivate();
|
||||
this.term.showMessage("Connection Closed", 0);
|
||||
if (this.reconnect > 0) {
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
connection = this.connectionFactory.create();
|
||||
this.term.reset();
|
||||
setup();
|
||||
}, this.reconnect * 1000);
|
||||
}
|
||||
});
|
||||
|
||||
connection.open();
|
||||
}
|
||||
|
||||
setup();
|
||||
return () => {
|
||||
clearTimeout(reconnectTimeout);
|
||||
connection.close();
|
||||
}
|
||||
setup();
|
||||
return () => {
|
||||
clearTimeout(reconnectTimeout);
|
||||
connection.close();
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { lib } from "libapps";
|
||||
|
||||
import { IDisposable, Terminal } from "xterm";
|
||||
import { FitAddon } from "xterm-addon-fit";
|
||||
import { WebglAddon } from "xterm-addon-webgl";
|
||||
import { IDisposable, Terminal } from "@xterm/xterm";
|
||||
import { FitAddon } from "@xterm/addon-fit";
|
||||
import { WebglAddon } from "@xterm/addon-webgl";
|
||||
|
||||
import { waitForElement } from "./waitFor";
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ export class Xterm {
|
|||
|
||||
message: HTMLElement;
|
||||
messageTimeout: number;
|
||||
messageTimer: NodeJS.Timer;
|
||||
messageTimer: ReturnType<typeof setTimeout>;
|
||||
|
||||
fitAddon: FitAddon;
|
||||
disposables: IDisposable[] = [];
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue