@nu-art/thunderstorm-frontend 0.400.9 → 0.400.12

package/modules/routing/ModuleFE_RoutingV2.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BrowserRouter, Navigate, NavLink, Route, Routes } from 'react-router-dom';
-import { BadImplementationException, composeUrl, Module, removeItemFromArray } from '@nu-art/ts-common';
+import { BadImplementationException, composeQueryParams, composeUrl, exists, Module, removeItemFromArray, _keys } from '@nu-art/ts-common';
 import { LocationChangeListener } from './LocationChangeListener.js';
 import { mouseEventHandler, stopPropagation } from '../../utils/tools.js';
 import { AwaitModules } from '../../components/AwaitModules/AwaitModules.js';
@@ -126,6 +126,159 @@ class ModuleFE_RoutingV2_Class extends Module {
     setNavigate(navigate) {
         this.navigate = navigate;
     }
+    // ######################## Query Param Methods ########################
+    /**
+     * Get all query parameters from the current URL (decoded)
+     */
+    getQueryParams() {
+        const params = this.getEncodedQueryParams();
+        _keys(params).forEach(key => {
+            const _param = params[key];
+            if (!exists(_param))
+                return;
+            const value = `${params[key]}`;
+            params[key] = decodeURIComponent(value);
+        });
+        return params;
+    }
+    /**
+     * Get a single query parameter from the current URL
+     * @param key - The query parameter key
+     * @returns The decoded value, null if key exists but value is empty, or undefined if key doesn't exist
+     */
+    getQueryParameter(key) {
+        const queryParams = this.getQueryParams();
+        const value = queryParams[key];
+        if (value === undefined && Object.keys(queryParams).includes(key))
+            return null;
+        return value;
+    }
+    /**
+     * Replace all query parameters on the current route
+     * @param queryParams - The query parameters to set
+     */
+    setQuery(queryParams) {
+        const encodedQueryParams = this.encodeUrlParams(queryParams);
+        this.updateQueryParams(encodedQueryParams);
+    }
+    /**
+     * Add or update a single query parameter on the current route
+     * @param key - The query parameter key
+     * @param value - The query parameter value
+     */
+    addQueryParam(key, value) {
+        const decodedQueryParams = this.getQueryParams();
+        decodedQueryParams[key] = value;
+        this.updateQueryParams(decodedQueryParams);
+    }
+    /**
+     * Remove a single query parameter from the current route
+     * @param key - The query parameter key to remove
+     */
+    removeQueryParam(key) {
+        const encodedQueryParams = this.getEncodedQueryParams();
+        delete encodedQueryParams[key];
+        this.updateQueryParams(encodedQueryParams);
+    }
+    // ######################## URL Utility Methods ########################
+    /**
+     * Get the current location object (compatible with BrowserHistory.getCurrent())
+     * @returns Object with pathname and search properties
+     */
+    getCurrent() {
+        return {
+            pathname: window.location.pathname,
+            search: window.location.search,
+            hash: window.location.hash,
+        };
+    }
+    /**
+     * Get the current URL pathname
+     * @returns The current pathname
+     */
+    getCurrentUrl() {
+        return window.location.pathname;
+    }
+    /**
+     * Get the window origin
+     * @returns The origin (protocol + hostname + port)
+     */
+    getOrigin() {
+        return window.location.origin;
+    }
+    // ######################## Navigation Methods ########################
+    /**
+     * 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);
+    }
+    /**
+     * 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 });
+    }
+    // ######################## Private Helper Methods ########################
+    getEncodedQueryParams() {
+        const queryParams = {};
+        let queryAsString = window.location.search;
+        if (!queryAsString || queryAsString.length === 0)
+            return {};
+        while (queryAsString.startsWith('?') || queryAsString.startsWith('/?')) {
+            if (queryAsString.startsWith('?'))
+                queryAsString = queryAsString.substring(1);
+            else if (queryAsString.startsWith('/?'))
+                queryAsString = queryAsString.substring(2);
+            else
+                break;
+        }
+        const query = queryAsString.split('&');
+        return query.map(param => {
+            const parts = param.split('=');
+            return { key: parts[0], value: parts[1]?.length === 0 ? undefined : parts[1] };
+        }).reduce((toRet, param) => {
+            toRet[param.key] = param.value;
+            return toRet;
+        }, queryParams);
+    }
+    composeQuery(queryParams) {
+        const queryAsString = composeQueryParams(queryParams);
+        if (queryAsString.length === 0)
+            return '';
+        return queryAsString;
+    }
+    encodeUrlParams(queryParams) {
+        const encodedQueryParams = { ...queryParams };
+        _keys(encodedQueryParams).forEach(key => {
+            const value = encodedQueryParams[key];
+            if (!value) {
+                delete encodedQueryParams[key];
+                return;
+            }
+            encodedQueryParams[key] = encodeURIComponent(value);
+        });
+        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}`;
+    }
 }
 export const TS_NavLink = (props) => {
     const { route, children, ignoreClickOnSameRoute, ..._props } = props;
@@ -141,3 +294,42 @@ export const TS_NavLink = (props) => {
         }) }, children);
 };
 export const ModuleFE_RoutingV2 = new ModuleFE_RoutingV2_Class();
+// ######################## Utility Functions ########################
+/**
+ * Encode URL query parameters
+ * @param queryParams - Query parameters to encode
+ * @returns Encoded query parameters
+ */
+export function encodeUrlParams(queryParams) {
+    const encodedQueryParams = { ...queryParams };
+    _keys(encodedQueryParams).forEach(key => {
+        const value = encodedQueryParams[key];
+        if (!value) {
+            delete encodedQueryParams[key];
+            return;
+        }
+        encodedQueryParams[key] = encodeURIComponent(value);
+    });
+    return encodedQueryParams;
+}
+/**
+ * Compose a query string from query parameters
+ * @param queryParams - Query parameters to compose
+ * @returns Query string (without leading ?)
+ */
+export function composeQuery(queryParams) {
+    const queryAsString = composeQueryParams(queryParams);
+    if (queryAsString.length === 0)
+        return '';
+    return queryAsString;
+}
+/**
+ * Compose a full URL with query parameters
+ * @param url - Base URL
+ * @param queryParams - Optional query parameters
+ * @returns Full URL with query string
+ */
+export function composeURL(url, queryParams) {
+    const queryAsString = composeQuery(queryParams);
+    return `${url}${queryAsString.length > 0 ? `?${queryAsString}` : ''}`;
+}

package/modules/routing/index.d.ts

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

package/modules/routing/index.js

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

package/package.json

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