WIP

src/engine/CMakeLists.txt

@@ -57,6 +57,7 @@ if (${CMAKE_SYSTEM_NAME} MATCHES "Emscripten")
       -s USE_WEBGL2=1 \
       -s WASM=1 \
       --bind \
+      --embind-emit-tsd retro_engine.d.ts \
       --source-map-base https://retro.ai/ \
     "
   )
@@ -68,6 +69,7 @@ endif ()
 
 INSTALL(
   FILES
+    "${CMAKE_BINARY_DIR}/retro_engine.d.ts"
     "${CMAKE_BINARY_DIR}/retro_engine.js"
     "${CMAKE_BINARY_DIR}/retro_engine.wasm"
     "${CMAKE_BINARY_DIR}/retro_engine.wasm.map"

src/engine/core/retro_engine.cpp

@@ -12,7 +12,7 @@
 
 namespace
 {
-constexpr const char* CANVAS_ID = "retroengine";
+constexpr const char* CANVAS_ID = "retroEngine";
 }
 
 RetroEngine::RetroEngine() : m_webGLContext(0)

src/frontend/.eslintignore

@@ -3,5 +3,6 @@
 /node_modules
 /pnpm-lock.yaml
 
-# Generated WASM libraries
+# Generated WASM files
 /public/wasm
+/src/wasm

src/frontend/.gitignore

@@ -3,5 +3,6 @@
 /node_modules
 /yarn-*.log*
 
-# Generated WASM libraries
+# Generated WASM files
 /public/wasm
+/src/wasm

src/frontend/.prettierignore

@@ -3,5 +3,6 @@
 /node_modules
 /pnpm-lock.yaml
 
-# Generated WASM libraries
+# Generated WASM files
 /public/wasm
+/src/wasm

src/frontend/src/components/HomePage.tsx

@@ -1,4 +1,3 @@
-/// <reference types="../types/retro_engine" />
 /*
  * Copyright (C) 2023-2024 retro.ai
  * This file is part of retro3 - https://github.com/retroai/retro3
@@ -10,7 +9,8 @@
 import "./HomePage.css";
 
 import React, { useEffect, useRef } from "react";
-import loadWasmModule, { WasmModule } from "retro_engine";
+
+import { MainModule, RetroEngine } from "../wasm/retro_engine";
 
 const HomePage: React.FC = () => {
   // Reference to the canvas element
@@ -32,28 +32,25 @@ const HomePage: React.FC = () => {
     // Ensure canvas size adjusts on window resize
     window.addEventListener("resize", updateCanvasSize);
 
-    const initWasm: () => Promise<void> = async () => {
-      try {
-        // Dynamically import the wasm module
-        const wasmModule: WasmModule = await loadWasmModule();
+    // Initialize the WebAssembly module
+    const module: MainModule = require("../path/to/your/module.js");
+    const retroEngine: RetroEngine = new module.RetroEngine();
 
-        // TODO: Move to app logic
-        wasmModule.initialize();
-      } catch (error: unknown) {
-        console.error("Failed to load WASM module:", error);
-      }
-    };
-
-    initWasm();
+    // Call initialize function
+    retroEngine.initialize();
 
     return (): void => {
       // Cleanup on component unmount
       window.removeEventListener("resize", updateCanvasSize);
+
+      // Deinitialize and destroy engine
+      retroEngine.deinitialize();
+      retroEngine.delete();
     };
   }, []);
 
   // Render the canvas element
-  return <canvas ref={canvasRef} id="retroengine" />;
+  return <canvas ref={canvasRef} id="retroEngine" />;
 };
 
 export default HomePage;

src/frontend/tsconfig.json

@@ -14,7 +14,7 @@
     "outDir": "./dist",
     "resolveJsonModule": true,
     "rootDir": "./src",
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "strict": true,
     "target": "ES2022",
     "types": ["node", "vite/client"]

src/frontend/vite.config.js

@@ -15,9 +15,4 @@ export default defineConfig({
     react(),
     // Other plugins
   ],
-  resolve: {
-    alias: {
-      retro_engine: "./public/wasm/retro_engine.js",
-    },
-  },
 });

tools/build-wasm.sh

@@ -39,12 +39,20 @@ BUILD_DIRECTORY="${TOOL_DIRECTORY}/build"
 # Directory of the Emscripten SDK
 EMSDK_DIRECTORY="${TOOL_DIRECTORY}/emsdk"
 
-# Directory to place the generated libraries
-INSTALL_DIRECTORY="${TOOL_DIRECTORY}/install"
+# Directory to place the build output
+OUTPUT_DIRECTORY="${TOOL_DIRECTORY}/install"
+
+# Directory to install the generated WASM binary
+WASM_DIRECTORY="${PROJECT_DIRECTORY}/src/frontend/public/wasm"
+
+# Directory to install the generated JS loader
+LOADER_DIRECTORY="${PROJECT_DIRECTORY}/src/frontend/src/wasm"
 
 # Ensure directories exist
 mkdir -p "${BUILD_DIRECTORY}"
-mkdir -p "${INSTALL_DIRECTORY}"
+mkdir -p "${OUTPUT_DIRECTORY}"
+mkdir -p "${WASM_DIRECTORY}"
+mkdir -p "${LOADER_DIRECTORY}"
 
 ################################################################################
 # Setup environment
@@ -60,12 +68,15 @@ cd "${BUILD_DIRECTORY}"
 
 emcmake cmake \
   "${ENGINE_DIRECTORY}" \
-  -DCMAKE_INSTALL_PREFIX="${INSTALL_DIRECTORY}" \
+  -DCMAKE_INSTALL_PREFIX="${OUTPUT_DIRECTORY}" \
   $(! command -v ccache &> /dev/null || echo "-DCMAKE_CXX_COMPILER_LAUNCHER=ccache")
 
 cmake \
   --build "${BUILD_DIRECTORY}" \
   --target install
 
-# Copy the generated libraries to the public directory
-cp -rv "${INSTALL_DIRECTORY}/wasm" "${PROJECT_DIRECTORY}/src/frontend/public"
+# Copy the generated WASM files to the public directory
+cp -rv "${OUTPUT_DIRECTORY}/wasm"/*.wasm* "${WASM_DIRECTORY}"
+
+# Copy the generated loader to the frontend directory
+cp -v "${OUTPUT_DIRECTORY}/wasm"/*.[jt]s "${LOADER_DIRECTORY}"