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/Post.js

@@ -10,14 +10,16 @@ import ItemList from '../../common/utils/ItemList';
  * includes a controls dropdown; subclasses must implement `content` and `attrs`
  * methods.
  *
- * ### Props
+ * ### Attrs
  *
  * - `post`
  *
  * @abstract
  */
 export default class Post extends Component {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     this.loading = false;
 
     /**
@@ -27,9 +29,9 @@ export default class Post extends Component {
      * @type {SubtreeRetainer}
      */
     this.subtree = new SubtreeRetainer(
-      () => this.props.post.freshness,
+      () => this.attrs.post.freshness,
       () => {
-        const user = this.props.post.user();
+        const user = this.attrs.post.user();
         return user && user.freshness;
       },
       () => this.controlsOpen
@@ -37,51 +39,52 @@ export default class Post extends Component {
   }
 
   view() {
-    const attrs = this.attrs();
+    const attrs = this.elementAttrs();
 
     attrs.className = this.classes(attrs.className).join(' ');
 
+    const controls = PostControls.controls(this.attrs.post, this).toArray();
+
     return (
       <article {...attrs}>
-        {this.subtree.retain() ||
-          (() => {
-            const controls = PostControls.controls(this.props.post, this).toArray();
-
-            return (
-              <div>
-                {this.content()}
-                <aside className="Post-actions">
-                  <ul>
-                    {listItems(this.actionItems().toArray())}
-                    {controls.length ? (
-                      <li>
-                        <Dropdown
-                          className="Post-controls"
-                          buttonClassName="Button Button--icon Button--flat"
-                          menuClassName="Dropdown-menu--right"
-                          icon="fas fa-ellipsis-h"
-                          onshow={() => this.$('.Post-actions').addClass('open')}
-                          onhide={() => this.$('.Post-actions').removeClass('open')}
-                        >
-                          {controls}
-                        </Dropdown>
-                      </li>
-                    ) : (
-                      ''
-                    )}
-                  </ul>
-                </aside>
-                <footer className="Post-footer">
-                  <ul>{listItems(this.footerItems().toArray())}</ul>
-                </footer>
-              </div>
-            );
-          })()}
+        <div>
+          {this.content()}
+          <aside className="Post-actions">
+            <ul>
+              {listItems(this.actionItems().toArray())}
+              {controls.length ? (
+                <li>
+                  <Dropdown
+                    className="Post-controls"
+                    buttonClassName="Button Button--icon Button--flat"
+                    menuClassName="Dropdown-menu--right"
+                    icon="fas fa-ellipsis-h"
+                    onshow={() => this.$('.Post-actions').addClass('open')}
+                    onhide={() => this.$('.Post-actions').removeClass('open')}
+                  >
+                    {controls}
+                  </Dropdown>
+                </li>
+              ) : (
+                ''
+              )}
+            </ul>
+          </aside>
+          <footer className="Post-footer">
+            <ul>{listItems(this.footerItems().toArray())}</ul>
+          </footer>
+        </div>
       </article>
     );
   }
 
-  config(isInitialized) {
+  onbeforeupdate(vnode) {
+    super.onbeforeupdate(vnode);
+
+    return this.subtree.needsRebuild();
+  }
+
+  onupdate() {
     const $actions = this.$('.Post-actions');
     const $controls = this.$('.Post-controls');
 
@@ -93,7 +96,7 @@ export default class Post extends Component {
    *
    * @return {Object}
    */
-  attrs() {
+  elementAttrs() {
     return {};
   }
 
@@ -115,8 +118,8 @@ export default class Post extends Component {
   classes(existing) {
     let classes = (existing || '').split(' ').concat(['Post']);
 
-    const user = this.props.post.user();
-    const discussion = this.props.post.discussion();
+    const user = this.attrs.post.user();
+    const discussion = this.attrs.post.discussion();
 
     if (this.loading) {
       classes.push('Post--loading');