Lessons Learned: Converting JxLib to Mootools 1.3.2

So, during the process of converting JxLib from Mootools 1.2.x to 1.3.2 I discovered a few things that I’d just like to record for posterity…

First, when replacing $defined() compare to both undefined and null as in the following:

if ($defined(variable)){}

should become

if (variable !== undefined && variable !== null){}

originally, I simply compared to undefined and came across a lot of errors. Comparing to null in the same check removed the errors.

Second, don’t use a $ in git commit messages. I replaced the mootools $XX() methods one at a time and wrote the name in the commit log as, for example, $A() and when I viewed the message on github it only had (). I assume that the $ does some kind of replacement in the log message but I can’t find any documentation for that to see if that’s true.

Next, Object.each and Object.keys both use hasOwnProperty() which makes them pretty useless in iterating over objects that are a part of a Mootools Class. The problem is that those objects are a part of the prototype of the Class which makes hasOwnProperty() return false. For example, in Jx.Widget we had this code in Mootools 1.2:

processElements: function(template, classes) {
    var keys = classes.getValues();
    elements = this.processTemplate(template, keys);
    classes.each(function(value, key) {
        if (key != 'elements' && elements.get(value)) {
            this[key] = elements.get(value);
        }
    }, this);
    return elements;
}

Pretty straight forward I think. Unfortunately, classes was really this.classes which was passed in by the calling method. In 1.3.2 this.classes is found on the class’ prototype which made the classes.each loop always have 0 iterations. Instead, we have to do this:

processElements: function(template, classes) {
    var keys = [],
        values = [];
    for (var key in classes){
        if (key !== undefined) {
            values.push(classes[key]);
            keys.push(key);
        }
    }
    elements = this.processTemplate(template, values);
    keys.each(function(key){
        if (key != 'elements' && elements[classes[key]] !== undefined && elements[classes[key]] !== null) {
            this[key] =  elements[classes[key]];
        }
    },this);
    return elements;
}

And finally, always make sure your core and more versions coincide. At one point I was working on the new Widget.List which uses Element.Delegation and kept getting multiple events firing. Came to find out that we had the master of core matched against the 1.3.2.1 of more and BOTH contained the code for Element.Delegation. They were slightly different and were creating multiple events to fire when there should have been one. Moving core to the 1.3.2 tag fixed that issue.