version bump

multi-island support
typos
react comparison in home
make id change force element recreation

docs/change-log.md

@@ -1,7 +1,17 @@
 ## Change Log
 
+[v0.1.9](/mithril/archive/v0.1.9) - maintenance
+
+### News:
+
+-	added support for multi-island apps [#34](https://github.com/lhorie/mithril.js/issues/34)
+
+---
+
 [v0.1.8](/mithril/archive/v0.1.8) - maintenance
 
+### News:
+
 -	Mock now contains a basic `insertAdjacentHTML` implementation to enable better testing of `m.trust` / `m.render` interactions
 
 ### Bug Fixes:

docs/getting-started.md

@@ -254,7 +254,7 @@ onchange: function(e) {
 }
 ```
 
-The difference, aside from the cosmetic avoidance of anonymous functions, is that the `m.withAttr` idiom also takes care of catching the correct even target and selecting the appropriate source of the data - i.e. whether it should come from a javascript property or from `DOMElement::getAttribute()`
+The difference, aside from the cosmetic avoidance of anonymous functions, is that the `m.withAttr` idiom also takes care of catching the correct event target and selecting the appropriate source of the data - i.e. whether it should come from a javascript property or from `DOMElement::getAttribute()`
 
 ---
 
@@ -436,7 +436,7 @@ Idiomatic Mithril code is meant to apply good programming conventions and be eas
 
 In the application above, notice how the Todo class can easily be moved to a different module if code re-organization is required.
 
-Todos are self-container and their data aren't tied to the DOM like in typical jQuery based code. The Todo class API is reusable and unit-test friendly, and in addition, it's a plain-vanilla Javascript class which requires almost no framework-specific learning curve.
+Todos are self-contained and their data aren't tied to the DOM like in typical jQuery based code. The Todo class API is reusable and unit-test friendly, and in addition, it's a plain-vanilla Javascript class which requires almost no framework-specific learning curve.
 
 [`m.prop`](mithril.prop.md) is a simple but surprisingly versatile tool: it's composable, it enables [uniform data access](http://en.wikipedia.org/wiki/Uniform_data_access) and allows a higher degree of decoupling when major refactoring is required.
 

docs/integration.md

@@ -102,3 +102,21 @@ The `dashboard` module in the example shows how a developer would consume the se
 
 You should always document integration components so that others can find out what attribute parameters can be used to initialize the component.
 
+---
+
+## Integrating to legacy code
+
+If you need to add separate widgets to different places on a same page, you can simply initialize each widget as you would a regular Mithril application (i.e. use `m.render`, `m.module` or `m.route`).
+
+There's just one caveat: while simply initializing multiple "islands" in this fashion works, their initialization calls are not aware of each other and can cause redraws too frequently. To optimize rendering, you should add a `m.startComputation` call before the first widget initialization call, and a `m.endComputation` after the last widget initialization call in each execution thread.
+
+```
+m.startComputation()
+
+m.module(document.getElementById("widget1-container"), widget1)
+
+m.module(document.getElementById("widget2-container"), widget1)
+
+m.endComputation()
+```
+

docs/layout/index.html

@@ -133,9 +133,10 @@ m.module(document.getElementById("example"), app);
 							<h3>Loading</h3>
 							<table>
 								<tr><td><a href="comparisons/mithril.parsing.html">Mithril</a></td><td><span class="bar" style="background:#161;width:1%;"></span> 0.28ms</td></tr>
-								<tr><td><a href="comparisons/jquery.parsing.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:35%;"></span> 13.11ms</td></tr>
-								<tr><td><a href="comparisons/backbone.parsing.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:50%;"></span> 18.54ms</td></tr>
-								<tr><td><a href="comparisons/angular.parsing.html">Angular</a></td><td><span class="bar" style="background:#c33;width:20%;"></span> 7.49ms</td></tr>
+								<tr><td><a href="comparisons/jquery.parsing.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:26%;"></span> 13.11ms</td></tr>
+								<tr><td><a href="comparisons/backbone.parsing.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:37%;"></span> 18.54ms</td></tr>
+								<tr><td><a href="comparisons/angular.parsing.html">Angular</a></td><td><span class="bar" style="background:#c33;width:14%;"></span> 7.49ms</td></tr>
+								<tr><td><a href="comparisons/react.parsing.html">React</a></td><td><span class="bar" style="background:#6af;width:50%;"></span> 24.99ms</td></tr>
 							</table>
 						</div>
 						<div class="col(8,8,12)">
@@ -145,6 +146,7 @@ m.module(document.getElementById("example"), app);
 								<tr><td><a href="comparisons/jquery.rendering.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:17%;"></span> 40.27ms</td></tr>
 								<tr><td><a href="comparisons/backbone.rendering.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:10%;"></span> 23.05ms</td></tr>
 								<tr><td><a href="comparisons/angular.rendering.html">Angular</a></td><td><span class="bar" style="background:#c33;width:50%;"></span> 118.63ms</td></tr>
+								<tr><td><a href="comparisons/react.rendering.html">React</a></td><td><span class="bar" style="background:#6af;width:33%;"></span> 79.65ms</td></tr>
 							</table>
 						</div>
 					</div>
@@ -165,6 +167,7 @@ m.module(document.getElementById("example"), app);
 							<a href="comparisons/jquery.safety.html">jQuery</a> <em class="error">(fail) &#x2717;</em><br />
 							<a href="comparisons/backbone.safety.html">Backbone</a> <em class="error">(fail) &#x2717;</em><br />
 							<a href="comparisons/angular.safety.html">Angular</a> <em class="success">(pass) &#x2713;</em><br />
+							<a href="comparisons/react.safety.html">React</a> <em class="success">(pass) &#x2713;</em><br />
 						</div>
 					</div>
 				</div>

docs/mithril.computation.md

@@ -109,6 +109,24 @@ var doSomething = function(callback) {
 
 ---
 
+## Integrating to legacy code
+
+If you need to add separate widgets to different places on a same page, you can simply initialize each widget as you would a regular Mithril application (i.e. use `m.render`, `m.module` or `m.route`).
+
+There's just one caveat: while simply initializing multiple "islands" in this fashion works, their initialization calls are not aware of each other and can cause redraws too frequently. To optimize rendering, you should add a `m.startComputation` call before the first widget initialization call, and a `m.endComputation` after the last widget initialization call in each execution thread.
+
+```
+m.startComputation()
+
+m.module(document.getElementById("widget1-container"), widget1)
+
+m.module(document.getElementById("widget2-container"), widget1)
+
+m.endComputation()
+```
+
+---
+
 ### Signature
 
 [How to read signatures](how-to-read-signatures.md)

docs/mithril.md

@@ -79,7 +79,7 @@ Here's a less trivial example:
 ```javascript
 var links = [
     {title: "item 1", url: "/item1"},
-    {title: "item 2", url: "/item2"}
+    {title: "item 2", url: "/item2"},
     {title: "item 3", url: "/item3"}
 ];
 
@@ -87,7 +87,7 @@ m.render(document.body, [
     m("ul.nav", [
         m("li", links.map(function(link) {
             return m("a", {href: link.url}, link.title)
-        })
+        }))
     ])
 ]);
 ```