Mithril

Core Topics

Advanced Topics

Misc

Compiling Templates

If performance is absolutely critical, you can optionally pre-compile templates that use m() by running the template-compiler.sjs macro with Sweet.js

Compiling a template transforms the nested function calls into a raw virtual DOM tree (which is merely a collection of native Javascript objects that is ready to be rendered via m.render)

For example, given the following template:

var view = function() {
    return m("a", {href: "http://google.com"}, "test");
}

It would be compiled into:

var view = function() {
    return {tag: "a", attrs: {href: "http://google.com"}, children: "test"};
}

Note that compiled templates are meant to be generated by an automated build process and are not meant to be human editable.

Installing NodeJS and SweetJS for one-off compilations

SweetJS requires a NodeJS environment. To install it, go to its website and use the installer provided.

To install SweetJS, NodeJS provides a command-line package manager tool. In a command line, type:

npm install -g sweet.js

To compile a file, type:

sjs --module /mithril.compile.sjs --output <output-filename>.js <input-filename>.js

Automating Compilation

If you want to automate compilation, you can use GruntJS, a task automation tool. If you're not familiar with GruntJS, you can find a tutorial on their website.

Assuming NodeJS is already installed, run the following command to install GruntJS:

npm install -g grunt-cli

Once installed, create two files in the root of your project, package.json and Gruntfile.js

package.json

{
    "name": "project-name-goes-here",
    "version": "0.0.0", //must follow this format
    "devDependencies": {
        "grunt-sweet.js": "*"
    }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        sweetjs: {
            modules: ["mithril.compile.sjs"],
            compile: {expand: true, cwd: ".", src: "**/*.js", dest: "destination-folder-goes-here/"}
        }
    });

    grunt.loadNpmTasks('grunt-sweet.js');

    grunt.registerTask('default', ['sweetjs']);
}

Make sure to replace the project-name-goes-here and destination-folder-goes-here placeholders with appropriate values.

To run the automation task, run the following command from the root folder of your project:

grunt

More documentation on the grunt-sweet.js task and its options can be found here