diff --git a/packages/jsinterpreter/interpreter.js b/packages/jsinterpreter/interpreter.js
index 453b34406..9da95fa7c 100644
--- a/packages/jsinterpreter/interpreter.js
+++ b/packages/jsinterpreter/interpreter.js
@@ -1,477 +1,569 @@
 function serialize_event(event) {
-    var _a, _b;
-    switch (event.type) {
-        case "copy":
-        case "cut":
-        case "past": {
-            return {};
-        }
-        case "compositionend":
-        case "compositionstart":
-        case "compositionupdate": {
-            var data = event.data;
-            return {
-                data: data,
-            };
-        }
-        case "keydown":
-        case "keypress":
-        case "keyup": {
-            var _c = event, charCode = _c.charCode, key = _c.key, altKey = _c.altKey, ctrlKey = _c.ctrlKey, metaKey = _c.metaKey, keyCode = _c.keyCode, shiftKey = _c.shiftKey, location_1 = _c.location, repeat = _c.repeat, which = _c.which;
-            return {
-                char_code: charCode,
-                key: key,
-                alt_key: altKey,
-                ctrl_key: ctrlKey,
-                meta_key: metaKey,
-                key_code: keyCode,
-                shift_key: shiftKey,
-                location: location_1,
-                repeat: repeat,
-                which: which,
-                locale: "locale",
-            };
-        }
-        case "focus":
-        case "blur": {
-            return {};
-        }
-        case "change": {
-            var target = event.target;
-            var value = void 0;
-            if (target.type === "checkbox" || target.type === "radio") {
-                value = target.checked ? "true" : "false";
-            }
-            else {
-                value = (_a = target.value) !== null && _a !== void 0 ? _a : target.textContent;
-            }
-            return {
-                value: value,
-            };
-        }
-        case "input":
-        case "invalid":
-        case "reset":
-        case "submit": {
-            var target = event.target;
-            var value = (_b = target.value) !== null && _b !== void 0 ? _b : target.textContent;
-            if (target.type == "checkbox") {
-                value = target.checked ? "true" : "false";
-            }
-            return {
-                value: value,
-            };
-        }
-        case "click":
-        case "contextmenu":
-        case "doubleclick":
-        case "drag":
-        case "dragend":
-        case "dragenter":
-        case "dragexit":
-        case "dragleave":
-        case "dragover":
-        case "dragstart":
-        case "drop":
-        case "mousedown":
-        case "mouseenter":
-        case "mouseleave":
-        case "mousemove":
-        case "mouseout":
-        case "mouseover":
-        case "mouseup": {
-            var _d = event, altKey = _d.altKey, button = _d.button, buttons = _d.buttons, clientX = _d.clientX, clientY = _d.clientY, ctrlKey = _d.ctrlKey, metaKey = _d.metaKey, pageX = _d.pageX, pageY = _d.pageY, screenX_1 = _d.screenX, screenY_1 = _d.screenY, shiftKey = _d.shiftKey;
-            return {
-                alt_key: altKey,
-                button: button,
-                buttons: buttons,
-                client_x: clientX,
-                client_y: clientY,
-                ctrl_key: ctrlKey,
-                meta_key: metaKey,
-                page_x: pageX,
-                page_y: pageY,
-                screen_x: screenX_1,
-                screen_y: screenY_1,
-                shift_key: shiftKey,
-            };
-        }
-        case "pointerdown":
-        case "pointermove":
-        case "pointerup":
-        case "pointercancel":
-        case "gotpointercapture":
-        case "lostpointercapture":
-        case "pointerenter":
-        case "pointerleave":
-        case "pointerover":
-        case "pointerout": {
-            var _e = event, altKey = _e.altKey, button = _e.button, buttons = _e.buttons, clientX = _e.clientX, clientY = _e.clientY, ctrlKey = _e.ctrlKey, metaKey = _e.metaKey, pageX = _e.pageX, pageY = _e.pageY, screenX_2 = _e.screenX, screenY_2 = _e.screenY, shiftKey = _e.shiftKey, pointerId = _e.pointerId, width = _e.width, height = _e.height, pressure = _e.pressure, tangentialPressure = _e.tangentialPressure, tiltX = _e.tiltX, tiltY = _e.tiltY, twist = _e.twist, pointerType = _e.pointerType, isPrimary = _e.isPrimary;
-            return {
-                alt_key: altKey,
-                button: button,
-                buttons: buttons,
-                client_x: clientX,
-                client_y: clientY,
-                ctrl_key: ctrlKey,
-                meta_key: metaKey,
-                page_x: pageX,
-                page_y: pageY,
-                screen_x: screenX_2,
-                screen_y: screenY_2,
-                shift_key: shiftKey,
-                pointer_id: pointerId,
-                width: width,
-                height: height,
-                pressure: pressure,
-                tangential_pressure: tangentialPressure,
-                tilt_x: tiltX,
-                tilt_y: tiltY,
-                twist: twist,
-                pointer_type: pointerType,
-                is_primary: isPrimary,
-            };
-        }
-        case "select": {
-            return {};
-        }
-        case "touchcancel":
-        case "touchend":
-        case "touchmove":
-        case "touchstart": {
-            var _f = event, altKey = _f.altKey, ctrlKey = _f.ctrlKey, metaKey = _f.metaKey, shiftKey = _f.shiftKey;
-            return {
-                // changed_touches: event.changedTouches,
-                // target_touches: event.targetTouches,
-                // touches: event.touches,
-                alt_key: altKey,
-                ctrl_key: ctrlKey,
-                meta_key: metaKey,
-                shift_key: shiftKey,
-            };
-        }
-        case "scroll": {
-            return {};
-        }
-        case "wheel": {
-            var _g = event, deltaX = _g.deltaX, deltaY = _g.deltaY, deltaZ = _g.deltaZ, deltaMode = _g.deltaMode;
-            return {
-                delta_x: deltaX,
-                delta_y: deltaY,
-                delta_z: deltaZ,
-                delta_mode: deltaMode,
-            };
-        }
-        case "animationstart":
-        case "animationend":
-        case "animationiteration": {
-            var _h = event, animationName = _h.animationName, elapsedTime = _h.elapsedTime, pseudoElement = _h.pseudoElement;
-            return {
-                animation_name: animationName,
-                elapsed_time: elapsedTime,
-                pseudo_element: pseudoElement,
-            };
-        }
-        case "transitionend": {
-            var _j = event, propertyName = _j.propertyName, elapsedTime = _j.elapsedTime, pseudoElement = _j.pseudoElement;
-            return {
-                property_name: propertyName,
-                elapsed_time: elapsedTime,
-                pseudo_element: pseudoElement,
-            };
-        }
-        case "abort":
-        case "canplay":
-        case "canplaythrough":
-        case "durationchange":
-        case "emptied":
-        case "encrypted":
-        case "ended":
-        case "error":
-        case "loadeddata":
-        case "loadedmetadata":
-        case "loadstart":
-        case "pause":
-        case "play":
-        case "playing":
-        case "progress":
-        case "ratechange":
-        case "seeked":
-        case "seeking":
-        case "stalled":
-        case "suspend":
-        case "timeupdate":
-        case "volumechange":
-        case "waiting": {
-            return {};
-        }
-        case "toggle": {
-            return {};
-        }
-        default: {
-            return {};
-        }
+  var _a, _b;
+  switch (event.type) {
+    case "copy":
+    case "cut":
+    case "past": {
+      return {};
     }
+    case "compositionend":
+    case "compositionstart":
+    case "compositionupdate": {
+      var data = event.data;
+      return {
+        data: data,
+      };
+    }
+    case "keydown":
+    case "keypress":
+    case "keyup": {
+      var _c = event,
+        charCode = _c.charCode,
+        key = _c.key,
+        altKey = _c.altKey,
+        ctrlKey = _c.ctrlKey,
+        metaKey = _c.metaKey,
+        keyCode = _c.keyCode,
+        shiftKey = _c.shiftKey,
+        location_1 = _c.location,
+        repeat = _c.repeat,
+        which = _c.which;
+      return {
+        char_code: charCode,
+        key: key,
+        alt_key: altKey,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        key_code: keyCode,
+        shift_key: shiftKey,
+        location: location_1,
+        repeat: repeat,
+        which: which,
+        locale: "locale",
+      };
+    }
+    case "focus":
+    case "blur": {
+      return {};
+    }
+    case "change": {
+      var target = event.target;
+      var value = void 0;
+      if (target.type === "checkbox" || target.type === "radio") {
+        value = target.checked ? "true" : "false";
+      } else {
+        value =
+          (_a = target.value) !== null && _a !== void 0
+            ? _a
+            : target.textContent;
+      }
+      return {
+        value: value,
+      };
+    }
+    case "input":
+    case "invalid":
+    case "reset":
+    case "submit": {
+      var target = event.target;
+      var value =
+        (_b = target.value) !== null && _b !== void 0 ? _b : target.textContent;
+      if (target.type == "checkbox") {
+        value = target.checked ? "true" : "false";
+      }
+      return {
+        value: value,
+      };
+    }
+    case "click":
+    case "contextmenu":
+    case "doubleclick":
+    case "drag":
+    case "dragend":
+    case "dragenter":
+    case "dragexit":
+    case "dragleave":
+    case "dragover":
+    case "dragstart":
+    case "drop":
+    case "mousedown":
+    case "mouseenter":
+    case "mouseleave":
+    case "mousemove":
+    case "mouseout":
+    case "mouseover":
+    case "mouseup": {
+      var _d = event,
+        altKey = _d.altKey,
+        button = _d.button,
+        buttons = _d.buttons,
+        clientX = _d.clientX,
+        clientY = _d.clientY,
+        ctrlKey = _d.ctrlKey,
+        metaKey = _d.metaKey,
+        pageX = _d.pageX,
+        pageY = _d.pageY,
+        screenX_1 = _d.screenX,
+        screenY_1 = _d.screenY,
+        shiftKey = _d.shiftKey;
+      return {
+        alt_key: altKey,
+        button: button,
+        buttons: buttons,
+        client_x: clientX,
+        client_y: clientY,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        page_x: pageX,
+        page_y: pageY,
+        screen_x: screenX_1,
+        screen_y: screenY_1,
+        shift_key: shiftKey,
+      };
+    }
+    case "pointerdown":
+    case "pointermove":
+    case "pointerup":
+    case "pointercancel":
+    case "gotpointercapture":
+    case "lostpointercapture":
+    case "pointerenter":
+    case "pointerleave":
+    case "pointerover":
+    case "pointerout": {
+      var _e = event,
+        altKey = _e.altKey,
+        button = _e.button,
+        buttons = _e.buttons,
+        clientX = _e.clientX,
+        clientY = _e.clientY,
+        ctrlKey = _e.ctrlKey,
+        metaKey = _e.metaKey,
+        pageX = _e.pageX,
+        pageY = _e.pageY,
+        screenX_2 = _e.screenX,
+        screenY_2 = _e.screenY,
+        shiftKey = _e.shiftKey,
+        pointerId = _e.pointerId,
+        width = _e.width,
+        height = _e.height,
+        pressure = _e.pressure,
+        tangentialPressure = _e.tangentialPressure,
+        tiltX = _e.tiltX,
+        tiltY = _e.tiltY,
+        twist = _e.twist,
+        pointerType = _e.pointerType,
+        isPrimary = _e.isPrimary;
+      return {
+        alt_key: altKey,
+        button: button,
+        buttons: buttons,
+        client_x: clientX,
+        client_y: clientY,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        page_x: pageX,
+        page_y: pageY,
+        screen_x: screenX_2,
+        screen_y: screenY_2,
+        shift_key: shiftKey,
+        pointer_id: pointerId,
+        width: width,
+        height: height,
+        pressure: pressure,
+        tangential_pressure: tangentialPressure,
+        tilt_x: tiltX,
+        tilt_y: tiltY,
+        twist: twist,
+        pointer_type: pointerType,
+        is_primary: isPrimary,
+      };
+    }
+    case "select": {
+      return {};
+    }
+    case "touchcancel":
+    case "touchend":
+    case "touchmove":
+    case "touchstart": {
+      var _f = event,
+        altKey = _f.altKey,
+        ctrlKey = _f.ctrlKey,
+        metaKey = _f.metaKey,
+        shiftKey = _f.shiftKey;
+      return {
+        // changed_touches: event.changedTouches,
+        // target_touches: event.targetTouches,
+        // touches: event.touches,
+        alt_key: altKey,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        shift_key: shiftKey,
+      };
+    }
+    case "scroll": {
+      return {};
+    }
+    case "wheel": {
+      var _g = event,
+        deltaX = _g.deltaX,
+        deltaY = _g.deltaY,
+        deltaZ = _g.deltaZ,
+        deltaMode = _g.deltaMode;
+      return {
+        delta_x: deltaX,
+        delta_y: deltaY,
+        delta_z: deltaZ,
+        delta_mode: deltaMode,
+      };
+    }
+    case "animationstart":
+    case "animationend":
+    case "animationiteration": {
+      var _h = event,
+        animationName = _h.animationName,
+        elapsedTime = _h.elapsedTime,
+        pseudoElement = _h.pseudoElement;
+      return {
+        animation_name: animationName,
+        elapsed_time: elapsedTime,
+        pseudo_element: pseudoElement,
+      };
+    }
+    case "transitionend": {
+      var _j = event,
+        propertyName = _j.propertyName,
+        elapsedTime = _j.elapsedTime,
+        pseudoElement = _j.pseudoElement;
+      return {
+        property_name: propertyName,
+        elapsed_time: elapsedTime,
+        pseudo_element: pseudoElement,
+      };
+    }
+    case "abort":
+    case "canplay":
+    case "canplaythrough":
+    case "durationchange":
+    case "emptied":
+    case "encrypted":
+    case "ended":
+    case "error":
+    case "loadeddata":
+    case "loadedmetadata":
+    case "loadstart":
+    case "pause":
+    case "play":
+    case "playing":
+    case "progress":
+    case "ratechange":
+    case "seeked":
+    case "seeking":
+    case "stalled":
+    case "suspend":
+    case "timeupdate":
+    case "volumechange":
+    case "waiting": {
+      return {};
+    }
+    case "toggle": {
+      return {};
+    }
+    default: {
+      return {};
+    }
+  }
 }
 var bool_attrs = {
-    allowfullscreen: true,
-    allowpaymentrequest: true,
-    async: true,
-    autofocus: true,
-    autoplay: true,
-    checked: true,
-    controls: true,
-    default: true,
-    defer: true,
-    disabled: true,
-    formnovalidate: true,
-    hidden: true,
-    ismap: true,
-    itemscope: true,
-    loop: true,
-    multiple: true,
-    muted: true,
-    nomodule: true,
-    novalidate: true,
-    open: true,
-    playsinline: true,
-    readonly: true,
-    required: true,
-    reversed: true,
-    selected: true,
-    truespeed: true,
+  allowfullscreen: true,
+  allowpaymentrequest: true,
+  async: true,
+  autofocus: true,
+  autoplay: true,
+  checked: true,
+  controls: true,
+  default: true,
+  defer: true,
+  disabled: true,
+  formnovalidate: true,
+  hidden: true,
+  ismap: true,
+  itemscope: true,
+  loop: true,
+  multiple: true,
+  muted: true,
+  nomodule: true,
+  novalidate: true,
+  open: true,
+  playsinline: true,
+  readonly: true,
+  required: true,
+  reversed: true,
+  selected: true,
+  truespeed: true,
 };
 var Interpreter = /** @class */ (function () {
-    function Interpreter(root) {
-        this.root = root;
-        this.stack = [root];
-        this.listeners = {};
-        this.handlers = {};
-        this.lastNodeWasText = false;
-        this.nodes = [root];
+  function Interpreter(root) {
+    this.root = root;
+    this.stack = [root];
+    this.listeners = {};
+    this.handlers = {};
+    this.lastNodeWasText = false;
+    this.nodes = [root];
+  }
+  Interpreter.prototype.top = function () {
+    return this.stack[this.stack.length - 1];
+  };
+  Interpreter.prototype.pop = function () {
+    return this.stack.pop();
+  };
+  Interpreter.prototype.PushRoot = function (root) {
+    var node = this.nodes[root];
+    this.stack.push(node);
+  };
+  Interpreter.prototype.AppendChildren = function (many) {
+    var root = this.stack[this.stack.length - (1 + many)];
+    var to_add = this.stack.splice(this.stack.length - many);
+    for (var i = 0; i < many; i++) {
+      root.appendChild(to_add[i]);
     }
-    Interpreter.prototype.top = function () {
-        return this.stack[this.stack.length - 1];
-    };
-    Interpreter.prototype.pop = function () {
-        return this.stack.pop();
-    };
-    Interpreter.prototype.PushRoot = function (root) {
-        var node = this.nodes[root];
-        this.stack.push(node);
-    };
-    Interpreter.prototype.AppendChildren = function (many) {
-        var root = this.stack[this.stack.length - (1 + many)];
-        var to_add = this.stack.splice(this.stack.length - many);
-        for (var i = 0; i < many; i++) {
-            root.appendChild(to_add[i]);
-        }
-    };
-    Interpreter.prototype.ReplaceWith = function (root_id, m) {
-        var root = this.nodes[root_id];
-        var els = this.stack.splice(this.stack.length - m);
-        root.replaceWith.apply(root, els);
-    };
-    Interpreter.prototype.InsertAfter = function (root, n) {
-        var old = this.nodes[root];
-        var new_nodes = this.stack.splice(this.stack.length - n);
-        old.after.apply(old, new_nodes);
-    };
-    Interpreter.prototype.InsertBefore = function (root, n) {
-        var old = this.nodes[root];
-        var new_nodes = this.stack.splice(this.stack.length - n);
-        old.before.apply(old, new_nodes);
-    };
-    Interpreter.prototype.Remove = function (root) {
-        var node = this.nodes[root];
-        if (node !== undefined) {
-            node.remove();
-        }
-    };
-    Interpreter.prototype.CreateTextNode = function (text, root) {
-        // todo: make it so the types are okay
-        var node = document.createTextNode(text);
-        this.nodes[root] = node;
-        this.stack.push(node);
-    };
-    Interpreter.prototype.CreateElement = function (tag, root) {
-        var el = document.createElement(tag);
-        el.setAttribute("dioxus-id", "".concat(root));
-        this.nodes[root] = el;
-        this.stack.push(el);
-    };
-    Interpreter.prototype.CreateElementNs = function (tag, root, ns) {
-        var el = document.createElementNS(ns, tag);
-        this.stack.push(el);
-        this.nodes[root] = el;
-    };
-    Interpreter.prototype.CreatePlaceholder = function (root) {
-        var el = document.createElement("pre");
-        el.hidden = true;
-        this.stack.push(el);
-        this.nodes[root] = el;
-    };
-    Interpreter.prototype.NewEventListener = function (event_name, scope, root, handler) {
-        // console.log('new event listener', event_name, root, scope);
-        var element = this.nodes[root];
-        element.setAttribute("dioxus-event-".concat(event_name), "".concat(scope, ".").concat(root));
-        if (this.listeners[event_name] === undefined) {
-            this.listeners[event_name] = 0;
-            this.handlers[event_name] = handler;
-            this.root.addEventListener(event_name, handler);
-        }
-        else {
-            this.listeners[event_name]++;
-        }
-    };
-    Interpreter.prototype.RemoveEventListener = function (root, event_name) {
-        var element = this.nodes[root];
-        element.removeAttribute("dioxus-event-".concat(event_name));
-        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];
-        }
-    };
-    Interpreter.prototype.SetText = function (root, text) {
-        this.nodes[root].textContent = text;
-    };
-    Interpreter.prototype.SetAttribute = function (root, field, value, ns) {
-        var name = field;
-        var node = this.nodes[root];
-        if (ns == "style") {
-            // @ts-ignore
-            node.style[name] = value;
-        }
-        else if (ns != null || ns != undefined) {
-            node.setAttributeNS(ns, name, value);
-        }
-        else {
-            switch (name) {
-                case "value":
-                    if (value != node.value) {
-                        node.value = value;
-                    }
-                    break;
-                case "checked":
-                    node.checked = value === "true";
-                    break;
-                case "selected":
-                    node.selected = value === "true";
-                    break;
-                case "dangerous_inner_html":
-                    node.innerHTML = value;
-                    break;
-                default:
-                    // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
-                    if (value == "false" && bool_attrs.hasOwnProperty(name)) {
-                        node.removeAttribute(name);
-                    }
-                    else {
-                        node.setAttribute(name, value);
-                    }
+  };
+  Interpreter.prototype.ReplaceWith = function (root_id, m) {
+    var root = this.nodes[root_id];
+    var els = this.stack.splice(this.stack.length - m);
+    root.replaceWith.apply(root, els);
+  };
+  Interpreter.prototype.InsertAfter = function (root, n) {
+    var old = this.nodes[root];
+    var new_nodes = this.stack.splice(this.stack.length - n);
+    old.after.apply(old, new_nodes);
+  };
+  Interpreter.prototype.InsertBefore = function (root, n) {
+    var old = this.nodes[root];
+    var new_nodes = this.stack.splice(this.stack.length - n);
+    old.before.apply(old, new_nodes);
+  };
+  Interpreter.prototype.Remove = function (root) {
+    var node = this.nodes[root];
+    if (node !== undefined) {
+      node.remove();
+    }
+  };
+  Interpreter.prototype.CreateTextNode = function (text, root) {
+    // todo: make it so the types are okay
+    var node = document.createTextNode(text);
+    this.nodes[root] = node;
+    this.stack.push(node);
+  };
+  Interpreter.prototype.CreateElement = function (tag, root) {
+    var el = document.createElement(tag);
+    el.setAttribute("dioxus-id", "".concat(root));
+    this.nodes[root] = el;
+    this.stack.push(el);
+  };
+  Interpreter.prototype.CreateElementNs = function (tag, root, ns) {
+    var el = document.createElementNS(ns, tag);
+    this.stack.push(el);
+    this.nodes[root] = el;
+  };
+  Interpreter.prototype.CreatePlaceholder = function (root) {
+    var el = document.createElement("pre");
+    el.hidden = true;
+    this.stack.push(el);
+    this.nodes[root] = el;
+  };
+  Interpreter.prototype.NewEventListener = function (
+    event_name,
+    scope,
+    root,
+    handler
+  ) {
+    // console.log('new event listener', event_name, root, scope);
+    var element = this.nodes[root];
+    element.setAttribute(
+      "dioxus-event-".concat(event_name),
+      "".concat(scope, ".").concat(root)
+    );
+    if (this.listeners[event_name] === undefined) {
+      this.listeners[event_name] = 0;
+      this.handlers[event_name] = handler;
+      this.root.addEventListener(event_name, handler);
+    } else {
+      this.listeners[event_name]++;
+    }
+  };
+  Interpreter.prototype.RemoveEventListener = function (root, event_name) {
+    var element = this.nodes[root];
+    element.removeAttribute("dioxus-event-".concat(event_name));
+    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];
+    }
+  };
+  Interpreter.prototype.SetText = function (root, text) {
+    this.nodes[root].textContent = text;
+  };
+  Interpreter.prototype.SetAttribute = function (root, field, value, ns) {
+    var name = field;
+    var node = this.nodes[root];
+    if (ns == "style") {
+      // @ts-ignore
+      node.style[name] = value;
+    } else if (ns != null || ns != undefined) {
+      node.setAttributeNS(ns, name, value);
+    } else {
+      switch (name) {
+        case "value":
+          if (value != node.value) {
+            node.value = value;
+          }
+          break;
+        case "checked":
+          node.checked = value === "true";
+          break;
+        case "selected":
+          node.selected = value === "true";
+          break;
+        case "dangerous_inner_html":
+          node.innerHTML = value;
+          break;
+        default:
+          // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
+          if (value == "false" && bool_attrs.hasOwnProperty(name)) {
+            node.removeAttribute(name);
+          } else {
+            node.setAttribute(name, value);
+          }
+      }
+    }
+  };
+  Interpreter.prototype.RemoveAttribute = function (root, name) {
+    var node = this.nodes[root];
+    node.removeAttribute(name);
+    if (name === "value") {
+      node.value = "";
+    }
+    if (name === "checked") {
+      node.checked = false;
+    }
+    if (name === "selected") {
+      node.selected = false;
+    }
+  };
+  Interpreter.prototype.handleEdits = function (edits) {
+    this.stack.push(this.root);
+    for (var _i = 0, edits_1 = edits; _i < edits_1.length; _i++) {
+      var edit = edits_1[_i];
+      this.handleEdit(edit);
+    }
+  };
+  Interpreter.prototype.handleEdit = function (edit) {
+    switch (edit.type) {
+      case "PushRoot":
+        this.PushRoot(edit.root);
+        break;
+      case "AppendChildren":
+        this.AppendChildren(edit.many);
+        break;
+      case "ReplaceWith":
+        this.ReplaceWith(edit.root, edit.m);
+        break;
+      case "InsertAfter":
+        this.InsertAfter(edit.root, edit.n);
+        break;
+      case "InsertBefore":
+        this.InsertBefore(edit.root, edit.n);
+        break;
+      case "Remove":
+        this.Remove(edit.root);
+        break;
+      case "CreateTextNode":
+        this.CreateTextNode(edit.text, edit.root);
+        break;
+      case "CreateElement":
+        this.CreateElement(edit.tag, edit.root);
+        break;
+      case "CreateElementNs":
+        this.CreateElementNs(edit.tag, edit.root, edit.ns);
+        break;
+      case "CreatePlaceholder":
+        this.CreatePlaceholder(edit.root);
+        break;
+      case "RemoveEventListener":
+        this.RemoveEventListener(edit.root, edit.event_name);
+        break;
+      case "NewEventListener":
+        // todo: only on desktop should we make our own handler
+        var handler = function (event) {
+          var target = event.target;
+          // console.log("event", event);
+          if (target != null) {
+            var realId = target.getAttribute("dioxus-id");
+            var shouldPreventDefault = target.getAttribute(
+              "dioxus-prevent-default"
+            );
+            var contents = serialize_event(event);
+            if (shouldPreventDefault === "on".concat(event.type)) {
+              event.preventDefault();
             }
-        }
-    };
-    Interpreter.prototype.RemoveAttribute = function (root, name) {
-        var node = this.nodes[root];
-        node.removeAttribute(name);
-        if (name === "value") {
-            node.value = "";
-        }
-        if (name === "checked") {
-            node.checked = false;
-        }
-        if (name === "selected") {
-            node.selected = false;
-        }
-    };
-    Interpreter.prototype.handleEdits = function (edits) {
-        this.stack.push(this.root);
-        for (var _i = 0, edits_1 = edits; _i < edits_1.length; _i++) {
-            var edit = edits_1[_i];
-            this.handleEdit(edit);
-        }
-    };
-    Interpreter.prototype.handleEdit = function (edit) {
-        switch (edit.type) {
-            case "PushRoot":
-                this.PushRoot(edit.root);
-                break;
-            case "AppendChildren":
-                this.AppendChildren(edit.many);
-                break;
-            case "ReplaceWith":
-                this.ReplaceWith(edit.root, edit.m);
-                break;
-            case "InsertAfter":
-                this.InsertAfter(edit.root, edit.n);
-                break;
-            case "InsertBefore":
-                this.InsertBefore(edit.root, edit.n);
-                break;
-            case "Remove":
-                this.Remove(edit.root);
-                break;
-            case "CreateTextNode":
-                this.CreateTextNode(edit.text, edit.root);
-                break;
-            case "CreateElement":
-                this.CreateElement(edit.tag, edit.root);
-                break;
-            case "CreateElementNs":
-                this.CreateElementNs(edit.tag, edit.root, edit.ns);
-                break;
-            case "CreatePlaceholder":
-                this.CreatePlaceholder(edit.root);
-                break;
-            case "RemoveEventListener":
-                this.RemoveEventListener(edit.root, edit.event_name);
-                break;
-            case "NewEventListener":
-                // todo: only on desktop should we make our own handler
-                var handler = function (event) {
-                    var target = event.target;
-                    // console.log("event", event);
-                    if (target != null) {
-                        var real_id = target.getAttribute("dioxus-id");
-                        var should_prevent_default = target.getAttribute("dioxus-prevent-default");
-                        var contents = serialize_event(event);
-                        if (should_prevent_default === "on".concat(event.type)) {
-                            event.preventDefault();
-                        }
-                        if (real_id == null) {
-                            return;
-                        }
-                        window.rpc.call("user_event", {
-                            event: edit.event_name,
-                            mounted_dom_id: parseInt(real_id),
-                            contents: contents,
-                        });
-                    }
-                };
-                this.NewEventListener(edit.event_name, edit.scope, edit.root, handler);
-                break;
-            case "SetText":
-                this.SetText(edit.root, edit.text);
-                break;
-            case "SetAttribute":
-                this.SetAttribute(edit.root, edit.field, edit.value, edit.ns);
-                break;
-            case "RemoveAttribute":
-                this.RemoveAttribute(edit.root, edit.name);
-                break;
-        }
-    };
-    return Interpreter;
-}());
+
+            if (event.type == "submit") {
+              event.preventDefault();
+            }
+
+            if (event.type == "click") {
+              event.preventDefault();
+              if (shouldPreventDefault !== `onclick`) {
+                if (target.tagName == "A") {
+                  var href = target.getAttribute("href");
+                  if (
+                    href !== "" &&
+                    href !== null &&
+                    href !== undefined &&
+                    realId != null
+                  ) {
+                    window.rpc.call("browser_open", {
+                      mounted_dom_id: parseInt(realId),
+                      href: href,
+                    });
+                  }
+                }
+              }
+            }
+
+            if (realId == null) {
+              return;
+            }
+            window.rpc.call("user_event", {
+              event: edit.event_name,
+              mounted_dom_id: parseInt(realId),
+              contents: contents,
+            });
+          }
+        };
+        this.NewEventListener(edit.event_name, edit.scope, edit.root, handler);
+        break;
+      case "SetText":
+        this.SetText(edit.root, edit.text);
+        break;
+      case "SetAttribute":
+        this.SetAttribute(edit.root, edit.field, edit.value, edit.ns);
+        break;
+      case "RemoveAttribute":
+        this.RemoveAttribute(edit.root, edit.name);
+        break;
+    }
+  };
+  return Interpreter;
+})();
 export { Interpreter };
 function main() {
-    var root = window.document.getElementById("main");
-    if (root != null) {
-        window.interpreter = new Interpreter(root);
-        window.rpc.call("initialize");
-    }
+  var root = window.document.getElementById("main");
+  if (root != null) {
+    window.interpreter = new Interpreter(root);
+    window.rpc.call("initialize");
+  }
 }
-//# sourceMappingURL=interpreter.js.map
\ No newline at end of file
+//# sourceMappingURL=interpreter.js.map