mithril-vndb/docs/v1.x-migration.md

Migrating from v0.2.x to v1.x

v1.x is largely API-compatible with v0.2.x, but there are a few breaking changes.

• config function
• Cancelling redraw from event handlers
• Component controller function
• Component arguments
• Passing components to m()
• m.route and anchor tags

config function

In v0.2.x mithril provided a single lifecycle method, config. v1.x provides much more fine-grained control over the lifecycle of a vnode.

v0.2.x

m("div", {
    config : function(element, isInitialized) {
        // runs on each redraw
        // isInitialized is a boolean representing if the node has been added to the DOM
    }
});

v1.x

More documentation on these new methods is available in lifecycle-methods.md.

m("div", {
    // Called before the DOM node is created
    oninit : function(vnode) { ... },
    // Called after the DOM node is created
    oncreate : function(vnode) { ... },
    // Called before the node is updated, return false to cancel
    onbeforeupdate : function(vnode, old) { ... },
    // Called after the node is updated
    onupdate : function(vnode) { ... },
    // Called before the node is removed, call done() when ready for the node to be removed from the DOM
    onbeforeremove : function(vnode, done) { ... },
    // Called before the node is removed, but after onbeforeremove calls done()
    onremove : function(vnode) { ... }
});

If available the DOM-Element of the vnode can be accessed at vnode.dom.

Cancelling redraw from event handlers

m.mount() and m.route() still automatically redraw after a DOM event handler runs. Cancelling these redraws from within your event handlers is now done by setting the redraw property on the passed-in event object to false.

v0.2.x

m("div", {
    onclick : function(e) {
        m.redraw.strategy("none");
    }
})

v1.x

m("div", {
    onclick : function(e) {
        e.redraw = false;
    }
})

Component controller function

In v1.x there is no more controller property in components, use oninit instead.

v0.2.x

m.mount(document.body, {
    controller : function() {
        var ctrl = this;
        
        ctrl.fooga = 1;
    },
    
    view : function(ctrl) {
        return m("p", ctrl.fooga);
    }
});

v1.x

m.mount(document.body, {
    oninit : function(vnode) {
        vnode.state.fooga = 1;
    },
    
    view : function(vnode) {
        return m("p", vnode.state.fooga);
    }
});

// OR

m.mount(document.body, {
    oninit : function(vnode) {
        var ctrl = this;  // this is bound to vnode.state by default
        
        ctrl.fooga = 1;
    },
    
    view : function(vnode) {
        var ctrl = this; // this is bound to vnode.state by default
        
        return m("p", ctrl.fooga);
    }
});

Component arguments

Arguments to a component in v1.x must be an object, simple values like String/Number/Boolean will be treated as text children. Arguments are accessed within the component by reading them from the vnode.attrs object.

v0.2.x

var component = {
    controller : function(options) {
        // options.fooga === 1
    },
    
    view : function(ctrl, options) {
        // options.fooga == 1
    }
};

m("div", m.component(component, { fooga : 1 }));

v1.x

var component = {
    oninit : function(vnode) {
        // vnode.attrs.fooga === 1
    },
    
    view : function(vnode) {
        // vnode.attrs.fooga == 1
    }
};

m("div", m(component, { fooga : 1 }));

Passing components to m()

In v0.2.x you could pass components as the second argument of m() w/o any wrapping required. To help with consistency in v1.x they must always be wrapped with a m() invocation.

v0.2.x

m("div", <component>);

v1.x

m("div", m(<component>));

m.route() and anchor tags

Handling clicks on anchor tags via the mithril router is similar to v0.2.x but uses a new lifecycle method and API.

v0.2.x

// When clicked this link will load the "/path" route instead of navigating
m("a", {
    href   : "/path",
    config : m.route
})

v1.x

// When clicked this link will load the "/path" route instead of navigating
m("a", {
    href     : "/path",
    oncreate : m.route.link
})