Merge branch 'master' into jk/form-ma

packages/interpreter/src/bindings.rs

@@ -0,0 +1,59 @@
+use js_sys::Function;
+use wasm_bindgen::prelude::*;
+use web_sys::{Element, Node};
+
+#[wasm_bindgen(module = "/src/interpreter.js")]
+extern "C" {
+    pub type Interpreter;
+
+    #[wasm_bindgen(constructor)]
+    pub fn new(arg: Element) -> Interpreter;
+
+    #[wasm_bindgen(method)]
+    pub fn set_node(this: &Interpreter, id: usize, node: Node);
+
+    #[wasm_bindgen(method)]
+    pub fn PushRoot(this: &Interpreter, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn AppendChildren(this: &Interpreter, many: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn ReplaceWith(this: &Interpreter, root: u64, m: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn InsertAfter(this: &Interpreter, root: u64, n: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn InsertBefore(this: &Interpreter, root: u64, n: u32);
+
+    #[wasm_bindgen(method)]
+    pub fn Remove(this: &Interpreter, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn CreateTextNode(this: &Interpreter, text: &str, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn CreateElement(this: &Interpreter, tag: &str, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn CreateElementNs(this: &Interpreter, tag: &str, root: u64, ns: &str);
+
+    #[wasm_bindgen(method)]
+    pub fn CreatePlaceholder(this: &Interpreter, root: u64);
+
+    #[wasm_bindgen(method)]
+    pub fn NewEventListener(this: &Interpreter, name: &str, root: u64, handler: &Function);
+
+    #[wasm_bindgen(method)]
+    pub fn RemoveEventListener(this: &Interpreter, root: u64, name: &str);
+
+    #[wasm_bindgen(method)]
+    pub fn SetText(this: &Interpreter, root: u64, text: &str);
+
+    #[wasm_bindgen(method)]
+    pub fn SetAttribute(this: &Interpreter, root: u64, field: &str, value: &str, ns: Option<&str>);
+
+    #[wasm_bindgen(method)]
+    pub fn RemoveAttribute(this: &Interpreter, root: u64, field: &str);
+}

packages/interpreter/src/interpreter.js

@@ -5,25 +5,14 @@ export function main() {
     window.rpc.call("initialize");
   }
 }
-
-declare global {
-  interface Window {
-    interpreter: Interpreter;
-    rpc: { call: (method: string, args?: any) => void };
-  }
-}
-
-
 export class Interpreter {
-  root: Element;
-  stack: Element[];
-  listeners: { [key: string]: number };
-  handlers: { [key: string]: (evt: Event) => void };
-  lastNodeWasText: boolean;
-  nodes: Element[];
-
-
-  constructor(root: Element) {
+  root;
+  stack;
+  listeners;
+  handlers;
+  lastNodeWasText;
+  nodes;
+  constructor(root) {
     this.root = root;
     this.stack = [root];
     this.listeners = {};
@@ -31,88 +20,70 @@ export class Interpreter {
     this.lastNodeWasText = false;
     this.nodes = [root];
   }
-
   top() {
     return this.stack[this.stack.length - 1];
   }
-
   pop() {
     return this.stack.pop();
   }
-
-  PushRoot(root: number) {
+  PushRoot(root) {
     const node = this.nodes[root];
     this.stack.push(node);
   }
-
-  AppendChildren(many: number) {
+  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: number, m: number) {
-    let root = this.nodes[root_id] as Element;
+  ReplaceWith(root_id, m) {
+    let root = this.nodes[root_id];
     let els = this.stack.splice(this.stack.length - m);
-
     root.replaceWith(...els);
   }
-
-  InsertAfter(root: number, n: number) {
-    let old = this.nodes[root] as Element;
+  InsertAfter(root, n) {
+    let old = this.nodes[root];
     let new_nodes = this.stack.splice(this.stack.length - n);
     old.after(...new_nodes);
   }
-
-  InsertBefore(root: number, n: number) {
-    let old = this.nodes[root] as Element;
+  InsertBefore(root, n) {
+    let old = this.nodes[root];
     let new_nodes = this.stack.splice(this.stack.length - n);
     old.before(...new_nodes);
   }
-
-  Remove(root: number) {
-    let node = this.nodes[root] as Element;
+  Remove(root) {
+    let node = this.nodes[root];
     if (node !== undefined) {
       node.remove();
     }
   }
-
-  CreateTextNode(text: string, root: number) {
+  CreateTextNode(text, root) {
     // todo: make it so the types are okay
-    const node = document.createTextNode(text) as any as Element;
+    const node = document.createTextNode(text);
     this.nodes[root] = node;
     this.stack.push(node);
   }
-
-  CreateElement(tag: string, root: number) {
+  CreateElement(tag, root) {
     const el = document.createElement(tag);
     // el.setAttribute("data-dioxus-id", `${root}`);
-
     this.nodes[root] = el;
     this.stack.push(el);
   }
-
-  CreateElementNs(tag: string, root: number, ns: string) {
+  CreateElementNs(tag, root, ns) {
     let el = document.createElementNS(ns, tag);
     this.stack.push(el);
     this.nodes[root] = el;
   }
-
-  CreatePlaceholder(root: number) {
+  CreatePlaceholder(root) {
     let el = document.createElement("pre");
     el.hidden = true;
     this.stack.push(el);
     this.nodes[root] = el;
   }
-
-  NewEventListener(event_name: string, root: number, handler: (evt: Event) => void) {
+  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;
@@ -121,48 +92,39 @@ export class Interpreter {
       this.listeners[event_name]++;
     }
   }
-
-  RemoveEventListener(root: number, event_name: string) {
+  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: number, text: string) {
+  SetText(root, text) {
     this.nodes[root].textContent = text;
   }
-
-  SetAttribute(root: number, field: string, value: string, ns: string | undefined) {
+  SetAttribute(root, field, value, ns) {
     const name = field;
     const node = this.nodes[root];
-
     if (ns == "style") {
-
       // @ts-ignore
-      (node as HTMLElement).style[name] = value;
-
+      node.style[name] = value;
     } else if (ns != null || ns != undefined) {
       node.setAttributeNS(ns, name, value);
     } else {
       switch (name) {
         case "value":
-          if (value != (node as HTMLInputElement).value) {
-            (node as HTMLInputElement).value = value;
+          if (value != node.value) {
+            node.value = value;
           }
           break;
         case "checked":
-          (node as HTMLInputElement).checked = value === "true";
+          node.checked = value === "true";
           break;
         case "selected":
-          (node as HTMLOptionElement).selected = value === "true";
+          node.selected = value === "true";
           break;
         case "dangerous_inner_html":
           node.innerHTML = value;
@@ -177,33 +139,26 @@ export class Interpreter {
       }
     }
   }
-  RemoveAttribute(root: number, name: string) {
-
+  RemoveAttribute(root, name) {
     const node = this.nodes[root];
     node.removeAttribute(name);
-
     if (name === "value") {
-      (node as HTMLInputElement).value = "";
+      node.value = "";
     }
-
     if (name === "checked") {
-      (node as HTMLInputElement).checked = false;
+      node.checked = false;
     }
-
     if (name === "selected") {
-      (node as HTMLOptionElement).selected = false;
+      node.selected = false;
     }
   }
-
-  handleEdits(edits: DomEdit[]) {
+  handleEdits(edits) {
     this.stack.push(this.root);
-
     for (let edit of edits) {
       this.handleEdit(edit);
     }
   }
-
-  handleEdit(edit: DomEdit) {
+  handleEdit(edit) {
     switch (edit.type) {
       case "PushRoot":
         this.PushRoot(edit.root);
@@ -239,29 +194,27 @@ export class Interpreter {
         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: Event) => {
-          let target = event.target as Element | null;
-
+        let handler = (event) => {
+          let target = event.target;
           if (target != null) {
             let realId = target.getAttribute(`data-dioxus-id`);
-            let shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
+            let shouldPreventDefault = target.getAttribute(
+              `dioxus-prevent-default`
+            );
 
             if (event.type == "click") {
-              event.preventDefault();
+              // todo call prevent default if it's the right type of event
               if (shouldPreventDefault !== `onclick`) {
                 if (target.tagName == "A") {
-                  const href = target.getAttribute("href")
+                  const href = target.getAttribute("href");
                   if (href !== "" && href !== null && href !== undefined) {
                     window.rpc.call("browser_open", { href });
                   }
                 }
               }
             }
-
             // walk the tree to find the real element
             while (realId == null) {
               // we've reached the root we don't want to send an event
@@ -273,23 +226,20 @@ export class Interpreter {
               realId = target.getAttribute(`data-dioxus-id`);
             }
 
-            shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
-
+            shouldPreventDefault = target.getAttribute(
+              `dioxus-prevent-default`
+            );
             let contents = serialize_event(event);
-
             if (shouldPreventDefault === `on${event.type}`) {
-              event.preventDefault();
+              //   event.preventDefault();
             }
-
             if (event.type == "submit") {
-              event.preventDefault();
+              //   event.preventDefault();
             }
 
-
             if (target.tagName == "FORM") {
-              let formTarget = target as HTMLFormElement;
-              for (let x = 0; x < formTarget.elements.length; x++) {
-                let element = formTarget.elements[x];
+              for (let x = 0; x < target.elements.length; x++) {
+                let element = target.elements[x];
                 let name = element.getAttribute("name");
                 if (name != null) {
                   if (element.getAttribute("type") == "checkbox") {
@@ -297,7 +247,8 @@ export class Interpreter {
                     contents.values[name] = element.checked ? "true" : "false";
                   } else {
                     // @ts-ignore
-                    contents.values[name] = element.value ?? element.textContent;
+                    contents.values[name] =
+                      element.value ?? element.textContent;
                   }
                 }
               }
@@ -306,9 +257,8 @@ export class Interpreter {
             if (realId == null) {
               return;
             }
-
             window.rpc.call("user_event", {
-              event: (edit as NewEventListener).event_name,
+              event: edit.event_name,
               mounted_dom_id: parseInt(realId),
               contents: contents,
             });
@@ -329,25 +279,21 @@ export class Interpreter {
   }
 }
 
-
-
-export function serialize_event(event: Event) {
+export function serialize_event(event) {
   switch (event.type) {
     case "copy":
     case "cut":
     case "past": {
       return {};
     }
-
     case "compositionend":
     case "compositionstart":
     case "compositionupdate": {
-      let { data } = (event as CompositionEvent);
+      let { data } = event;
       return {
         data,
       };
     }
-
     case "keydown":
     case "keypress":
     case "keyup": {
@@ -362,8 +308,7 @@ export function serialize_event(event: Event) {
         location,
         repeat,
         which,
-      } = (event as KeyboardEvent);
-
+      } = event;
       return {
         char_code: charCode,
         key: key,
@@ -378,45 +323,36 @@ export function serialize_event(event: Event) {
         locale: "locale",
       };
     }
-
     case "focus":
     case "blur": {
       return {};
     }
-
     case "change": {
-      let target = event.target as HTMLInputElement;
+      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 as HTMLFormElement;
+      let target = event.target;
       let value = target.value ?? target.textContent;
-
       if (target.type == "checkbox") {
         value = target.checked ? "true" : "false";
       }
-
       return {
         value: value,
-        values: {}
+        values: {},
       };
     }
-
     case "click":
     case "contextmenu":
     case "doubleclick":
@@ -448,8 +384,7 @@ export function serialize_event(event: Event) {
         screenX,
         screenY,
         shiftKey,
-      } = event as MouseEvent;
-
+      } = event;
       return {
         alt_key: altKey,
         button: button,
@@ -465,7 +400,6 @@ export function serialize_event(event: Event) {
         shift_key: shiftKey,
       };
     }
-
     case "pointerdown":
     case "pointermove":
     case "pointerup":
@@ -499,7 +433,7 @@ export function serialize_event(event: Event) {
         twist,
         pointerType,
         isPrimary,
-      } = event as PointerEvent;
+      } = event;
       return {
         alt_key: altKey,
         button: button,
@@ -525,21 +459,14 @@ export function serialize_event(event: Event) {
         is_primary: isPrimary,
       };
     }
-
     case "select": {
       return {};
     }
-
     case "touchcancel":
     case "touchend":
     case "touchmove":
     case "touchstart": {
-      const {
-        altKey,
-        ctrlKey,
-        metaKey,
-        shiftKey,
-      } = event as TouchEvent;
+      const { altKey, ctrlKey, metaKey, shiftKey } = event;
       return {
         // changed_touches: event.changedTouches,
         // target_touches: event.targetTouches,
@@ -550,18 +477,11 @@ export function serialize_event(event: Event) {
         shift_key: shiftKey,
       };
     }
-
     case "scroll": {
       return {};
     }
-
     case "wheel": {
-      const {
-        deltaX,
-        deltaY,
-        deltaZ,
-        deltaMode,
-      } = event as WheelEvent;
+      const { deltaX, deltaY, deltaZ, deltaMode } = event;
       return {
         delta_x: deltaX,
         delta_y: deltaY,
@@ -569,35 +489,24 @@ export function serialize_event(event: Event) {
         delta_mode: deltaMode,
       };
     }
-
     case "animationstart":
     case "animationend":
     case "animationiteration": {
-      const {
-        animationName,
-        elapsedTime,
-        pseudoElement,
-      } = event as AnimationEvent;
+      const { animationName, elapsedTime, pseudoElement } = event;
       return {
         animation_name: animationName,
         elapsed_time: elapsedTime,
         pseudo_element: pseudoElement,
       };
     }
-
     case "transitionend": {
-      const {
-        propertyName,
-        elapsedTime,
-        pseudoElement,
-      } = event as TransitionEvent;
+      const { propertyName, elapsedTime, pseudoElement } = event;
       return {
         property_name: propertyName,
         elapsed_time: elapsedTime,
         pseudo_element: pseudoElement,
       };
     }
-
     case "abort":
     case "canplay":
     case "canplaythrough":
@@ -623,17 +532,14 @@ export function serialize_event(event: Event) {
     case "waiting": {
       return {};
     }
-
     case "toggle": {
       return {};
     }
-
     default: {
       return {};
     }
   }
 }
-
 const bool_attrs = {
   allowfullscreen: true,
   allowpaymentrequest: true,
@@ -662,36 +568,3 @@ const bool_attrs = {
   selected: true,
   truespeed: true,
 };
-
-type PushRoot = { type: "PushRoot", root: number };
-type AppendChildren = { type: "AppendChildren", many: number };
-type ReplaceWith = { type: "ReplaceWith", root: number, m: number };
-type InsertAfter = { type: "InsertAfter", root: number, n: number };
-type InsertBefore = { type: "InsertBefore", root: number, n: number };
-type Remove = { type: "Remove", root: number };
-type CreateTextNode = { type: "CreateTextNode", text: string, root: number };
-type CreateElement = { type: "CreateElement", tag: string, root: number };
-type CreateElementNs = { type: "CreateElementNs", tag: string, root: number, ns: string };
-type CreatePlaceholder = { type: "CreatePlaceholder", root: number };
-type NewEventListener = { type: "NewEventListener", root: number, event_name: string, scope: number };
-type RemoveEventListener = { type: "RemoveEventListener", event_name: string, scope: number, root: number };
-type SetText = { type: "SetText", root: number, text: string };
-type SetAttribute = { type: "SetAttribute", root: number, field: string, value: string, ns: string | undefined };
-type RemoveAttribute = { type: "RemoveAttribute", root: number, name: string };
-
-type DomEdit =
-  PushRoot |
-  AppendChildren |
-  ReplaceWith |
-  InsertAfter |
-  InsertBefore |
-  Remove |
-  CreateTextNode |
-  CreateElement |
-  CreateElementNs |
-  CreatePlaceholder |
-  NewEventListener |
-  RemoveEventListener |
-  SetText |
-  SetAttribute |
-  RemoveAttribute;

packages/interpreter/src/lib.rs

@@ -1 +1,7 @@
-pub static INTERPRTER_JS: &str = include_str!("../gen/interpreter.js");
+pub static INTERPRTER_JS: &str = include_str!("./interpreter.js");
+
+#[cfg(feature = "web")]
+mod bindings;
+
+#[cfg(feature = "web")]
+pub use bindings::Interpreter;