version bump
This commit is contained in:
Leo Horie
parent
26ee6975a0
commit
e34cc1fc4a
55 changed files with 5925 additions and 1 deletions
110
archive/v0.1.3/compiling-templates.html
Normal file
110
archive/v0.1.3/compiling-templates.html
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!doctype 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>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue