637 lines
15 KiB
TypeScript
637 lines
15 KiB
TypeScript
|
|
|
|
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();
|