Subtree memorization / reactive templates (#488)
This commit adds subtree memoization to Dioxus. Subtree memoization is basically a compile-time step that drastically reduces the amount of work the diffing engine needs to do at runtime by extracting non-changing nodes out into a static "template." Templates are then understood by the various renderers in the ecosystem as a faster way of rendering the same items. For example, in the web, templates are simply a set of DOM Nodes created once and then cloned later. This is the same pattern frameworks like Lithtml and SolidJS use to achieve near-perfect performance. Subtree memoization adds an additional level of complexity to Dioxus. The RSX macro needs to be much smarter to identify changing/nonchanging nodes and generate a mapping between the Template and its runtime counterparts. This commit represents a working starter point for this work, adding support for templates for the web, desktop, liveview, ssr, and native-core renderers. In the future we will try to shrink code generation, generally improve performance, and simplify our implementation.
This commit is contained in:
Demonthos authored and GitHub committed
1 parent
b32fd2d2cd
commit
047ed1e553
80 files changed
+6774
-2552
No files matched your search
@@ -73,4 +73,44 @@ extern "C" {
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn RemoveAttribute(this: &Interpreter, root: u64, field: &str, ns: Option<&str>);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreateTemplateRef(this: &Interpreter, id: u64, template_id: u64);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreateTemplate(this: &Interpreter, id: u64);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn FinishTemplate(this: &Interpreter, len: u32);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn EnterTemplateRef(this: &Interpreter, id: u64);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn ExitTemplateRef(this: &Interpreter);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreateElementTemplate(
|
||||
this: &Interpreter,
|
||||
tag: &str,
|
||||
root: u64,
|
||||
locally_static: bool,
|
||||
fully_static: bool,
|
||||
);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreateElementNsTemplate(
|
||||
this: &Interpreter,
|
||||
tag: &str,
|
||||
id: u64,
|
||||
ns: &str,
|
||||
locally_static: bool,
|
||||
fully_static: bool,
|
||||
);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreateTextNodeTemplate(this: &Interpreter, text: &str, root: u64, locally_static: bool);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn CreatePlaceholderTemplate(this: &Interpreter, root: u64);
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
// id > Number.MAX_SAFE_INTEGER/2 in template ref
|
||||
// id <= Number.MAX_SAFE_INTEGER/2 in global nodes
|
||||
const templateIdLimit = BigInt((Number.MAX_SAFE_INTEGER - 1) / 2);
|
||||
|
||||
export function main() {
|
||||
let root = window.document.getElementById("main");
|
||||
if (root != null) {
|
||||
@@ -6,6 +10,123 @@ export function main() {
|
||||
}
|
||||
}
|
||||
|
||||
class TemplateRef {
|
||||
constructor(fragment, dynamicNodePaths, roots, id) {
|
||||
this.fragment = fragment;
|
||||
this.dynamicNodePaths = dynamicNodePaths;
|
||||
this.roots = roots;
|
||||
this.id = id;
|
||||
this.placed = false;
|
||||
this.nodes = [];
|
||||
}
|
||||
|
||||
build(id) {
|
||||
if (!this.nodes[id]) {
|
||||
let current = this.fragment;
|
||||
const path = this.dynamicNodePaths[id];
|
||||
for (let i = 0; i < path.length; i++) {
|
||||
const idx = path[i];
|
||||
current = current.firstChild;
|
||||
for (let i2 = 0; i2 < idx; i2++) {
|
||||
current = current.nextSibling;
|
||||
}
|
||||
}
|
||||
this.nodes[id] = current;
|
||||
}
|
||||
}
|
||||
|
||||
get(id) {
|
||||
this.build(id);
|
||||
return this.nodes[id];
|
||||
}
|
||||
|
||||
parent() {
|
||||
return this.roots[0].parentNode;
|
||||
}
|
||||
|
||||
first() {
|
||||
return this.roots[0];
|
||||
}
|
||||
|
||||
last() {
|
||||
return this.roots[this.roots.length - 1];
|
||||
}
|
||||
|
||||
move() {
|
||||
// move the root nodes into a new template
|
||||
this.fragment = new DocumentFragment();
|
||||
for (let n of this.roots) {
|
||||
this.fragment.appendChild(n);
|
||||
}
|
||||
}
|
||||
|
||||
getFragment() {
|
||||
if (!this.placed) {
|
||||
this.placed = true;
|
||||
}
|
||||
else {
|
||||
this.move();
|
||||
}
|
||||
return this.fragment;
|
||||
}
|
||||
}
|
||||
|
||||
class Template {
|
||||
constructor(template_id, id) {
|
||||
this.nodes = [];
|
||||
this.dynamicNodePaths = [];
|
||||
this.template_id = template_id;
|
||||
this.id = id;
|
||||
this.template = document.createElement("template");
|
||||
this.reconstructingRefrencesIndex = null;
|
||||
}
|
||||
|
||||
finalize(roots) {
|
||||
for (let i = 0; i < roots.length; i++) {
|
||||
let node = roots[i];
|
||||
let path = [i];
|
||||
const is_element = node.nodeType == 1;
|
||||
const locally_static = is_element && !node.hasAttribute("data-dioxus-dynamic");
|
||||
if (!locally_static) {
|
||||
this.dynamicNodePaths[node.tmplId] = [...path];
|
||||
}
|
||||
const traverse_children = is_element && !node.hasAttribute("data-dioxus-fully-static");
|
||||
if (traverse_children) {
|
||||
this.createIds(path, node);
|
||||
}
|
||||
this.template.content.appendChild(node);
|
||||
}
|
||||
document.head.appendChild(this.template);
|
||||
}
|
||||
|
||||
createIds(path, root) {
|
||||
let i = 0;
|
||||
for (let node = root.firstChild; node != null; node = node.nextSibling) {
|
||||
let new_path = [...path, i];
|
||||
const is_element = node.nodeType == 1;
|
||||
const locally_static = is_element && !node.hasAttribute("data-dioxus-dynamic");
|
||||
if (!locally_static) {
|
||||
this.dynamicNodePaths[node.tmplId] = [...new_path];
|
||||
}
|
||||
const traverse_children = is_element && !node.hasAttribute("data-dioxus-fully-static");
|
||||
if (traverse_children) {
|
||||
this.createIds(new_path, node);
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
ref(id) {
|
||||
const template = this.template.content.cloneNode(true);
|
||||
let roots = [];
|
||||
this.reconstructingRefrencesIndex = 0;
|
||||
for (let node = template.firstChild; node != null; node = node.nextSibling) {
|
||||
roots.push(node);
|
||||
}
|
||||
return new TemplateRef(template, this.dynamicNodePaths, roots, id);
|
||||
}
|
||||
}
|
||||
|
||||
class ListenerMap {
|
||||
constructor(root) {
|
||||
// bubbling events can listen at the root element
|
||||
@@ -53,21 +174,18 @@ class ListenerMap {
|
||||
element.removeEventListener(event_name, handler);
|
||||
}
|
||||
}
|
||||
|
||||
removeAllNonBubbling(element) {
|
||||
const id = element.getAttribute("data-dioxus-id");
|
||||
delete this.local[id];
|
||||
}
|
||||
}
|
||||
|
||||
export class Interpreter {
|
||||
constructor(root) {
|
||||
this.root = root;
|
||||
this.stack = [root];
|
||||
this.templateInProgress = null;
|
||||
this.insideTemplateRef = [];
|
||||
this.listeners = new ListenerMap(root);
|
||||
this.handlers = {};
|
||||
this.lastNodeWasText = false;
|
||||
this.nodes = [root];
|
||||
this.templates = [];
|
||||
}
|
||||
top() {
|
||||
return this.stack[this.stack.length - 1];
|
||||
@@ -75,11 +193,45 @@ export class Interpreter {
|
||||
pop() {
|
||||
return this.stack.pop();
|
||||
}
|
||||
currentTemplateId() {
|
||||
if (this.insideTemplateRef.length) {
|
||||
return this.insideTemplateRef[this.insideTemplateRef.length - 1].id;
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
getId(id) {
|
||||
if (this.templateInProgress !== null) {
|
||||
return this.templates[this.templateInProgress].nodes[id - templateIdLimit];
|
||||
}
|
||||
else if (this.insideTemplateRef.length && id >= templateIdLimit) {
|
||||
return this.insideTemplateRef[this.insideTemplateRef.length - 1].get(id - templateIdLimit);
|
||||
}
|
||||
else {
|
||||
return this.nodes[id];
|
||||
}
|
||||
}
|
||||
SetNode(id, node) {
|
||||
this.nodes[id] = node;
|
||||
if (this.templateInProgress !== null) {
|
||||
id -= templateIdLimit;
|
||||
node.tmplId = id;
|
||||
this.templates[this.templateInProgress].nodes[id] = node;
|
||||
}
|
||||
else if (this.insideTemplateRef.length && id >= templateIdLimit) {
|
||||
id -= templateIdLimit;
|
||||
let last = this.insideTemplateRef[this.insideTemplateRef.length - 1];
|
||||
last.childNodes[id] = node;
|
||||
if (last.nodeCache[id]) {
|
||||
last.nodeCache[id] = node;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.nodes[id] = node;
|
||||
}
|
||||
}
|
||||
PushRoot(root) {
|
||||
const node = this.nodes[root];
|
||||
const node = this.getId(root);
|
||||
this.stack.push(node);
|
||||
}
|
||||
PopRoot() {
|
||||
@@ -89,73 +241,126 @@ export class Interpreter {
|
||||
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]);
|
||||
const child = to_add[i];
|
||||
if (child instanceof TemplateRef) {
|
||||
root.appendChild(child.getFragment());
|
||||
}
|
||||
else {
|
||||
root.appendChild(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
let root = this.getId(root_id);
|
||||
if (root instanceof TemplateRef) {
|
||||
this.InsertBefore(root_id, m);
|
||||
this.Remove(root_id);
|
||||
}
|
||||
else {
|
||||
let els = this.stack.splice(this.stack.length - m).map(function (el) {
|
||||
if (el instanceof TemplateRef) {
|
||||
return el.getFragment();
|
||||
}
|
||||
else {
|
||||
return el;
|
||||
}
|
||||
});
|
||||
root.replaceWith(...els);
|
||||
}
|
||||
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);
|
||||
const old = this.getId(root);
|
||||
const new_nodes = this.stack.splice(this.stack.length - n).map(function (el) {
|
||||
if (el instanceof TemplateRef) {
|
||||
return el.getFragment();
|
||||
}
|
||||
else {
|
||||
return el;
|
||||
}
|
||||
});
|
||||
if (old instanceof TemplateRef) {
|
||||
const last = old.last();
|
||||
last.after(...new_nodes);
|
||||
}
|
||||
else {
|
||||
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);
|
||||
const old = this.getId(root);
|
||||
const new_nodes = this.stack.splice(this.stack.length - n).map(function (el) {
|
||||
if (el instanceof TemplateRef) {
|
||||
return el.getFragment();
|
||||
}
|
||||
else {
|
||||
return el;
|
||||
}
|
||||
});
|
||||
if (old instanceof TemplateRef) {
|
||||
const first = old.first();
|
||||
first.before(...new_nodes);
|
||||
}
|
||||
else {
|
||||
old.before(...new_nodes);
|
||||
}
|
||||
}
|
||||
Remove(root) {
|
||||
let node = this.nodes[root];
|
||||
let node = this.getId(root);
|
||||
if (node !== undefined) {
|
||||
if (is_element_node(node)) {
|
||||
this.listeners.removeAllNonBubbling(node);
|
||||
if (node instanceof TemplateRef) {
|
||||
for (let child of node.roots) {
|
||||
child.remove();
|
||||
}
|
||||
}
|
||||
else {
|
||||
node.remove();
|
||||
}
|
||||
node.remove();
|
||||
}
|
||||
}
|
||||
CreateTextNode(text, root) {
|
||||
const node = document.createTextNode(text);
|
||||
this.nodes[root] = node;
|
||||
this.stack.push(node);
|
||||
this.SetNode(root, node);
|
||||
}
|
||||
CreateElement(tag, root) {
|
||||
const el = document.createElement(tag);
|
||||
this.nodes[root] = el;
|
||||
this.stack.push(el);
|
||||
this.SetNode(root, el);
|
||||
}
|
||||
CreateElementNs(tag, root, ns) {
|
||||
let el = document.createElementNS(ns, tag);
|
||||
this.stack.push(el);
|
||||
this.nodes[root] = el;
|
||||
this.SetNode(root, el);
|
||||
}
|
||||
CreatePlaceholder(root) {
|
||||
let el = document.createElement("pre");
|
||||
el.hidden = true;
|
||||
this.stack.push(el);
|
||||
this.nodes[root] = el;
|
||||
this.SetNode(root, el);
|
||||
}
|
||||
NewEventListener(event_name, root, handler, bubbles) {
|
||||
const element = this.nodes[root];
|
||||
element.setAttribute("data-dioxus-id", `${root}`);
|
||||
const element = this.getId(root);
|
||||
if (root >= templateIdLimit) {
|
||||
let currentTemplateRefId = this.currentTemplateId();
|
||||
root -= templateIdLimit;
|
||||
element.setAttribute("data-dioxus-id", `${currentTemplateRefId},${root}`);
|
||||
}
|
||||
else {
|
||||
element.setAttribute("data-dioxus-id", `${root}`);
|
||||
}
|
||||
this.listeners.create(event_name, element, handler, bubbles);
|
||||
}
|
||||
RemoveEventListener(root, event_name, bubbles) {
|
||||
const element = this.nodes[root];
|
||||
const element = this.getId(root);
|
||||
element.removeAttribute(`data-dioxus-id`);
|
||||
this.listeners.remove(element, event_name, bubbles);
|
||||
}
|
||||
SetText(root, text) {
|
||||
this.nodes[root].textContent = text;
|
||||
this.getId(root).data = text;
|
||||
}
|
||||
SetAttribute(root, field, value, ns) {
|
||||
const name = field;
|
||||
const node = this.nodes[root];
|
||||
const node = this.getId(root);
|
||||
if (ns === "style") {
|
||||
// @ts-ignore
|
||||
node.style[name] = value;
|
||||
@@ -189,7 +394,7 @@ export class Interpreter {
|
||||
}
|
||||
RemoveAttribute(root, field, ns) {
|
||||
const name = field;
|
||||
const node = this.nodes[root];
|
||||
const node = this.getId(root);
|
||||
if (ns == "style") {
|
||||
node.style.removeProperty(name);
|
||||
} else if (ns !== null || ns !== undefined) {
|
||||
@@ -206,52 +411,99 @@ export class Interpreter {
|
||||
node.removeAttribute(name);
|
||||
}
|
||||
}
|
||||
CreateTemplateRef(id, template_id) {
|
||||
const el = this.templates[template_id].ref(id);
|
||||
this.nodes[id] = el;
|
||||
this.stack.push(el);
|
||||
}
|
||||
CreateTemplate(template_id) {
|
||||
this.templateInProgress = template_id;
|
||||
this.templates[template_id] = new Template(template_id, 0);
|
||||
}
|
||||
FinishTemplate(many) {
|
||||
this.templates[this.templateInProgress].finalize(this.stack.splice(this.stack.length - many));
|
||||
this.templateInProgress = null;
|
||||
}
|
||||
EnterTemplateRef(id) {
|
||||
this.insideTemplateRef.push(this.nodes[id]);
|
||||
}
|
||||
ExitTemplateRef() {
|
||||
this.insideTemplateRef.pop();
|
||||
}
|
||||
handleEdits(edits) {
|
||||
this.stack.push(this.root);
|
||||
for (let edit of edits) {
|
||||
this.handleEdit(edit);
|
||||
}
|
||||
}
|
||||
CreateElementTemplate(tag, root, locally_static, fully_static) {
|
||||
const el = document.createElement(tag);
|
||||
this.stack.push(el);
|
||||
this.SetNode(root, el);
|
||||
if (!locally_static)
|
||||
el.setAttribute("data-dioxus-dynamic", "true");
|
||||
if (fully_static)
|
||||
el.setAttribute("data-dioxus-fully-static", fully_static);
|
||||
}
|
||||
CreateElementNsTemplate(tag, root, ns, locally_static, fully_static) {
|
||||
const el = document.createElementNS(ns, tag);
|
||||
this.stack.push(el);
|
||||
this.SetNode(root, el);
|
||||
if (!locally_static)
|
||||
el.setAttribute("data-dioxus-dynamic", "true");
|
||||
if (fully_static)
|
||||
el.setAttribute("data-dioxus-fully-static", fully_static);
|
||||
}
|
||||
CreateTextNodeTemplate(text, root, locally_static) {
|
||||
const node = document.createTextNode(text);
|
||||
this.stack.push(node);
|
||||
this.SetNode(root, node);
|
||||
}
|
||||
CreatePlaceholderTemplate(root) {
|
||||
const el = document.createElement("pre");
|
||||
el.setAttribute("data-dioxus-dynamic", "true");
|
||||
el.hidden = true;
|
||||
this.stack.push(el);
|
||||
this.SetNode(root, el);
|
||||
}
|
||||
handleEdit(edit) {
|
||||
switch (edit.type) {
|
||||
case "PushRoot":
|
||||
this.PushRoot(edit.root);
|
||||
this.PushRoot(BigInt(edit.root));
|
||||
break;
|
||||
case "AppendChildren":
|
||||
this.AppendChildren(edit.many);
|
||||
break;
|
||||
case "ReplaceWith":
|
||||
this.ReplaceWith(edit.root, edit.m);
|
||||
this.ReplaceWith(BigInt(edit.root), edit.m);
|
||||
break;
|
||||
case "InsertAfter":
|
||||
this.InsertAfter(edit.root, edit.n);
|
||||
this.InsertAfter(BigInt(edit.root), edit.n);
|
||||
break;
|
||||
case "InsertBefore":
|
||||
this.InsertBefore(edit.root, edit.n);
|
||||
this.InsertBefore(BigInt(edit.root), edit.n);
|
||||
break;
|
||||
case "Remove":
|
||||
this.Remove(edit.root);
|
||||
this.Remove(BigInt(edit.root));
|
||||
break;
|
||||
case "CreateTextNode":
|
||||
this.CreateTextNode(edit.text, edit.root);
|
||||
this.CreateTextNode(edit.text, BigInt(edit.root));
|
||||
break;
|
||||
case "CreateElement":
|
||||
this.CreateElement(edit.tag, edit.root);
|
||||
this.CreateElement(edit.tag, BigInt(edit.root));
|
||||
break;
|
||||
case "CreateElementNs":
|
||||
this.CreateElementNs(edit.tag, edit.root, edit.ns);
|
||||
this.CreateElementNs(edit.tag, BigInt(edit.root), edit.ns);
|
||||
break;
|
||||
case "CreatePlaceholder":
|
||||
this.CreatePlaceholder(edit.root);
|
||||
this.CreatePlaceholder(BigInt(edit.root));
|
||||
break;
|
||||
case "RemoveEventListener":
|
||||
this.RemoveEventListener(edit.root, edit.event_name);
|
||||
this.RemoveEventListener(BigInt(edit.root), edit.event_name);
|
||||
break;
|
||||
case "NewEventListener":
|
||||
// this handler is only provided on desktop implementations since this
|
||||
// method is not used by the web implementation
|
||||
let handler = (event) => {
|
||||
|
||||
let target = event.target;
|
||||
if (target != null) {
|
||||
let realId = target.getAttribute(`data-dioxus-id`);
|
||||
@@ -330,26 +582,66 @@ export class Interpreter {
|
||||
if (realId === null) {
|
||||
return;
|
||||
}
|
||||
if (realId.includes(",")) {
|
||||
realId = realId.split(',');
|
||||
realId = {
|
||||
template_ref_id: parseInt(realId[0]),
|
||||
template_node_id: parseInt(realId[1]),
|
||||
};
|
||||
}
|
||||
else {
|
||||
realId = parseInt(realId);
|
||||
}
|
||||
window.ipc.postMessage(
|
||||
serializeIpcMessage("user_event", {
|
||||
event: edit.event_name,
|
||||
mounted_dom_id: parseInt(realId),
|
||||
mounted_dom_id: realId,
|
||||
contents: contents,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
this.NewEventListener(edit.event_name, edit.root, handler, event_bubbles(edit.event_name));
|
||||
this.NewEventListener(edit.event_name, BigInt(edit.root), handler, event_bubbles(edit.event_name));
|
||||
|
||||
break;
|
||||
case "SetText":
|
||||
this.SetText(edit.root, edit.text);
|
||||
this.SetText(BigInt(edit.root), edit.text);
|
||||
break;
|
||||
case "SetAttribute":
|
||||
this.SetAttribute(edit.root, edit.field, edit.value, edit.ns);
|
||||
this.SetAttribute(BigInt(edit.root), edit.field, edit.value, edit.ns);
|
||||
break;
|
||||
case "RemoveAttribute":
|
||||
this.RemoveAttribute(edit.root, edit.name, edit.ns);
|
||||
this.RemoveAttribute(BigInt(edit.root), edit.name, edit.ns);
|
||||
break;
|
||||
case "PopRoot":
|
||||
this.PopRoot();
|
||||
break;
|
||||
case "CreateTemplateRef":
|
||||
this.CreateTemplateRef(BigInt(edit.id), edit.template_id);
|
||||
break;
|
||||
case "CreateTemplate":
|
||||
this.CreateTemplate(BigInt(edit.id));
|
||||
break;
|
||||
case "FinishTemplate":
|
||||
this.FinishTemplate(edit.len);
|
||||
break;
|
||||
case "EnterTemplateRef":
|
||||
this.EnterTemplateRef(BigInt(edit.root));
|
||||
break;
|
||||
case "ExitTemplateRef":
|
||||
this.ExitTemplateRef();
|
||||
break;
|
||||
case "CreateElementTemplate":
|
||||
this.CreateElementTemplate(edit.tag, BigInt(edit.root), edit.locally_static, edit.fully_static);
|
||||
break;
|
||||
case "CreateElementNsTemplate":
|
||||
this.CreateElementNsTemplate(edit.tag, BigInt(edit.root), edit.ns, edit.locally_static, edit.fully_static);
|
||||
break;
|
||||
case "CreateTextNodeTemplate":
|
||||
this.CreateTextNodeTemplate(edit.text, BigInt(edit.root), edit.locally_static);
|
||||
break;
|
||||
case "CreatePlaceholderTemplate":
|
||||
this.CreatePlaceholderTemplate(BigInt(edit.root));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user