common: rewrite modal manager to not store vnode

js/dist/forum.js

@@ -15481,7 +15481,7 @@ var Application = /*#__PURE__*/function () {
 
   _proto.showDebug = function showDebug(error) {
     // this.alerts.dismiss(this.requestError.alert);
-    this.modal.show(_components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_19__["default"].component({
+    this.modal.show(new _components_RequestErrorModal__WEBPACK_IMPORTED_MODULE_19__["default"]({
       error: error
     }));
   };
@@ -16818,7 +16818,7 @@ var Button = /*#__PURE__*/function (_Component) {
       delete attrs.onclick;
     }
 
-    return m("button", attrs, this.getButtonContent(iconName, attrs.loading, children));
+    return m("button", attrs, this.getButtonContent(iconName, loading, children));
   }
   /**
    * Get the template for the button's content.
@@ -17468,12 +17468,12 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 /**
  * The `ModalManager` component manages a modal dialog. Only one modal dialog
  * can be shown at once; loading a new component into the ModalManager will
  * overwrite the previous one.
  */
+
 var ModalManager = /*#__PURE__*/function (_Component) {
   Object(_babel_runtime_helpers_esm_inheritsLoose__WEBPACK_IMPORTED_MODULE_0__["default"])(ModalManager, _Component);
 
@@ -17485,10 +17485,11 @@ var ModalManager = /*#__PURE__*/function (_Component) {
     }
 
     _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.node = void 0;
     _this.showing = void 0;
     _this.hideTimeout = void 0;
-    _this.component = void 0;
+    _this.modal = null;
+    _this.modalProps = {};
+    _this.component = null;
     return _this;
   }
 
@@ -17506,7 +17507,7 @@ var ModalManager = /*#__PURE__*/function (_Component) {
       id: "Modal",
       onclick: this.onclick.bind(this),
       key: "modal"
-    }, this.node);
+    }, this.modal && m(this.modal, this.modalProps));
   }
   /**
    * Show a modal dialog.
@@ -17523,7 +17524,9 @@ var ModalManager = /*#__PURE__*/function (_Component) {
 
     clearTimeout(this.hideTimeout);
     this.showing = true;
-    this.node = component.tag ? component : component.render(); // if (app.current) app.current.retain = true;
+    this.modal = component.tag || component.constructor;
+    this.modalProps = component.props || component.attrs || {};
+    this.modalProps.oninit = this.onModalInit.bind(this); // if (app.current) app.current.retain = true;
 
     m.redraw();
 
@@ -17563,6 +17566,9 @@ var ModalManager = /*#__PURE__*/function (_Component) {
     this.hideTimeout = setTimeout(function () {
       return micromodal__WEBPACK_IMPORTED_MODULE_1__["default"].close('Modal');
     });
+    this.modal = null;
+    this.component = null;
+    this.modalProps = {};
   }
   /**
    * Clear content from the modal area.
@@ -17587,6 +17593,14 @@ var ModalManager = /*#__PURE__*/function (_Component) {
     if (this.component) {
       this.component.onready();
     }
+  }
+  /**
+   * Set component in ModalManager to current vnode state - a Modal instance
+   */
+  ;
+
+  _proto.onModalInit = function onModalInit(vnode) {
+    this.component = vnode.state;
   };
 
   return ModalManager;

js/src/common/Application.ts

@@ -303,6 +303,6 @@ export default abstract class Application {
     private showDebug(error: RequestError) {
         // this.alerts.dismiss(this.requestError.alert);
 
-        this.modal.show(RequestErrorModal.component({ error }));
+        this.modal.show(new RequestErrorModal({ error }));
     }
 }

js/src/common/components/ModalManager.tsx

@@ -1,8 +1,7 @@
 import MicroModal from 'micromodal';
 
-import Component from '../Component';
+import Component, { ComponentProps } from '../Component';
 import Modal from './Modal';
-import { Vnode } from 'mithril';
 
 /**
  * The `ModalManager` component manages a modal dialog. Only one modal dialog
@@ -10,11 +9,13 @@ import { Vnode } from 'mithril';
  * overwrite the previous one.
  */
 export default class ModalManager extends Component {
-    protected node: Vnode;
+    showing!: boolean;
+    hideTimeout!: number;
 
-    showing: boolean;
+    modal: typeof Modal | null = null;
-    hideTimeout: number;
+    modalProps: ComponentProps = {};
-    component?: Modal;
+
+    component: Modal | null = null;
 
     oncreate(vnode) {
         super.oncreate(vnode);
@@ -25,7 +26,7 @@ export default class ModalManager extends Component {
     view() {
         return (
             <div className="ModalManager modal" id="Modal" onclick={this.onclick.bind(this)} key="modal">
-                {this.node}
+                {this.modal && m(this.modal, this.modalProps)}
             </div>
         );
     }
@@ -33,7 +34,7 @@ export default class ModalManager extends Component {
     /**
      * Show a modal dialog.
      */
-    show(component) {
+    show(component: Modal) {
         if (!(component instanceof Modal) && !(component.tag?.prototype instanceof Modal)) {
             throw new Error('The ModalManager component can only show Modal components');
         }
@@ -41,7 +42,10 @@ export default class ModalManager extends Component {
         clearTimeout(this.hideTimeout);
 
         this.showing = true;
-        this.node = component.tag ? component : component.render();
+        this.modal = component.tag || component.constructor;
+        this.modalProps = component.props || component.attrs || {};
+
+        this.modalProps.oninit = this.onModalInit.bind(this);
 
         // if (app.current) app.current.retain = true;
 
@@ -85,6 +89,10 @@ export default class ModalManager extends Component {
         // bit to give the `show` method the opportunity to prevent this from going
         // ahead.
         this.hideTimeout = setTimeout(() => MicroModal.close('Modal'));
+
+        this.modal = null;
+        this.component = null;
+        this.modalProps = {};
     }
 
     /**
@@ -110,4 +118,11 @@ export default class ModalManager extends Component {
             this.component.onready();
         }
     }
+
+    /**
+     * Set component in ModalManager to current vnode state - a Modal instance
+     */
+    protected onModalInit(vnode) {
+        this.component = vnode.state;
+    }
 }