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

@@ -3,6 +3,7 @@ import avatar from '../../common/helpers/avatar';
 import icon from '../../common/helpers/icon';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
+import classList from '../../common/utils/classList';
 import Button from '../../common/components/Button';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 
@@ -10,13 +11,15 @@ import LoadingIndicator from '../../common/components/LoadingIndicator';
  * The `AvatarEditor` component displays a user's avatar along with a dropdown
  * menu which allows the user to upload/remove the avatar.
  *
- * ### Props
+ * ### Attrs
  *
  * - `className`
  * - `user`
  */
 export default class AvatarEditor extends Component {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     /**
      * Whether or not an avatar upload is in progress.
      *
@@ -32,17 +35,11 @@ export default class AvatarEditor extends Component {
     this.isDraggedOver = false;
   }
 
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || '';
-  }
-
   view() {
-    const user = this.props.user;
+    const user = this.attrs.user;
 
     return (
-      <div className={'AvatarEditor Dropdown ' + this.props.className + (this.loading ? ' loading' : '') + (this.isDraggedOver ? ' dragover' : '')}>
+      <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
         {avatar(user)}
         <a
           className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
@@ -55,7 +52,7 @@ export default class AvatarEditor extends Component {
           ondragend={this.disableDragover.bind(this)}
           ondrop={this.dropUpload.bind(this)}
         >
-          {this.loading ? LoadingIndicator.component() : user.avatarUrl() ? icon('fas fa-pencil-alt') : icon('fas fa-plus-circle')}
+          {this.loading ? <LoadingIndicator /> : user.avatarUrl() ? icon('fas fa-pencil-alt') : icon('fas fa-plus-circle')}
         </a>
         <ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul>
       </div>
@@ -72,20 +69,16 @@ export default class AvatarEditor extends Component {
 
     items.add(
       'upload',
-      Button.component({
-        icon: 'fas fa-upload',
-        children: app.translator.trans('core.forum.user.avatar_upload_button'),
-        onclick: this.openPicker.bind(this),
-      })
+      <Button icon="fas fa-upload" onclick={this.openPicker.bind(this)}>
+        {app.translator.trans('core.forum.user.avatar_upload_button')}
+      </Button>
     );
 
     items.add(
       'remove',
-      Button.component({
-        icon: 'fas fa-times',
-        children: app.translator.trans('core.forum.user.avatar_remove_button'),
-        onclick: this.remove.bind(this),
-      })
+      <Button icon="fas fa-times" onclick={this.remove.bind(this)}>
+        {app.translator.trans('core.forum.user.avatar_remove_button')}
+      </Button>
     );
 
     return items;
@@ -134,7 +127,7 @@ export default class AvatarEditor extends Component {
    * @param {Event} e
    */
   quickUpload(e) {
-    if (!this.props.user.avatarUrl()) {
+    if (!this.attrs.user.avatarUrl()) {
       e.preventDefault();
       e.stopPropagation();
       this.openPicker();
@@ -149,7 +142,6 @@ export default class AvatarEditor extends Component {
 
     // Create a hidden HTML input element and click on it so the user can select
     // an avatar file. Once they have, we will upload it via the API.
-    const user = this.props.user;
     const $input = $('<input type="file">');
 
     $input
@@ -169,7 +161,7 @@ export default class AvatarEditor extends Component {
   upload(file) {
     if (this.loading) return;
 
-    const user = this.props.user;
+    const user = this.attrs.user;
     const data = new FormData();
     data.append('avatar', file);
 
@@ -179,9 +171,9 @@ export default class AvatarEditor extends Component {
     app
       .request({
         method: 'POST',
-        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/avatar',
+        url: `${app.forum.attribute('apiUrl')}/users/${user.id()}/avatar`,
         serialize: (raw) => raw,
-        data,
+        body: data,
       })
       .then(this.success.bind(this), this.failure.bind(this));
   }
@@ -190,7 +182,7 @@ export default class AvatarEditor extends Component {
    * Remove the user's avatar.
    */
   remove() {
-    const user = this.props.user;
+    const user = this.attrs.user;
 
     this.loading = true;
     m.redraw();
@@ -198,7 +190,7 @@ export default class AvatarEditor extends Component {
     app
       .request({
         method: 'DELETE',
-        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/avatar',
+        url: `${app.forum.attribute('apiUrl')}/users/${user.id()}/avatar`,
       })
       .then(this.success.bind(this), this.failure.bind(this));
   }
@@ -212,7 +204,7 @@ export default class AvatarEditor extends Component {
    */
   success(response) {
     app.store.pushPayload(response);
-    delete this.props.user.avatarColor;
+    delete this.attrs.user.avatarColor;
 
     this.loading = false;
     m.redraw();