Remove m.prop + m.withAttr (MithrilJS#2317)

* Remove `m.prop` + `m.withAttr`

- For many uses, `m.withAttr` is *more* verbose than just directly using
  an event handler
- If you're using it with a bound callback, you're literally wasting a
  single character in the human readable version (and you're *saving*
  them in the minified output).
- It sometimes obscures your intent, if overused.
- Functions are easier to compress than `m.withAttr`, resulting in
  slightly smaller bundles.
- `m.withAttr` is overused anyways.
- `m.prop` is basically useless without `m.withAttr`, and the API
  doesn't have the same benefits it had with 0.2.x.

* Update changelog

Author: dead-claudia

docs/api.md

@@ -121,48 +121,6 @@ var querystring = m.buildQueryString({a: "1", b: "2"})
 
 ---
 
-#### m.withAttr(attrName, callback) - [docs](withAttr.md)
-
-```javascript
-var state = {
-	value: "",
-	setValue: function(v) {state.value = v}
-}
-
-var Component = {
-	view: function() {
-		return m("input", {
-			oninput: m.withAttr("value", state.setValue),
-			value: state.value,
-		})
-	}
-}
-
-m.mount(document.body, Component)
-```
-
----
-
-#### m.prop(initial) - [docs](prop.md)
-
-```javascript
-var Component = {
-	oninit: function(vnode) {
-		vnode.state.current = m.prop("")
-	},
-	view: function(vnode) {
-		return m("input", {
-			oninput: function(ev) { vnode.state.current.set(ev.target.value) },
-			value: vnode.state.current.get(),
-		})
-	}
-}
-
-m.mount(document.body, Component)
-```
-
----
-
 #### m.trust(htmlString) - [docs](trust.md)
 
 ```javascript

docs/change-log.md

@@ -33,6 +33,7 @@
 - render: simplify component removal ([#2214](https://github.com/MithrilJS/mithril.js/pull/2214))
 - cast className using toString ([#2309](https://github.com/MithrilJS/mithril.js/pull/2309))
 - render: call attrs' hooks first, with express exception of `onbeforeupdate` to allow attrs to block components from even diffing ([#2297](https://github.com/MithrilJS/mithril.js/pull/2297))
+- API: `m.withAttr` removed. ([#2317](https://github.com/MithrilJS/mithril.js/pull/2317))
 
 #### News
 
@@ -47,7 +48,6 @@
 - API: add support for raw SVG in `m.trust()` string ([#2097](https://github.com/MithrilJS/mithril.js/pull/2097))
 - render/core: remove the DOM nodes recycling pool ([#2122](https://github.com/MithrilJS/mithril.js/pull/2122))
 - render/core: revamp the core diff engine, and introduce a longest-increasing-subsequence-based logic to minimize DOM operations when re-ordering keyed nodes.
-- API: Introduction of `m.prop()` ([#2268](https://github.com/MithrilJS/mithril.js/pull/2268))
 - docs: Emphasize Closure Components for stateful components, use them for all stateful component examples.
 - stream: Add `stream.lift` as a user-friendly alternative to `merge -> map` or `combine` [#1944](https://github.com/MithrilJS/mithril.js/issues/1944)
 - API: ES module bundles are now available for `mithril` and `mithril/stream` ([#2194](https://github.com/MithrilJS/mithril.js/pull/2194) [@porsager](https://github.com/porsager)).

docs/components.md

@@ -365,8 +365,14 @@ var Login = {
 	login: function() {/*...*/},
 	view: function() {
 		return m(".login", [
-			m("input[type=text]", {oninput: m.withAttr("value", this.setUsername.bind(this)), value: this.username}),
-			m("input[type=password]", {oninput: m.withAttr("value", this.setPassword.bind(this)), value: this.password}),
+			m("input[type=text]", {
+				oninput: function (e) { this.setUsername(e.target.value) },
+				value: this.username,
+			}),
+			m("input[type=password]", {
+				oninput: function (e) { this.setPassword(e.target.value) },
+				value: this.password,
+			}),
 			m("button", {disabled: !this.canSubmit(), onclick: this.login}, "Login"),
 		])
 	}
@@ -411,11 +417,11 @@ var Login = {
 	view: function() {
 		return m(".login", [
 			m("input[type=text]", {
-				oninput: m.withAttr("value", Auth.setUsername),
+				oninput: function (e) { Auth.setUsername(e.target.value) },
 				value: Auth.username
 			}),
 			m("input[type=password]", {
-				oninput: m.withAttr("value", Auth.setPassword),
+				oninput: function (e) { Auth.setPassword(e.target.value) },
 				value: Auth.password
 			}),
 			m("button", {

docs/nav-methods.md

@@ -7,8 +7,6 @@
 	- [m.jsonp](jsonp.md)
 	- [m.parseQueryString](parseQueryString.md)
 	- [m.buildQueryString](buildQueryString.md)
-	- [m.withAttr](withAttr.md)
-	- [m.prop](prop.md)
 	- [m.trust](trust.md)
 	- [m.fragment](fragment.md)
 	- [m.redraw](redraw.md)

docs/prop.md

@@ -383,7 +383,10 @@ var Form = {
 	},
 	view: function() {
 		return m("form", [
-			m("input[placeholder='Search']", {oninput: m.withAttr("value", function(v) {state.term = v}), value: state.term}),
+			m("input[placeholder='Search']", {
+				oninput: function (e) { state.term = e.target.value },
+				value: state.term
+			}),
 			m("button", {onclick: state.search}, "Search")
 		])
 	}
@@ -589,8 +592,14 @@ var Auth = {
 var Login = {
 	view: function() {
 		return m("form", [
-			m("input[type=text]", {oninput: m.withAttr("value", Auth.setUsername), value: Auth.username}),
-			m("input[type=password]", {oninput: m.withAttr("value", Auth.setPassword), value: Auth.password}),
+			m("input[type=text]", {
+				oninput: function (e) { Auth.setUsername(e.target.value) },
+				value: Auth.username
+			}),
+			m("input[type=password]", {
+				oninput: function (e) { Auth.setPassword(e.target.value) },
+				value: Auth.password
+			}),
 			m("button[type=button]", {onclick: Auth.login}, "Login")
 		])
 	}

docs/route.md

@@ -471,12 +471,12 @@ module.exports = {
 			}, [
 			m("label.label", "First name"),
 			m("input.input[type=text][placeholder=First name]", {
-				oninput: m.withAttr("value", function(value) {User.current.firstName = value}),
+				oninput: function (e) {User.current.firstName = e.target.value},
 				value: User.current.firstName
 			}),
 			m("label.label", "Last name"),
 			m("input.input[placeholder=Last name]", {
-				oninput: m.withAttr("value", function(value) {User.current.lastName = value}),
+				oninput: function (e) {User.current.lastName = e.target.value},
 				value: User.current.lastName
 			}),
 			m("button.button[type=submit]", "Save"),

docs/simple-application.md

@@ -306,15 +306,15 @@ In the example above, the `users` stream is populated with the response data whe
 
 #### Bidirectional bindings
 
-Streams can also be populated from other higher order functions, such as [`m.withAttr`](withAttr.md)
+Streams can also be populated from event callbacks and similar.
 
 ```javascript
 // a stream
 var user = stream("")
 
 // a bi-directional binding to the stream
 m("input", {
-	oninput: m.withAttr("value", user),
+	oninput: function (e) { user(e.target.value) },
 	value: user()
 })
 ```