Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove m.prop + m.withAttr #2317

Merged
merged 2 commits into from Dec 1, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 0 additions & 42 deletions docs/api.md
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/change-log.md
Expand Up @@ -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

Expand All @@ -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)).
Expand Down
14 changes: 10 additions & 4 deletions docs/components.md
Expand Up @@ -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}),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good grief, what a mess this was. A large part of the beauty of closures by default will be removing all these horrid custom component methods and this references.

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"),
])
}
Expand Down Expand Up @@ -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", {
Expand Down
2 changes: 0 additions & 2 deletions docs/nav-methods.md
Expand Up @@ -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)
Expand Down
152 changes: 0 additions & 152 deletions docs/prop.md

This file was deleted.

15 changes: 12 additions & 3 deletions docs/route.md
Expand Up @@ -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}),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mind-boggling this was seen as useful at the time.

m("input[placeholder='Search']", {
oninput: function (e) { state.term = e.target.value },
value: state.term
}),
m("button", {onclick: state.search}, "Search")
])
}
Expand Down Expand Up @@ -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")
])
}
Expand Down
4 changes: 2 additions & 2 deletions docs/simple-application.md
Expand Up @@ -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"),
Expand Down
4 changes: 2 additions & 2 deletions docs/stream.md
Expand Up @@ -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()
})
```
Expand Down