94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
## Compiling Templates
|
|
|
|
If performance is absolutely critical, you can optionally pre-compile templates that use `m()` by running the [`template-compiler.sjs`](tools/template-compiler.sjs) macro with [Sweet.js](https://github.com/mozilla/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`](mithril.render.md))
|
|
|
|
For example, given the following template:
|
|
|
|
```javascript
|
|
var view = function() {
|
|
return m("a", {href: "http://google.com"}, "test");
|
|
}
|
|
```
|
|
|
|
It would be compiled into:
|
|
|
|
```javascript
|
|
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](http://nodejs.org) 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](http://gruntjs.com), 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`
|
|
|
|
```javascript
|
|
{
|
|
"name": "project-name-goes-here",
|
|
"version": "0.0.0", //must follow this format
|
|
"devDependencies": {
|
|
"grunt-sweet.js": "*"
|
|
}
|
|
}
|
|
```
|
|
|
|
`Gruntfile.js`
|
|
|
|
```javascript
|
|
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](https://github.com/natefaubion/grunt-sweet.js)
|