dioxus/packages/jsinterpreter/interpreter.js
2022-01-12 08:57:42 -05:00

460 lines
16 KiB
JavaScript

"use strict";
exports.__esModule = true;
exports.Interpreter = void 0;
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_1 = event.target;
var value_1 = (_b = target_1.value) !== null && _b !== void 0 ? _b : target_1.textContent;
if (target_1.type == "checkbox") {
value_1 = target_1.checked ? "true" : "false";
}
return {
value: value_1
};
}
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_1 = _d.altKey, button = _d.button, buttons = _d.buttons, clientX = _d.clientX, clientY = _d.clientY, ctrlKey_1 = _d.ctrlKey, metaKey_1 = _d.metaKey, pageX = _d.pageX, pageY = _d.pageY, screenX_1 = _d.screenX, screenY_1 = _d.screenY, shiftKey_1 = _d.shiftKey;
return {
alt_key: altKey_1,
button: button,
buttons: buttons,
client_x: clientX,
client_y: clientY,
ctrl_key: ctrlKey_1,
meta_key: metaKey_1,
page_x: pageX,
page_y: pageY,
screen_x: screenX_1,
screen_y: screenY_1,
shift_key: shiftKey_1
};
}
case "pointerdown":
case "pointermove":
case "pointerup":
case "pointercancel":
case "gotpointercapture":
case "lostpointercapture":
case "pointerenter":
case "pointerleave":
case "pointerover":
case "pointerout": {
var _e = event, altKey_2 = _e.altKey, button = _e.button, buttons = _e.buttons, clientX = _e.clientX, clientY = _e.clientY, ctrlKey_2 = _e.ctrlKey, metaKey_2 = _e.metaKey, pageX = _e.pageX, pageY = _e.pageY, screenX_2 = _e.screenX, screenY_2 = _e.screenY, shiftKey_2 = _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_2,
button: button,
buttons: buttons,
client_x: clientX,
client_y: clientY,
ctrl_key: ctrlKey_2,
meta_key: metaKey_2,
page_x: pageX,
page_y: pageY,
screen_x: screenX_2,
screen_y: screenY_2,
shift_key: shiftKey_2,
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_3 = _f.altKey, ctrlKey_3 = _f.ctrlKey, metaKey_3 = _f.metaKey, shiftKey_3 = _f.shiftKey;
return {
// changed_touches: event.changedTouches,
// target_touches: event.targetTouches,
// touches: event.touches,
alt_key: altKey_3,
ctrl_key: ctrlKey_3,
meta_key: metaKey_3,
shift_key: shiftKey_3
};
}
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
};
var Interpreter = /** @class */ (function () {
function Interpreter(root) {
this.root = root;
this.stack = [root];
this.listeners = {};
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.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) {
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]) {
// this.listeners[event_name] = handler;
// this.root.addEventListener(event_name, handler);
// }
};
Interpreter.prototype.RemoveEventListener = function (root, event_name, scope) {
//
};
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) {
console.log("handling edits ", 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, edit.scope);
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);
// this.NewEventListener(edit, 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;
}());
exports.Interpreter = Interpreter;
function main() {
var root = window.document.getElementById("main");
if (root != null) {
window.interpreter = new Interpreter(root);
window.rpc.call("initialize");
}
}
main();