underpost 3.2.4 → 3.2.8

package/src/client/components/core/Router.js

@@ -12,6 +12,25 @@ import { Worker } from './Worker.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
+/**
+ * @type {function | null}
+ * @description The active routes function registered by the current app router.
+ * Replaces the former `window.Routes` global so `getProxyPath` can resolve
+ * sub-directory proxy paths without polluting the global scope.
+ * @memberof PwaRouter
+ */
+let _activeRoutes = null;
+
+/**
+ * Registers the active routes function for the current app.
+ * Called automatically by `LoadRouter`; should not be called manually.
+ * @param {function} routesFn - A function returning the routes object.
+ * @memberof PwaRouter
+ */
+const registerRoutes = (routesFn) => {
+  _activeRoutes = routesFn;
+};
+
 /**
  * @type {Object.<string, function>}
  * @description Holds event listeners for router changes.
@@ -71,15 +90,15 @@ const setRouterReady = () => {
 
 /**
  * Determines the base path for the application, often used for routing within a sub-directory.
- * It checks the current URL's pathname and `window.Routes` to return the appropriate proxy path.
+ * It checks the current URL's pathname and the active registered routes to return the appropriate proxy path.
  *
  * @returns {string} The calculated proxy path. Returns `/<first-segment>/` if a segment exists,
- *          otherwise `/`. If `window.Routes` indicates the path is a root route, it returns `/`.
+ *          otherwise `/`. If the registered routes indicate the path is a root route, it returns `/`.
  * @memberof PwaRouter
  */
 const getProxyPath = () => {
   let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
-  if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
+  if (_activeRoutes && path !== '/' && path.slice(0, -1) in _activeRoutes()) path = '/';
   return path;
 };
 
@@ -241,6 +260,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
  */
 const LoadRouter = async function (RouterInstance) {
   await RouterReady;
+  if (RouterInstance.Routes) registerRoutes(RouterInstance.Routes);
   Router(RouterInstance);
   window.onpopstate = (e) => {
     Router({ ...RouterInstance, e });
@@ -478,6 +498,7 @@ const setQueryParams = (newParams, options = { replace: true }) => {
 
 export {
   RouterEvents,
+  registerRoutes,
   navigateToProfile,
   closeModalRouteChangeEvents,
   coreUI,

package/src/client/components/core/SearchBox.js

@@ -14,18 +14,18 @@ import { darkTheme, ThemeEvents, subThemeManager, lightenHex, darkenHex } from '
 const logger = loggerFactory(import.meta);
 
 /**
- * SearchBox singleton object providing extensible search functionality.
+ * SearchBox class providing extensible search functionality.
  * Supports default menu/route search and pluggable search providers with
  * custom rendering, click handlers, and result merging.
  * @memberof SearchBoxClient
  */
-const SearchBox = {
+class SearchBox {
   /**
    * Internal data storage for search state and handlers.
    * @type {object}
    * @memberof SearchBoxClient.SearchBox
    */
-  Data: {},
+  static Data = {};
 
   /**
    * Registry of registered search provider plugins.
@@ -38,7 +38,7 @@ const SearchBox = {
    * @type {Array<object>}
    * @memberof SearchBoxClient.SearchBox
    */
-  providers: [],
+  static providers = [];
 
   /**
    * Recent search results manager with localStorage persistence.
@@ -47,7 +47,7 @@ const SearchBox = {
    * @type {object}
    * @memberof SearchBoxClient.SearchBox
    */
-  RecentResults: {
+  static RecentResults = {
     /**
      * Storage key for localStorage persistence
      * @type {string}
@@ -159,7 +159,7 @@ const SearchBox = {
       });
       this.saveAll(filtered);
     },
-  },
+  };
 
   /**
    * Registers a search provider plugin for extensible search functionality.
@@ -173,7 +173,7 @@ const SearchBox = {
    * @param {number} [provider.priority=50] - Priority for result ordering (lower = higher priority).
    * @returns {void}
    */
-  registerProvider: function (provider) {
+  static registerProvider(provider) {
     if (!provider.id || !provider.search) {
       logger.error('Invalid provider. Must have id and search function');
       return;
@@ -192,7 +192,7 @@ const SearchBox = {
     });
 
     logger.info(`Registered search provider: ${provider.id}`);
-  },
+  }
 
   /**
    * Unregisters a search provider by its ID.
@@ -200,10 +200,10 @@ const SearchBox = {
    * @param {string} providerId - The ID of the provider to unregister.
    * @returns {void}
    */
-  unregisterProvider: function (providerId) {
+  static unregisterProvider(providerId) {
     this.providers = this.providers.filter((p) => p.id !== providerId);
     logger.info(`Unregistered search provider: ${providerId}`);
-  },
+  }
 
   /**
    * Default result renderer with support for tags and badges.
@@ -219,13 +219,13 @@ const SearchBox = {
    * @param {string} result.providerId - Provider ID that generated this result.
    * @returns {string} HTML string for the search result.
    */
-  defaultRenderResult: function (result) {
+  static defaultRenderResult(result) {
     const icon = result.icon || '<i class="fas fa-file"></i>';
     const title = result.title || result.id || 'Untitled';
     const subtitle = result.subtitle || '';
     const tags = result.tags || [];
 
-    // Render tags if available
+    // instance tags if available
     const tagsHtml =
       tags.length > 0
         ? `<div class="search-result-tags">
@@ -247,7 +247,7 @@ const SearchBox = {
         </div>
       </div>
     `;
-  },
+  }
 
   /**
    * Navigates through search results using keyboard arrow keys.
@@ -260,7 +260,7 @@ const SearchBox = {
    * @param {number} totalItems - Total number of result items.
    * @returns {number} New active index after navigation.
    */
-  navigateResults: function (direction, containerId, currentIndex, totalItems) {
+  static navigateResults(direction, containerId, currentIndex, totalItems) {
     if (!containerId || totalItems === 0) return currentIndex;
 
     const container = s(`#${containerId}`) || s(`.${containerId}`);
@@ -289,7 +289,7 @@ const SearchBox = {
     }
 
     return newIndex;
-  },
+  }
 
   /**
    * Searches through default application routes for matches.
@@ -303,7 +303,7 @@ const SearchBox = {
    * @param {string} [context.options.searchCustomImgClass] - Custom image class to search for.
    * @returns {Array<object>} Array of route search results.
    */
-  searchRoutes: function (query, context) {
+  static searchRoutes(query, context) {
     const results = [];
     const { RouterInstance, options = {} } = context;
 
@@ -346,7 +346,7 @@ const SearchBox = {
       }
     }
     return results;
-  },
+  }
 
   /**
    * Executes search across all registered providers and default routes.
@@ -356,7 +356,7 @@ const SearchBox = {
    * @param {object} [context={}] - Search context object passed to all providers.
    * @returns {Promise<Array<object>>} Promise resolving to combined, priority-sorted results array.
    */
-  search: async function (query, context = {}) {
+  static async search(query, context = {}) {
     const allResults = [];
 
     // Always include default route search (backward compatible)
@@ -387,7 +387,7 @@ const SearchBox = {
     allResults.sort((a, b) => (a.priority || 50) - (b.priority || 50));
 
     return allResults;
-  },
+  }
 
   /**
    * Renders search results into a container element.
@@ -396,10 +396,10 @@ const SearchBox = {
    * @memberof SearchBoxClient.SearchBox
    * @param {Array<object>} results - Array of search results to render.
    * @param {string} containerId - Results container element ID or class name.
-   * @param {object} [context={}] - Render context passed to renderers and handlers.
+   * @param {object} [context={}] - instance context passed to renderers and handlers.
    * @returns {void}
    */
-  renderResults: function (results, containerId, context = {}) {
+  static renderResults(results, containerId, context = {}) {
     const container = s(`#${containerId}`) || s(`.${containerId}`);
     if (!container) {
       logger.warn(`Container ${containerId} not found`);
@@ -468,7 +468,7 @@ const SearchBox = {
         provider.attachTagHandlers();
       }
     });
-  },
+  }
 
   /**
    * Attaches delete event handlers to result delete buttons within a specific container.
@@ -481,7 +481,7 @@ const SearchBox = {
    * @param {object} [context={}] - Context object.
    * @returns {void}
    */
-  attachDeleteHandlers: function (container, results, containerId, context = {}) {
+  static attachDeleteHandlers(container, results, containerId, context = {}) {
     // Only select delete buttons within this specific container
     const deleteButtons = container.querySelectorAll('.search-result-delete-btn');
     deleteButtons.forEach((btn) => {
@@ -530,7 +530,7 @@ const SearchBox = {
         }
       });
     });
-  },
+  }
 
   /**
    * Renders a default route search result.
@@ -542,11 +542,11 @@ const SearchBox = {
    * @param {HTMLElement} [result.fontAwesomeIcon] - FontAwesome icon element.
    * @param {HTMLElement} [result.imgElement] - Image icon element.
    * @param {number} index - The index of this result in the results array.
-   * @param {object} [context={}] - Render context object.
+   * @param {object} [context={}] - instance context object.
    * @param {object} [context.options] - Additional rendering options.
    * @returns {string} HTML string for the route search result.
    */
-  renderRouteResult: function (result, index, context = {}) {
+  static renderRouteResult(result, index, context = {}) {
     const { options = {} } = context;
     const routerId = result.routerId;
     const fontAwesomeIcon = result.fontAwesomeIcon;
@@ -584,7 +584,7 @@ const SearchBox = {
       }
     }
 
-    const translatedText = Translate.Render(routerId);
+    const translatedText = Translate.instance(routerId);
 
     return html`
       <div
@@ -600,7 +600,7 @@ const SearchBox = {
         </div>
       </div>
     `;
-  },
+  }
 
   /**
    * Attaches click event handlers to all rendered search results.
@@ -612,7 +612,7 @@ const SearchBox = {
    * @param {Function} [context.onResultClick] - Callback invoked after any result is clicked.
    * @returns {void}
    */
-  attachClickHandlers: function (results, containerId, context = {}) {
+  static attachClickHandlers(results, containerId, context = {}) {
     results.forEach((result, index) => {
       const element = s(`[data-result-index="${index}"]`);
       if (!element) return;
@@ -643,7 +643,7 @@ const SearchBox = {
         }
       };
     });
-  },
+  }
 
   /**
    * Scrolls an element into view within a scrollable container if needed.
@@ -668,7 +668,7 @@ const SearchBox = {
    * @param {HTMLElement} container - The scrollable container (or parent of scrollable).
    * @returns {void}
    */
-  scrollIntoViewIfNeeded: function (element, container) {
+  static scrollIntoViewIfNeeded(element, container) {
     if (!element || !container) return;
 
     // CRITICAL FIX: Find the actual scrollable container
@@ -744,7 +744,7 @@ const SearchBox = {
         });
       }
     }, 0);
-  },
+  }
 
   /**
    * Gets base CSS styles for SearchBox with theme-aware styling.
@@ -753,7 +753,7 @@ const SearchBox = {
    * @memberof SearchBoxClient.SearchBox
    * @returns {string} CSS string containing all base SearchBox styles.
    */
-  getBaseStyles: () => {
+  static getBaseStyles = () => {
     // Get theme color from subThemeManager
     const themeColor = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
     const hasThemeColor = themeColor && themeColor !== null;
@@ -968,7 +968,7 @@ const SearchBox = {
         transition: all 0.2s ease;
       }
     `;
-  },
+  };
 
   /**
    * Injects base SearchBox styles into the document head.
@@ -977,7 +977,7 @@ const SearchBox = {
    * @memberof SearchBoxClient.SearchBox
    * @returns {void}
    */
-  injectStyles: function () {
+  static injectStyles() {
     const styleId = 'search-box-base-styles';
     let styleTag = document.getElementById(styleId);
 
@@ -1001,7 +1001,7 @@ const SearchBox = {
         }
       };
     }
-  },
-};
+  }
+}
 
 export { SearchBox };

package/src/client/components/core/SignUp.js

@@ -1,19 +1,29 @@
 import { UserService } from '../../services/user/user.service.js';
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
+import { AuthEventType, authSignupEvents } from './ClientEvents.js';
 import { EventsUI } from './EventsUI.js';
 import { Input } from './Input.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { s } from './VanillaJs.js';
-
-const SignUp = {
-  Event: {},
-  Trigger: async function (options) {
-    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
-  },
-  Render: async function (options = { bottomRender: async () => '' }) {
+class SignUp {
+  static Event = {};
+  static onSignup(listener, options = {}) {
+    return authSignupEvents.on(AuthEventType.signup, listener, options);
+  }
+  static offSignup(key) {
+    return authSignupEvents.off(key);
+  }
+  static hasSignupListener(key) {
+    return authSignupEvents.has(key);
+  }
+  static async Trigger(options) {
+    await authSignupEvents.emit(AuthEventType.signup, options);
+    for (const eventKey of Object.keys(SignUp.Event)) await SignUp.Event[eventKey](options);
+  }
+  static async instance(options = { bottomRender: async () => '' }) {
     setTimeout(async () => {
       const formData = [
         {
@@ -33,7 +43,6 @@ const SignUp = {
         },
       ];
       const validators = await Validator.instance(formData);
-
       EventsUI.onClick(`.btn-sign-up`, async (e) => {
         e.preventDefault();
         const { errorMessage } = await validators();
@@ -47,23 +56,23 @@ const SignUp = {
           let error = '';
           if (data.message) {
             if (data.message.match('duplicate')) {
-              if (data.message.match('username')) error += Translate.Render('error-username-taken');
-              if (data.message.match('email')) error += Translate.Render('error-email-taken');
+              if (data.message.match('username')) error += Translate.instance('error-username-taken');
+              if (data.message.match('email')) error += Translate.instance('error-email-taken');
             } else {
-              if (data.message.match('username')) error += Translate.Render('error-username-invalid');
-              if (data.message.match('email')) error += Translate.Render('error-email-invalid');
-              if (data.message.match('password')) error += Translate.Render('error-password-invalid');
+              if (data.message.match('username')) error += Translate.instance('error-username-invalid');
+              if (data.message.match('email')) error += Translate.instance('error-email-invalid');
+              if (data.message.match('password')) error += Translate.instance('error-password-invalid');
             }
             return error;
           }
-          return Translate.Render('error-register-user');
+          return Translate.instance('error-register-user');
         };
         NotificationManager.Push({
           html:
             typeof result.data === 'string'
               ? result.data
               : result.status === 'success'
-                ? Translate.Render(`success-register-user`)
+                ? Translate.instance(`success-register-user`)
                 : handleSignUpError(result),
           status: result.status,
         });
@@ -81,64 +90,64 @@ const SignUp = {
       });
     });
     return html`
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'in section-mp form-button btn-sign-up-i-have-account',
-        label: html`<i class="fas fa-sign-in-alt"></i> ${Translate.Render('i-have-account')}<br />${Translate.Render(
+        label: html`<i class="fas fa-sign-in-alt"></i> ${Translate.instance('i-have-account')}<br />${Translate.instance(
             'log-in',
           )}`,
         type: 'button',
       })}
       <form class="in">
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `sign-up-username`,
             type: 'text',
-            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance('username')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `sign-up-email`,
             type: 'email',
-            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.instance('email')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             autocomplete: 'email',
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `sign-up-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('password')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `sign-up-repeat-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('repeat')} ${Translate.Render('password')}`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('repeat')}
+              ${Translate.instance('password')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
           })}
         </div>
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-sign-up',
-            label: Translate.Render('sign-up'),
+            label: Translate.instance('sign-up'),
             type: 'submit',
           })}
         </div>
       </form>
     `;
-  },
-};
-
+  }
+}
 export { SignUp };

package/src/client/components/core/SocketIo.js

@@ -6,6 +6,7 @@
  * @namespace SocketIoProvider
  */
 import { io } from 'socket.io/client-dist/socket.io.esm.min.js';
+import { SocketEventType, socketEvents } from './ClientEvents.js';
 import { loggerFactory } from './Logger.js';
 import { getWsBasePath, getWsBaseUrl } from '../../services/core/core.service.js';
 
@@ -46,6 +47,30 @@ class SocketIoProvider {
    * @type {string|undefined}
    */
   static host;
+  static onConnect(listener, options = {}) {
+    return socketEvents.on(SocketEventType.connect, listener, options);
+  }
+  static offConnect(key) {
+    return socketEvents.off(key);
+  }
+  static onConnectError(listener, options = {}) {
+    return socketEvents.on(SocketEventType.connectError, listener, options);
+  }
+  static offConnectError(key) {
+    return socketEvents.off(key);
+  }
+  static onDisconnect(listener, options = {}) {
+    return socketEvents.on(SocketEventType.disconnect, listener, options);
+  }
+  static offDisconnect(key) {
+    return socketEvents.off(key);
+  }
+  static onChannel(type, listener, options = {}) {
+    return socketEvents.on(SocketEventType.channel(type), listener, options);
+  }
+  static offChannel(key) {
+    return socketEvents.off(key);
+  }
 
   /**
    * Emits a JSON-serialized payload to the server on the specified channel.
@@ -75,7 +100,7 @@ class SocketIoProvider {
    * @param {Object.<string, Object>} [options.channels] - Channel definitions to register listeners for.
    * @returns {Promise<void>}
    */
-  static async Init(options) {
+  static async instance(options) {
     if (this.socket) this.socket.disconnect();
     const path = getWsBasePath();
     this.host = options.host ? options.host : getWsBaseUrl({ wsBasePath: '' });
@@ -93,16 +118,19 @@ class SocketIoProvider {
 
     this.socket.on('connect', () => {
       logger.info(`event: connect | session id: ${this.socket.id}`);
+      socketEvents.emit(SocketEventType.connect, { id: this.socket.id });
       Object.keys(this.Event.connect).map((keyEvent) => this.Event.connect[keyEvent]());
     });
 
     this.socket.on('connect_error', (err) => {
       logger.info(`event: connect_error | reason: ${err.message}`);
+      socketEvents.emit(SocketEventType.connectError, { error: err });
       Object.keys(this.Event.connect_error).map((keyEvent) => this.Event.connect_error[keyEvent](err));
     });
 
     this.socket.on('disconnect', (reason) => {
       logger.info(`event: disconnect | reason: ${reason}`);
+      socketEvents.emit(SocketEventType.disconnect, { reason });
       Object.keys(this.Event.disconnect).map((keyEvent) => this.Event.disconnect[keyEvent](reason));
     });
 
@@ -120,8 +148,9 @@ class SocketIoProvider {
   static setChannels(channels) {
     Object.keys(channels).map((type) => {
       logger.info(`load chanel`, type);
-      this.Event[type] = {};
+      if (!this.Event[type]) this.Event[type] = {};
       this.socket.on(type, (...args) => {
+        socketEvents.emit(SocketEventType.channel(type), { type, args });
         Object.keys(this.Event[type]).map((keyEvent) => this.Event[type][keyEvent](args));
       });
     });

package/src/client/components/core/SocketIoHandler.js

@@ -28,14 +28,14 @@ class SocketIoHandlerProvider {
    *
    * @static
    * @param {import('./AppStore.js').AppStore} appStore - The app-specific AppStore instance.
-   * @returns {{ Init: function(): Promise<void> }} An object with an `Init` method for SocketIo event registration.
+   * @returns {{ instance: function(): Promise<void> }} An object with an `instance` method for SocketIo event registration.
    */
   static create(appStore) {
     return {
-      Init() {
+      instance() {
         return new Promise((resolve) => {
           for (const type of Object.keys(appStore.Data)) {
-            SocketIo.Event[type][s4()] = async (args) => {
+            SocketIo.onChannel(type, async ({ args }) => {
               args = JSON.parse(args[0]);
               switch (type) {
                 case 'chat':
@@ -61,10 +61,10 @@ class SocketIoHandlerProvider {
                 default:
                   break;
               }
-            };
+            }, { key: s4() });
           }
-          SocketIo.Event.connect[s4()] = async (reason) => {};
-          SocketIo.Event.disconnect[s4()] = async (reason) => {};
+          SocketIo.onConnect(async ({ id }) => {}, { key: s4() });
+          SocketIo.onDisconnect(async ({ reason }) => {}, { key: s4() });
           return resolve();
         });
       },