changes in the docs: rename modules to components, change idiomatic controller and view usage

docs/integration.md

@@ -8,18 +8,25 @@ The example below shows a simple component that integrates with the [select2 lib
 
 ```javascript
 //Select2 component (assumes both jQuery and Select2 are included in the page)
-
-/** @namespace */
-var select2 = {};
+var Select2 = m.component({
+	//this view implements select2's `<select>` progressive enhancement mode
+	view: function(ctrl) {
+		return m("select", {config: select2.config(ctrl)}, [
+			ctrl.data.map(function(item) {
+				return m("option", {value: item.id}, item.name)
+			})
+		]);
+	}
+});
 
 /**
-select2 config factory. The params in this doc refer to properties of the `ctrl` argument
+Select2 config factory. The params in this doc refer to properties of the `ctrl` argument
 @param {Object} data - the data with which to populate the <option> list
 @param {number} value - the id of the item in `data` that we want to select
 @param {function(Object id)} onchange - the event handler to call when the selection changes.
 	`id` is the the same as `value`
 */
-select2.config = function(ctrl) {
+Select2.config = function(ctrl) {
 	return function(element, isInitialized) {
 		var el = $(element);
 		
@@ -44,42 +51,38 @@ select2.config = function(ctrl) {
 	}
 }
 
-//this view implements select2's `<select>` progressive enhancement mode
-select2.view = function(ctrl) {
-	return m("select", {config: select2.config(ctrl)}, [
-		ctrl.data.map(function(item) {
-			return m("option", {value: item.id}, item.name)
-		})
-	]);
-};
-
 //end component
 
 
 
 //usage
-var dashboard = {};
+var Dashboard = m.component({
+	controller: function() {
+		//list of users to show
+		var data = [{id: 1, name: "John"}, {id: 2, name: "Mary"}, {id: 3, name: "Jane"}]
+		
+		return {
+			data: data,
+			
+			//select Mary
+			currentUser: data[1],
+			
+			changeUser: function(id) {
+				console.log(id)
+			}
+		}
+	},
 
-dashboard.controller = function() {
-	//list of users to show
-	this.data = [{id: 1, name: "John"}, {id: 2, name: "Mary"}, {id: 3, name: "Jane"}];
-	
-	//select Mary
-	this.currentUser = this.data[1];
-	
-	this.changeUser = function(id) {
-		console.log(id)
-	};
-}
+	view: function(ctrl) {
+		return m("div", [
+			m("label", "User:"),
+			Select2({data: ctrl.data, value: ctrl.currentUser.id, onchange: ctrl.changeUser})
+		]);
+	}
+});
 
-dashboard.view = function(ctrl) {
-	return m("div", [
-		m("label", "User:"),
-		select2.view({data: ctrl.data, value: ctrl.currentUser.id, onchange: ctrl.changeUser})
-	]);
-}
 
-m.module(document.body, dashboard);
+m.mount(document.body, Dashboard);
 ```
 
 `select2.config` is a factory that creates a `config` function based on a given controller. We declare this outside of the `select2.view` function to avoid cluttering the template.
@@ -98,7 +101,7 @@ One important note about the `config` method is that you should avoid calling `m
 
 While Mithril technically does support this use case, relying on multiple redraw passes degrades performance and makes it possible to code yourself into an infinite execution loop situation, which is extremely difficult to debug.
 
-The `dashboard` module in the example shows how a developer would consume the select2 component.
+The `dashboard` component in the example shows how a developer would consume the select2 component.
 
 You should always document integration components so that others can find out what attribute parameters can be used to initialize the component.
 
@@ -106,16 +109,16 @@ You should always document integration components so that others can find out wh
 
 ## 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`).
+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.mount` 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.
 
 ```javascript
 m.startComputation()
 
-m.module(document.getElementById("widget1-container"), widget1)
+m.mount(document.getElementById("widget1-container"), Widget1)
 
-m.module(document.getElementById("widget2-container"), widget1)
+m.mount(document.getElementById("widget2-container"), Widget2)
 
 m.endComputation()
 ```