Implement async using workers

EventWorker.js

@@ -0,0 +1,91 @@
+// Adapted from https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#passing_data_examples
+export default class EventWorker {
+    #worker;
+    #listeners;
+
+    constructor(scriptUrl, options) {
+        this.#worker = new Worker(scriptUrl, options);
+        this.#listeners = {};
+        this.#worker.onmessage = (event) => {
+            if (
+                event.data instanceof Object &&
+                Object.hasOwn(event.data, "event") &&
+                Object.hasOwn(event.data, "message")
+            ) {
+                this.#listeners[event.data.event].apply(
+                    this,
+                    event.data.message,
+                );
+            } else {
+                console.error(event);
+                throw new TypeError("EventWorker got illegal event");
+            }
+        };
+        this.#worker.onmessageerror = (event) => {
+            console.error("[MAIN] onmessageerror:", event);
+            throw new Error(event);
+        }
+        this.#worker.onerror = (event) => {
+            console.error("[MAIN] onerror:", event);
+            throw new Error(event);
+        }
+    }
+
+    terminate() {
+        this.#worker.terminate();
+        this.#worker = null;
+    }
+
+    setListener(name, handler) {
+        this.#listeners[name] = handler;
+    }
+
+    removeListener(name) {
+        delete this.#listeners[name];
+    }
+
+    send(event, ...message) {
+        if (!event) {
+            throw new TypeError("EventWorker.send takes at least one argument");
+        }
+        this.#worker.postMessage({
+            event,
+            message,
+        });
+    }
+}
+
+/**
+ * @param {Record<string, WorkerHandler>} handlers
+ * @typedef {(this: typeof self, ...message: any[])} WorkerHandler
+ */
+export function registerWorkerEvents(handlers) {
+    onmessage = (event) => {
+        if (
+            event.data instanceof Object &&
+            Object.hasOwn(event.data, "event") &&
+            Object.hasOwn(event.data, "message")
+        ) {
+            handlers[event.data.event].apply(self, event.data.message);
+        } else {
+            console.error(event);
+            throw new TypeError("Illegal postMessage!");
+        }
+    };
+    onmessageerror = (event) => {
+        console.error("[WORKER] onmessageerror:", event);
+    };
+    onerror = (event) => {
+        console.error("[WORKER] error:", event);
+    };
+}
+
+export function reply(event, ...message) {
+    if (!event) {
+        throw new TypeError("reply - not enough arguments");
+    }
+    postMessage({
+        event,
+        message,
+    });
+}

examples/shapes_colors_palette_async.c

@@ -0,0 +1,104 @@
+/*******************************************************************************************
+*
+*   raylib [shapes] example - Colors palette
+*
+*   Example originally created with raylib 1.0, last time updated with raylib 2.5
+*
+*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
+*   BSD-like license that allows static linking with closed source software
+*
+*   Copyright (c) 2014-2024 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#define MAX_COLORS_COUNT    21          // Number of colors available
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+int main(void)
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    const int screenWidth = 800;
+    const int screenHeight = 450;
+
+    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - colors palette");
+
+    Color colors[MAX_COLORS_COUNT] = {
+        DARKGRAY, MAROON, ORANGE, DARKGREEN, DARKBLUE, DARKPURPLE, DARKBROWN,
+        GRAY, RED, GOLD, LIME, BLUE, VIOLET, BROWN, LIGHTGRAY, PINK, YELLOW,
+        GREEN, SKYBLUE, PURPLE, BEIGE };
+
+    const char *colorNames[MAX_COLORS_COUNT] = {
+        "DARKGRAY", "MAROON", "ORANGE", "DARKGREEN", "DARKBLUE", "DARKPURPLE",
+        "DARKBROWN", "GRAY", "RED", "GOLD", "LIME", "BLUE", "VIOLET", "BROWN",
+        "LIGHTGRAY", "PINK", "YELLOW", "GREEN", "SKYBLUE", "PURPLE", "BEIGE" };
+
+    Rectangle colorsRecs[MAX_COLORS_COUNT] = { 0 };     // Rectangles array
+
+    // Fills colorsRecs data (for every rectangle)
+    for (int i = 0; i < MAX_COLORS_COUNT; i++)
+    {
+        colorsRecs[i].x = 20.0f + 100.0f *(i%7) + 10.0f *(i%7);
+        colorsRecs[i].y = 80.0f + 100.0f *(i/7) + 10.0f *(i/7);
+        colorsRecs[i].width = 100.0f;
+        colorsRecs[i].height = 100.0f;
+    }
+
+    int colorState[MAX_COLORS_COUNT] = { 0 };           // Color state: 0-DEFAULT, 1-MOUSE_HOVER
+
+    Vector2 mousePoint = { 0.0f, 0.0f };
+
+    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        // Update
+        //----------------------------------------------------------------------------------
+        mousePoint = GetMousePosition();
+
+        for (int i = 0; i < MAX_COLORS_COUNT; i++)
+        {
+            if (CheckCollisionPointRec(mousePoint, colorsRecs[i])) colorState[i] = 1;
+            else colorState[i] = 0;
+        }
+        //----------------------------------------------------------------------------------
+
+        // Draw
+        //----------------------------------------------------------------------------------
+        BeginDrawing();
+
+            ClearBackground(RAYWHITE);
+
+            DrawText("raylib colors palette", 28, 42, 20, BLACK);
+            DrawText("press SPACE to see all colors", GetScreenWidth() - 180, GetScreenHeight() - 40, 10, GRAY);
+
+            for (int i = 0; i < MAX_COLORS_COUNT; i++)    // Draw all rectangles
+            {
+                DrawRectangleRec(colorsRecs[i], Fade(colors[i], colorState[i]? 0.6f : 1.0f));
+
+                if (IsKeyDown(KEY_SPACE) || colorState[i])
+                {
+                    DrawRectangle((int)colorsRecs[i].x, (int)(colorsRecs[i].y + colorsRecs[i].height - 26), (int)colorsRecs[i].width, 20, BLACK);
+                    DrawRectangleLinesEx(colorsRecs[i], 6, Fade(BLACK, 0.3f));
+                    DrawText(colorNames[i], (int)(colorsRecs[i].x + colorsRecs[i].width - MeasureText(colorNames[i], 10) - 12),
+                        (int)(colorsRecs[i].y + colorsRecs[i].height - 20), 10, colors[i]);
+                }
+            }
+
+        EndDrawing();
+        //----------------------------------------------------------------------------------
+    }
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    CloseWindow();                // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}

index.html

@@ -57,7 +57,7 @@
             src: url(fonts/acme_7_wide_xtnd.woff);
         }
     </style>
-    <script src="raylib.js"></script>
+    <script src="raylib-wrapper.js"></script>
 </head>
 <body>
     <label for="raylib-example-select">Choose an Example:</label>
@@ -69,7 +69,7 @@
         const wasmPaths = {
             "tsoding": ["tsoding_ball", "tsoding_snake",],
             "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
-            "shapes": ["shapes_colors_palette"],
+            "shapes": ["shapes_colors_palette", "shapes_colors_palette_async"],
             "text": ["text_writing_anim"],
             "textures": ["textures_logo_raylib"],
         }

nob.c

@@ -28,6 +28,11 @@ Example examples[] = {
         .bin_path   = "./build/shapes_colors_palette",
         .wasm_path  = "./wasm/shapes_colors_palette.wasm",
     },
+    {
+        .src_path   = "./examples/shapes_colors_palette_async.c",
+        .bin_path   = "./build/shapes_colors_palette_async",
+        .wasm_path  = "./wasm/shapes_colors_palette_async.wasm",
+    },
     {
         .src_path   = "./examples/tsoding_ball.c",
         .bin_path = "./build/tsoding_ball",