feat: JS Notification extender (#3974)

* feat: JS `Notification` extender

* fix

extensions/likes/js/src/forum/extend.ts

@@ -2,11 +2,15 @@ import Extend from 'flarum/common/extenders';
 import Post from 'flarum/common/models/Post';
 import User from 'flarum/common/models/User';
 import LikesUserPage from './components/LikesUserPage';
+import PostLikedNotification from './components/PostLikedNotification';
 
 export default [
   new Extend.Routes() //
     .add('user.likes', '/u/:username/likes', LikesUserPage),
 
+  new Extend.Notification() //
+    .add('postLiked', PostLikedNotification),
+
   new Extend.Model(Post) //
     .hasMany<User>('likes')
     .attribute<number>('likesCount')

extensions/likes/js/src/forum/index.js

@@ -3,14 +3,11 @@ import app from 'flarum/forum/app';
 
 import addLikeAction from './addLikeAction';
 import addLikesList from './addLikesList';
-import PostLikedNotification from './components/PostLikedNotification';
 import addLikesTabToUserProfile from './addLikesTabToUserProfile';
 
 export { default as extend } from './extend';
 
 app.initializers.add('flarum-likes', () => {
-  app.notificationComponents.postLiked = PostLikedNotification;
-
   addLikeAction();
   addLikesList();
   addLikesTabToUserProfile();

extensions/lock/js/src/forum/extend.ts

@@ -3,6 +3,7 @@ import Discussion from 'flarum/common/models/Discussion';
 import DiscussionLockedPost from './components/DiscussionLockedPost';
 
 import commonExtend from '../common/extend';
+import DiscussionLockedNotification from './components/DiscussionLockedNotification';
 
 export default [
   ...commonExtend,
@@ -10,6 +11,9 @@ export default [
   new Extend.PostTypes() //
     .add('discussionLocked', DiscussionLockedPost),
 
+  new Extend.Notification() //
+    .add('discussionLocked', DiscussionLockedNotification),
+
   new Extend.Model(Discussion) //
     .attribute<boolean>('isLocked')
     .attribute<boolean>('canLock'),

extensions/lock/js/src/forum/index.js

@@ -1,15 +1,12 @@
 import { extend } from 'flarum/common/extend';
 import app from 'flarum/forum/app';
 
-import DiscussionLockedNotification from './components/DiscussionLockedNotification';
 import addLockBadge from './addLockBadge';
 import addLockControl from './addLockControl';
 
 export { default as extend } from './extend';
 
 app.initializers.add('flarum-lock', () => {
-  app.notificationComponents.discussionLocked = DiscussionLockedNotification;
-
   addLockBadge();
   addLockControl();
 

extensions/mentions/js/src/forum/extend.ts

@@ -2,6 +2,9 @@ import Extend from 'flarum/common/extenders';
 import Post from 'flarum/common/models/Post';
 import User from 'flarum/common/models/User';
 import MentionsUserPage from './components/MentionsUserPage';
+import PostMentionedNotification from './components/PostMentionedNotification';
+import UserMentionedNotification from './components/UserMentionedNotification';
+import GroupMentionedNotification from './components/GroupMentionedNotification';
 
 export default [
   new Extend.Routes() //
@@ -11,6 +14,11 @@ export default [
     .hasMany<Post>('mentionedBy')
     .attribute<number>('mentionedByCount'),
 
+  new Extend.Notification() //
+    .add('postMentioned', PostMentionedNotification)
+    .add('userMentioned', UserMentionedNotification)
+    .add('groupMentioned', GroupMentionedNotification),
+
   new Extend.Model(User) //
     .attribute<boolean>('canMentionGroups'),
 ];

extensions/mentions/js/src/forum/index.js

@@ -9,9 +9,6 @@ import addMentionedByList from './addMentionedByList';
 import addPostReplyAction from './addPostReplyAction';
 import addPostQuoteButton from './addPostQuoteButton';
 import addComposerAutocomplete from './addComposerAutocomplete';
-import PostMentionedNotification from './components/PostMentionedNotification';
-import UserMentionedNotification from './components/UserMentionedNotification';
-import GroupMentionedNotification from './components/GroupMentionedNotification';
 import MentionFormats from './mentionables/formats/MentionFormats';
 import UserPage from 'flarum/forum/components/UserPage';
 import LinkButton from 'flarum/common/components/LinkButton';
@@ -40,10 +37,6 @@ app.initializers.add('flarum-mentions', function () {
   // posts or users that the user could mention.
   addComposerAutocomplete();
 
-  app.notificationComponents.postMentioned = PostMentionedNotification;
-  app.notificationComponents.userMentioned = UserMentionedNotification;
-  app.notificationComponents.groupMentioned = GroupMentionedNotification;
-
   // Add notification preferences.
   extend('flarum/forum/components/NotificationGrid', 'notificationTypes', function (items) {
     items.add('postMentioned', {

extensions/subscriptions/js/src/forum/extend.ts

@@ -3,6 +3,7 @@ import IndexPage from 'flarum/forum/components/IndexPage';
 import Discussion from 'flarum/common/models/Discussion';
 
 import commonExtend from '../common/extend';
+import NewPostNotification from './components/NewPostNotification';
 
 export default [
   ...commonExtend,
@@ -10,6 +11,9 @@ export default [
   new Extend.Routes() //
     .add('following', '/following', IndexPage),
 
+  new Extend.Notification() //
+    .add('newPost', NewPostNotification),
+
   new Extend.Model(Discussion) //
     .attribute('subscription'),
 ];

extensions/subscriptions/js/src/forum/index.js

@@ -6,13 +6,9 @@ import addSubscriptionControls from './addSubscriptionControls';
 import addSubscriptionFilter from './addSubscriptionFilter';
 import addSubscriptionSettings from './addSubscriptionSettings';
 
-import NewPostNotification from './components/NewPostNotification';
-
 export { default as extend } from './extend';
 
 app.initializers.add('subscriptions', function () {
-  app.notificationComponents.newPost = NewPostNotification;
-
   addSubscriptionBadge();
   addSubscriptionControls();
   addSubscriptionFilter();

extensions/suspend/js/src/forum/extend.ts

@@ -3,10 +3,16 @@ import User from 'flarum/common/models/User';
 import Model from 'flarum/common/Model';
 
 import commonExtend from '../common/extend';
+import UserSuspendedNotification from './components/UserSuspendedNotification';
+import UserUnsuspendedNotification from './components/UserUnsuspendedNotification';
 
 export default [
   ...commonExtend,
 
+  new Extend.Notification() //
+    .add('userSuspended', UserSuspendedNotification)
+    .add('userUnsuspended', UserUnsuspendedNotification),
+
   new Extend.Model(User)
     .attribute<Date | null | undefined, string | null | undefined>('suspendedUntil', Model.transformDate)
     .attribute<string | null | undefined>('suspendReason')

extensions/suspend/js/src/forum/index.js

@@ -6,16 +6,11 @@ import Badge from 'flarum/common/components/Badge';
 import User from 'flarum/common/models/User';
 
 import SuspendUserModal from './components/SuspendUserModal';
-import UserSuspendedNotification from './components/UserSuspendedNotification';
-import UserUnsuspendedNotification from './components/UserUnsuspendedNotification';
 import checkForSuspension from './checkForSuspension';
 
 export { default as extend } from './extend';
 
 app.initializers.add('flarum-suspend', () => {
-  app.notificationComponents.userSuspended = UserSuspendedNotification;
-  app.notificationComponents.userUnsuspended = UserUnsuspendedNotification;
-
   extend(UserControls, 'moderationControls', (items, user) => {
     if (user.canSuspend()) {
       items.add(

framework/core/js/src/common/extenders/Notification.ts

@@ -0,0 +1,25 @@
+import IExtender, { IExtensionModule } from './IExtender';
+import type Component from '../Component';
+import ForumApplication from '../../forum/ForumApplication';
+import type Application from '../Application';
+import type { NewComponent } from '../Application';
+
+export default class Notification implements IExtender {
+  private notificationComponents: Record<string, new () => Component> = {};
+
+  /**
+   * Register a new notification component type.
+   *
+   * @param name The name of the notification type.
+   * @param component The component class to render the notification.
+   */
+  add(name: string, component: NewComponent<any>): Notification {
+    this.notificationComponents[name] = component;
+
+    return this;
+  }
+
+  extend(app: Application, extension: IExtensionModule): void {
+    Object.assign((app as unknown as ForumApplication).notificationComponents, this.notificationComponents);
+  }
+}

framework/core/js/src/common/extenders/index.ts

@@ -3,6 +3,7 @@ import PostTypes from './PostTypes';
 import Routes from './Routes';
 import Store from './Store';
 import Search from './Search';
+import Notification from './Notification';
 
 const extenders = {
   Model,
@@ -10,6 +11,7 @@ const extenders = {
   Routes,
   Store,
   Search,
+  Notification,
 };
 
 export default extenders;