forked from agsdot/mithril
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tools.html
113 lines (112 loc) · 6.53 KB
/
tools.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html>
<head>
<title>Tools - Mithril</title>
<meta name="description" value="Mithril.js - a Javascript Framework for Building Brilliant Applications" />
<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="community.html">Community</a>
<a href="http://lhorie.github.io/mithril-blog">Learn</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="auto-redrawing.html">The Auto-Redrawing System</a></li>
<li><a href="integration.html">Integrating with Other Libraries</a></li>
<li><a href="optimizing-performance.html">Compiling Templates</a></li>
</ul>
<h2 id="misc">Misc</h2>
<ul>
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
<li><a href="benchmarks.html">Benchmarks</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="tools">Tools</h2>
<h3 id="html-to-mithril-template-converter">HTML-to-Mithril Template Converter</h3>
<p>If you already have your HTML written and want to convert it into a Mithril template, you can use the tool below for one-off manual conversion.</p>
<p><a href="tools/template-converter.html">Template Converter</a></p>
<hr>
<h3 id="automatic-html-to-mithril-template-converter">Automatic HTML-to-Mithril Template Converter</h3>
<p>There's a tool called <a href="https://github.com/insin/msx">MSX by Jonathan Buchanan</a> that allows you to write templates using HTML syntax, and then automatically compile them to Javascript when files change.</p>
<p>It is useful for teams where styling and functionality are done by different people, and for those who prefer to maintain templates in HTML syntax.</p>
<p>The tool allows you to write code like this:</p>
<pre><code class="lang-javascript">todo.view = function() {
return <html>
<body>
<input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
<button onclick={app.vm.add}>Add</button>
</body>
</html>
};
</code></pre>
<p>Note, however, that since the code above is not valid Javascript, this syntax can only be used with a preprocessor build tool such as the provided <a href="http://gulpjs.com">Gulp.js</a> script.</p>
<p>This tool is also available as a <a href="https://github.com/mrsweaters/mithril-rails">Rails gem</a>, created by Jordan Humphreys.</p>
<hr>
<h3 id="mithril-template-compiler">Mithril Template Compiler</h3>
<p>You can pre-compile Mithril templates to make them run faster. For more information see this page:</p>
<p><a href="optimizing-performance.html#compiling-templates">Compiling Templates</a></p>
<hr>
<h3 id="typescript-support">Typescript Support</h3>
<p>There's a type definition file that you can use to add Mithril support to Typescript</p>
<p><a href="mithril.d.ts">mithril.d.ts</a></p>
<p>You can use it by adding a reference to your Typescript files. This will allow the compiler to type-check calls to the Mithril API.</p>
<pre><code class="lang-javascript">/// <reference path="mithril.d.ts" />
</code></pre>
<hr>
<h3 id="internet-explorer-compatibility">Internet Explorer Compatibility</h3>
<p>Mithril relies on some ECMAScript 5 features, namely: <code>Array::indexOf</code>, <code>Array::map</code> and <code>Object::keys</code>, as well as the <code>JSON</code> object. Internet Explorer 8 lacks native support for some of these features.</p>
<p>The easiest way to polyfill these features is to include this script:</p>
<pre><code class="lang-javascript"><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.3/es5-shim.min.js"></script>
</code></pre>
<p>This will provide all the polyfills required for the browser. You can alternatively include only specific polyfills:</p>
<pre><code class="lang-markup"><script src="http://cdn.polyfill.io/v1/polyfill.min.js?features=Array.prototype.indexOf,Object.keys,Function.prototype.bind,Array.prototype.forEach,JSON"></script>
</code></pre>
<p>You can also use other polyfills to support these features in IE7.</p>
<ul>
<li><p><a href="https://github.com/es-shims/es5-shim">ES5 Shim</a> or Mozilla.org's <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">Array::indexOf</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">Array::map</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object::keys</a></p>
</li>
<li><p><a href="https://github.com/douglascrockford/JSON-js/blob/master/json2.js">JSON2.js</a></p>
</li>
</ul>
<p>Mithril also has a dependency on XMLHttpRequest. If you wish to support IE6, you'll need <a href="https://gist.github.com/Contra/2709462">a shim for it</a>. IE7 and lower do not support cross-domain AJAX requests.</p>
<p>In addition, note that most <code>m.route</code> modes rely on <code>history.pushState</code> in order to allow moving from one page to another without a browser refresh. <a href="http://caniuse.com/#search=pushstate">IE9 and lower</a> do not support this feature and will gracefully degrade to page refreshes instead.</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>