feat: Code Splitting (#3860)

* feat: configure webpack to allow splitting chunks
* feat: `JsDirectoryCompiler` and expose js assets URL
* chore: support es2020 dynamic importing
* feat: control which URL to fetch chunks from
* feat: allow showing async modals & split 'LogInModal'
* feat: split `SignUpModal`
* feat: allow rendering async pages & split `UserSecurityPage`
* fix: module might not be listed in chunk
* feat: lazy load user pages
* feat: track the chunk containing each module
* chore: lightly warn
* chore: split `Composer`
* feat: add common frontend (for split common chunks)
* fix: jsDoc typing imports should be ignored
* feat: split `PostStream` `ForgotPasswordModal` and `EditUserModal`
* fix: multiple inline async imports not picked up
* chore: new `common` frontend assets only needs a jsdir compiler
* feat: add revision hash to chunk import URL
* fix: nothing to split for `admin` frontend yet
* chore: cleanup registry API
* chore: throw an error in debug mode if attempting to import a non-loaded module
* feat: defer `extend` & `override` until after module registration
* fix: plugin not picking up on all module sources
* fix: must override default chunk loader function from webpack plugin
* feat: split tags `TagDiscussionModal` and `TagSelectionModal`
* fix: wrong export name
* feat: import chunked modules from external packages
* feat: extensions compatibility
* feat: Router frontend extender async component
* chore: clean JS output path (removes stale chunks)
* fix: common chunks also need flushing
* chore: flush backend stale chunks
* Apply fixes from StyleCI
* feat: loading alert when async page component is loading
* chore: `yarn format`
* chore: typings
* chore: remove exception
* Apply fixes from StyleCI
* chore(infra): bundlewatch
* chore(infra): bundlewatch split chunks
* feat: split text editor
* chore: tag typings
* chore: bundlewatch
* fix: windows paths
* fix: wrong planned ext import format

extensions/mentions/js/src/forum/addComposerAutocomplete.js

@@ -1,6 +1,5 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
-import TextEditor from 'flarum/common/components/TextEditor';
 import TextEditorButton from 'flarum/common/components/TextEditorButton';
 import KeyboardNavigatable from 'flarum/common/utils/KeyboardNavigatable';
 
@@ -11,7 +10,7 @@ export default function addComposerAutocomplete() {
   const $container = $('<div class="ComposerBody-mentionsDropdownContainer"></div>');
   const dropdown = new AutocompleteDropdown();
 
-  extend(TextEditor.prototype, 'oncreate', function () {
+  extend('flarum/common/components/TextEditor', 'onbuild', function () {
     const $editor = this.$('.TextEditor-editor').wrap('<div class="ComposerBody-mentionsWrapper"></div>');
 
     this.navigator = new KeyboardNavigatable();
@@ -26,7 +25,7 @@ export default function addComposerAutocomplete() {
     $editor.after($container);
   });
 
-  extend(TextEditor.prototype, 'buildEditorParams', function (params) {
+  extend('flarum/common/components/TextEditor', 'buildEditorParams', function (params) {
     let relMentionStart;
     let absMentionStart;
     let matchTyped;
@@ -128,7 +127,7 @@ export default function addComposerAutocomplete() {
     params.inputListeners.push(suggestionsInputListener);
   });
 
-  extend(TextEditor.prototype, 'toolbarItems', function (items) {
+  extend('flarum/common/components/TextEditor', 'toolbarItems', function (items) {
     items.add(
       'mention',
       <TextEditorButton onclick={() => this.attrs.composer.editor.insertAtCursor(' @')} icon="fas fa-at">

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

@@ -1,6 +1,5 @@
 import { extend } from 'flarum/common/extend';
 import app from 'flarum/forum/app';
-import NotificationGrid from 'flarum/forum/components/NotificationGrid';
 import { getPlainContent } from 'flarum/common/utils/string';
 import textContrastClass from 'flarum/common/helpers/textContrastClass';
 import Post from 'flarum/forum/components/Post';
@@ -46,7 +45,7 @@ app.initializers.add('flarum-mentions', function () {
   app.notificationComponents.groupMentioned = GroupMentionedNotification;
 
   // Add notification preferences.
-  extend(NotificationGrid.prototype, 'notificationTypes', function (items) {
+  extend('flarum/forum/components/NotificationGrid', 'notificationTypes', function (items) {
     items.add('postMentioned', {
       name: 'postMentioned',
       icon: 'fas fa-reply',

extensions/mentions/js/src/forum/mentionables/PostMention.tsx

@@ -6,8 +6,6 @@ import usernameHelper from 'flarum/common/helpers/username';
 import avatar from 'flarum/common/helpers/avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import { truncate } from 'flarum/common/utils/string';
-import ReplyComposer from 'flarum/forum/components/ReplyComposer';
-import EditPostComposer from 'flarum/forum/components/EditPostComposer';
 import getCleanDisplayName from '../utils/getCleanDisplayName';
 import type AtMentionFormat from './formats/AtMentionFormat';
 
@@ -23,7 +21,10 @@ export default class PostMention extends MentionableModel<Post, AtMentionFormat>
    * match any username characters that have been typed.
    */
   initialResults(): Post[] {
-    if (!app.composer.bodyMatches(ReplyComposer) && !app.composer.bodyMatches(EditPostComposer)) {
+    const EditPostComposer = flarum.reg.checkModule('core', 'forum/components/EditPostComposer');
+    const ReplyComposer = flarum.reg.checkModule('core', 'forum/components/ReplyComposer');
+
+    if ((!ReplyComposer || !app.composer.bodyMatches(ReplyComposer)) && (!EditPostComposer || !app.composer.bodyMatches(EditPostComposer))) {
       return [];
     }
 

extensions/mentions/js/src/forum/utils/reply.js

@@ -1,6 +1,5 @@
 import app from 'flarum/forum/app';
 import DiscussionControls from 'flarum/forum/utils/DiscussionControls';
-import EditPostComposer from 'flarum/forum/components/EditPostComposer';
 
 export function insertMention(post, composer, quote) {
   return new Promise((resolve) => {
@@ -27,7 +26,9 @@ export function insertMention(post, composer, quote) {
 }
 
 export default function reply(post, quote) {
-  if (app.composer.bodyMatches(EditPostComposer) && app.composer.body.attrs.post.discussion() === post.discussion()) {
+  const EditPostComposer = flarum.reg.checkModule('core', 'forum/components/EditPostComposer');
+
+  if (EditPostComposer && app.composer.bodyMatches(EditPostComposer) && app.composer.body.attrs.post.discussion() === post.discussion()) {
     // If we're already editing a post in the discussion of post we're quoting,
     // insert the mention directly.
     return insertMention(post, app.composer, quote);