Merge branch 'master' into add-file-data-drag-event
This commit is contained in:
Evan Almloff committed
commit
56798b3d1c
407 files changed
+16602
-11298
No files matched your search
@@ -1,83 +0,0 @@
|
||||
#![allow(clippy::unused_unit, non_upper_case_globals)]
|
||||
|
||||
use js_sys::Function;
|
||||
use wasm_bindgen::prelude::*;
|
||||
use web_sys::Element;
|
||||
|
||||
#[wasm_bindgen(module = "/src/interpreter.js")]
|
||||
extern "C" {
|
||||
pub type InterpreterConfig;
|
||||
#[wasm_bindgen(constructor)]
|
||||
pub fn new(intercept_link_redirects: bool) -> InterpreterConfig;
|
||||
|
||||
pub type Interpreter;
|
||||
|
||||
#[wasm_bindgen(constructor)]
|
||||
pub fn new(arg: Element, config: InterpreterConfig) -> Interpreter;
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn SaveTemplate(this: &Interpreter, template: JsValue);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn MountToRoot(this: &Interpreter);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn AssignId(this: &Interpreter, path: &[u8], id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreatePlaceholder(this: &Interpreter, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreateTextNode(this: &Interpreter, value: JsValue, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn HydrateText(this: &Interpreter, path: &[u8], value: &str, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn LoadTemplate(this: &Interpreter, name: &str, index: u32, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn ReplaceWith(this: &Interpreter, id: u32, m: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn ReplacePlaceholder(this: &Interpreter, path: &[u8], m: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn InsertAfter(this: &Interpreter, id: u32, n: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn InsertBefore(this: &Interpreter, id: u32, n: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn SetAttribute(this: &Interpreter, id: u32, name: &str, value: JsValue, ns: Option<&str>);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn SetBoolAttribute(this: &Interpreter, id: u32, name: &str, value: bool);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn SetText(this: &Interpreter, id: u32, text: JsValue);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn NewEventListener(
|
||||
this: &Interpreter,
|
||||
name: &str,
|
||||
id: u32,
|
||||
bubbles: bool,
|
||||
handler: &Function,
|
||||
);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn RemoveEventListener(this: &Interpreter, name: &str, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn RemoveAttribute(this: &Interpreter, id: u32, field: &str, ns: Option<&str>);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn Remove(this: &Interpreter, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn PushRoot(this: &Interpreter, id: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn AppendChildren(this: &Interpreter, id: u32, m: u32);
|
||||
}
|
||||
@@ -1,3 +1,49 @@
|
||||
export function setAttributeInner(node, field, value, ns) {
|
||||
const name = field;
|
||||
if (ns === "style") {
|
||||
// ????? why do we need to do this
|
||||
if (node.style === undefined) {
|
||||
node.style = {};
|
||||
}
|
||||
node.style[name] = value;
|
||||
} else if (!!ns) {
|
||||
node.setAttributeNS(ns, name, value);
|
||||
} else {
|
||||
switch (name) {
|
||||
case "value":
|
||||
if (value !== node.value) {
|
||||
node.value = value;
|
||||
}
|
||||
break;
|
||||
case "initial_value":
|
||||
node.defaultValue = value;
|
||||
break;
|
||||
case "checked":
|
||||
node.checked = truthy(value);
|
||||
break;
|
||||
case "initial_checked":
|
||||
node.defaultChecked = truthy(value);
|
||||
break;
|
||||
case "selected":
|
||||
node.selected = truthy(value);
|
||||
break;
|
||||
case "initial_selected":
|
||||
node.defaultSelected = truthy(value);
|
||||
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 (!truthy(value) && bool_attrs.hasOwnProperty(name)) {
|
||||
node.removeAttribute(name);
|
||||
} else {
|
||||
node.setAttribute(name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const bool_attrs = {
|
||||
allowfullscreen: true,
|
||||
allowpaymentrequest: true,
|
||||
@@ -28,46 +74,6 @@ const bool_attrs = {
|
||||
webkitdirectory: true,
|
||||
};
|
||||
|
||||
export function setAttributeInner(node, field, value, ns) {
|
||||
const name = field;
|
||||
if (ns === "style") {
|
||||
// ????? why do we need to do this
|
||||
if (node.style === undefined) {
|
||||
node.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 "initial_value":
|
||||
node.defaultValue = value;
|
||||
break;
|
||||
case "checked":
|
||||
node.checked = truthy(value);
|
||||
break;
|
||||
case "selected":
|
||||
node.selected = truthy(value);
|
||||
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 (!truthy(value) && bool_attrs.hasOwnProperty(name)) {
|
||||
node.removeAttribute(name);
|
||||
} else {
|
||||
node.setAttribute(name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function truthy(val) {
|
||||
return val === "true" || val === true;
|
||||
}
|
||||
@@ -1,390 +1,9 @@
|
||||
import { setAttributeInner } from "./common.js";
|
||||
|
||||
class ListenerMap {
|
||||
constructor(root) {
|
||||
// bubbling events can listen at the root element
|
||||
this.global = {};
|
||||
// non bubbling events listen at the element the listener was created at
|
||||
this.local = {};
|
||||
this.root = root;
|
||||
}
|
||||
|
||||
create(event_name, element, handler, bubbles) {
|
||||
if (bubbles) {
|
||||
if (this.global[event_name] === undefined) {
|
||||
this.global[event_name] = {};
|
||||
this.global[event_name].active = 1;
|
||||
this.global[event_name].callback = handler;
|
||||
this.root.addEventListener(event_name, handler);
|
||||
} else {
|
||||
this.global[event_name].active++;
|
||||
}
|
||||
} else {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
if (!this.local[id]) {
|
||||
this.local[id] = {};
|
||||
}
|
||||
this.local[id][event_name] = handler;
|
||||
element.addEventListener(event_name, handler);
|
||||
}
|
||||
}
|
||||
|
||||
remove(element, event_name, bubbles) {
|
||||
if (bubbles) {
|
||||
this.global[event_name].active--;
|
||||
if (this.global[event_name].active === 0) {
|
||||
this.root.removeEventListener(
|
||||
event_name,
|
||||
this.global[event_name].callback
|
||||
);
|
||||
delete this.global[event_name];
|
||||
}
|
||||
} else {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
delete this.local[id][event_name];
|
||||
if (this.local[id].length === 0) {
|
||||
delete this.local[id];
|
||||
}
|
||||
element.removeEventListener(event_name, handler);
|
||||
}
|
||||
}
|
||||
|
||||
removeAllNonBubbling(element) {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
delete this.local[id];
|
||||
}
|
||||
}
|
||||
|
||||
class InterpreterConfig {
|
||||
constructor(intercept_link_redirects) {
|
||||
this.intercept_link_redirects = intercept_link_redirects;
|
||||
}
|
||||
}
|
||||
|
||||
class Interpreter {
|
||||
constructor(root, config) {
|
||||
this.config = config;
|
||||
this.root = root;
|
||||
this.listeners = new ListenerMap(root);
|
||||
this.nodes = [root];
|
||||
this.stack = [root];
|
||||
this.handlers = {};
|
||||
this.templates = {};
|
||||
this.lastNodeWasText = false;
|
||||
}
|
||||
top() {
|
||||
return this.stack[this.stack.length - 1];
|
||||
}
|
||||
pop() {
|
||||
return this.stack.pop();
|
||||
}
|
||||
MountToRoot() {
|
||||
this.AppendChildren(this.stack.length - 1);
|
||||
}
|
||||
SetNode(id, node) {
|
||||
this.nodes[id] = node;
|
||||
}
|
||||
PushRoot(root) {
|
||||
const node = this.nodes[root];
|
||||
this.stack.push(node);
|
||||
}
|
||||
PopRoot() {
|
||||
this.stack.pop();
|
||||
}
|
||||
AppendChildren(many) {
|
||||
// let root = this.nodes[id];
|
||||
let root = this.stack[this.stack.length - 1 - many];
|
||||
let to_add = this.stack.splice(this.stack.length - many);
|
||||
for (let i = 0; i < many; i++) {
|
||||
root.appendChild(to_add[i]);
|
||||
}
|
||||
}
|
||||
ReplaceWith(root_id, m) {
|
||||
let root = this.nodes[root_id];
|
||||
let els = this.stack.splice(this.stack.length - m);
|
||||
if (is_element_node(root.nodeType)) {
|
||||
this.listeners.removeAllNonBubbling(root);
|
||||
}
|
||||
root.replaceWith(...els);
|
||||
}
|
||||
InsertAfter(root, n) {
|
||||
let old = this.nodes[root];
|
||||
let new_nodes = this.stack.splice(this.stack.length - n);
|
||||
old.after(...new_nodes);
|
||||
}
|
||||
InsertBefore(root, n) {
|
||||
let old = this.nodes[root];
|
||||
let new_nodes = this.stack.splice(this.stack.length - n);
|
||||
old.before(...new_nodes);
|
||||
}
|
||||
Remove(root) {
|
||||
let node = this.nodes[root];
|
||||
if (node !== undefined) {
|
||||
if (is_element_node(node)) {
|
||||
this.listeners.removeAllNonBubbling(node);
|
||||
}
|
||||
node.remove();
|
||||
}
|
||||
}
|
||||
CreateTextNode(text, root) {
|
||||
const node = document.createTextNode(text);
|
||||
this.nodes[root] = node;
|
||||
this.stack.push(node);
|
||||
}
|
||||
CreatePlaceholder(root) {
|
||||
let el = document.createElement("pre");
|
||||
el.hidden = true;
|
||||
this.stack.push(el);
|
||||
this.nodes[root] = el;
|
||||
}
|
||||
NewEventListener(event_name, root, bubbles, handler) {
|
||||
const element = this.nodes[root];
|
||||
element.setAttribute("data-dioxus-id", `${root}`);
|
||||
this.listeners.create(event_name, element, handler, bubbles);
|
||||
}
|
||||
RemoveEventListener(root, event_name, bubbles) {
|
||||
const element = this.nodes[root];
|
||||
element.removeAttribute(`data-dioxus-id`);
|
||||
this.listeners.remove(element, event_name, bubbles);
|
||||
}
|
||||
SetText(root, text) {
|
||||
this.nodes[root].textContent = text;
|
||||
}
|
||||
SetAttribute(id, field, value, ns) {
|
||||
if (value === null) {
|
||||
this.RemoveAttribute(id, field, ns);
|
||||
} else {
|
||||
const node = this.nodes[id];
|
||||
setAttributeInner(node, field, value, ns);
|
||||
}
|
||||
}
|
||||
RemoveAttribute(root, field, ns) {
|
||||
const node = this.nodes[root];
|
||||
if (!ns) {
|
||||
switch (field) {
|
||||
case "value":
|
||||
node.value = "";
|
||||
break;
|
||||
case "checked":
|
||||
node.checked = false;
|
||||
break;
|
||||
case "selected":
|
||||
node.selected = false;
|
||||
break;
|
||||
case "dangerous_inner_html":
|
||||
node.innerHTML = "";
|
||||
break;
|
||||
default:
|
||||
node.removeAttribute(field);
|
||||
break;
|
||||
}
|
||||
} else if (ns == "style") {
|
||||
node.style.removeProperty(name);
|
||||
} else {
|
||||
node.removeAttributeNS(ns, field);
|
||||
}
|
||||
}
|
||||
|
||||
GetClientRect(id) {
|
||||
const node = this.nodes[id];
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
const rect = node.getBoundingClientRect();
|
||||
return {
|
||||
type: "GetClientRect",
|
||||
origin: [rect.x, rect.y],
|
||||
size: [rect.width, rect.height],
|
||||
};
|
||||
}
|
||||
|
||||
ScrollTo(id, behavior) {
|
||||
const node = this.nodes[id];
|
||||
if (!node) {
|
||||
return false;
|
||||
}
|
||||
node.scrollIntoView({
|
||||
behavior: behavior,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
/// Set the focus on the element
|
||||
SetFocus(id, focus) {
|
||||
const node = this.nodes[id];
|
||||
if (!node) {
|
||||
return false;
|
||||
}
|
||||
if (focus) {
|
||||
node.focus();
|
||||
} else {
|
||||
node.blur();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
handleEdits(edits) {
|
||||
for (let template of edits.templates) {
|
||||
this.SaveTemplate(template);
|
||||
}
|
||||
|
||||
for (let edit of edits.edits) {
|
||||
this.handleEdit(edit);
|
||||
}
|
||||
|
||||
/*POST_HANDLE_EDITS*/
|
||||
}
|
||||
|
||||
SaveTemplate(template) {
|
||||
let roots = [];
|
||||
for (let root of template.roots) {
|
||||
roots.push(this.MakeTemplateNode(root));
|
||||
}
|
||||
this.templates[template.name] = roots;
|
||||
}
|
||||
|
||||
MakeTemplateNode(node) {
|
||||
switch (node.type) {
|
||||
case "Text":
|
||||
return document.createTextNode(node.text);
|
||||
case "Dynamic":
|
||||
let dyn = document.createElement("pre");
|
||||
dyn.hidden = true;
|
||||
return dyn;
|
||||
case "DynamicText":
|
||||
return document.createTextNode("placeholder");
|
||||
case "Element":
|
||||
let el;
|
||||
|
||||
if (node.namespace != null) {
|
||||
el = document.createElementNS(node.namespace, node.tag);
|
||||
} else {
|
||||
el = document.createElement(node.tag);
|
||||
}
|
||||
|
||||
for (let attr of node.attrs) {
|
||||
if (attr.type == "Static") {
|
||||
setAttributeInner(el, attr.name, attr.value, attr.namespace);
|
||||
}
|
||||
}
|
||||
|
||||
for (let child of node.children) {
|
||||
el.appendChild(this.MakeTemplateNode(child));
|
||||
}
|
||||
|
||||
return el;
|
||||
}
|
||||
}
|
||||
AssignId(path, id) {
|
||||
this.nodes[id] = this.LoadChild(path);
|
||||
}
|
||||
LoadChild(path) {
|
||||
// iterate through each number and get that child
|
||||
let node = this.stack[this.stack.length - 1];
|
||||
|
||||
for (let i = 0; i < path.length; i++) {
|
||||
node = node.childNodes[path[i]];
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
HydrateText(path, value, id) {
|
||||
let node = this.LoadChild(path);
|
||||
|
||||
if (node.nodeType == Node.TEXT_NODE) {
|
||||
node.textContent = value;
|
||||
} else {
|
||||
// replace with a textnode
|
||||
let text = document.createTextNode(value);
|
||||
node.replaceWith(text);
|
||||
node = text;
|
||||
}
|
||||
|
||||
this.nodes[id] = node;
|
||||
}
|
||||
ReplacePlaceholder(path, m) {
|
||||
let els = this.stack.splice(this.stack.length - m);
|
||||
let node = this.LoadChild(path);
|
||||
node.replaceWith(...els);
|
||||
}
|
||||
LoadTemplate(name, index, id) {
|
||||
let node = this.templates[name][index].cloneNode(true);
|
||||
this.nodes[id] = node;
|
||||
this.stack.push(node);
|
||||
}
|
||||
handleEdit(edit) {
|
||||
switch (edit.type) {
|
||||
case "AppendChildren":
|
||||
this.AppendChildren(edit.m);
|
||||
break;
|
||||
case "AssignId":
|
||||
this.AssignId(edit.path, edit.id);
|
||||
break;
|
||||
case "CreatePlaceholder":
|
||||
this.CreatePlaceholder(edit.id);
|
||||
break;
|
||||
case "CreateTextNode":
|
||||
this.CreateTextNode(edit.value, edit.id);
|
||||
break;
|
||||
case "HydrateText":
|
||||
this.HydrateText(edit.path, edit.value, edit.id);
|
||||
break;
|
||||
case "LoadTemplate":
|
||||
this.LoadTemplate(edit.name, edit.index, edit.id);
|
||||
break;
|
||||
case "PushRoot":
|
||||
this.PushRoot(edit.id);
|
||||
break;
|
||||
case "ReplaceWith":
|
||||
this.ReplaceWith(edit.id, edit.m);
|
||||
break;
|
||||
case "ReplacePlaceholder":
|
||||
this.ReplacePlaceholder(edit.path, edit.m);
|
||||
break;
|
||||
case "InsertAfter":
|
||||
this.InsertAfter(edit.id, edit.m);
|
||||
break;
|
||||
case "InsertBefore":
|
||||
this.InsertBefore(edit.id, edit.m);
|
||||
break;
|
||||
case "Remove":
|
||||
this.Remove(edit.id);
|
||||
break;
|
||||
case "SetText":
|
||||
this.SetText(edit.id, edit.value);
|
||||
break;
|
||||
case "SetAttribute":
|
||||
this.SetAttribute(edit.id, edit.name, edit.value, edit.ns);
|
||||
break;
|
||||
case "RemoveAttribute":
|
||||
this.RemoveAttribute(edit.id, edit.name, edit.ns);
|
||||
break;
|
||||
case "RemoveEventListener":
|
||||
this.RemoveEventListener(edit.id, edit.name);
|
||||
break;
|
||||
case "NewEventListener":
|
||||
let bubbles = event_bubbles(edit.name);
|
||||
|
||||
// if this is a mounted listener, we send the event immediately
|
||||
if (edit.name === "mounted") {
|
||||
window.ipc.postMessage(
|
||||
serializeIpcMessage("user_event", {
|
||||
name: edit.name,
|
||||
element: edit.id,
|
||||
data: null,
|
||||
bubbles,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
this.NewEventListener(edit.name, edit.id, bubbles, (event) => {
|
||||
handler(event, edit.name, bubbles, this.config);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this handler is only provided on the desktop and liveview implementations since this
|
||||
// method is not used by the web implementation
|
||||
async function handler(event, name, bubbles, config) {
|
||||
@@ -416,7 +35,7 @@ async function handler(event, name, bubbles, config) {
|
||||
const href = a_element.getAttribute("href");
|
||||
if (href !== "" && href !== null && href !== undefined) {
|
||||
window.ipc.postMessage(
|
||||
serializeIpcMessage("browser_open", { href })
|
||||
window.interpreter.serializeIpcMessage("browser_open", { href })
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -444,7 +63,44 @@ async function handler(event, name, bubbles, config) {
|
||||
|
||||
let contents = await serialize_event(event);
|
||||
|
||||
/*POST_EVENT_SERIALIZATION*/
|
||||
// TODO: this should be liveview only
|
||||
if (
|
||||
target.tagName === "INPUT" &&
|
||||
(event.type === "change" || event.type === "input")
|
||||
) {
|
||||
const type = target.getAttribute("type");
|
||||
if (type === "file") {
|
||||
async function read_files() {
|
||||
const files = target.files;
|
||||
const file_contents = {};
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
|
||||
file_contents[file.name] = Array.from(
|
||||
new Uint8Array(await file.arrayBuffer())
|
||||
);
|
||||
}
|
||||
let file_engine = {
|
||||
files: file_contents,
|
||||
};
|
||||
contents.files = file_engine;
|
||||
|
||||
if (realId === null) {
|
||||
return;
|
||||
}
|
||||
const message = window.interpreter.serializeIpcMessage("user_event", {
|
||||
name: name,
|
||||
element: parseInt(realId),
|
||||
data: contents,
|
||||
bubbles,
|
||||
});
|
||||
window.ipc.postMessage(message);
|
||||
}
|
||||
read_files();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
target.tagName === "FORM" &&
|
||||
@@ -453,8 +109,18 @@ async function handler(event, name, bubbles, config) {
|
||||
const formData = new FormData(target);
|
||||
|
||||
for (let name of formData.keys()) {
|
||||
let value = formData.getAll(name);
|
||||
contents.values[name] = value;
|
||||
const fieldType = target.elements[name].type;
|
||||
|
||||
switch (fieldType) {
|
||||
case "select-multiple":
|
||||
contents.values[name] = formData.getAll(name);
|
||||
break;
|
||||
|
||||
// add cases for fieldTypes that can hold multiple values here
|
||||
default:
|
||||
contents.values[name] = formData.get(name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -476,7 +142,7 @@ async function handler(event, name, bubbles, config) {
|
||||
return;
|
||||
}
|
||||
window.ipc.postMessage(
|
||||
serializeIpcMessage("user_event", {
|
||||
window.interpreter.serializeIpcMessage("user_event", {
|
||||
name: name,
|
||||
element: parseInt(realId),
|
||||
data: contents,
|
||||
@@ -506,6 +172,130 @@ function find_real_id(target) {
|
||||
return realId;
|
||||
}
|
||||
|
||||
class ListenerMap {
|
||||
constructor(root) {
|
||||
// bubbling events can listen at the root element
|
||||
this.global = {};
|
||||
// non bubbling events listen at the element the listener was created at
|
||||
this.local = {};
|
||||
this.root = null;
|
||||
}
|
||||
|
||||
create(event_name, element, bubbles, handler) {
|
||||
if (bubbles) {
|
||||
if (this.global[event_name] === undefined) {
|
||||
this.global[event_name] = {};
|
||||
this.global[event_name].active = 1;
|
||||
this.root.addEventListener(event_name, handler);
|
||||
} else {
|
||||
this.global[event_name].active++;
|
||||
}
|
||||
}
|
||||
else {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
if (!this.local[id]) {
|
||||
this.local[id] = {};
|
||||
}
|
||||
element.addEventListener(event_name, handler);
|
||||
}
|
||||
}
|
||||
|
||||
remove(element, event_name, bubbles) {
|
||||
if (bubbles) {
|
||||
this.global[event_name].active--;
|
||||
if (this.global[event_name].active === 0) {
|
||||
this.root.removeEventListener(event_name, this.global[event_name].callback);
|
||||
delete this.global[event_name];
|
||||
}
|
||||
}
|
||||
else {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
delete this.local[id][event_name];
|
||||
if (this.local[id].length === 0) {
|
||||
delete this.local[id];
|
||||
}
|
||||
element.removeEventListener(event_name, this.global[event_name].callback);
|
||||
}
|
||||
}
|
||||
|
||||
removeAllNonBubbling(element) {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
delete this.local[id];
|
||||
}
|
||||
}
|
||||
function LoadChild(array) {
|
||||
// iterate through each number and get that child
|
||||
node = stack[stack.length - 1];
|
||||
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
end = array[i];
|
||||
for (node = node.firstChild; end > 0; end--) {
|
||||
node = node.nextSibling;
|
||||
}
|
||||
}
|
||||
return node;
|
||||
}
|
||||
const listeners = new ListenerMap();
|
||||
let nodes = [];
|
||||
let stack = [];
|
||||
let root;
|
||||
const templates = {};
|
||||
let node, els, end, k;
|
||||
|
||||
function AppendChildren(id, many) {
|
||||
root = nodes[id];
|
||||
els = stack.splice(stack.length - many);
|
||||
for (k = 0; k < many; k++) {
|
||||
root.appendChild(els[k]);
|
||||
}
|
||||
}
|
||||
|
||||
window.interpreter = {}
|
||||
|
||||
window.interpreter.initialize = function (root) {
|
||||
nodes = [root];
|
||||
stack = [root];
|
||||
listeners.root = root;
|
||||
}
|
||||
|
||||
window.interpreter.getClientRect = function (id) {
|
||||
const node = nodes[id];
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
const rect = node.getBoundingClientRect();
|
||||
return {
|
||||
type: "GetClientRect",
|
||||
origin: [rect.x, rect.y],
|
||||
size: [rect.width, rect.height],
|
||||
};
|
||||
}
|
||||
|
||||
window.interpreter.scrollTo = function (id, behavior) {
|
||||
const node = nodes[id];
|
||||
if (!node) {
|
||||
return false;
|
||||
}
|
||||
node.scrollIntoView({
|
||||
behavior: behavior,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
/// Set the focus on the element
|
||||
window.interpreter.setFocus = function (id, focus) {
|
||||
const node = nodes[id];
|
||||
if (!node) {
|
||||
return false;
|
||||
}
|
||||
if (focus) {
|
||||
node.focus();
|
||||
} else {
|
||||
node.blur();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function get_mouse_data(event) {
|
||||
const {
|
||||
altKey,
|
||||
@@ -787,21 +577,7 @@ async function serialize_event(event) {
|
||||
}
|
||||
}
|
||||
}
|
||||
async function serializeFileList(fileList) {
|
||||
const file_contents = {};
|
||||
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
const file = fileList[i];
|
||||
|
||||
file_contents[file.name] = Array.from(
|
||||
new Uint8Array(await file.arrayBuffer())
|
||||
);
|
||||
}
|
||||
return {
|
||||
files: file_contents,
|
||||
};
|
||||
}
|
||||
function serializeIpcMessage(method, params = {}) {
|
||||
window.interpreter.serializeIpcMessage = function (method, params = {}) {
|
||||
return JSON.stringify({ method, params });
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
#![doc = include_str!("../README.md")]
|
||||
#![doc(html_logo_url = "https://avatars.githubusercontent.com/u/79236386")]
|
||||
#![doc(html_favicon_url = "https://avatars.githubusercontent.com/u/79236386")]
|
||||
|
||||
pub static INTERPRETER_JS: &str = include_str!("./interpreter.js");
|
||||
pub static COMMON_JS: &str = include_str!("./common.js");
|
||||
|
||||
@@ -6,14 +10,8 @@ mod sledgehammer_bindings;
|
||||
#[cfg(feature = "sledgehammer")]
|
||||
pub use sledgehammer_bindings::*;
|
||||
|
||||
#[cfg(feature = "web")]
|
||||
mod bindings;
|
||||
|
||||
#[cfg(feature = "web")]
|
||||
pub use bindings::Interpreter;
|
||||
|
||||
// Common bindings for minimal usage.
|
||||
#[cfg(feature = "minimal_bindings")]
|
||||
#[cfg(all(feature = "minimal_bindings", feature = "web"))]
|
||||
pub mod minimal_bindings {
|
||||
use wasm_bindgen::{prelude::wasm_bindgen, JsValue};
|
||||
#[wasm_bindgen(module = "/src/common.js")]
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
#[cfg(feature = "web")]
|
||||
use js_sys::Function;
|
||||
#[cfg(feature = "web")]
|
||||
use sledgehammer_bindgen::bindgen;
|
||||
#[cfg(feature = "web")]
|
||||
use web_sys::Node;
|
||||
|
||||
#[bindgen]
|
||||
#[cfg(feature = "web")]
|
||||
pub const SLEDGEHAMMER_JS: &str = GENERATED_JS;
|
||||
|
||||
#[cfg(feature = "web")]
|
||||
#[bindgen(module)]
|
||||
mod js {
|
||||
const JS_FILE: &str = "./src/common.js";
|
||||
const JS: &str = r#"
|
||||
class ListenerMap {
|
||||
constructor(root) {
|
||||
@@ -57,45 +65,6 @@ mod js {
|
||||
delete this.local[id];
|
||||
}
|
||||
}
|
||||
function SetAttributeInner(node, field, value, ns) {
|
||||
const name = field;
|
||||
if (ns === "style") {
|
||||
// ????? why do we need to do this
|
||||
if (node.style === undefined) {
|
||||
node.style = {};
|
||||
}
|
||||
node.style[name] = value;
|
||||
} else if (ns !== null && ns !== undefined && ns !== "") {
|
||||
node.setAttributeNS(ns, name, value);
|
||||
} else {
|
||||
switch (name) {
|
||||
case "value":
|
||||
if (value !== node.value) {
|
||||
node.value = value;
|
||||
}
|
||||
break;
|
||||
case "initial_value":
|
||||
node.defaultValue = value;
|
||||
break;
|
||||
case "checked":
|
||||
node.checked = truthy(value);
|
||||
break;
|
||||
case "selected":
|
||||
node.selected = truthy(value);
|
||||
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 (!truthy(value) && bool_attrs.hasOwnProperty(name)) {
|
||||
node.removeAttribute(name);
|
||||
} else {
|
||||
node.setAttribute(name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function LoadChild(ptr, len) {
|
||||
// iterate through each number and get that child
|
||||
node = stack[stack.length - 1];
|
||||
@@ -117,13 +86,48 @@ mod js {
|
||||
export function save_template(nodes, tmpl_id) {
|
||||
templates[tmpl_id] = nodes;
|
||||
}
|
||||
export function set_node(id, node) {
|
||||
nodes[id] = node;
|
||||
export function hydrate(ids) {
|
||||
console.log("hydrating", ids);
|
||||
const hydrateNodes = document.querySelectorAll('[data-node-hydration]');
|
||||
for (let i = 0; i < hydrateNodes.length; i++) {
|
||||
const hydrateNode = hydrateNodes[i];
|
||||
const hydration = hydrateNode.getAttribute('data-node-hydration');
|
||||
const split = hydration.split(',');
|
||||
const id = ids[parseInt(split[0])];
|
||||
nodes[id] = hydrateNode;
|
||||
console.log("hydrating node", hydrateNode, id);
|
||||
if (split.length > 1) {
|
||||
hydrateNode.listening = split.length - 1;
|
||||
hydrateNode.setAttribute('data-dioxus-id', id);
|
||||
for (let j = 1; j < split.length; j++) {
|
||||
const listener = split[j];
|
||||
const split2 = listener.split(':');
|
||||
const event_name = split2[0];
|
||||
const bubbles = split2[1] === '1';
|
||||
console.log("hydrating listener", event_name, bubbles);
|
||||
listeners.create(event_name, hydrateNode, bubbles);
|
||||
}
|
||||
}
|
||||
}
|
||||
const treeWalker = document.createTreeWalker(
|
||||
document.body,
|
||||
NodeFilter.SHOW_COMMENT,
|
||||
);
|
||||
let currentNode = treeWalker.nextNode();
|
||||
while (currentNode) {
|
||||
const id = currentNode.textContent;
|
||||
const split = id.split('node-id');
|
||||
if (split.length > 1) {
|
||||
console.log("hydrating text", currentNode.nextSibling, id);
|
||||
nodes[ids[parseInt(split[1])]] = currentNode.nextSibling;
|
||||
}
|
||||
currentNode = treeWalker.nextNode();
|
||||
}
|
||||
}
|
||||
export function get_node(id) {
|
||||
return nodes[id];
|
||||
}
|
||||
export function initilize(root, handler) {
|
||||
export function initialize(root, handler) {
|
||||
listeners.handler = handler;
|
||||
nodes = [root];
|
||||
stack = [root];
|
||||
@@ -136,52 +140,20 @@ mod js {
|
||||
root.appendChild(els[k]);
|
||||
}
|
||||
}
|
||||
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,
|
||||
webkitdirectory: true,
|
||||
};
|
||||
function truthy(val) {
|
||||
return val === "true" || val === true;
|
||||
}
|
||||
"#;
|
||||
|
||||
extern "C" {
|
||||
#[wasm_bindgen]
|
||||
pub fn save_template(nodes: Vec<Node>, tmpl_id: u32);
|
||||
pub fn save_template(nodes: Vec<Node>, tmpl_id: u16);
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn set_node(id: u32, node: Node);
|
||||
pub fn hydrate(ids: Vec<u32>);
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn get_node(id: u32) -> Node;
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn initilize(root: Node, handler: &Function);
|
||||
pub fn initialize(root: Node, handler: &Function);
|
||||
}
|
||||
|
||||
fn mount_to_root() {
|
||||
@@ -190,19 +162,19 @@ mod js {
|
||||
fn push_root(root: u32) {
|
||||
"{stack.push(nodes[$root$]);}"
|
||||
}
|
||||
fn append_children(id: u32, many: u32) {
|
||||
fn append_children(id: u32, many: u16) {
|
||||
"{AppendChildren($id$, $many$);}"
|
||||
}
|
||||
fn pop_root() {
|
||||
"{stack.pop();}"
|
||||
}
|
||||
fn replace_with(id: u32, n: u32) {
|
||||
fn replace_with(id: u32, n: u16) {
|
||||
"{root = nodes[$id$]; els = stack.splice(stack.length-$n$); if (root.listening) { listeners.removeAllNonBubbling(root); } root.replaceWith(...els);}"
|
||||
}
|
||||
fn insert_after(id: u32, n: u32) {
|
||||
fn insert_after(id: u32, n: u16) {
|
||||
"{nodes[$id$].after(...stack.splice(stack.length-$n$));}"
|
||||
}
|
||||
fn insert_before(id: u32, n: u32) {
|
||||
fn insert_before(id: u32, n: u16) {
|
||||
"{nodes[$id$].before(...stack.splice(stack.length-$n$));}"
|
||||
}
|
||||
fn remove(id: u32) {
|
||||
@@ -227,7 +199,7 @@ mod js {
|
||||
"{nodes[$id$].textContent = $text$;}"
|
||||
}
|
||||
fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
|
||||
"{node = nodes[$id$]; SetAttributeInner(node, $field$, $value$, $ns$);}"
|
||||
"{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}"
|
||||
}
|
||||
fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
|
||||
r#"{
|
||||
@@ -273,10 +245,167 @@ mod js {
|
||||
nodes[$id$] = node;
|
||||
}"#
|
||||
}
|
||||
fn replace_placeholder(ptr: u32, len: u8, n: u32) {
|
||||
fn replace_placeholder(ptr: u32, len: u8, n: u16) {
|
||||
"{els = stack.splice(stack.length - $n$); node = LoadChild($ptr$, $len$); node.replaceWith(...els);}"
|
||||
}
|
||||
fn load_template(tmpl_id: u32, index: u32, id: u32) {
|
||||
fn load_template(tmpl_id: u16, index: u16, id: u32) {
|
||||
"{node = templates[$tmpl_id$][$index$].cloneNode(true); nodes[$id$] = node; stack.push(node);}"
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "binary-protocol")]
|
||||
pub mod binary_protocol {
|
||||
use sledgehammer_bindgen::bindgen;
|
||||
pub const SLEDGEHAMMER_JS: &str = GENERATED_JS;
|
||||
|
||||
#[bindgen]
|
||||
mod protocol_js {
|
||||
const JS_FILE: &str = "./src/interpreter.js";
|
||||
const JS_FILE: &str = "./src/common.js";
|
||||
|
||||
fn mount_to_root() {
|
||||
"{AppendChildren(root, stack.length-1);}"
|
||||
}
|
||||
fn push_root(root: u32) {
|
||||
"{stack.push(nodes[$root$]);}"
|
||||
}
|
||||
fn append_children(id: u32, many: u16) {
|
||||
"{AppendChildren($id$, $many$);}"
|
||||
}
|
||||
fn append_children_to_top(many: u16) {
|
||||
"{
|
||||
root = stack[stack.length-many-1];
|
||||
els = stack.splice(stack.length-many);
|
||||
for (k = 0; k < many; k++) {
|
||||
root.appendChild(els[k]);
|
||||
}
|
||||
}"
|
||||
}
|
||||
fn pop_root() {
|
||||
"{stack.pop();}"
|
||||
}
|
||||
fn replace_with(id: u32, n: u16) {
|
||||
"{root = nodes[$id$]; els = stack.splice(stack.length-$n$); if (root.listening) { listeners.removeAllNonBubbling(root); } root.replaceWith(...els);}"
|
||||
}
|
||||
fn insert_after(id: u32, n: u16) {
|
||||
"{nodes[$id$].after(...stack.splice(stack.length-$n$));}"
|
||||
}
|
||||
fn insert_before(id: u32, n: u16) {
|
||||
"{nodes[$id$].before(...stack.splice(stack.length-$n$));}"
|
||||
}
|
||||
fn remove(id: u32) {
|
||||
"{node = nodes[$id$]; if (node !== undefined) { if (node.listening) { listeners.removeAllNonBubbling(node); } node.remove(); }}"
|
||||
}
|
||||
fn create_raw_text(text: &str) {
|
||||
"{stack.push(document.createTextNode($text$));}"
|
||||
}
|
||||
fn create_text_node(text: &str, id: u32) {
|
||||
"{node = document.createTextNode($text$); nodes[$id$] = node; stack.push(node);}"
|
||||
}
|
||||
fn create_element(element: &'static str<u8, el>) {
|
||||
"{stack.push(document.createElement($element$))}"
|
||||
}
|
||||
fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) {
|
||||
"{stack.push(document.createElementNS($ns$, $element$))}"
|
||||
}
|
||||
fn create_placeholder(id: u32) {
|
||||
"{node = document.createElement('pre'); node.hidden = true; stack.push(node); nodes[$id$] = node;}"
|
||||
}
|
||||
fn add_placeholder() {
|
||||
"{node = document.createElement('pre'); node.hidden = true; stack.push(node);}"
|
||||
}
|
||||
fn new_event_listener(event: &str<u8, evt>, id: u32, bubbles: u8) {
|
||||
r#"
|
||||
bubbles = bubbles == 1;
|
||||
node = nodes[id];
|
||||
if(node.listening){
|
||||
node.listening += 1;
|
||||
} else {
|
||||
node.listening = 1;
|
||||
}
|
||||
node.setAttribute('data-dioxus-id', `\${id}`);
|
||||
const event_name = $event$;
|
||||
|
||||
// if this is a mounted listener, we send the event immediately
|
||||
if (event_name === "mounted") {
|
||||
window.ipc.postMessage(
|
||||
window.interpreter.serializeIpcMessage("user_event", {
|
||||
name: event_name,
|
||||
element: id,
|
||||
data: null,
|
||||
bubbles,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
listeners.create(event_name, node, bubbles, (event) => {
|
||||
handler(event, event_name, bubbles, config);
|
||||
});
|
||||
}"#
|
||||
}
|
||||
fn remove_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
|
||||
"{node = nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); listeners.remove(node, $event_name$, $bubbles$);}"
|
||||
}
|
||||
fn set_text(id: u32, text: &str) {
|
||||
"{nodes[$id$].textContent = $text$;}"
|
||||
}
|
||||
fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
|
||||
"{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}"
|
||||
}
|
||||
fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
|
||||
"{setAttributeInner(stack[stack.length-1], $field$, $value$, $ns$);}"
|
||||
}
|
||||
fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
|
||||
r#"{
|
||||
node = nodes[$id$];
|
||||
if (!ns) {
|
||||
switch (field) {
|
||||
case "value":
|
||||
node.value = "";
|
||||
break;
|
||||
case "checked":
|
||||
node.checked = false;
|
||||
break;
|
||||
case "selected":
|
||||
node.selected = false;
|
||||
break;
|
||||
case "dangerous_inner_html":
|
||||
node.innerHTML = "";
|
||||
break;
|
||||
default:
|
||||
node.removeAttribute(field);
|
||||
break;
|
||||
}
|
||||
} else if (ns == "style") {
|
||||
node.style.removeProperty(name);
|
||||
} else {
|
||||
node.removeAttributeNS(ns, field);
|
||||
}
|
||||
}"#
|
||||
}
|
||||
fn assign_id(array: &[u8], id: u32) {
|
||||
"{nodes[$id$] = LoadChild($array$);}"
|
||||
}
|
||||
fn hydrate_text(array: &[u8], value: &str, id: u32) {
|
||||
r#"{
|
||||
node = LoadChild($array$);
|
||||
if (node.nodeType == Node.TEXT_NODE) {
|
||||
node.textContent = value;
|
||||
} else {
|
||||
let text = document.createTextNode(value);
|
||||
node.replaceWith(text);
|
||||
node = text;
|
||||
}
|
||||
nodes[$id$] = node;
|
||||
}"#
|
||||
}
|
||||
fn replace_placeholder(array: &[u8], n: u16) {
|
||||
"{els = stack.splice(stack.length - $n$); node = LoadChild($array$); node.replaceWith(...els);}"
|
||||
}
|
||||
fn load_template(tmpl_id: u16, index: u16, id: u32) {
|
||||
"{node = templates[$tmpl_id$][$index$].cloneNode(true); nodes[$id$] = node; stack.push(node);}"
|
||||
}
|
||||
fn add_templates(tmpl_id: u16, len: u16) {
|
||||
"{templates[$tmpl_id$] = stack.splice(stack.length-$len$);}"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user