Skip to content

Commit

Permalink
Fix bugs in dom update method
Browse files Browse the repository at this point in the history
  • Loading branch information
@CMEONE
CMEONE committed Apr 2, 2021
1 parent 14582f2 commit a01f121
Showing 1 changed file with 110 additions and 102 deletions.
212 changes: 110 additions & 102 deletions tApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class tApp {
static currentHash = "/";
static debugComponentTiming;
static get version() {
return "v0.10.7";
return "v0.10.8";
}
static configure(params) {
if(params == null) {
Expand Down Expand Up @@ -470,124 +470,128 @@ class tApp {
return true;
}
function convertNode(before, after) {
if(before.attributes != null && after.attributes != null) {
let removeAttributes = [];
let updateAttributes = [];
let beforeAttributes = [...before.attributes];
let afterAttributes = [...after.attributes];
if((after.value != null && after.value != "") || (before.value != null && before.value != "")) {
if((after.value == "" || after.value == null) && (before.value != "" || before.value != null)) {
removeAttributes.push({nodeName: "value", nodeValue: ""});
} else if(after.value != before.value) {
updateAttributes.push({nodeName: "value", nodeValue: after.value});
if(before.nodeName != after.nodeName) {
after.outerHTML = before.outerHTML;
} else {
if(before.attributes != null && after.attributes != null) {
let removeAttributes = [];
let updateAttributes = [];
let beforeAttributes = [...before.attributes];
let afterAttributes = [...after.attributes];
if((after.value != null && after.value != "") || (before.value != null && before.value != "")) {
if((after.value == "" || after.value == null) && (before.value != "" || before.value != null)) {
removeAttributes.push({nodeName: "value", nodeValue: ""});
} else if(after.value != before.value) {
updateAttributes.push({nodeName: "value", nodeValue: after.value});
}
}
}
for(let i = 0; i < beforeAttributes.length; i++) {
if(beforeAttributes[i].nodeName != "value") {
let afterAttribute = afterAttributes.find(attribute => attribute.nodeName == beforeAttributes[i].nodeName);
if(afterAttribute == null) {
removeAttributes.push(beforeAttributes[i]);
} else if(afterAttribute.nodeValue != beforeAttributes[i].nodeValue) {
updateAttributes.push(beforeAttributes[i]);
for(let i = 0; i < beforeAttributes.length; i++) {
if(beforeAttributes[i].nodeName != "value") {
let afterAttribute = afterAttributes.find(attribute => attribute.nodeName == beforeAttributes[i].nodeName);
if(afterAttribute == null) {
removeAttributes.push(beforeAttributes[i]);
} else if(afterAttribute.nodeValue != beforeAttributes[i].nodeValue) {
updateAttributes.push(beforeAttributes[i]);
}
}
}
}
for(let i = 0; i < afterAttributes.length; i++) {
if(afterAttributes[i].nodeName != "value") {
let beforeAttribute = beforeAttributes.find(attribute => attribute.nodeName == afterAttributes[i].nodeName);
if(beforeAttribute == null) {
updateAttributes.push(afterAttributes[i]);
for(let i = 0; i < afterAttributes.length; i++) {
if(afterAttributes[i].nodeName != "value") {
let beforeAttribute = beforeAttributes.find(attribute => attribute.nodeName == afterAttributes[i].nodeName);
if(beforeAttribute == null) {
updateAttributes.push(afterAttributes[i]);
}
}
}
}
for(let i = 0; i < removeAttributes.length; i++) {
if(removeAttributes[i].nodeName == "value") {
before.value = "";
} else {
before.removeAttribute(removeAttributes[i].nodeName);
for(let i = 0; i < removeAttributes.length; i++) {
if(removeAttributes[i].nodeName == "value") {
before.value = "";
} else {
before.removeAttribute(removeAttributes[i].nodeName);
}
}
}
for(let i = 0; i < updateAttributes.length; i++) {
if(updateAttributes[i].nodeName == "value") {
before.value = updateAttributes[i].nodeValue;
} else {
before.setAttribute(updateAttributes[i].nodeName, updateAttributes[i].nodeValue);
for(let i = 0; i < updateAttributes.length; i++) {
if(updateAttributes[i].nodeName == "value") {
before.value = updateAttributes[i].nodeValue;
} else {
before.setAttribute(updateAttributes[i].nodeName, updateAttributes[i].nodeValue);
}
}
}
}
if(before.nodeName == "#text" && after.nodeName == "#text") {
before.textContent = after.textContent;
}

if(after.childNodes.length == 0 || after.childNodes.length == 1 && after.childNodes[0].nodeName == "#text") {
before.innerHTML = after.innerHTML;
} else {
if(compareChildren(before, after)) {
for(let i = 0; i < after.childNodes.length; i++) {
convertNode(before.childNodes[i], after.childNodes[i])
}
if(before.nodeName == "#text" && after.nodeName == "#text") {
before.textContent = after.textContent;
}

if(after.childNodes.length == 0 || after.childNodes.length == 1 && after.childNodes[0].nodeName == "#text") {
before.innerHTML = after.innerHTML;
} else {
let beforeChildren = [...before.childNodes];
let afterChildren = [...after.childNodes];
let beforeChildrenPersist = [...before.childNodes];
let afterChildrenPersist = [...after.childNodes];
let pointerBefore = 0;
let pointerAfter = 0;
while(pointerBefore < beforeChildren.length || pointerAfter < afterChildren.length) {
if(pointerBefore >= beforeChildren.length) {
beforeChildren.splice(pointerBefore, 0, null);
} else if(pointerAfter >= afterChildren.length) {
afterChildren.splice(pointerAfter, 0, null);
} else {
if(beforeChildren[pointerBefore].nodeName != afterChildren[pointerAfter].nodeName) {
if(beforeChildrenPersist.length > afterChildrenPersist.length) {
afterChildren.splice(pointerAfter, 0, null);
} else {
beforeChildren.splice(pointerBefore, 0, null);
}
}
if(compareChildren(before, after)) {
for(let i = 0; i < after.childNodes.length; i++) {
convertNode(before.childNodes[i], after.childNodes[i])
}
pointerBefore++;
pointerAfter++;
}
for(let i = 0; i < beforeChildren.length; i++) {
let nullBefore = beforeChildren.length == beforeChildren.filter(el => el == null || el.nodeName == "#text").length;
if(beforeChildren[i] == null && afterChildren[i] == null) {
} else if(beforeChildren[i] == null) {
if(nullBefore) {
before.appendChild(afterChildren[i]);
} else {
let beforeChildren = [...before.childNodes];
let afterChildren = [...after.childNodes];
let beforeChildrenPersist = [...before.childNodes];
let afterChildrenPersist = [...after.childNodes];
let pointerBefore = 0;
let pointerAfter = 0;
while(pointerBefore < beforeChildren.length || pointerAfter < afterChildren.length) {
if(pointerBefore >= beforeChildren.length) {
beforeChildren.splice(pointerBefore, 0, null);
} else if(pointerAfter >= afterChildren.length) {
afterChildren.splice(pointerAfter, 0, null);
} else {
let nextNotNull;
for(let j = i; nextNotNull == null && j < beforeChildren.length; j++) {
if(beforeChildren[j] != null && beforeChildren[j].nodeName != "#text") {
nextNotNull = beforeChildren[j];
if(beforeChildren[pointerBefore].nodeName != afterChildren[pointerAfter].nodeName) {
if(beforeChildrenPersist.length > afterChildrenPersist.length) {
afterChildren.splice(pointerAfter, 0, null);
} else {
beforeChildren.splice(pointerBefore, 0, null);
}
}
if(nextNotNull == null) {
let prevNotNull;
for(let j = i; prevNotNull == null && j < beforeChildren.length; j--) {
}
pointerBefore++;
pointerAfter++;
}
for(let i = 0; i < beforeChildren.length; i++) {
let nullBefore = beforeChildren.length == beforeChildren.filter(el => el == null || el.nodeName == "#text").length;
if(beforeChildren[i] == null && afterChildren[i] == null) {
} else if(beforeChildren[i] == null) {
if(nullBefore) {
before.appendChild(afterChildren[i]);
} else {
let nextNotNull;
for(let j = i; nextNotNull == null && j < beforeChildren.length; j++) {
if(beforeChildren[j] != null && beforeChildren[j].nodeName != "#text") {
prevNotNull = beforeChildren[j];
nextNotNull = beforeChildren[j];
}
}
if(afterChildren[i].nodeName == "#text") {
prevNotNull.insertAdjacentText("afterend", afterChildren[i].nodeValue);
} else {
prevNotNull.insertAdjacentElement("afterend", afterChildren[i]);
}
} else {
if(afterChildren[i].nodeName == "#text") {
nextNotNull.insertAdjacentText("beforebegin", afterChildren[i].nodeValue);
if(nextNotNull == null) {
let prevNotNull;
for(let j = i; prevNotNull == null && j < beforeChildren.length; j--) {
if(beforeChildren[j] != null && beforeChildren[j].nodeName != "#text") {
prevNotNull = beforeChildren[j];
}
}
if(afterChildren[i].nodeName == "#text") {
prevNotNull.insertAdjacentText("afterend", afterChildren[i].nodeValue);
} else {
prevNotNull.insertAdjacentElement("afterend", afterChildren[i]);
}
} else {
nextNotNull.insertAdjacentElement("beforebegin", afterChildren[i]);
if(afterChildren[i].nodeName == "#text") {
nextNotNull.insertAdjacentText("beforebegin", afterChildren[i].nodeValue);
} else {
nextNotNull.insertAdjacentElement("beforebegin", afterChildren[i]);
}
}
}
} else if(afterChildren[i] == null) {
beforeChildren[i].remove();
beforeChildren[i] = null;
} else {
convertNode(beforeChildren[i], afterChildren[i]);
}
} else if(afterChildren[i] == null) {
beforeChildren[i].remove();
beforeChildren[i] = null;
} else {
convertNode(beforeChildren[i], afterChildren[i]);
}
}
}
Expand All @@ -611,14 +615,18 @@ class tApp {
}
static compileComponent(component, props = {}, parent = "global") {
function htmlToDOM(html) {
if(html.includes("<body")) {
return new DOMParser().parseFromString(html, "text/html").childNodes[0];
if(html.includes("</html>")) {
return new DOMParser().parseFromString(html, "text/html").children[0];
} else if(html.includes("</head>")) {
return new DOMParser().parseFromString(html, "text/html").body.parentNode.children[0];
} else if(html.includes("</body>")) {
return new DOMParser().parseFromString(html, "text/html").body.parentNode.children[1];
} else {
return new DOMParser().parseFromString(html, "text/html").body.childNodes[0];
}
}
function htmlToDOMCount(html) {
if(html.includes("<body")) {
if(html.includes("</body>")) {
return new DOMParser().parseFromString(html, "text/html").childNodes.length;
} else {
return new DOMParser().parseFromString(html, "text/html").body.childNodes.length;
Expand Down

0 comments on commit a01f121

Please sign in to comment.