From ed3f3f06867a19a24302836414dc1edf6796defb Mon Sep 17 00:00:00 2001
From: Leo Horie <leohorie@hotmail.com>
Date: Thu, 23 Jul 2015 23:43:19 -0400
Subject: [PATCH] document component shorthand syntax

---
 docs/change-log.md        |  1 +
 docs/mithril.component.md | 22 ++++++++++++++++++++++
 docs/mithril.md           | 26 ++++++++++++++++++++++++++
 mithril.d.ts              | 16 ++++++++++++++++
 4 files changed, 65 insertions(+)

diff --git a/docs/change-log.md b/docs/change-log.md
index 07532496..5b4e5539 100644
--- a/docs/change-log.md
+++ b/docs/change-log.md
@@ -7,6 +7,7 @@
 -	added `catch` to promises
 -	improvements and fixes in the documentation and wiki
 -	large refactor to take better advantage of Chrome js optimizations and improve source code readability (thanks to @impinball)
+-	`m(component, ...args)` can now be used as a shorthand for `m.component(component, ...args)`
 
 ### Bug Fixes:
 
diff --git a/docs/mithril.component.md b/docs/mithril.component.md
index 3aa7cdd6..b3948a36 100644
--- a/docs/mithril.component.md
+++ b/docs/mithril.component.md
@@ -6,6 +6,7 @@
 	- [Optional controller](#optional-controller)
 	- [Controller as a class constructor](#controller-as-a-class-constructor)
 	- [Notes on the view function](#notes-on-the-view-function)
+	- [Shorthand syntax](#shorthand-syntax)
 - [Parameterized components](#parameterized-components)
 - [Nesting components](#nesting-components)
 - [Dealing with state](#dealing-with-state)
@@ -148,6 +149,27 @@ The view function is run again whenever a redraw is required (i.e. whenever even
 
 It may sound expensive to recompute an entire view any time there's a change to be displayed, but this operation actually turns out to be quite fast, compared to rendering strategies used by older frameworks. Mithril's diffing algorithm makes sure expensive DOM operations are performed only if absolutely necessary, and as an extra benefit, the global nature of the redraw makes it easy to reason about and troubleshoot the state of the application.
 
+### Shorthand syntax
+
+If the first argument to `m()` is a component, it acts as an alias of `m.component()`
+
+```javascript
+var MyComponent = {
+	controller: function() {
+		return {greeting: "hello"}
+	},
+	view: function(ctrl, args) {
+		return m("h1", ctrl.greeting + " " + args.data)
+	}
+}
+
+m.render(document.body, [
+	//the two lines below are equivalent
+	m(component, {data: "world"}),
+	m.component(component, {data: "world"})
+])
+```
+
 ---
 
 ### Parameterized components
diff --git a/docs/mithril.md b/docs/mithril.md
index b093353d..95374a80 100644
--- a/docs/mithril.md
+++ b/docs/mithril.md
@@ -12,6 +12,7 @@
 - [SVG](#svg)
 - [Dealing with focus](#dealing-with-focus)
 - [Dealing with sorting and deleting in lists](#dealing-with-sorting-and-deleting-in-lists)
+- [Component shorthand](#component-shorthand)
 - [Signature](#signature)
 - [The `config` attribute](#the-config-attribute)
 ---
@@ -464,6 +465,31 @@ You should always use keys if you need to sort lists, remove items from them or
 
 ---
 
+### Component Shorthand
+
+If the first argument to `m()` is a component, it acts as an alias of `m.component()`
+
+```javascript
+var MyComponent = {
+	controller: function() {
+		return {greeting: "hello"}
+	},
+	view: function(ctrl, args) {
+		return m("h1", ctrl.greeting + " " + args.data)
+	}
+}
+
+m.render(document.body, [
+	//the two lines below are equivalent
+	m(component, {data: "world"}),
+	m.component(component, {data: "world"})
+])
+```
+
+See [components](mithril.component.md) for more information.
+
+---
+
 ### Signature
 
 [How to read signatures](how-to-read-signatures.md)
diff --git a/mithril.d.ts b/mithril.d.ts
index 3db03036..d89dde59 100644
--- a/mithril.d.ts
+++ b/mithril.d.ts
@@ -27,6 +27,22 @@ declare module _mithril {
 				MithrilVirtualElement<T> |
 				MithrilComponent<T>>
 		): MithrilVirtualElement<T>;
+		
+		/**
+		* Initializes a component for use with m.render, m.mount, etc.
+		*
+		* @param component A component.
+		* @param args Arguments to optionally pass to the component.
+		* @return A component.
+		*
+		* @see m.render
+		* @see m.mount
+		* @see m
+		*/
+		<T extends MithrilController>(
+			component: MithrilComponent<T>,
+			...args: any[]
+		): MithrilComponent<T>;
 
 		/**
 		* Creates a virtual element for use with m.render, m.mount, etc.