chore: handle chunk from fof/user-directory, split FollowUserPage

Author: imorland

extend.php

@@ -23,6 +23,7 @@
 return [
     (new Extend\Frontend('forum'))
         ->js(__DIR__.'/js/dist/forum.js')
+        ->jsDirectory(__DIR__.'/js/dist/forum')
         ->css(__DIR__.'/resources/less/forum.less'),
 
     (new Extend\Frontend('admin'))

js/src/forum/addFollowingUsers.tsx

@@ -1,11 +1,6 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import DiscussionListState from 'flarum/forum/states/DiscussionListState';
-import Separator from 'flarum/common/components/Separator';
-import ItemList from 'flarum/common/utils/ItemList';
-import type Mithril from 'mithril';
-import UserDirectoryPage from 'ext:fof/user-directory/forum/components/UserDirectoryPage';
-import CheckableButton from 'ext:fof/user-directory/forum/components/CheckableButton';
 import addFollowingPageOption from 'ext:fof/follow-tags/common/utils/addFollowingPageOption';
 import { getDefaultFollowingFiltering } from 'ext:fof/follow-tags/forum/utils/getDefaultFollowingFiltering';
 
@@ -37,49 +32,4 @@ export default function () {
       }
     }
   );
-
-  if ('fof-user-directory' in flarum.extensions) {
-    // Initialize the filter state from URL parameters
-    extend(UserDirectoryPage.prototype, 'oninit', function (this: any) {
-      const q = m.route.param('q') || '';
-      if (q.includes('is:followeduser')) {
-        if (!this.enabledSpecialGroupFilters) this.enabledSpecialGroupFilters = {};
-        this.enabledSpecialGroupFilters['ianm-follow-users'] = 'is:followeduser';
-      }
-    });
-
-    extend(
-      UserDirectoryPage.prototype,
-      'groupItems',
-      function (
-        this: typeof UserDirectoryPage.prototype & { enabledSpecialGroupFilters?: Record<string, string> },
-        items: ItemList<Mithril.Children>
-      ) {
-        items.add(
-          'follow-users',
-          <CheckableButton
-            className="GroupFilterButton"
-            icon="fas fa-user-friends"
-            checked={this.enabledSpecialGroupFilters?.['ianm-follow-users'] === 'is:followeduser'}
-            onclick={() => {
-              const id = 'ianm-follow-users';
-              if (!this.enabledSpecialGroupFilters) this.enabledSpecialGroupFilters = {};
-              if (this.enabledSpecialGroupFilters[id] === 'is:followeduser') {
-                this.enabledSpecialGroupFilters[id] = '';
-              } else {
-                this.enabledSpecialGroupFilters[id] = 'is:followeduser';
-              }
-
-              this.changeParams(this.params().sort);
-            }}
-          >
-            {app.translator.trans('ianm-follow-users.forum.filter.following')}
-          </CheckableButton>,
-          65
-        );
-
-        items.add('separator', <Separator />, 50);
-      }
-    );
-  }
 }

js/src/forum/extend.ts

@@ -1,6 +1,5 @@
 import commonExtend from '../common/extend';
 import Extend from 'flarum/common/extenders';
-import ProfilePage from './components/ProfilePage';
 import User from 'flarum/common/models/User';
 import NewFollowerNotification from './components/NewFollowerNotification';
 import NewUnfollowerNotification from './components/NewUnfollowerNotification';
@@ -20,7 +19,7 @@ export default [
     .attribute<number>('followerCount'),
 
   new Extend.Routes() //
-    .add('user.followedUsers', '/u/:username/followedUsers', ProfilePage),
+    .add('user.followedUsers', '/u/:username/followedUsers', () => import('./components/ProfilePage')),
 
   new Extend.Notification() //
     .add('newFollower', NewFollowerNotification)

js/src/forum/extendUserDirectoryPage.tsx

@@ -0,0 +1,45 @@
+import app from 'flarum/forum/app';
+import { extend } from 'flarum/common/extend';
+import Separator from 'flarum/common/components/Separator';
+import ItemList from 'flarum/common/utils/ItemList';
+import type Mithril from 'mithril';
+
+export default function () {
+  extend('ext:fof/user-directory/forum/components/UserDirectoryPage', 'oninit', function (this: any) {
+    const q = m.route.param('q') || '';
+    if (q.includes('is:followeduser')) {
+      if (!this.enabledSpecialGroupFilters) this.enabledSpecialGroupFilters = {};
+      this.enabledSpecialGroupFilters['ianm-follow-users'] = 'is:followeduser';
+    }
+  });
+
+  extend('ext:fof/user-directory/forum/components/UserDirectoryPage', 'groupItems', function (this: any, items: ItemList<Mithril.Children>) {
+    // Get CheckableButton from Flarum's registry (it's in the same lazy-loaded chunk)
+    const CheckableButton = flarum.reg.get('fof-user-directory', 'forum/components/CheckableButton');
+
+    items.add(
+      'follow-users',
+      <CheckableButton
+        className="GroupFilterButton"
+        icon="fas fa-user-friends"
+        checked={this.enabledSpecialGroupFilters?.['ianm-follow-users'] === 'is:followeduser'}
+        onclick={() => {
+          const id = 'ianm-follow-users';
+          if (!this.enabledSpecialGroupFilters) this.enabledSpecialGroupFilters = {};
+          if (this.enabledSpecialGroupFilters[id] === 'is:followeduser') {
+            this.enabledSpecialGroupFilters[id] = '';
+          } else {
+            this.enabledSpecialGroupFilters[id] = 'is:followeduser';
+          }
+
+          this.changeParams(this.params().sort);
+        }}
+      >
+        {app.translator.trans('ianm-follow-users.forum.filter.following')}
+      </CheckableButton>,
+      65
+    );
+
+    items.add('separator', <Separator />, 50);
+  });
+}

js/src/forum/index.ts

@@ -6,6 +6,7 @@ import addPrivacySetting from './addPrivacySetting';
 import addFollowingUsers from './addFollowingUsers';
 import addUserCardStats from './addUserCardStats';
 import addNotificationSettings from './addNotifictionSettings';
+import extendUserDirectoryPage from './extendUserDirectoryPage';
 
 export { default as extend } from './extend';
 
@@ -19,6 +20,10 @@ app.initializers.add(
     addFollowingUsers();
     addUserCardStats();
     addNotificationSettings();
+
+    if ('fof-user-directory' in flarum.extensions) {
+      extendUserDirectoryPage();
+    }
   },
   -10 // Run before fof-follow-tags (which runs at -1)
 );