wasm

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "wasm-pack build ./src/wasm --target web && next dev",
     "build": "next build",
     "build:wasm": "wasm-pack build ./src/wasm --target web",
     "start": "next start",
@@ -34,7 +34,9 @@
     "react-dom": "18.2.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
-    "semver": ""
+    "semver": "",
+    "wasm": "^1.0.0",
+    "wasm-pack": "^0.13.0"
   },
   "devDependencies": {
     "@types/node": "20.4.2",

src/providers/shell.tsx

@@ -1,68 +1,66 @@
-
-
 'use client';
 
 import * as React from 'react';
+import init, { Shell as WASMShell } from '@/wasm/pkg';
 
 const initialShellState: ShellState = {
   history: [] as Message[],
   user: 'guest',
   hostname: 'soohoonchoi.com',
-  shell: {} as Shell
-}
+  shell: {} as Shell,
+};
 
 const ShellStateReducer = (state: ShellState, action: ShellStateAction): ShellState => {
   switch (action.type) {
     case 'addHistory':
       return {
         ...state,
-        history: [...state.history, action.payload]
+        history: [...state.history, action.payload],
       };
     case 'clearHistory':
       return {
         ...state,
-        history: []
+        history: [],
       };
     case 'setUser':
       return {
         ...state,
-        user: action.payload
+        user: action.payload,
       };
     case 'setHostname':
       return {
         ...state,
-        hostname: action.payload
+        hostname: action.payload,
       };
     case 'setShell':
       return {
         ...state,
-        shell: action.payload
+        shell: action.payload,
       };
     default:
       return state;
   }
-}
+};
 
 interface ShellContext {
   history: {
     get: () => Message[];
     add: (message: Message) => void;
     clear: () => void;
-  },
+  };
   user: {
     get: () => string;
     set: (user: string) => void;
-  },
+  };
   hostname: {
     get: () => string;
     set: (hostname: string) => void;
-  },
+  };
   execute: (command: string) => string;
 }
 
 const ShellContext = React.createContext<ShellContext | undefined>(undefined);
 
-
 export function useShell() {
   const context = React.useContext(ShellContext);
   if (!context) {
@@ -77,38 +75,29 @@ export function ShellProvider({ children }: { children: React.ReactNode }) {
     history: {
       get: () => state.history,
       add: (message: Message) => dispatch({ type: 'addHistory', payload: message }),
-      clear: () => dispatch({ type: 'clearHistory' })
+      clear: () => dispatch({ type: 'clearHistory' }),
     },
     user: {
       get: () => state.user,
-      set: (user: string) => dispatch({ type: 'setUser', payload: user })
+      set: (user: string) => dispatch({ type: 'setUser', payload: user }),
     },
     hostname: {
       get: () => state.hostname,
-      set: (hostname: string) => dispatch({ type: 'setHostname', payload: hostname })
+      set: (hostname: string) => dispatch({ type: 'setHostname', payload: hostname }),
     },
     execute: (command: string) => {
       return state.shell.run(command);
-    }
-  }
+    },
+  };
   React.useEffect(() => {
-    async function init() {
-      const shell = {
-        run: (command: string) => {
-          return command;
-        }
-      } as Shell;
-      // const shell = await getShell();
+    async function initialize() {
+      await init();
+      // https://github.com/rustwasm/wasm-bindgen/issues/166
+      const shell = new WASMShell('guest', 'soohoonchoi.com');
       dispatch({ type: 'setShell', payload: shell });
     }
-    init();
+    initialize();
   }, []);
 
-  return (
-    <ShellContext.Provider
-      value={shellContext}
-    >
-      {children}
-    </ShellContext.Provider>
-  );
-}
+  return <ShellContext.Provider value={shellContext}>{children}</ShellContext.Provider>;
+}