chore: use consistent empty vdom return types in core

js/src/admin/components/DashboardWidget.js

@@ -20,6 +20,6 @@ export default class DashboardWidget extends Component {
    * @return {VirtualElement}
    */
   content() {
-    return [];
+    return null;
   }
 }

js/src/admin/components/ExtensionsWidget.js

@@ -21,7 +21,7 @@ export default class ExtensionsWidget extends DashboardWidget {
 
     return (
       <div className="ExtensionsWidget-list">
-        {Object.keys(categories).map((category) => (this.categorizedExtensions[category] ? this.extensionCategory(category) : ''))}
+        {Object.keys(categories).map((category) => !!this.categorizedExtensions[category] && this.extensionCategory(category))}
       </div>
     );
   }
@@ -41,7 +41,7 @@ export default class ExtensionsWidget extends DashboardWidget {
         <Link href={app.route('extension', { id: extension.id })}>
           <div className="ExtensionListItem-content">
             <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
-              {extension.icon ? icon(extension.icon.name) : ''}
+              {!!extension.icon && icon(extension.icon.name)}
             </span>
             <span className="ExtensionListItem-title">{extension.extra['flarum-extension'].title}</span>
           </div>

js/src/admin/components/LoadingModal.tsx

@@ -18,7 +18,7 @@ export default class LoadingModal<ModalAttrs extends ILoadingModalAttrs = ILoadi
   }
 
   content() {
-    return '';
+    return null;
   }
 
   onsubmit(e: Event): void {

js/src/admin/components/PermissionGrid.tsx

@@ -56,9 +56,8 @@ export default class PermissionGrid<CustomAttrs extends IPermissionGridAttrs = I
             {scopes.map((scope) => (
               <th>
                 {scope.label}{' '}
-                {scope.onremove
+                {!!scope.onremove &&
-                  ? Button.component({ icon: 'fas fa-times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove })
+                  Button.component({ icon: 'fas fa-times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove })}
-                  : ''}
               </th>
             ))}
             <th>{this.scopeControlItems().toArray()}</th>

js/src/admin/components/UserListPage.tsx

@@ -175,7 +175,7 @@ export default class UserListPage extends AdminPage {
       'id',
       {
         name: app.translator.trans('core.admin.users.grid.columns.user_id.title'),
-        content: (user: User) => user.id() ?? '',
+        content: (user: User) => user.id() ?? null,
       },
       100
     );

js/src/common/components/Dropdown.js

@@ -128,9 +128,9 @@ export default class Dropdown extends Component {
    */
   getButtonContent(children) {
     return [
-      this.attrs.icon ? icon(this.attrs.icon, { className: 'Button-icon' }) : '',
+      !!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' }) : '',
+      !!this.attrs.caretIcon && icon(this.attrs.caretIcon, { className: 'Button-caret' }),
     ];
   }
 

js/src/common/components/EditUserModal.tsx

@@ -89,7 +89,7 @@ export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEd
                 disabled={this.nonAdminEditingAdmin()}
               />
             </div>
-            {!this.isEmailConfirmed() && this.userIsAdmin(app.session.user) ? (
+            {!this.isEmailConfirmed() && this.userIsAdmin(app.session.user) && (
               <div>
                 {Button.component(
                   {
@@ -100,8 +100,6 @@ export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEd
                   app.translator.trans('core.lib.edit_user.activate_button')
                 )}
               </div>
-            ) : (
-              ''
             )}
           </div>,
           30
@@ -126,7 +124,7 @@ export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEd
                 />
                 {app.translator.trans('core.lib.edit_user.set_password_label')}
               </label>
-              {this.setPassword() ? (
+              {this.setPassword() && (
                 <input
                   className="FormControl"
                   type="password"
@@ -135,8 +133,6 @@ export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEd
                   bidi={this.password}
                   disabled={this.nonAdminEditingAdmin()}
                 />
-              ) : (
-                ''
               )}
             </div>
           </div>,

js/src/common/components/Modal.tsx

@@ -105,7 +105,7 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
               <h3 className="App-titleControl App-titleControl--text">{this.title()}</h3>
             </div>
 
-            {this.alertAttrs ? <div className="Modal-alert">{Alert.component(this.alertAttrs)}</div> : ''}
+            {!!this.alertAttrs && <div className="Modal-alert">{Alert.component(this.alertAttrs)}</div>}
 
             {this.content()}
           </form>

js/src/common/components/Navigation.js

@@ -65,7 +65,7 @@ export default class Navigation extends Component {
   getPaneButton() {
     const { pane } = app;
 
-    if (!pane || !pane.active) return '';
+    if (!pane || !pane.active) return null;
 
     return Button.component({
       className: 'Button Button--icon Navigation-pin' + (pane.pinned ? ' active' : ''),
@@ -81,7 +81,7 @@ export default class Navigation extends Component {
    * @protected
    */
   getDrawerButton() {
-    if (!this.attrs.drawer) return '';
+    if (!this.attrs.drawer) return null;
 
     const { drawer } = app;
     const user = app.session.user;

js/src/common/components/RequestErrorModal.tsx

@@ -12,7 +12,7 @@ export default class RequestErrorModal<CustomAttrs extends IRequestErrorModalAtt
   }
 
   title() {
-    return this.attrs.error.xhr ? `${this.attrs.error.xhr.status} ${this.attrs.error.xhr.statusText}` : '';
+    return !!this.attrs.error.xhr && `${this.attrs.error.xhr.status} ${this.attrs.error.xhr.statusText}`;
   }
 
   content() {

js/src/common/components/Switch.js

@@ -12,6 +12,6 @@ export default class Switch extends Checkbox {
   }
 
   getDisplay() {
-    return this.attrs.loading ? super.getDisplay() : '';
+    return !!this.attrs.loading && super.getDisplay();
   }
 }

js/src/forum/components/Composer.js

@@ -51,7 +51,7 @@ export default class Composer extends Component {
         <div className="Composer-handle" oncreate={this.configHandle.bind(this)} />
         <ul className="Composer-controls">{listItems(this.controlItems().toArray())}</ul>
         <div className="Composer-content" onclick={showIfMinimized}>
-          {body.componentClass ? body.componentClass.component({ ...body.attrs, composer: this.state, disabled: classes.minimized }) : ''}
+          {!!body.componentClass && body.componentClass.component({ ...body.attrs, composer: this.state, disabled: classes.minimized })}
         </div>
       </div>
     );

js/src/forum/components/LogInModal.tsx

@@ -125,17 +125,16 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
   }
 
   footer() {
-    return [
+    return (
-      <p className="LogInModal-forgotPassword">
+      <>
-        <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
+        <p className="LogInModal-forgotPassword">
-      </p>,
+          <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
-
+        </p>
-      app.forum.attribute('allowSignUp') ? (
+        {!!app.forum.attribute('allowSignUp') && (
-        <p className="LogInModal-signUp">{app.translator.trans('core.forum.log_in.sign_up_text', { a: <a onclick={this.signUp.bind(this)} /> })}</p>
+          <p className="LogInModal-signUp">{app.translator.trans('core.forum.log_in.sign_up_text', { a: <a onclick={this.signUp.bind(this)} /> })}</p>
-      ) : (
+        )}
-        ''
+      </>
-      ),
+    );
-    ];
   }
 
   /**

js/src/forum/components/NotificationList.js

@@ -96,7 +96,7 @@ export default class NotificationList extends Component {
               <ul className="NotificationGroup-content">
                 {group.notifications.map((notification) => {
                   const NotificationComponent = app.notificationComponents[notification.contentType()];
-                  return NotificationComponent ? <li>{NotificationComponent.component({ notification })}</li> : '';
+                  return !!NotificationComponent && <li>{NotificationComponent.component({ notification })}</li>;
                 })}
               </ul>
             </div>

js/src/forum/components/Post.js

@@ -59,7 +59,7 @@ export default class Post extends Component {
           <aside className="Post-actions">
             <ul>
               {listItems(this.actionItems().toArray())}
-              {controls.length ? (
+              {!!controls.length && (
                 <li>
                   <Dropdown
                     className="Post-controls"
@@ -73,8 +73,6 @@ export default class Post extends Component {
                     {controls}
                   </Dropdown>
                 </li>
-              ) : (
-                ''
               )}
             </ul>
           </aside>
@@ -114,7 +112,7 @@ export default class Post extends Component {
    * @return {Array}
    */
   content() {
-    return [];
+    return null;
   }
 
   /**
@@ -124,7 +122,10 @@ export default class Post extends Component {
    * @returns {string[]}
    */
   classes(existing) {
-    let classes = (existing || '').split(' ').concat(['Post']);
+    const classes = (existing || '')
+      .split(' ')
+      .filter((x) => x.trim() !== '')
+      .concat(['Post']);
 
     const user = this.attrs.post.user();
     const discussion = this.attrs.post.discussion();

js/src/forum/components/PostMeta.js

@@ -55,6 +55,6 @@ export default class PostMeta extends Component {
    * @returns {String}
    */
   getPermalink(post) {
-    return window.location.origin + app.route.post(post);
+    return app.forum.attribute('baseUrl') + app.route.post(post);
   }
 }

js/src/forum/components/PostPreview.js

@@ -18,7 +18,7 @@ export default class PostPreview extends Component {
     const post = this.attrs.post;
     const user = post.user();
     const content = post.contentType() === 'comment' && post.contentPlain();
-    const excerpt = content ? highlight(content, this.attrs.highlight, 300) : '';
+    const excerpt = !!content && highlight(content, this.attrs.highlight, 300);
 
     return (
       <Link className="PostPreview" href={app.route.post(post)} onclick={this.attrs.onclick}>

js/src/forum/components/PostUser.js

@@ -29,7 +29,10 @@ export default class PostUser extends Component {
       );
     }
 
-    let card = '';
+    /**
+     * @type {import('mithril').Children}
+     */
+    let card = null;
 
     if (!post.isHidden() && this.attrs.cardVisible) {
       card = UserCard.component({

js/src/forum/components/UserCard.js

@@ -34,19 +34,18 @@ export default class UserCard extends Component {
       <div className={'UserCard ' + (this.attrs.className || '')} style={color && { '--usercard-bg': color }}>
         <div className="darkenBackground">
           <div className="container">
-            {controls.length
+            {!!controls.length &&
-              ? Dropdown.component(
+              Dropdown.component(
-                  {
+                {
-                    className: 'UserCard-controls App-primaryControl',
+                  className: 'UserCard-controls App-primaryControl',
-                    menuClassName: 'Dropdown-menu--right',
+                  menuClassName: 'Dropdown-menu--right',
-                    buttonClassName: this.attrs.controlsButtonClassName,
+                  buttonClassName: this.attrs.controlsButtonClassName,
-                    label: app.translator.trans('core.forum.user_controls.button'),
+                  label: app.translator.trans('core.forum.user_controls.button'),
-                    accessibleToggleLabel: app.translator.trans('core.forum.user_controls.toggle_dropdown_accessible_label'),
+                  accessibleToggleLabel: app.translator.trans('core.forum.user_controls.toggle_dropdown_accessible_label'),
-                    icon: 'fas fa-ellipsis-v',
+                  icon: 'fas fa-ellipsis-v',
-                  },
+                },
-                  controls
+                controls
-                )
+              )}
-              : ''}
 
             <div className="UserCard-profile">
               <h2 className="UserCard-identity">
@@ -60,7 +59,7 @@ export default class UserCard extends Component {
                 )}
               </h2>
 
-              {badges.length ? <ul className="UserCard-badges badges">{listItems(badges)}</ul> : ''}
+              {!!badges.length && <ul className="UserCard-badges badges">{listItems(badges)}</ul>}
 
               <ul className="UserCard-info">{listItems(this.infoItems().toArray())}</ul>
             </div>

js/src/forum/states/ComposerState.js

@@ -260,7 +260,7 @@ class ComposerState {
     // let the CSS decide how high it is. If it's fullscreen, then we need to
     // make it as high as the window.
     if (this.position === ComposerState.Position.MINIMIZED) {
-      return '';
+      return null;
     } else if (this.position === ComposerState.Position.FULLSCREEN) {
       return $(window).height();
     }