web

Author: TimeToogo

website/components/term/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from "react";
-import { TerminalEmulator as TerminalEmulatorInterface } from "../../services/wasm/tunshell_client";
+import type { TerminalEmulator as TerminalEmulatorInterface } from "../../services/wasm-client";
 import * as Styled from "./styled";
 
 export interface TerminalEmulatorProps {
@@ -58,7 +58,9 @@ export const TerminalEmulator = ({
     initialisedTerm.loadAddon(fitAddon);
     initialisedTerm.open(viewportRef.current);
 
-    await new Promise((r) => initialisedTerm.writeln("Welcome to the tunshell web terminal\r\n", r));
+    await new Promise<void>((resolve) =>
+      initialisedTerm.writeln("Welcome to the tunshell web terminal\r\n", () => resolve()),
+    );
 
     setTerm(initialisedTerm);
     setFitAddon(fitAddon);
@@ -82,7 +84,7 @@ export const TerminalEmulator = ({
             stop.dispose();
           });
         }),
-      write: (data) => new Promise<void>((r) => term.write(data, r)),
+      write: (data) => new Promise<void>((resolve) => term.write(data, () => resolve())),
       size: () => new Uint16Array([term.cols, term.rows]),
       clone: () => ({ ...emulator }),
     };

website/components/tunshell-client/index.tsx

@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 import { TunshellWasm } from "../../services/tunshell-wasm";
 import { useEffect, useState } from "react";
-import { TerminalEmulator as TerminalEmulatorInterface } from "../../services/wasm/tunshell_client";
+import type { TerminalEmulator as TerminalEmulatorInterface } from "../../services/wasm-client";
 import { TerminalEmulator } from "../term";
 import { SessionKeys } from "../../services/session";
 
@@ -46,4 +46,5 @@ export const TunshellClient = dynamic<TunshellClientProps>({
       );
     };
   },
+  ssr: false,
 });

website/package-lock.json

@@ -22,6 +22,6 @@
     "@types/react": "^18.2.55",
     "@types/styled-components": "^5.1.2",
     "babel-plugin-styled-components": "^1.11.1",
-    "typescript": "^3.8.3"
+    "typescript": "^4.9.5"
   }
 }

website/package.json

@@ -1,16 +1,14 @@
-import { TerminalEmulator } from "./wasm/tunshell_client";
+import { loadTunshellClientModule, TerminalEmulator, TunshellClientModule } from "./wasm-client";
 import { SessionKeys } from "./session";
 
-type ClientModule = typeof import("./wasm/tunshell_client");
-
 export class TunshellWasm {
-  private module: ClientModule;
-  private terminateCallback: () => void | undefined;
+  private module: TunshellClientModule;
+  private terminateCallback?: () => void;
 
   constructor() {}
 
   init = async () => {
-    let module = await import("./wasm/tunshell_client").catch((e) => {
+    let module = await loadTunshellClientModule().catch((e) => {
       console.error(e);
       throw e;
     });
@@ -19,8 +17,8 @@ export class TunshellWasm {
   };
 
   connect = async (session: SessionKeys, emulator: TerminalEmulator) => {
-    let terminatePromise = new Promise((resolve) => {
-      this.terminateCallback = resolve;
+    let terminatePromise = new Promise<void>((resolve) => {
+      this.terminateCallback = () => resolve();
     });
 
     const config = new this.module.BrowserConfig(

website/services/tunshell-wasm.ts

@@ -0,0 +1,48 @@
+import * as wasmBindings from "./wasm/tunshell_client_bg.js";
+
+export interface TerminalEmulator {
+  data: () => Promise<string>;
+  resize: () => Promise<Uint16Array>;
+  write: (data: string | Uint8Array) => Promise<void>;
+  size: () => Uint16Array;
+  clone: () => TerminalEmulator;
+}
+
+type WasmBindingModule = typeof import("./wasm/tunshell_client_bg.js");
+type WasmExports = WebAssembly.Exports & {
+  __wbindgen_start: () => void;
+};
+
+export interface TunshellClientModule {
+  BrowserConfig: WasmBindingModule["BrowserConfig"];
+  tunshell_init_client: WasmBindingModule["tunshell_init_client"];
+}
+
+let modulePromise: Promise<TunshellClientModule> | undefined;
+
+export const loadTunshellClientModule = async (): Promise<TunshellClientModule> => {
+  if (!modulePromise) {
+    modulePromise = (async () => {
+      const response = await fetch("/wasm/tunshell_client_bg.wasm");
+      if (!response.ok) {
+        throw new Error(`Failed to load the tunshell wasm module: ${response.status}`);
+      }
+
+      const source = await response.arrayBuffer();
+      const { instance } = await WebAssembly.instantiate(source, {
+        "./tunshell_client_bg.js": wasmBindings,
+      });
+
+      const wasm = instance.exports as WasmExports;
+      wasmBindings.__wbg_set_wasm(wasm);
+      wasm.__wbindgen_start();
+
+      return {
+        BrowserConfig: wasmBindings.BrowserConfig,
+        tunshell_init_client: wasmBindings.tunshell_init_client,
+      };
+    })();
+  }
+
+  return modulePromise;
+};

website/services/wasm-client.ts

@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "exclude": [
     "node_modules"