Releases: TogaTech/tApp
Bugfixes, Elements
In this release, we fixed some bugs associated with templates rendering wrong when using html characters. Additionally, we added a .elements() method to tApp.Component to expose all of the DOM elements associated with the component.
Unescape, Route Improvement, Execution and Component Bug Fixes
In this release, we added the unescape method, which does the opposite of the escape method. This method is also used to fix a bug in execution where values within {{{ }}} were automatically escaped and needed to be unescaped.
Additionally, we added an improvement to routes, allowing you to declare more routes even after the app starts. This way, if a user is on a page before a route is declared, the page will render after the route is declared (instead of showing a blank screen).
Finally, we fixed some bugs in the DOM updater which caused some components to render children out of order when text nodes were used in components.
Minor Bug Fixes
This release includes minor bug fixes associated with the DOM updater, resolving an issue with different tag types at the top of the update tree (which is highly discouraged anyways) and the detection of the component containing an <html>, <head>, or <body> tag.
Fix Bug with DOM Update and {{_this}}
We added a new method called tApp.getComponentFromDOM(domElement), which finds the component associated with the DOM object. All calls to {{ _this }} use this method. Instead of just scanning the current element to see if it is a component, it continues to scan up the tree until it finds a component in case the element is not the main element of the component.
Additionally, there was a DOM update bug associated with inserting text nodes, which has now been fixed.
updateDOM Helper
In this release, we added the tApp.updateDOM() method, which when called, updates the DOM for all tApp components (this method is automatically called after component.setState(key, val)).
Updates to Parent
In this release, we made it so like {{ _this }}, {{ _parent }} can be used within JavaScript code or {{{ }}} in components to access a reference to the parent, while {{ parent }} and {{{ parent }}} only allow read access to the id and state of the parent. With this new update, you can now chain calls to parent using {{ _parent }}.parent.parent.parent.state to access a parent state higher up on the tree.
Improved Efficiency
Now, updating multiple components, each with multiple subelements, is now done in 9-15ms (reduced from 10-50ms), which is amazing timing for a lightweight library such as tApp.
Improved Efficiency, componentWillUpdate, Debug
In this release, we improved the efficiency of the component diffing and updating algorithm. To see the speed at which tApp updates the DOM after a setState, set tApp.debugComponentTiming to true to see the number in milliseconds in the console or set it to a function taking one parameter to perform an action on the result. Be sure not to use this action to update a component, or you will create an infinite loop. For best results, just use normal DOM manipulation methods to display this number to the screen.
An example of the component timing can be seen on /example/components.html. As shown, updating multiple components, each with multiple subelements, can be done in 10-50ms, which is decent timing for a lightweight library such as tApp.
We also added a componentWillUpdate method into each component, allowing it to take an action before it is updated. For template-based or unpreserved components, we recommend that you destroy all the children (so that they are not uselessly stored in memory):
componentWillUpdate() {
while(this.children.length > 0) {
this.children[0].destroy();
}
}Fix Parsing Bug, Global DOM Update
We fixed a parsing bug related to having newlines within template-based components.
Additionally, on state change, tApp now updates all components (instead of just the current component and children), as component states can be accessed by other components that are not below the updating component on the tree.
DOM Diffing, Escape
In this release, we include DOM diffing, a built-in way to compare changes between the real DOM and the virtual DOM, allowing the site to smoothly update when component states update. This method does not need to be called to be used.
Additionally, we added a tApp.escape(string), so you can easily escape HTML values anywhere in your code (especially useful within component rendering).