api.js

/*
 * Copyright (C) 2026 Sarmad Abdullah
 *
 * This file is part of Alusus WebPlatform library.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, see <https://www.gnu.org/licenses/>.
 */

const STACK_SIZE = 8192;
const wasmApi = {};
const eventsQueue = [];
const resources = {};
const webSockets = {};
const requestControllers = {};
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioContext.resume();

let resourceCounter = 0;
let webSocketCounter = 0;
let requestControllerCounter = 0;
let program;
let wasmMemory = null;
let asyncifyDataPtr; // Where the unwind/rewind data structure will live.
let sleeping = false;
let eventWaiting = false;
let wasmStrPtr = null;
let wakeLock = null;
let appInstallPrompt = null;
let newServiceWorker = null;
let serviceWorkerRefreshing = false;

const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        if (entry.target.dataset.resizeObserverCbId) {
            onEvent(parseInt(entry.target.dataset.resizeObserverCbId, 10), true, 'resizeObserver', {});
        }
    }
});

// DOM Handle Table
// DOM objects are handed to the wasm side as indexes within `domTable`, which is a
// `WebAssembly.Table` of external references. The wasm side never sees the objects themselves, it
// only keeps the index it received when the element was created and passes it back on every call
// that manipulates that element. The first few indexes are reserved for the objects that already
// exist when the program starts and are therefore never allocated nor released.

const DOM_HANDLE_NONE = 0;
const DOM_HANDLE_WINDOW = 1;
const DOM_HANDLE_DOCUMENT = 2;
const DOM_HANDLE_BODY = 3;
const DOM_HANDLE_HEAD = 4;
const DOM_HANDLE_PARENT_WINDOW = 5;
const DOM_HANDLE_RESERVED_COUNT = 6;
const DOM_TABLE_INITIAL_SIZE = 256;

const domTable = new WebAssembly.Table({ initial: DOM_TABLE_INITIAL_SIZE, element: 'externref' });
const freeDomHandles = [];
let domHandleCounter = DOM_HANDLE_RESERVED_COUNT;

function initDomTable() {
    domTable.set(DOM_HANDLE_NONE, null);
    domTable.set(DOM_HANDLE_WINDOW, window);
    domTable.set(DOM_HANDLE_DOCUMENT, document);
    domTable.set(DOM_HANDLE_BODY, document.body);
    domTable.set(DOM_HANDLE_HEAD, document.head);
    domTable.set(DOM_HANDLE_PARENT_WINDOW, window.parent);
}

function getDomObject(handle) {
    if (!handle || handle >= domTable.length) return null;
    return domTable.get(handle);
}

function allocDomHandle(obj) {
    let handle;
    if (freeDomHandles.length > 0) {
        handle = freeDomHandles.pop();
    } else {
        handle = domHandleCounter++;
        if (handle >= domTable.length) domTable.grow(domTable.length);
    }
    domTable.set(handle, obj);
    return handle;
}

function releaseDomHandle(handle) {
    if (!handle || handle < DOM_HANDLE_RESERVED_COUNT || handle >= domTable.length) return;
    if (domTable.get(handle) === null) return;
    domTable.set(handle, null);
    freeDomHandles.push(handle);
}

// Element Management APIs

wasmApi.createElement = (elementType, parentHandle, nextSiblingHandle) => {
    const parent = getDomObject(parentHandle);
    if (!parent) return DOM_HANDLE_NONE;
    const element = document.createElement(toJsString(elementType));
    const handle = allocDomHandle(element);
    // The id attribute isn't used to reach the element anymore, but it's still assigned so that
    // attributes referencing other elements (`for`, `aria-labelledby`, ...) remain usable.
    // TODO: Set the ID manually from the WASM side when needed.
    //element.setAttribute('id', `wp${handle}`);
    const nextSibling = getDomObject(nextSiblingHandle);
    if (nextSibling) parent.insertBefore(element, nextSibling);
    else parent.appendChild(element);
    return handle;
}

wasmApi.deleteElement = (elementHandle) => {
    const element = getDomObject(elementHandle);
    releaseDomHandle(elementHandle);
    if (!element) return;
    if (element.dataset.resizeObserverCbId) resizeObserver.unobserve(element);
    element.remove();
}

wasmApi.setStyleRule = (elementHandle, styleSelector, styleCss) => {
    const element = getDomObject(elementHandle);
    if (!element || !element.sheet) return;
    const selectorText = toJsString(styleSelector);
    const cssText = toJsString(styleCss);
    for (var i = 0; i < element.sheet.rules.length; ++i) {
        if (element.sheet.rules[i].selectorText == selectorText) {
            element.sheet.removeRule(i);
            break;
        }
    }
    element.sheet.insertRule(`${selectorText} { ${cssText} }`);
}

wasmApi.removeStyleRule = (elementHandle, styleSelector) => {
    const element = getDomObject(elementHandle);
    if (!element || !element.sheet) return;
    const selectorText = toJsString(styleSelector);
    for (var i = 0; i < element.sheet.rules.length; ++i) {
        if (element.sheet.rules[i].selectorText == selectorText) {
            element.sheet.removeRule(i);
            break;
        }
    }
}

const nonAttributeProps = ['innerHTML', 'value', 'innerText', 'textContent', 'checked'];
const booleanProps = ['checked'];

wasmApi.setElementAttribute = (elementHandle, propName, value) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    const jsPropName = toJsString(propName);
    const jsValue = toJsString(value);
    if (booleanProps.includes(jsPropName)) {
        element[jsPropName] = jsValue === "true";     // real true/false
    } else if (nonAttributeProps.includes(jsPropName)) {
        element[jsPropName] = jsValue;
    } else {
        if (jsValue == "") {
          element.removeAttribute(jsPropName);
        } else {
          element.setAttribute(jsPropName, jsValue);
        }
    }
}

wasmApi.getElementAttribute = (elementHandle, propName) => {
    const element = getDomObject(elementHandle);
    if (!element) return 0;
    const prop = toJsString(propName);
    let result;
    if (nonAttributeProps.includes(prop)) result = element[prop];
    else result = element.getAttribute(prop);
    return toWasmString(result);
}

wasmApi.removeElementAttribute = (elementHandle, propName) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    element.removeAttribute(toJsString(propName));
}

wasmApi.getElementDimensions = (elementHandle, pResult) => {
    const element = getDomObject(elementHandle);
    const resultArray = new Int32Array(wasmMemory.buffer, pResult, 2);
    if (!element) {
        resultArray[0] = 0;
        resultArray[1] = 0;
        return;
    }
    resultArray[0] = element.clientWidth;
    resultArray[1] = element.clientHeight;
}

wasmApi.getElementBoundingRect = (elementHandle, pResult) => {
    const element = getDomObject(elementHandle);
    const resultArray = new Int32Array(wasmMemory.buffer, pResult, 4);
    if (!element) {
        resultArray.fill(0);
        return;
    }
    const rect = element.getBoundingClientRect();
    resultArray[0] = rect.x;
    resultArray[1] = rect.y;
    resultArray[2] = rect.width;
    resultArray[3] = rect.height;
}

// Element Interaction

wasmApi.selectItem = (elementHandle, value) => {
    const element = getDomObject(elementHandle);
    if (element) element.value = toJsString(value);
}

wasmApi.getSelectedItemValue = (elementHandle) => {
    const select = getDomObject(elementHandle);
    if (!select || select.selectedIndex < 0) return 0;
    return toWasmString(select.options[select.selectedIndex].value);
}

wasmApi.scrollElementIntoView = (elementHandle) => {
    const element = getDomObject(elementHandle);
    if (element) element.scrollIntoView();
}

// Event Loop APIs

wasmApi.fetchNextEvent = () => {
    if (eventsQueue.length === 0) return 0;
    const result = eventsQueue[0];
    eventsQueue.splice(0, 1);
    return toWasmString(JSON.stringify(result));
}

wasmApi.registerElementEventHandler = (elementHandle, eventName, preventDefault, cbId) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    const jsEventName = toJsString(eventName);
    element[`on${jsEventName}`] = (event) => {
        if (preventDefault) event.preventDefault();
        onEvent(cbId, true, jsEventName, event);
    };
}

wasmApi.registerElementKeyEventHandler = (elementHandle, eventName, keysToSwallow, cbId) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    const toSwallow = toJsString(keysToSwallow).split(',');
    const jsEventName = toJsString(eventName);
    element[`on${jsEventName}`] = (event) => {
        if (toSwallow.includes(event.code)) event.preventDefault();
        onEvent(cbId, true, jsEventName, event);
    };
}

wasmApi.unregisterElementEventHandler = (elementHandle, eventName) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    element[`on${toJsString(eventName)}`] = null;
}

wasmApi.observeResize = (elementHandle, cbId) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    element.dataset.resizeObserverCbId = cbId;
    resizeObserver.observe(element);
}

wasmApi.unobserveResize = (elementHandle) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    element.dataset.resizeObserverCbId = null;
    resizeObserver.unobserve(element);
}

wasmApi.waitForEvent = () => {
    const view = new Int32Array(wasmMemory.buffer, asyncifyDataPtr);
    if (!eventWaiting) {
        // We are called in order to start a sleep/unwind.
        // Fill in the data structure with the start pos and end pos of the stack.
        view[0] = asyncifyDataPtr + 8;
        view[1] = asyncifyDataPtr + 8 + STACK_SIZE;

        program.instance.exports.asyncify_start_unwind(asyncifyDataPtr);
        eventWaiting = true;
    } else {
        // We are called as part of a resume/rewind. Stop waiting.
        program.instance.exports.asyncify_stop_rewind();
        eventWaiting = false;
    }
}

const SUBSCRIPTION_SIZE = 48;
const EVENT_SIZE = 32;

wasmApi.poll_oneoff = (inPtr, outPtr, nsubscriptions, retPtr) => {
    const view32 = new Int32Array(wasmMemory.buffer);
    const viewData = new DataView(wasmMemory.buffer);
    const asyncifyIdx = asyncifyDataPtr / 4;

    if (!sleeping) {
        let minTimeoutMs = Infinity;
        let clockUserData = 0n;

        // An array to hold all events requested in this call
        let ioSubscriptions = [];

        for (let i = 0; i < nsubscriptions; i++) {
            const current_in = inPtr + (i * SUBSCRIPTION_SIZE);
            const userdata = viewData.getBigUint64(current_in + 0, true);
            const type = viewData.getUint8(current_in + 8);

            if (type === 0) { // حدث مؤقت (Clock)
                const timeout_ns = viewData.getBigUint64(current_in + 24, true);
                const flags = viewData.getUint16(current_in + 40, true);
                let timeout_ms = Number(timeout_ns) / 1_000_000;

                if ((flags & 1) === 1) { // وقت مطلق
                    timeout_ms = Math.max(0, timeout_ms - performance.now());
                }
                if (timeout_ms < minTimeoutMs) {
                    minTimeoutMs = timeout_ms;
                    clockUserData = userdata;
                }
            }
            else if (type === 1 || type === 2) { // حدث قراءة (1) أو كتابة (2) لملف/مقبس
                const fd = viewData.getUint32(current_in + 16, true);
                ioSubscriptions.push({ userdata, type, fd });
            }
        }

        // triggerWakeUp will be called whenever the code wakes up after an event
        const triggerWakeUp = (triggeredEvents) => {
            if (!sleeping) return;

            const currentViewData = new DataView(wasmMemory.buffer);
            let totalTriggered = 0;

            // Write the data in the output buffer
            triggeredEvents.forEach((ev) => {
                const current_out = outPtr + (totalTriggered * EVENT_SIZE);
                currentViewData.setBigUint64(current_out + 0, ev.userdata, true);
                currentViewData.setUint16(current_out + 8, 0, true); // errno = 0
                currentViewData.setUint8(current_out + 10, ev.type);
                totalTriggered++;
            });

            currentViewData.setUint32(retPtr, totalTriggered, true);

            // Rewind and re-enter the program
            program.instance.exports.asyncify_start_rewind(asyncifyDataPtr);
            program.instance.exports.wasmStart();
        };

        // Prepare the unwind
        view32[asyncifyIdx] = asyncifyDataPtr + 8;
        view32[asyncifyIdx + 1] = asyncifyDataPtr + 8 + STACK_SIZE;
        program.instance.exports.asyncify_start_unwind(asyncifyDataPtr);
        sleeping = true;

        // Keep track of handles to cleanup after wakeup
        let timeoutHandle = null;
        let ioCleanups = [];

        // Activate sleep timer (if any)
        if (minTimeoutMs !== Infinity) {
            timeoutHandle = setTimeout(() => {
                cleanupAll();
                triggerWakeUp([{ userdata: clockUserData, type: 0 }]);
            }, minTimeoutMs);
        }

        // Activate IO events (if any)
        ioSubscriptions.forEach((sub) => {
            // TODO: Implement getSocketByFd
            const socket = wasmApi.getSocketByFd(sub.fd);

            if (socket && sub.type === 1) { // read request
                const onDataReady = () => {
                    cleanupAll();
                    triggerWakeUp([{ userdata: sub.userdata, type: 1 }]);
                };
                socket.addEventListener('message', onDataReady);
                ioCleanups.push(() => socket.removeEventListener('message', onDataReady));
            }
            // TODO: Address write requests (type === 2)
        });

        // Cleanup function to be called after wake-up
        function cleanupAll() {
            if (timeoutHandle) clearTimeout(timeoutHandle);
            ioCleanups.forEach(clean => clean());
        }

        return 0;

    } else {
        // We are called as part of a resume/rewind. Stop sleeping.
        program.instance.exports.asyncify_stop_rewind();
        sleeping = false;
        return 0;
    }
}

// Async Operations APIs

wasmApi.sendRequest = (method, uri, headers, body, timeoutInMs, cbId) => {
    const controllerId = ++requestControllerCounter;
    const controller = new AbortController();
    controller.cbId = cbId;
    requestControllers[controllerId] = controller;
    const signal = controller.signal;
    const timeoutId = setTimeout(() => {
        controller.abort();
        delete requestControllers[controllerId];
        onEvent(cbId, false, 'sendRequest', {
            status: 0,
            body: "Connection timeout"
        });
    }, timeoutInMs)

    fetch(toJsString(uri), {
        method: toJsString(method),
        headers: (toJsString(headers) || "").split('\n').reduce((result, header) => {
            header = header.trim();
            if (header == '') return result;
            const pair = header.split(':');
            if (pair.length != 2) return result;
            return { ...result, [pair[0].trim()]: pair[1].trim() };
        }, {}),
        body: toJsString(body),
        signal
    }).then(response => {
        delete requestControllers[controllerId];
        return response.text().then(bodyText => {
            clearTimeout(timeoutId);
            onEvent(cbId, false, 'sendRequest', {
                status: response.status,
                headers: Object.fromEntries(response.headers.entries()),
                body: bodyText
            });
        });
    }).catch(err => {
        delete requestControllers[controllerId];
        clearTimeout(timeoutId);
        onEvent(cbId, false, 'sendRequest', {
            status: 0,
            body: err.message
        });
    });
    return controllerId;
}

wasmApi.cancelRequest = (requestId) => {
    const controller = requestControllers[requestId];
    if (controller) {
        controller.abort();
        onEvent(controller.cbId, false, '_abort_', {});
        delete requestControllers[requestId];
    }
}

wasmApi.startTimer = (duration, cbId) => {
    return setInterval(() => {
        onEvent(cbId, true, 'timer', {});
    }, duration/1000);
}

wasmApi.stopTimer = (id) => {
    clearInterval(id);
}

wasmApi.setTimeout = (duration, cbId) => {
    return setTimeout(() => {
        onEvent(cbId, false, 'timer', {});
    }, duration/1000);
}

wasmApi.cancelTimeout = (id) => {
    clearTimeout(id);
}

// Web Socket APIs

wasmApi.createWebSocket = (url , protocols , cbId) => {
    const jsProtocols = toJsString(protocols);
    let ws;
    try {
        ws = jsProtocols ? new WebSocket(toJsString(url), jsProtocols) : new WebSocket(toJsString(url));
    } catch (err) {
        console.error('WebSocket construction failed:', err);
        return 0;
    }
    // Alusus has no concept of a JS Blob (wasm can only ever receive raw
    // bytes/ids, never a live object reference), so binary messages always end
    // up converted to raw bytes on our side regardless of binaryType. Default
    // to 'arraybuffer' so that conversion is synchronous instead of paying for
    // an extra Blob.arrayBuffer() microtask on every binary message; onmessage
    // below still handles a Blob correctly if something sets it back later.
    ws.binaryType = 'arraybuffer';
    
    const socketId = ++webSocketCounter;
    webSockets[socketId] = ws;

    ws.onopen = () => {
        onEvent(cbId, true, 'websocketOpen', {});
    };

    ws.onmessage = (event) => {
        if (typeof event.data === 'string') {
            onEvent(cbId, true, 'websocketMessage', { data: event.data, isBinary: false });
            return;
        }
        const bytes = new Uint8Array(event.data);
        const destPtr = program.instance.exports.malloc(bytes.length);
        new Uint8Array(wasmMemory.buffer, destPtr, bytes.length).set(bytes);
        onEvent(cbId, true, 'websocketMessage', { data: destPtr, dataLen: bytes.length, isBinary: true });
    };

    ws.onerror = () => {
        onEvent(cbId, true, 'websocketError', {});
    };

    ws.onclose = (event) => {
        onEvent(cbId, false, 'websocketClose', {
            code: event.code,
            reason: event.reason,
            wasClean: event.wasClean
        });
    };

    return socketId;
}

wasmApi.sendWebSocketMessage = (socketId, data) => {
    const ws = webSockets[socketId];
    try {
        ws.send(toJsString(data));
        return 0;
    } catch (err) {
        return toWasmString(err.message);
    }
};

wasmApi.sendWebSocketBinary = (socketId, dataPtr, dataLen) => {
    const ws = webSockets[socketId];
    try {
        ws.send(new Uint8Array(wasmMemory.buffer, dataPtr, dataLen));
        return 0;
    } catch (err) {
        return toWasmString(err.message);
    }
};

wasmApi.closeWebSocket = (socketId, code, reason) => {
    const ws = webSockets[socketId];
    try {
        ws.close(code, toJsString(reason));
        return 0;
    } catch (err) {
        return toWasmString(err.message);
    }
};

wasmApi.getWebSocketState = (socketId) => {
    const ws = webSockets[socketId];
    return ws.readyState;
};

wasmApi.getWebSocketUrl = (socketId) => {
    const ws = webSockets[socketId];
    return toWasmString(ws.url);
};

wasmApi.getWebSocketProtocol = (socketId) => {
    const ws = webSockets[socketId];
    return toWasmString(ws.protocol);
};

wasmApi.getWebSocketExtensions = (socketId) => {
    const ws = webSockets[socketId];
    return toWasmString(ws.extensions);
};

wasmApi.getWebSocketBufferedAmount = (socketId) => {
    const ws = webSockets[socketId];
    return ws.bufferedAmount;
};

wasmApi.deleteWebSocket = (socketId) => {
    delete webSockets[socketId];
};

// Resource Management

wasmApi.loadImage = (url, cbId) => {
    const image = new Image();
    const resourceId = ++resourceCounter;
    image.onload = () => {
      resources[resourceId] = image;
      onEvent(cbId, false, 'loadImage', { resourceId, success: true });
    };
    image.onerror = () => {
      onEvent(cbId, false, 'loadImage', { success: false });
    };
    image.src = toJsString(url);
}

wasmApi.getImageDimensions = (imgId, pResult) => {
    var image = resources[imgId];
    const resultArray = new Int32Array(wasmMemory.buffer, pResult, 2);
    resultArray[0] = image.width;
    resultArray[1] = image.height;
}

wasmApi.createCanvasResource = (width, height) => {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const resourceId = ++resourceCounter;
    resources[resourceId] = canvas;
    return resourceId;
}

wasmApi.resizeCanvasResource = (canvasId, width, height) => {
    const canvas = resources[canvasId];
    canvas.width = width;
    canvas.height = height;
}

wasmApi.createImageResourceFromCanvasResource = (canvasId, cbId) => {
    const canvas = resources[canvasId];
    const resourceId = ++resourceCounter;
    const image = new Image();
    image.src = canvas.toDataURL('image/png');
    image.decode().then(() => {
        resources[resourceId] = image;
        onEvent(cbId, false, 'createImageResourceFromCanvasResource', { resourceId, success: true });
    }).catch((err) => {
        console.error('Failed to create image from canvas:', err);
        onEvent(cbId, false, 'createImageResourceFromCanvasResource', { success: false });
    });
}

wasmApi.registerElementAsResource = (elementHandle) => {
    const element = getDomObject(elementHandle);
    if (!element) return 0;
    const resourceId = ++resourceCounter;
    resources[resourceId] = element;
    return resourceId;
}

wasmApi.loadAudio = (url, cbId) => {
    const jsUrl = toJsString(url);
    fetch(jsUrl).then((res) => {
        if (!res.ok) {
            throw new Error(`Request for ${toJsString(url)} failed with status ${res.status}`);
        }
        return res.arrayBuffer().then((arrayBuf) => {
            audioContext.decodeAudioData(
                arrayBuf,
                (buffer) => {
                    audio = { volume: 1, playing: false, buffer, source: null };
                    const resourceId = ++resourceCounter;
                    resources[resourceId] = audio;
                    onEvent(cbId, false, 'loadAudio', { resourceId, success: true });
                },
                (error) => {
                    console.error('Failed to load audio:', error);
                    onEvent(cbId, false, 'loadAudio', { success: false });
                }
            );
        });
    }).catch((err) => {
        console.error('Failed to load audio:', err);
        onEvent(cbId, false, 'loadAudio', { success: false });
    });
}

wasmApi.releaseResource = (resourceId) => {
    delete resources[resourceId];
}

wasmApi.loadFont = (fontName, url, cbId) => {
    const font = new FontFace(toJsString(fontName), `url(${toJsString(url)})`);
    font.load().then(() => {
        document.fonts.add(font);
        onEvent(cbId, false, 'loadFont', { success: true });
    }).catch((err) => {
        onEvent(cbId, false, 'loadFont', { success: false });
    });
}

wasmApi.loadJsScript = (url, cbId) => {
    const script = document.createElement('script');
    document.head.appendChild(script);
    script.onload = function() {
        onEvent(cbId, false, 'loadJsScript', { success: true });
    };
    script.onerror = () => {
      onEvent(cbId, false, 'loadJsScript', { success: false });
      document.head.removeChild(script);
    };
    script.src = toJsString(url);
}

wasmApi.setResourceAttribute = (resourceId, name, value) => {
    resources[resourceId].setAttribute(toJsString(name), toJsString(value))
}

// Canvas APIs

wasmApi.drawLine = (canvasId, x1, y1, x2, y2) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

wasmApi.drawPolygon = (canvasId, pointCount, points, filled) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    const pointsArray = new Int32Array(wasmMemory.buffer, points, pointCount * 2);
    ctx.moveTo(pointsArray[0], pointsArray[1]);
    for  (var i = 1; i < pointCount; i++){
        ctx.lineTo(pointsArray[i*2], pointsArray[i*2+1]);
    }
    ctx.closePath();
    if (filled) ctx.fill();
    else ctx.stroke();
}

wasmApi.drawFilledRect = (canvasId, x, y, w, h) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.fillRect(x, y, w, h);
}

wasmApi.clearRect = (canvasId, x, y, w, h) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.clearRect(x, y, w, h);
}

wasmApi.drawCircle = (canvasId, x, y, r) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.stroke();
}

wasmApi.drawText = (canvasId, text, font, x, y, rtl) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.font = toJsString(font);
    ctx.textBaseline = "top";
    ctx.direction = rtl ? "rtl" : "ltr";
    ctx.fillText(toJsString(text), x, y);
}

wasmApi.measureText = (canvasId, text, font, pResult) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.font = toJsString(font);
    var dims = ctx.measureText(toJsString(text));
    const resultArray = new Int32Array(wasmMemory.buffer, pResult, 2);
    resultArray[0] = dims.width;
    resultArray[1] = dims.fontBoundingBoxAscent + dims.fontBoundingBoxDescent;
}

wasmApi.setFillStyle = (canvasId, c1, c2, x1, y1, x2, y2) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
    gradient.addColorStop(0, toJsString(c1));
    gradient.addColorStop(1, toJsString(c2));
    ctx.fillStyle = gradient;
}

wasmApi.setStrokeStyle = (canvasId, ss) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = toJsString(ss);
}

wasmApi.setLineWidth = (canvasId, lw) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = lw;
}

wasmApi.drawImage = (canvasId, imgId, x, y, w, h, a, s) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.globalAlpha = a;
    ctx.imageSmoothingEnabled = s;
    if (w === -1) ctx.drawImage(resources[imgId], x, y);
    else ctx.drawImage(resources[imgId], x, y, w, h);
    ctx.restore();
}

wasmApi.clearCanvas = (canvasId) => {
    var canvas = resources[canvasId];
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Audio APIs

wasmApi.suspendAudioContext = () => {
    audioContext.suspend();
}

wasmApi.resumeAudioContext = () => {
    audioContext.resume();
}

wasmApi.playAudio = (audioId, loop, stopPrevious) => {
    try {
      var audio = resources[audioId];
      if (!audio) return;
      if (audio.playing) {
          if (stopPrevious) {
              wasmApi.stopAudio(audioId);
          } else {
              // Clone the audio object so that the old instance's event doesn't
              // end up overriding the properties of the new instance.
              audio = {
                  volume: audio.volume,
                  buffer: audio.buffer,
                  playing: false,
                  source: null,
              };
              resources[audioId] = audio;
          }
      }
      // Create the buffer source.
      audio.source = audioContext.createBufferSource();
      audio.source.buffer = audio.buffer;
      // Connect the source to the destination through a volume node in the middle.
      audio.gainNode = audioContext.createGain();
      audio.gainNode.gain.value = audio.volume;
      audio.source.connect(audio.gainNode);
      audio.gainNode.connect(audioContext.destination);
      // Reset the audio object when the playback is over.
      audio.source.addEventListener('ended', () => {
          audio.playing = false;
          audio.source = null;
          audio.gainNode = null;
      });
      // Start the playback.
      audio.source.loop = loop;
      audio.source.start();
      audio.playing = true;
    } catch (err) {
      console.error('Failed to play audio:', err);
    }
}

wasmApi.stopAudio = (audioId) => {
    var audio = resources[audioId];
    if (!audio || !audio.source) return;
    audio.source.stop();
    audio.source = null;
    audio.gainNode = null;
    audio.playing = false;
}

wasmApi.pauseAudio = (audioId) => {
    var audio = resources[audioId];
    if (!audio || !audio.source) return;
    audio.source.playbackRate.value = 0.0001; // Work around Firefox treating 0 as 1!
}

wasmApi.resumeAudio = (audioId) => {
    var audio = resources[audioId];
    if (!audio || !audio.source) return;
    audio.source.playbackRate.value = 1;
}

wasmApi.setAudioVolume = (audioId, volume) => {
    const audio = resources[audioId];
    audio.volume = volume;
    if (!audio.gainNode) return;
    audio.gainNode.gain.value = volume;
}

wasmApi.getAudioVolume = (audioId) => {
    if (!resources[audioId]) return 0;
    return resources[audioId].volume;
}

wasmApi.isAudioPlaying = (audioId) => {
    if (!resources[audioId]) return false;
    return resources[audioId].playing;
}

// Gamepad APIs

wasmApi.getGamepadsCount = () => {
    return navigator.getGamepads().length;
}

wasmApi.getGamepadId = (gamepadIndex) => {
    return toWasmString(navigator.getGamepads().id);
}

wasmApi.getGamepadAxesCount = (gamepadIndex) => {
    return navigator.getGamepads()[gamepadIndex].axes.length;
}

wasmApi.getGamepadButtonsCount = (gamepadIndex) => {
    return navigator.getGamepads()[gamepadIndex].buttons.length;
}

wasmApi.getGamepadAxis = (gamepadIndex, axisIndex) => {
    return navigator.getGamepads()[gamepadIndex].axes[axisIndex];
}

wasmApi.getGamepadButton = (gamepadIndex, buttonIndex) => {
    return navigator.getGamepads()[gamepadIndex].buttons[buttonIndex].value;
}

// Misc APIs

wasmApi.getTimestamp = () => {
    return BigInt(Date.now());
}

wasmApi.getDate = (type, timestamp) => {
    const date = Number(timestamp) === -1 ? new Date() : new Date(Number(timestamp));
    switch (toJsString(type)) {
        case 'iso': return toWasmString(date.toISOString());
        case 'locale': return toWasmString(date.toLocaleString());
        case 'local_iso': return toWasmString(toLocalISOString(date));
        default: return toWasmString(date.toString());
    }
}

wasmApi.parseDate = (dateStr) => {
    const ms = Date.parse(toJsString(dateStr));
    return isNaN(ms) ? -1n : BigInt(ms);
}

wasmApi.requestPointerLock = (elementHandle) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    element.requestPointerLock();
    if (!document.onpointerlockchange) {
        document.onpointerlockchange = () => {
            if (window.onpointerlockchange) {
                window.onpointerlockchange({ enabled: !!document.pointerLockElement });
            }
        }
    }
}

wasmApi.exitPointerLock = () => {
    document.exitPointerLock();
}

wasmApi.requestFullScreen = (elementHandle) => {
    const element = getDomObject(elementHandle);
    if (!element) return;
    if (element.requestFullscreen) element.requestFullscreen();
    if (!document.onfullscreenchange) {
        document.onfullscreenchange = () => {
            if (window.onfullscreenchange) {
                window.onfullscreenchange({ enabled: !!document.fullscreenElement });
            }
        }
    }
}

wasmApi.exitFullScreen = () => {
    document.exitFullscreen();
}

wasmApi.requestWakeLock = (cbId) => {
    if ("wakeLock" in navigator) {
        navigator.wakeLock.request("screen").then((result) => {
            onEvent(cbId, false, 'requestWakeLock', { result: true });
        });
    } else {
        onEvent(cbId, false, 'requestWakeLock', { result: false });
    }
}

wasmApi.exitWakeLock = (cbId) => {
    if (wakeLock) {
        wakeLock.release().then((result) => {
            onEvent(cbId, false, 'exitWakeLock', { result: true });
        });
    } else {
        onEvent(cbId, false, 'exitWakeLock', { result: false });
    }
}

wasmApi.httpRedirect = (page) => {
    window.location.replace(toJsString(page));
}

wasmApi.pushState = (url, state) => {
  window.history.pushState(JSON.parse(toJsString(state)), null, toJsString(url));
}

wasmApi.getLocationHref = () => {
    return toWasmString(window.location.href);
}

wasmApi.getLocationProtocol = () => {
    return toWasmString(window.location.protocol);
}

wasmApi.getLocationHost = () => {
    return toWasmString(window.location.host);
}

wasmApi.getLocationPath = () => {
    return toWasmString(window.location.pathname);
}

wasmApi.getLocationSearch = () => {
    return toWasmString(window.location.search);
}

wasmApi.getLocationHash = () => {
    return toWasmString(window.location.hash);
}

wasmApi.getQueryParam = (paramName) => {
    return toWasmString(new URLSearchParams(window.location.search).get(toJsString(paramName)));
}

wasmApi.setCookie = (cname, cvalue, exdays) => {
  const d = new Date();
  d.setTime(d.getTime() + (parseInt(toJsString(exdays)) * 24 * 60 * 60 * 1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = toJsString(cname) + "=" + toJsString(cvalue) + ";" + expires + ";path=/";
}

wasmApi.getCookie = (cname) => {
  let name = toJsString(cname) + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return toWasmString(c.substring(name.length, c.length));
    }
  }
  return toWasmString("");
}

wasmApi.addVarToSession = (varName, varValue) => {
    sessionStorage.setItem(toJsString(varName),toJsString(varValue));
}

wasmApi.getVarFromSession = (varName) => {
    return sessionStorage.getItem(toJsString(varName));
}

wasmApi.getVisibilityState = () => {
    return toWasmString(document.visibilityState);
}

wasmApi.logToConsole = (msg) => {
  console.log(toJsString(msg));
}

wasmApi.showAlertDialog = (message) => {
    alert(toJsString(message));
}

wasmApi.showConfirmDialog = (message) => {
    let isExecuted = confirm(toJsString(message));
    return isExecuted;
}

wasmApi.postMessage = (targetHandle, wasmMessageType, wasmMessageBody) => {
    const target = getDomObject(targetHandle);
    if (!target) return;
    // The target is either a window (the page's own window or its parent) or an embedding element
    // such as an iframe, in which case the message goes to the window it holds.
    const targetWindow = target.contentWindow || target;
    if (!targetWindow.postMessage) return;
    targetWindow.postMessage(
        { type: toJsString(wasmMessageType), body: toJsString(wasmMessageBody) }, '*'
    );
}

wasmApi.callCustomJsFn = (fnName, arg) => {
    return toWasmString(window[toJsString(fnName)](toJsString(arg)));
}

wasmApi.callCustomAsyncJsFn = (fnName, arg, cbId) => {
    window[toJsString(fnName)](toJsString(arg)).then((result) => {
        onEvent(cbId, false, 'callCustomAsyncJsFn', { result });
    });
}

wasmApi.getUserLanguages = () => {
    return toWasmStringArray(navigator.languages);
}

wasmApi.isDarkColorSchemePreferred = () => {
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
}

wasmApi.resizeWindow = (width, height) => {
    window.resizeTo
}

// PWA APIs

wasmApi.isAppUpdateAvailable = () => {
    return !!newServiceWorker;
}

wasmApi.updateApp = () => {
    if (!newServiceWorker) return;
    newServiceWorker.postMessage({ action: 'skipWaiting' });
}

wasmApi.getAppDisplayMode = () => {
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
    if (document.referrer.startsWith('android-app://')) {
        return toWasmString('twa');
    } else if (navigator.standalone || isStandalone) {
        return toWasmString('standalone');
    }
    return toWasmString('browser');
}

wasmApi.isAppInstallPromptAvailable = () => {
    return !!appInstallPrompt;
}

wasmApi.showAppInstallPrompt = () => {
    if (appInstallPrompt) {
        appInstallPrompt.prompt();
        return true;
    } else {
        return false;
    }
}

// String APIs

wasmApi.createRegex = (regexStr) => {
    const regex = new RegExp(toJsString(regexStr), 'g');
    const resourceId = ++resourceCounter;
    resources[resourceId] = regex;
    return resourceId;
}

wasmApi.matchRegex = (str, regexStr, regexId, pLastIndex) => {
    const reg = regexStr ? new RegExp(toJsString(regexStr)) : resources[regexId];
    reg.lastIndex = 0;
    const result = toWasmStringArray(reg.exec(toJsString(str)));
    const pLastIndexBuf = new Int32Array(wasmMemory.buffer, pLastIndex, 1);
    pLastIndexBuf[0] = reg.lastIndex;
    return result;
}

// Storage APIs

wasmApi.getStorageLength = (storageType) => {
    return (storageType == 1 ? window.localStorage : window.sessionStorage).length;
}

wasmApi.getStorageKey = (storageType, index) => {
    return toWasmString((storageType == 1 ? window.localStorage : window.sessionStorage).key(index));
}

wasmApi.getStorageItem = (storageType, key) => {
    return toWasmString((storageType == 1 ? window.localStorage : window.sessionStorage).getItem(toJsString(key)));
}

wasmApi.setStorageItem = (storageType, key, value) => {
    (storageType == 1 ? window.localStorage : window.sessionStorage).setItem(toJsString(key), toJsString(value));
}

wasmApi.removeStorageItem = (storageType, key) => {
    (storageType == 1 ? window.localStorage : window.sessionStorage).removeItem(toJsString(key));
}

wasmApi.clearStorage = (storageType) => {
    (storageType == 1 ? window.localStorage : window.sessionStorage).clear();
}

// Libc Functions

wasmApi.rand = () => {
  return Math.floor(Math.random() * 1073741823);
}

wasmApi.printf = ()=>{}
wasmApi.exit = ()=>{}

wasmApi.__muloti4 = (res_ptr, a_low, a_high, b_low, b_high, overflow_ptr) => {
    const a = (BigInt(a_high) << 32n) | (BigInt(a_low) & 0xFFFFFFFFn);
    const b = (BigInt(b_high) << 32n) | (BigInt(b_low) & 0xFFFFFFFFn);

    const signedA = a >= 2n**63n ? a - 2n**64n : a;
    const signedB = b >= 2n**63n ? b - 2n**64n : b;

    const result = signedA * signedB;

    const MIN_128 = -(2n ** 127n);
    const MAX_128 = (2n ** 127n) - 1n;

    let hasOverflow = 0;
    if (result < MIN_128 || result > MAX_128) {
        hasOverflow = 1;
    }

    const view32 = new Int32Array(wasmMemory.buffer);
    view32[overflow_ptr / 4] = hasOverflow;

    const unsignedResult = result < 0n ? (result + (2n ** 128n)) : result;

    const res_low = unsignedResult & 0xFFFFFFFFFFFFFFFFn;
    const res_high = unsignedResult >> 64n;

    const viewData = new DataView(wasmMemory.buffer);
    viewData.setBigUint64(res_ptr + 0, res_low, true);
    viewData.setBigUint64(res_ptr + 8, res_high, true);

    return 0;
}

// Helper Functions

const eventPropMap = {
    message: ['data'],
    mouseenter: [],
    mouseout: [],
    mousedown: ['button', 'offsetX', 'offsetY'],
    mouseup: ['button', 'offsetX', 'offsetY'],
    mousemove: ['offsetX', 'offsetY', 'movementX', 'movementY'],
    keydown: ['code', 'shiftKey', 'ctrlKey', 'altKey'],
    keyup: ['code', 'shiftKey', 'ctrlKey', 'altKey'],
    keypress: ['code', 'shiftKey', 'ctrlKey', 'altKey'],
    change: [],
    input: [],
    click: [],
    createImageResourceFromCanvasResource: ['resourceId', 'success'],
    loadImage: ['resourceId', 'success'],
    loadFont: ['success'],
    loadAudio: ['resourceId', 'success'],
    loadJsScript: ['success'],
    sendRequest: ['status', 'headers', 'body'],
    websocketOpen: [],
    websocketMessage: ['data', 'dataLen', 'isBinary'],
    websocketError: [],
    websocketClose: ['code', 'reason', 'wasClean'],
    timer: [],
    touchstart: pickNeededTouchEventData,
    touchend: pickNeededTouchEventData,
    touchmove: pickNeededTouchEventData,
    touchcancel: pickNeededTouchEventData,
    resizeObserver: [],
    pointerlockchange: ['enabled'],
    fullscreenchange: ['enabled'],
    gamepadconnected: ['gamepad'],
    gamepaddisconnected: ['gamepad'],
    popstate: ['state'],
    callCustomAsyncJsFn: ['result'],
    visibilitychange: [],
    requestWakeLock: ['result'],
    exitWakeLock: ['result'],
    _abort_: [],
};

function pickNeededEventData(eventName, event) {
    if (typeof eventPropMap[eventName] === 'function') {
        return eventPropMap[eventName](event);
    } else {
        const eventData = {};
        for (let k of eventPropMap[eventName]) {
            eventData[k] = event[k];
        }
        return eventData;
    }
}

function pickNeededTouchEventData(event) {
    const touches = [];
    for (let i = 0; i < event.touches.length; ++i) {
        const touch = event.touches.item(i);
        let changed = false;
        for (let j = 0; j < event.changedTouches.length; ++j) {
            if (event.changedTouches.item(j).identifier === touch.identifier) {
                changed = true;
                break;
            }
        }
        touches.push({
            identifier: touch.identifier,
            screenX: touch.screenX,
            screenY: touch.screenY,
            clientX: touch.clientX,
            clientY: touch.clientY,
            pageX: touch.pageX,
            pageY: touch.pageY,
            radiusX: touch.radiusX,
            radiusY: touch.radiusY,
            rotationAngle: touch.rotationAngle,
            force: touch.force,
            changed: Boolean(changed),
        });
    }
    return touches;
}

function onEvent (cbId, recurring, eventName, event) {
    eventsQueue.push({ cbId, recurring, eventName, eventData: pickNeededEventData(eventName, event) });

    // Unblock wasm if it's waiting for events.
    if (eventWaiting) {
        program.instance.exports.asyncify_start_rewind(asyncifyDataPtr);
        // The code is now ready to rewind; re-enter the program from the
        // same entry point to start the rewind process.
        program.instance.exports.wasmStart();
    }
}

function toJsString(strPtr) {
    if (strPtr == 0) return null;
    let view = new Uint8Array(wasmMemory.buffer, strPtr);
    const nul = view.indexOf(0);
    if (nul !== -1) view = view.subarray(0, nul);
    return (new TextDecoder()).decode(view);
}

function toWasmString(str) {
    if (str === null || str === undefined) return 0;
    const encoder = new TextEncoder();
    const buffer = encoder.encode(str);
    wasmStrPtr = program.instance.exports.realloc(wasmStrPtr, buffer.length + 1);
    let view = new Uint8Array(wasmMemory.buffer, wasmStrPtr, buffer.length + 1);
    view.set(buffer);
    view[buffer.length] = 0;
    return wasmStrPtr;
}

function toWasmStringArray(strs) {
    if (strs === null || strs === undefined || strs.length === 0) return 0;
    const encoder = new TextEncoder();
    const buffers = strs.map(s => encoder.encode(s));
    const totalSize = buffers.reduce((r, s) => { return r + s.length + 2; }, 1);
    wasmStrPtr = program.instance.exports.realloc(wasmStrPtr, totalSize);
    let pos = 0;
    buffers.forEach(buffer => {
        let view = new Uint8Array(wasmMemory.buffer, wasmStrPtr + pos, buffer.length + 3);
        view[0] = ' '.charCodeAt(0);
        view.set(buffer, 1);
        view[buffer.length + 1] = 0;
        view[buffer.length + 2] = 0;
        pos += buffer.length + 2;
    });
    return wasmStrPtr;
}

function pushLocation(url) {
    window.history.pushState({}, null, url);
    window["onpopstate"]({ preventDefault: () => {}, state: {} });
}

function toLocalISOString(date) {
  const pad = (n) => n.toString().padStart(2, '0');
  const padMs = (n) => n.toString().padStart(3, '0');

  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());
  const seconds = pad(date.getSeconds());
  const milliseconds = padMs(date.getMilliseconds());

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
}

// Main Functions

const wasiShim = {
  proc_exit: (code) => console.log(`Process exited with code ${code}`),
  fd_write: () => 0,
  fd_close: () => 0,
  fd_seek: () => 0,
  fd_fdstat_get: () => 0,
  args_get: () => 0,
  args_sizes_get: () => 0,
  environ_sizes_get: (outCount, outSize) => 0,
  environ_get: (outPtr, outBuf) => 0,
  poll_oneoff: wasmApi.poll_oneoff,
  __muloti4: wasmApi.__muloti4,
};

async function loadWasm(filename, importTable) {
    let response = await fetch(filename);
    let binary = await response.arrayBuffer();
    return WebAssembly.instantiate( binary, { "env": importTable, wasi_snapshot_preview1: wasiShim } );
}

function waitForDom() {
    if (document.readyState !== 'loading') return Promise.resolve();
    return new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve, { once: true }));
}

async function start(moduleName) {
    program = await loadWasm(moduleName, wasmApi);

    // The reserved handles refer to `document.body` and `document.head`, so the document has to be
    // parsed before the table can be initialized.
    await waitForDom();
    initDomTable();

    // Initialize wasi-libc
    if (program.instance.exports._initialize) {
        program.instance.exports._initialize();
    }

    wasmMemory = program.instance.exports.memory;

    asyncifyDataPtr = program.instance.exports.malloc(STACK_SIZE + 8);

    const programConstructors = Object.keys(program.instance.exports)
      .filter(name => name.match(/^__constructor__/));
    programConstructors.forEach(name => {
        program.instance.exports[name]()
    });

    program.instance.exports.wasmStart();
    program.instance.exports.asyncify_stop_unwind();
}

function initializeWebApp(serviceWorkerUrl, scope) {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(serviceWorkerUrl, { scope })
            .then((reg) => {
                if (reg.waiting) {
                    // New update was previously found and ignored.
                    console.log('Stale update is found');
                    newServiceWorker = reg.waiting;
                }
                reg.addEventListener('updatefound', () => {
                    const installingServiceWorker = reg.installing;
                    installingServiceWorker.addEventListener('statechange', () => {
                        if (installingServiceWorker.state === 'installed' && navigator.serviceWorker.controller) {
                            // New update available.
                            newServiceWorker = installingServiceWorker;
                            window.postMessage({ type: 'app_update_available' }, '*');
                        }
                    });
                });
            })
            .catch(function(error) {
                console.error('Service Worker registration failed:', error);
            });
        navigator.serviceWorker.addEventListener('controllerchange', function () {
            if (serviceWorkerRefreshing) return;
            window.location.reload();
            serviceWorkerRefreshing = true;
        });
    }
    window.addEventListener('beforeinstallprompt', (e) => {
        // Prevents the default mini-infobar or install dialog from appearing on mobile
        e.preventDefault();
        // Save the event because you'll need to trigger it later.
        appInstallPrompt = e;
        window.postMessage({ type: 'app_install_prompt' }, '*');
    });
}