Mithril 2 update (#2255)

* Update frontend to Mithril 2

- Update Mithril version to v2.0.4
- Add Typescript typings for Mithril
- Rename "props" to "attrs"; "initProps" to "initAttrs"; "m.prop" to "m.stream"; "m.withAttr" to "utils/withAttr".
- Use Mithril 2's new lifecycle hooks
- SubtreeRetainer has been rewritten to be more useful for the new system
- Utils for forcing page re-initializations have been added (force attr in links, setRouteWithForcedRefresh util)
- Other mechanical changes, following the upgrade guide
- Remove some of the custom stuff in our Component base class
- Introduce "fragments" for non-components that control their own DOM
- Remove Mithril patches, introduce a few new ones (route attrs in <a>; 
- Redesign AlertManagerState `show` with 3 overloads: `show(children)`, `show(attrs, children)`, `show(componentClass, attrs, children)`
- The `affixedSidebar` util has been replaced with an `AffixedSidebar` component

Challenges:
- `children` and `tag` are now reserved, and can not be used as attr names
- Behavior of links to current page changed in Mithril. If moving to a page that is handled by the same component, the page component WILL NOT be re-initialized by default. Additional code to keep track of the current url is needed (See IndexPage, DiscussionPage, and UserPage for examples)
- Native Promise rejections are shown on console when not handled
- Instances of components can no longer be stored. The state pattern should be used instead.

Refs #1821.

Co-authored-by: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Co-authored-by: Matthew Kilgore <tankerkiller125@gmail.com>
Co-authored-by: Franz Liedke <franz@develophp.org>

js/src/forum/components/Composer.js

@@ -11,13 +11,15 @@ import ComposerState from '../states/ComposerState';
  * `show`, `hide`, `close`, `minimize`, `fullScreen`, and `exitFullScreen`.
  */
 export default class Composer extends Component {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     /**
      * The composer's "state".
      *
      * @type {ComposerState}
      */
-    this.state = this.props.state;
+    this.state = this.attrs.state;
 
     /**
      * Whether or not the composer currently has focus.
@@ -45,7 +47,7 @@ export default class Composer extends Component {
 
     return (
       <div className={'Composer ' + classList(classes)}>
-        <div className="Composer-handle" config={this.configHandle.bind(this)} />
+        <div className="Composer-handle" oncreate={this.configHandle.bind(this)} />
         <ul className="Composer-controls">{listItems(this.controlItems().toArray())}</ul>
         <div className="Composer-content" onclick={showIfMinimized}>
           {body.componentClass ? body.componentClass.component({ ...body.attrs, composer: this.state, disabled: classes.minimized }) : ''}
@@ -54,7 +56,7 @@ export default class Composer extends Component {
     );
   }
 
-  config(isInitialized, context) {
+  onupdate() {
     if (this.state.position === this.prevPosition) {
       // Set the height of the Composer element and its contents on each redraw,
       // so that they do not lose it if their DOM elements are recreated.
@@ -64,12 +66,10 @@ export default class Composer extends Component {
 
       this.prevPosition = this.state.position;
     }
+  }
 
-    if (isInitialized) return;
-
-    // Since this component is a part of the global UI that persists between
-    // routes, we will flag the DOM to be retained across route changes.
-    context.retain = true;
+  oncreate(vnode) {
+    super.oncreate(vnode);
 
     this.initializeHeight();
     this.$().hide().css('bottom', -this.state.computedHeight());
@@ -84,36 +84,31 @@ export default class Composer extends Component {
     // When the escape key is pressed on any inputs, close the composer.
     this.$().on('keydown', ':input', 'esc', () => this.state.close());
 
-    const handlers = {};
+    this.handlers = {};
 
     $(window)
-      .on('resize', (handlers.onresize = this.updateHeight.bind(this)))
+      .on('resize', (this.handlers.onresize = this.updateHeight.bind(this)))
       .resize();
 
     $(document)
-      .on('mousemove', (handlers.onmousemove = this.onmousemove.bind(this)))
-      .on('mouseup', (handlers.onmouseup = this.onmouseup.bind(this)));
+      .on('mousemove', (this.handlers.onmousemove = this.onmousemove.bind(this)))
+      .on('mouseup', (this.handlers.onmouseup = this.onmouseup.bind(this)));
+  }
 
-    context.onunload = () => {
-      $(window).off('resize', handlers.onresize);
+  onremove() {
+    $(window).off('resize', this.handlers.onresize);
 
-      $(document).off('mousemove', handlers.onmousemove).off('mouseup', handlers.onmouseup);
-    };
+    $(document).off('mousemove', this.handlers.onmousemove).off('mouseup', this.handlers.onmouseup);
   }
 
   /**
    * Add the necessary event handlers to the composer's handle so that it can
    * be used to resize the composer.
-   *
-   * @param {DOMElement} element
-   * @param {Boolean} isInitialized
    */
-  configHandle(element, isInitialized) {
-    if (isInitialized) return;
-
+  configHandle(vnode) {
     const composer = this;
 
-    $(element)
+    $(vnode.dom)
       .css('cursor', 'row-resize')
       .bind('dragstart mousedown', (e) => e.preventDefault())
       .mousedown(function (e) {