Add TypeScript support. (#96)

* Add TypeScript support.

Vite does not type check in dev mode, only in build mode.

* Type simulator.js

* Add window globals

* Move old JS files to typescript

* Properly type rust functions/worker

Author: PythonCoderAS

.eslintrc.json

@@ -1,11 +1,13 @@
 {
+    "root": true,
     "env": {
         "browser": true,
         "es2021": true
     },
     "extends": [
         "eslint:recommended",
-        "plugin:react/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended"
     ],
     "parserOptions": {
         "ecmaVersion": "latest",
@@ -14,9 +16,11 @@
         },
         "sourceType": "module"
     },
+    "parser": "@typescript-eslint/parser",
     "plugins": [
         "react",
-        "react-hooks"
+        "react-hooks",
+        "react-refresh"
     ],
     "rules": {
         "indent": [
@@ -40,7 +44,11 @@
         "indent-legacy": "warn",
         "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
         "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
-        "react/prop-types": "off"
+        "react/prop-types": "off",
+        "react-refresh/only-export-components": [
+          "warn",
+          { "allowConstantExport": true }
+        ]
     },
     "settings": {
         "react": {

package.json

@@ -8,10 +8,11 @@
     "build": "npm run tailwind-build && npm run vite-build ",
     "preview": "vite preview",
     "format": "eslint --fix",
+    "lint": "eslint . --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
     "tailwind-dev": "tailwindcss -i ./src/styles.css -o ./dist/output.css --watch",
     "tailwind-build": "tailwindcss -i ./src/styles.css -o ./dist/output.css",
-    "vite-dev": "npm run wasm-dev && vite dev",
-    "vite-build": "npm run wasm-build && vite build",
+    "vite-dev": "npm run wasm-dev && vite",
+    "vite-build": "npm run wasm-build && tsc && vite build",
     "wasm-dev": "wasm-pack build -d ../../wasm --target web --dev rezasm-app/rezasm-wasm/",
     "wasm-build": "wasm-pack build -d ../../wasm --target web rezasm-app/rezasm-wasm/"
   },
@@ -29,13 +30,19 @@
   "devDependencies": {
     "@babel/core": "^7.22.17",
     "@tauri-apps/cli": "^1.4.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.48.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "tailwindcss": "^3.3.3",
-    "vite": "^4.4.4"
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
   }
 }

rezasm-app/rezasm-wasm/src/lib.rs

@@ -13,7 +13,7 @@ use rezasm_core::util::as_any::AsAny;
 use rezasm_web_core::{
     get_exit_status, get_memory_bounds, get_memory_slice, get_register_names, get_register_value,
     get_register_values, get_simulator_mut, get_word_size, initialize_simulator, is_completed,
-    load, reset, step, stop,
+    load, reset, step, step_back, stop,
 };
 use wasm_bindgen::prelude::*;
 
@@ -37,6 +37,11 @@ pub fn wasm_step() -> Result<(), String> {
     step()
 }
 
+#[wasm_bindgen]
+pub fn wasm_step_back() -> Result<(), String> {
+    step_back()
+}
+
 #[wasm_bindgen]
 pub fn wasm_is_completed() -> bool {
     is_completed()

src/App.jsx src/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {HashRouter, Route, Routes} from "react-router-dom";
 import Code from "./components/Code.jsx";
 import Home from "./components/Home.jsx";

src/components/Code.jsx

@@ -1,13 +1,13 @@
 import React, {useEffect, useState} from "react";
 import RegistryView from "./RegistryView.jsx";
-import {loadWasm} from "../rust_functions.js";
+import {loadWasm} from "../rust_functions.ts";
 import {Tabs, Tab} from "./Tabs.jsx";
 
 import MemoryView from "./MemoryView.jsx";
 import Console from "./Console.jsx";
 import Controls from "./Controls.jsx";
 import Editor from "./Editor.jsx";
-import {useSimulator} from "./simulator.js";
+import {useSimulator} from "./simulator.ts";
 
 function Code() {
 

src/components/Console.jsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useReducer, useRef, useState} from "react";
 import {listen} from "@tauri-apps/api/event";
-import {CALLBACKS_TRIGGERS, CALLBACK_TYPES, STATE} from "./simulator.js";
-import {RUST} from "../rust_functions.js";
+import {CALLBACKS_TRIGGERS, CALLBACK_TYPES, STATE} from "./simulator.ts";
+import {RUST} from "../rust_functions.ts";
 import { debounce } from "lodash";
 
 const ENTER = 13;

src/components/Controls.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {STATE} from "./simulator.js";
+import {STATE} from "./simulator.ts";
 import _ from "lodash";
 
 const debounce =

src/components/Editor.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {STATE} from "./simulator.js";
+import {STATE} from "./simulator.ts";
 
 function Editor({state, setCode}) {
     return (

src/components/Home.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {useNavigate} from "react-router-dom";
-import {CODE_PATH} from "../App.jsx";
+import {CODE_PATH} from "../App.tsx";
 
 function Home() {
 

src/components/MemoryView.jsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from "react";
-import {RUST} from "../rust_functions.js";
-import {CALLBACK_TYPES, CALLBACKS_TRIGGERS} from "./simulator.js";
+import {RUST} from "../rust_functions.ts";
+import {CALLBACK_TYPES, CALLBACKS_TRIGGERS} from "./simulator.ts";
 
 const WIDTH = 4;
 const HEIGHT = 4;

src/components/RegistryView.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
-import {RUST} from "../rust_functions.js";
-import {CALLBACK_TYPES, CALLBACKS_TRIGGERS} from "./simulator.js";
+import {RUST} from "../rust_functions.ts";
+import {CALLBACK_TYPES, CALLBACKS_TRIGGERS} from "./simulator.ts";
 
 function RegistryView({loaded, registerCallback}) {
     const [registers, setRegisters] = useState([]);

src/components/simulator.js src/components/simulator.ts

@@ -1,71 +1,80 @@
 import {useCallback, useReducer, useRef, useState} from "react";
 import {RUST} from "../rust_functions.js";
 
-const STATE = {
-    IDLE: 1,
-    LOADING: 2,
-    LOADED: 3,
-    RUNNING: 4,
-    PAUSED: 5,
-    STOPPED: 6,
-};
+enum STATE {
+    IDLE = 1,
+    LOADING = 2,
+    LOADED = 3,
+    RUNNING = 4,
+    PAUSED = 5,
+    STOPPED = 6,
+}
 
 const CALLBACKS_TRIGGERS = {
     RESET: "RESET",
     STEP: "STEP"
-};
+} as const;
+
+type ValidCallbackTriggers = keyof typeof CALLBACKS_TRIGGERS;
 
 const CALLBACK_TYPES = {
     CONSOLE: "CONSOLE",
     MEMORY: "MEMORY",
     REGISTRY: "REGISTRY",
-};
+} as const;
+
+type ValidCallbackTypes = keyof typeof CALLBACK_TYPES;
+
 
-let initialCallbacks = {};
-Object.values(CALLBACKS_TRIGGERS).map(x => initialCallbacks[x] = {});
+type CallbackTriggerObject = Partial<Record<ValidCallbackTypes, () => unknown>>;
+type CallbackObject = Record<ValidCallbackTriggers, CallbackTriggerObject>;
+const initialCallbacks: CallbackObject = Object.values(CALLBACKS_TRIGGERS).reduce((callbacks,  x) => {
+    callbacks[x] = {};
+    return callbacks;
+}, {} as Partial<CallbackObject>) as CallbackObject;
 
 export const useSimulator = () => {
     const state = useRef(STATE.IDLE);
     const error = useRef("");
     const [exitCode, setExitCode] = useState("");
     const [code, setCode] = useState("");
 
-    const timerId = useRef(null);
+    const timerId = useRef<number|null>(null);
     const [instructionDelay, setInstructionDelay] = useState(5);
     const callbacks = useRef(initialCallbacks);
 
     //Still kind of a hack
-    const [, forceUpdate] = useReducer(() => Date.now());
+    const [, forceUpdate] = useReducer(() => Date.now(), 0);
 
-    const setState = (newState) => {
+    const setState = useCallback((newState: STATE) => {
         state.current = newState;
         forceUpdate();
-    };
+    }, []);
 
-    const setError = (newError) => {
+    const setError = useCallback((newError: string) => {
         error.current = newError;
         forceUpdate();
-    };
+    }, []);
 
-    const registerCallback = (trigger, type, callback) => {
+    const registerCallback = (trigger: ValidCallbackTriggers, type: ValidCallbackTypes, callback: () => unknown) => {
         callbacks.current[trigger][type] = callback;
     };
 
-    const callStepCallbacks = () => {
+    const callStepCallbacks = useCallback(() => {
         Object.values(callbacks.current[CALLBACKS_TRIGGERS.STEP]).map(callback => callback());
-    };
+    }, [callbacks]);
 
-    const callResetCallbacks = () => {
+    const callResetCallbacks = useCallback(() => {
         Object.values(callbacks.current[CALLBACKS_TRIGGERS.RESET]).map(callback => callback());
-    };
+    }, [callbacks]);
 
-    const haltExecution = (newState) => {
+    const haltExecution = useCallback((newState: STATE) => {
         setState(newState ?? STATE.STOPPED);
         if (timerId.current !== null) {
             clearTimeout(timerId.current);
             timerId.current = null;
         }
-    };
+    }, [timerId]);
 
     const isError = () => {
         return error.current !== "";
@@ -138,20 +147,20 @@ export const useSimulator = () => {
     }, [checkProgramCompletion, handleStepCall, load, reset, state]);
 
     const stepBack = useCallback(async () => {
-        if (state.current > STATE.RUNNING || state.current == STATE.AWAITING) {
+        if (state.current > STATE.RUNNING) {
             console.log(state.current);
             RUST.STEP_BACK({})
-            .catch((error) => {
-                setError(error);
-                setState(STATE.STOPPED)
-            })
-            .finally(() => {
-                callStepCallbacks();
-            })
+                .catch((error) => {
+                    setError(error);
+                    setState(STATE.STOPPED);
+                })
+                .finally(() => {
+                    callStepCallbacks();
+                });
 
         }
     }
-    , [setError, setState, callStepCallbacks])
+    , [setError, setState, callStepCallbacks]);
 
     const recursiveStep = useCallback(async () => {
         if (state.current === STATE.STOPPED) {
@@ -160,6 +169,8 @@ export const useSimulator = () => {
         checkProgramCompletion().then(async completed => {
             if (!completed && state.current === STATE.RUNNING) {
                 handleStepCall().then(() => {
+                    // @ts-expect-error -- It assumes that setTimeout returns a NodeJS.Timeout object,
+                    // which does not exist in the browser
                     timerId.current = setTimeout(recursiveStep, instructionDelay);
                 }).catch((e) => {
                     timerId.current = null;

src/globals.d.ts

@@ -0,0 +1,11 @@
+import WorkerPromise from "webworker-promise";
+
+declare global {
+    interface Window {
+        __WASM_DEFINED__?: boolean;
+        __WASM_LOADED__?: boolean;
+        worker: WorkerPromise;
+        // eslint-disable-next-line no-unused-vars
+        emitPrintString?: (string: string) => void;
+    }
+}

src/main.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "../dist/output.css";
-import App from "./App.jsx";
+import App from "./App.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>