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

@@ -7,16 +7,26 @@ import extractText from '../../common/utils/extractText';
  * enter the title of their discussion. It also overrides the `submit` and
  * `willExit` actions to account for the title.
  *
- * ### Props
+ * ### Attrs
  *
- * - All of the props for ComposerBody
+ * - All of the attrs for ComposerBody
  * - `titlePlaceholder`
  */
 export default class DiscussionComposer extends ComposerBody {
-  init() {
-    super.init();
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    this.composer.fields.title = this.composer.fields.title || m.prop('');
+    attrs.placeholder = attrs.placeholder || extractText(app.translator.trans('core.forum.composer_discussion.body_placeholder'));
+    attrs.submitLabel = attrs.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
+    attrs.confirmExit = attrs.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
+    attrs.titlePlaceholder = attrs.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
+    attrs.className = 'ComposerBody--discussion';
+  }
+
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.composer.fields.title = this.composer.fields.title || m.stream('');
 
     /**
      * The value of the title input.
@@ -26,16 +36,6 @@ export default class DiscussionComposer extends ComposerBody {
     this.title = this.composer.fields.title;
   }
 
-  static initProps(props) {
-    super.initProps(props);
-
-    props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_discussion.body_placeholder'));
-    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
-    props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
-    props.titlePlaceholder = props.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
-    props.className = 'ComposerBody--discussion';
-  }
-
   headerItems() {
     const items = super.headerItems();
 
@@ -46,10 +46,9 @@ export default class DiscussionComposer extends ComposerBody {
       <h3>
         <input
           className="FormControl"
-          value={this.title()}
-          oninput={m.withAttr('value', this.title)}
-          placeholder={this.props.titlePlaceholder}
-          disabled={!!this.props.disabled}
+          bidi={this.title}
+          placeholder={this.attrs.titlePlaceholder}
+          disabled={!!this.attrs.disabled}
           onkeydown={this.onkeydown.bind(this)}
         />
       </h3>
@@ -71,7 +70,7 @@ export default class DiscussionComposer extends ComposerBody {
       this.composer.editor.moveCursorTo(0);
     }
 
-    m.redraw.strategy('none');
+    e.redraw = false;
   }
 
   hasChanges() {
@@ -101,7 +100,7 @@ export default class DiscussionComposer extends ComposerBody {
       .then((discussion) => {
         this.composer.hide();
         app.discussions.refresh();
-        m.route(app.route.discussion(discussion));
+        m.route.set(app.route.discussion(discussion));
       }, this.loaded.bind(this));
   }
 }