@nu-art/thunderstorm-frontend 0.401.0 → 0.401.2

package/modules/routing/ModuleFE_RoutingV2.d.ts

@@ -1,12 +1,17 @@
-import { NavigateFunction, NavLinkProps } from 'react-router-dom';
+import { NavLinkProps } from 'react-router-dom';
 import { TS_Route } from './types.js';
 import { Module } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
 import { QueryParams, UrlQueryParams } from '@nu-art/thunderstorm-shared';
+export interface OnLocationChanged {
+    __onLocationChanged: (path: string) => void;
+}
+export declare const dispatch_onLocationChanged: ThunderDispatcher<OnLocationChanged, "__onLocationChanged", [path: string], void>;
 declare class ModuleFE_RoutingV2_Class extends Module<{}> {
     private routesMapByKey;
     private routesMapByPath;
-    private navigate;
-    goToRoute<P extends QueryParams>(route: TS_Route<P>, params?: Partial<P>): void;
+    constructor();
+    goToRoute<P extends QueryParams>(route: TS_Route<P>, params?: Partial<P>, hash?: string): void;
     redirect<P extends QueryParams>(route: TS_Route<P>, params?: Partial<P>): import("react/jsx-runtime").JSX.Element;
     generateRoutes(rootRoute: TS_Route): import("react/jsx-runtime").JSX.Element;
     buildRouteMap(route: TS_Route, _path?: string): void;
@@ -15,7 +20,6 @@ declare class ModuleFE_RoutingV2_Class extends Module<{}> {
     getRouteByKey(routeKey: string): TS_Route | undefined;
     getFullPath(routeKey: string): string;
     getCurrentRouteKey(): TS_Route;
-    setNavigate(navigate: NavigateFunction): void;
     /**
      * Get all query parameters from the current URL (decoded)
      */
@@ -63,6 +67,10 @@ declare class ModuleFE_RoutingV2_Class extends Module<{}> {
      * @returns The origin (protocol + hostname + port)
      */
     getOrigin(): string;
+    /**
+     * Convert location descriptor to URL string using composeUrl
+     */
+    private locationToUrl;
     /**
      * Navigate to a pathname with optional query params (adds to history)
      * @param location - Location descriptor with pathname and optional search
@@ -84,9 +92,7 @@ declare class ModuleFE_RoutingV2_Class extends Module<{}> {
     private getEncodedQueryParams;
     private composeQuery;
     private encodeUrlParams;
-    private createLocationDataFromQueryParams;
     private updateQueryParams;
-    private composeLocationUrl;
 }
 export declare const TS_NavLink: (props: {
     route: TS_Route;

package/modules/routing/ModuleFE_RoutingV2.js

@@ -1,24 +1,38 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore - unstable_HistoryRouter may not be in types but is available in React Router v6.4+
 import { BrowserRouter, Navigate, NavLink, Route, Routes } from 'react-router-dom';
-import { BadImplementationException, composeQueryParams, composeUrl, exists, Module, removeItemFromArray, _keys } from '@nu-art/ts-common';
-import { LocationChangeListener } from './LocationChangeListener.js';
+import { _keys, BadImplementationException, composeQueryParams, composeUrl, exists, Module, removeItemFromArray } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
 import { mouseEventHandler, stopPropagation } from '../../utils/tools.js';
 import { AwaitModules } from '../../components/AwaitModules/AwaitModules.js';
 import { AwaitSync } from '../../components/AwaitSync/AwaitSync.js';
+export const dispatch_onLocationChanged = new ThunderDispatcher('__onLocationChanged');
 class ModuleFE_RoutingV2_Class extends Module {
     // ######################## Inner Data ########################
     routesMapByKey = {};
     routesMapByPath = {};
-    navigate;
+    constructor() {
+        super();
+        // Listen to browser navigation events (back/forward buttons, etc.)
+        window.addEventListener('popstate', () => {
+            dispatch_onLocationChanged.dispatchUI(window.location.pathname);
+        });
+    }
     // ######################## Public Functions ########################
-    goToRoute(route, params) {
+    goToRoute(route, params, hash) {
         const fullPath = this.getFullPath(route.key);
         try {
-            const url = composeUrl(fullPath, params, window.location.hash);
-            if (window.location.href === url)
-                return this.logWarning(`attempting to set same route: ${url}`);
-            this.navigate(url);
+            const queryString = composeQueryParams(params);
+            const search = queryString.length > 0 ? `?${queryString}` : '';
+            const url = composeUrl(fullPath, params, hash);
+            if (url === window.location.href)
+                return this.logWarning(`attempting to set same route: ${fullPath}${search}`);
+            // Also update window.location to trigger BrowserRouter's popstate listener
+            // This ensures React Router detects the navigation change
+            window.history.pushState({}, '', url);
+            // Manually dispatch popstate event to trigger BrowserRouter update
+            window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
         }
         catch (e) {
             this.logError(`cannot resolve route for route: `, route, e);
@@ -33,7 +47,9 @@ class ModuleFE_RoutingV2_Class extends Module {
         // This needs to be a component in order to be build the routes on rendering after modules are awaited
         this.buildRouteMap(rootRoute);
         const RoutesRenderer = () => _jsx(Routes, { children: this.routeBuilder(rootRoute) });
-        return _jsxs(BrowserRouter, { children: [_jsx(LocationChangeListener, {}), _jsx(RoutesRenderer, {})] });
+        // Use BrowserRouter - unstable_HistoryRouter has compatibility issues
+        // We'll use window.location changes to trigger React Router updates
+        return _jsx(BrowserRouter, { children: _jsx(RoutesRenderer, {}) });
     }
     buildRouteMap(route, _path = '') {
         const path = `${_path}/`;
@@ -123,9 +139,6 @@ class ModuleFE_RoutingV2_Class extends Module {
     getCurrentRouteKey() {
         return this.routesMapByPath[window.location.pathname];
     }
-    setNavigate(navigate) {
-        this.navigate = navigate;
-    }
     // ######################## Query Param Methods ########################
     /**
      * Get all query parameters from the current URL (decoded)
@@ -207,21 +220,38 @@ class ModuleFE_RoutingV2_Class extends Module {
         return window.location.origin;
     }
     // ######################## Navigation Methods ########################
+    /**
+     * Convert location descriptor to URL string using composeUrl
+     */
+    locationToUrl(location) {
+        // Parse search params if provided as string
+        const params = {};
+        if (location.search) {
+            const searchParams = new URLSearchParams(location.search.startsWith('?') ? location.search.substring(1) : location.search);
+            searchParams.forEach((value, key) => {
+                params[key] = value;
+            });
+        }
+        const hash = location.hash?.startsWith('#') ? location.hash.substring(1) : location.hash;
+        return composeUrl(location.pathname, params, hash);
+    }
     /**
      * Navigate to a pathname with optional query params (adds to history)
      * @param location - Location descriptor with pathname and optional search
      */
     push(location) {
-        const url = this.composeLocationUrl(location);
-        this.navigate(url);
+        const url = this.locationToUrl(location);
+        window.history.pushState({}, '', url);
+        window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
     }
     /**
      * Replace current history entry with new pathname and optional query params
      * @param location - Location descriptor with pathname and optional search
      */
     replace(location) {
-        const url = this.composeLocationUrl(location);
-        this.navigate(url, { replace: true });
+        const url = this.locationToUrl(location);
+        window.history.replaceState({}, '', url);
+        window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
     }
     // ######################## Private Helper Methods ########################
     getEncodedQueryParams() {
@@ -264,20 +294,12 @@ class ModuleFE_RoutingV2_Class extends Module {
         });
         return encodedQueryParams;
     }
-    createLocationDataFromQueryParams(encodedQueryParams, pathname = window.location.pathname) {
-        const cleanPathname = !pathname.endsWith('/') ? pathname : pathname.substring(0, pathname.length - 1);
-        const search = encodedQueryParams ? this.composeQuery(encodedQueryParams) : '';
-        return search.length > 0 ? `${cleanPathname}?${search}` : cleanPathname;
-    }
     updateQueryParams(encodedQueryParams) {
-        const url = this.createLocationDataFromQueryParams(encodedQueryParams);
-        this.navigate(url, { replace: true });
-    }
-    composeLocationUrl(location) {
-        const cleanPathname = !location.pathname.endsWith('/') ? location.pathname : location.pathname.substring(0, location.pathname.length - 1);
-        const search = location.search || '';
-        const hash = location.hash || '';
-        return `${cleanPathname}${search}${hash}`;
+        const search = this.composeQuery(encodedQueryParams);
+        const url = `${window.location.pathname}${search ? `?${search}` : ''}`;
+        window.history.replaceState({}, '', url);
+        // Manually dispatch popstate event to trigger BrowserRouter update
+        window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
     }
 }
 export const TS_NavLink = (props) => {

package/modules/routing/index.d.ts

@@ -1,4 +1,3 @@
 export * from './types.js';
-export * from './LocationChangeListener.js';
 export * from './route.js';
 export * from './ModuleFE_RoutingV2.js';

package/modules/routing/index.js

@@ -1,4 +1,3 @@
 export * from './types.js';
-export * from './LocationChangeListener.js';
 export * from './route.js';
 export * from './ModuleFE_RoutingV2.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/thunderstorm-frontend",
-  "version": "0.401.0",
+  "version": "0.401.2",
   "description": "Thunderstorm Frontend",
   "keywords": [
     "TacB0sS",
@@ -37,11 +37,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@nu-art/thunderstorm-shared": "0.401.0",
-    "@nu-art/firebase-frontend": "0.401.0",
-    "@nu-art/firebase-shared": "0.401.0",
-    "@nu-art/ts-common": "0.401.0",
-    "@nu-art/ts-styles": "0.401.0",
+    "@nu-art/thunderstorm-shared": "0.401.2",
+    "@nu-art/firebase-frontend": "0.401.2",
+    "@nu-art/firebase-shared": "0.401.2",
+    "@nu-art/ts-common": "0.401.2",
+    "@nu-art/ts-styles": "0.401.2",
     "abort-controller": "^3.0.0",
     "axios": "^1.13.1",
     "body-parser": "^1.19.0",

package/modules/routing/LocationChangeListener.d.ts

@@ -1,6 +0,0 @@
-import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
-export interface OnLocationChanged {
-    __onLocationChanged: (path: string) => void;
-}
-export declare const dispatch_onLocationChanged: ThunderDispatcher<OnLocationChanged, "__onLocationChanged", [path: string], void>;
-export declare const LocationChangeListener: () => import("react/jsx-runtime").JSX.Element;

package/modules/routing/LocationChangeListener.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
-import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
-import { ModuleFE_RoutingV2 } from './ModuleFE_RoutingV2.js';
-export const dispatch_onLocationChanged = new ThunderDispatcher('__onLocationChanged');
-export const LocationChangeListener = () => {
-    const location = useLocation();
-    const navigate = useNavigate();
-    useEffect(() => {
-        dispatch_onLocationChanged.dispatchUI(location.pathname);
-    }, [location]);
-    ModuleFE_RoutingV2.setNavigate(navigate);
-    return _jsx(_Fragment, {});
-};