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,
+    });
+}

enable-threads.js

@@ -0,0 +1,75 @@
+// NOTE: This file creates a service worker that cross-origin-isolates the page (read more here: https://web.dev/coop-coep/) which allows us to use wasm threads.
+// Normally you would set the COOP and COEP headers on the server to do this, but Github Pages doesn't allow this, so this is a hack to do that.
+
+/* Edited version of: coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
+// From here: https://github.com/gzuidhof/coi-serviceworker
+if(typeof window === 'undefined') {
+  self.addEventListener("install", () => self.skipWaiting());
+  self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
+
+  async function handleFetch(request) {
+    if(request.cache === "only-if-cached" && request.mode !== "same-origin") {
+      return;
+    }
+
+    if(request.mode === "no-cors") { // We need to set `credentials` to "omit" for no-cors requests, per this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=1309901#c7
+      request = new Request(request.url, {
+        cache: request.cache,
+        credentials: "omit",
+        headers: request.headers,
+        integrity: request.integrity,
+        destination: request.destination,
+        keepalive: request.keepalive,
+        method: request.method,
+        mode: request.mode,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        signal: request.signal,
+      });
+    }
+
+    let r = await fetch(request).catch(e => console.error(e));
+
+    if(r.status === 0) {
+      return r;
+    }
+
+    const headers = new Headers(r.headers);
+    headers.set("Cross-Origin-Embedder-Policy", "credentialless"); // or: require-corp
+    headers.set("Cross-Origin-Opener-Policy", "same-origin");
+
+    return new Response(r.body, { status: r.status, statusText: r.statusText, headers });
+  }
+
+  self.addEventListener("fetch", function(e) {
+    e.respondWith(handleFetch(e.request)); // respondWith must be executed synchonously (but can be passed a Promise)
+  });
+
+} else {
+  (async function() {
+    if(window.crossOriginIsolated !== false) return;
+
+    let registration = await navigator.serviceWorker.register(window.document.currentScript.src).catch(e => console.error("COOP/COEP Service Worker failed to register:", e));
+    if(registration) {
+      console.log("COOP/COEP Service Worker registered", registration.scope);
+
+      registration.addEventListener("updatefound", () => {
+        console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
+        window.location.reload();
+      });
+
+      // If the registration is active, but it's not controlling the page
+      if(registration.active && !navigator.serviceWorker.controller) {
+        console.log("Reloading page to make use of COOP/COEP Service Worker.");
+        window.location.reload();
+      }
+    }
+  })();
+}
+
+// Code to deregister:
+// let registrations = await navigator.serviceWorker.getRegistrations();
+// for(let registration of registrations) {
+//   await registration.unregister();
+// }

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

@@ -39,7 +39,8 @@
             max-width: 8rem;
         }
 
-        .not-hosted-msg {
+        .not-hosted-msg,
+        .no-coi-msg {
             text-align: center;
             position: absolute;
 
@@ -57,7 +58,9 @@
             src: url(fonts/acme_7_wide_xtnd.woff);
         }
     </style>
-    <script src="raylib.js"></script>
+    <!-- Hack for GitHub Pages found on https://github.com/orgs/community/discussions/13309#discussioncomment-3844940 -->
+    <script src="enable-threads.js"></script>
+    <script src="raylib-wrapper.js"></script>
 </head>
 <body>
     <label for="raylib-example-select">Choose an Example:</label>
@@ -69,7 +72,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"],
         }
@@ -87,6 +90,7 @@
 
         const { protocol } = window.location;
         const isHosted = protocol !== "file:";
+        const isCOI = crossOriginIsolated ?? false;
         let raylibJs = undefined;
 
         function startRaylib(selectedWasm){
@@ -96,6 +100,21 @@
             raylibExampleSelect.value = selectedWasm;
 
             if (isHosted) {
+                if (!isCOI) {
+                  window.addEventListener("load", () => {
+                      document.body.innerHTML = `
+                          <div class="no-coi-msg">
+                              <div class="important">
+                              <p>Unfortunately, due to security restrictions, <code>SharedArrayBuffer</code> cannot be used.</p>
+                              <p>Please navigate to this location using a web server that has the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements">required headers set</a>.</p>
+                                  <p>If you have Python 3 on your system you can just do:</p>
+                              </div>
+                              <code>$ python3 ./server.py 6969</code>
+                          </div>
+                          `;
+                  });
+                  return;
+                }
                 if (raylibJs !== undefined) {
                     raylibJs.stop();
                 }
@@ -113,7 +132,7 @@
                                 <p>Please navigate to this location using a web server.</p>
                                 <p>If you have Python 3 on your system you can just do:</p>
                             </div>
-                            <code>$ python3 -m http.server 6969</code>
+                            <code>$ python3 ./server.py 6969</code>
                         </div>
                         `;
                 });

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",