mithril
Version:
A framework for building brilliant applications
113 lines (110 loc) • 5.67 kB
HTML
<html>
<head>
<title>Mithril</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet">
<link href="lib/prism/prism.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="container">
<a href="index.html" class="logo"><span>○</span> Mithril</a>
<a href="getting-started.html">Guide</a>
<a href="mithril.html">API</a>
<a href="mithril.min.zip">Download</a>
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
</nav>
<div class="deprecated">
WARNING: This documentation is for an old version of mithril!
Please see the <a href="https://mithril.js.org/">current docs</a> for more accurate info.
</div></header>
<main>
<section class="content">
<div class="container">
<div class="row">
<div class="col(3,3,12)">
<h2 id="core-topics">Core Topics</h2>
<ul>
<li><a href="installation.html">Installation</a></li>
<li><a href="getting-started.html">Getting Started</a></li>
<li><a href="routing.html">Routing</a></li>
<li><a href="web-services.html">Web Services</a></li>
<li><a href="components.html">Components</a></li>
</ul>
<h2 id="advanced-topics.html">Advanced Topics</h2>
<ul>
<li><a href="compiling-templates.html">Compiling Templates</a></li>
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
<li><a href="integration.html">Integrating with Other Libraries</a></li>
</ul>
<h2 id="misc">Misc</h2>
<ul>
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
<li><a href="practices.html">Good Practices</a></li>
<li><a href="tools.html">Useful Tools</a></li>
</ul>
</div>
<div class="col(9,9,12)">
<h2 id="compiling-templates">Compiling Templates</h2>
<p>If performance is absolutely critical, you can optionally pre-compile templates that use <code>m()</code> by running the <a href="tools/template-compiler.sjs"><code>template-compiler.sjs</code></a> macro with <a href="https://github.com/mozilla/sweet.js">Sweet.js</a></p>
<p>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 <a href="mithril.render.html"><code>m.render</code></a>)</p>
<p>For example, given the following template:</p>
<pre><code class="lang-javascript">var view = function() {
return m("a", {href: "http://google.com"}, "test");
}</code></pre>
<p>It would be compiled into:</p>
<pre><code class="lang-javascript">var view = function() {
return {tag: "a", attrs: {href: "http://google.com"}, children: "test"};
}</code></pre>
<p>Note that compiled templates are meant to be generated by an automated build process and are not meant to be human editable.</p>
<hr>
<h3 id="installing-nodejs-and-sweetjs-for-one-off-compilations">Installing NodeJS and SweetJS for one-off compilations</h3>
<p>SweetJS requires a <a href="http://nodejs.org">NodeJS</a> environment. To install it, go to its website and use the installer provided.</p>
<p>To install SweetJS, NodeJS provides a command-line package manager tool. In a command line, type:</p>
<pre><code>npm install -g sweet.js</code></pre>
<p>To compile a file, type:</p>
<pre><code>sjs --module /mithril.compile.sjs --output <output-filename>.js <input-filename>.js</code></pre>
<hr>
<h3 id="automating-compilation">Automating Compilation</h3>
<p>If you want to automate compilation, you can use <a href="http://gruntjs.com">GruntJS</a>, a task automation tool. If you're not familiar with GruntJS, you can find a tutorial on their website.</p>
<p>Assuming NodeJS is already installed, run the following command to install GruntJS:</p>
<pre><code>npm install -g grunt-cli</code></pre>
<p>Once installed, create two files in the root of your project, <code>package.json</code> and <code>Gruntfile.js</code></p>
<p><code>package.json</code></p>
<pre><code class="lang-javascript">{
"name": "project-name-goes-here",
"version": "0.0.0", //must follow this format
"devDependencies": {
"grunt-sweet.js": "*"
}
}</code></pre>
<p><code>Gruntfile.js</code></p>
<pre><code class="lang-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']);
}</code></pre>
<p>Make sure to replace the <code>project-name-goes-here</code> and <code>destination-folder-goes-here</code> placeholders with appropriate values.</p>
<p>To run the automation task, run the following command from the root folder of your project:</p>
<pre><code>grunt</code></pre>
<p>More documentation on the grunt-sweet.js task and its options <a href="https://github.com/natefaubion/grunt-sweet.js">can be found here</a></p>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
<br>© 2014 Leo Horie
</div>
</footer>
<script src="lib/prism/prism.js"></script>
</body>
</html>