Deservicify core (#2458)
* De-servicify router (mostly) Still uses the redraw service, but it no longer has an intermediate service of its own. Also, did a *lot* of test deduplication in this. About 30-40% of the router service tests were already tested on the main router API instance itself. Bundle size decreased from 9560 to 9548 bytes min+gzip. * Merge `m.mount` + `m.redraw`, update router Simplifies the router and redraw mechanism, and makes it much easier to keep predictable. Bundle size down to 9433 bytes min+gzip, docs updated accordingly. * Make `mithril/render` just return the `m.render` function directly. * Deservicify `m.render`, revise `m.route` - You now have to use `mithril/render/render` directly if you want an implicit redraw function. (This will likely be going away in v3.) - Revise `m.route` to only `key` components * Add `redraw` to `m.render`, deservicify requests * Test error logging * Update docs + changelog [skip ci]
This commit is contained in:
parent
db277217f8
commit
1f4b2cf49a
60 changed files with 1212 additions and 1393 deletions
|
|
@ -3,6 +3,7 @@
|
|||
- [Description](#description)
|
||||
- [Signature](#signature)
|
||||
- [How it works](#how-it-works)
|
||||
- [Headless mounts](#headless-mounts)
|
||||
- [Performance considerations](#performance-considerations)
|
||||
- [Differences from m.render](#differences-from-mrender)
|
||||
|
||||
|
|
@ -61,6 +62,35 @@ Running `mount(element, OtherComponent)` where `element` is a current mount poin
|
|||
|
||||
Using `m.mount(element, null)` on an element with a previously mounted component unmounts it and cleans up Mithril internal state. This can be useful to prevent memory leaks when removing the `root` node manually from the DOM.
|
||||
|
||||
#### Headless mounts
|
||||
|
||||
In certain more advanced situations, you may want to subscribe and listen for [redraws](autoredraw.md) without rendering anything to the screen. This can be done using a headless mount, created by simply invoking `m.mount` with an element that's not added to the live DOM tree and putting all your useful logic in the component you're mounting with. You still need a `view` in your component, just it doesn't have to return anything useful and it can just return a junk value like `null` or `undefined`.
|
||||
|
||||
```javascript
|
||||
var elem = document.createElement("div")
|
||||
|
||||
// Subscribe
|
||||
m.mount(elem, {
|
||||
oncreate: function() {
|
||||
// once added
|
||||
},
|
||||
onupdate: function() {
|
||||
// on each redraw
|
||||
},
|
||||
onremove: function() {
|
||||
// clean up whatever you need
|
||||
},
|
||||
|
||||
// Necessary boilerplate
|
||||
view: function () {},
|
||||
})
|
||||
|
||||
// Unsubscribe
|
||||
m.mount(elem, null)
|
||||
```
|
||||
|
||||
There's no need to worry about other mount roots. Multiple roots are supported and they won't step on each other. You can even do the above in a component when integrating with another framework, and it won't be a problem.
|
||||
|
||||
---
|
||||
|
||||
### Performance considerations
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue