diff --git a/docs/components.md b/docs/components.md index 7a2555c6..d4016e03 100644 --- a/docs/components.md +++ b/docs/components.md @@ -28,7 +28,7 @@ m(Example) ### Lifecycle methods -Components can have the same [lifecycle methods](lifecycle-methods.md) as virtual DOM nodes: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove` and `shouldUpdate`. +Components can have the same [lifecycle methods](lifecycle-methods.md) as virtual DOM nodes: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove` and `onbeforeupdate`. ```javascript var ComponentWithHooks = { @@ -48,7 +48,7 @@ var ComponentWithHooks = { onremove: function(vnode) { console.log("removing DOM element") }, - shouldUpdate: function(vnode, old) { + onbeforeupdate: function(vnode, old) { return true }, view: function(vnode) { diff --git a/docs/hyperscript.md b/docs/hyperscript.md index 35b09432..ac323912 100644 --- a/docs/hyperscript.md +++ b/docs/hyperscript.md @@ -229,7 +229,7 @@ To learn more about components, [see the components page](components.md). ### Lifecycle methods -Vnodes and components can have lifecycle methods (also known as *hooks*), which are called at various points during the lifetime of a DOM element. The lifecycle methods supported by Mithril are: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove`, and `shouldUpdate`. +Vnodes and components can have lifecycle methods (also known as *hooks*), which are called at various points during the lifetime of a DOM element. The lifecycle methods supported by Mithril are: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove`, and `onbeforeupdate`. Lifecycle methods are defined in the same way as DOM event handlers, but receive the vnode as an argument, instead of an Event object: @@ -248,7 +248,7 @@ Hook | Description `onupdate(vnode)` | Runs every time a redraw occurs while the DOM element is attached to the document `onbeforeremove(vnode, done)` | Runs before a DOM element is removed from the document, and only triggers the actual removal of the DOM element when the `done` callback is called. This method is only triggered on the element that is detached from its parent DOM element, but not on its child elements. `onremove(vnode)` | Runs before a DOM element is removed from the document. If a `onbeforeremove` hook is defined, `onremove` is called after `done` is called. This method is triggered on the element that is detached from its parent element, and all of its children -`shouldUpdate(vnode, old)` | Runs before `onupdate` and if it returns `false`, it prevents a diff for the element and all of its children +`onbeforeupdate(vnode, old)` | Runs before `onupdate` and if it returns `false`, it prevents a diff for the element and all of its children To learn more about lifecycle methods, [see the lifecycle methods page](lifecycle-methods.md). diff --git a/docs/lifecycle-methods.md b/docs/lifecycle-methods.md index 5fe4bd8a..21a7221b 100644 --- a/docs/lifecycle-methods.md +++ b/docs/lifecycle-methods.md @@ -7,7 +7,7 @@ - [onupdate](#onupdate) - [onbeforeremove](#onbeforeremove) - [onremove](#onremove) -- [shouldUpdate](#shouldUpdate) +- [onbeforeupdate](#onbeforeupdate) - [Avoid anti-patterns](#avoid-anti-patterns) --- @@ -176,13 +176,13 @@ var Timer = { --- -### shouldUpdate +### onbeforeupdate -The `shouldUpdate(vnode, old)` hook is called before a vnode is diffed in a update. If this function is defined and returns false, Mithril prevents a diff from happening to the vnode, and consequently to the vnode's children. +The `onbeforeupdate(vnode, old)` hook is called before a vnode is diffed in a update. If this function is defined and returns false, Mithril prevents a diff from happening to the vnode, and consequently to the vnode's children. This hook by itself does not prevent a virtual DOM subtree from being generated unless the subtree is encapsulated within a component. -Like in other hooks, the `this` keyword in the `shouldUpdate` callback points to `vnode.state`. +Like in other hooks, the `this` keyword in the `onbeforeupdate` callback points to `vnode.state`. This hook is useful to reduce lag in updates in cases where there is a overly large DOM tree. @@ -194,14 +194,14 @@ Although Mithril is flexible, some code patterns are discouraged: #### Avoid premature optimizations -The `shouldUpdate` hook should only be used as a last resort. Avoid using it unless you have a noticeable performance issue. +The `onbeforeupdate` hook should only be used as a last resort. Avoid using it unless you have a noticeable performance issue. -Typically performance problems that can be fixed via `shouldUpdate` boil down to one large array of items. In this context, typically "large" means any array that contains a large number of nodes, be it in a wide spread (the infamous 5000 row table), or in a deep, dense tree. +Typically performance problems that can be fixed via `onbeforeupdate` boil down to one large array of items. In this context, typically "large" means any array that contains a large number of nodes, be it in a wide spread (the infamous 5000 row table), or in a deep, dense tree. If you do have a performance issue, first consider whether the UI presents a good user experience and change it if it doesn't. For example, it's highly unlikely that a user would ever sift through 5000 rows of raw table data, and highly likely that it would be easier for a user to use a search feature that returns only the top few most relevant items. -If a design-based solution is not feasible, and you must optimize a UI with a large number of DOM element, apply `shouldUpdate` on the parent node of the largest array and re-evaluate performance. In the vast majority of cases, a single check should be sufficient. In the rare case that it is not, rinse and repeat, but you should be increasingly wary of each new `shouldUpdate` declaration. Multiple `shouldUpdate`s are a code smell that indicates prioritization problems in the design workflow. +If a design-based solution is not feasible, and you must optimize a UI with a large number of DOM element, apply `onbeforeupdate` on the parent node of the largest array and re-evaluate performance. In the vast majority of cases, a single check should be sufficient. In the rare case that it is not, rinse and repeat, but you should be increasingly wary of each new `onbeforeupdate` declaration. Multiple `onbeforeupdate`s are a code smell that indicates prioritization problems in the design workflow. -Avoid applying the optimization to other areas of your application "just-in-case". Remember that, generally speaking, more code incurs a higher maintenance cost than less code, and `shouldUpdate` related bugs can be especially difficult to troubleshoot if you rely on object identity for its conditional checks. +Avoid applying the optimization to other areas of your application "just-in-case". Remember that, generally speaking, more code incurs a higher maintenance cost than less code, and `onbeforeupdate` related bugs can be especially difficult to troubleshoot if you rely on object identity for its conditional checks. -Again, **the `shouldUpdate` hook should only be used as a last resort.** \ No newline at end of file +Again, **the `onbeforeupdate` hook should only be used as a last resort.** \ No newline at end of file diff --git a/mithril.js b/mithril.js index 5813d474..a2e24761 100644 --- a/mithril.js +++ b/mithril.js @@ -339,7 +339,7 @@ var renderService = function($window) { if (oldTag === tag) { vnode.state = old.state vnode.events = old.events - if (shouldUpdate(vnode, old)) return + if (onbeforeupdate(vnode, old)) return if (vnode.attrs != null) { updateLifecycle(vnode.attrs, vnode, hooks, recycling) } @@ -564,7 +564,7 @@ var renderService = function($window) { return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === $doc.activeElement } function isLifecycleMethod(attr) { - return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "shouldUpdate" + return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "onbeforeupdate" } function isAttribute(attr) { return attr === "href" || attr === "list" || attr === "form"// || attr === "type" || attr === "width" || attr === "height" @@ -617,10 +617,10 @@ var renderService = function($window) { if (recycling) initLifecycle(source, vnode, hooks) else if (typeof source.onupdate === "function") hooks.push(source.onupdate.bind(vnode.state, vnode)) } - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { var forceVnodeUpdate, forceComponentUpdate - if (vnode.attrs != null && typeof vnode.attrs.shouldUpdate === "function") forceVnodeUpdate = vnode.attrs.shouldUpdate.call(vnode.state, vnode, old) - if (typeof vnode.tag !== "string" && typeof vnode.tag.shouldUpdate === "function") forceComponentUpdate = vnode.tag.shouldUpdate.call(vnode.state, vnode, old) + if (vnode.attrs != null && typeof vnode.attrs.onbeforeupdate === "function") forceVnodeUpdate = vnode.attrs.onbeforeupdate.call(vnode.state, vnode, old) + if (typeof vnode.tag !== "string" && typeof vnode.tag.onbeforeupdate === "function") forceComponentUpdate = vnode.tag.onbeforeupdate.call(vnode.state, vnode, old) if (!(forceVnodeUpdate === undefined && forceComponentUpdate === undefined) && !forceVnodeUpdate && !forceComponentUpdate) { vnode.dom = old.dom vnode.domSize = old.domSize diff --git a/render/render.js b/render/render.js index 669bf2d4..2c5196bf 100644 --- a/render/render.js +++ b/render/render.js @@ -400,7 +400,7 @@ module.exports = function($window) { return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === $doc.activeElement } function isLifecycleMethod(attr) { - return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "shouldUpdate" + return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "onbeforeupdate" } function isAttribute(attr) { return attr === "href" || attr === "list" || attr === "form"// || attr === "type" || attr === "width" || attr === "height" @@ -456,8 +456,8 @@ module.exports = function($window) { } function shouldUpdate(vnode, old) { var forceVnodeUpdate, forceComponentUpdate - if (vnode.attrs != null && typeof vnode.attrs.shouldUpdate === "function") forceVnodeUpdate = vnode.attrs.shouldUpdate.call(vnode.state, vnode, old) - if (typeof vnode.tag !== "string" && typeof vnode.tag.shouldUpdate === "function") forceComponentUpdate = vnode.tag.shouldUpdate.call(vnode.state, vnode, old) + if (vnode.attrs != null && typeof vnode.attrs.onbeforeupdate === "function") forceVnodeUpdate = vnode.attrs.onbeforeupdate.call(vnode.state, vnode, old) + if (typeof vnode.tag !== "string" && typeof vnode.tag.onbeforeupdate === "function") forceComponentUpdate = vnode.tag.onbeforeupdate.call(vnode.state, vnode, old) if (!(forceVnodeUpdate === undefined && forceComponentUpdate === undefined) && !forceVnodeUpdate && !forceComponentUpdate) { vnode.dom = old.dom vnode.domSize = old.domSize diff --git a/render/tests/index.html b/render/tests/index.html index 0082e240..5e87ee93 100644 --- a/render/tests/index.html +++ b/render/tests/index.html @@ -32,7 +32,7 @@ - + diff --git a/render/tests/test-shouldUpdate.js b/render/tests/test-onbeforeupdate.js similarity index 65% rename from render/tests/test-shouldUpdate.js rename to render/tests/test-onbeforeupdate.js index b4dbc57a..ef434d15 100644 --- a/render/tests/test-shouldUpdate.js +++ b/render/tests/test-onbeforeupdate.js @@ -4,7 +4,7 @@ var o = require("../../ospec/ospec") var domMock = require("../../test-utils/domMock") var vdom = require("../../render/render") -o.spec("shouldUpdate", function() { +o.spec("onbeforeupdate", function() { var $window, root, render o.beforeEach(function() { $window = domMock() @@ -13,9 +13,9 @@ o.spec("shouldUpdate", function() { }) o("prevents update in element", function() { - var shouldUpdate = function() {return false} - var vnode = {tag: "div", attrs: {id: "a", shouldUpdate: shouldUpdate}} - var updated = {tag: "div", attrs: {id: "b", shouldUpdate: shouldUpdate}} + var onbeforeupdate = function() {return false} + var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}} + var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}} render(root, [vnode]) render(root, [updated]) @@ -24,9 +24,9 @@ o.spec("shouldUpdate", function() { }) o("prevents update in text", function() { - var shouldUpdate = function() {return false} - var vnode = {tag: "#", attrs: {shouldUpdate: shouldUpdate}, children: "a"} - var updated = {tag: "#", attrs: {shouldUpdate: shouldUpdate}, children: "b"} + var onbeforeupdate = function() {return false} + var vnode = {tag: "#", attrs: {onbeforeupdate: onbeforeupdate}, children: "a"} + var updated = {tag: "#", attrs: {onbeforeupdate: onbeforeupdate}, children: "b"} render(root, [vnode]) render(root, [updated]) @@ -35,9 +35,9 @@ o.spec("shouldUpdate", function() { }) o("prevents update in html", function() { - var shouldUpdate = function() {return false} - var vnode = {tag: "<", attrs: {shouldUpdate: shouldUpdate}, children: "a"} - var updated = {tag: "<", attrs: {shouldUpdate: shouldUpdate}, children: "b"} + var onbeforeupdate = function() {return false} + var vnode = {tag: "<", attrs: {onbeforeupdate: onbeforeupdate}, children: "a"} + var updated = {tag: "<", attrs: {onbeforeupdate: onbeforeupdate}, children: "b"} render(root, [vnode]) render(root, [updated]) @@ -46,9 +46,9 @@ o.spec("shouldUpdate", function() { }) o("prevents update in fragment", function() { - var shouldUpdate = function() {return false} - var vnode = {tag: "[", attrs: {shouldUpdate: shouldUpdate}, children: [{tag: "#", children: "a"}]} - var updated = {tag: "[", attrs: {shouldUpdate: shouldUpdate}, children: [{tag: "#", children: "b"}]} + var onbeforeupdate = function() {return false} + var vnode = {tag: "[", attrs: {onbeforeupdate: onbeforeupdate}, children: [{tag: "#", children: "a"}]} + var updated = {tag: "[", attrs: {onbeforeupdate: onbeforeupdate}, children: [{tag: "#", children: "b"}]} render(root, [vnode]) render(root, [updated]) @@ -58,7 +58,7 @@ o.spec("shouldUpdate", function() { o("prevents update in component", function() { var component = { - shouldUpdate: function() {return false}, + onbeforeupdate: function() {return false}, view: function(vnode) { return {tag: "div", children: vnode.children} }, @@ -74,13 +74,13 @@ o.spec("shouldUpdate", function() { o("prevents update if returning false in component and false in vnode", function() { var component = { - shouldUpdate: function() {return false}, + onbeforeupdate: function() {return false}, view: function(vnode) { return {tag: "div", attrs: {id: vnode.attrs.id}} }, } - var vnode = {tag: component, attrs: {id: "a", shouldUpdate: function() {return false}}} - var updated = {tag: component, attrs: {id: "b", shouldUpdate: function() {return false}}} + var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}} + var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}} render(root, [vnode]) render(root, [updated]) @@ -90,13 +90,13 @@ o.spec("shouldUpdate", function() { o("does not prevent update if returning true in component and true in vnode", function() { var component = { - shouldUpdate: function() {return true}, + onbeforeupdate: function() {return true}, view: function(vnode) { return {tag: "div", attrs: {id: vnode.attrs.id}} }, } - var vnode = {tag: component, attrs: {id: "a", shouldUpdate: function() {return true}}} - var updated = {tag: component, attrs: {id: "b", shouldUpdate: function() {return true}}} + var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}} + var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}} render(root, [vnode]) render(root, [updated]) @@ -106,13 +106,13 @@ o.spec("shouldUpdate", function() { o("does not prevent update if returning false in component but true in vnode", function() { var component = { - shouldUpdate: function() {return false}, + onbeforeupdate: function() {return false}, view: function(vnode) { return {tag: "div", attrs: {id: vnode.attrs.id}} }, } - var vnode = {tag: component, attrs: {id: "a", shouldUpdate: function() {return true}}} - var updated = {tag: component, attrs: {id: "b", shouldUpdate: function() {return true}}} + var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}} + var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}} render(root, [vnode]) render(root, [updated]) @@ -122,13 +122,13 @@ o.spec("shouldUpdate", function() { o("does not prevent update if returning true in component but false in vnode", function() { var component = { - shouldUpdate: function() {return true}, + onbeforeupdate: function() {return true}, view: function(vnode) { return {tag: "div", attrs: {id: vnode.attrs.id}} }, } - var vnode = {tag: component, attrs: {id: "a", shouldUpdate: function() {return false}}} - var updated = {tag: component, attrs: {id: "b", shouldUpdate: function() {return false}}} + var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}} + var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}} render(root, [vnode]) render(root, [updated]) @@ -137,9 +137,9 @@ o.spec("shouldUpdate", function() { }) o("does not prevent update if returning true", function() { - var shouldUpdate = function() {return true} - var vnode = {tag: "div", attrs: {id: "a", shouldUpdate: shouldUpdate}} - var updated = {tag: "div", attrs: {id: "b", shouldUpdate: shouldUpdate}} + var onbeforeupdate = function() {return true} + var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}} + var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}} render(root, [vnode]) render(root, [updated]) @@ -149,7 +149,7 @@ o.spec("shouldUpdate", function() { o("does not prevent update if returning true from component", function() { var component = { - shouldUpdate: function() {return true}, + onbeforeupdate: function() {return true}, view: function(vnode) { return {tag: "div", attrs: vnode.attrs} }, @@ -165,13 +165,13 @@ o.spec("shouldUpdate", function() { o("accepts arguments for comparison", function() { var count = 0 - var vnode = {tag: "div", attrs: {id: "a", shouldUpdate: shouldUpdate}} - var updated = {tag: "div", attrs: {id: "b", shouldUpdate: shouldUpdate}} + var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}} + var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}} render(root, [vnode]) render(root, [updated]) - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { count++ o(old.attrs.id).equals("a") @@ -186,7 +186,7 @@ o.spec("shouldUpdate", function() { o("accepts arguments for comparison in component", function() { var component = { - shouldUpdate: shouldUpdate, + onbeforeupdate: onbeforeupdate, view: function(vnode) { return {tag: "div", attrs: vnode.attrs} }, @@ -198,7 +198,7 @@ o.spec("shouldUpdate", function() { render(root, [vnode]) render(root, [updated]) - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { count++ o(old.attrs.id).equals("a") @@ -213,12 +213,12 @@ o.spec("shouldUpdate", function() { o("is not called on creation", function() { var count = 0 - var vnode = {tag: "div", attrs: {id: "a", shouldUpdate: shouldUpdate}} - var updated = {tag: "div", attrs: {id: "b", shouldUpdate: shouldUpdate}} + var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}} + var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}} render(root, [vnode]) - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { count++ return true } @@ -228,7 +228,7 @@ o.spec("shouldUpdate", function() { o("is not called on component creation", function() { var component = { - shouldUpdate: shouldUpdate, + onbeforeupdate: onbeforeupdate, view: function(vnode) { return {tag: "div", attrs: vnode.attrs} }, @@ -240,7 +240,7 @@ o.spec("shouldUpdate", function() { render(root, [vnode]) - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { count++ return true } @@ -250,13 +250,13 @@ o.spec("shouldUpdate", function() { o("is called only once on update", function() { var count = 0 - var vnode = {tag: "div", attrs: {id: "a", shouldUpdate: shouldUpdate}} - var updated = {tag: "div", attrs: {id: "b", shouldUpdate: shouldUpdate}} + var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}} + var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}} render(root, [vnode]) render(root, [updated]) - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { count++ return true } @@ -266,7 +266,7 @@ o.spec("shouldUpdate", function() { o("is called only once on component update", function() { var component = { - shouldUpdate: shouldUpdate, + onbeforeupdate: onbeforeupdate, view: function(vnode) { return {tag: "div", attrs: vnode.attrs} }, @@ -279,7 +279,7 @@ o.spec("shouldUpdate", function() { render(root, [vnode]) render(root, [updated]) - function shouldUpdate(vnode, old) { + function onbeforeupdate(vnode, old) { count++ return true }