Hello World!
; - } -} - -class NewMithrilComponent extends Component { - oninit(vnode) { - super.oninit(vnode); - - console.log('Code to run when component instance created, but before attached to the DOM.'); - } - - oncreate(vnode) { - super.oncreate(vnode); - - console.log('Code to run when components are first created and attached to the DOM'); - } - - onbeforeupdate(vnode, oldVnode) { - super.onbeforeupdate(vnode); - - console.log('Code to run BEFORE diffing / redrawing components on every redraw'); - - // In mithril 2, if we want to skip diffing / redrawing a component, we return "false" in its onbeforeupdate lifecycle hook. - // See https://mithril.js.org/lifecycle-methods.html#onbeforeupdate - // This is also typically used with SubtreeRetainer. - if (dontRedraw()) return false; - } - - onupdate(vnode) { - // Unlike config, this does NOT run when components are first attached. - // Some code might need to be replicated between oncreate and onupdate. - console.log('Code to run on every redraw AFTER the DOM is updated.'); - } - - onbeforeremove(vnode) { - // This is run before components are removed from the DOM. - // If a promise is returned, the DOM element will only be removed when the - // promise completes. It is only called on the top-level component that has - // been removed. It has no equivalent in Mithril 0.2. - // See https://mithril.js.org/lifecycle-methods.html#onbeforeremove - return Promise.resolve(); - } - - onremove(vnode) { - console.log('Code to run when the component is removed from the DOM'); - } -} -``` - -#### Children vs Text Nodes - -In Mithril 0.2, every child of a vnode is another vnode, stored in `vnode.children`. For Mithril 2, as a performance optimization, vnodes with a single text child now store that text directly in `vnode.text`. For developers, that means that `vnode.children` might not always contain the results needed. Luckily, text being stored in `vnode.text` vs `vnode.children` will be the same each time for a given component, but developers should be aware that at times, they might need to use `vnode.text` and not `vnode.children`. - -Please see [the mithril documentation](https://mithril.js.org/vnodes.html#structure) for more information on vnode structure. - -#### Routing API - -Mithril 2 introduces a few changes in the routing API. Most of these are quite simple: - -- `m.route()` to get the current route has been replaced by `m.route.get()` -- `m.route(NEW_ROUTE)` to set a new route has been replaced by `m.route.set(NEW_ROUTE)` -- When registering new routes, a component class should be provided, not a component instance. - -For example: - -```js -// Mithril 0.2 -app.routes.new_page = { path: '/new', component: NewPage.component() } - -// Mithril 2.0 -app.routes.new_page = { path: '/new', component: NewPage } -``` - -Additionally, the preferred way of defining an internal (doesn't refresh the page when clicked) link has been changed. The `Link` component should be used instead. - -```js -// Mithril 0.2 -Link Content - -// Mithril 2 -import Link from 'flarum/components/Link'; - -Link Content -``` - -You can also use `Link` to define external links, which will just render as plain `Children` html links. - -For a full list of routing-related changes, please see [the mithril documentation](https://mithril.js.org/migration-v02x.html). - -#### Redraw API - -Mithril 2 introduces a few changes in the redraw API. Most of these are quite simple: - -- Instead of `m.redraw(true)` for synchronous redraws, use `m.redraw.sync()` -- Instead of `m.lazyRedraw()`, use `m.redraw()` - -Remember that Mithril automatically triggers a redraw after DOM event handlers. The API for preventing a redraw has also changed: - -```js -// Mithril 0.2 - - -// Mithril 2 - -``` - -#### AJAX - -The `data` parameter of `m.request({...})` has been split up into `body` and `params`. - -For examples and other AJAX changes, see [the mithril documentation](https://mithril.js.org/migration-v02x.html#mrequest). - -#### Promises - -`m.deferred` has been removed, native promises should be used instead. For instance: - -```js -// Mithril 0.2 -const deferred = m.deferred(); - -app.store.find('posts').then(result => deferred.resolve(result)); - -return deferred.promise; - -// Mithril 2 -return app.store.find('posts'); -``` - -#### Component instances should not be stored - -Due to optimizations in Mithril's redrawing algorithms, [component instances should not be stored](https://mithril.js.org/components.html#define-components-statically,-call-them-dynamically). - -So whereas before, you might have done something like: - -```js -class ChildComponent extends Component { - oninit(vnode) { - super.oninit(vnode); - this.counter = 0; - } - - view() { - return{this.counter}
; - } -} -class ParentComponent extends Component { - oninit(vnode) { - super.oninit(vnode); - this.child = new ChildComponent(); - } - - view() { - return ( -{this.attrs.counter}
; - } -} - -class ParentComponent extends Component { - oninit(vnode) { - super.oninit(vnode); - this.counter = 0; - } - - view() { - return ( -Counter: {app.counter.getCount()}
-Hello World!{this.showContent ? ' Extra Content!' : ''}
-Hello World!