lenn
/
dioxus-mirror
réplica de https://github.com/DioxusLabs/dioxus.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE html>
<html>

<head>
    <script>
        class Interpreter {
            constructor(root) {
                this.stack = [root];
                this.listeners = {};
                this.lastNodeWasText = false;
                this.nodes = {
                    0: root
                };
            }

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

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

        class OPTABLE {
            PushRoot(self, edit) {
                const id = edit.root;
                const node = self.nodes[id];
                self.stack.push(node);
            }
            AppendChildren(self, edit) {
                let root = self.stack[self.stack.length - (edit.many + 1)];
                for (let i = 0; i < edit.many; i++) {
                    console.log("popping ", i, edit.many);
                    let node = self.pop();
                    root.appendChild(node);
                }
            }
            ReplaceWith(self, edit) {

                let root = self.stack[self.stack.length - (edit.many + 1)];
                let els = [];

                for (let i = 0; i < edit.many; i++) {
                    els.push(self.pop());
                }

                root.replaceWith(...els);
            }
            Remove(self, edit) {
                const node = self.stack.pop();
                node.remove();
            }
            RemoveAllChildren(self, edit) {}
            CreateTextNode(self, edit) {
                self.stack.push(document.createTextNode(edit.text));
            }
            CreateElement(self, edit) {
                const tagName = edit.tag;
                console.log(`creating element: `, edit);
                self.stack.push(document.createElement(tagName));
            }
            CreateElementNs(self, edit) {
                const tagName = edit.tag;
                console.log(`creating namespaced element: `, edit);
                self.stack.push(document.createElementNS(edit.ns, edit.tag));
            }
            CreatePlaceholder(self, edit) {
                const a = `self.stack.push(document.createElement("pre"))`;
                self.stack.push(document.createComment("vroot"));
            }
            NewEventListener(self, edit) {}
            RemoveEventListener(self, edit) {}
            SetText(self, edit) {
                self.top().textContent = edit.text;
            }
            SetAttribute(self, edit) {
                const name = edit.field;
                const value = edit.value;
                const ns = edit.ns;

                const node = self.top(self.stack);
                if (ns == "style") {
                    node.style[name] = value;
                } else if (ns !== undefined) {
                    node.setAttributeNS(ns, name, value);
                } else {
                    node.setAttribute(name, value);
                }

                if ((name === "value", self)) {
                    node.value = value;
                }
                if ((name === "checked", self)) {
                    node.checked = true;
                }
                if ((name === "selected", self)) {
                    node.selected = true;
                }
            }
            RemoveAttribute(self, edit) {
                const name = edit.field;
                const node = self.top(self.stack);

                node.removeAttribute(name);

                if ((name === "value", self)) {
                    node.value = null;
                }
                if ((name === "checked", self)) {
                    node.checked = false;
                }
                if ((name === "selected", self)) {
                    node.selected = false;
                }
            }
        }

        const op_table = new OPTABLE();

        async function initialize() {
            const reply = await rpc.call('initiate');
            const interpreter = new Interpreter(window.document.getElementById("_dioxusroot"));
            console.log(reply);

            for (let x = 0; x < reply.length; x++) {
                let edit = reply[x];
                console.log(edit);
                op_table[edit.type](interpreter, edit);
            }

            console.log("stack completed: ", interpreter.stack);
        }
        console.log("initializing...");
        initialize();
    </script>
</head>

<body>
    <div id="_dioxusroot">
    </div>
</body>

</html>