Deduplicate m.route and m.redraw logic (#2453)

- Remove appropriate route change subcriptions when a root is removed
  via `m.mount(root, null)`.
- Don't pollute `onpopstate` and friends - use standard event listeners
  instead.
- Simplify and streamline subscriptions, in preparation of adding a
  `remove` parameter to `m.mount`.
- Change the redraw internals to redraw immediately, with ability to
  cancel via returning a sentinel.
- Change `"bleeding-edge"` for `m.version` in `next` to instead just be
  the latest `m.version`. (If you're using `next`, you should know what
  you're in for.)
- Update tests to be aware of these changes. (Some were failing for
  subtle reasons.)
- Drive-by: remove some uses of `string.charAt(n)` and use `string[n]`
  instead.

docs/change-log.md

@@ -78,6 +78,9 @@
 - route: Declared routes in `m.route` now support `-` and `.` as delimiters for path segments. This means you can have a route like `"/edit/:file.:ext"`. ([#2361](https://github.com/MithrilJS/mithril.js/pull/2361))
     - Previously, this was possible to do in `m.route.set`, `m.request`, and `m.jsonp`, but it was wholly untested for and also undocumented.
 - API: `m.buildPathname` and `m.parsePathname` added. ([#2361](https://github.com/MithrilJS/mithril.js/pull/2361))
+- route: Use `m.mount(root, null)` to unsubscribe and clean up after a `m.route(root, ...)` call. ([#2453](https://github.com/MithrilJS/mithril.js/pull/2453))
+- version: `m.version` returns the previous version string for what's in `next`. ([#2453](https://github.com/MithrilJS/mithril.js/pull/2453))
+    - If you're using `next`, you should hopefully know what you're doing. If you need stability, don't use `next`. (This is also why I'm not labelling it as a breaking change.)
 
 #### Bug fixes
 
@@ -111,6 +114,7 @@
 - request: correct IE workaround for response type non-support ([#2449](https://github.com/MithrilJS/mithril.js/pull/2449) [@isiahmeadows](https://github.com/isiahmeadows))
 - render: correct `contenteditable` check to also check for `contentEditable` property name ([#2450](https://github.com/MithrilJS/mithril.js/pull/2450) [@isiahmeadows](https://github.com/isiahmeadows))
 - docs: clarify valid key usage ([#2452](https://github.com/MithrilJS/mithril.js/pull/2452) [@isiahmeadows](https://github.com/isiahmeadows))
+- route: don't pollute globals ([#2453](https://github.com/MithrilJS/mithril.js/pull/2453) [@isiahmeadows](https://github.com/isiahmeadows))
 
 ---
 

docs/route.md

@@ -24,6 +24,7 @@
 	- [Authentication](#authentication)
 	- [Preloading data](#preloading-data)
 	- [Code splitting](#code-splitting)
+- [Third-party integration](#third-party-integration)
 
 ---
 
@@ -730,3 +731,81 @@ m.route(document.body, "/", {
 	},
 })
 ```
+
+---
+
+### Third-party integration
+
+In certain situations, you may find yourself needing to interoperate with another framework like React. Here's how you do it:
+
+- Define all your routes using `m.route` as normal, but make sure you only use it *once*. Multiple route points are not supported.
+- When you need to remove routing subscriptions, use `m.mount(root, null)`, using the same root you used `m.route(root, ...)` on.
+
+Here's an example with React:
+
+```javascript
+class Child extends React.Component {
+	constructor(props) {
+		super(props)
+		this.root = React.createRef()
+	}
+
+	componentDidMount() {
+		m.route(this.root, "/", {
+			// ...
+		})
+	}
+
+	componentDidUnmount() {
+		m.mount(this.root, null)
+	}
+
+	render() {
+		return <div ref={this.root} />
+	}
+}
+```
+
+And here's the rough equivalent with Vue:
+
+```html
+<div ref="root"></div>
+```
+
+```javascript
+Vue.component("my-child", {
+	template: `<div ref="root"></div>`,
+	mounted: function() {
+		m.route(this.$refs.root, "/", {
+			// ...
+		})
+	},
+	destroyed: function() {
+		m.mount(this.$refs.root, null)
+	},
+})
+```
+
+Technically, there's nothing stopping you from even doing it in a Mithril component, even.
+
+```javascript
+// Don't do this. Use a proper global layout component for each route instead,
+// passing your child vnode/component in the attributes or children.
+function Child() {
+	return {
+		oncreate: function(vnode) {
+			m.route(vnode.dom, "/", {
+				// ...
+			})
+		},
+
+		onremove: function() {
+			m.mount(vnode.dom, null)
+		},
+
+		view: function() {
+			return m("div")
+		},
+	}
+}
+```