feat: setup a typescript build
This commit is contained in:
Jonathan Kelley committed
1 parent
6771ead13e
commit
5bf6c96f9f
6 files changed
+1111
-449
No files matched your search
@@ -12,7 +12,8 @@
|
|||||||
<div id="main">
|
<div id="main">
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script type="text/javascript" src="index.js">
|
|
||||||
</script>
|
<script>var exports = {};</script>
|
||||||
|
<script type="text/javascript" src="index.js" type="module"></script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,446 +0,0 @@
|
|||||||
const 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,
|
|
||||||
};
|
|
||||||
|
|
||||||
function serialize_event(event) {
|
|
||||||
switch (event.type) {
|
|
||||||
case "copy":
|
|
||||||
case "cut":
|
|
||||||
case "past":
|
|
||||||
return {};
|
|
||||||
|
|
||||||
case "compositionend":
|
|
||||||
case "compositionstart":
|
|
||||||
case "compositionupdate":
|
|
||||||
return {
|
|
||||||
data: event.data,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "keydown":
|
|
||||||
case "keypress":
|
|
||||||
case "keyup":
|
|
||||||
return {
|
|
||||||
char_code: event.charCode,
|
|
||||||
key: event.key,
|
|
||||||
alt_key: event.altKey,
|
|
||||||
ctrl_key: event.ctrlKey,
|
|
||||||
meta_key: event.metaKey,
|
|
||||||
key_code: event.keyCode,
|
|
||||||
shift_key: event.shiftKey,
|
|
||||||
locale: "locale",
|
|
||||||
location: event.location,
|
|
||||||
repeat: event.repeat,
|
|
||||||
which: event.which,
|
|
||||||
// locale: event.locale,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "focus":
|
|
||||||
case "blur":
|
|
||||||
return {};
|
|
||||||
|
|
||||||
case "change":
|
|
||||||
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;
|
|
||||||
let value = target.value ?? 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":
|
|
||||||
return {
|
|
||||||
alt_key: event.altKey,
|
|
||||||
button: event.button,
|
|
||||||
buttons: event.buttons,
|
|
||||||
client_x: event.clientX,
|
|
||||||
client_y: event.clientY,
|
|
||||||
ctrl_key: event.ctrlKey,
|
|
||||||
meta_key: event.metaKey,
|
|
||||||
page_x: event.pageX,
|
|
||||||
page_y: event.pageY,
|
|
||||||
screen_x: event.screenX,
|
|
||||||
screen_y: event.screenY,
|
|
||||||
shift_key: event.shiftKey,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "pointerdown":
|
|
||||||
case "pointermove":
|
|
||||||
case "pointerup":
|
|
||||||
case "pointercancel":
|
|
||||||
case "gotpointercapture":
|
|
||||||
case "lostpointercapture":
|
|
||||||
case "pointerenter":
|
|
||||||
case "pointerleave":
|
|
||||||
case "pointerover":
|
|
||||||
case "pointerout":
|
|
||||||
return {
|
|
||||||
alt_key: event.altKey,
|
|
||||||
button: event.button,
|
|
||||||
buttons: event.buttons,
|
|
||||||
client_x: event.clientX,
|
|
||||||
client_y: event.clientY,
|
|
||||||
ctrl_key: event.ctrlKey,
|
|
||||||
meta_key: event.metaKey,
|
|
||||||
page_x: event.pageX,
|
|
||||||
page_y: event.pageY,
|
|
||||||
screen_x: event.screenX,
|
|
||||||
screen_y: event.screenY,
|
|
||||||
shift_key: event.shiftKey,
|
|
||||||
pointer_id: event.pointerId,
|
|
||||||
width: event.width,
|
|
||||||
height: event.height,
|
|
||||||
pressure: event.pressure,
|
|
||||||
tangential_pressure: event.tangentialPressure,
|
|
||||||
tilt_x: event.tiltX,
|
|
||||||
tilt_y: event.tiltY,
|
|
||||||
twist: event.twist,
|
|
||||||
pointer_type: event.pointerType,
|
|
||||||
is_primary: event.isPrimary,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "select":
|
|
||||||
return {};
|
|
||||||
|
|
||||||
case "touchcancel":
|
|
||||||
case "touchend":
|
|
||||||
case "touchmove":
|
|
||||||
case "touchstart":
|
|
||||||
return {
|
|
||||||
alt_key: event.altKey,
|
|
||||||
ctrl_key: event.ctrlKey,
|
|
||||||
meta_key: event.metaKey,
|
|
||||||
shift_key: event.shiftKey,
|
|
||||||
|
|
||||||
// changed_touches: event.changedTouches,
|
|
||||||
// target_touches: event.targetTouches,
|
|
||||||
// touches: event.touches,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "scroll":
|
|
||||||
return {};
|
|
||||||
|
|
||||||
case "wheel":
|
|
||||||
return {
|
|
||||||
delta_x: event.deltaX,
|
|
||||||
delta_y: event.deltaY,
|
|
||||||
delta_z: event.deltaZ,
|
|
||||||
delta_mode: event.deltaMode,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "animationstart":
|
|
||||||
case "animationend":
|
|
||||||
case "animationiteration":
|
|
||||||
return {
|
|
||||||
animation_name: event.animationName,
|
|
||||||
elapsed_time: event.elapsedTime,
|
|
||||||
pseudo_element: event.pseudoElement,
|
|
||||||
};
|
|
||||||
|
|
||||||
case "transitionend":
|
|
||||||
return {
|
|
||||||
property_name: event.propertyName,
|
|
||||||
elapsed_time: event.elapsedTime,
|
|
||||||
pseudo_element: event.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 {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Interpreter {
|
|
||||||
constructor(root) {
|
|
||||||
this.root = root;
|
|
||||||
this.stack = [root];
|
|
||||||
this.listeners = {
|
|
||||||
onclick: {},
|
|
||||||
};
|
|
||||||
this.lastNodeWasText = false;
|
|
||||||
this.nodes = [root];
|
|
||||||
}
|
|
||||||
|
|
||||||
top() {
|
|
||||||
return this.stack[this.stack.length - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
pop() {
|
|
||||||
return this.stack.pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
PushRoot(edit) {
|
|
||||||
const id = edit.root;
|
|
||||||
const node = this.nodes[id];
|
|
||||||
this.stack.push(node);
|
|
||||||
}
|
|
||||||
|
|
||||||
AppendChildren(edit) {
|
|
||||||
let root = this.stack[this.stack.length - (1 + edit.many)];
|
|
||||||
|
|
||||||
let to_add = this.stack.splice(this.stack.length - edit.many);
|
|
||||||
|
|
||||||
for (let i = 0; i < edit.many; i++) {
|
|
||||||
root.appendChild(to_add[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ReplaceWith(edit) {
|
|
||||||
let root = this.nodes[edit.root];
|
|
||||||
let els = this.stack.splice(this.stack.length - edit.m);
|
|
||||||
|
|
||||||
root.replaceWith(...els);
|
|
||||||
}
|
|
||||||
|
|
||||||
InsertAfter(edit) {
|
|
||||||
let old = this.nodes[edit.root];
|
|
||||||
let new_nodes = this.stack.splice(this.stack.length - edit.n);
|
|
||||||
old.after(...new_nodes);
|
|
||||||
}
|
|
||||||
|
|
||||||
InsertBefore(edit) {
|
|
||||||
let old = this.nodes[edit.root];
|
|
||||||
let new_nodes = this.stack.splice(this.stack.length - edit.n);
|
|
||||||
old.before(...new_nodes);
|
|
||||||
}
|
|
||||||
|
|
||||||
Remove(edit) {
|
|
||||||
let node = this.nodes[edit.root];
|
|
||||||
if (node !== undefined) {
|
|
||||||
node.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
CreateTextNode(edit) {
|
|
||||||
const node = document.createTextNode(edit.text);
|
|
||||||
this.nodes[edit.root] = node;
|
|
||||||
this.stack.push(node);
|
|
||||||
}
|
|
||||||
|
|
||||||
CreateElement(edit) {
|
|
||||||
const tagName = edit.tag;
|
|
||||||
const el = document.createElement(tagName);
|
|
||||||
this.nodes[edit.root] = el;
|
|
||||||
el.setAttribute("dioxus-id", edit.root);
|
|
||||||
this.stack.push(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
CreateElementNs(edit) {
|
|
||||||
let el = document.createElementNS(edit.ns, edit.tag);
|
|
||||||
this.stack.push(el);
|
|
||||||
this.nodes[edit.root] = el;
|
|
||||||
}
|
|
||||||
|
|
||||||
CreatePlaceholder(edit) {
|
|
||||||
let el = document.createElement("pre");
|
|
||||||
el.hidden = true;
|
|
||||||
this.stack.push(el);
|
|
||||||
this.nodes[edit.root] = el;
|
|
||||||
}
|
|
||||||
|
|
||||||
RemoveEventListener(edit) {}
|
|
||||||
|
|
||||||
NewEventListener(edit) {
|
|
||||||
const event_name = edit.event_name;
|
|
||||||
const mounted_node_id = edit.root;
|
|
||||||
const scope = edit.scope;
|
|
||||||
|
|
||||||
const element = this.nodes[edit.root];
|
|
||||||
element.setAttribute(
|
|
||||||
`dioxus-event-${event_name}`,
|
|
||||||
`${scope}.${mounted_node_id}`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (this.listeners[event_name] === undefined) {
|
|
||||||
this.listeners[event_name] = true;
|
|
||||||
|
|
||||||
this.root.addEventListener(event_name, (event) => {
|
|
||||||
const target = event.target;
|
|
||||||
const real_id = target.getAttribute(`dioxus-id`);
|
|
||||||
|
|
||||||
const should_prevent_default = target.getAttribute(
|
|
||||||
`dioxus-prevent-default`
|
|
||||||
);
|
|
||||||
|
|
||||||
let contents = serialize_event(event);
|
|
||||||
|
|
||||||
if (should_prevent_default === `on${event.type}`) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (real_id == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
rpc.call("user_event", {
|
|
||||||
event: event_name,
|
|
||||||
mounted_dom_id: parseInt(real_id),
|
|
||||||
contents: contents,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
SetText(edit) {
|
|
||||||
this.nodes[edit.root].textContent = edit.text;
|
|
||||||
}
|
|
||||||
|
|
||||||
SetAttribute(edit) {
|
|
||||||
// console.log("setting attr", edit);
|
|
||||||
const name = edit.field;
|
|
||||||
const value = edit.value;
|
|
||||||
const ns = edit.ns;
|
|
||||||
const node = this.nodes[edit.root];
|
|
||||||
|
|
||||||
if (ns == "style") {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RemoveAttribute(edit) {
|
|
||||||
const name = edit.field;
|
|
||||||
const node = this.nodes[edit.root];
|
|
||||||
node.removeAttribute(name);
|
|
||||||
|
|
||||||
if (name === "value") {
|
|
||||||
node.value = null;
|
|
||||||
}
|
|
||||||
if (name === "checked") {
|
|
||||||
node.checked = false;
|
|
||||||
}
|
|
||||||
if (name === "selected") {
|
|
||||||
node.selected = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEdits(edits) {
|
|
||||||
this.stack.push(this.root);
|
|
||||||
|
|
||||||
for (let x = 0; x < edits.length; x++) {
|
|
||||||
let edit = edits[x];
|
|
||||||
let f = this[edit.type];
|
|
||||||
f.call(this, edit);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function main() {
|
|
||||||
let root = window.document.getElementById("main");
|
|
||||||
window.interpreter = new Interpreter(root);
|
|
||||||
rpc.call("initialize");
|
|
||||||
}
|
|
||||||
|
|
||||||
main();
|
|
||||||
@@ -203,7 +203,7 @@ pub fn launch_with_props<P: 'static + Send>(
|
|||||||
} else if path.trim_end_matches('/') == "index.html/index.js" {
|
} else if path.trim_end_matches('/') == "index.html/index.js" {
|
||||||
wry::http::ResponseBuilder::new()
|
wry::http::ResponseBuilder::new()
|
||||||
.mimetype("text/javascript")
|
.mimetype("text/javascript")
|
||||||
.body(include_bytes!("./index.js").to_vec())
|
.body(include_bytes!("../../jsinterpreter/interpreter.js").to_vec())
|
||||||
} else {
|
} else {
|
||||||
wry::http::ResponseBuilder::new()
|
wry::http::ResponseBuilder::new()
|
||||||
.status(wry::http::status::StatusCode::NOT_FOUND)
|
.status(wry::http::status::StatusCode::NOT_FOUND)
|
||||||
|
|||||||
@@ -0,0 +1,461 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
|
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 (edit) {
|
||||||
|
var id = edit.root;
|
||||||
|
var node = this.nodes[id];
|
||||||
|
this.stack.push(node);
|
||||||
|
};
|
||||||
|
Interpreter.prototype.AppendChildren = function (edit) {
|
||||||
|
var root = this.stack[this.stack.length - (1 + edit.many)];
|
||||||
|
var to_add = this.stack.splice(this.stack.length - edit.many);
|
||||||
|
for (var i = 0; i < edit.many; i++) {
|
||||||
|
root.appendChild(to_add[i]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Interpreter.prototype.ReplaceWith = function (edit) {
|
||||||
|
var root = this.nodes[edit.root];
|
||||||
|
var els = this.stack.splice(this.stack.length - edit.m);
|
||||||
|
root.replaceWith.apply(root, els);
|
||||||
|
};
|
||||||
|
Interpreter.prototype.InsertAfter = function (edit) {
|
||||||
|
var old = this.nodes[edit.root];
|
||||||
|
var new_nodes = this.stack.splice(this.stack.length - edit.n);
|
||||||
|
old.after.apply(old, new_nodes);
|
||||||
|
};
|
||||||
|
Interpreter.prototype.InsertBefore = function (edit) {
|
||||||
|
var old = this.nodes[edit.root];
|
||||||
|
var new_nodes = this.stack.splice(this.stack.length - edit.n);
|
||||||
|
old.before.apply(old, new_nodes);
|
||||||
|
};
|
||||||
|
Interpreter.prototype.Remove = function (edit) {
|
||||||
|
var node = this.nodes[edit.root];
|
||||||
|
if (node !== undefined) {
|
||||||
|
node.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Interpreter.prototype.CreateTextNode = function (edit) {
|
||||||
|
// todo: make it so the types are okay
|
||||||
|
var node = document.createTextNode(edit.text);
|
||||||
|
this.nodes[edit.root] = node;
|
||||||
|
this.stack.push(node);
|
||||||
|
};
|
||||||
|
Interpreter.prototype.CreateElement = function (edit) {
|
||||||
|
var el = document.createElement(edit.tag);
|
||||||
|
el.setAttribute("dioxus-id", "".concat(edit.root));
|
||||||
|
this.nodes[edit.root] = el;
|
||||||
|
this.stack.push(el);
|
||||||
|
};
|
||||||
|
Interpreter.prototype.CreateElementNs = function (edit) {
|
||||||
|
var el = document.createElementNS(edit.ns, edit.tag);
|
||||||
|
this.stack.push(el);
|
||||||
|
this.nodes[edit.root] = el;
|
||||||
|
};
|
||||||
|
Interpreter.prototype.CreatePlaceholder = function (edit) {
|
||||||
|
var el = document.createElement("pre");
|
||||||
|
el.hidden = true;
|
||||||
|
this.stack.push(el);
|
||||||
|
this.nodes[edit.root] = el;
|
||||||
|
};
|
||||||
|
Interpreter.prototype.RemoveEventListener = function (edit) { };
|
||||||
|
Interpreter.prototype.NewEventListener = function (edit, handler) {
|
||||||
|
var event_name = edit.event_name;
|
||||||
|
var mounted_node_id = edit.root;
|
||||||
|
var scope = edit.scope;
|
||||||
|
console.log('new event listener', event_name, mounted_node_id, scope);
|
||||||
|
var element = this.nodes[edit.root];
|
||||||
|
element.setAttribute("dioxus-event-".concat(event_name), "".concat(scope, ".").concat(mounted_node_id));
|
||||||
|
if (!this.listeners[event_name]) {
|
||||||
|
this.listeners[event_name] = handler;
|
||||||
|
this.root.addEventListener(event_name, handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Interpreter.prototype.SetText = function (edit) {
|
||||||
|
this.nodes[edit.root].textContent = edit.text;
|
||||||
|
};
|
||||||
|
Interpreter.prototype.SetAttribute = function (edit) {
|
||||||
|
// console.log("setting attr", edit);
|
||||||
|
var name = edit.field;
|
||||||
|
var value = edit.value;
|
||||||
|
var ns = edit.ns;
|
||||||
|
var node = this.nodes[edit.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 (edit) {
|
||||||
|
var name = edit.name;
|
||||||
|
var node = this.nodes[edit.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);
|
||||||
|
var _loop_1 = function (edit) {
|
||||||
|
switch (edit.type) {
|
||||||
|
case "AppendChildren":
|
||||||
|
this_1.AppendChildren(edit);
|
||||||
|
break;
|
||||||
|
case "ReplaceWith":
|
||||||
|
this_1.ReplaceWith(edit);
|
||||||
|
break;
|
||||||
|
case "InsertAfter":
|
||||||
|
this_1.InsertAfter(edit);
|
||||||
|
break;
|
||||||
|
case "InsertBefore":
|
||||||
|
this_1.InsertBefore(edit);
|
||||||
|
break;
|
||||||
|
case "Remove":
|
||||||
|
this_1.Remove(edit);
|
||||||
|
break;
|
||||||
|
case "CreateTextNode":
|
||||||
|
this_1.CreateTextNode(edit);
|
||||||
|
break;
|
||||||
|
case "CreateElement":
|
||||||
|
this_1.CreateElement(edit);
|
||||||
|
break;
|
||||||
|
case "CreateElementNs":
|
||||||
|
this_1.CreateElementNs(edit);
|
||||||
|
break;
|
||||||
|
case "CreatePlaceholder":
|
||||||
|
this_1.CreatePlaceholder(edit);
|
||||||
|
break;
|
||||||
|
case "RemoveEventListener":
|
||||||
|
this_1.RemoveEventListener(edit);
|
||||||
|
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_1.NewEventListener(edit, handler);
|
||||||
|
break;
|
||||||
|
case "SetText":
|
||||||
|
this_1.SetText(edit);
|
||||||
|
break;
|
||||||
|
case "SetAttribute":
|
||||||
|
this_1.SetAttribute(edit);
|
||||||
|
break;
|
||||||
|
case "RemoveAttribute":
|
||||||
|
this_1.RemoveAttribute(edit);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var this_1 = this;
|
||||||
|
for (var _i = 0, edits_1 = edits; _i < edits_1.length; _i++) {
|
||||||
|
var edit = edits_1[_i];
|
||||||
|
_loop_1(edit);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return Interpreter;
|
||||||
|
}());
|
||||||
|
function main() {
|
||||||
|
var root = window.document.getElementById("main");
|
||||||
|
if (root != null) {
|
||||||
|
window.interpreter = new Interpreter(root);
|
||||||
|
window.rpc.call("initialize");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
main();
|
||||||
@@ -0,0 +1,636 @@
|
|||||||
|
|
||||||
|
|
||||||
|
function serialize_event(event: Event) {
|
||||||
|
switch (event.type) {
|
||||||
|
case "copy":
|
||||||
|
case "cut":
|
||||||
|
case "past":
|
||||||
|
return {};
|
||||||
|
|
||||||
|
case "compositionend":
|
||||||
|
case "compositionstart":
|
||||||
|
case "compositionupdate":
|
||||||
|
let { data } = (event as CompositionEvent);
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
};
|
||||||
|
|
||||||
|
case "keydown":
|
||||||
|
case "keypress":
|
||||||
|
case "keyup":
|
||||||
|
let {
|
||||||
|
charCode,
|
||||||
|
key,
|
||||||
|
altKey,
|
||||||
|
ctrlKey,
|
||||||
|
metaKey,
|
||||||
|
keyCode,
|
||||||
|
shiftKey,
|
||||||
|
location,
|
||||||
|
repeat,
|
||||||
|
which,
|
||||||
|
} = (event as KeyboardEvent);
|
||||||
|
|
||||||
|
return {
|
||||||
|
char_code: charCode,
|
||||||
|
key: key,
|
||||||
|
alt_key: altKey,
|
||||||
|
ctrl_key: ctrlKey,
|
||||||
|
meta_key: metaKey,
|
||||||
|
key_code: keyCode,
|
||||||
|
shift_key: shiftKey,
|
||||||
|
location: location,
|
||||||
|
repeat: repeat,
|
||||||
|
which: which,
|
||||||
|
locale: "locale",
|
||||||
|
};
|
||||||
|
|
||||||
|
case "focus":
|
||||||
|
case "blur":
|
||||||
|
return {};
|
||||||
|
|
||||||
|
case "change":
|
||||||
|
let target = event.target as HTMLInputElement;
|
||||||
|
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 value = target.value ?? 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": {
|
||||||
|
const {
|
||||||
|
altKey,
|
||||||
|
button,
|
||||||
|
buttons,
|
||||||
|
clientX,
|
||||||
|
clientY,
|
||||||
|
ctrlKey,
|
||||||
|
metaKey,
|
||||||
|
pageX,
|
||||||
|
pageY,
|
||||||
|
screenX,
|
||||||
|
screenY,
|
||||||
|
shiftKey,
|
||||||
|
} = event as MouseEvent;
|
||||||
|
|
||||||
|
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,
|
||||||
|
screen_y: screenY,
|
||||||
|
shift_key: shiftKey,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
case "pointerdown":
|
||||||
|
case "pointermove":
|
||||||
|
case "pointerup":
|
||||||
|
case "pointercancel":
|
||||||
|
case "gotpointercapture":
|
||||||
|
case "lostpointercapture":
|
||||||
|
case "pointerenter":
|
||||||
|
case "pointerleave":
|
||||||
|
case "pointerover":
|
||||||
|
case "pointerout": {
|
||||||
|
const {
|
||||||
|
altKey,
|
||||||
|
button,
|
||||||
|
buttons,
|
||||||
|
clientX,
|
||||||
|
clientY,
|
||||||
|
ctrlKey,
|
||||||
|
metaKey,
|
||||||
|
pageX,
|
||||||
|
pageY,
|
||||||
|
screenX,
|
||||||
|
screenY,
|
||||||
|
shiftKey,
|
||||||
|
pointerId,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
pressure,
|
||||||
|
tangentialPressure,
|
||||||
|
tiltX,
|
||||||
|
tiltY,
|
||||||
|
twist,
|
||||||
|
pointerType,
|
||||||
|
isPrimary,
|
||||||
|
} = event as PointerEvent;
|
||||||
|
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,
|
||||||
|
screen_y: screenY,
|
||||||
|
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": {
|
||||||
|
const {
|
||||||
|
altKey,
|
||||||
|
ctrlKey,
|
||||||
|
metaKey,
|
||||||
|
shiftKey,
|
||||||
|
} = event as TouchEvent;
|
||||||
|
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": {
|
||||||
|
const {
|
||||||
|
deltaX,
|
||||||
|
deltaY,
|
||||||
|
deltaZ,
|
||||||
|
deltaMode,
|
||||||
|
} = event as WheelEvent;
|
||||||
|
return {
|
||||||
|
delta_x: deltaX,
|
||||||
|
delta_y: deltaY,
|
||||||
|
delta_z: deltaZ,
|
||||||
|
delta_mode: deltaMode,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
case "animationstart":
|
||||||
|
case "animationend":
|
||||||
|
case "animationiteration": {
|
||||||
|
const {
|
||||||
|
animationName,
|
||||||
|
elapsedTime,
|
||||||
|
pseudoElement,
|
||||||
|
} = event as AnimationEvent;
|
||||||
|
return {
|
||||||
|
animation_name: animationName,
|
||||||
|
elapsed_time: elapsedTime,
|
||||||
|
pseudo_element: pseudoElement,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
case "transitionend": {
|
||||||
|
const {
|
||||||
|
propertyName,
|
||||||
|
elapsedTime,
|
||||||
|
pseudoElement,
|
||||||
|
} = event as TransitionEvent;
|
||||||
|
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 {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const 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,
|
||||||
|
};
|
||||||
|
|
||||||
|
class Interpreter {
|
||||||
|
root: Element;
|
||||||
|
stack: Element[];
|
||||||
|
listeners: { [key: string]: (event: Event) => void };
|
||||||
|
lastNodeWasText: boolean;
|
||||||
|
nodes: Element[];
|
||||||
|
|
||||||
|
|
||||||
|
constructor(root: Element) {
|
||||||
|
this.root = root;
|
||||||
|
this.stack = [root];
|
||||||
|
this.listeners = {
|
||||||
|
};
|
||||||
|
this.lastNodeWasText = false;
|
||||||
|
this.nodes = [root];
|
||||||
|
}
|
||||||
|
|
||||||
|
top() {
|
||||||
|
return this.stack[this.stack.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
pop() {
|
||||||
|
return this.stack.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
PushRoot(edit: PushRoot) {
|
||||||
|
const id = edit.root;
|
||||||
|
const node = this.nodes[id];
|
||||||
|
this.stack.push(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
AppendChildren(edit: AppendChildren) {
|
||||||
|
let root = this.stack[this.stack.length - (1 + edit.many)];
|
||||||
|
|
||||||
|
let to_add = this.stack.splice(this.stack.length - edit.many);
|
||||||
|
|
||||||
|
for (let i = 0; i < edit.many; i++) {
|
||||||
|
root.appendChild(to_add[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReplaceWith(edit: ReplaceWith) {
|
||||||
|
let root = this.nodes[edit.root] as Element;
|
||||||
|
let els = this.stack.splice(this.stack.length - edit.m);
|
||||||
|
|
||||||
|
root.replaceWith(...els);
|
||||||
|
}
|
||||||
|
|
||||||
|
InsertAfter(edit: InsertAfter) {
|
||||||
|
let old = this.nodes[edit.root] as Element;
|
||||||
|
let new_nodes = this.stack.splice(this.stack.length - edit.n);
|
||||||
|
old.after(...new_nodes);
|
||||||
|
}
|
||||||
|
|
||||||
|
InsertBefore(edit: InsertBefore) {
|
||||||
|
let old = this.nodes[edit.root] as Element;
|
||||||
|
let new_nodes = this.stack.splice(this.stack.length - edit.n);
|
||||||
|
old.before(...new_nodes);
|
||||||
|
}
|
||||||
|
|
||||||
|
Remove(edit: Remove) {
|
||||||
|
let node = this.nodes[edit.root] as Element;
|
||||||
|
if (node !== undefined) {
|
||||||
|
node.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CreateTextNode(edit: CreateTextNode) {
|
||||||
|
// todo: make it so the types are okay
|
||||||
|
const node = document.createTextNode(edit.text) as any as Element;
|
||||||
|
this.nodes[edit.root] = node;
|
||||||
|
this.stack.push(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
CreateElement(edit: CreateElement) {
|
||||||
|
const el = document.createElement(edit.tag);
|
||||||
|
el.setAttribute("dioxus-id", `${edit.root}`);
|
||||||
|
|
||||||
|
this.nodes[edit.root] = el;
|
||||||
|
this.stack.push(el);
|
||||||
|
}
|
||||||
|
|
||||||
|
CreateElementNs(edit: CreateElementNs) {
|
||||||
|
let el = document.createElementNS(edit.ns, edit.tag);
|
||||||
|
this.stack.push(el);
|
||||||
|
this.nodes[edit.root] = el;
|
||||||
|
}
|
||||||
|
|
||||||
|
CreatePlaceholder(edit: CreatePlaceholder) {
|
||||||
|
let el = document.createElement("pre");
|
||||||
|
el.hidden = true;
|
||||||
|
this.stack.push(el);
|
||||||
|
this.nodes[edit.root] = el;
|
||||||
|
}
|
||||||
|
|
||||||
|
RemoveEventListener(edit: RemoveEventListener) { }
|
||||||
|
|
||||||
|
NewEventListener(edit: NewEventListener, handler: (event: Event) => void) {
|
||||||
|
const event_name = edit.event_name;
|
||||||
|
const mounted_node_id = edit.root;
|
||||||
|
const scope = edit.scope;
|
||||||
|
console.log('new event listener', event_name, mounted_node_id, scope);
|
||||||
|
|
||||||
|
const element = this.nodes[edit.root];
|
||||||
|
element.setAttribute(
|
||||||
|
`dioxus-event-${event_name}`,
|
||||||
|
`${scope}.${mounted_node_id}`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!this.listeners[event_name]) {
|
||||||
|
this.listeners[event_name] = handler;
|
||||||
|
this.root.addEventListener(event_name, handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SetText(edit: SetText) {
|
||||||
|
this.nodes[edit.root].textContent = edit.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
SetAttribute(edit: SetAttribute) {
|
||||||
|
// console.log("setting attr", edit);
|
||||||
|
const name = edit.field;
|
||||||
|
const value = edit.value;
|
||||||
|
const ns = edit.ns;
|
||||||
|
const node = this.nodes[edit.root];
|
||||||
|
|
||||||
|
if (ns == "style") {
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
(node as HTMLElement).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;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "checked":
|
||||||
|
(node as HTMLInputElement).checked = value === "true";
|
||||||
|
break;
|
||||||
|
case "selected":
|
||||||
|
(node as HTMLOptionElement).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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RemoveAttribute(edit: RemoveAttribute) {
|
||||||
|
const name = edit.name;
|
||||||
|
|
||||||
|
const node = this.nodes[edit.root];
|
||||||
|
node.removeAttribute(name);
|
||||||
|
|
||||||
|
if (name === "value") {
|
||||||
|
(node as HTMLInputElement).value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === "checked") {
|
||||||
|
(node as HTMLInputElement).checked = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (name === "selected") {
|
||||||
|
(node as HTMLOptionElement).selected = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleEdits(edits: DomEdit[]) {
|
||||||
|
console.log("handling edits ", edits);
|
||||||
|
this.stack.push(this.root);
|
||||||
|
|
||||||
|
for (let edit of edits) {
|
||||||
|
switch (edit.type) {
|
||||||
|
case "AppendChildren":
|
||||||
|
this.AppendChildren(edit);
|
||||||
|
break;
|
||||||
|
case "ReplaceWith":
|
||||||
|
this.ReplaceWith(edit);
|
||||||
|
break;
|
||||||
|
case "InsertAfter":
|
||||||
|
this.InsertAfter(edit);
|
||||||
|
break;
|
||||||
|
case "InsertBefore":
|
||||||
|
this.InsertBefore(edit);
|
||||||
|
break;
|
||||||
|
case "Remove":
|
||||||
|
this.Remove(edit);
|
||||||
|
break;
|
||||||
|
case "CreateTextNode":
|
||||||
|
this.CreateTextNode(edit);
|
||||||
|
break;
|
||||||
|
case "CreateElement":
|
||||||
|
this.CreateElement(edit);
|
||||||
|
break;
|
||||||
|
case "CreateElementNs":
|
||||||
|
this.CreateElementNs(edit);
|
||||||
|
break;
|
||||||
|
case "CreatePlaceholder":
|
||||||
|
this.CreatePlaceholder(edit);
|
||||||
|
break;
|
||||||
|
case "RemoveEventListener":
|
||||||
|
this.RemoveEventListener(edit);
|
||||||
|
break;
|
||||||
|
case "NewEventListener":
|
||||||
|
// todo: only on desktop should we make our own handler
|
||||||
|
let handler = (event: Event) => {
|
||||||
|
const target = event.target as Element | null;
|
||||||
|
console.log("event", event);
|
||||||
|
if (target != null) {
|
||||||
|
|
||||||
|
const real_id = target.getAttribute(`dioxus-id`);
|
||||||
|
|
||||||
|
const should_prevent_default = target.getAttribute(
|
||||||
|
`dioxus-prevent-default`
|
||||||
|
);
|
||||||
|
|
||||||
|
let contents = serialize_event(event);
|
||||||
|
|
||||||
|
if (should_prevent_default === `on${event.type}`) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (real_id == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.rpc.call("user_event", {
|
||||||
|
event: (edit as NewEventListener).event_name,
|
||||||
|
mounted_dom_id: parseInt(real_id),
|
||||||
|
contents: contents,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.NewEventListener(edit, handler);
|
||||||
|
break;
|
||||||
|
case "SetText":
|
||||||
|
this.SetText(edit);
|
||||||
|
break;
|
||||||
|
case "SetAttribute":
|
||||||
|
this.SetAttribute(edit);
|
||||||
|
break;
|
||||||
|
case "RemoveAttribute":
|
||||||
|
this.RemoveAttribute(edit);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
let root = window.document.getElementById("main");
|
||||||
|
if (root != null) {
|
||||||
|
window.interpreter = new Interpreter(root);
|
||||||
|
window.rpc.call("initialize");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
|
||||||
|
export { };
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
interpreter: Interpreter;
|
||||||
|
rpc: { call: (method: string, args?: any) => void };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type Edits = DomEdit[];
|
||||||
|
|
||||||
|
main();
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
// "module": "None",
|
||||||
|
"module": "commonjs",
|
||||||
|
"strict": true,
|
||||||
|
"outDir": "dist",
|
||||||
|
"sourceMap": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user