Skip to content

Commit

Permalink
Improved efficiency in diffing, componentWillUpdate, debug
Browse files Browse the repository at this point in the history
  • Loading branch information
CMEONE committed Mar 17, 2021
1 parent d34cb64 commit 00b0538
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 18 deletions.
12 changes: 9 additions & 3 deletions example/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,12 @@ class Counter extends tApp.Component {
this.state.count = 0;
}
}
render(props) {
for(let i = 0; i < this.children.length; i++) {
this.children[i].destroy();
componentWillUpdate() {
while(this.children.length > 0) {
this.children[0].destroy();
}
}
render(props) {
return (`<div>[[
CounterButton
{
Expand Down Expand Up @@ -219,6 +221,10 @@ tApp.route("#/template", function(request) {

let counter = new CounterPreserved();
let textComponent = new Text();

tApp.debugComponentTiming = (time) => {
document.querySelector("#timing").innerHTML = time + "ms";
}
tApp.route("#/components", function(request) {
tApp.renderTemplate("./views/components.html", {
counter: counter.toString(),
Expand Down
1 change: 1 addition & 0 deletions example/views/components.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<p>Component update timing: <span id="timing">0ms</span></p>
<h3>Counter (Template-Based/Unpreserved):</h3>
[[ Counter {} ]]

Expand Down
81 changes: 66 additions & 15 deletions tApp.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ class tApp {
static started = false;
static database;
static currentHash = "/";
static debugComponentTiming;
static get version() {
return "v0.10.2";
return "v0.10.3";
}
static configure(params) {
if(params == null) {
Expand Down Expand Up @@ -425,6 +426,11 @@ class tApp {
}
}
static updateComponent(component) {
let updateStartTime;
if(tApp.debugComponentTiming != null && component.id == "global") {
updateStartTime = new Date().getTime();
}
component.componentWillUpdate();
function htmlToDOM(html) {
if(html.includes("<body")) {
return new DOMParser().parseFromString(html, "text/html").childNodes[0];
Expand All @@ -451,18 +457,47 @@ class tApp {
}
function convertNode(before, after) {
if(before.attributes != null && after.attributes != null) {
for(let i = 0; i < before.attributes.length; i++) {
if(before.attributes.item(i).nodeName == "value") {
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 < 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(before.attributes.item(i).nodeName);
before.removeAttribute(removeAttributes[i].nodeName);
}
}
for(let i = 0; i < after.attributes.length; i++) {
if(after.attributes.item(i).nodeName == "value") {
before.value = after.value;
for(let i = 0; i < updateAttributes.length; i++) {
if(updateAttributes[i].nodeName == "value") {
before.value = updateAttributes[i].nodeValue;
} else {
before.setAttribute(after.attributes.item(i).nodeName, after.attributes.item(i).nodeValue);
before.setAttribute(updateAttributes[i].nodeName, updateAttributes[i].nodeValue);
}
}
}
Expand Down Expand Up @@ -544,6 +579,13 @@ class tApp {
for(let i = 0; i < component.children.length; i++) {
tApp.updateComponent(component.children[i]);
}
if(tApp.debugComponentTiming != null && component.id == "global") {
if(typeof tApp.debugComponentTiming == "function") {
tApp.debugComponentTiming((new Date().getTime() - updateStartTime))
} else if(tApp.debugComponentTiming) {
console.log((new Date().getTime() - updateStartTime) + "ms");
}
}
}
static compileComponent(component, props = {}, parent = "global") {
function htmlToDOM(html) {
Expand Down Expand Up @@ -1039,9 +1081,13 @@ tApp.Component = class {
get children() {
return this.#children;
}
clearChildren() {
this.#children = [];
return true;
removeChild(child) {
if(this.#children.indexOf(child) > -1) {
this.#children.splice(this.#children.indexOf(child), 1);
return true;
} else {
return false;
}
}
get childrenIds() {
return this.#children.map((child) => {return child.id});
Expand Down Expand Up @@ -1074,14 +1120,19 @@ tApp.Component = class {
}
render(props) {
throw "tAppComponentError: Render method must be overridden.";
}
componentWillUpdate() {

}
destroy() {
for(let i = 0; i < this.#children.length; i++) {
this.#children[i].destroy();
while(this.#children.length > 0) {
this.#children[0].destroy();
}
if(this.#parent != null) {
this.#parent.removeChild(this);
}
this.#children = [];
this.#parent = null;
tApp.removeComponent(this.#id);
tApp.removeComponent(this.id);
return true;
}
toString() {
Expand Down

0 comments on commit 00b0538

Please sign in to comment.