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/utils/alertEmailConfirmation.js

@@ -1,22 +1,38 @@
 import Alert from '../../common/components/Alert';
 import Button from '../../common/components/Button';
 import icon from '../../common/helpers/icon';
+import Component from '../../common/Component';
 
 /**
  * Shows an alert if the user has not yet confirmed their email address.
  *
- * @param {ForumApp} app
+ * @param {ForumApplication} app
  */
 export default function alertEmailConfirmation(app) {
   const user = app.session.user;
 
   if (!user || user.isEmailConfirmed()) return;
 
-  const resendButton = Button.component({
-    className: 'Button Button--link',
-    children: app.translator.trans('core.forum.user_email_confirmation.resend_button'),
-    onclick: function () {
-      resendButton.props.loading = true;
+  class ResendButton extends Component {
+    oninit(vnode) {
+      super.oninit(vnode);
+
+      this.loading = false;
+      this.sent = false;
+    }
+
+    view() {
+      return (
+        <Button class="Button Button--link" onclick={this.onclick.bind(this)} loading={this.loading} disabled={this.sent}>
+          {this.sent
+            ? [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')]
+            : app.translator.trans('core.forum.user_email_confirmation.resend_button')}
+        </Button>
+      );
+    }
+
+    onclick() {
+      this.loading = true;
       m.redraw();
 
       app
@@ -25,34 +41,24 @@ export default function alertEmailConfirmation(app) {
           url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
         })
         .then(() => {
-          resendButton.props.loading = false;
-          resendButton.props.children = [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
-          resendButton.props.disabled = true;
+          this.loading = false;
+          this.sent = true;
           m.redraw();
         })
         .catch(() => {
-          resendButton.props.loading = false;
+          this.loading = false;
           m.redraw();
         });
-    },
-  });
-
-  class ContainedAlert extends Alert {
-    view() {
-      const vdom = super.view();
-
-      vdom.children = [<div className="container">{vdom.children}</div>];
-
-      return vdom;
     }
   }
 
-  m.mount(
-    $('<div/>').insertBefore('#content')[0],
-    ContainedAlert.component({
-      dismissible: false,
-      children: app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> }),
-      controls: [resendButton],
-    })
-  );
+  m.mount($('<div/>').insertBefore('#content')[0], {
+    view: () => (
+      <Alert dismissible={false} controls={[<ResendButton />]}>
+        <div className="container">
+          {app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> })}
+        </div>
+      </Alert>
+    ),
+  });
 }