Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-12 23:47:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

bump the sledgehammer bindgen version

Browse source
This commit is contained in:
Evan Almloff 2024-02-27 10:35:16 -06:00
parent c0f2e8391c
commit 93ee53454f
12 changed files with 249 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Cargo.lock generated
View file

@ -8530,9 +8530,19 @@ dependencies = [
[[package]] [[package]]
name = "sledgehammer_bindgen" name = "sledgehammer_bindgen"
version = "0.3.1" version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9298e863f0143b89972299110a7fa3e2fc08c412341d588c497bae38409f9e68" checksum = "fa1ca40134578bf7cf17973defcd4eb8d7d2adf7868b29892481722957bd543e"
dependencies = [
"sledgehammer_bindgen_macro",
"wasm-bindgen",
]
[[package]]
name = "sledgehammer_bindgen_macro"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "04559ded3de5c62f08457cadcb6c44649c4d90e72fdc0804c6c30ce1bc526304"
dependencies = [ dependencies = [
"quote", "quote",
"syn 2.0.49", "syn 2.0.49",

7
packages/desktop/src/protocol.rs
View file

@ -43,6 +43,7 @@ fn handle_edits_code() -> String {
}"#; }"#;
let polling_request = format!( let polling_request = format!(
r#"// Poll for requests r#"// Poll for requests
window.interpreter = new JSChannel();
window.interpreter.wait_for_request = (headless) => {{ window.interpreter.wait_for_request = (headless) => {{
fetch(new Request("{EDITS_PATH}")) fetch(new Request("{EDITS_PATH}"))
.then(response => {{ .then(response => {{
@ -50,11 +51,11 @@ fn handle_edits_code() -> String {
.then(bytes => {{ .then(bytes => {{
// In headless mode, the requestAnimationFrame callback is never called, so we need to run the bytes directly // In headless mode, the requestAnimationFrame callback is never called, so we need to run the bytes directly
if (headless) {{ if (headless) {{
run_from_bytes(bytes); interpreter.run_from_bytes(bytes);
}} }}
else {{ else {{
requestAnimationFrame(() => {{ requestAnimationFrame(() => {{
run_from_bytes(bytes); interpreter.run_from_bytes(bytes);
}}); }});
}} }}
window.interpreter.wait_for_request(headless); window.interpreter.wait_for_request(headless);
@ -74,7 +75,7 @@ fn handle_edits_code() -> String {
interpreter.replace_range(import_start..import_end, ""); interpreter.replace_range(import_start..import_end, "");
} }
format!("{interpreter}\nconst config = new InterpreterConfig(true);") format!("{interpreter}\nconst intercept_link_redirects = true;")
} }
static DEFAULT_INDEX: &str = include_str!("./index.html"); static DEFAULT_INDEX: &str = include_str!("./index.html");

2
packages/interpreter/Cargo.toml
View file

@ -17,7 +17,7 @@ web-sys = { version = "0.3.56", optional = true, features = [
"Element", "Element",
"Node", "Node",
] } ] }
sledgehammer_bindgen = { version = "0.3.1", default-features = false, optional = true } sledgehammer_bindgen = { version = "0.4.0", default-features = false, optional = true }
sledgehammer_utils = { version = "0.2", optional = true } sledgehammer_utils = { version = "0.2", optional = true }
serde = { version = "1.0", features = ["derive"], optional = true } serde = { version = "1.0", features = ["derive"], optional = true }

2
packages/interpreter/src/common.js
View file

@ -1,4 +1,4 @@
export function setAttributeInner(node, field, value, ns) { this.setAttributeInner = function (node, field, value, ns) {
const name = field; const name = field;
if (ns === "style") { if (ns === "style") {
// ????? why do we need to do this // ????? why do we need to do this

79
packages/interpreter/src/common_exported.js Normal file
View file

@ -0,0 +1,79 @@
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,
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;
}

69
packages/interpreter/src/interpreter.js
View file

@ -1,12 +1,6 @@
class InterpreterConfig {
constructor(intercept_link_redirects) {
this.intercept_link_redirects = intercept_link_redirects;
}
}
// this handler is only provided on the desktop and liveview implementations since this // this handler is only provided on the desktop and liveview implementations since this
// method is not used by the web implementation // method is not used by the web implementation
async function handler(event, name, bubbles, config) { this.handler = async function (event, name, bubbles) {
let target = event.target; let target = event.target;
if (target != null) { if (target != null) {
let preventDefaultRequests = null; let preventDefaultRequests = null;
@ -17,7 +11,7 @@ async function handler(event, name, bubbles, config) {
if (event.type === "click") { if (event.type === "click") {
// todo call prevent default if it's the right type of event // todo call prevent default if it's the right type of event
if (config.intercept_link_redirects) { if (intercept_link_redirects) {
let a_element = target.closest("a"); let a_element = target.closest("a");
if (a_element != null) { if (a_element != null) {
event.preventDefault(); event.preventDefault();
@ -35,7 +29,7 @@ async function handler(event, name, bubbles, config) {
const href = a_element.getAttribute("href"); const href = a_element.getAttribute("href");
if (href !== "" && href !== null && href !== undefined) { if (href !== "" && href !== null && href !== undefined) {
window.ipc.postMessage( window.ipc.postMessage(
window.interpreter.serializeIpcMessage("browser_open", { href }) this.serializeIpcMessage("browser_open", { href })
); );
} }
} }
@ -142,7 +136,7 @@ async function handler(event, name, bubbles, config) {
return; return;
} }
window.ipc.postMessage( window.ipc.postMessage(
window.interpreter.serializeIpcMessage("user_event", { this.serializeIpcMessage("user_event", {
name: name, name: name,
element: parseInt(realId), element: parseInt(realId),
data: contents, data: contents,
@ -223,43 +217,42 @@ class ListenerMap {
delete this.local[id]; delete this.local[id];
} }
} }
function LoadChild(array) { this.LoadChild = function (array) {
// iterate through each number and get that child // iterate through each number and get that child
node = stack[stack.length - 1]; let node = this.stack[this.stack.length - 1];
for (let i = 0; i < array.length; i++) { for (let i = 0; i < array.length; i++) {
end = array[i]; this.end = array[i];
for (node = node.firstChild; end > 0; end--) { for (node = node.firstChild; this.end > 0; this.end--) {
node = node.nextSibling; node = node.nextSibling;
} }
} }
return node; return node;
} }
const listeners = new ListenerMap(); this.listeners = new ListenerMap();
let nodes = []; this.nodes = [];
let stack = []; this.stack = [];
let root; this.root;
const templates = {}; this.templates = {};
let node, els, end, k; this.els = null;
this.end = null;
function AppendChildren(id, many) { this.AppendChildren = function (id, many) {
root = nodes[id]; this.root = this.nodes[id];
els = stack.splice(stack.length - many); this.els = this.stack.splice(this.stack.length - many);
for (k = 0; k < many; k++) { for (let k = 0; k < many; k++) {
root.appendChild(els[k]); this.root.appendChild(this.els[k]);
} }
} }
window.interpreter = {} this.initialize = function (root) {
this.nodes = [root];
window.interpreter.initialize = function (root) { this.stack = [root];
nodes = [root]; this.listeners.root = root;
stack = [root];
listeners.root = root;
} }
window.interpreter.getClientRect = function (id) { this.getClientRect = function (id) {
const node = nodes[id]; const node = this.nodes[id];
if (!node) { if (!node) {
return; return;
} }
@ -271,8 +264,8 @@ window.interpreter.getClientRect = function (id) {
}; };
} }
window.interpreter.scrollTo = function (id, behavior) { this.scrollTo = function (id, behavior) {
const node = nodes[id]; const node = this.nodes[id];
if (!node) { if (!node) {
return false; return false;
} }
@ -283,8 +276,8 @@ window.interpreter.scrollTo = function (id, behavior) {
} }
/// Set the focus on the element /// Set the focus on the element
window.interpreter.setFocus = function (id, focus) { this.setFocus = function (id, focus) {
const node = nodes[id]; const node = this.nodes[id];
if (!node) { if (!node) {
return false; return false;
} }
@ -579,7 +572,7 @@ async function serialize_event(event) {
} }
} }
} }
window.interpreter.serializeIpcMessage = function (method, params = {}) { this.serializeIpcMessage = function (method, params = {}) {
return JSON.stringify({ method, params }); return JSON.stringify({ method, params });
} }

2
packages/interpreter/src/lib.rs
View file

@ -20,7 +20,7 @@ pub use write_native_mutations::*;
#[cfg(all(feature = "minimal_bindings", feature = "webonly"))] #[cfg(all(feature = "minimal_bindings", feature = "webonly"))]
pub mod minimal_bindings { pub mod minimal_bindings {
use wasm_bindgen::{prelude::wasm_bindgen, JsValue}; use wasm_bindgen::{prelude::wasm_bindgen, JsValue};
#[wasm_bindgen(module = "/src/common.js")] #[wasm_bindgen(module = "/src/common_exported.js")]
extern "C" { extern "C" {
pub fn setAttributeInner(node: JsValue, name: &str, value: JsValue, ns: Option<&str>); pub fn setAttributeInner(node: JsValue, name: &str, value: JsValue, ns: Option<&str>);
} }

209
packages/interpreter/src/sledgehammer_bindings.rs
View file

@ -19,7 +19,7 @@ mod js {
this.global = {}; this.global = {};
// non bubbling events listen at the element the listener was created at // non bubbling events listen at the element the listener was created at
this.local = {}; this.local = {};
this.root = null; this.root = root;
this.handler = null; this.handler = null;
} }
@ -65,35 +65,35 @@ mod js {
delete this.local[id]; delete this.local[id];
} }
} }
function LoadChild(ptr, len) { this.LoadChild = function(ptr, len) {
// iterate through each number and get that child // iterate through each number and get that child
node = stack[stack.length - 1]; let node = this.stack[this.stack.length - 1];
ptr_end = ptr + len; let ptr_end = ptr + len;
for (; ptr < ptr_end; ptr++) { for (; ptr < ptr_end; ptr++) {
end = m.getUint8(ptr); let end = this.m.getUint8(ptr);
for (node = node.firstChild; end > 0; end--) { for (node = node.firstChild; end > 0; end--) {
node = node.nextSibling; node = node.nextSibling;
} }
} }
return node; return node;
} }
const listeners = new ListenerMap(); this.listeners = new ListenerMap();
let nodes = []; this.nodes = [];
let stack = []; this.stack = [];
let root; this.root = null;
const templates = {}; this.templates = {};
let node, els, end, ptr_end, k; this.els = null;
export function save_template(nodes, tmpl_id) { this.save_template = function(nodes, tmpl_id) {
templates[tmpl_id] = nodes; this.templates[tmpl_id] = nodes;
} }
export function hydrate(ids) { this.hydrate = function (ids) {
const hydrateNodes = document.querySelectorAll('[data-node-hydration]'); const hydrateNodes = document.querySelectorAll('[data-node-hydration]');
for (let i = 0; i < hydrateNodes.length; i++) { for (let i = 0; i < hydrateNodes.length; i++) {
const hydrateNode = hydrateNodes[i]; const hydrateNode = hydrateNodes[i];
const hydration = hydrateNode.getAttribute('data-node-hydration'); const hydration = hydrateNode.getAttribute('data-node-hydration');
const split = hydration.split(','); const split = hydration.split(',');
const id = ids[parseInt(split[0])]; const id = ids[parseInt(split[0])];
nodes[id] = hydrateNode; this.nodes[id] = hydrateNode;
if (split.length > 1) { if (split.length > 1) {
hydrateNode.listening = split.length - 1; hydrateNode.listening = split.length - 1;
hydrateNode.setAttribute('data-dioxus-id', id); hydrateNode.setAttribute('data-dioxus-id', id);
@ -102,7 +102,7 @@ mod js {
const split2 = listener.split(':'); const split2 = listener.split(':');
const event_name = split2[0]; const event_name = split2[0];
const bubbles = split2[1] === '1'; const bubbles = split2[1] === '1';
listeners.create(event_name, hydrateNode, bubbles); this.listeners.create(event_name, hydrateNode, bubbles);
} }
} }
} }
@ -115,91 +115,77 @@ mod js {
const id = currentNode.textContent; const id = currentNode.textContent;
const split = id.split('node-id'); const split = id.split('node-id');
if (split.length > 1) { if (split.length > 1) {
nodes[ids[parseInt(split[1])]] = currentNode.nextSibling; this.nodes[ids[parseInt(split[1])]] = currentNode.nextSibling;
} }
currentNode = treeWalker.nextNode(); currentNode = treeWalker.nextNode();
} }
} }
export function get_node(id) { this.get_node = function(id) {
return nodes[id]; return this.nodes[id];
} }
export function initialize(root, handler) { this.initialize = function(root, handler) {
listeners.handler = handler; this.listeners.handler = handler;
nodes = [root]; this.nodes = [root];
stack = [root]; this.stack = [root];
listeners.root = root; this.listeners.root = root;
} }
function AppendChildren(id, many){ this.AppendChildren = function (id, many){
root = nodes[id]; let root = this.nodes[id];
els = stack.splice(stack.length-many); this.els = this.stack.splice(this.stack.length-many);
for (k = 0; k < many; k++) { for (let k = 0; k < many; k++) {
root.appendChild(els[k]); root.appendChild(this.els[k]);
} }
} }
"#; "#;
extern "C" {
#[wasm_bindgen]
pub fn save_template(nodes: Vec<Node>, tmpl_id: u16);
#[wasm_bindgen]
pub fn hydrate(ids: Vec<u32>);
#[wasm_bindgen]
pub fn get_node(id: u32) -> Node;
#[wasm_bindgen]
pub fn initialize(root: Node, handler: &Function);
}
fn mount_to_root() { fn mount_to_root() {
"{AppendChildren(root, stack.length-1);}" "{this.AppendChildren(this.root, this.stack.length-1);}"
} }
fn push_root(root: u32) { fn push_root(root: u32) {
"{stack.push(nodes[$root$]);}" "{this.stack.push(this.nodes[$root$]);}"
} }
fn append_children(id: u32, many: u16) { fn append_children(id: u32, many: u16) {
"{AppendChildren($id$, $many$);}" "{this.AppendChildren($id$, $many$);}"
} }
fn pop_root() { fn pop_root() {
"{stack.pop();}" "{this.stack.pop();}"
} }
fn replace_with(id: u32, n: u16) { 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);}" "{const root = this.nodes[$id$]; this.els = this.stack.splice(this.stack.length-$n$); if (root.listening) { this.listeners.removeAllNonBubbling(root); } root.replaceWith(...this.els);}"
} }
fn insert_after(id: u32, n: u16) { fn insert_after(id: u32, n: u16) {
"{nodes[$id$].after(...stack.splice(stack.length-$n$));}" "{this.nodes[$id$].after(...this.stack.splice(this.stack.length-$n$));}"
} }
fn insert_before(id: u32, n: u16) { fn insert_before(id: u32, n: u16) {
"{nodes[$id$].before(...stack.splice(stack.length-$n$));}" "{this.nodes[$id$].before(...this.stack.splice(this.stack.length-$n$));}"
} }
fn remove(id: u32) { fn remove(id: u32) {
"{node = nodes[$id$]; if (node !== undefined) { if (node.listening) { listeners.removeAllNonBubbling(node); } node.remove(); }}" "{let node = this.nodes[$id$]; if (node !== undefined) { if (node.listening) { this.listeners.removeAllNonBubbling(node); } node.remove(); }}"
} }
fn create_raw_text(text: &str) { fn create_raw_text(text: &str) {
"{stack.push(document.createTextNode($text$));}" "{this.stack.push(document.createTextNode($text$));}"
} }
fn create_text_node(text: &str, id: u32) { fn create_text_node(text: &str, id: u32) {
"{node = document.createTextNode($text$); nodes[$id$] = node; stack.push(node);}" "{let node = document.createTextNode($text$); this.nodes[$id$] = node; this.stack.push(node);}"
} }
fn create_placeholder(id: u32) { fn create_placeholder(id: u32) {
"{node = document.createElement('pre'); node.hidden = true; stack.push(node); nodes[$id$] = node;}" "{let node = document.createElement('pre'); node.hidden = true; this.stack.push(node); this.nodes[$id$] = node;}"
} }
fn new_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) { fn new_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
r#"node = nodes[id]; if(node.listening){node.listening += 1;}else{node.listening = 1;} node.setAttribute('data-dioxus-id', `\${id}`); listeners.create($event_name$, node, $bubbles$);"# r#"let node = this.nodes[id]; if(node.listening){node.listening += 1;}else{node.listening = 1;} node.setAttribute('data-dioxus-id', `\${id}`); this.listeners.create($event_name$, node, $bubbles$);"#
} }
fn remove_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) { 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$);}" "{let node = this.nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); this.listeners.remove(node, $event_name$, $bubbles$);}"
} }
fn set_text(id: u32, text: &str) { fn set_text(id: u32, text: &str) {
"{nodes[$id$].textContent = $text$;}" "{this.nodes[$id$].textContent = $text$;}"
} }
fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) { fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
"{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}" "{let node = this.nodes[$id$]; this.setAttributeInner(node, $field$, $value$, $ns$);}"
} }
fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) { fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
r#"{ r#"{
node = nodes[$id$]; let node = this.nodes[$id$];
if (!ns) { if (!ns) {
switch (field) { switch (field) {
case "value": case "value":
@ -226,29 +212,54 @@ mod js {
}"# }"#
} }
fn assign_id(ptr: u32, len: u8, id: u32) { fn assign_id(ptr: u32, len: u8, id: u32) {
"{nodes[$id$] = LoadChild($ptr$, $len$);}" "{this.nodes[$id$] = this.LoadChild($ptr$, $len$);}"
} }
fn hydrate_text(ptr: u32, len: u8, value: &str, id: u32) { fn hydrate_text(ptr: u32, len: u8, value: &str, id: u32) {
r#"{ r#"{
node = LoadChild($ptr$, $len$); let node = this.LoadChild($ptr$, $len$);
if (node.nodeType == Node.TEXT_NODE) { if (node.nodeType == node.TEXT_NODE) {
node.textContent = value; node.textContent = value;
} else { } else {
let text = document.createTextNode(value); let text = document.createTextNode(value);
node.replaceWith(text); node.replaceWith(text);
node = text; node = text;
} }
nodes[$id$] = node; this.nodes[$id$] = node;
}"# }"#
} }
fn replace_placeholder(ptr: u32, len: u8, n: u16) { fn replace_placeholder(ptr: u32, len: u8, n: u16) {
"{els = stack.splice(stack.length - $n$); node = LoadChild($ptr$, $len$); node.replaceWith(...els);}" "{this.els = this.stack.splice(this.stack.length - $n$); let node = this.LoadChild($ptr$, $len$); node.replaceWith(...this.els);}"
} }
fn load_template(tmpl_id: u16, index: u16, 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);}" "{let node = this.templates[$tmpl_id$][$index$].cloneNode(true); this.nodes[$id$] = node; this.stack.push(node);}"
} }
} }
#[cfg(feature = "webonly")]
#[wasm_bindgen::prelude::wasm_bindgen(inline_js = r#"
export function save_template(channel, nodes, tmpl_id) {
channel.save_template(nodes, tmpl_id);
}
export function hydrate(channel, ids) {
channel.hydrate(ids);
}
export function get_node(channel, id) {
return channel.get_node(id);
}
export function initialize(channel, root, handler) {
channel.initialize(root, handler);
}
"#)]
extern "C" {
pub fn save_template(channel: &JSChannel, nodes: Vec<Node>, tmpl_id: u16);
pub fn hydrate(channel: &JSChannel, ids: Vec<u32>);
pub fn get_node(channel: &JSChannel, id: u32) -> Node;
pub fn initialize(channel: &JSChannel, root: Node, handler: &Function);
}
#[cfg(feature = "binary-protocol")] #[cfg(feature = "binary-protocol")]
pub mod binary_protocol { pub mod binary_protocol {
use sledgehammer_bindgen::bindgen; use sledgehammer_bindgen::bindgen;
@ -260,60 +271,60 @@ pub mod binary_protocol {
const JS_FILE: &str = "./src/common.js"; const JS_FILE: &str = "./src/common.js";
fn mount_to_root() { fn mount_to_root() {
"{AppendChildren(root, stack.length-1);}" "{this.AppendChildren(this.root, this.stack.length-1);}"
} }
fn push_root(root: u32) { fn push_root(root: u32) {
"{stack.push(nodes[$root$]);}" "{this.stack.push(this.nodes[$root$]);}"
} }
fn append_children(id: u32, many: u16) { fn append_children(id: u32, many: u16) {
"{AppendChildren($id$, $many$);}" "{this.AppendChildren($id$, $many$);}"
} }
fn append_children_to_top(many: u16) { fn append_children_to_top(many: u16) {
"{ "{
root = stack[stack.length-many-1]; let root = this.stack[this.stack.length-many-1];
els = stack.splice(stack.length-many); this.els = this.stack.splice(this.stack.length-many);
for (k = 0; k < many; k++) { for (let k = 0; k < many; k++) {
root.appendChild(els[k]); root.appendChild(this.els[k]);
} }
}" }"
} }
fn pop_root() { fn pop_root() {
"{stack.pop();}" "{this.stack.pop();}"
} }
fn replace_with(id: u32, n: u16) { 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);}" "{let root = this.nodes[$id$]; this.els = this.stack.splice(this.stack.length-$n$); if (root.listening) { this.listeners.removeAllNonBubbling(root); } root.replaceWith(...this.els);}"
} }
fn insert_after(id: u32, n: u16) { fn insert_after(id: u32, n: u16) {
"{nodes[$id$].after(...stack.splice(stack.length-$n$));}" "{this.nodes[$id$].after(...this.stack.splice(this.stack.length-$n$));}"
} }
fn insert_before(id: u32, n: u16) { fn insert_before(id: u32, n: u16) {
"{nodes[$id$].before(...stack.splice(stack.length-$n$));}" "{this.nodes[$id$].before(...this.stack.splice(this.stack.length-$n$));}"
} }
fn remove(id: u32) { fn remove(id: u32) {
"{node = nodes[$id$]; if (node !== undefined) { if (node.listening) { listeners.removeAllNonBubbling(node); } node.remove(); }}" "{let node = this.nodes[$id$]; if (node !== undefined) { if (node.listening) { this.listeners.removeAllNonBubbling(node); } node.remove(); }}"
} }
fn create_raw_text(text: &str) { fn create_raw_text(text: &str) {
"{stack.push(document.createTextNode($text$));}" "{this.stack.push(document.createTextNode($text$));}"
} }
fn create_text_node(text: &str, id: u32) { fn create_text_node(text: &str, id: u32) {
"{node = document.createTextNode($text$); nodes[$id$] = node; stack.push(node);}" "{let node = document.createTextNode($text$); this.nodes[$id$] = node; this.stack.push(node);}"
} }
fn create_element(element: &'static str<u8, el>) { fn create_element(element: &'static str<u8, el>) {
"{stack.push(document.createElement($element$))}" "{this.stack.push(document.createElement($element$))}"
} }
fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) { fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) {
"{stack.push(document.createElementNS($ns$, $element$))}" "{this.stack.push(document.createElementNS($ns$, $element$))}"
} }
fn create_placeholder(id: u32) { fn create_placeholder(id: u32) {
"{node = document.createElement('pre'); node.hidden = true; stack.push(node); nodes[$id$] = node;}" "{let node = document.createElement('pre'); node.hidden = true; this.stack.push(node); this.nodes[$id$] = node;}"
} }
fn add_placeholder() { fn add_placeholder() {
"{node = document.createElement('pre'); node.hidden = true; stack.push(node);}" "{let node = document.createElement('pre'); node.hidden = true; this.stack.push(node);}"
} }
fn new_event_listener(event: &str<u8, evt>, id: u32, bubbles: u8) { fn new_event_listener(event: &str<u8, evt>, id: u32, bubbles: u8) {
r#" r#"
bubbles = bubbles == 1; bubbles = bubbles == 1;
node = nodes[id]; let node = this.nodes[id];
if(node.listening){ if(node.listening){
node.listening += 1; node.listening += 1;
} else { } else {
@ -325,7 +336,7 @@ pub mod binary_protocol {
// if this is a mounted listener, we send the event immediately // if this is a mounted listener, we send the event immediately
if (event_name === "mounted") { if (event_name === "mounted") {
window.ipc.postMessage( window.ipc.postMessage(
window.interpreter.serializeIpcMessage("user_event", { this.serializeIpcMessage("user_event", {
name: event_name, name: event_name,
element: id, element: id,
data: null, data: null,
@ -333,26 +344,26 @@ pub mod binary_protocol {
}) })
); );
} else { } else {
listeners.create(event_name, node, bubbles, (event) => { this.listeners.create(event_name, node, bubbles, (event) => {
handler(event, event_name, bubbles, config); this.handler(event, event_name, bubbles);
}); });
}"# }"#
} }
fn remove_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) { 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$);}" "{let node = this.nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); this.listeners.remove(node, $event_name$, $bubbles$);}"
} }
fn set_text(id: u32, text: &str) { fn set_text(id: u32, text: &str) {
"{nodes[$id$].textContent = $text$;}" "{this.nodes[$id$].textContent = $text$;}"
} }
fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) { fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
"{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}" "{let node = this.nodes[$id$]; this.setAttributeInner(node, $field$, $value$, $ns$);}"
} }
fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) { fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
"{setAttributeInner(stack[stack.length-1], $field$, $value$, $ns$);}" "{this.setAttributeInner(this.stack[this.stack.length-1], $field$, $value$, $ns$);}"
} }
fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) { fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
r#"{ r#"{
node = nodes[$id$]; let node = this.nodes[$id$];
if (!ns) { if (!ns) {
switch (field) { switch (field) {
case "value": case "value":
@ -379,29 +390,29 @@ pub mod binary_protocol {
}"# }"#
} }
fn assign_id(array: &[u8], id: u32) { fn assign_id(array: &[u8], id: u32) {
"{nodes[$id$] = LoadChild($array$);}" "{this.nodes[$id$] = this.LoadChild($array$);}"
} }
fn hydrate_text(array: &[u8], value: &str, id: u32) { fn hydrate_text(array: &[u8], value: &str, id: u32) {
r#"{ r#"{
node = LoadChild($array$); let node = this.LoadChild($array$);
if (node.nodeType == Node.TEXT_NODE) { if (node.nodeType == node.TEXT_NODE) {
node.textContent = value; node.textContent = value;
} else { } else {
let text = document.createTextNode(value); let text = document.createTextNode(value);
node.replaceWith(text); node.replaceWith(text);
node = text; node = text;
} }
nodes[$id$] = node; this.nodes[$id$] = node;
}"# }"#
} }
fn replace_placeholder(array: &[u8], n: u16) { fn replace_placeholder(array: &[u8], n: u16) {
"{els = stack.splice(stack.length - $n$); node = LoadChild($array$); node.replaceWith(...els);}" "{this.els = this.stack.splice(this.stack.length - $n$); let node = this.LoadChild($array$); node.replaceWith(...this.els);}"
} }
fn load_template(tmpl_id: u16, index: u16, 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);}" "{let node = this.templates[$tmpl_id$][$index$].cloneNode(true); this.nodes[$id$] = node; this.stack.push(node);}"
} }
fn add_templates(tmpl_id: u16, len: u16) { fn add_templates(tmpl_id: u16, len: u16) {
"{templates[$tmpl_id$] = stack.splice(stack.length-$len$);}" "{this.templates[$tmpl_id$] = this.stack.splice(this.stack.length-$len$);}"
} }
} }
} }

2
packages/liveview/src/main.js
View file

@ -1,4 +1,4 @@
const config = new InterpreterConfig(false); const intercept_link_redirects = false;
function main() { function main() {
let root = window.document.getElementById("main"); let root = window.document.getElementById("main");

1
packages/web/src/dom.rs
View file

@ -110,6 +110,7 @@ impl WebsysDom {
})); }));
dioxus_interpreter_js::initialize( dioxus_interpreter_js::initialize(
interpreter.js_channel(),
root.clone().unchecked_into(), root.clone().unchecked_into(),
handler.as_ref().unchecked_ref(), handler.as_ref().unchecked_ref(),
); );

4
packages/web/src/mutations.rs
View file

@ -62,7 +62,7 @@ impl WebsysDom {
// Now that we've flushed the edits and the dom nodes exist, we can send the mounted events. // Now that we've flushed the edits and the dom nodes exist, we can send the mounted events.
{ {
for id in self.queued_mounted_events.drain(..) { for id in self.queued_mounted_events.drain(..) {
let node = get_node(id.0 as u32); let node = get_node(self.interpreter.js_channel(), id.0 as u32);
if let Some(element) = node.dyn_ref::<web_sys::Element>() { if let Some(element) = node.dyn_ref::<web_sys::Element>() {
let _ = self.event_channel.unbounded_send(UiEvent { let _ = self.event_channel.unbounded_send(UiEvent {
name: "mounted".to_string(), name: "mounted".to_string(),
@ -91,7 +91,7 @@ impl WriteMutations for WebsysDom {
self.templates self.templates
.insert(template.name.to_owned(), self.max_template_id); .insert(template.name.to_owned(), self.max_template_id);
save_template(roots, self.max_template_id); save_template(self.interpreter.js_channel(), roots, self.max_template_id);
self.max_template_id += 1 self.max_template_id += 1
} }

8
packages/web/src/rehydrate.rs
View file

@ -23,7 +23,7 @@ impl WebsysDom {
// Recursively rehydrate the dom from the VirtualDom // Recursively rehydrate the dom from the VirtualDom
self.rehydrate_scope(root_scope, dom, &mut ids, &mut to_mount)?; self.rehydrate_scope(root_scope, dom, &mut ids, &mut to_mount)?;
dioxus_interpreter_js::hydrate(ids); dioxus_interpreter_js::hydrate(self.interpreter.js_channel(), ids);
#[cfg(feature = "mounted")] #[cfg(feature = "mounted")]
for id in to_mount { for id in to_mount {
@ -168,7 +168,11 @@ impl WriteMutations for OnlyWriteTemplates<'_> {
self.0 self.0
.templates .templates
.insert(template.name.to_owned(), self.0.max_template_id); .insert(template.name.to_owned(), self.0.max_template_id);
save_template(roots, self.0.max_template_id); save_template(
self.0.interpreter.js_channel(),
roots,
self.0.max_template_id,
);
self.0.max_template_id += 1 self.0.max_template_id += 1
} }