238 lines
8.5 KiB
Rust
238 lines
8.5 KiB
Rust
#[cfg(feature = "webonly")]
|
|
use web_sys::Node;
|
|
|
|
pub const SLEDGEHAMMER_JS: &str = GENERATED_JS;
|
|
|
|
#[cfg(feature = "webonly")]
|
|
#[wasm_bindgen::prelude::wasm_bindgen]
|
|
extern "C" {
|
|
pub type BaseInterpreter;
|
|
|
|
#[wasm_bindgen(method)]
|
|
pub fn initialize(this: &BaseInterpreter, root: Node, handler: &js_sys::Function);
|
|
|
|
#[wasm_bindgen(method, js_name = "saveTemplate")]
|
|
pub fn save_template(this: &BaseInterpreter, nodes: Vec<Node>, tmpl_id: u16);
|
|
|
|
#[wasm_bindgen(method)]
|
|
pub fn hydrate(this: &BaseInterpreter, ids: Vec<u32>);
|
|
|
|
#[wasm_bindgen(method, js_name = "getNode")]
|
|
pub fn get_node(this: &BaseInterpreter, id: u32) -> Node;
|
|
}
|
|
|
|
// Note that this impl is for the sledgehammer interpreter to allow us dropping down to the base interpreter
|
|
// During hydration and initialization we need to the base interpreter methods
|
|
#[cfg(feature = "webonly")]
|
|
impl Interpreter {
|
|
/// Convert the interpreter to its baseclass, giving
|
|
pub fn base(&self) -> &BaseInterpreter {
|
|
use wasm_bindgen::prelude::JsCast;
|
|
self.js_channel().unchecked_ref()
|
|
}
|
|
}
|
|
|
|
#[sledgehammer_bindgen::bindgen(module)]
|
|
mod js {
|
|
// Extend the web base class
|
|
const BASE: &str = "./src/js/core.js";
|
|
|
|
/// The interpreter extends the core interpreter which contains the state for the interpreter along with some functions that all platforms use like `AppendChildren`.
|
|
#[extends(BaseInterpreter)]
|
|
pub struct Interpreter;
|
|
|
|
fn mount_to_root() {
|
|
"{this.appendChildren(this.root, this.stack.length-1);}"
|
|
}
|
|
fn push_root(root: u32) {
|
|
"{this.stack.push(this.nodes[$root$]);}"
|
|
}
|
|
fn append_children(id: u32, many: u16) {
|
|
"{this.appendChildren($id$, $many$);}"
|
|
}
|
|
fn pop_root() {
|
|
"{this.stack.pop();}"
|
|
}
|
|
fn replace_with(id: u32, n: u16) {
|
|
"{const root = this.nodes[$id$]; let els = this.stack.splice(this.stack.length-$n$); if (root.listening) { this.removeAllNonBubblingListeners(root); } root.replaceWith(...els);}"
|
|
}
|
|
fn insert_after(id: u32, n: u16) {
|
|
"{this.nodes[$id$].after(...this.stack.splice(this.stack.length-$n$));}"
|
|
}
|
|
fn insert_before(id: u32, n: u16) {
|
|
"{this.nodes[$id$].before(...this.stack.splice(this.stack.length-$n$));}"
|
|
}
|
|
fn remove(id: u32) {
|
|
"{let node = this.nodes[$id$]; if (node !== undefined) { if (node.listening) { this.removeAllNonBubblingListeners(node); } node.remove(); }}"
|
|
}
|
|
fn create_raw_text(text: &str) {
|
|
"{this.stack.push(document.createTextNode($text$));}"
|
|
}
|
|
fn create_text_node(text: &str, id: u32) {
|
|
"{let node = document.createTextNode($text$); this.nodes[$id$] = node; this.stack.push(node);}"
|
|
}
|
|
fn create_placeholder(id: u32) {
|
|
"{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) {
|
|
r#"
|
|
let node = this.nodes[id];
|
|
if(node.listening){node.listening += 1;}else{node.listening = 1;}
|
|
node.setAttribute('data-dioxus-id', `\${id}`);
|
|
this.createListener($event_name$, node, $bubbles$);
|
|
"#
|
|
}
|
|
fn remove_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
|
|
"{let node = this.nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); this.removeListener(node, $event_name$, $bubbles$);}"
|
|
}
|
|
fn set_text(id: u32, text: &str) {
|
|
"{this.nodes[$id$].textContent = $text$;}"
|
|
}
|
|
fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
|
|
"{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>) {
|
|
r#"{
|
|
let node = this.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(ptr: u32, len: u8, id: u32) {
|
|
"{this.nodes[$id$] = this.loadChild($ptr$, $len$);}"
|
|
}
|
|
fn hydrate_text(ptr: u32, len: u8, value: &str, id: u32) {
|
|
r#"{
|
|
let node = this.loadChild($ptr$, $len$);
|
|
if (node.nodeType == node.TEXT_NODE) {
|
|
node.textContent = value;
|
|
} else {
|
|
let text = document.createTextNode(value);
|
|
node.replaceWith(text);
|
|
node = text;
|
|
}
|
|
this.nodes[$id$] = node;
|
|
}"#
|
|
}
|
|
fn replace_placeholder(ptr: u32, len: u8, n: u16) {
|
|
"{let els = this.stack.splice(this.stack.length - $n$); let node = this.loadChild($ptr$, $len$); node.replaceWith(...els);}"
|
|
}
|
|
fn load_template(tmpl_id: u16, index: u16, id: u32) {
|
|
"{let node = this.templates[$tmpl_id$][$index$].cloneNode(true); this.nodes[$id$] = node; this.stack.push(node);}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn append_children_to_top(many: u16) {
|
|
"{
|
|
let root = this.stack[this.stack.length-many-1];
|
|
let els = this.stack.splice(this.stack.length-many);
|
|
for (let k = 0; k < many; k++) {
|
|
root.appendChild(els[k]);
|
|
}
|
|
}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
|
|
"{this.setAttributeInner(this.stack[this.stack.length-1], $field$, $value$, $ns$);}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn add_placeholder() {
|
|
"{let node = document.createElement('pre'); node.hidden = true; this.stack.push(node);}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn create_element(element: &'static str<u8, el>) {
|
|
"{this.stack.push(document.createElement($element$))}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) {
|
|
"{this.stack.push(document.createElementNS($ns$, $element$))}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn add_templates(tmpl_id: u16, len: u16) {
|
|
"{this.templates[$tmpl_id$] = this.stack.splice(this.stack.length-$len$);}"
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn foreign_event_listener(event: &str<u8, evt>, id: u32, bubbles: u8) {
|
|
r#"
|
|
bubbles = bubbles == 1;
|
|
let this_node = this.nodes[id];
|
|
if(this_node.listening){
|
|
this_node.listening += 1;
|
|
} else {
|
|
this_node.listening = 1;
|
|
}
|
|
this_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(
|
|
this.serializeIpcMessage("user_event", {
|
|
name: event_name,
|
|
element: id,
|
|
data: null,
|
|
bubbles,
|
|
})
|
|
);
|
|
} else {
|
|
this.createListener(event_name, this_node, bubbles, (event) => {
|
|
this.handler(event, event_name, bubbles);
|
|
});
|
|
}"#
|
|
}
|
|
|
|
/// Assign the ID
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn assign_id_ref(array: &[u8], id: u32) {
|
|
"{this.nodes[$id$] = this.loadChild($array$);}"
|
|
}
|
|
|
|
/// The coolest ID ever!
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn hydrate_text_ref(array: &[u8], value: &str, id: u32) {
|
|
r#"{
|
|
let node = this.loadChild($array$);
|
|
if (node.nodeType == node.TEXT_NODE) {
|
|
node.textContent = value;
|
|
} else {
|
|
let text = document.createTextNode(value);
|
|
node.replaceWith(text);
|
|
node = text;
|
|
}
|
|
this.nodes[$id$] = node;
|
|
}"#
|
|
}
|
|
|
|
#[cfg(feature = "binary-protocol")]
|
|
fn replace_placeholder_ref(array: &[u8], n: u16) {
|
|
"{let els = this.stack.splice(this.stack.length - $n$); let node = this.loadChild($array$); node.replaceWith(...els);}"
|
|
}
|
|
}
|