Upgrade wasmer js

components/apps/Terminal/loadWapm.ts

@@ -1,20 +1,27 @@
 import { config } from "components/apps/Terminal/config";
 import type { LocalEcho } from "components/apps/Terminal/types";
+import type { WASI as IWASI } from "node_modules/@wasmer/wasi/dist/pkg/wasmer_wasi_js";
 
 type WASIError = Error & {
   code: number;
 };
 
+interface IWasmerWasi {
+  WASI: typeof IWASI;
+  init: () => Promise<WebAssembly.Exports>;
+}
+
 const loadWapm = async (
   commandArgs: string[],
   localEcho: LocalEcho
 ): Promise<void> => {
   const { fetchCommandFromWAPM } = await import("@wasmer/wasm-terminal");
   const { lowerI64Imports } = await import("@wasmer/wasm-transformer");
-  const { WASI } = await import("@wasmer/wasi");
-  const { WasmFs } = await import("@wasmer/wasmfs");
+  const { init, WASI } = (await import("@wasmer/wasi")) as IWasmerWasi;
 
   try {
+    await init();
+
     const wasmBinary = await fetchCommandFromWAPM({ args: commandArgs });
 
     if (
@@ -28,30 +35,20 @@ const loadWapm = async (
 
     if (moduleResponse !== undefined && moduleResponse instanceof Uint8Array) {
       const wasmModule = await WebAssembly.compile(moduleResponse);
-      const wasmFs = new WasmFs();
       const wasi = new WASI({
         args: commandArgs,
-        bindings: {
-          ...WASI.defaultBindings,
-          fs: wasmFs.fs,
-        },
         env: {
-          COLUMNS: config.cols as unknown as string,
-          LINES: config.rows as unknown as string,
+          COLUMNS: config.cols?.toString(),
+          LINES: config.rows?.toString(),
         },
       });
       const instance = await WebAssembly.instantiate(
         wasmModule,
-        wasi.getImports(wasmModule)
+        wasi.getImports(wasmModule) as WebAssembly.Imports
       );
 
       wasi.start(instance);
-
-      const output = await wasmFs.getStdOut();
-
-      if (typeof output === "string") {
-        localEcho?.print(output);
-      }
+      localEcho?.print(wasi.getStdoutString());
     }
   } catch (error) {
     const { message } = error as WASIError;

components/apps/Terminal/wasmerWasi.d.ts

@@ -0,0 +1 @@
+declare module "@wasmer/wasi";

next.config.js

@@ -36,6 +36,7 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: !isProduction,
   webpack: (config) => {
+    config.externals.push("wasmer_wasi_js_bg.wasm");
     config.plugins.push(
       new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
         const mod = resource.request.replace(/^node:/, "");

package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.4.5",
     "@panzoom/panzoom": "^4.5.1",
-    "@wasmer/wasi": "0.12.0",
+    "@wasmer/wasi": "^1.1.2",
     "@wasmer/wasm-terminal": "^0.12.0",
     "@wasmer/wasm-transformer": "^0.12.0",
     "@wasmer/wasmfs": "^0.12.0",

yarn.lock

@@ -1218,7 +1218,7 @@
   resolved "https://registry.yarnpkg.com/@wasmer/io-devices/-/io-devices-0.12.0.tgz#c9e10dba0b3eeff6aab8857d5b84a9bafde82fc8"
   integrity sha512-CiuhJPnNVZp2G1V5UHKSWMb2bIsiGn+78u9h3/3CNUNdzQ9W9ALGSXxzeieaSEUa3QL7HQC1DiE+IN2mXUv6Dw==
 
-"@wasmer/wasi@0.12.0", "@wasmer/wasi@^0.12.0":
+"@wasmer/wasi@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@wasmer/wasi/-/wasi-0.12.0.tgz#89c7c5e5ba58f7dfae4e323359346639c4ec382a"
   integrity sha512-FJhLZKAfLWm/yjQI7eCRHNbA8ezmb7LSpUYFkHruZXs2mXk2+DaQtSElEtOoNrVQ4vApTyVaAd5/b7uEu8w6wQ==
@@ -1228,6 +1228,11 @@
     path-browserify "^1.0.0"
     randomfill "^1.0.4"
 
+"@wasmer/wasi@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@wasmer/wasi/-/wasi-1.1.2.tgz#c99faf45bfc7ff464dfd4bec661320c4073c268b"
+  integrity sha512-c1h7L2qPviV6n+ny2fYboFPFL4RbvCqYckDPfpWMUOqX+QIt83EnMnYfeWNwWbUAIku087qj3cBJzcqY+HbHxw==
+
 "@wasmer/wasm-terminal@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@wasmer/wasm-terminal/-/wasm-terminal-0.12.0.tgz#f160466fda6c709ccd1e8ca5b7bc4dca48a0c562"