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/common/components/Button.js

@@ -1,12 +1,15 @@
 import Component from '../Component';
 import icon from '../helpers/icon';
+import classList from '../utils/classList';
 import extract from '../utils/extract';
 import extractText from '../utils/extractText';
 import LoadingIndicator from './LoadingIndicator';
 
 /**
  * The `Button` component defines an element which, when clicked, performs an
- * action. The button may have the following special props:
+ * action.
+ *
+ * ### Attrs
  *
  * - `icon` The name of the icon class. If specified, the button will be given a
  *   'has-icon' class name.
@@ -15,41 +18,38 @@ import LoadingIndicator from './LoadingIndicator';
  *   removed.
  * - `loading` Whether or not the button should be in a disabled loading state.
  *
- * All other props will be assigned as attributes on the button element.
+ * All other attrs will be assigned as attributes on the button element.
  *
  * Note that a Button has no default class names. This is because a Button can
  * be used to represent any generic clickable control, like a menu item.
  */
 export default class Button extends Component {
-  view() {
-    const attrs = Object.assign({}, this.props);
+  view(vnode) {
+    const attrs = Object.assign({}, this.attrs);
 
-    delete attrs.children;
-
-    attrs.className = attrs.className || '';
     attrs.type = attrs.type || 'button';
 
     // If a tooltip was provided for buttons without additional content, we also
     // use this tooltip as text for screen readers
-    if (attrs.title && !this.props.children) {
+    if (attrs.title && !vnode.children) {
       attrs['aria-label'] = attrs.title;
     }
 
     // If nothing else is provided, we use the textual button content as tooltip
-    if (!attrs.title && this.props.children) {
-      attrs.title = extractText(this.props.children);
+    if (!attrs.title && vnode.children) {
+      attrs.title = extractText(vnode.children);
     }
 
     const iconName = extract(attrs, 'icon');
-    if (iconName) attrs.className += ' hasIcon';
 
     const loading = extract(attrs, 'loading');
     if (attrs.disabled || loading) {
-      attrs.className += ' disabled' + (loading ? ' loading' : '');
       delete attrs.onclick;
     }
 
-    return <button {...attrs}>{this.getButtonContent()}</button>;
+    attrs.className = classList([attrs.className, iconName && 'hasIcon', (attrs.disabled || loading) && 'disabled', loading && 'loading']);
+
+    return <button {...attrs}>{this.getButtonContent(vnode.children)}</button>;
   }
 
   /**
@@ -58,13 +58,13 @@ export default class Button extends Component {
    * @return {*}
    * @protected
    */
-  getButtonContent() {
-    const iconName = this.props.icon;
+  getButtonContent(children) {
+    const iconName = this.attrs.icon;
 
     return [
       iconName && iconName !== true ? icon(iconName, { className: 'Button-icon' }) : '',
-      this.props.children ? <span className="Button-label">{this.props.children}</span> : '',
-      this.props.loading ? LoadingIndicator.component({ size: 'tiny', className: 'LoadingIndicator--inline' }) : '',
+      children ? <span className="Button-label">{children}</span> : '',
+      this.attrs.loading ? <LoadingIndicator size="tiny" className="LoadingIndicator--inline" /> : '',
     ];
   }
 }