Webpack 5, use v1 of flarum webpack config

Without these, content generated by webpack 5 breaks

js/package.json

@@ -8,7 +8,7 @@
     "clsx": "^1.1.1",
     "color-thief-browser": "^2.0.2",
     "dayjs": "^1.10.4",
-    "expose-loader": "^1.0.3",
+    "expose-loader": "^2.0.0",
     "jquery": "^3.6.0",
     "jquery.hotkeys": "^0.1.0",
     "mithril": "^2.0.4",
@@ -25,13 +25,13 @@
     "@types/textarea-caret": "^3.0.0",
     "bundlewatch": "^0.3.2",
     "cross-env": "^7.0.3",
-    "flarum-webpack-config": "0.1.0-beta.10",
+    "flarum-webpack-config": "^1.0.0",
     "husky": "^4.3.8",
     "prettier": "^2.2.1",
-    "webpack": "^4.46.0",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.0.0",
+    "webpack-bundle-analyzer": "^4.4.1",
+    "webpack-cli": "^4.0.0",
+    "webpack-merge": "^4.0.0"
   },
   "scripts": {
     "dev": "webpack --mode development --watch",

js/src/common/Application.js

@@ -12,6 +12,7 @@ import mapRoutes from './utils/mapRoutes';
 import RequestError from './utils/RequestError';
 import ScrollListener from './utils/ScrollListener';
 import liveHumanTimes from './utils/liveHumanTimes';
+import patchMithril from './utils/patchMithril';
 import { extend } from './extend';
 
 import Forum from './models/Forum';
@@ -166,6 +167,8 @@ export default class Application {
   }
 
   boot() {
+    patchMithril(window);
+
     this.initializers.toArray().forEach((initializer) => initializer(this));
 
     this.store.pushPayload({ data: this.data.resources });

js/src/common/FlarumRegistry.ts

@@ -0,0 +1,60 @@
+interface ExportRegistry {
+  moduleExports: object;
+
+  onLoads: object;
+
+  /**
+   * Add an instance to the registry.
+   * This serves as the equivalent of `flarum.core.compat[id] = object`
+   */
+  add(namespace: string, id: string, object: any): void;
+
+  /**
+   * Add a function to run when object of id "id" is added (or overriden).
+   * If such an object is already registered, the handler will be applied immediately.
+   */
+  onLoad(namespace: string, id: string, handler: Function): void;
+
+  /**
+   * Retrieve an object of type `id` from the registry.
+   */
+  get(namespace: string, id: string): any;
+}
+
+export default class FlarumRegistry implements ExportRegistry {
+  moduleExports = new Map<string, any>();
+  onLoads = new Map<string, Function[]>();
+
+  protected genKey(namespace: string, id: string): string {
+    return `${namespace};${id}`;
+  }
+
+  add(namespace: string, id: string, object: any) {
+    const key = this.genKey(namespace, id);
+
+    const onLoads = this.onLoads.get(key);
+    if (onLoads) {
+      onLoads.reduce((acc, handler) => handler(acc), object);
+    }
+
+    this.moduleExports.set(key, object);
+  }
+
+  onLoad(namespace: string, id: string, handler: Function) {
+    const key = this.genKey(namespace, id);
+
+    const loadedObject = this.moduleExports.get(key);
+    if (loadedObject) {
+      this.moduleExports[id] = handler(loadedObject);
+    } else {
+      const currOnLoads = this.onLoads.get(key);
+      this.onLoads.set(key, [...(currOnLoads || []), handler]);
+    }
+  }
+
+  get(namespace: string, id: string): any {
+    const key = this.genKey(namespace, id);
+
+    return this.moduleExports.get(key);
+  }
+}

js/src/common/index.js

@@ -1,5 +1,5 @@
 // Expose jQuery, mithril and dayjs to the window browser object
-import 'expose-loader?exposes[]=$&exposes[]=jQuery!jquery';
+import 'expose-loader?exposes=$,jQuery!jquery';
 import 'expose-loader?exposes=m!mithril';
 import 'expose-loader?exposes=dayjs!dayjs';
 
@@ -16,9 +16,9 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 
-import patchMithril from './utils/patchMithril';
+import FlarumRegistry from './FlarumRegistry';
 
-patchMithril(window);
+window.flreg = new FlarumRegistry();
 
 import * as Extend from './extend/index';
 

js/src/common/utils/evented.js

@@ -2,7 +2,7 @@
  * The `evented` mixin provides methods allowing an object to trigger events,
  * running externally registered event handlers.
  */
-export default {
+const evented = {
   /**
    * Arrays of registered event handlers, grouped by the event name.
    *
@@ -79,3 +79,5 @@ export default {
     }
   },
 };
+
+export default evented;

js/src/forum/utils/DiscussionControls.js

@@ -11,7 +11,7 @@ import extractText from '../../common/utils/extractText';
  * The `DiscussionControls` utility constructs a list of buttons for a
  * discussion which perform actions on it.
  */
-export default {
+const DiscussionControls = {
   /**
    * Get a list of controls for a discussion.
    *
@@ -259,3 +259,5 @@ export default {
     });
   },
 };
+
+export default DiscussionControls;

js/src/forum/utils/PostControls.js

@@ -8,7 +8,7 @@ import extractText from '../../common/utils/extractText';
  * The `PostControls` utility constructs a list of buttons for a post which
  * perform actions on it.
  */
-export default {
+const PostControls = {
   /**
    * Get a list of controls for a post.
    *
@@ -199,3 +199,5 @@ export default {
       });
   },
 };
+
+export default PostControls;

js/src/forum/utils/UserControls.js

@@ -8,7 +8,7 @@ import ItemList from '../../common/utils/ItemList';
  * The `UserControls` utility constructs a list of buttons for a user which
  * perform actions on it.
  */
-export default {
+const UserControls = {
   /**
    * Get a list of controls for a user.
    *
@@ -141,3 +141,5 @@ export default {
     app.modal.show(EditUserModal, { user });
   },
 };
+
+export default UserControls;

js/webpack.config.js

@@ -24,4 +24,4 @@ module.exports = merge(config(), {
 });
 
 module.exports['module'].rules[0].test = /\.(tsx?|js)$/;
-module.exports['module'].rules[0].use.options.presets.push('@babel/preset-typescript');
+module.exports['module'].rules[0].use[1].options.presets.push('@babel/preset-typescript');

src/Extend/Frontend.php

@@ -97,11 +97,11 @@ class Frontend implements ExtenderInterface
             if ($this->js) {
                 $assets->js(function (SourceCollector $sources) use ($moduleName) {
                     $sources->addString(function () {
-                        return 'var module={}';
+                        return 'var module={};';
                     });
                     $sources->addFile($this->js);
                     $sources->addString(function () use ($moduleName) {
-                        return "flarum.extensions['$moduleName']=module.exports";
+                        return "flarum.extensions['$moduleName']=module.exports;";
                     });
                 });
             }