lenn
/
dioxus-mirror
şunun yansıması https://github.com/DioxusLabs/dioxus.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!-- a js-only interpreter for the dioxus patch stream :) -->
<!DOCTYPE html>
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body>
    <div>hello dioxus</div>
</body>
<script>
    class Interpreter {
        constructor(root) {
            this.stack = [root];
        }

        top() {
            return this.stack[this.stack.length - 1];
        }

        pop() {
            return this.stack.pop();
        }
    }

    class OPTABLE {
        // 0
        SetText(edit, interp) {
            interp.top(interp.stack).textContent = edit.text;
        }
        // 1
        RemoveSelfAndNextSiblings(edit) {
            const node = interp.pop();
            let sibling = node.nextSibling;
            while (sibling) {
                const temp = sibling.nextSibling;
                sibling.remove();
                sibling = temp;
            }
            node.remove();
        }

        // 2
        ReplaceWith(edit, interp) {
            const newNode = interp.pop();
            const oldNode = interp.pop();
            oldNode.replaceWith(newNode);
            interp.stack.push(newNode);
        }

        // 3
        SetAttribute(edit, interp) {
            const name = edit.name;
            const value = edit.value;
            const node = interp.top(interp.stack);
            node.setAttribute(name, value);

            // Some attributes are "volatile" and don't work through `setAttribute`.
            if ((name === "value", interp)) {
                node.value = value;
            }
            if ((name === "checked", interp)) {
                node.checked = true;
            }
            if ((name === "selected", interp)) {
                node.selected = true;
            }
        }

        // 4
        RemoveAttribute(edit, interp) {
            const name = edit.name;
            const node = interp.top(interp.stack);
            node.removeAttribute(name);

            // Some attributes are "volatile" and don't work through `removeAttribute`.
            if ((name === "value", interp)) {
                node.value = null;
            }
            if ((name === "checked", interp)) {
                node.checked = false;
            }
            if ((name === "selected", interp)) {
                node.selected = false;
            }
        }

        // 5
        PushReverseChild(edit, interp) {
            const n = edit.n;
            const parent = interp.top(interp.stack);
            const children = parent.childNodes;
            const child = children[children.length - n - 1];
            interp.stack.push(child);
        }

        // 6
        PopPushChild(edit, interp) {
            const n = edit.n;
            interp.pop();
            const parent = interp.top(interp.stack);
            const children = parent.childNodes;
            const child = children[n];
            interp.stack.push(child);
        }

        // 7
        Pop(edit, interp) {
            interp.pop();
        }

        // 8
        AppendChild(edit, interp) {
            console.log(interp.stack);
            const child = interp.pop();
            console.log(interp.stack);
            interp.top().appendChild(child);
        }

        // 9
        CreateTextNode(edit, interp) {
            // interp.stack.push(document.createTextNode("asd"));
            console.log(interp.stack);

            interp.stack.push(document.createTextNode(edit.text));
            console.log(interp.stack);
        }

        // 10
        CreateElement(edit, interp) {
            const tagName = edit.tag_name;
            interp.stack.push(document.createElement(tagName));
        }

        // 11
        NewEventListener(edit, interp) {
            // todo!
            const eventId = mem32[i++];
            const eventType = interp.getCachedString(eventId);
            const a = mem32[i++];
            const b = mem32[i++];
            const el = interp.top(interp.stack);
            el.addEventListener(eventType, interp.eventHandler);
            el[`dodrio-a-${eventType}`] = a;
            el[`dodrio-b-${eventType}`] = b;
        }

        // 12
        UpdateEventListener(edit, interp) {
            // todo!
            const eventId = mem32[i++];
            const eventType = interp.getCachedString(eventId);
            const el = interp.top(interp.stack);
            el[`dodrio-a-${eventType}`] = mem32[i++];
            el[`dodrio-b-${eventType}`] = mem32[i++];
        }

        // 13
        RemoveEventListener(edit, interp) {
            // todo!
            const eventId = mem32[i++];
            const eventType = interp.getCachedString(eventId);
            const el = interp.top(interp.stack);
            el.removeEventListener(eventType, interp.eventHandler);
        }

        // 14
        AddCachedString(edit, interp) {
            // todo!
            const pointer = mem32[i++];
            const length = mem32[i++];
            const id = mem32[i++];
            const str = string(mem8, pointer, length);
            interp.addCachedString(str, id);
        }

        // 15
        DropCachedString(edit, interp) {
            // todo!
            const id = mem32[i++];
            interp.dropCachedString(id);
        }

        // 16
        CreateElementNS(edit, interp) {
            //   const tagNameId = mem32[i++];
            //   const tagName = interp.getCachedString(tagNameId);
            //   const nsId = mem32[i++];
            //   const ns = interp.getCachedString(nsId);
            interp.stack.push(document.createElementNS(edit.ns, edit.tag_name));
        }

        // 17
        SaveChildrenToTemporaries(edit, interp) {
            //   let temp = mem32[i++];
            //   const start = mem32[i++];
            //   const end = mem32[i++];
            let temp = edit.temp;
            const start = edit.start;
            const end = edit.end;
            const parent = interp.top(interp.stack);
            const children = parent.childNodes;
            for (let i = start; i < end; i++, interp) {
                interp.temporaries[temp++] = children[i];
            }
        }

        // 18
        PushChild(edit, interp) {
            const parent = interp.top(interp.stack);
            //   const n = mem32[i++];
            const n = edit.n;
            const child = parent.childNodes[n];
            interp.stack.push(child);
        }

        // 19
        PushTemporary(edit, interp) {
            //   const temp = mem32[i++];
            const temp = edit.temp;
            interp.stack.push(interp.temporaries[temp]);
        }

        // 20
        InsertBefore(edit, interp) {
            const before = interp.pop();
            const after = interp.pop();
            after.parentNode.insertBefore(before, after);
            interp.stack.push(before);
        }

        // 21
        PopPushReverseChild(edit, interp) {
            //   const n = mem32[i++];
            const n = edit.n;
            interp.pop();
            const parent = interp.top(interp.stack);
            const children = parent.childNodes;
            const child = children[children.length - n - 1];
            interp.stack.push(child);
        }

        // 22
        RemoveChild(edit, interp) {
            //   const n = mem32[i++];
            const n = edit.n;
            const parent = interp.top(interp.stack);
            const child = parent.childNodes[n];
            child.remove();
        }

        // 23
        SetClass(edit, interp) {
            //   const classId = mem32[i++];
            const className = edit.class_name;
            interp.top(interp.stack).className = className;
        }

        // 24
        SaveTemplate(edit, interp) {
            const id = mem32[i++];
            const template = interp.top(interp.stack);
            interp.saveTemplate(id, template.cloneNode(true));
        }

        // 25
        PushTemplate(edit, interp) {
            const id = mem32[i++];
            const template = interp.getTemplate(id);
            interp.stack.push(template.cloneNode(true));
        }

        NewListener(edit, interp) {}
    }

    const op_table = new OPTABLE();
    const interpreter = new Interpreter(window.document.body);

    function EditListReceived(rawEditList) {
        let editList = JSON.parse(rawEditList);
        editList.forEach(function (edit, index) {
            op_table[edit.type](edit, interpreter);
        });
    }

    let socket = new WebSocket("ws://127.0.0.1:8080/session/itsworkinggg");
    socket.onmessage = function(event) {
        console.log(event.data);
        EditListReceived(event.data);
    }
    // external.invoke("initiate");

</script>

</html>