Don't scroll on m.route.set() to different post on same page.

This removes some messy logic, and the potential for glitches. This system worked well with Mithril 0.2 where we could listen in before (and prevent) page unload, but since that's not possible in Mithril 2, the implementation of the replacement was done in `onbeforeupdate`, which might be called while the page route is being updated, glitching out the page. Instead, extensions should check if they are already on the discussion page for the post they are linking to, and if so, use `app.current.get('stream').goToNumber(TARGET)`.

Please note that this does NOT affect going directly to posts from external links (or page reload), OR from other pages via m.route.set.

.gitattributes

@@ -11,3 +11,5 @@ phpunit.xml export-ignore
 tests export-ignore
 
 js/dist/* -diff
+
+* text=auto eol=lf

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: Lint code
+name: Lint
 
 on:
   push:
@@ -12,7 +12,7 @@ jobs:
   prettier:
     runs-on: ubuntu-latest
 
-    name: Lint JS code with Prettier
+    name: JS / Prettier
 
     steps:
       - uses: actions/checkout@master

CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## [0.1.0-beta.13](https://github.com/flarum/core/compare/v0.1.0-beta.12...v0.1.0-beta.13)
+
+### Added
+- Console extender (#2057)
+- CSRF extender (#2095)
+- Event extender (#2097)
+- Mail extender (#2012)
+- Model extender (#2100)
+- Posts by users that started a discussion now have the CSS class `.Post--by-start-user`
+- PHPUnit 8 compatibility
+- Composer 2 compatibility
+- Permission groups can now be hidden (#2129)
+- Confirmation popup when hiding or deleting posts (#2135)
+
+### Changed
+- Updated less.php dependency version to 3.0
+- Updated JS dependencies
+- All notifications and other emails now processed through the queue, if enabled (#978, #1928, #1931, #2096)
+- Simplified uploads, removing need to store intermediate files (#2117)
+- Improved date handling for dates older than 1 year (#2034)
+- Linting and automatic formatting for JS (#2099)
+- Translation files from Language Packs are only loaded for extensions that are enabled (#2020)
+- PHP extenders' properties are now `private` instead of `protected`, intentionally making it harder to extend these classes (#1958)
+- Preparation for upgrading Laravel components to 5.8 and then 6.0 (#2055, #2117)
+- Allowed permission checks based on model classes in addition to instances (#1977)
+
+### Fixed
+- Users can no longer restore discussions hidden by admins (#2037)
+- Issues of the Modal not showing or auto hiding (#1504, #1813, #2080)
+- Columnar layout on admin extensions page was broken in Firefox (#2029, #2111)
+- Non-dismissible modals could still be dismissed using the ESC key (#1917)
+- New discussions were added to the discussion list above unread sticky posts (#1751, #1868)
+- New discussions not visible to users when using Pusher (#2076, #2077)
+- Permission icons were aligned unevenly in admin permissions list (#2016, #2018)
+- Notification bubble not inversed on mobile with colored header (#1983, #2109)
+- Post stream scrubber clicks jumped back to first post (#1945)
+- Loading state of Switch toggle component was hard to see (#2039, #1491)
+- `Flarum\Extend\Middleware`: The methods `insertBefore()` and `insertAfter()` did not work as described (#2063, #2084)
+
+### Removed
+- Support for PHP 7.1 (#2014)
+- Zend compatibility bridge (#2010)
+- SES mail support (#2011)
+- Backward compatibility layer for `Flarum\Mail\DriverInterface`, new methods from beta.12 are now required
+- `Flarum\Util\Str` helper class
+- `Flarum\Event\ConfigureMiddleware` event 
+
+### Deprecated
+- `Flarum\Event\AbstractConfigureRoutes` event class
+- `Flarum\Event\ConfigureApiRoutes` event class
+- `Flarum\Event\ConfigureForumRoutes` event class
+- `Flarum\Event\ConfigureLocales` event class
+
 ## [0.1.0-beta.12](https://github.com/flarum/core/compare/v0.1.0-beta.11.1...v0.1.0-beta.12)
 
 ### Added

README.md

@@ -1,12 +1,14 @@
-<p align="center"><img src="https://flarum.org/img/logo.png"></p>
+<p align="center"><img src="https://flarum.org/assets/img/logo.png"></p>
 
 <p align="center">
-<a href="https://travis-ci.org/flarum/core"><img src="https://travis-ci.org/flarum/core.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/flarum/core"><img src="https://poser.pugx.org/flarum/core/d/total.svg" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/flarum/core"><img src="https://poser.pugx.org/flarum/core/v/stable.svg" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/flarum/core"><img src="https://poser.pugx.org/flarum/core/license.svg" alt="License"></a>
+<a href="https://github.com/flarum/core/actions?query=workflow%3ATests"><img src="https://github.com/flarum/core/workflows/Tests/badge.svg" alt="PHP Tests"></a>
+<a href="https://packagist.org/packages/flarum/core"><img src="https://img.shields.io/packagist/dt/flarum/core" alt="Total Downloads"></a>
+<a href="https://packagist.org/packages/flarum/core"><img src="https://img.shields.io/github/v/release/flarum/core?sort=semver" alt="Latest Version"></a>
+<a href="https://packagist.org/packages/flarum/core"><img src="https://img.shields.io/packagist/l/flarum/core" alt="License"></a>
+<a href="https://github.styleci.io/repos/28257573"><img src="https://github.styleci.io/repos/28257573/shield?style=flat" alt="StyleCI"></a>
 </p>
 
+
 ## About Flarum
 
 **[Flarum](https://flarum.org/) is a delightfully simple discussion platform for your website.** It's fast and easy to use, with all the features you need to run a successful community. It is designed to be:
@@ -32,4 +34,3 @@ If you discover a security vulnerability within Flarum, please send an e-mail to
 ## License
 
 Flarum is open-source software licensed under the [MIT License](https://github.com/flarum/flarum/blob/master/LICENSE).
-

composer.json

@@ -37,25 +37,25 @@
     "require": {
         "php": ">=7.2",
         "axy/sourcemap": "^0.1.4",
-        "components/font-awesome": "5.9.*",
-        "dflydev/fig-cookies": "^1.0.2",
+        "components/font-awesome": "^5.14.0",
+        "dflydev/fig-cookies": "^2.0.1",
         "doctrine/dbal": "^2.7",
         "franzl/whoops-middleware": "^0.4.0",
-        "illuminate/bus": "5.7.*",
-        "illuminate/cache": "5.7.*",
-        "illuminate/config": "5.7.*",
-        "illuminate/container": "5.7.*",
-        "illuminate/contracts": "5.7.*",
-        "illuminate/database": "5.7.*",
-        "illuminate/events": "5.7.*",
-        "illuminate/filesystem": "5.7.*",
-        "illuminate/hashing": "5.7.*",
-        "illuminate/mail": "5.7.*",
-        "illuminate/queue": "5.7.*",
-        "illuminate/session": "5.7.*",
-        "illuminate/support": "5.7.*",
-        "illuminate/validation": "5.7.*",
-        "illuminate/view": "5.7.*",
+        "illuminate/bus": "^6.0",
+        "illuminate/cache": "^6.0",
+        "illuminate/config": "^6.0",
+        "illuminate/container": "^6.0",
+        "illuminate/contracts": "^6.0",
+        "illuminate/database": "^6.0",
+        "illuminate/events": "^6.0",
+        "illuminate/filesystem": "^6.0",
+        "illuminate/hashing": "^6.0",
+        "illuminate/mail": "^6.0",
+        "illuminate/queue": "^6.0",
+        "illuminate/session": "^6.0",
+        "illuminate/support": "^6.0",
+        "illuminate/validation": "^6.0",
+        "illuminate/view": "^6.0",
         "intervention/image": "^2.5.0",
         "laminas/laminas-diactoros": "^1.8.4",
         "laminas/laminas-httphandlerrunner": "^1.0",
@@ -66,6 +66,7 @@
         "middlewares/base-path-router": "^0.2.1",
         "middlewares/request-handler": "^1.2",
         "monolog/monolog": "^1.16.0",
+        "nesbot/carbon": "^2.0",
         "nikic/fast-route": "^0.6",
         "psr/http-message": "^1.0",
         "psr/http-server-handler": "^1.0",

js/package.json

@@ -2,21 +2,23 @@
   "private": true,
   "name": "@flarum/core",
   "dependencies": {
+    "@babel/preset-typescript": "^7.10.1",
+    "@types/mithril": "^2.0.3",
     "bootstrap": "^3.4.1",
     "classnames": "^2.2.5",
     "color-thief-browser": "^2.0.2",
+    "dayjs": "^1.8.28",
     "expose-loader": "^0.7.5",
     "flarum-webpack-config": "0.1.0-beta.10",
     "jquery": "^3.4.1",
     "jquery.hotkeys": "^0.1.0",
     "lodash-es": "^4.17.14",
     "m.attrs.bidi": "github:tobscure/m.attrs.bidi",
-    "mithril": "^0.2.8",
-    "moment": "^2.22.2",
+    "mithril": "^2.0.4",
     "punycode": "^2.1.1",
     "spin.js": "^3.1.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.1.2",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
     "webpack-merge": "^4.1.4"
   },
   "devDependencies": {

js/shims.d.ts

@@ -0,0 +1,32 @@
+// Mithril
+import Mithril from 'mithril';
+
+// Other third-party libs
+import * as _dayjs from 'dayjs';
+import * as _$ from 'jquery';
+
+// Globals from flarum/core
+import Application from './src/common/Application';
+
+/**
+ * flarum/core exposes several extensions globally:
+ *
+ * - jQuery for convenient DOM manipulation
+ * - Mithril for VDOM and components
+ * - dayjs for date/time operations
+ *
+ * Since these are already part of the global namespace, extensions won't need
+ * to (and should not) bundle these themselves.
+ */
+declare global {
+  const $: typeof _$;
+  const m: Mithril.Static;
+  const dayjs: typeof _dayjs;
+}
+
+/**
+ * All global variables owned by flarum/core.
+ */
+declare global {
+  const app: Application;
+}

js/src/admin/AdminApplication.js

@@ -27,13 +27,18 @@ export default class AdminApplication extends Application {
    * @inheritdoc
    */
   mount() {
-    m.mount(document.getElementById('app-navigation'), Navigation.component({ className: 'App-backControl', drawer: true }));
-    m.mount(document.getElementById('header-navigation'), Navigation.component());
-    m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
-    m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
-    m.mount(document.getElementById('admin-navigation'), AdminNav.component());
+    m.mount(document.getElementById('app-navigation'), { view: () => Navigation.component({ className: 'App-backControl', drawer: true }) });
+    m.mount(document.getElementById('header-navigation'), Navigation);
+    m.mount(document.getElementById('header-primary'), HeaderPrimary);
+    m.mount(document.getElementById('header-secondary'), HeaderSecondary);
+    m.mount(document.getElementById('admin-navigation'), AdminNav);
+
+    // Mithril does not render the home route on https://example.com/admin, so
+    // we need to go to https://example.com/admin#/ explicitly.
+    if (!document.location.hash) document.location.hash = '#/';
+
+    m.route.prefix = '#';
 
-    m.route.mode = 'hash';
     super.mount();
 
     // If an extension has just been enabled, then we will run its settings

js/src/admin/compat.js

@@ -6,7 +6,6 @@ import EditCustomFooterModal from './components/EditCustomFooterModal';
 import SessionDropdown from './components/SessionDropdown';
 import HeaderPrimary from './components/HeaderPrimary';
 import AppearancePage from './components/AppearancePage';
-import Page from './components/Page';
 import StatusWidget from './components/StatusWidget';
 import HeaderSecondary from './components/HeaderSecondary';
 import SettingsModal from './components/SettingsModal';
@@ -15,7 +14,6 @@ import AddExtensionModal from './components/AddExtensionModal';
 import ExtensionsPage from './components/ExtensionsPage';
 import AdminLinkButton from './components/AdminLinkButton';
 import PermissionGrid from './components/PermissionGrid';
-import Widget from './components/Widget';
 import MailPage from './components/MailPage';
 import UploadImageButton from './components/UploadImageButton';
 import LoadingModal from './components/LoadingModal';
@@ -37,7 +35,6 @@ export default Object.assign(compat, {
   'components/SessionDropdown': SessionDropdown,
   'components/HeaderPrimary': HeaderPrimary,
   'components/AppearancePage': AppearancePage,
-  'components/Page': Page,
   'components/StatusWidget': StatusWidget,
   'components/HeaderSecondary': HeaderSecondary,
   'components/SettingsModal': SettingsModal,
@@ -46,7 +43,6 @@ export default Object.assign(compat, {
   'components/ExtensionsPage': ExtensionsPage,
   'components/AdminLinkButton': AdminLinkButton,
   'components/PermissionGrid': PermissionGrid,
-  'components/Widget': Widget,
   'components/MailPage': MailPage,
   'components/UploadImageButton': UploadImageButton,
   'components/LoadingModal': LoadingModal,

js/src/admin/components/AdminLinkButton.js

@@ -10,11 +10,7 @@
 import LinkButton from '../../common/components/LinkButton';
 
 export default class AdminLinkButton extends LinkButton {
-  getButtonContent() {
-    const content = super.getButtonContent();
-
-    content.push(<div className="AdminLinkButton-description">{this.props.description}</div>);
-
-    return content;
+  getButtonContent(children) {
+    return [...super.getButtonContent(children), <div className="AdminLinkButton-description">{this.attrs.description}</div>];
   }
 }

js/src/admin/components/AdminNav.js

@@ -31,62 +31,74 @@ export default class AdminNav extends Component {
 
     items.add(
       'dashboard',
-      AdminLinkButton.component({
-        href: app.route('dashboard'),
-        icon: 'far fa-chart-bar',
-        children: app.translator.trans('core.admin.nav.dashboard_button'),
-        description: app.translator.trans('core.admin.nav.dashboard_text'),
-      })
+      AdminLinkButton.component(
+        {
+          href: app.route('dashboard'),
+          icon: 'far fa-chart-bar',
+          description: app.translator.trans('core.admin.nav.dashboard_text'),
+        },
+        app.translator.trans('core.admin.nav.dashboard_button')
+      )
     );
 
     items.add(
       'basics',
-      AdminLinkButton.component({
-        href: app.route('basics'),
-        icon: 'fas fa-pencil-alt',
-        children: app.translator.trans('core.admin.nav.basics_button'),
-        description: app.translator.trans('core.admin.nav.basics_text'),
-      })
+      AdminLinkButton.component(
+        {
+          href: app.route('basics'),
+          icon: 'fas fa-pencil-alt',
+          description: app.translator.trans('core.admin.nav.basics_text'),
+        },
+        app.translator.trans('core.admin.nav.basics_button')
+      )
     );
 
     items.add(
       'mail',
-      AdminLinkButton.component({
-        href: app.route('mail'),
-        icon: 'fas fa-envelope',
-        children: app.translator.trans('core.admin.nav.email_button'),
-        description: app.translator.trans('core.admin.nav.email_text'),
-      })
+      AdminLinkButton.component(
+        {
+          href: app.route('mail'),
+          icon: 'fas fa-envelope',
+          description: app.translator.trans('core.admin.nav.email_text'),
+        },
+        app.translator.trans('core.admin.nav.email_button')
+      )
     );
 
     items.add(
       'permissions',
-      AdminLinkButton.component({
-        href: app.route('permissions'),
-        icon: 'fas fa-key',
-        children: app.translator.trans('core.admin.nav.permissions_button'),
-        description: app.translator.trans('core.admin.nav.permissions_text'),
-      })
+      AdminLinkButton.component(
+        {
+          href: app.route('permissions'),
+          icon: 'fas fa-key',
+          description: app.translator.trans('core.admin.nav.permissions_text'),
+        },
+        app.translator.trans('core.admin.nav.permissions_button')
+      )
     );
 
     items.add(
       'appearance',
-      AdminLinkButton.component({
-        href: app.route('appearance'),
-        icon: 'fas fa-paint-brush',
-        children: app.translator.trans('core.admin.nav.appearance_button'),
-        description: app.translator.trans('core.admin.nav.appearance_text'),
-      })
+      AdminLinkButton.component(
+        {
+          href: app.route('appearance'),
+          icon: 'fas fa-paint-brush',
+          description: app.translator.trans('core.admin.nav.appearance_text'),
+        },
+        app.translator.trans('core.admin.nav.appearance_button')
+      )
     );
 
     items.add(
       'extensions',
-      AdminLinkButton.component({
-        href: app.route('extensions'),
-        icon: 'fas fa-puzzle-piece',
-        children: app.translator.trans('core.admin.nav.extensions_button'),
-        description: app.translator.trans('core.admin.nav.extensions_text'),
-      })
+      AdminLinkButton.component(
+        {
+          href: app.route('extensions'),
+          icon: 'fas fa-puzzle-piece',
+          description: app.translator.trans('core.admin.nav.extensions_text'),
+        },
+        app.translator.trans('core.admin.nav.extensions_button')
+      )
     );
 
     return items;

js/src/admin/components/AppearancePage.js

@@ -1,6 +1,7 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import Button from '../../common/components/Button';
 import Switch from '../../common/components/Switch';
+import Stream from '../../common/utils/Stream';
 import EditCustomCssModal from './EditCustomCssModal';
 import EditCustomHeaderModal from './EditCustomHeaderModal';
 import EditCustomFooterModal from './EditCustomFooterModal';
@@ -8,13 +9,13 @@ import UploadImageButton from './UploadImageButton';
 import saveSettings from '../utils/saveSettings';
 
 export default class AppearancePage extends Page {
-  init() {
-    super.init();
+  oninit(vnode) {
+    super.oninit(vnode);
 
-    this.primaryColor = m.prop(app.data.settings.theme_primary_color);
-    this.secondaryColor = m.prop(app.data.settings.theme_secondary_color);
-    this.darkMode = m.prop(app.data.settings.theme_dark_mode === '1');
-    this.coloredHeader = m.prop(app.data.settings.theme_colored_header === '1');
+    this.primaryColor = Stream(app.data.settings.theme_primary_color);
+    this.secondaryColor = Stream(app.data.settings.theme_secondary_color);
+    this.darkMode = Stream(app.data.settings.theme_dark_mode);
+    this.coloredHeader = Stream(app.data.settings.theme_colored_header);
   }
 
   view() {
@@ -27,40 +28,34 @@ export default class AppearancePage extends Page {
               <div className="helpText">{app.translator.trans('core.admin.appearance.colors_text')}</div>
 
               <div className="AppearancePage-colors-input">
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  value={this.primaryColor()}
-                  onchange={m.withAttr('value', this.primaryColor)}
-                />
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  value={this.secondaryColor()}
-                  onchange={m.withAttr('value', this.secondaryColor)}
-                />
+                <input className="FormControl" type="text" placeholder="#aaaaaa" bidi={this.primaryColor} />
+                <input className="FormControl" type="text" placeholder="#aaaaaa" bidi={this.secondaryColor} />
               </div>
 
-              {Switch.component({
-                state: this.darkMode(),
-                children: app.translator.trans('core.admin.appearance.dark_mode_label'),
-                onchange: this.darkMode,
-              })}
+              {Switch.component(
+                {
+                  state: this.darkMode(),
+                  onchange: this.darkMode,
+                },
+                app.translator.trans('core.admin.appearance.dark_mode_label')
+              )}
 
-              {Switch.component({
-                state: this.coloredHeader(),
-                children: app.translator.trans('core.admin.appearance.colored_header_label'),
-                onchange: this.coloredHeader,
-              })}
+              {Switch.component(
+                {
+                  state: this.coloredHeader(),
+                  onchange: this.coloredHeader,
+                },
+                app.translator.trans('core.admin.appearance.colored_header_label')
+              )}
 
-              {Button.component({
-                className: 'Button Button--primary',
-                type: 'submit',
-                children: app.translator.trans('core.admin.appearance.submit_button'),
-                loading: this.loading,
-              })}
+              {Button.component(
+                {
+                  className: 'Button Button--primary',
+                  type: 'submit',
+                  loading: this.loading,
+                },
+                app.translator.trans('core.admin.appearance.submit_button')
+              )}
             </fieldset>
           </form>
 
@@ -79,31 +74,37 @@ export default class AppearancePage extends Page {
           <fieldset>
             <legend>{app.translator.trans('core.admin.appearance.custom_header_heading')}</legend>
             <div className="helpText">{app.translator.trans('core.admin.appearance.custom_header_text')}</div>
-            {Button.component({
-              className: 'Button',
-              children: app.translator.trans('core.admin.appearance.edit_header_button'),
-              onclick: () => app.modal.show(new EditCustomHeaderModal()),
-            })}
+            {Button.component(
+              {
+                className: 'Button',
+                onclick: () => app.modal.show(EditCustomHeaderModal),
+              },
+              app.translator.trans('core.admin.appearance.edit_header_button')
+            )}
           </fieldset>
 
           <fieldset>
             <legend>{app.translator.trans('core.admin.appearance.custom_footer_heading')}</legend>
             <div className="helpText">{app.translator.trans('core.admin.appearance.custom_footer_text')}</div>
-            {Button.component({
-              className: 'Button',
-              children: app.translator.trans('core.admin.appearance.edit_footer_button'),
-              onclick: () => app.modal.show(new EditCustomFooterModal()),
-            })}
+            {Button.component(
+              {
+                className: 'Button',
+                onclick: () => app.modal.show(EditCustomFooterModal),
+              },
+              app.translator.trans('core.admin.appearance.edit_footer_button')
+            )}
           </fieldset>
 
           <fieldset>
             <legend>{app.translator.trans('core.admin.appearance.custom_styles_heading')}</legend>
             <div className="helpText">{app.translator.trans('core.admin.appearance.custom_styles_text')}</div>
-            {Button.component({
-              className: 'Button',
-              children: app.translator.trans('core.admin.appearance.edit_css_button'),
-              onclick: () => app.modal.show(new EditCustomCssModal()),
-            })}
+            {Button.component(
+              {
+                className: 'Button',
+                onclick: () => app.modal.show(EditCustomCssModal),
+              },
+              app.translator.trans('core.admin.appearance.edit_css_button')
+            )}
           </fieldset>
         </div>
       </div>

js/src/admin/components/BasicsPage.js

@@ -1,15 +1,16 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import FieldSet from '../../common/components/FieldSet';
 import Select from '../../common/components/Select';
 import Button from '../../common/components/Button';
-import Alert from '../../common/components/Alert';
 import saveSettings from '../utils/saveSettings';
 import ItemList from '../../common/utils/ItemList';
 import Switch from '../../common/components/Switch';
+import Stream from '../../common/utils/Stream';
+import withAttr from '../../common/utils/withAttr';
 
 export default class BasicsPage extends Page {
-  init() {
-    super.init();
+  oninit(vnode) {
+    super.oninit(vnode);
 
     this.loading = false;
 
@@ -21,11 +22,12 @@ export default class BasicsPage extends Page {
       'default_route',
       'welcome_title',
       'welcome_message',
+      'display_name_driver',
     ];
     this.values = {};
 
     const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = m.prop(settings[key])));
+    this.fields.forEach((key) => (this.values[key] = Stream(settings[key])));
 
     this.localeOptions = {};
     const locales = app.data.locales;
@@ -33,6 +35,14 @@ export default class BasicsPage extends Page {
       this.localeOptions[i] = `${locales[i]} (${i})`;
     }
 
+    this.displayNameOptions = {};
+    const displayNameDrivers = app.data.displayNameDrivers;
+    displayNameDrivers.forEach(function (identifier) {
+      this.displayNameOptions[identifier] = identifier;
+    }, this);
+
+    if (!this.values.display_name_driver() && displayNameDrivers.includes('username')) this.values.display_name_driver('username');
+
     if (typeof this.values.show_language_selector() !== 'number') this.values.show_language_selector(1);
   }
 
@@ -41,45 +51,51 @@ export default class BasicsPage extends Page {
       <div className="BasicsPage">
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.forum_title_heading'),
-              children: [<input className="FormControl" value={this.values.forum_title()} oninput={m.withAttr('value', this.values.forum_title)} />],
-            })}
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.forum_title_heading'),
+              },
+              [<input className="FormControl" bidi={this.values.forum_title} />]
+            )}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.forum_description_heading'),
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.forum_description_heading'),
+              },
+              [
                 <div className="helpText">{app.translator.trans('core.admin.basics.forum_description_text')}</div>,
-                <textarea
-                  className="FormControl"
-                  value={this.values.forum_description()}
-                  oninput={m.withAttr('value', this.values.forum_description)}
-                />,
-              ],
-            })}
+                <textarea className="FormControl" bidi={this.values.forum_description} />,
+              ]
+            )}
 
             {Object.keys(this.localeOptions).length > 1
-              ? FieldSet.component({
-                  label: app.translator.trans('core.admin.basics.default_language_heading'),
-                  children: [
+              ? FieldSet.component(
+                  {
+                    label: app.translator.trans('core.admin.basics.default_language_heading'),
+                  },
+                  [
                     Select.component({
                       options: this.localeOptions,
                       value: this.values.default_locale(),
                       onchange: this.values.default_locale,
                     }),
-                    Switch.component({
-                      state: this.values.show_language_selector(),
-                      onchange: this.values.show_language_selector,
-                      children: app.translator.trans('core.admin.basics.show_language_selector_label'),
-                    }),
-                  ],
-                })
+                    Switch.component(
+                      {
+                        state: this.values.show_language_selector(),
+                        onchange: this.values.show_language_selector,
+                      },
+                      app.translator.trans('core.admin.basics.show_language_selector_label')
+                    ),
+                  ]
+                )
               : ''}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.home_page_heading'),
-              className: 'BasicsPage-homePage',
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.home_page_heading'),
+                className: 'BasicsPage-homePage',
+              },
+              [
                 <div className="helpText">{app.translator.trans('core.admin.basics.home_page_text')}</div>,
                 this.homePageItems()
                   .toArray()
@@ -90,37 +106,52 @@ export default class BasicsPage extends Page {
                         name="homePage"
                         value={path}
                         checked={this.values.default_route() === path}
-                        onclick={m.withAttr('value', this.values.default_route)}
+                        onclick={withAttr('value', this.values.default_route)}
                       />
                       {label}
                     </label>
                   )),
-              ],
-            })}
+              ]
+            )}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
-              className: 'BasicsPage-welcomeBanner',
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
+                className: 'BasicsPage-welcomeBanner',
+              },
+              [
                 <div className="helpText">{app.translator.trans('core.admin.basics.welcome_banner_text')}</div>,
                 <div className="BasicsPage-welcomeBanner-input">
-                  <input className="FormControl" value={this.values.welcome_title()} oninput={m.withAttr('value', this.values.welcome_title)} />
-                  <textarea
-                    className="FormControl"
-                    value={this.values.welcome_message()}
-                    oninput={m.withAttr('value', this.values.welcome_message)}
-                  />
+                  <input className="FormControl" bidi={this.values.welcome_title} />
+                  <textarea className="FormControl" bidi={this.values.welcome_message} />
                 </div>,
-              ],
-            })}
+              ]
+            )}
 
-            {Button.component({
-              type: 'submit',
-              className: 'Button Button--primary',
-              children: app.translator.trans('core.admin.basics.submit_button'),
-              loading: this.loading,
-              disabled: !this.changed(),
-            })}
+            {Object.keys(this.displayNameOptions).length > 1
+              ? FieldSet.component(
+                  {
+                    label: app.translator.trans('core.admin.basics.display_name_heading'),
+                  },
+                  [
+                    <div className="helpText">{app.translator.trans('core.admin.basics.display_name_text')}</div>,
+                    Select.component({
+                      options: this.displayNameOptions,
+                      bidi: this.values.display_name_driver,
+                    }),
+                  ]
+                )
+              : ''}
+
+            {Button.component(
+              {
+                type: 'submit',
+                className: 'Button Button--primary',
+                loading: this.loading,
+                disabled: !this.changed(),
+              },
+              app.translator.trans('core.admin.basics.submit_button')
+            )}
           </form>
         </div>
       </div>
@@ -163,7 +194,7 @@ export default class BasicsPage extends Page {
 
     saveSettings(settings)
       .then(() => {
-        app.alerts.show((this.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') })));
+        this.successAlert = app.alerts.show({ type: 'success' }, app.translator.trans('core.admin.basics.saved_message'));
       })
       .catch(() => {})
       .then(() => {

js/src/admin/components/DashboardPage.js

@@ -1,4 +1,4 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import StatusWidget from './StatusWidget';
 
 export default class DashboardPage extends Page {

js/src/admin/components/DashboardWidget.js

@@ -1,17 +1,8 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
 import Component from '../../common/Component';
 
-export default class Widget extends Component {
+export default class DashboardWidget extends Component {
   view() {
-    return <div className={'Widget ' + this.className()}>{this.content()}</div>;
+    return <div className={'DashboardWidget Widget ' + this.className()}>{this.content()}</div>;
   }
 
   /**

js/src/admin/components/EditGroupModal.js

@@ -3,19 +3,24 @@ import Button from '../../common/components/Button';
 import Badge from '../../common/components/Badge';
 import Group from '../../common/models/Group';
 import ItemList from '../../common/utils/ItemList';
+import Switch from '../../common/components/Switch';
+import Stream from '../../common/utils/Stream';
 
 /**
  * The `EditGroupModal` component shows a modal dialog which allows the user
  * to create or edit a group.
  */
 export default class EditGroupModal extends Modal {
-  init() {
-    this.group = this.props.group || app.store.createRecord('groups');
+  oninit(vnode) {
+    super.oninit(vnode);
 
-    this.nameSingular = m.prop(this.group.nameSingular() || '');
-    this.namePlural = m.prop(this.group.namePlural() || '');
-    this.icon = m.prop(this.group.icon() || '');
-    this.color = m.prop(this.group.color() || '');
+    this.group = this.attrs.group || app.store.createRecord('groups');
+
+    this.nameSingular = Stream(this.group.nameSingular() || '');
+    this.namePlural = Stream(this.group.namePlural() || '');
+    this.icon = Stream(this.group.icon() || '');
+    this.color = Stream(this.group.color() || '');
+    this.isHidden = Stream(this.group.isHidden() || false);
   }
 
   className() {
@@ -51,18 +56,8 @@ export default class EditGroupModal extends Modal {
       <div className="Form-group">
         <label>{app.translator.trans('core.admin.edit_group.name_label')}</label>
         <div className="EditGroupModal-name-input">
-          <input
-            className="FormControl"
-            placeholder={app.translator.trans('core.admin.edit_group.singular_placeholder')}
-            value={this.nameSingular()}
-            oninput={m.withAttr('value', this.nameSingular)}
-          />
-          <input
-            className="FormControl"
-            placeholder={app.translator.trans('core.admin.edit_group.plural_placeholder')}
-            value={this.namePlural()}
-            oninput={m.withAttr('value', this.namePlural)}
-          />
+          <input className="FormControl" placeholder={app.translator.trans('core.admin.edit_group.singular_placeholder')} bidi={this.nameSingular} />
+          <input className="FormControl" placeholder={app.translator.trans('core.admin.edit_group.plural_placeholder')} bidi={this.namePlural} />
         </div>
       </div>,
       30
@@ -72,7 +67,7 @@ export default class EditGroupModal extends Modal {
       'color',
       <div className="Form-group">
         <label>{app.translator.trans('core.admin.edit_group.color_label')}</label>
-        <input className="FormControl" placeholder="#aaaaaa" value={this.color()} oninput={m.withAttr('value', this.color)} />
+        <input className="FormControl" placeholder="#aaaaaa" bidi={this.color} />
       </div>,
       20
     );
@@ -84,7 +79,21 @@ export default class EditGroupModal extends Modal {
         <div className="helpText">
           {app.translator.trans('core.admin.edit_group.icon_text', { a: <a href="https://fontawesome.com/icons?m=free" tabindex="-1" /> })}
         </div>
-        <input className="FormControl" placeholder="fas fa-bolt" value={this.icon()} oninput={m.withAttr('value', this.icon)} />
+        <input className="FormControl" placeholder="fas fa-bolt" bidi={this.icon} />
+      </div>,
+      10
+    );
+
+    items.add(
+      'hidden',
+      <div className="Form-group">
+        {Switch.component(
+          {
+            state: !!Number(this.isHidden()),
+            onchange: this.isHidden,
+          },
+          app.translator.trans('core.admin.edit_group.hide_label')
+        )}
       </div>,
       10
     );
@@ -92,12 +101,14 @@ export default class EditGroupModal extends Modal {
     items.add(
       'submit',
       <div className="Form-group">
-        {Button.component({
-          type: 'submit',
-          className: 'Button Button--primary EditGroupModal-save',
-          loading: this.loading,
-          children: app.translator.trans('core.admin.edit_group.submit_button'),
-        })}
+        {Button.component(
+          {
+            type: 'submit',
+            className: 'Button Button--primary EditGroupModal-save',
+            loading: this.loading,
+          },
+          app.translator.trans('core.admin.edit_group.submit_button')
+        )}
         {this.group.exists && this.group.id() !== Group.ADMINISTRATOR_ID ? (
           <button type="button" className="Button EditGroupModal-delete" onclick={this.deleteGroup.bind(this)}>
             {app.translator.trans('core.admin.edit_group.delete_button')}
@@ -118,6 +129,7 @@ export default class EditGroupModal extends Modal {
       namePlural: this.namePlural(),
       color: this.color(),
       icon: this.icon(),
+      isHidden: this.isHidden(),
     };
   }
 

js/src/admin/components/ExtensionsPage.js

@@ -1,13 +1,10 @@
-import Page from './Page';
-import LinkButton from '../../common/components/LinkButton';
+import Page from '../../common/components/Page';
 import Button from '../../common/components/Button';
 import Dropdown from '../../common/components/Dropdown';
-import Separator from '../../common/components/Separator';
 import AddExtensionModal from './AddExtensionModal';
 import LoadingModal from './LoadingModal';
 import ItemList from '../../common/utils/ItemList';
 import icon from '../../common/helpers/icon';
-import listItems from '../../common/helpers/listItems';
 
 export default class ExtensionsPage extends Page {
   view() {
@@ -15,12 +12,14 @@ export default class ExtensionsPage extends Page {
       <div className="ExtensionsPage">
         <div className="ExtensionsPage-header">
           <div className="container">
-            {Button.component({
-              children: app.translator.trans('core.admin.extensions.add_button'),
-              icon: 'fas fa-plus',
-              className: 'Button Button--primary',
-              onclick: () => app.modal.show(new AddExtensionModal()),
-            })}
+            {Button.component(
+              {
+                icon: 'fas fa-plus',
+                className: 'Button Button--primary',
+                onclick: () => app.modal.show(AddExtensionModal),
+              },
+              app.translator.trans('core.admin.extensions.add_button')
+            )}
           </div>
         </div>
 
@@ -75,31 +74,35 @@ export default class ExtensionsPage extends Page {
     if (app.extensionSettings[name]) {
       items.add(
         'settings',
-        Button.component({
-          icon: 'fas fa-cog',
-          children: app.translator.trans('core.admin.extensions.settings_button'),
-          onclick: app.extensionSettings[name],
-        })
+        Button.component(
+          {
+            icon: 'fas fa-cog',
+            onclick: app.extensionSettings[name],
+          },
+          app.translator.trans('core.admin.extensions.settings_button')
+        )
       );
     }
 
     if (!enabled) {
       items.add(
         'uninstall',
-        Button.component({
-          icon: 'far fa-trash-alt',
-          children: app.translator.trans('core.admin.extensions.uninstall_button'),
-          onclick: () => {
-            app
-              .request({
-                url: app.forum.attribute('apiUrl') + '/extensions/' + name,
-                method: 'DELETE',
-              })
-              .then(() => window.location.reload());
+        Button.component(
+          {
+            icon: 'far fa-trash-alt',
+            onclick: () => {
+              app
+                .request({
+                  url: app.forum.attribute('apiUrl') + '/extensions/' + name,
+                  method: 'DELETE',
+                })
+                .then(() => window.location.reload());
 
-            app.modal.show(new LoadingModal());
+              app.modal.show(LoadingModal);
+            },
           },
-        })
+          app.translator.trans('core.admin.extensions.uninstall_button')
+        )
       );
     }
 
@@ -119,13 +122,33 @@ export default class ExtensionsPage extends Page {
       .request({
         url: app.forum.attribute('apiUrl') + '/extensions/' + id,
         method: 'PATCH',
-        data: { enabled: !enabled },
+        body: { enabled: !enabled },
+        errorHandler: this.onerror.bind(this),
       })
       .then(() => {
         if (!enabled) localStorage.setItem('enabledExtension', id);
         window.location.reload();
       });
 
-    app.modal.show(new LoadingModal());
+    app.modal.show(LoadingModal);
+  }
+
+  onerror(e) {
+    // We need to give the modal animation time to start; if we close the modal too early,
+    // it breaks the bootstrap modal library.
+    // TODO: This workaround should be removed when we move away from bootstrap JS for modals.
+    setTimeout(() => {
+      app.modal.close();
+
+      const error = JSON.parse(e.responseText).errors[0];
+
+      app.alerts.show(
+        { type: 'error' },
+        app.translator.trans(`core.lib.error.${error.code}_message`, {
+          extension: error.extension,
+          extensions: error.extensions.join(', '),
+        })
+      );
+    }, 250);
   }
 }

js/src/admin/components/HeaderSecondary.js

@@ -11,13 +11,6 @@ export default class HeaderSecondary extends Component {
     return <ul className="Header-controls">{listItems(this.items().toArray())}</ul>;
   }
 
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
   /**
    * Build an item list for the controls.
    *

js/src/admin/components/LoadingModal.js

@@ -1,9 +1,10 @@
 import Modal from '../../common/components/Modal';
 
 export default class LoadingModal extends Modal {
-  isDismissible() {
-    return false;
-  }
+  /**
+   * @inheritdoc
+   */
+  static isDismissible = false;
 
   className() {
     return 'LoadingModal Modal--small';

js/src/admin/components/MailPage.js

@@ -1,16 +1,18 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import FieldSet from '../../common/components/FieldSet';
 import Button from '../../common/components/Button';
 import Alert from '../../common/components/Alert';
 import Select from '../../common/components/Select';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import saveSettings from '../utils/saveSettings';
+import Stream from '../../common/utils/Stream';
 
 export default class MailPage extends Page {
-  init() {
-    super.init();
+  oninit(vnode) {
+    super.oninit(vnode);
 
     this.saving = false;
+    this.sendingTest = false;
     this.refresh();
   }
 
@@ -23,12 +25,12 @@ export default class MailPage extends Page {
     this.status = { sending: false, errors: {} };
 
     const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = m.prop(settings[key])));
+    this.fields.forEach((key) => (this.values[key] = Stream(settings[key])));
 
     app
       .request({
         method: 'GET',
-        url: app.forum.attribute('apiUrl') + '/mail-settings',
+        url: app.forum.attribute('apiUrl') + '/mail/settings',
       })
       .then((response) => {
         this.driverFields = response['data']['attributes']['fields'];
@@ -38,7 +40,7 @@ export default class MailPage extends Page {
         for (const driver in this.driverFields) {
           for (const field in this.driverFields[driver]) {
             this.fields.push(field);
-            this.values[field] = m.prop(settings[field]);
+            this.values[field] = Stream(settings[field]);
           }
         }
 
@@ -68,23 +70,27 @@ export default class MailPage extends Page {
             <h2>{app.translator.trans('core.admin.email.heading')}</h2>
             <div className="helpText">{app.translator.trans('core.admin.email.text')}</div>
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.addresses_heading'),
-              className: 'MailPage-MailSettings',
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.email.addresses_heading'),
+                className: 'MailPage-MailSettings',
+              },
+              [
                 <div className="MailPage-MailSettings-input">
                   <label>
                     {app.translator.trans('core.admin.email.from_label')}
-                    <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
+                    <input className="FormControl" bidi={this.values.mail_from} />
                   </label>
                 </div>,
-              ],
-            })}
+              ]
+            )}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.driver_heading'),
-              className: 'MailPage-MailSettings',
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.email.driver_heading'),
+                className: 'MailPage-MailSettings',
+              },
+              [
                 <div className="MailPage-MailSettings-input">
                   <label>
                     {app.translator.trans('core.admin.email.driver_label')}
@@ -95,20 +101,24 @@ export default class MailPage extends Page {
                     />
                   </label>
                 </div>,
-              ],
-            })}
+              ]
+            )}
 
             {this.status.sending ||
-              Alert.component({
-                children: app.translator.trans('core.admin.email.not_sending_message'),
-                dismissible: false,
-              })}
+              Alert.component(
+                {
+                  dismissible: false,
+                },
+                app.translator.trans('core.admin.email.not_sending_message')
+              )}
 
             {fieldKeys.length > 0 &&
-              FieldSet.component({
-                label: app.translator.trans(`core.admin.email.${this.values.mail_driver()}_heading`),
-                className: 'MailPage-MailSettings',
-                children: [
+              FieldSet.component(
+                {
+                  label: app.translator.trans(`core.admin.email.${this.values.mail_driver()}_heading`),
+                  className: 'MailPage-MailSettings',
+                },
+                [
                   <div className="MailPage-MailSettings-input">
                     {fieldKeys.map((field) => [
                       <label>
@@ -118,15 +128,37 @@ export default class MailPage extends Page {
                       this.status.errors[field] && <p className="ValidationError">{this.status.errors[field]}</p>,
                     ])}
                   </div>,
-                ],
-              })}
+                ]
+              )}
 
-            {Button.component({
-              type: 'submit',
-              className: 'Button Button--primary',
-              children: app.translator.trans('core.admin.email.submit_button'),
-              disabled: !this.changed(),
-            })}
+            <FieldSet>
+              {Button.component(
+                {
+                  type: 'submit',
+                  className: 'Button Button--primary',
+                  disabled: !this.changed(),
+                },
+                app.translator.trans('core.admin.email.submit_button')
+              )}
+            </FieldSet>
+
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.email.send_test_mail_heading'),
+                className: 'MailPage-MailSettings',
+              },
+              [
+                <div className="helpText">{app.translator.trans('core.admin.email.send_test_mail_text', { email: app.session.user.email() })}</div>,
+                Button.component(
+                  {
+                    className: 'Button Button--primary',
+                    disabled: this.sendingTest || this.changed(),
+                    onclick: () => this.sendTestEmail(),
+                  },
+                  app.translator.trans('core.admin.email.send_test_mail_button')
+                ),
+              ]
+            )}
           </form>
         </div>
       </div>
@@ -139,7 +171,7 @@ export default class MailPage extends Page {
     const prop = this.values[name];
 
     if (typeof field === 'string') {
-      return <input className="FormControl" value={prop() || ''} oninput={m.withAttr('value', prop)} />;
+      return <input className="FormControl" bidi={prop} />;
     } else {
       return <Select value={prop()} options={field} onchange={prop} />;
     }
@@ -149,10 +181,32 @@ export default class MailPage extends Page {
     return this.fields.some((key) => this.values[key]() !== app.data.settings[key]);
   }
 
+  sendTestEmail() {
+    if (this.saving || this.sendingTest) return;
+
+    this.sendingTest = true;
+    app.alerts.dismiss(this.testEmailSuccessAlert);
+
+    app
+      .request({
+        method: 'POST',
+        url: app.forum.attribute('apiUrl') + '/mail/test',
+      })
+      .then((response) => {
+        this.sendingTest = false;
+        this.testEmailSuccessAlert = app.alerts.show({ type: 'success' }, app.translator.trans('core.admin.email.send_test_mail_success'));
+      })
+      .catch((error) => {
+        this.sendingTest = false;
+        m.redraw();
+        throw error;
+      });
+  }
+
   onsubmit(e) {
     e.preventDefault();
 
-    if (this.saving) return;
+    if (this.saving || this.sendingTest) return;
 
     this.saving = true;
     app.alerts.dismiss(this.successAlert);
@@ -163,7 +217,7 @@ export default class MailPage extends Page {
 
     saveSettings(settings)
       .then(() => {
-        app.alerts.show((this.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') })));
+        this.successAlert = app.alerts.show({ type: 'success' }, app.translator.trans('core.admin.basics.saved_message'));
       })
       .catch(() => {})
       .then(() => {

js/src/admin/components/Page.js

@@ -1,32 +0,0 @@
-import Component from '../../common/Component';
-
-/**
- * The `Page` component
- *
- * @abstract
- */
-export default class Page extends Component {
-  init() {
-    app.previous = app.current;
-    app.current = this;
-
-    app.modal.close();
-
-    /**
-     * A class name to apply to the body while the route is active.
-     *
-     * @type {String}
-     */
-    this.bodyClass = '';
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    if (this.bodyClass) {
-      $('#app').addClass(this.bodyClass);
-
-      context.onunload = () => $('#app').removeClass(this.bodyClass);
-    }
-  }
-}

js/src/admin/components/PermissionDropdown.js

@@ -32,101 +32,109 @@ function filterByRequiredPermissions(groupIds, permission) {
 }
 
 export default class PermissionDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    props.className = 'PermissionDropdown';
-    props.buttonClassName = 'Button Button--text';
+    attrs.className = 'PermissionDropdown';
+    attrs.buttonClassName = 'Button Button--text';
   }
 
-  view() {
-    this.props.children = [];
+  view(vnode) {
+    const children = [];
 
-    let groupIds = app.data.permissions[this.props.permission] || [];
+    let groupIds = app.data.permissions[this.attrs.permission] || [];
 
-    groupIds = filterByRequiredPermissions(groupIds, this.props.permission);
+    groupIds = filterByRequiredPermissions(groupIds, this.attrs.permission);
 
     const everyone = groupIds.indexOf(Group.GUEST_ID) !== -1;
     const members = groupIds.indexOf(Group.MEMBER_ID) !== -1;
     const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID);
 
     if (everyone) {
-      this.props.label = Badge.component({ icon: 'fas fa-globe' });
+      this.attrs.label = Badge.component({ icon: 'fas fa-globe' });
     } else if (members) {
-      this.props.label = Badge.component({ icon: 'fas fa-user' });
+      this.attrs.label = Badge.component({ icon: 'fas fa-user' });
     } else {
-      this.props.label = [badgeForId(Group.ADMINISTRATOR_ID), groupIds.map(badgeForId)];
+      this.attrs.label = [badgeForId(Group.ADMINISTRATOR_ID), groupIds.map(badgeForId)];
     }
 
     if (this.showing) {
-      if (this.props.allowGuest) {
-        this.props.children.push(
-          Button.component({
-            children: [Badge.component({ icon: 'fas fa-globe' }), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
-            icon: everyone ? 'fas fa-check' : true,
-            onclick: () => this.save([Group.GUEST_ID]),
-            disabled: this.isGroupDisabled(Group.GUEST_ID),
-          })
+      if (this.attrs.allowGuest) {
+        children.push(
+          Button.component(
+            {
+              icon: everyone ? 'fas fa-check' : true,
+              onclick: () => this.save([Group.GUEST_ID]),
+              disabled: this.isGroupDisabled(Group.GUEST_ID),
+            },
+            [Badge.component({ icon: 'fas fa-globe' }), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')]
+          )
         );
       }
 
-      this.props.children.push(
-        Button.component({
-          children: [Badge.component({ icon: 'fas fa-user' }), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
-          icon: members ? 'fas fa-check' : true,
-          onclick: () => this.save([Group.MEMBER_ID]),
-          disabled: this.isGroupDisabled(Group.MEMBER_ID),
-        }),
+      children.push(
+        Button.component(
+          {
+            icon: members ? 'fas fa-check' : true,
+            onclick: () => this.save([Group.MEMBER_ID]),
+            disabled: this.isGroupDisabled(Group.MEMBER_ID),
+          },
+          [Badge.component({ icon: 'fas fa-user' }), ' ', app.translator.trans('core.admin.permissions_controls.members_button')]
+        ),
 
         Separator.component(),
 
-        Button.component({
-          children: [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()],
-          icon: !everyone && !members ? 'fas fa-check' : true,
-          disabled: !everyone && !members,
-          onclick: (e) => {
-            if (e.shiftKey) e.stopPropagation();
-            this.save([]);
+        Button.component(
+          {
+            icon: !everyone && !members ? 'fas fa-check' : true,
+            disabled: !everyone && !members,
+            onclick: (e) => {
+              if (e.shiftKey) e.stopPropagation();
+              this.save([]);
+            },
           },
-        })
+          [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()]
+        )
       );
 
       [].push.apply(
-        this.props.children,
+        children,
         app.store
           .all('groups')
           .filter((group) => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
           .map((group) =>
-            Button.component({
-              children: [badgeForId(group.id()), ' ', group.namePlural()],
-              icon: groupIds.indexOf(group.id()) !== -1 ? 'fas fa-check' : true,
-              onclick: (e) => {
-                if (e.shiftKey) e.stopPropagation();
-                this.toggle(group.id());
+            Button.component(
+              {
+                icon: groupIds.indexOf(group.id()) !== -1 ? 'fas fa-check' : true,
+                onclick: (e) => {
+                  if (e.shiftKey) e.stopPropagation();
+                  this.toggle(group.id());
+                },
+                disabled: this.isGroupDisabled(group.id()) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID),
               },
-              disabled: this.isGroupDisabled(group.id()) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID),
-            })
+              [badgeForId(group.id()), ' ', group.namePlural()]
+            )
           )
       );
     }
 
-    return super.view();
+    return super.view({ ...vnode, children });
   }
 
   save(groupIds) {
-    const permission = this.props.permission;
+    const permission = this.attrs.permission;
 
     app.data.permissions[permission] = groupIds;
 
     app.request({
       method: 'POST',
       url: app.forum.attribute('apiUrl') + '/permission',
-      data: { permission, groupIds },
+      body: { permission, groupIds },
     });
   }
 
   toggle(groupId) {
-    const permission = this.props.permission;
+    const permission = this.attrs.permission;
 
     let groupIds = app.data.permissions[permission] || [];
 
@@ -143,6 +151,6 @@ export default class PermissionDropdown extends Dropdown {
   }
 
   isGroupDisabled(id) {
-    return filterByRequiredPermissions([id], this.props.permission).indexOf(id) === -1;
+    return filterByRequiredPermissions([id], this.attrs.permission).indexOf(id) === -1;
   }
 }

js/src/admin/components/PermissionGrid.js

@@ -6,7 +6,9 @@ import ItemList from '../../common/utils/ItemList';
 import icon from '../../common/helpers/icon';
 
 export default class PermissionGrid extends Component {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     this.permissions = this.permissionItems().toArray();
   }
 
@@ -112,6 +114,16 @@ export default class PermissionGrid extends Component {
       100
     );
 
+    items.add(
+      'viewHiddenGroups',
+      {
+        icon: 'fas fa-users',
+        label: app.translator.trans('core.admin.permissions.view_hidden_groups_label'),
+        permission: 'viewHiddenGroups',
+      },
+      100
+    );
+
     items.add(
       'viewUserList',
       {

js/src/admin/components/PermissionsPage.js

@@ -1,4 +1,4 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import GroupBadge from '../../common/components/GroupBadge';
 import EditGroupModal from './EditGroupModal';
 import Group from '../../common/models/Group';
@@ -15,7 +15,7 @@ export default class PermissionsPage extends Page {
               .all('groups')
               .filter((group) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
               .map((group) => (
-                <button className="Button Group" onclick={() => app.modal.show(new EditGroupModal({ group }))}>
+                <button className="Button Group" onclick={() => app.modal.show(EditGroupModal, { group })}>
                   {GroupBadge.component({
                     group,
                     className: 'Group-icon',
@@ -24,7 +24,7 @@ export default class PermissionsPage extends Page {
                   <span className="Group-name">{group.namePlural()}</span>
                 </button>
               ))}
-            <button className="Button Group Group--add" onclick={() => app.modal.show(new EditGroupModal())}>
+            <button className="Button Group Group--add" onclick={() => app.modal.show(EditGroupModal)}>
               {icon('fas fa-plus', { className: 'Group-icon' })}
               <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
             </button>

js/src/admin/components/SessionDropdown.js

@@ -9,18 +9,16 @@ import ItemList from '../../common/utils/ItemList';
  * avatar/name, with a dropdown of session controls.
  */
 export default class SessionDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    props.className = 'SessionDropdown';
-    props.buttonClassName = 'Button Button--user Button--flat';
-    props.menuClassName = 'Dropdown-menu--right';
+    attrs.className = 'SessionDropdown';
+    attrs.buttonClassName = 'Button Button--user Button--flat';
+    attrs.menuClassName = 'Dropdown-menu--right';
   }
 
-  view() {
-    this.props.children = this.items().toArray();
-
-    return super.view();
+  view(vnode) {
+    return super.view({ ...vnode, children: this.items().toArray() });
   }
 
   getButtonContent() {
@@ -39,11 +37,13 @@ export default class SessionDropdown extends Dropdown {
 
     items.add(
       'logOut',
-      Button.component({
-        icon: 'fas fa-sign-out-alt',
-        children: app.translator.trans('core.admin.header.log_out_button'),
-        onclick: app.session.logout.bind(app.session),
-      }),
+      Button.component(
+        {
+          icon: 'fas fa-sign-out-alt',
+          onclick: app.session.logout.bind(app.session),
+        },
+        app.translator.trans('core.admin.header.log_out_button')
+      ),
       -100
     );
 

js/src/admin/components/SettingDropdown.js

@@ -3,23 +3,30 @@ import Button from '../../common/components/Button';
 import saveSettings from '../utils/saveSettings';
 
 export default class SettingDropdown extends SelectDropdown {
-  static initProps(props) {
-    super.initProps(props);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    props.className = 'SettingDropdown';
-    props.buttonClassName = 'Button Button--text';
-    props.caretIcon = 'fas fa-caret-down';
-    props.defaultLabel = 'Custom';
+    attrs.className = 'SettingDropdown';
+    attrs.buttonClassName = 'Button Button--text';
+    attrs.caretIcon = 'fas fa-caret-down';
+    attrs.defaultLabel = 'Custom';
+  }
 
-    props.children = props.options.map(({ value, label }) => {
-      const active = app.data.settings[props.key] === value;
+  view(vnode) {
+    return super.view({
+      ...vnode,
+      children: this.attrs.options.map(({ value, label }) => {
+        const active = app.data.settings[this.attrs.key] === value;
 
-      return Button.component({
-        children: label,
-        icon: active ? 'fas fa-check' : true,
-        onclick: saveSettings.bind(this, { [props.key]: value }),
-        active,
-      });
+        return Button.component(
+          {
+            icon: active ? 'fas fa-check' : true,
+            onclick: saveSettings.bind(this, { [this.attrs.key]: value }),
+            active,
+          },
+          label
+        );
+      }),
     });
   }
 }

js/src/admin/components/SettingsModal.js

@@ -1,9 +1,12 @@
 import Modal from '../../common/components/Modal';
 import Button from '../../common/components/Button';
+import Stream from '../../common/utils/Stream';
 import saveSettings from '../utils/saveSettings';
 
 export default class SettingsModal extends Modal {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     this.settings = {};
     this.loading = false;
   }
@@ -33,7 +36,7 @@ export default class SettingsModal extends Modal {
   }
 
   setting(key, fallback = '') {
-    this.settings[key] = this.settings[key] || m.prop(app.data.settings[key] || fallback);
+    this.settings[key] = this.settings[key] || Stream(app.data.settings[key] || fallback);
 
     return this.settings[key];
   }

js/src/admin/components/StatusWidget.js

@@ -46,7 +46,7 @@ export default class StatusWidget extends DashboardWidget {
   }
 
   handleClearCache(e) {
-    app.modal.show(new LoadingModal());
+    app.modal.show(LoadingModal);
 
     app
       .request({

js/src/admin/components/UploadImageButton.js

@@ -1,32 +1,28 @@
 import Button from '../../common/components/Button';
 
 export default class UploadImageButton extends Button {
-  init() {
-    this.loading = false;
-  }
+  loading = false;
 
-  view() {
-    this.props.loading = this.loading;
-    this.props.className = (this.props.className || '') + ' Button';
+  view(vnode) {
+    this.attrs.loading = this.loading;
+    this.attrs.className = (this.attrs.className || '') + ' Button';
 
-    if (app.data.settings[this.props.name + '_path']) {
-      this.props.onclick = this.remove.bind(this);
-      this.props.children = app.translator.trans('core.admin.upload_image.remove_button');
+    if (app.data.settings[this.attrs.name + '_path']) {
+      this.attrs.onclick = this.remove.bind(this);
 
       return (
         <div>
           <p>
-            <img src={app.forum.attribute(this.props.name + 'Url')} alt="" />
+            <img src={app.forum.attribute(this.attrs.name + 'Url')} alt="" />
           </p>
-          <p>{super.view()}</p>
+          <p>{super.view({ ...vnode, children: app.translator.trans('core.admin.upload_image.remove_button') })}</p>
         </div>
       );
     } else {
-      this.props.onclick = this.upload.bind(this);
-      this.props.children = app.translator.trans('core.admin.upload_image.upload_button');
+      this.attrs.onclick = this.upload.bind(this);
     }
 
-    return super.view();
+    return super.view({ ...vnode, children: app.translator.trans('core.admin.upload_image.upload_button') });
   }
 
   /**
@@ -42,8 +38,8 @@ export default class UploadImageButton extends Button {
       .hide()
       .click()
       .on('change', (e) => {
-        const data = new FormData();
-        data.append(this.props.name, $(e.target)[0].files[0]);
+        const body = new FormData();
+        body.append(this.attrs.name, $(e.target)[0].files[0]);
 
         this.loading = true;
         m.redraw();
@@ -53,7 +49,7 @@ export default class UploadImageButton extends Button {
             method: 'POST',
             url: this.resourceUrl(),
             serialize: (raw) => raw,
-            data,
+            body,
           })
           .then(this.success.bind(this), this.failure.bind(this));
       });
@@ -75,7 +71,7 @@ export default class UploadImageButton extends Button {
   }
 
   resourceUrl() {
-    return app.forum.attribute('apiUrl') + '/' + this.props.name;
+    return app.forum.attribute('apiUrl') + '/' + this.attrs.name;
   }
 
   /**

js/src/admin/components/Widget.js

@@ -1,34 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Component from '../../common/Component';
-
-export default class DashboardWidget extends Component {
-  view() {
-    return <div className={'DashboardWidget ' + this.className()}>{this.content()}</div>;
-  }
-
-  /**
-   * Get the class name to apply to the widget.
-   *
-   * @return {String}
-   */
-  className() {
-    return '';
-  }
-
-  /**
-   * Get the content of the widget.
-   *
-   * @return {VirtualElement}
-   */
-  content() {
-    return [];
-  }
-}

js/src/admin/routes.js

@@ -12,11 +12,11 @@ import MailPage from './components/MailPage';
  */
 export default function (app) {
   app.routes = {
-    dashboard: { path: '/', component: DashboardPage.component() },
-    basics: { path: '/basics', component: BasicsPage.component() },
-    permissions: { path: '/permissions', component: PermissionsPage.component() },
-    appearance: { path: '/appearance', component: AppearancePage.component() },
-    extensions: { path: '/extensions', component: ExtensionsPage.component() },
-    mail: { path: '/mail', component: MailPage.component() },
+    dashboard: { path: '/', component: DashboardPage },
+    basics: { path: '/basics', component: BasicsPage },
+    permissions: { path: '/permissions', component: PermissionsPage },
+    appearance: { path: '/appearance', component: AppearancePage },
+    extensions: { path: '/extensions', component: ExtensionsPage },
+    mail: { path: '/mail', component: MailPage },
   };
 }

js/src/admin/utils/saveSettings.js

@@ -7,7 +7,7 @@ export default function saveSettings(settings) {
     .request({
       method: 'POST',
       url: app.forum.attribute('apiUrl') + '/settings',
-      data: settings,
+      body: settings,
     })
     .catch((error) => {
       app.data.settings = oldSettings;

js/src/common/Application.js

@@ -1,5 +1,4 @@
 import ItemList from './utils/ItemList';
-import Alert from './components/Alert';
 import Button from './components/Button';
 import ModalManager from './components/ModalManager';
 import AlertManager from './components/AlertManager';
@@ -12,6 +11,7 @@ import Drawer from './utils/Drawer';
 import mapRoutes from './utils/mapRoutes';
 import RequestError from './utils/RequestError';
 import ScrollListener from './utils/ScrollListener';
+import liveHumanTimes from './utils/liveHumanTimes';
 import { extend } from './extend';
 
 import Forum from './models/Forum';
@@ -21,6 +21,9 @@ import Post from './models/Post';
 import Group from './models/Group';
 import Notification from './models/Notification';
 import { flattenDeep } from 'lodash-es';
+import PageState from './states/PageState';
+import ModalManagerState from './states/ModalManagerState';
+import AlertManagerState from './states/AlertManagerState';
 
 /**
  * The `App` class provides a container for an application, as well as various
@@ -107,13 +110,49 @@ export default class Application {
   booted = false;
 
   /**
-   * An Alert that was shown as a result of an AJAX request error. If present,
-   * it will be dismissed on the next successful request.
+   * The key for an Alert that was shown as a result of an AJAX request error.
+   * If present, it will be dismissed on the next successful request.
    *
-   * @type {null|Alert}
+   * @type {int}
    * @private
    */
-  requestError = null;
+  requestErrorAlert = null;
+
+  /**
+   * The page the app is currently on.
+   *
+   * This object holds information about the type of page we are currently
+   * visiting, and sometimes additional arbitrary page state that may be
+   * relevant to lower-level components.
+   *
+   * @type {PageState}
+   */
+  current = new PageState(null);
+
+  /**
+   * The page the app was on before the current page.
+   *
+   * Once the application navigates to another page, the object previously
+   * assigned to this.current will be moved to this.previous, while this.current
+   * is re-initialized.
+   *
+   * @type {PageState}
+   */
+  previous = new PageState(null);
+
+  /*
+   * An object that manages modal state.
+   *
+   * @type {ModalManagerState}
+   */
+  modal = new ModalManagerState();
+
+  /**
+   * An object that manages the state of active alerts.
+   *
+   * @type {AlertManagerState}
+   */
+  alerts = new AlertManagerState();
 
   data;
 
@@ -150,8 +189,9 @@ export default class Application {
   }
 
   mount(basePath = '') {
-    this.modal = m.mount(document.getElementById('modal'), <ModalManager />);
-    this.alerts = m.mount(document.getElementById('alerts'), <AlertManager />);
+    // An object with a callable view property is used in order to pass arguments to the component; see https://mithril.js.org/mount.html
+    m.mount(document.getElementById('modal'), { view: () => ModalManager.component({ state: this.modal }) });
+    m.mount(document.getElementById('alerts'), { view: () => AlertManager.component({ state: this.alerts }) });
 
     this.drawer = new Drawer();
 
@@ -169,6 +209,8 @@ export default class Application {
     $(() => {
       $('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');
     });
+
+    liveHumanTimes();
   }
 
   /**
@@ -189,6 +231,16 @@ export default class Application {
     return null;
   }
 
+  /**
+   * Determine the current screen mode, based on our media queries.
+   *
+   * @returns {String} - one of "phone", "tablet", "desktop" or "desktop-hd"
+   */
+  screen() {
+    const styles = getComputedStyle(document.documentElement);
+    return styles.getPropertyValue('--flarum-screen');
+  }
+
   /**
    * Set the <title> of the page.
    *
@@ -211,13 +263,16 @@ export default class Application {
   }
 
   updateTitle() {
-    document.title = (this.titleCount ? `(${this.titleCount}) ` : '') + (this.title ? this.title + ' - ' : '') + this.forum.attribute('title');
+    const count = this.titleCount ? `(${this.titleCount}) ` : '';
+    const pageTitleWithSeparator = this.title && m.route.get() !== '/' ? this.title + ' - ' : '';
+    const title = this.forum.attribute('title');
+    document.title = count + pageTitleWithSeparator + title;
   }
 
   /**
    * Make an AJAX request, handling any low-level errors that may occur.
    *
-   * @see https://lhorie.github.io/mithril/mithril.request.html
+   * @see https://mithril.js.org/request.html
    * @param {Object} options
    * @return {Promise}
    * @public
@@ -284,22 +339,18 @@ export default class Application {
       }
     };
 
-    if (this.requestError) this.alerts.dismiss(this.requestError.alert);
+    if (this.requestErrorAlert) this.alerts.dismiss(this.requestErrorAlert);
 
     // Now make the request. If it's a failure, inspect the error that was
     // returned and show an alert containing its contents.
-    const deferred = m.deferred();
-
-    m.request(options).then(
-      (response) => deferred.resolve(response),
+    return m.request(options).then(
+      (response) => response,
       (error) => {
-        this.requestError = error;
-
-        let children;
+        let content;
 
         switch (error.status) {
           case 422:
-            children = error.response.errors
+            content = error.response.errors
               .map((error) => [error.detail, <br />])
               .reduce((a, b) => a.concat(b), [])
               .slice(0, -1);
@@ -307,55 +358,69 @@ export default class Application {
 
           case 401:
           case 403:
-            children = app.translator.trans('core.lib.error.permission_denied_message');
+            content = app.translator.trans('core.lib.error.permission_denied_message');
             break;
 
           case 404:
           case 410:
-            children = app.translator.trans('core.lib.error.not_found_message');
+            content = app.translator.trans('core.lib.error.not_found_message');
             break;
 
           case 429:
-            children = app.translator.trans('core.lib.error.rate_limit_exceeded_message');
+            content = app.translator.trans('core.lib.error.rate_limit_exceeded_message');
             break;
 
           default:
-            children = app.translator.trans('core.lib.error.generic_message');
+            content = app.translator.trans('core.lib.error.generic_message');
         }
 
         const isDebug = app.forum.attribute('debug');
+        // contains a formatted errors if possible, response must be an JSON API array of errors
+        // the details property is decoded to transform escaped characters such as '\n'
+        const errors = error.response && error.response.errors;
+        const formattedError = Array.isArray(errors) && errors[0] && errors[0].detail && errors.map((e) => decodeURI(e.detail));
 
-        error.alert = new Alert({
+        error.alert = {
           type: 'error',
-          children,
+          content,
           controls: isDebug && [
-            <Button className="Button Button--link" onclick={this.showDebug.bind(this, error)}>
+            <Button className="Button Button--link" onclick={this.showDebug.bind(this, error, formattedError)}>
               Debug
             </Button>,
           ],
-        });
+        };
 
         try {
           options.errorHandler(error);
         } catch (error) {
-          this.alerts.show(error.alert);
+          if (isDebug && error.xhr) {
+            const { method, url } = error.options;
+            const { status = '' } = error.xhr;
+
+            console.group(`${method} ${url} ${status}`);
+
+            console.error(...(formattedError || [error]));
+
+            console.groupEnd();
+          }
+
+          this.requestErrorAlert = this.alerts.show(error.alert, error.alert.content);
         }
 
-        deferred.reject(error);
+        return Promise.reject(error);
       }
     );
-
-    return deferred.promise;
   }
 
   /**
    * @param {RequestError} error
+   * @param {string[]} [formattedError]
    * @private
    */
-  showDebug(error) {
-    this.alerts.dismiss(this.requestError.alert);
+  showDebug(error, formattedError) {
+    this.alerts.dismiss(this.requestErrorAlert);
 
-    this.modal.show(new RequestErrorModal({ error }));
+    this.modal.show(RequestErrorModal, { error, formattedError });
   }
 
   /**
@@ -367,9 +432,19 @@ export default class Application {
    * @public
    */
   route(name, params = {}) {
-    const url = this.routes[name].path.replace(/:([^\/]+)/g, (m, key) => extract(params, key));
-    const queryString = m.route.buildQueryString(params);
-    const prefix = m.route.mode === 'pathname' ? app.forum.attribute('basePath') : '';
+    const route = this.routes[name];
+
+    if (!route) throw new Error(`Route '${name}' does not exist`);
+
+    const url = route.path.replace(/:([^\/]+)/g, (m, key) => extract(params, key));
+
+    // Remove falsy values in params to avoid having urls like '/?sort&q'
+    for (const key in params) {
+      if (params.hasOwnProperty(key) && !params[key]) delete params[key];
+    }
+
+    const queryString = m.buildQueryString(params);
+    const prefix = m.route.prefix === '' ? this.forum.attribute('basePath') : '';
 
     return prefix + url + (queryString ? '?' + queryString : '');
   }

js/src/common/Component.js

@@ -1,221 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-/**
- * The `Component` class defines a user interface 'building block'. A component
- * can generate a virtual DOM to be rendered on each redraw.
- *
- * An instance's virtual DOM can be retrieved directly using the {@link
- * Component#render} method.
- *
- * @example
- * this.myComponentInstance = new MyComponent({foo: 'bar'});
- * return m('div', this.myComponentInstance.render());
- *
- * Alternatively, components can be nested, letting Mithril take care of
- * instance persistence. For this, the static {@link Component.component} method
- * can be used.
- *
- * @example
- * return m('div', MyComponent.component({foo: 'bar'));
- *
- * @see https://lhorie.github.io/mithril/mithril.component.html
- * @abstract
- */
-export default class Component {
-  /**
-   * @param {Object} props
-   * @param {Array|Object} children
-   * @public
-   */
-  constructor(props = {}, children = null) {
-    if (children) props.children = children;
-
-    this.constructor.initProps(props);
-
-    /**
-     * The properties passed into the component.
-     *
-     * @type {Object}
-     */
-    this.props = props;
-
-    /**
-     * The root DOM element for the component.
-     *
-     * @type DOMElement
-     * @public
-     */
-    this.element = null;
-
-    /**
-     * Whether or not to retain the component's subtree on redraw.
-     *
-     * @type {boolean}
-     * @public
-     */
-    this.retain = false;
-
-    this.init();
-  }
-
-  /**
-   * Called when the component is constructed.
-   *
-   * @protected
-   */
-  init() {}
-
-  /**
-   * Called when the component is destroyed, i.e. after a redraw where it is no
-   * longer a part of the view.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.component.html#unloading-components
-   * @param {Object} e
-   * @public
-   */
-  onunload() {}
-
-  /**
-   * Get the renderable virtual DOM that represents the component's view.
-   *
-   * This should NOT be overridden by subclasses. Subclasses wishing to define
-   * their virtual DOM should override Component#view instead.
-   *
-   * @example
-   * this.myComponentInstance = new MyComponent({foo: 'bar'});
-   * return m('div', this.myComponentInstance.render());
-   *
-   * @returns {Object}
-   * @final
-   * @public
-   */
-  render() {
-    const vdom = this.retain ? { subtree: 'retain' } : this.view();
-
-    // Override the root element's config attribute with our own function, which
-    // will set the component instance's element property to the root DOM
-    // element, and then run the component class' config method.
-    vdom.attrs = vdom.attrs || {};
-
-    const originalConfig = vdom.attrs.config;
-
-    vdom.attrs.config = (...args) => {
-      this.element = args[0];
-      this.config.apply(this, args.slice(1));
-      if (originalConfig) originalConfig.apply(this, args);
-    };
-
-    return vdom;
-  }
-
-  /**
-   * Returns a jQuery object for this component's element. If you pass in a
-   * selector string, this method will return a jQuery object, using the current
-   * element as its buffer.
-   *
-   * For example, calling `component.$('li')` will return a jQuery object
-   * containing all of the `li` elements inside the DOM element of this
-   * component.
-   *
-   * @param {String} [selector] a jQuery-compatible selector string
-   * @returns {jQuery} the jQuery object for the DOM node
-   * @final
-   * @public
-   */
-  $(selector) {
-    const $element = $(this.element);
-
-    return selector ? $element.find(selector) : $element;
-  }
-
-  /**
-   * Called after the component's root element is redrawn. This hook can be used
-   * to perform any actions on the DOM, both on the initial draw and any
-   * subsequent redraws. See Mithril's documentation for more information.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.html#the-config-attribute
-   * @param {Boolean} isInitialized
-   * @param {Object} context
-   * @param {Object} vdom
-   * @public
-   */
-  config() {}
-
-  /**
-   * Get the virtual DOM that represents the component's view.
-   *
-   * @return {Object} The virtual DOM
-   * @protected
-   */
-  view() {
-    throw new Error('Component#view must be implemented by subclass');
-  }
-
-  /**
-   * Get a Mithril component object for this component, preloaded with props.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.component.html
-   * @param {Object} [props] Properties to set on the component
-   * @param children
-   * @return {Object} The Mithril component object
-   * @property {function} controller
-   * @property {function} view
-   * @property {Object} component The class of this component
-   * @property {Object} props The props that were passed to the component
-   * @public
-   */
-  static component(props = {}, children = null) {
-    const componentProps = Object.assign({}, props);
-
-    if (children) componentProps.children = children;
-
-    this.initProps(componentProps);
-
-    // Set up a function for Mithril to get the component's view. It will accept
-    // the component's controller (which happens to be the component itself, in
-    // our case), update its props with the ones supplied, and then render the view.
-    const view = (component) => {
-      component.props = componentProps;
-      return component.render();
-    };
-
-    // Mithril uses this property on the view function to cache component
-    // controllers between redraws, thus persisting component state.
-    view.$original = this.prototype.view;
-
-    // Our output object consists of a controller constructor + a view function
-    // which Mithril will use to instantiate and render the component. We also
-    // attach a reference to the props that were passed through and the
-    // component's class for reference.
-    const output = {
-      controller: this.bind(undefined, componentProps),
-      view: view,
-      props: componentProps,
-      component: this,
-    };
-
-    // If a `key` prop was set, then we'll assume that we want that to actually
-    // show up as an attribute on the component object so that Mithril's key
-    // algorithm can be applied.
-    if (componentProps.key) {
-      output.attrs = { key: componentProps.key };
-    }
-
-    return output;
-  }
-
-  /**
-   * Initialize the component's props.
-   *
-   * @param {Object} props
-   * @public
-   */
-  static initProps(props) {}
-}

js/src/common/Component.ts

@@ -0,0 +1,168 @@
+import * as Mithril from 'mithril';
+
+let deprecatedPropsWarned = false;
+let deprecatedInitPropsWarned = false;
+
+export interface ComponentAttrs extends Mithril.Attributes {}
+
+/**
+ * The `Component` class defines a user interface 'building block'. A component
+ * generates a virtual DOM to be rendered on each redraw.
+ *
+ * Essentially, this is a wrapper for Mithril's components that adds several useful features:
+ *
+ *  - In the `oninit` and `onbeforeupdate` lifecycle hooks, we store vnode attrs in `this.attrs.
+ *    This allows us to use attrs across components without having to pass the vnode to every single
+ *    method.
+ *  - The static `initAttrs` method allows a convenient way to provide defaults (or to otherwise modify)
+ *    the attrs that have been passed into a component.
+ *  - When the component is created in the DOM, we store its DOM element under `this.element`; this lets
+ *    us use jQuery to modify child DOM state from internal methods via the `this.$()` method.
+ *  - A convenience `component` method, which serves as an alternative to hyperscript and JSX.
+ *
+ * As with other Mithril components, components extending Component can be initialized
+ * and nested using JSX, hyperscript, or a combination of both. The `component` method can also
+ * be used.
+ *
+ * @example
+ * return m('div', <MyComponent foo="bar"><p>Hello World</p></MyComponent>);
+ *
+ * @example
+ * return m('div', MyComponent.component({foo: 'bar'), m('p', 'Hello World!'));
+ *
+ * @see https://mithril.js.org/components.html
+ */
+export default abstract class Component<T extends ComponentAttrs = ComponentAttrs> implements Mithril.ClassComponent<T> {
+  /**
+   * The root DOM element for the component.
+   */
+  protected element!: Element;
+
+  /**
+   * The attributes passed into the component.
+   *
+   * @see https://mithril.js.org/components.html#passing-data-to-components
+   */
+  protected attrs!: T;
+
+  /**
+   * @inheritdoc
+   */
+  abstract view(vnode: Mithril.Vnode<T, this>): Mithril.Children;
+
+  /**
+   * @inheritdoc
+   */
+  oninit(vnode: Mithril.Vnode<T, this>) {
+    this.setAttrs(vnode.attrs);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  oncreate(vnode: Mithril.VnodeDOM<T, this>) {
+    this.element = vnode.dom;
+  }
+
+  /**
+   * @inheritdoc
+   */
+  onbeforeupdate(vnode: Mithril.VnodeDOM<T, this>) {
+    this.setAttrs(vnode.attrs);
+  }
+
+  /**
+   * Returns a jQuery object for this component's element. If you pass in a
+   * selector string, this method will return a jQuery object, using the current
+   * element as its buffer.
+   *
+   * For example, calling `component.$('li')` will return a jQuery object
+   * containing all of the `li` elements inside the DOM element of this
+   * component.
+   *
+   * @param {String} [selector] a jQuery-compatible selector string
+   * @returns {jQuery} the jQuery object for the DOM node
+   * @final
+   */
+  protected $(selector) {
+    const $element = $(this.element);
+
+    return selector ? $element.find(selector) : $element;
+  }
+
+  /**
+   * Convenience method to attach a component without JSX.
+   * Has the same effect as calling `m(THIS_CLASS, attrs, children)`.
+   *
+   * @see https://mithril.js.org/hyperscript.html#mselector,-attributes,-children
+   */
+  static component(attrs = {}, children = null): Mithril.Vnode {
+    const componentAttrs = Object.assign({}, attrs);
+
+    return m(this as any, componentAttrs, children);
+  }
+
+  /**
+   * Saves a reference to the vnode attrs after running them through initAttrs,
+   * and checking for common issues.
+   */
+  private setAttrs(attrs: T = {} as T): void {
+    (this.constructor as typeof Component).initAttrs(attrs);
+
+    if (attrs) {
+      if ('children' in attrs) {
+        throw new Error(
+          `[${
+            (this.constructor as any).name
+          }] The "children" attribute of attrs should never be used. Either pass children in as the vnode children or rename the attribute`
+        );
+      }
+
+      if ('tag' in attrs) {
+        throw new Error(`[${(this.constructor as any).name}] You cannot use the "tag" attribute name with Mithril 2.`);
+      }
+    }
+
+    this.attrs = attrs;
+  }
+
+  /**
+   * Initialize the component's attrs.
+   *
+   * This can be used to assign default values for missing, optional attrs.
+   */
+  protected static initAttrs<T>(attrs: T): void {
+    // Deprecated, part of Mithril 2 BC layer
+    if ('initProps' in this && !deprecatedInitPropsWarned) {
+      deprecatedInitPropsWarned = true;
+      console.warn('initProps is deprecated, please use initAttrs instead.');
+      (this as any).initProps(attrs);
+    }
+  }
+
+  // BEGIN DEPRECATED MITHRIL 2 BC LAYER
+
+  /**
+   * The attributes passed into the component.
+   *
+   * @see https://mithril.js.org/components.html#passing-data-to-components
+   *
+   * @deprecated, use attrs instead.
+   */
+  get props() {
+    if (!deprecatedPropsWarned) {
+      deprecatedPropsWarned = true;
+      console.warn('this.props is deprecated, please use this.attrs instead.');
+    }
+    return this.attrs;
+  }
+  set props(props) {
+    if (!deprecatedPropsWarned) {
+      deprecatedPropsWarned = true;
+      console.warn('this.props is deprecated, please use this.attrs instead.');
+    }
+    this.attrs = props;
+  }
+
+  // END DEPRECATED MITHRIL 2 BC LAYER
+}

js/src/common/Fragment.ts

@@ -0,0 +1,74 @@
+import * as Mithril from 'mithril';
+
+/**
+ * The `Fragment` class represents a chunk of DOM that is rendered once with Mithril and then takes
+ * over control of its own DOM and lifecycle.
+ *
+ * This is very similar to the `Component` wrapper class, but is used for more fine-grained control over
+ * the rendering and display of some significant chunks of the DOM. In contrast to components, fragments
+ * do not offer Mithril's lifecycle hooks.
+ *
+ * Use this when you want to enjoy the benefits of JSX / VDOM for initial rendering, combined with
+ * small helper methods that then make updates to that DOM directly, instead of fully redrawing
+ * everything through Mithril.
+ *
+ * This should only be used when necessary, and only with `m.render`. If you are unsure whether you need
+ * this or `Component, you probably need `Component`.
+ */
+export default abstract class Fragment {
+  /**
+   * The root DOM element for the fragment.
+   */
+  protected element!: Element;
+
+  /**
+   * Returns a jQuery object for this fragment's element. If you pass in a
+   * selector string, this method will return a jQuery object, using the current
+   * element as its buffer.
+   *
+   * For example, calling `fragment.$('li')` will return a jQuery object
+   * containing all of the `li` elements inside the DOM element of this
+   * fragment.
+   *
+   * @param {String} [selector] a jQuery-compatible selector string
+   * @returns {jQuery} the jQuery object for the DOM node
+   * @final
+   */
+  public $(selector) {
+    const $element = $(this.element);
+
+    return selector ? $element.find(selector) : $element;
+  }
+
+  /**
+   * Get the renderable virtual DOM that represents the fragment's view.
+   *
+   * This should NOT be overridden by subclasses. Subclasses wishing to define
+   * their virtual DOM should override Fragment#view instead.
+   *
+   * @example
+   * const fragment = new MyFragment();
+   * m.render(document.body, fragment.render());
+   *
+   * @final
+   */
+  public render(): Mithril.Vnode<Mithril.Attributes, this> {
+    const vdom = this.view();
+
+    vdom.attrs = vdom.attrs || {};
+
+    const originalOnCreate = vdom.attrs.oncreate;
+
+    vdom.attrs.oncreate = (vnode) => {
+      this.element = vnode.dom;
+      if (originalOnCreate) originalOnCreate.apply(this, [vnode]);
+    };
+
+    return vdom;
+  }
+
+  /**
+   * Creates a view out of virtual elements.
+   */
+  abstract view(): Mithril.Vnode<Mithril.Attributes, this>;
+}

js/src/common/Model.js

@@ -161,7 +161,7 @@ export default class Model {
           {
             method: this.exists ? 'PATCH' : 'POST',
             url: app.forum.attribute('apiUrl') + this.apiEndpoint(),
-            data: request,
+            body: request,
           },
           options
         )
@@ -180,7 +180,7 @@ export default class Model {
         // old data! We'll revert to that and let others handle the error.
         (response) => {
           this.pushData(oldData);
-          m.lazyRedraw();
+          m.redraw();
           throw response;
         }
       );
@@ -189,13 +189,13 @@ export default class Model {
   /**
    * Send a request to delete the resource.
    *
-   * @param {Object} data Data to send along with the DELETE request.
+   * @param {Object} body Data to send along with the DELETE request.
    * @param {Object} [options]
    * @return {Promise}
    * @public
    */
-  delete(data, options = {}) {
-    if (!this.exists) return m.deferred().resolve().promise;
+  delete(body, options = {}) {
+    if (!this.exists) return Promise.resolve();
 
     return app
       .request(
@@ -203,7 +203,7 @@ export default class Model {
           {
             method: 'DELETE',
             url: app.forum.attribute('apiUrl') + this.apiEndpoint(),
-            data,
+            body,
           },
           options
         )

js/src/common/Session.js

@@ -30,13 +30,13 @@ export default class Session {
    * @return {Promise}
    * @public
    */
-  login(data, options = {}) {
+  login(body, options = {}) {
     return app.request(
       Object.assign(
         {
           method: 'POST',
-          url: app.forum.attribute('baseUrl') + '/login',
-          data,
+          url: `${app.forum.attribute('baseUrl')}/login`,
+          body,
         },
         options
       )
@@ -49,6 +49,6 @@ export default class Session {
    * @public
    */
   logout() {
-    window.location = app.forum.attribute('baseUrl') + '/logout?token=' + this.csrfToken;
+    window.location = `${app.forum.attribute('baseUrl')}/logout?token=${this.csrfToken}`;
   }
 }

js/src/common/Store.js

@@ -82,13 +82,13 @@ export default class Store {
    * @public
    */
   find(type, id, query = {}, options = {}) {
-    let data = query;
+    let params = query;
     let url = app.forum.attribute('apiUrl') + '/' + type;
 
     if (id instanceof Array) {
       url += '?filter[id]=' + id.join(',');
     } else if (typeof id === 'object') {
-      data = id;
+      params = id;
     } else if (id) {
       url += '/' + id;
     }
@@ -99,7 +99,7 @@ export default class Store {
           {
             method: 'GET',
             url,
-            data,
+            params,
           },
           options
         )

js/src/common/Translator.js

@@ -1,4 +1,3 @@
-import User from './models/User';
 import username from './helpers/username';
 import extract from './utils/extract';
 
@@ -71,18 +70,34 @@ export default class Translator {
       const match = part.match(new RegExp('{([a-z0-9_]+)}|<(/?)([a-z0-9_]+)>', 'i'));
 
       if (match) {
+        // Either an opening or closing tag.
         if (match[1]) {
           open[0].push(input[match[1]]);
         } else if (match[3]) {
           if (match[2]) {
+            // Closing tag. We start by removing all raw children (generally in the form of strings) from the temporary
+            // holding array, then run them through m.fragment to convert them to vnodes. Usually this will just give us a
+            // text vnode, but using m.fragment as opposed to an explicit conversion should be more flexible. This is necessary because
+            // otherwise, our generated vnode will have raw strings as its children, and mithril expects vnodes.
+            // Finally, we add the now-processed vnodes back onto the holding array (which is the same object in memory as the
+            // children array of the vnode we are currently processing), and remove the reference to the holding array so that
+            // further text will be added to the full set of returned elements.
+            const rawChildren = open[0].splice(0, open[0].length);
+            open[0].push(...m.fragment(rawChildren).children);
             open.shift();
           } else {
+            // If a vnode with a matching tag was provided in the translator input, we use that. Otherwise, we create a new vnode
+            // with this tag, and an empty children array (since we're expecting to insert children, as that's the point of having this in translator)
             let tag = input[match[3]] || { tag: match[3], children: [] };
             open[0].push(tag);
+            // Insert the tag's children array as the first element of open, so that text in between the opening
+            // and closing tags will be added to the tag's children, not to the full set of returned elements.
             open.unshift(tag.children || tag);
           }
         }
       } else {
+        // Not an html tag, we add it to open[0], which is either the full set of returned elements (vnodes and text),
+        // or if an html tag is currently being processed, the children attribute of that html tag's vnode.
         open[0].push(part);
       }
     });

js/src/common/compat.js

@@ -12,15 +12,19 @@ import anchorScroll from './utils/anchorScroll';
 import RequestError from './utils/RequestError';
 import abbreviateNumber from './utils/abbreviateNumber';
 import * as string from './utils/string';
+import Stream from './utils/Stream';
 import SubtreeRetainer from './utils/SubtreeRetainer';
+import setRouteWithForcedRefresh from './utils/setRouteWithForcedRefresh';
 import extract from './utils/extract';
 import ScrollListener from './utils/ScrollListener';
 import stringToColor from './utils/stringToColor';
+import subclassOf from './utils/subclassOf';
 import patchMithril from './utils/patchMithril';
 import classList from './utils/classList';
 import extractText from './utils/extractText';
 import formatNumber from './utils/formatNumber';
 import mapRoutes from './utils/mapRoutes';
+import withAttr from './utils/withAttr';
 import Notification from './models/Notification';
 import User from './models/User';
 import Post from './models/Post';
@@ -30,6 +34,7 @@ import Forum from './models/Forum';
 import Component from './Component';
 import Translator from './Translator';
 import AlertManager from './components/AlertManager';
+import Page from './components/Page';
 import Switch from './components/Switch';
 import Badge from './components/Badge';
 import LoadingIndicator from './components/LoadingIndicator';
@@ -42,6 +47,7 @@ import FieldSet from './components/FieldSet';
 import Select from './components/Select';
 import Navigation from './components/Navigation';
 import Alert from './components/Alert';
+import Link from './components/Link';
 import LinkButton from './components/LinkButton';
 import Checkbox from './components/Checkbox';
 import SelectDropdown from './components/SelectDropdown';
@@ -60,6 +66,7 @@ import highlight from './helpers/highlight';
 import username from './helpers/username';
 import userOnline from './helpers/userOnline';
 import listItems from './helpers/listItems';
+import Fragment from './Fragment';
 
 export default {
   extend: extend,
@@ -80,11 +87,15 @@ export default {
   'utils/extract': extract,
   'utils/ScrollListener': ScrollListener,
   'utils/stringToColor': stringToColor,
+  'utils/Stream': Stream,
+  'utils/subclassOf': subclassOf,
+  'utils/setRouteWithForcedRefresh': setRouteWithForcedRefresh,
   'utils/patchMithril': patchMithril,
   'utils/classList': classList,
   'utils/extractText': extractText,
   'utils/formatNumber': formatNumber,
   'utils/mapRoutes': mapRoutes,
+  'utils/withAttr': withAttr,
   'models/Notification': Notification,
   'models/User': User,
   'models/Post': Post,
@@ -92,8 +103,10 @@ export default {
   'models/Group': Group,
   'models/Forum': Forum,
   Component: Component,
+  Fragment: Fragment,
   Translator: Translator,
   'components/AlertManager': AlertManager,
+  'components/Page': Page,
   'components/Switch': Switch,
   'components/Badge': Badge,
   'components/LoadingIndicator': LoadingIndicator,
@@ -106,6 +119,7 @@ export default {
   'components/Select': Select,
   'components/Navigation': Navigation,
   'components/Alert': Alert,
+  'components/Link': Link,
   'components/LinkButton': LinkButton,
   'components/Checkbox': Checkbox,
   'components/SelectDropdown': SelectDropdown,

js/src/common/components/Alert.tsx

@@ -1,31 +1,33 @@
-import Component from '../Component';
+import Component, { ComponentAttrs } from '../Component';
 import Button from './Button';
 import listItems from '../helpers/listItems';
 import extract from '../utils/extract';
+import Mithril from 'mithril';
+
+export interface AlertAttrs extends ComponentAttrs {
+  /** The type of alert this is. Will be used to give the alert a class name of `Alert--{type}`. */
+  type?: string;
+  /** An array of controls to show in the alert. */
+  controls?: Mithril.Children;
+  /** Whether or not the alert can be dismissed. */
+  dismissible?: boolean;
+  /** A callback to run when the alert is dismissed */
+  ondismiss?: Function;
+}
 
 /**
  * The `Alert` component represents an alert box, which contains a message,
  * some controls, and may be dismissible.
- *
- * The alert may have the following special props:
- *
- * - `type` The type of alert this is. Will be used to give the alert a class
- *   name of `Alert--{type}`.
- * - `controls` An array of controls to show in the alert.
- * - `dismissible` Whether or not the alert can be dismissed.
- * - `ondismiss` A callback to run when the alert is dismissed.
- *
- * All other props will be assigned as attributes on the alert element.
  */
-export default class Alert extends Component {
-  view() {
-    const attrs = Object.assign({}, this.props);
+export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<T> {
+  view(vnode: Mithril.Vnode) {
+    const attrs = Object.assign({}, this.attrs);
 
     const type = extract(attrs, 'type');
     attrs.className = 'Alert Alert--' + type + ' ' + (attrs.className || '');
 
-    const children = extract(attrs, 'children');
-    const controls = extract(attrs, 'controls') || [];
+    const content = extract(attrs, 'content') || vnode.children;
+    const controls = (extract(attrs, 'controls') || []) as Mithril.ChildArray;
 
     // If the alert is meant to be dismissible (which is the case by default),
     // then we will create a dismiss button to append as the final control in
@@ -40,7 +42,7 @@ export default class Alert extends Component {
 
     return (
       <div {...attrs}>
-        <span className="Alert-body">{children}</span>
+        <span className="Alert-body">{content}</span>
         <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
       </div>
     );

js/src/common/components/AlertManager.js

@@ -6,72 +6,23 @@ import Alert from './Alert';
  * be shown and dismissed.
  */
 export default class AlertManager extends Component {
-  init() {
-    /**
-     * An array of Alert components which are currently showing.
-     *
-     * @type {Alert[]}
-     * @protected
-     */
-    this.components = [];
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.state = this.attrs.state;
   }
 
   view() {
     return (
       <div className="AlertManager">
-        {this.components.map((component) => (
-          <div className="AlertManager-alert">{component}</div>
+        {Object.entries(this.state.getActiveAlerts()).map(([key, alert]) => (
+          <div className="AlertManager-alert">
+            <alert.componentClass {...alert.attrs} ondismiss={this.state.dismiss.bind(this.state, key)}>
+              {alert.children}
+            </alert.componentClass>
+          </div>
         ))}
       </div>
     );
   }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Show an Alert in the alerts area.
-   *
-   * @param {Alert} component
-   * @public
-   */
-  show(component) {
-    if (!(component instanceof Alert)) {
-      throw new Error('The AlertManager component can only show Alert components');
-    }
-
-    component.props.ondismiss = this.dismiss.bind(this, component);
-
-    this.components.push(component);
-    m.redraw();
-  }
-
-  /**
-   * Dismiss an alert.
-   *
-   * @param {Alert} component
-   * @public
-   */
-  dismiss(component) {
-    const index = this.components.indexOf(component);
-
-    if (index !== -1) {
-      this.components.splice(index, 1);
-      m.redraw();
-    }
-  }
-
-  /**
-   * Clear all alerts.
-   *
-   * @public
-   */
-  clear() {
-    this.components = [];
-    m.redraw();
-  }
 }

js/src/common/components/Badge.js

@@ -6,18 +6,18 @@ import extract from '../utils/extract';
  * The `Badge` component represents a user/discussion badge, indicating some
  * status (e.g. a discussion is stickied, a user is an admin).
  *
- * A badge may have the following special props:
+ * A badge may have the following special attrs:
  *
  * - `type` The type of badge this is. This will be used to give the badge a
  *   class name of `Badge--{type}`.
  * - `icon` The name of an icon to show inside the badge.
  * - `label`
  *
- * All other props will be assigned as attributes on the badge element.
+ * All other attrs will be assigned as attributes on the badge element.
  */
 export default class Badge extends Component {
   view() {
-    const attrs = Object.assign({}, this.props);
+    const attrs = Object.assign({}, this.attrs);
     const type = extract(attrs, 'type');
     const iconName = extract(attrs, 'icon');
 
@@ -27,9 +27,9 @@ export default class Badge extends Component {
     return <span {...attrs}>{iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;')}</span>;
   }
 
-  config(isInitialized) {
-    if (isInitialized) return;
+  oncreate(vnode) {
+    super.oncreate(vnode);
 
-    if (this.props.label) this.$().tooltip({ container: 'body' });
+    if (this.attrs.label) this.$().tooltip();
   }
 }

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" /> : '',
     ];
   }
 }

js/src/common/components/Checkbox.js

@@ -1,39 +1,40 @@
 import Component from '../Component';
 import LoadingIndicator from './LoadingIndicator';
 import icon from '../helpers/icon';
+import classList from '../utils/classList';
+import withAttr from '../utils/withAttr';
 
 /**
  * The `Checkbox` component defines a checkbox input.
  *
- * ### Props
+ * ### Attrs
  *
  * - `state` Whether or not the checkbox is checked.
  * - `className` The class name for the root element.
  * - `disabled` Whether or not the checkbox is disabled.
+ * - `loading` Whether or not the checkbox is loading.
  * - `onchange` A callback to run when the checkbox is checked/unchecked.
  * - `children` A text label to display next to the checkbox.
  */
 export default class Checkbox extends Component {
-  init() {
-    /**
-     * Whether or not the checkbox's value is in the process of being saved.
-     *
-     * @type {Boolean}
-     * @public
-     */
-    this.loading = false;
-  }
+  view(vnode) {
+    // Sometimes, false is stored in the DB as '0'. This is a temporary
+    // conversion layer until a more robust settings encoding is introduced
+    if (this.attrs.state === '0') this.attrs.state = false;
 
-  view() {
-    let className = 'Checkbox ' + (this.props.state ? 'on' : 'off') + ' ' + (this.props.className || '');
-    if (this.loading) className += ' loading';
-    if (this.props.disabled) className += ' disabled';
+    const className = classList([
+      'Checkbox',
+      this.attrs.state ? 'on' : 'off',
+      this.attrs.className,
+      this.attrs.loading && 'loading',
+      this.attrs.disabled && 'disabled',
+    ]);
 
     return (
       <label className={className}>
-        <input type="checkbox" checked={this.props.state} disabled={this.props.disabled} onchange={m.withAttr('checked', this.onchange.bind(this))} />
+        <input type="checkbox" checked={this.attrs.state} disabled={this.attrs.disabled} onchange={withAttr('checked', this.onchange.bind(this))} />
         <div className="Checkbox-display">{this.getDisplay()}</div>
-        {this.props.children}
+        {vnode.children}
       </label>
     );
   }
@@ -45,7 +46,7 @@ export default class Checkbox extends Component {
    * @protected
    */
   getDisplay() {
-    return this.loading ? LoadingIndicator.component({ size: 'tiny' }) : icon(this.props.state ? 'fas fa-check' : 'fas fa-times');
+    return this.attrs.loading ? <LoadingIndicator size="tiny" /> : icon(this.attrs.state ? 'fas fa-check' : 'fas fa-times');
   }
 
   /**
@@ -55,6 +56,6 @@ export default class Checkbox extends Component {
    * @protected
    */
   onchange(checked) {
-    if (this.props.onchange) this.props.onchange(checked, this);
+    if (this.attrs.onchange) this.attrs.onchange(checked, this);
   }
 }

js/src/common/components/ConfirmDocumentUnload.js

@@ -0,0 +1,40 @@
+import Component from '../Component';
+
+/**
+ * The `ConfirmDocumentUnload` component can be used to register a global
+ * event handler that prevents closing the browser window/tab based on the
+ * return value of a given callback prop.
+ *
+ * ### Attrs
+ *
+ * - `when` - a callback returning true when the browser should prompt for
+ *            confirmation before closing the window/tab
+ *
+ * ### Children
+ *
+ * NOTE: Only the first child will be rendered. (Use this component to wrap
+ * another component / DOM element.)
+ *
+ */
+export default class ConfirmDocumentUnload extends Component {
+  handler() {
+    return this.attrs.when() || undefined;
+  }
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    this.boundHandler = this.handler.bind(this);
+    $(window).on('beforeunload', this.boundHandler);
+  }
+
+  onremove() {
+    $(window).off('beforeunload', this.boundHandler);
+  }
+
+  view(vnode) {
+    // To avoid having to render another wrapping <div> here, we assume that
+    // this component is only wrapped around a single element / component.
+    return vnode.children[0];
+  }
+}

js/src/common/components/Dropdown.js

@@ -6,7 +6,7 @@ import listItems from '../helpers/listItems';
  * The `Dropdown` component displays a button which, when clicked, shows a
  * dropdown menu beneath it.
  *
- * ### Props
+ * ### Attrs
  *
  * - `buttonClassName` A class name to apply to the dropdown toggle button.
  * - `menuClassName` A class name to apply to the dropdown menu.
@@ -19,33 +19,33 @@ import listItems from '../helpers/listItems';
  * The children will be displayed as a list inside of the dropdown menu.
  */
 export default class Dropdown extends Component {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || '';
-    props.buttonClassName = props.buttonClassName || '';
-    props.menuClassName = props.menuClassName || '';
-    props.label = props.label || '';
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fas fa-caret-down';
+  static initAttrs(attrs) {
+    attrs.className = attrs.className || '';
+    attrs.buttonClassName = attrs.buttonClassName || '';
+    attrs.menuClassName = attrs.menuClassName || '';
+    attrs.label = attrs.label || '';
+    attrs.caretIcon = typeof attrs.caretIcon !== 'undefined' ? attrs.caretIcon : 'fas fa-caret-down';
   }
 
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     this.showing = false;
   }
 
-  view() {
-    const items = this.props.children ? listItems(this.props.children) : [];
+  view(vnode) {
+    const items = vnode.children ? listItems(vnode.children) : [];
 
     return (
-      <div className={'ButtonGroup Dropdown dropdown ' + this.props.className + ' itemCount' + items.length + (this.showing ? ' open' : '')}>
-        {this.getButton()}
+      <div className={'ButtonGroup Dropdown dropdown ' + this.attrs.className + ' itemCount' + items.length + (this.showing ? ' open' : '')}>
+        {this.getButton(vnode.children)}
         {this.getMenu(items)}
       </div>
     );
   }
 
-  config(isInitialized) {
-    if (isInitialized) return;
+  oncreate(vnode) {
+    super.oncreate(vnode);
 
     // When opening the dropdown menu, work out if the menu goes beyond the
     // bottom of the viewport. If it does, we will apply class to make it show
@@ -53,8 +53,8 @@ export default class Dropdown extends Component {
     this.$().on('shown.bs.dropdown', () => {
       this.showing = true;
 
-      if (this.props.onshow) {
-        this.props.onshow();
+      if (this.attrs.onshow) {
+        this.attrs.onshow();
       }
 
       m.redraw();
@@ -76,8 +76,8 @@ export default class Dropdown extends Component {
     this.$().on('hidden.bs.dropdown', () => {
       this.showing = false;
 
-      if (this.props.onhide) {
-        this.props.onhide();
+      if (this.attrs.onhide) {
+        this.attrs.onhide();
       }
 
       m.redraw();
@@ -90,10 +90,10 @@ export default class Dropdown extends Component {
    * @return {*}
    * @protected
    */
-  getButton() {
+  getButton(children) {
     return (
-      <button className={'Dropdown-toggle ' + this.props.buttonClassName} data-toggle="dropdown" onclick={this.props.onclick}>
-        {this.getButtonContent()}
+      <button className={'Dropdown-toggle ' + this.attrs.buttonClassName} data-toggle="dropdown" onclick={this.attrs.onclick}>
+        {this.getButtonContent(children)}
       </button>
     );
   }
@@ -104,15 +104,15 @@ export default class Dropdown extends Component {
    * @return {*}
    * @protected
    */
-  getButtonContent() {
+  getButtonContent(children) {
     return [
-      this.props.icon ? icon(this.props.icon, { className: 'Button-icon' }) : '',
-      <span className="Button-label">{this.props.label}</span>,
-      this.props.caretIcon ? icon(this.props.caretIcon, { className: 'Button-caret' }) : '',
+      this.attrs.icon ? icon(this.attrs.icon, { className: 'Button-icon' }) : '',
+      <span className="Button-label">{this.attrs.label}</span>,
+      this.attrs.caretIcon ? icon(this.attrs.caretIcon, { className: 'Button-caret' }) : '',
     ];
   }
 
   getMenu(items) {
-    return <ul className={'Dropdown-menu dropdown-menu ' + this.props.menuClassName}>{items}</ul>;
+    return <ul className={'Dropdown-menu dropdown-menu ' + this.attrs.menuClassName}>{items}</ul>;
   }
 }

js/src/common/components/FieldSet.js

@@ -11,11 +11,11 @@ import listItems from '../helpers/listItems';
  * The children should be an array of items to show in the fieldset.
  */
 export default class FieldSet extends Component {
-  view() {
+  view(vnode) {
     return (
-      <fieldset className={this.props.className}>
-        <legend>{this.props.label}</legend>
-        <ul>{listItems(this.props.children)}</ul>
+      <fieldset className={this.attrs.className}>
+        <legend>{this.attrs.label}</legend>
+        <ul>{listItems(vnode.children)}</ul>
       </fieldset>
     );
   }

js/src/common/components/GroupBadge.js

@@ -1,16 +1,16 @@
 import Badge from './Badge';
 
 export default class GroupBadge extends Badge {
-  static initProps(props) {
-    super.initProps(props);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    if (props.group) {
-      props.icon = props.group.icon();
-      props.style = { backgroundColor: props.group.color() };
-      props.label = typeof props.label === 'undefined' ? props.group.nameSingular() : props.label;
-      props.type = 'group--' + props.group.id();
+    if (attrs.group) {
+      attrs.icon = attrs.group.icon();
+      attrs.style = { backgroundColor: attrs.group.color() };
+      attrs.label = typeof attrs.label === 'undefined' ? attrs.group.nameSingular() : attrs.label;
+      attrs.type = 'group--' + attrs.group.id();
 
-      delete props.group;
+      delete attrs.group;
     }
   }
 }

js/src/common/components/Link.js

@@ -0,0 +1,47 @@
+import Component from '../Component';
+import extract from '../utils/extract';
+
+/**
+ * The link component enables both internal and external links.
+ * It will return a regular HTML link for any links to external sites,
+ * and it will use Mithril's m.route.Link for any internal links.
+ *
+ * Links will default to internal; the 'external' attr must be set to
+ * `true` for the link to be external.
+ */
+export default class Link extends Component {
+  view(vnode) {
+    let { options = {}, ...attrs } = vnode.attrs;
+
+    attrs.href = attrs.href || '';
+
+    // For some reason, m.route.Link does not like vnode.text, so if present, we
+    // need to convert it to text vnodes and store it in children.
+    const children = vnode.children || { tag: '#', children: vnode.text };
+
+    if (attrs.external) {
+      return <a {...attrs}>{children}</a>;
+    }
+
+    // If the href URL of the link is the same as the current page path
+    // we will not add a new entry to the browser history.
+    // This allows us to still refresh the Page component
+    // without adding endless history entries.
+    if (attrs.href === m.route.get()) {
+      if (!('replace' in options)) options.replace = true;
+    }
+
+    // Mithril 2 does not completely rerender the page if a route change leads to the same route
+    // (or the same component handling a different route).
+    // Here, the `force` parameter will use Mithril's key system to force a full rerender
+    // see https://mithril.js.org/route.html#key-parameter
+    if (extract(attrs, 'force')) {
+      if (!('state' in options)) options.state = {};
+      if (!('key' in options.state)) options.state.key = Date.now();
+    }
+
+    attrs.options = options;
+
+    return <m.route.Link {...attrs}>{children}</m.route.Link>;
+  }
+}

js/src/common/components/LinkButton.js

@@ -1,11 +1,12 @@
 import Button from './Button';
+import Link from './Link';
 
 /**
  * The `LinkButton` component defines a `Button` which links to a route.
  *
- * ### Props
+ * ### Attrs
  *
- * All of the props accepted by `Button`, plus:
+ * All of the attrs accepted by `Button`, plus:
  *
  * - `active` Whether or not the page that this button links to is currently
  *   active.
@@ -13,26 +14,28 @@ import Button from './Button';
  *   the `active` prop will automatically be set to true.
  */
 export default class LinkButton extends Button {
-  static initProps(props) {
-    props.active = this.isActive(props);
-    props.config = props.config || m.route;
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
+
+    attrs.active = this.isActive(attrs);
   }
 
-  view() {
-    const vdom = super.view();
+  view(vnode) {
+    const vdom = super.view(vnode);
 
-    vdom.tag = 'a';
+    vdom.tag = Link;
+    vdom.attrs.active = String(vdom.attrs.active);
 
     return vdom;
   }
 
   /**
-   * Determine whether a component with the given props is 'active'.
+   * Determine whether a component with the given attrs is 'active'.
    *
-   * @param {Object} props
+   * @param {Object} attrs
    * @return {Boolean}
    */
-  static isActive(props) {
-    return typeof props.active !== 'undefined' ? props.active : m.route() === props.href;
+  static isActive(attrs) {
+    return typeof attrs.active !== 'undefined' ? attrs.active : m.route.get() === attrs.href;
   }
 }

js/src/common/components/LoadingIndicator.js

@@ -2,16 +2,17 @@ import Component from '../Component';
 import { Spinner } from 'spin.js';
 
 /**
- * The `LoadingIndicator` component displays a loading spinner with spin.js. It
- * may have the following special props:
+ * The `LoadingIndicator` component displays a loading spinner with spin.js.
+ *
+ * ### Attrs
  *
  * - `size` The spin.js size preset to use. Defaults to 'small'.
  *
- * All other props will be assigned as attributes on the element.
+ * All other attrs will be assigned as attributes on the DOM element.
  */
 export default class LoadingIndicator extends Component {
   view() {
-    const attrs = Object.assign({}, this.props);
+    const attrs = Object.assign({}, this.attrs);
 
     attrs.className = 'LoadingIndicator ' + (attrs.className || '');
     delete attrs.size;
@@ -19,12 +20,12 @@ export default class LoadingIndicator extends Component {
     return <div {...attrs}>{m.trust('&nbsp;')}</div>;
   }
 
-  config(isInitialized) {
-    if (isInitialized) return;
+  oncreate(vnode) {
+    super.oncreate(vnode);
 
     const options = { zIndex: 'auto', color: this.$().css('color') };
 
-    switch (this.props.size) {
+    switch (this.attrs.size) {
       case 'large':
         Object.assign(options, { lines: 10, length: 8, width: 4, radius: 8 });
         break;

js/src/common/components/Modal.js

@@ -9,24 +9,45 @@ import Button from './Button';
  * @abstract
  */
 export default class Modal extends Component {
-  init() {
-    /**
-     * An alert component to show below the header.
-     *
-     * @type {Alert}
-     */
-    this.alert = null;
+  /**
+   * Determine whether or not the modal should be dismissible via an 'x' button.
+   */
+  static isDismissible = true;
+
+  /**
+   * Attributes for an alert component to show below the header.
+   *
+   * @type {object}
+   */
+  alertAttrs = null;
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    this.attrs.animateShow(() => this.onready());
+  }
+
+  onbeforeremove() {
+    // If the global modal state currently contains a modal,
+    // we've just opened up a new one, and accordingly,
+    // we don't need to show a hide animation.
+    if (!this.attrs.state.modal) {
+      this.attrs.animateHide();
+      // Here, we ensure that the animation has time to complete.
+      // See https://mithril.js.org/lifecycle-methods.html#onbeforeremove
+      return new Promise((resolve) => setTimeout(resolve, 1000));
+    }
   }
 
   view() {
-    if (this.alert) {
-      this.alert.props.dismissible = false;
+    if (this.alertAttrs) {
+      this.alertAttrs.dismissible = false;
     }
 
     return (
       <div className={'Modal modal-dialog ' + this.className()}>
         <div className="Modal-content">
-          {this.isDismissible() ? (
+          {this.constructor.isDismissible ? (
             <div className="Modal-close App-backControl">
               {Button.component({
                 icon: 'fas fa-times',
@@ -43,7 +64,7 @@ export default class Modal extends Component {
               <h3 className="App-titleControl App-titleControl--text">{this.title()}</h3>
             </div>
 
-            {alert ? <div className="Modal-alert">{this.alert}</div> : ''}
+            {this.alertAttrs ? <div className="Modal-alert">{Alert.component(this.alertAttrs)}</div> : ''}
 
             {this.content()}
           </form>
@@ -52,15 +73,6 @@ export default class Modal extends Component {
     );
   }
 
-  /**
-   * Determine whether or not the modal should be dismissible via an 'x' button.
-   *
-   * @return {Boolean}
-   */
-  isDismissible() {
-    return true;
-  }
-
   /**
    * Get the class name to apply to the modal.
    *
@@ -99,13 +111,11 @@ export default class Modal extends Component {
     this.$('form').find('input, select, textarea').first().focus().select();
   }
 
-  onhide() {}
-
   /**
    * Hide the modal.
    */
   hide() {
-    app.modal.close();
+    this.attrs.state.close();
   }
 
   /**
@@ -123,7 +133,7 @@ export default class Modal extends Component {
    * @param {RequestError} error
    */
   onerror(error) {
-    this.alert = error.alert;
+    this.alertAttrs = error.alert;
 
     m.redraw();
 

js/src/common/components/ModalManager.js

@@ -1,5 +1,4 @@
 import Component from '../Component';
-import Modal from './Modal';
 
 /**
  * The `ModalManager` component manages a modal dialog. Only one modal dialog
@@ -7,48 +6,45 @@ import Modal from './Modal';
  * overwrite the previous one.
  */
 export default class ModalManager extends Component {
-  init() {
-    this.showing = false;
-    this.component = null;
-  }
-
   view() {
-    return <div className="ModalManager modal fade">{this.component && this.component.render()}</div>;
+    const modal = this.attrs.state.modal;
+
+    return (
+      <div className="ModalManager modal fade">
+        {modal
+          ? modal.componentClass.component({
+              ...modal.attrs,
+              animateShow: this.animateShow.bind(this),
+              animateHide: this.animateHide.bind(this),
+              state: this.attrs.state,
+            })
+          : ''}
+      </div>
+    );
   }
 
-  config(isInitialized, context) {
-    if (isInitialized) return;
+  oncreate(vnode) {
+    super.oncreate(vnode);
 
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-
-    this.$().on('hidden.bs.modal', this.clear.bind(this)).on('shown.bs.modal', this.onready.bind(this));
+    // Ensure the modal state is notified about a closed modal, even when the
+    // DOM-based Bootstrap JavaScript code triggered the closing of the modal,
+    // e.g. via ESC key or a click on the modal backdrop.
+    this.$().on('hidden.bs.modal', this.attrs.state.close.bind(this.attrs.state));
   }
 
-  /**
-   * Show a modal dialog.
-   *
-   * @param {Modal} component
-   * @public
-   */
-  show(component) {
-    if (!(component instanceof Modal)) {
-      throw new Error('The ModalManager component can only show Modal components');
+  animateShow(readyCallback) {
+    const dismissible = !!this.attrs.state.modal.componentClass.isDismissible;
+
+    // If we are opening this modal while another modal is already open,
+    // the shown event will not run, because the modal is already open.
+    // So, we need to manually trigger the readyCallback.
+    if (this.$().hasClass('in')) {
+      readyCallback();
+      return;
     }
 
-    clearTimeout(this.hideTimeout);
-
-    this.showing = true;
-    this.component = component;
-
-    if (app.current) app.current.retain = true;
-
-    m.redraw(true);
-
-    const dismissible = !!this.component.isDismissible();
     this.$()
+      .one('shown.bs.modal', readyCallback)
       .modal({
         backdrop: dismissible || 'static',
         keyboard: dismissible,
@@ -56,50 +52,7 @@ export default class ModalManager extends Component {
       .modal('show');
   }
 
-  /**
-   * Close the modal dialog.
-   *
-   * @public
-   */
-  close() {
-    if (!this.showing) return;
-
-    // Don't hide the modal immediately, because if the consumer happens to call
-    // the `show` method straight after to show another modal dialog, it will
-    // cause Bootstrap's modal JS to misbehave. Instead we will wait for a tiny
-    // bit to give the `show` method the opportunity to prevent this from going
-    // ahead.
-    this.hideTimeout = setTimeout(() => {
-      this.$().modal('hide');
-      this.showing = false;
-    });
-  }
-
-  /**
-   * Clear content from the modal area.
-   *
-   * @protected
-   */
-  clear() {
-    if (this.component) {
-      this.component.onhide();
-    }
-
-    this.component = null;
-
-    app.current.retain = false;
-
-    m.lazyRedraw();
-  }
-
-  /**
-   * When the modal dialog is ready to be used, tell it!
-   *
-   * @protected
-   */
-  onready() {
-    if (this.component && this.component.onready) {
-      this.component.onready(this.$());
-    }
+  animateHide() {
+    this.$().modal('hide');
   }
 }

js/src/common/components/Navigation.js

@@ -11,7 +11,7 @@ import LinkButton from './LinkButton';
  * If the app has a pane, it will also include a 'pin' button which toggles the
  * pinned state of the pane.
  *
- * Accepts the following props:
+ * Accepts the following attrs:
  *
  * - `className` The name of a class to set on the root element.
  * - `drawer` Whether or not to show a button to toggle the app's drawer if
@@ -23,7 +23,7 @@ export default class Navigation extends Component {
 
     return (
       <div
-        className={'Navigation ButtonGroup ' + (this.props.className || '')}
+        className={'Navigation ButtonGroup ' + (this.attrs.className || '')}
         onmouseenter={pane && pane.show.bind(pane)}
         onmouseleave={pane && pane.onmouseleave.bind(pane)}
       >
@@ -32,13 +32,6 @@ export default class Navigation extends Component {
     );
   }
 
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
   /**
    * Get the back button.
    *
@@ -54,7 +47,6 @@ export default class Navigation extends Component {
       href: history.backUrl(),
       icon: 'fas fa-chevron-left',
       title: previous.title,
-      config: () => {},
       onclick: (e) => {
         if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;
         e.preventDefault();
@@ -88,7 +80,7 @@ export default class Navigation extends Component {
    * @protected
    */
   getDrawerButton() {
-    if (!this.props.drawer) return '';
+    if (!this.attrs.drawer) return '';
 
     const { drawer } = app;
     const user = app.session.user;

js/src/common/components/Page.js

@@ -0,0 +1,50 @@
+import Component from '../Component';
+import PageState from '../states/PageState';
+
+/**
+ * The `Page` component
+ *
+ * @abstract
+ */
+export default class Page extends Component {
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.onNewRoute();
+
+    /**
+     * A class name to apply to the body while the route is active.
+     *
+     * @type {String}
+     */
+    this.bodyClass = '';
+  }
+
+  /**
+   * A collections of actions to run when the route changes.
+   * This is extracted here, and not hardcoded in oninit, as oninit is not called
+   * when a different route is handled by the same component, but we still need to
+   * adjust the current route name.
+   */
+  onNewRoute() {
+    app.previous = app.current;
+    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
+
+    app.drawer.hide();
+    app.modal.close();
+  }
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    if (this.bodyClass) {
+      $('#app').addClass(this.bodyClass);
+    }
+  }
+
+  onremove() {
+    if (this.bodyClass) {
+      $('#app').removeClass(this.bodyClass);
+    }
+  }
+}

js/src/common/components/Placeholder.js

@@ -4,7 +4,7 @@ import Component from '../Component';
  * The `Placeholder` component displays a muted text with some call to action,
  * usually used as an empty state.
  *
- * ### Props
+ * ### Attrs
  *
  * - `text`
  */
@@ -12,7 +12,7 @@ export default class Placeholder extends Component {
   view() {
     return (
       <div className="Placeholder">
-        <p>{this.props.text}</p>
+        <p>{this.attrs.text}</p>
       </div>
     );
   }

js/src/common/components/RequestErrorModal.js

@@ -6,22 +6,32 @@ export default class RequestErrorModal extends Modal {
   }
 
   title() {
-    return this.props.error.xhr ? this.props.error.xhr.status + ' ' + this.props.error.xhr.statusText : '';
+    return this.attrs.error.xhr ? `${this.attrs.error.xhr.status} ${this.attrs.error.xhr.statusText}` : '';
   }
 
   content() {
+    const { error, formattedError } = this.attrs;
+
     let responseText;
 
-    try {
-      responseText = JSON.stringify(JSON.parse(this.props.error.responseText), null, 2);
-    } catch (e) {
-      responseText = this.props.error.responseText;
+    // If the error is already formatted, just add line endings;
+    // else try to parse it as JSON and stringify it with indentation
+    if (formattedError) {
+      responseText = formattedError.join('\n\n');
+    } else {
+      try {
+        const json = error.response || JSON.parse(error.responseText);
+
+        responseText = JSON.stringify(json, null, 2);
+      } catch (e) {
+        responseText = error.responseText;
+      }
     }
 
     return (
       <div className="Modal-body">
         <pre>
-          {this.props.error.options.method} {this.props.error.options.url}
+          {this.attrs.error.options.method} {this.attrs.error.options.url}
           <br />
           <br />
           {responseText}

js/src/common/components/Select.js

@@ -1,9 +1,10 @@
 import Component from '../Component';
 import icon from '../helpers/icon';
+import withAttr from '../utils/withAttr';
 
 /**
  * The `Select` component displays a <select> input, surrounded with some extra
- * elements for styling. It accepts the following props:
+ * elements for styling. It accepts the following attrs:
  *
  * - `options` A map of option values to labels.
  * - `onchange` A callback to run when the selected value is changed.
@@ -12,13 +13,13 @@ import icon from '../helpers/icon';
  */
 export default class Select extends Component {
   view() {
-    const { options, onchange, value, disabled } = this.props;
+    const { options, onchange, value, disabled } = this.attrs;
 
     return (
       <span className="Select">
         <select
           className="Select-input FormControl"
-          onchange={onchange ? m.withAttr('value', onchange.bind(this)) : undefined}
+          onchange={onchange ? withAttr('value', onchange.bind(this)) : undefined}
           value={value}
           disabled={disabled}
         >

js/src/common/components/SelectDropdown.js

@@ -1,31 +1,49 @@
 import Dropdown from './Dropdown';
 import icon from '../helpers/icon';
 
+/**
+ * Determines via a vnode is currently "active".
+ * Due to changes in Mithril 2, attrs will not be instantiated until AFTER view()
+ * is initially called on the parent component, so we can not always depend on the
+ * active attr to determine which element should be displayed as the "active child".
+ *
+ * This is a temporary patch, and as so, is not exported / placed in utils.
+ */
+function isActive(vnode) {
+  const tag = vnode.tag;
+
+  if ('initAttrs' in tag) {
+    tag.initAttrs(vnode.attrs);
+  }
+
+  return 'isActive' in tag ? tag.isActive(vnode.attrs) : vnode.attrs.active;
+}
+
 /**
  * The `SelectDropdown` component is the same as a `Dropdown`, except the toggle
  * button's label is set as the label of the first child which has a truthy
  * `active` prop.
  *
- * ### Props
+ * ### Attrs
  *
  * - `caretIcon`
  * - `defaultLabel`
  */
 export default class SelectDropdown extends Dropdown {
-  static initProps(props) {
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fas fa-sort';
+  static initAttrs(attrs) {
+    attrs.caretIcon = typeof attrs.caretIcon !== 'undefined' ? attrs.caretIcon : 'fas fa-sort';
 
-    super.initProps(props);
+    super.initAttrs(attrs);
 
-    props.className += ' Dropdown--select';
+    attrs.className += ' Dropdown--select';
   }
 
-  getButtonContent() {
-    const activeChild = this.props.children.filter((child) => child.props.active)[0];
-    let label = (activeChild && activeChild.props.children) || this.props.defaultLabel;
+  getButtonContent(children) {
+    const activeChild = children.find(isActive);
+    let label = (activeChild && activeChild.children) || this.attrs.defaultLabel;
 
     if (label instanceof Array) label = label[0];
 
-    return [<span className="Button-label">{label}</span>, icon(this.props.caretIcon, { className: 'Button-caret' })];
+    return [<span className="Button-label">{label}</span>, icon(this.attrs.caretIcon, { className: 'Button-caret' })];
   }
 }

js/src/common/components/SplitDropdown.js

@@ -7,25 +7,25 @@ import icon from '../helpers/icon';
  * is displayed as its own button prior to the toggle button.
  */
 export default class SplitDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    props.className += ' Dropdown--split';
-    props.menuClassName += ' Dropdown-menu--right';
+    attrs.className += ' Dropdown--split';
+    attrs.menuClassName += ' Dropdown-menu--right';
   }
 
-  getButton() {
-    // Make a copy of the props of the first child component. We will assign
-    // these props to a new button, so that it has exactly the same behaviour as
+  getButton(children) {
+    // Make a copy of the attrs of the first child component. We will assign
+    // these attrs to a new button, so that it has exactly the same behaviour as
     // the first child.
-    const firstChild = this.getFirstChild();
-    const buttonProps = Object.assign({}, firstChild.props);
-    buttonProps.className = (buttonProps.className || '') + ' SplitDropdown-button Button ' + this.props.buttonClassName;
+    const firstChild = this.getFirstChild(children);
+    const buttonAttrs = Object.assign({}, firstChild.attrs);
+    buttonAttrs.className = (buttonAttrs.className || '') + ' SplitDropdown-button Button ' + this.attrs.buttonClassName;
 
     return [
-      Button.component(buttonProps),
-      <button className={'Dropdown-toggle Button Button--icon ' + this.props.buttonClassName} data-toggle="dropdown">
-        {icon(this.props.icon, { className: 'Button-icon' })}
+      Button.component(buttonAttrs, firstChild.children),
+      <button className={'Dropdown-toggle Button Button--icon ' + this.attrs.buttonClassName} data-toggle="dropdown">
+        {icon(this.attrs.icon, { className: 'Button-icon' })}
         {icon('fas fa-caret-down', { className: 'Button-caret' })}
       </button>,
     ];
@@ -38,8 +38,8 @@ export default class SplitDropdown extends Dropdown {
    * @return {*}
    * @protected
    */
-  getFirstChild() {
-    let firstChild = this.props.children;
+  getFirstChild(children) {
+    let firstChild = children;
 
     while (firstChild instanceof Array) firstChild = firstChild[0];
 

js/src/common/components/Switch.js

@@ -5,13 +5,13 @@ import Checkbox from './Checkbox';
  * a tick/cross one.
  */
 export default class Switch extends Checkbox {
-  static initProps(props) {
-    super.initProps(props);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    props.className = (props.className || '') + ' Checkbox--switch';
+    attrs.className = (attrs.className || '') + ' Checkbox--switch';
   }
 
   getDisplay() {
-    return this.loading ? super.getDisplay() : '';
+    return this.attrs.loading ? super.getDisplay() : '';
   }
 }

js/src/common/extend/Model.js

@@ -1,4 +1,4 @@
-export default class Routes {
+export default class Model {
   type;
   attributes = [];
   hasOnes = [];

js/src/common/helpers/avatar.js

@@ -25,7 +25,7 @@ export default function avatar(user, attrs = {}) {
     if (hasTitle) attrs.title = attrs.title || username;
 
     if (avatarUrl) {
-      return <img {...attrs} src={avatarUrl} />;
+      return <img {...attrs} src={avatarUrl} alt="" />;
     }
 
     content = username.charAt(0).toUpperCase();

js/src/common/helpers/fullTime.js

@@ -6,10 +6,10 @@
  * @return {Object}
  */
 export default function fullTime(time) {
-  const mo = moment(time);
+  const d = dayjs(time);
 
-  const datetime = mo.format();
-  const full = mo.format('LLLL');
+  const datetime = d.format();
+  const full = d.format('LLLL');
 
   return (
     <time pubdate datetime={datetime}>

js/src/common/helpers/humanTime.js

@@ -9,10 +9,10 @@ import humanTimeUtil from '../utils/humanTime';
  * @return {Object}
  */
 export default function humanTime(time) {
-  const mo = moment(time);
+  const d = dayjs(time);
 
-  const datetime = mo.format();
-  const full = mo.format('LLLL');
+  const datetime = d.format();
+  const full = d.format('LLLL');
   const ago = humanTimeUtil(time);
 
   return (

js/src/common/helpers/icon.js

@@ -1,12 +0,0 @@
-/**
- * The `icon` helper displays an icon.
- *
- * @param {String} fontClass The full icon class, prefix and the icon’s name.
- * @param {Object} attrs Any other attributes to apply.
- * @return {Object}
- */
-export default function icon(fontClass, attrs = {}) {
-  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
-
-  return <i {...attrs} />;
-}

js/src/common/helpers/icon.tsx

@@ -0,0 +1,13 @@
+import * as Mithril from 'mithril';
+
+/**
+ * The `icon` helper displays an icon.
+ *
+ * @param fontClass The full icon class, prefix and the icon’s name.
+ * @param attrs Any other attributes to apply.
+ */
+export default function icon(fontClass: string, attrs: Mithril.Attributes = {}): Mithril.Vnode {
+  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
+
+  return <i {...attrs} />;
+}

js/src/common/helpers/listItems.js

@@ -2,14 +2,14 @@ import Separator from '../components/Separator';
 import classList from '../utils/classList';
 
 function isSeparator(item) {
-  return item && item.component === Separator;
+  return item.tag === Separator;
 }
 
 function withoutUnnecessarySeparators(items) {
   const newItems = [];
   let prevItem;
 
-  items.forEach((item, i) => {
+  items.filter(Boolean).forEach((item, i) => {
     if (!isSeparator(item) || (prevItem && !isSeparator(prevItem) && i !== items.length - 1)) {
       prevItem = item;
       newItems.push(item);
@@ -30,21 +30,27 @@ export default function listItems(items) {
   if (!(items instanceof Array)) items = [items];
 
   return withoutUnnecessarySeparators(items).map((item) => {
-    const isListItem = item.component && item.component.isListItem;
-    const active = item.component && item.component.isActive && item.component.isActive(item.props);
-    const className = item.props ? item.props.itemClassName : item.itemClassName;
+    const isListItem = item.tag && item.tag.isListItem;
+    const active = item.tag && item.tag.isActive && item.tag.isActive(item.attrs);
+    const className = (item.attrs && item.attrs.itemClassName) || item.itemClassName;
 
     if (isListItem) {
       item.attrs = item.attrs || {};
       item.attrs.key = item.attrs.key || item.itemName;
+      item.key = item.attrs.key;
     }
 
-    return isListItem ? (
+    const node = isListItem ? (
       item
     ) : (
-      <li className={classList([item.itemName ? 'item-' + item.itemName : '', className, active ? 'active' : ''])} key={item.itemName}>
+      <li
+        className={classList([className, item.itemName && `item-${item.itemName}`, active && 'active'])}
+        key={(item.attrs && item.attrs.key) || item.itemName}
+      >
         {item}
       </li>
     );
+
+    return node;
   });
 }

js/src/common/index.js

@@ -1,6 +1,6 @@
 import 'expose-loader?$!expose-loader?jQuery!jquery';
 import 'expose-loader?m!mithril';
-import 'expose-loader?moment!moment';
+import 'expose-loader?moment!expose-loader?dayjs!dayjs';
 import 'expose-loader?m.bidi!m.attrs.bidi';
 import 'bootstrap/js/affix';
 import 'bootstrap/js/dropdown';
@@ -9,6 +9,12 @@ import 'bootstrap/js/tooltip';
 import 'bootstrap/js/transition';
 import 'jquery.hotkeys/jquery.hotkeys';
 
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
 import patchMithril from './utils/patchMithril';
 
 patchMithril(window);

js/src/common/models/Discussion.js

@@ -68,7 +68,10 @@ Object.assign(Discussion.prototype, {
     const user = app.session.user;
 
     if (user && user.markedAllAsReadAt() < this.lastPostedAt()) {
-      return Math.max(0, this.lastPostNumber() - (this.lastReadPostNumber() || 0));
+      const unreadCount = Math.max(0, this.lastPostNumber() - (this.lastReadPostNumber() || 0));
+      // If posts have been deleted, it's possible that the unread count could exceed the
+      // actual post count. As such, we take the min of the two to ensure this isn't an issue.
+      return Math.min(unreadCount, this.commentCount());
     }
 
     return 0;

js/src/common/models/Group.js

@@ -7,6 +7,7 @@ Object.assign(Group.prototype, {
   namePlural: Model.attribute('namePlural'),
   color: Model.attribute('color'),
   icon: Model.attribute('icon'),
+  isHidden: Model.attribute('isHidden'),
 });
 
 Group.ADMINISTRATOR_ID = '1';

js/src/common/models/User.js

@@ -54,7 +54,7 @@ Object.assign(User.prototype, {
    * @public
    */
   isOnline() {
-    return this.lastSeenAt() > moment().subtract(5, 'minutes').toDate();
+    return dayjs().subtract(5, 'minutes').isBefore(this.lastSeenAt());
   },
 
   /**

js/src/common/states/AlertManagerState.ts

@@ -0,0 +1,80 @@
+import Mithril from 'mithril';
+import Alert, { AlertAttrs } from '../components/Alert';
+
+/**
+ * Returned by `AlertManagerState.show`. Used to dismiss alerts.
+ */
+export type AlertIdentifier = number;
+
+export interface AlertState {
+  componentClass: typeof Alert;
+  attrs: AlertAttrs;
+  children: Mithril.Children;
+}
+
+export default class AlertManagerState {
+  protected activeAlerts: { [id: number]: AlertState } = {};
+  protected alertId = 0;
+
+  getActiveAlerts() {
+    return this.activeAlerts;
+  }
+
+  /**
+   * Show an Alert in the alerts area.
+   *
+   * @returns The alert's ID, which can be used to dismiss the alert.
+   */
+  show(children: Mithril.Children): AlertIdentifier;
+  show(attrs: AlertAttrs, children: Mithril.Children): AlertIdentifier;
+  show(componentClass: Alert, attrs: AlertAttrs, children: Mithril.Children): AlertIdentifier;
+
+  show(arg1: any, arg2?: any, arg3?: any) {
+    // Assigns variables as per the above signatures
+    let componentClass = Alert;
+    let attrs: AlertAttrs = {};
+    let children: Mithril.Children;
+
+    if (arguments.length == 1) {
+      children = arg1 as Mithril.Children;
+    } else if (arguments.length == 2) {
+      attrs = arg1 as AlertAttrs;
+      children = arg2 as Mithril.Children;
+    } else if (arguments.length == 3) {
+      componentClass = arg1 as typeof Alert;
+      attrs = arg2 as AlertAttrs;
+      children = arg3;
+    }
+
+    // Breaking Change Compliance Warning, Remove in Beta 15.
+    // This is applied to the first argument (attrs) because previously, the alert was passed as the first argument.
+    if (attrs === Alert || attrs instanceof Alert) {
+      // This is duplicated so that if the error is caught, an error message still shows up in the debug console.
+      console.error('The AlertManager can only show Alerts. Whichever extension triggered this alert should be updated to comply with beta 14.');
+      throw new Error('The AlertManager can only show Alerts. Whichever extension triggered this alert should be updated to comply with beta 14.');
+    }
+    // End Change Compliance Warning, Remove in Beta 15
+    this.activeAlerts[++this.alertId] = { children, attrs, componentClass };
+    m.redraw();
+
+    return this.alertId;
+  }
+
+  /**
+   * Dismiss an alert.
+   */
+  dismiss(key: AlertIdentifier): void {
+    if (!key || !(key in this.activeAlerts)) return;
+
+    delete this.activeAlerts[key];
+    m.redraw();
+  }
+
+  /**
+   * Clear all alerts.
+   */
+  clear(): void {
+    this.activeAlerts = {};
+    m.redraw();
+  }
+}

js/src/common/states/ModalManagerState.js

@@ -0,0 +1,56 @@
+import Modal from '../components/Modal';
+
+export default class ModalManagerState {
+  constructor() {
+    this.modal = null;
+  }
+
+  /**
+   * Show a modal dialog.
+   *
+   * @public
+   */
+  show(componentClass, attrs) {
+    // Breaking Change Compliance Warning, Remove in Beta 15.
+    if (!(componentClass.prototype instanceof Modal)) {
+      // This is duplicated so that if the error is caught, an error message still shows up in the debug console.
+      console.error('The ModalManager can only show Modals');
+      throw new Error('The ModalManager can only show Modals');
+    }
+    if (componentClass.init) {
+      // This is duplicated so that if the error is caught, an error message still shows up in the debug console.
+      console.error(
+        'The componentClass parameter must be a modal class, not a modal instance. Whichever extension triggered this modal should be updated to comply with beta 14.'
+      );
+      throw new Error(
+        'The componentClass parameter must be a modal class, not a modal instance. Whichever extension triggered this modal should be updated to comply with beta 14.'
+      );
+    }
+    // End Change Compliance Warning, Remove in Beta 15
+
+    clearTimeout(this.closeTimeout);
+
+    this.modal = { componentClass, attrs };
+
+    m.redraw.sync();
+  }
+
+  /**
+   * Close the modal dialog.
+   *
+   * @public
+   */
+  close() {
+    if (!this.modal) return;
+
+    // Don't hide the modal immediately, because if the consumer happens to call
+    // the `show` method straight after to show another modal dialog, it will
+    // cause Bootstrap's modal JS to misbehave. Instead we will wait for a tiny
+    // bit to give the `show` method the opportunity to prevent this from going
+    // ahead.
+    this.closeTimeout = setTimeout(() => {
+      this.modal = null;
+      m.redraw();
+    });
+  }
+}

js/src/common/states/PageState.js

@@ -0,0 +1,33 @@
+import subclassOf from '../../common/utils/subclassOf';
+
+export default class PageState {
+  constructor(type, data = {}) {
+    this.type = type;
+    this.data = data;
+  }
+
+  /**
+   * Determine whether the page matches the given class and data.
+   *
+   * @param {object} type The page class to check against. Subclasses are
+   *                      accepted as well.
+   * @param {object} data
+   * @return {boolean}
+   */
+  matches(type, data = {}) {
+    // Fail early when the page is of a different type
+    if (!subclassOf(this.type, type)) return false;
+
+    // Now that the type is known to be correct, we loop through the provided
+    // data to see whether it matches the data in our state.
+    return Object.keys(data).every((key) => this.data[key] === data[key]);
+  }
+
+  get(key) {
+    return this.data[key];
+  }
+
+  set(key, value) {
+    this.data[key] = value;
+  }
+}

js/src/common/utils/ItemList.ts

@@ -1,5 +1,9 @@
 class Item {
-  constructor(content, priority) {
+  content: any;
+  priority: number;
+  key?: number;
+
+  constructor(content: any, priority?: number) {
     this.content = content;
     this.priority = priority;
   }
@@ -10,23 +14,15 @@ class Item {
  * by priority.
  */
 export default class ItemList {
-  constructor() {
-    /**
-     * The items in the list.
-     *
-     * @type {Object}
-     * @public
-     */
-    this.items = {};
-  }
+  /**
+   * The items in the list
+   */
+  items: { [key: string]: Item } = {};
 
   /**
    * Check whether the list is empty.
-   *
-   * @returns {boolean}
-   * @public
    */
-  isEmpty() {
+  isEmpty(): boolean {
     for (const i in this.items) {
       if (this.items.hasOwnProperty(i)) {
         return false;
@@ -38,36 +34,27 @@ export default class ItemList {
 
   /**
    * Check whether an item is present in the list.
-   *
-   * @param key
-   * @returns {boolean}
    */
-  has(key) {
+  has(key: string): boolean {
     return !!this.items[key];
   }
 
   /**
    * Get the content of an item.
-   *
-   * @param {String} key
-   * @return {*}
-   * @public
    */
-  get(key) {
+  get(key: string): any {
     return this.items[key].content;
   }
 
   /**
    * Add an item to the list.
    *
-   * @param {String} key A unique key for the item.
-   * @param {*} content The item's content.
-   * @param {Integer} [priority] The priority of the item. Items with a higher
+   * @param key A unique key for the item.
+   * @param content The item's content.
+   * @param [priority] The priority of the item. Items with a higher
    *     priority will be positioned before items with a lower priority.
-   * @return {ItemList}
-   * @public
    */
-  add(key, content, priority = 0) {
+  add(key: string, content: any, priority: number = 0): this {
     this.items[key] = new Item(content, priority);
 
     return this;
@@ -75,14 +62,8 @@ export default class ItemList {
 
   /**
    * Replace an item in the list, only if it is already present.
-   *
-   * @param {String} key
-   * @param {*} [content]
-   * @param {Integer} [priority]
-   * @return {ItemList}
-   * @public
    */
-  replace(key, content = null, priority = null) {
+  replace(key: string, content: any = null, priority: number = null): this {
     if (this.items[key]) {
       if (content !== null) {
         this.items[key].content = content;
@@ -98,12 +79,8 @@ export default class ItemList {
 
   /**
    * Remove an item from the list.
-   *
-   * @param {String} key
-   * @return {ItemList}
-   * @public
    */
-  remove(key) {
+  remove(key: string): this {
     delete this.items[key];
 
     return this;
@@ -111,12 +88,8 @@ export default class ItemList {
 
   /**
    * Merge another list's items into this one.
-   *
-   * @param {ItemList} items
-   * @return {ItemList}
-   * @public
    */
-  merge(items) {
+  merge(items: this): this {
     for (const i in items.items) {
       if (items.items.hasOwnProperty(i) && items.items[i] instanceof Item) {
         this.items[i] = items.items[i];
@@ -130,12 +103,9 @@ export default class ItemList {
    * Convert the list into an array of item content arranged by priority. Each
    * item's content will be assigned an `itemName` property equal to the item's
    * unique key.
-   *
-   * @return {Array}
-   * @public
    */
-  toArray() {
-    const items = [];
+  toArray(): any[] {
+    const items: Item[] = [];
 
     for (const i in this.items) {
       if (this.items.hasOwnProperty(i) && this.items[i] instanceof Item) {

js/src/common/utils/RequestError.ts

@@ -1,5 +1,14 @@
 export default class RequestError {
-  constructor(status, responseText, options, xhr) {
+  status: string;
+  options: object;
+  xhr: XMLHttpRequest;
+
+  responseText: string | null;
+  response: object | null;
+
+  alert: any;
+
+  constructor(status: string, responseText: string | null, options: object, xhr: XMLHttpRequest) {
     this.status = status;
     this.responseText = responseText;
     this.options = options;

js/src/common/utils/Stream.js

@@ -0,0 +1,3 @@
+import Stream from 'mithril/stream';
+
+export default Stream;

js/src/common/utils/SubtreeRetainer.js

@@ -1,20 +1,25 @@
 /**
- * The `SubtreeRetainer` class represents a Mithril virtual DOM subtree. It
- * keeps track of a number of pieces of data, allowing the subtree to be
- * retained if none of them have changed.
+ * The `SubtreeRetainer` class keeps track of a number of pieces of data,
+ * comparing the values of these pieces at every iteration.
+ *
+ * This is useful for preventing redraws to relatively static (or huge)
+ * components whose VDOM only depends on very few values, when none of them
+ * have changed.
  *
  * @example
- * // constructor
+ * // Check two callbacks for changes on each update
  * this.subtree = new SubtreeRetainer(
- *   () => this.props.post.freshness,
+ *   () => this.attrs.post.freshness,
  *   () => this.showing
  * );
- * this.subtree.check(() => this.props.user.freshness);
  *
- * // view
- * this.subtree.retain() || 'expensive expression'
+ * // Add more callbacks to be checked for updates
+ * this.subtree.check(() => this.attrs.user.freshness);
  *
- * @see https://lhorie.github.io/mithril/mithril.html#persisting-dom-elements-across-route-changes
+ * // In a component's onbeforeupdate() method:
+ * return this.subtree.needsRebuild()
+ *
+ * @see https://mithril.js.org/lifecycle-methods.html#onbeforeupdate
  */
 export default class SubtreeRetainer {
   /**
@@ -23,16 +28,19 @@ export default class SubtreeRetainer {
   constructor(...callbacks) {
     this.callbacks = callbacks;
     this.data = {};
+    // Build the initial data, so it is available when calling
+    // needsRebuild from the onbeforeupdate hook.
+    this.needsRebuild();
   }
 
   /**
-   * Return a virtual DOM directive that will retain a subtree if no data has
-   * changed since the last check.
+   * Return whether any data has changed since the last check.
+   * If so, Mithril needs to re-diff the vnode and its children.
    *
-   * @return {Object|false}
+   * @return {boolean}
    * @public
    */
-  retain() {
+  needsRebuild() {
     let needsRebuild = false;
 
     this.callbacks.forEach((callback, i) => {
@@ -44,7 +52,7 @@ export default class SubtreeRetainer {
       }
     });
 
-    return needsRebuild ? false : { subtree: 'retain' };
+    return needsRebuild;
   }
 
   /**
@@ -55,6 +63,8 @@ export default class SubtreeRetainer {
    */
   check(...callbacks) {
     this.callbacks = this.callbacks.concat(callbacks);
+    // Update the data cache when new checks are added.
+    this.needsRebuild();
   }
 
   /**

js/src/common/utils/SuperTextarea.js

@@ -0,0 +1,109 @@
+/**
+ * A textarea wrapper with powerful helpers for text manipulation.
+ *
+ * This wraps a <textarea> DOM element and allows directly manipulating its text
+ * contents and cursor positions.
+ *
+ * I apologize for the pretentious name. :)
+ */
+export default class SuperTextarea {
+  /**
+   * @param {HTMLTextAreaElement} textarea
+   */
+  constructor(textarea) {
+    this.el = textarea;
+    this.$ = $(textarea);
+  }
+
+  /**
+   * Set the value of the text editor.
+   *
+   * @param {String} value
+   */
+  setValue(value) {
+    this.$.val(value).trigger('input');
+
+    this.el.dispatchEvent(new CustomEvent('input', { bubbles: true, cancelable: true }));
+  }
+
+  /**
+   * Focus the textarea and place the cursor at the given index.
+   *
+   * @param {number} position
+   */
+  moveCursorTo(position) {
+    this.setSelectionRange(position, position);
+  }
+
+  /**
+   * Get the selected range of the textarea.
+   *
+   * @return {Array}
+   */
+  getSelectionRange() {
+    return [this.el.selectionStart, this.el.selectionEnd];
+  }
+
+  /**
+   * Insert content into the textarea at the position of the cursor.
+   *
+   * @param {String} text
+   */
+  insertAtCursor(text) {
+    this.insertAt(this.el.selectionStart, text);
+  }
+
+  /**
+   * Insert content into the textarea at the given position.
+   *
+   * @param {number} pos
+   * @param {String} text
+   */
+  insertAt(pos, text) {
+    this.insertBetween(pos, pos, text);
+  }
+
+  /**
+   * Insert content into the textarea between the given positions.
+   *
+   * If the start and end positions are different, any text between them will be
+   * overwritten.
+   *
+   * @param start
+   * @param end
+   * @param text
+   */
+  insertBetween(start, end, text) {
+    const value = this.el.value;
+
+    const before = value.slice(0, start);
+    const after = value.slice(end);
+
+    this.setValue(`${before}${text}${after}`);
+
+    // Move the textarea cursor to the end of the content we just inserted.
+    this.moveCursorTo(start + text.length);
+  }
+
+  /**
+   * Replace existing content from the start to the current cursor position.
+   *
+   * @param start
+   * @param text
+   */
+  replaceBeforeCursor(start, text) {
+    this.insertBetween(start, this.el.selectionStart, text);
+  }
+
+  /**
+   * Set the selected range of the textarea.
+   *
+   * @param {number} start
+   * @param {number} end
+   * @private
+   */
+  setSelectionRange(start, end) {
+    this.el.setSelectionRange(start, end);
+    this.$.focus();
+  }
+}

js/src/common/utils/abbreviateNumber.ts

@@ -4,16 +4,13 @@
  * @example
  * abbreviateNumber(1234);
  * // "1.2K"
- *
- * @param {Integer} number
- * @return {String}
  */
-export default function abbreviateNumber(number) {
+export default function abbreviateNumber(number: number): string {
   // TODO: translation
   if (number >= 1000000) {
     return Math.floor(number / 1000000) + app.translator.trans('core.lib.number_suffix.mega_text');
   } else if (number >= 1000) {
-    return Math.floor(number / 1000) + app.translator.trans('core.lib.number_suffix.kilo_text');
+    return (number / 1000).toFixed(1) + app.translator.trans('core.lib.number_suffix.kilo_text');
   } else {
     return number.toString();
   }

js/src/common/utils/extract.js

@@ -1,15 +0,0 @@
-/**
- * The `extract` utility deletes a property from an object and returns its
- * value.
- *
- * @param {Object} object The object that owns the property
- * @param {String} property The name of the property to extract
- * @return {*} The value of the property
- */
-export default function extract(object, property) {
-  const value = object[property];
-
-  delete object[property];
-
-  return value;
-}

js/src/common/utils/extract.ts

@@ -0,0 +1,15 @@
+/**
+ * The `extract` utility deletes a property from an object and returns its
+ * value.
+ *
+ * @param object The object that owns the property
+ * @param property The name of the property to extract
+ * @return The value of the property
+ */
+export default function extract<T, K extends keyof T>(object: T, property: K): T[K] {
+  const value = object[property];
+
+  delete object[property];
+
+  return value;
+}

js/src/common/utils/extractText.js

@@ -8,7 +8,7 @@ export default function extractText(vdom) {
   if (vdom instanceof Array) {
     return vdom.map((element) => extractText(element)).join('');
   } else if (typeof vdom === 'object' && vdom !== null) {
-    return extractText(vdom.children);
+    return vdom.children ? extractText(vdom.children) : vdom.text;
   } else {
     return vdom;
   }

js/src/common/utils/formatNumber.ts

@@ -5,10 +5,7 @@
  * @example
  * formatNumber(1234);
  * // 1,234
- *
- * @param {Number} number
- * @return {String}
  */
-export default function formatNumber(number) {
+export default function formatNumber(number: number): string {
   return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }

js/src/common/utils/humanTime.ts

@@ -1,35 +1,32 @@
 /**
  * The `humanTime` utility converts a date to a localized, human-readable time-
  * ago string.
- *
- * @param {Date} time
- * @return {String}
  */
-export default function humanTime(time) {
-  let m = moment(time);
-  const now = moment();
+export default function humanTime(time: Date): string {
+  let d = dayjs(time);
+  const now = dayjs();
 
   // To prevent showing things like "in a few seconds" due to small offsets
   // between client and server time, we always reset future dates to the
   // current time. This will result in "just now" being shown instead.
-  if (m.isAfter(now)) {
-    m = now;
+  if (d.isAfter(now)) {
+    d = now;
   }
 
   const day = 864e5;
-  const diff = m.diff(moment());
-  let ago = null;
+  const diff = d.diff(dayjs());
+  let ago: string;
 
   // If this date was more than a month ago, we'll show the name of the month
   // in the string. If it wasn't this year, we'll show the year as well.
   if (diff < -30 * day) {
-    if (m.year() === moment().year()) {
-      ago = m.format('D MMM');
+    if (d.year() === dayjs().year()) {
+      ago = d.format('D MMM');
     } else {
-      ago = m.format('ll');
+      ago = d.format('ll');
     }
   } else {
-    ago = m.fromNow();
+    ago = d.fromNow();
   }
 
   return ago;

js/src/common/utils/liveHumanTimes.ts

@@ -1,18 +1,18 @@
-import humanTimeUtil from './humanTime';
+import humanTime from './humanTime';
 
 function updateHumanTimes() {
   $('[data-humantime]').each(function () {
     const $this = $(this);
-    const ago = humanTimeUtil($this.attr('datetime'));
+    const ago = humanTime($this.attr('datetime'));
 
     $this.html(ago);
   });
 }
 
 /**
- * The `humanTime` initializer sets up a loop every 1 second to update
+ * The `liveHumanTimes` initializer sets up a loop every 1 second to update
  * timestamps rendered with the `humanTime` helper.
  */
-export default function humanTime() {
+export default function liveHumanTimes() {
   setInterval(updateHumanTimes, 10000);
 }

js/src/common/utils/mapRoutes.js

@@ -2,7 +2,7 @@
  * The `mapRoutes` utility converts a map of named application routes into a
  * format that can be understood by Mithril.
  *
- * @see https://lhorie.github.io/mithril/mithril.route.html#defining-routes
+ * @see https://mithril.js.org/route.html#signature
  * @param {Object} routes
  * @param {String} [basePath]
  * @return {Object}
@@ -13,9 +13,11 @@ export default function mapRoutes(routes, basePath = '') {
   for (const key in routes) {
     const route = routes[key];
 
-    if (route.component) route.component.props.routeName = key;
-
-    map[basePath + route.path] = route.component;
+    map[basePath + route.path] = {
+      render() {
+        return m(route.component, { routeName: key });
+      },
+    };
   }
 
   return map;

js/src/common/utils/patchMithril.js

@@ -1,45 +1,44 @@
-import Component from '../Component';
+import withAttr from './withAttr';
+import Stream from './Stream';
+
+let deprecatedMPropWarned = false;
+let deprecatedMWithAttrWarned = false;
 
 export default function patchMithril(global) {
-  const mo = global.m;
+  const defaultMithril = global.m;
 
-  const m = function (comp, ...args) {
-    if (comp.prototype && comp.prototype instanceof Component) {
-      let children = args.slice(1);
-      if (children.length === 1 && Array.isArray(children[0])) {
-        children = children[0];
-      }
+  const modifiedMithril = function (comp, ...args) {
+    const node = defaultMithril.apply(this, arguments);
 
-      return comp.component(args[0], children);
-    }
-
-    const node = mo.apply(this, arguments);
+    if (!node.attrs) node.attrs = {};
 
+    // Allows the use of the bidi attr.
     if (node.attrs.bidi) {
-      m.bidi(node, node.attrs.bidi);
-    }
-
-    if (node.attrs.route) {
-      node.attrs.href = node.attrs.route;
-      node.attrs.config = m.route;
-
-      delete node.attrs.route;
+      modifiedMithril.bidi(node, node.attrs.bidi);
     }
 
     return node;
   };
 
-  Object.keys(mo).forEach((key) => (m[key] = mo[key]));
+  Object.keys(defaultMithril).forEach((key) => (modifiedMithril[key] = defaultMithril[key]));
 
-  /**
-   * Redraw only if not in the middle of a computation (e.g. a route change).
-   *
-   * @return {void}
-   */
-  m.lazyRedraw = function () {
-    m.startComputation();
-    m.endComputation();
+  // BEGIN DEPRECATED MITHRIL 2 BC LAYER
+  modifiedMithril.prop = function (...args) {
+    if (!deprecatedMPropWarned) {
+      deprecatedMPropWarned = true;
+      console.warn('m.prop() is deprecated, please use the Stream util (flarum/utils/Streams) instead.');
+    }
+    return Stream.bind(this)(...args);
   };
 
-  global.m = m;
+  modifiedMithril.withAttr = function (...args) {
+    if (!deprecatedMWithAttrWarned) {
+      deprecatedMWithAttrWarned = true;
+      console.warn("m.withAttr() is deprecated, please use flarum's withAttr util (flarum/utils/withAttr) instead.");
+    }
+    return withAttr.bind(this)(...args);
+  };
+  // END DEPRECATED MITHRIL 2 BC LAYER
+
+  global.m = modifiedMithril;
 }

js/src/common/utils/setRouteWithForcedRefresh.ts

@@ -0,0 +1,15 @@
+import Mithril from 'mithril';
+
+/**
+ * Mithril 2 does not completely rerender the page if a route change leads to the same route
+ * (or the same component handling a different route). This util calls m.route.set, forcing a reonit.
+ *
+ * @see https://mithril.js.org/route.html#key-parameter
+ */
+export default function setRouteWithForcedRefresh(route: string, params = null, options: Mithril.RouteOptions = {}) {
+  const newOptions = { ...options };
+  newOptions.state = newOptions.state || {};
+  newOptions.state.key = Date.now();
+
+  m.route.set(route, params, newOptions);
+}

js/src/common/utils/string.ts

@@ -1,12 +1,7 @@
 /**
  * Truncate a string to the given length, appending ellipses if necessary.
- *
- * @param {String} string
- * @param {Number} length
- * @param {Number} [start=0]
- * @return {String}
  */
-export function truncate(string, length, start = 0) {
+export function truncate(string: string, length: number, start: number = 0): string {
   return (start > 0 ? '...' : '') + string.substring(start, start + length) + (string.length > start + length ? '...' : '');
 }
 
@@ -17,11 +12,8 @@ export function truncate(string, length, start = 0) {
  * NOTE: This method does not use the comparably sophisticated transliteration
  * mechanism that is employed in the backend. Therefore, it should only be used
  * to *suggest* slugs that can be overridden by the user.
- *
- * @param {String} string
- * @return {String}
  */
-export function slug(string) {
+export function slug(string: string): string {
   return string
     .toLowerCase()
     .replace(/[^a-z0-9]/gi, '-')
@@ -32,11 +24,8 @@ export function slug(string) {
 /**
  * Strip HTML tags and quotes out of the given string, replacing them with
  * meaningful punctuation.
- *
- * @param {String} string
- * @return {String}
  */
-export function getPlainContent(string) {
+export function getPlainContent(string: string): string {
   const html = string.replace(/(<\/p>|<br>)/g, '$1 &nbsp;').replace(/<img\b[^>]*>/gi, ' ');
 
   const dom = $('<div/>').html(html);
@@ -55,10 +44,7 @@ getPlainContent.removeSelectors = ['blockquote', 'script'];
 
 /**
  * Make a string's first character uppercase.
- *
- * @param {String} string
- * @return {String}
  */
-export function ucfirst(string) {
+export function ucfirst(string: string): string {
   return string.substr(0, 1).toUpperCase() + string.substr(1);
 }

js/src/common/utils/stringToColor.ts

@@ -1,4 +1,6 @@
-function hsvToRgb(h, s, v) {
+type RGB = { r: number; g: number; b: number };
+
+function hsvToRgb(h: number, s: number, v: number): RGB {
   let r;
   let g;
   let b;
@@ -51,11 +53,8 @@ function hsvToRgb(h, s, v) {
 
 /**
  * Convert the given string to a unique color.
- *
- * @param {String} string
- * @return {String}
  */
-export default function stringToColor(string) {
+export default function stringToColor(string: string): string {
   let num = 0;
 
   // Convert the username into a number based on the ASCII value of each

js/src/common/utils/subclassOf.js

@@ -0,0 +1,6 @@
+/**
+ * Check if class A is the same as or a subclass of class B.
+ */
+export default function subclassOf(A, B) {
+  return A && (A === B || A.prototype instanceof B);
+}