wip: doesnt share on thread

packages/ssr/examples/template.html

@@ -0,0 +1,290 @@
+<!-- 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));
+        }
+    }
+
+    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);
+        });
+    }
+
+    external.invoke("initiate");
+</script>
+
+</html>