From 55bd27a321966e1bc25315ccdca7adf8bdcf4e04 Mon Sep 17 00:00:00 2001 From: juztamau5 Date: Tue, 12 Mar 2024 02:01:23 -0700 Subject: [PATCH] WIP --- src/engine/CMakeLists.txt | 2 ++ src/engine/core/retro_engine.cpp | 2 +- src/frontend/.eslintignore | 3 +- src/frontend/.gitignore | 3 +- src/frontend/.prettierignore | 3 +- src/frontend/retro_engine.d.ts | 8 ----- src/frontend/src/components/HomePage.tsx | 44 +++++++++++++++++------- src/frontend/src/types/retro_engine.d.ts | 8 ----- src/frontend/tsconfig.json | 4 +-- src/frontend/vite.config.js | 5 --- tools/build-wasm.sh | 23 +++++++++---- 11 files changed, 59 insertions(+), 46 deletions(-) delete mode 100644 src/frontend/retro_engine.d.ts delete mode 100644 src/frontend/src/types/retro_engine.d.ts diff --git a/src/engine/CMakeLists.txt b/src/engine/CMakeLists.txt index 309f6f1d2..09f67ad18 100644 --- a/src/engine/CMakeLists.txt +++ b/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" diff --git a/src/engine/core/retro_engine.cpp b/src/engine/core/retro_engine.cpp index a90dcc506..814550e8d 100644 --- a/src/engine/core/retro_engine.cpp +++ b/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) diff --git a/src/frontend/.eslintignore b/src/frontend/.eslintignore index 0ec1c7422..b40b624f8 100644 --- a/src/frontend/.eslintignore +++ b/src/frontend/.eslintignore @@ -3,5 +3,6 @@ /node_modules /pnpm-lock.yaml -# Generated WASM libraries +# Generated WASM files /public/wasm +/src/wasm diff --git a/src/frontend/.gitignore b/src/frontend/.gitignore index dd1cc2a28..a525e5d62 100644 --- a/src/frontend/.gitignore +++ b/src/frontend/.gitignore @@ -3,5 +3,6 @@ /node_modules /yarn-*.log* -# Generated WASM libraries +# Generated WASM files /public/wasm +/src/wasm diff --git a/src/frontend/.prettierignore b/src/frontend/.prettierignore index 0ec1c7422..b40b624f8 100644 --- a/src/frontend/.prettierignore +++ b/src/frontend/.prettierignore @@ -3,5 +3,6 @@ /node_modules /pnpm-lock.yaml -# Generated WASM libraries +# Generated WASM files /public/wasm +/src/wasm diff --git a/src/frontend/retro_engine.d.ts b/src/frontend/retro_engine.d.ts deleted file mode 100644 index 1c6e88c84..000000000 --- a/src/frontend/retro_engine.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare module "../../public/wasm/retro_engine" { - export interface WasmModule { - // Methods and properties available on the WASM module - initialize: () => boolean; - deinitialize: () => void; - } - export default function (): Promise; -} diff --git a/src/frontend/src/components/HomePage.tsx b/src/frontend/src/components/HomePage.tsx index 24c5a6dec..82cf80da3 100644 --- a/src/frontend/src/components/HomePage.tsx +++ b/src/frontend/src/components/HomePage.tsx @@ -1,4 +1,3 @@ -/// /* * Copyright (C) 2023-2024 retro.ai * This file is part of retro3 - https://github.com/retroai/retro3 @@ -10,7 +9,11 @@ import "./HomePage.css"; import React, { useEffect, useRef } from "react"; -import loadWasmModule, { WasmModule } from "retro_engine"; + +import RetroEngineModule, { + MainModule, + RetroEngine, +} from "../wasm/retro_engine.js"; const HomePage: React.FC = () => { // Reference to the canvas element @@ -32,28 +35,43 @@ const HomePage: React.FC = () => { // Ensure canvas size adjusts on window resize window.addEventListener("resize", updateCanvasSize); - const initWasm: () => Promise = async () => { - try { - // Dynamically import the wasm module - const wasmModule: WasmModule = await loadWasmModule(); + let engineInstance: RetroEngine | null = null; + + async function initializeAndUseRetroEngine(): Promise { + // Provide the locateFile function when initializing your WASM module + const moduleOverrides = { + locateFile: (file: string) => `/wasm/${file}`, + }; + + // Await the promise to resolve to the module instance + const wasmModule: MainModule = await RetroEngineModule(moduleOverrides); - // TODO: Move to app logic - wasmModule.initialize(); - } catch (error: unknown) { - console.error("Failed to load WASM module:", error); + // Instantiate RetroEngine + engineInstance = new wasmModule.RetroEngine(); + + // Initialize RetroEngine + const initialized: boolean = engineInstance.initialize(); + if (initialized) { + console.log("RetroEngine initialized successfully"); + } else { + console.error("Failed to initialize RetroEngine"); } - }; + } - initWasm(); + // Call the function to initialize and use the RetroEngine + initializeAndUseRetroEngine().catch(console.error); return (): void => { // Cleanup on component unmount window.removeEventListener("resize", updateCanvasSize); + + // Deinitialize engine if it has been initialized + engineInstance?.deinitialize(); }; }, []); // Render the canvas element - return ; + return ; }; export default HomePage; diff --git a/src/frontend/src/types/retro_engine.d.ts b/src/frontend/src/types/retro_engine.d.ts deleted file mode 100644 index 552c72b6c..000000000 --- a/src/frontend/src/types/retro_engine.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare module "retro_engine" { - export interface WasmModule { - // Methods and properties available on the WASM module - initialize: () => boolean; - deinitialize: () => void; - } - export default function (): Promise; -} diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json index 520c61b99..e2356f777 100644 --- a/src/frontend/tsconfig.json +++ b/src/frontend/tsconfig.json @@ -14,10 +14,10 @@ "outDir": "./dist", "resolveJsonModule": true, "rootDir": "./src", - "skipLibCheck": true, + "skipLibCheck": false, "strict": true, "target": "ES2022", "types": ["node", "vite/client"] }, - "include": ["src"] + "include": ["src/**/*"] } diff --git a/src/frontend/vite.config.js b/src/frontend/vite.config.js index bb7a9b914..ac926a9c8 100644 --- a/src/frontend/vite.config.js +++ b/src/frontend/vite.config.js @@ -15,9 +15,4 @@ export default defineConfig({ react(), // Other plugins ], - resolve: { - alias: { - retro_engine: "./public/wasm/retro_engine.js", - }, - }, }); diff --git a/tools/build-wasm.sh b/tools/build-wasm.sh index 430acd786..a2d1aa068 100755 --- a/tools/build-wasm.sh +++ b/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}"