mithril-mu v1.0.1

µ (mu)

µ is an unobtrusive, lightweight function wrapper around mithril's (v1.*) m() function.

µ() is a drop-in replacement for m() adding support for custom attribute transformations (similar to Barney Carroll's mattr).

Install:

npm install mithril-mu

Usage:

var m = require('mithril');
var µ = require('mithril-mu')(m, myAttrTransforms);
console.log( µ.attrs === myAttrTransforms ); // true

// ... then use `µ()` in place of `m()` where super-powers are needed.

Adding transformations:

// Post-hoc addition
µ.attrs.alertOnClick = function (vnode, attrValue, attrs) {
    var onclick = attrs.onclick;
    attrs.onclick = function (e) {
        if (onclick) { onclick.call(this, e); }
        alert( attrValue );
        e.preventDefault();
    };
    console.log( attrs === attrs ); // -> true
  };
// (https://www.npmjs.com/package/m.attrs.bidi)
µ.attrs.bidival = require('m.attrs.bidi');

...Then in your views:

var myView = function ( ctrl ) {
    return µ('div.box', {
            alertOnClick: 'Hello World!',
            onclick: function (e) { alert('Hi all!'); }
        }, [
            'Foobar enhanced element',
            m('p', 'Normal mithril too'),
            µ('input' { bidival:ctrl.inputText })
        ]);
};

In which div.box will alert first 'Hi all!' and then 'Hello World!' when clicked, and the <input> will automatically show the value ctrl.inputText, and update it on input.

Notes:

1. The transformed attribute is removed from the virtual node's attrs map to keep the rendered DOM as clean as possible. If you do want the attribute to appear in the DOM, you must explicitly add it back to the attrs object – like so:

   µ.attrs.onclick = function (vnode, handler, attrs) {
       // log all onclick handlers
       console.log( 'binding', handler, ' to ', vnode );
       attrs.onclick = handler;
   }

2. A Transformation function may return a value other than undefined, which instantly replaces the original virtual node, and no further processing is performed. (See discussion.) Thus you should avoid writing transformations that cause immediate side-effects outside the virtual-node itself or its attrs, as the original virtual-node might never land in the DOM, or have it's onremove called.

Utilities:

• µ.transform( vnode ) Performs post-hoc attr transformation on an existing vnode.

  var vanillaVnode = m('p', { ontransitionend:myFunc }, 'Content');
  var shinyVnode = µ.transform( vanillaVnode );