dioxus-mirror/packages/web/interpreter.js

export function main() {
    let root = window.document.getElementById("main");
    if (root != null) {
        window.interpreter = new Interpreter(root);
        window.rpc.call("initialize");
    }
}
export class Interpreter {
    root;
    stack;
    listeners;
    handlers;
    lastNodeWasText;
    nodes;
    constructor(root) {
        this.root = root;
        this.stack = [root];
        this.listeners = {};
        this.handlers = {};
        this.lastNodeWasText = false;
        this.nodes = [root];
    }
    top() {
        return this.stack[this.stack.length - 1];
    }
    pop() {
        return this.stack.pop();
    }
    PushRoot(root) {
        const node = this.nodes[root];
        this.stack.push(node);
    }
    AppendChildren(many) {
        let root = this.stack[this.stack.length - (1 + many)];
        let to_add = this.stack.splice(this.stack.length - many);
        for (let i = 0; i < many; i++) {
            root.appendChild(to_add[i]);
        }
    }
    ReplaceWith(root_id, m) {
        let root = this.nodes[root_id];
        let els = this.stack.splice(this.stack.length - m);
        root.replaceWith(...els);
    }
    InsertAfter(root, n) {
        let old = this.nodes[root];
        let new_nodes = this.stack.splice(this.stack.length - n);
        old.after(...new_nodes);
    }
    InsertBefore(root, n) {
        let old = this.nodes[root];
        let new_nodes = this.stack.splice(this.stack.length - n);
        old.before(...new_nodes);
    }
    Remove(root) {
        let node = this.nodes[root];
        if (node !== undefined) {
            node.remove();
        }
    }
    CreateTextNode(text, root) {
        // todo: make it so the types are okay
        const node = document.createTextNode(text);
        this.nodes[root] = node;
        this.stack.push(node);
    }
    CreateElement(tag, root) {
        const el = document.createElement(tag);
        // el.setAttribute("data-dioxus-id", `${root}`);
        this.nodes[root] = el;
        this.stack.push(el);
    }
    CreateElementNs(tag, root, ns) {
        let el = document.createElementNS(ns, tag);
        this.stack.push(el);
        this.nodes[root] = el;
    }
    CreatePlaceholder(root) {
        let el = document.createElement("pre");
        el.hidden = true;
        this.stack.push(el);
        this.nodes[root] = el;
    }
    NewEventListener(event_name, root, handler) {
        const element = this.nodes[root];
        element.setAttribute("data-dioxus-id", `${root}`);
        if (this.listeners[event_name] === undefined) {
            this.listeners[event_name] = 0;
            this.handlers[event_name] = handler;
            this.root.addEventListener(event_name, handler);
        }
        else {
            this.listeners[event_name]++;
        }
    }
    RemoveEventListener(root, event_name) {
        const element = this.nodes[root];
        element.removeAttribute(`data-dioxus-id`);
        this.listeners[event_name]--;
        if (this.listeners[event_name] === 0) {
            this.root.removeEventListener(event_name, this.handlers[event_name]);
            delete this.listeners[event_name];
            delete this.handlers[event_name];
        }
    }
    SetText(root, text) {
        this.nodes[root].textContent = text;
    }
    SetAttribute(root, field, value, ns) {
        const name = field;
        const node = this.nodes[root];
        if (ns == "style") {
            // @ts-ignore
            node.style[name] = value;
        }
        else if (ns != null || ns != undefined) {
            node.setAttributeNS(ns, name, value);
        }
        else {
            switch (name) {
                case "value":
                    if (value != node.value) {
                        node.value = value;
                    }
                    break;
                case "checked":
                    node.checked = value === "true";
                    break;
                case "selected":
                    node.selected = value === "true";
                    break;
                case "dangerous_inner_html":
                    node.innerHTML = value;
                    break;
                default:
                    // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
                    if (value == "false" && bool_attrs.hasOwnProperty(name)) {
                        node.removeAttribute(name);
                    }
                    else {
                        node.setAttribute(name, value);
                    }
            }
        }
    }
    RemoveAttribute(root, name) {
        const node = this.nodes[root];
        node.removeAttribute(name);
        if (name === "value") {
            node.value = "";
        }
        if (name === "checked") {
            node.checked = false;
        }
        if (name === "selected") {
            node.selected = false;
        }
    }
    handleEdits(edits) {
        this.stack.push(this.root);
        for (let edit of edits) {
            this.handleEdit(edit);
        }
    }
    handleEdit(edit) {
        switch (edit.type) {
            case "PushRoot":
                this.PushRoot(edit.root);
                break;
            case "AppendChildren":
                this.AppendChildren(edit.many);
                break;
            case "ReplaceWith":
                this.ReplaceWith(edit.root, edit.m);
                break;
            case "InsertAfter":
                this.InsertAfter(edit.root, edit.n);
                break;
            case "InsertBefore":
                this.InsertBefore(edit.root, edit.n);
                break;
            case "Remove":
                this.Remove(edit.root);
                break;
            case "CreateTextNode":
                this.CreateTextNode(edit.text, edit.root);
                break;
            case "CreateElement":
                this.CreateElement(edit.tag, edit.root);
                break;
            case "CreateElementNs":
                this.CreateElementNs(edit.tag, edit.root, edit.ns);
                break;
            case "CreatePlaceholder":
                this.CreatePlaceholder(edit.root);
                break;
            case "RemoveEventListener":
                this.RemoveEventListener(edit.root, edit.event_name);
                break;
            case "NewEventListener":
                // this handler is only provided on desktop implementations since this
                // method is not used by the web implementation
                let handler = (event) => {
                    let target = event.target;
                    if (target != null) {
                        let realId = target.getAttribute(`data-dioxus-id`);
                        // walk the tree to find the real element
                        while (realId == null && target.parentElement != null) {
                            target = target.parentElement;
                            realId = target.getAttribute(`data-dioxus-id`);
                        }
                        const shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
                        let contents = serialize_event(event);
                        if (shouldPreventDefault === `on${event.type}`) {
                            event.preventDefault();
                        }
                        if (event.type == "submit") {
                            event.preventDefault();
                        }
                        if (event.type == "click") {
                            event.preventDefault();
                            if (shouldPreventDefault !== `onclick`) {
                                if (target.tagName == "A") {
                                    const href = target.getAttribute("href");
                                    if (href !== "" && href !== null && href !== undefined && realId != null) {
                                        window.rpc.call("browser_open", {
                                            mounted_dom_id: parseInt(realId),
                                            href
                                        });
                                    }
                                }
                            }
                        }
                        if (realId == null) {
                            return;
                        }
                        window.rpc.call("user_event", {
                            event: edit.event_name,
                            mounted_dom_id: parseInt(realId),
                            contents: contents,
                        });
                    }
                };
                this.NewEventListener(edit.event_name, edit.root, handler);
                break;
            case "SetText":
                this.SetText(edit.root, edit.text);
                break;
            case "SetAttribute":
                this.SetAttribute(edit.root, edit.field, edit.value, edit.ns);
                break;
            case "RemoveAttribute":
                this.RemoveAttribute(edit.root, edit.name);
                break;
        }
    }
}
function serialize_event(event) {
    switch (event.type) {
        case "copy":
        case "cut":
        case "past": {
            return {};
        }
        case "compositionend":
        case "compositionstart":
        case "compositionupdate": {
            let { data } = event;
            return {
                data,
            };
        }
        case "keydown":
        case "keypress":
        case "keyup": {
            let { charCode, key, altKey, ctrlKey, metaKey, keyCode, shiftKey, location, repeat, which, } = event;
            return {
                char_code: charCode,
                key: key,
                alt_key: altKey,
                ctrl_key: ctrlKey,
                meta_key: metaKey,
                key_code: keyCode,
                shift_key: shiftKey,
                location: location,
                repeat: repeat,
                which: which,
                locale: "locale",
            };
        }
        case "focus":
        case "blur": {
            return {};
        }
        case "change": {
            let target = event.target;
            let value;
            if (target.type === "checkbox" || target.type === "radio") {
                value = target.checked ? "true" : "false";
            }
            else {
                value = target.value ?? target.textContent;
            }
            return {
                value: value,
            };
        }
        case "input":
        case "invalid":
        case "reset":
        case "submit": {
            let target = event.target;
            let value = target.value ?? target.textContent;
            if (target.type == "checkbox") {
                value = target.checked ? "true" : "false";
            }
            return {
                value: value,
            };
        }
        case "click":
        case "contextmenu":
        case "doubleclick":
        case "drag":
        case "dragend":
        case "dragenter":
        case "dragexit":
        case "dragleave":
        case "dragover":
        case "dragstart":
        case "drop":
        case "mousedown":
        case "mouseenter":
        case "mouseleave":
        case "mousemove":
        case "mouseout":
        case "mouseover":
        case "mouseup": {
            const { altKey, button, buttons, clientX, clientY, ctrlKey, metaKey, pageX, pageY, screenX, screenY, shiftKey, } = event;
            return {
                alt_key: altKey,
                button: button,
                buttons: buttons,
                client_x: clientX,
                client_y: clientY,
                ctrl_key: ctrlKey,
                meta_key: metaKey,
                page_x: pageX,
                page_y: pageY,
                screen_x: screenX,
                screen_y: screenY,
                shift_key: shiftKey,
            };
        }
        case "pointerdown":
        case "pointermove":
        case "pointerup":
        case "pointercancel":
        case "gotpointercapture":
        case "lostpointercapture":
        case "pointerenter":
        case "pointerleave":
        case "pointerover":
        case "pointerout": {
            const { altKey, button, buttons, clientX, clientY, ctrlKey, metaKey, pageX, pageY, screenX, screenY, shiftKey, pointerId, width, height, pressure, tangentialPressure, tiltX, tiltY, twist, pointerType, isPrimary, } = event;
            return {
                alt_key: altKey,
                button: button,
                buttons: buttons,
                client_x: clientX,
                client_y: clientY,
                ctrl_key: ctrlKey,
                meta_key: metaKey,
                page_x: pageX,
                page_y: pageY,
                screen_x: screenX,
                screen_y: screenY,
                shift_key: shiftKey,
                pointer_id: pointerId,
                width: width,
                height: height,
                pressure: pressure,
                tangential_pressure: tangentialPressure,
                tilt_x: tiltX,
                tilt_y: tiltY,
                twist: twist,
                pointer_type: pointerType,
                is_primary: isPrimary,
            };
        }
        case "select": {
            return {};
        }
        case "touchcancel":
        case "touchend":
        case "touchmove":
        case "touchstart": {
            const { altKey, ctrlKey, metaKey, shiftKey, } = event;
            return {
                // changed_touches: event.changedTouches,
                // target_touches: event.targetTouches,
                // touches: event.touches,
                alt_key: altKey,
                ctrl_key: ctrlKey,
                meta_key: metaKey,
                shift_key: shiftKey,
            };
        }
        case "scroll": {
            return {};
        }
        case "wheel": {
            const { deltaX, deltaY, deltaZ, deltaMode, } = event;
            return {
                delta_x: deltaX,
                delta_y: deltaY,
                delta_z: deltaZ,
                delta_mode: deltaMode,
            };
        }
        case "animationstart":
        case "animationend":
        case "animationiteration": {
            const { animationName, elapsedTime, pseudoElement, } = event;
            return {
                animation_name: animationName,
                elapsed_time: elapsedTime,
                pseudo_element: pseudoElement,
            };
        }
        case "transitionend": {
            const { propertyName, elapsedTime, pseudoElement, } = event;
            return {
                property_name: propertyName,
                elapsed_time: elapsedTime,
                pseudo_element: pseudoElement,
            };
        }
        case "abort":
        case "canplay":
        case "canplaythrough":
        case "durationchange":
        case "emptied":
        case "encrypted":
        case "ended":
        case "error":
        case "loadeddata":
        case "loadedmetadata":
        case "loadstart":
        case "pause":
        case "play":
        case "playing":
        case "progress":
        case "ratechange":
        case "seeked":
        case "seeking":
        case "stalled":
        case "suspend":
        case "timeupdate":
        case "volumechange":
        case "waiting": {
            return {};
        }
        case "toggle": {
            return {};
        }
        default: {
            return {};
        }
    }
}
const bool_attrs = {
    allowfullscreen: true,
    allowpaymentrequest: true,
    async: true,
    autofocus: true,
    autoplay: true,
    checked: true,
    controls: true,
    default: true,
    defer: true,
    disabled: true,
    formnovalidate: true,
    hidden: true,
    ismap: true,
    itemscope: true,
    loop: true,
    multiple: true,
    muted: true,
    nomodule: true,
    novalidate: true,
    open: true,
    playsinline: true,
    readonly: true,
    required: true,
    reversed: true,
    selected: true,
    truespeed: true,
};