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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
							<!-- 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></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>