Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Expose roots to afterRefresh hook. #16

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Expose roots to afterRefresh hook. #16

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa787bf
Expose roots to afterRefresh hook.
marrs Aug 14, 2024
0e29d49
Render text nodes via their parent element
marrs Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 28 additions & 25 deletions domchanger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ function createComponent(component, parent, owner) {
roots.__keys.forEach(function (key) {
var node = roots[key];
if (node) { // FIXED BUG: node could be removed at this moment already
if (node.el) node.el.parentNode.removeChild(node.el);
if (node.el && node.el.parentNode) node.el.parentNode.removeChild(node.el);
else if (node.destroy) node.destroy();
delete roots[key];
roots.__keys = roots.__keys.filter(function(rmKey) { return rmKey !== key; });
Expand All @@ -101,7 +101,7 @@ function createComponent(component, parent, owner) {
if (!render) return;
var tree = nameNodes(render.apply(null, data));
apply(parent, tree, roots);
afterRefresh();
afterRefresh(roots);
}

function removeItem(item) {
Expand Down Expand Up @@ -138,29 +138,8 @@ function createComponent(component, parent, owner) {
var item = oldTree[key];
var newItem = newTree[key];

// Handle text nodes
if ("text" in newItem) {
if (item) {
// Update the text if it's changed.
if (newItem.text !== item.text) {
item.el.nodeValue = item.text = newItem.text;
// console.log("updated")
}
}
else {
// Otherwise create a new text node.
item = oldTree[key] = {
text: newItem.text,
el: document.createTextNode(newItem.text)
};
oldTree.__keys.push(key)
top.appendChild(item.el);
// console.log("created")
}
}

// Handle tag nodes
else if (newItem.tagName) {
if (newItem.tagName) {
// Create a new item if there isn't one
if (!item) {
item = oldTree[key] = {
Expand All @@ -182,7 +161,31 @@ function createComponent(component, parent, owner) {
updateAttrs(item.el, newItem.props, item.props);

if (newItem.children) {
apply(item.el, newItem.children, item.children);
// Handle text nodes:
// Text nodes can be removed from the DOM by the browser,
// e.g. by deleting text from a contenteditable element.
// We therefore edit text nodes via the element containing them,
// otherwise the vDOM may update a node that is no longer attached
// to the DOM, causing missing text on screen.
if (newItem.children.text) {
if (item.children && item.children.text) {
// Update the text via its parent if it has changed.
if (item.children.text.text !== newItem.children.text.text) {
item.el.innerText = item.children.text.text = newItem.children.text.text;
}
} else {
// Otherwise create a new text node.
item.children = item.children || {}
item.children.text = {
text: newItem.children.text.text,
};
item.children.__keys = item.children.__keys || [];
item.children.__keys.push("text");
item.el.innerText = item.children.text.text;
}
} else {
apply(item.el, newItem.children, item.children);
}
}
}

Expand Down