@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/router/HistoryNavigator.ts

@@ -1,7 +1,8 @@
-import { joinPath } from "./path";
-import { PathWithParams } from "./PathWithParams";
+import { PathWithParams } from './PathWithParams';
+import { joinPath } from './path';
 
 const BASE_PATH = Symbol('BASE_PATH');
+
 export { BASE_PATH };
 
 export type LocationChangeEventName = 'beforeChange' | 'afterChange';
@@ -12,8 +13,8 @@ export class LocationChangeEvent {
         public name: LocationChangeEventName,
         public type: LocationChangeType,
         public location: URL,
-        public state?: any) {
-    }
+        public state?: unknown,
+    ) {}
 
     get isPageLoad() {
         return this.type === 'initial';
@@ -41,23 +42,22 @@ export class LocationChangeEvent {
         }
         this._canceled = true;
     }
-
 }
 
 export class BeforeLocationChangeEvent extends LocationChangeEvent {
-    constructor(type: LocationChangeType, location: URL, state?: any) {
+    constructor(type: LocationChangeType, location: URL, state?: unknown) {
         super('beforeChange', type, location, state);
     }
 }
 export class AfterLocationChangeEvent extends LocationChangeEvent {
-    constructor(type: LocationChangeType, location: URL, state?: any) {
+    constructor(type: LocationChangeType, location: URL, state?: unknown) {
         super('afterChange', type, location, state);
     }
 }
 
 export interface NavigateOptions {
     replace?: boolean;
-    state?: any;
+    state?: unknown;
     /**
      * if defined prepend the basePath to the `to` argument
      */
@@ -88,8 +88,6 @@ export class HistoryNavigator {
     _popStateListener?: (ev: PopStateEvent) => void;
     _linkNavListener?: (ev: MouseEvent) => void;
     _listeners: ((event: LocationChangeEvent) => void)[] = [];
-    constructor() {
-    }
 
     addListener(listener: (event: LocationChangeEvent) => void) {
         this._listeners.push(listener);
@@ -116,6 +114,27 @@ export class HistoryNavigator {
         return path;
     }
 
+    /**
+     * Rewrite the current browser URL in place so that the sticky params are present, without
+     * navigating. Used on load / when the params first become known so the address bar reflects
+     * the active account/project before the first navigation.
+     *
+     * Idempotent and side-effect-light: only calls replaceState when the URL would actually
+     * change, preserves the existing history state, and never fires a location-change event
+     * (so there is no route re-match or component remount).
+     */
+    normalizeCurrentUrl() {
+        if (typeof window === 'undefined' || !this.stickyParams) {
+            return;
+        }
+        const current = window.location.pathname + window.location.search + window.location.hash;
+        const normalized = this.addStickyParams(current);
+        if (normalized !== current) {
+            const to = new URL(normalized, window.location.href);
+            window.history.replaceState(window.history.state, '', to.href);
+        }
+    }
+
     navigate(to: string, options: NavigateOptions = {}) {
         if (options.stepsBack && options.stepsBack > 0) {
             this.stepBack(options.stepsBack, options);
@@ -125,7 +144,7 @@ export class HistoryNavigator {
         if (options.basePath) {
             let basePath = options.basePath;
             if (!basePath.startsWith('/')) {
-                basePath = '/' + basePath;
+                basePath = `/${basePath}`;
             }
             to = joinPath(basePath, to);
         }
@@ -135,19 +154,20 @@ export class HistoryNavigator {
 
     stepBack(steps: number, options: NavigateOptions = {}) {
         const historyChain = window.history.state.historyChain || [];
-        const to = historyChain.length >= steps
-            ? new URL(historyChain[historyChain.length - steps].href, window.location.href)
-            : new URL(window.location.origin, window.location.href);
+        const to =
+            historyChain.length >= steps
+                ? new URL(historyChain[historyChain.length - steps].href, window.location.href)
+                : new URL(window.location.origin, window.location.href);
         this._navigate(to, 'popState', options);
 
         const stateToStore = {
             from: window.location.href,
             historyChain: historyChain.slice(0, -steps),
             data: options.state || undefined,
-            title: options.title || document.title
+            title: options.title || document.title,
         };
 
-        window.history['replaceState'](stateToStore, '', to.href);
+        window.history.replaceState(stateToStore, '', to.href);
         this.fireLocationChange(new AfterLocationChangeEvent('popState', to, options.state));
     }
 
@@ -165,11 +185,11 @@ export class HistoryNavigator {
         // Create new history chain entry
         const newChainEntry = {
             title: currentTitle,
-            href: window.location.pathname + window.location.search + window.location.hash
+            href: window.location.pathname + window.location.search + window.location.hash,
         };
 
         // Build the history chain - clear if using replace
-        let historyChain: Array<{ title: string, href: string }> = [];
+        let historyChain: Array<{ title: string; href: string }> = [];
         if (!options.replace && currentState?.historyChain) {
             historyChain = [...currentState.historyChain];
         }
@@ -188,7 +208,7 @@ export class HistoryNavigator {
             from: window.location.href,
             historyChain: historyChain,
             data: options.state || undefined,
-            title: options.title || document.title
+            title: options.title || document.title,
         };
 
         window.history[options.replace ? 'replaceState' : 'pushState'](stateToStore, '', to.href);
@@ -197,13 +217,13 @@ export class HistoryNavigator {
     }
 
     start() {
-        if (typeof window === "undefined") {
+        if (typeof window === 'undefined') {
             return;
         }
         const _popStateListener = (ev: PopStateEvent) => {
             let type: LocationChangeType;
             const to = new URL(window.location.href);
-            let state: any = undefined;
+            let state: unknown;
             if (ev.state) {
                 type = 'popState';
                 state = ev.state.data;
@@ -211,27 +231,30 @@ export class HistoryNavigator {
                 type = 'linkClick';
             }
             this.fireLocationChange(new AfterLocationChangeEvent(type, to, state));
-        }
+        };
         const _linkNavListener = (ev: MouseEvent) => {
             const target = ev.target as HTMLElement;
             // Skip anchors with download attribute or blob: URLs - they are file downloads, not navigation
-            if (target.tagName.toLowerCase() === 'a' && (
-                (target as HTMLAnchorElement).hasAttribute('download') ||
-                (target as HTMLAnchorElement).href?.startsWith('blob:')
-            )) {
+            if (
+                target.tagName.toLowerCase() === 'a' &&
+                ((target as HTMLAnchorElement).hasAttribute('download') ||
+                    (target as HTMLAnchorElement).href?.startsWith('blob:'))
+            ) {
                 return;
             }
-            const url = getElementHrefAsUrl(target)
+            const url = getElementHrefAsUrl(target);
             if (url && url.origin === window.location.origin) {
                 ev.preventDefault();
                 const to = new URL(this.addStickyParams(url.href));
-                const basePath = (ev as any)[BASE_PATH] || (ev.target as any)[BASE_PATH];
+                const basePath =
+                    (ev as MouseEvent & Partial<Record<typeof BASE_PATH, string>>)[BASE_PATH] ||
+                    (ev.target as HTMLElement & Partial<Record<typeof BASE_PATH, string>>)[BASE_PATH];
                 if (basePath) {
                     to.pathname = joinPath(basePath, to.pathname);
                 }
                 this._navigate(to, 'linkClick', {});
             }
-        }
+        };
         this._popStateListener = _popStateListener;
         this._linkNavListener = _linkNavListener;
         window.addEventListener('popstate', _popStateListener);
@@ -239,7 +262,7 @@ export class HistoryNavigator {
     }
 
     stop() {
-        this._popStateListener && window.removeEventListener('popstate', this._popStateListener);
-        this._linkNavListener && document.body.removeEventListener('click', this._linkNavListener);
+        if (this._popStateListener) window.removeEventListener('popstate', this._popStateListener);
+        if (this._linkNavListener) document.body.removeEventListener('click', this._linkNavListener);
     }
-}
+}

package/src/router/Nav.tsx

@@ -1,5 +1,5 @@
-import { SyntheticEvent } from "react";
-import { useNavigate, useRouterContext } from "./Router";
+import type { SyntheticEvent } from 'react';
+import { useNavigate, useRouterContext } from './Router';
 
 /**
  * Wraps a <a href="..."> and perform the navigation to href through the router.
@@ -34,34 +34,60 @@ export function Nav({ children, to, onClick, replace = true }: NavProps) {
             navigate(target, { replace });
             onClick?.(ev);
         }
-    }
+    };
     return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: span intercepts clicks on inner <a>; keyboard a11y comes from the anchor (Enter triggers click natively).
+        // biome-ignore lint/a11y/useKeyWithClickEvents: same — the inner <a> provides keyboard activation natively.
         <span onClick={_onClick}>{children}</span>
-    )
+    );
 }
 
 /**
- * A anchor tag that performs navigation through the router.
+ * An anchor that navigates via the router. Internal paths are intercepted and carry the active
+ * tenant sticky params (a/p); external URLs and `_blank` targets fall through to the browser.
  */
 interface NavLinkProps {
     children: React.ReactNode | React.ReactNode[];
     href: string;
     className?: string;
+    target?: string;
     /**
      * use the root router to navigate
      */
     topLevelNav?: boolean;
     clearBreadcrumbs?: boolean;
+    replace?: boolean; //If true, replace the current history entry instead of pushing (defaults to clearBreadcrumbs)
+    skipStickyParams?: boolean; //If true, do not append the account (a) & project (p) sticky params to the href
 }
-export function NavLink({ children, href, className, topLevelNav, clearBreadcrumbs = false }: NavLinkProps) {
+export function NavLink({
+    children,
+    href,
+    className,
+    target,
+    topLevelNav,
+    clearBreadcrumbs = false,
+    replace,
+    skipStickyParams,
+}: NavLinkProps) {
     const { router } = useRouterContext();
+    // In-app route = not an external URL, `_blank` target, or bare hash. Relative paths count too —
+    // they must be routed, else the global link listener re-applies the module base path (wrong URL).
+    const isAnchorOrEmpty = !href || href.startsWith('#');
+    const isExternal = /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//') || (!!target && target !== '_self');
+    const isInternal = !isAnchorOrEmpty && !isExternal;
+    const resolvedHref = !skipStickyParams && isInternal ? router.getTopRouter().navigator.addStickyParams(href) : href;
     const _onClick = (ev: SyntheticEvent) => {
+        if (ev.defaultPrevented || !isInternal) {
+            return;
+        }
         ev.stopPropagation();
         ev.preventDefault();
         const actualRouter = topLevelNav ? router.getTopRouter() : router;
-        actualRouter.navigate(href, { replace: clearBreadcrumbs  });
-    }
+        actualRouter.navigate(href, { replace: replace ?? clearBreadcrumbs });
+    };
     return (
-        <a href={href} className={className} onClick={_onClick}>{children}</a>
-    )
+        <a href={resolvedHref} className={className} target={target} onClick={_onClick}>
+            {children}
+        </a>
+    );
 }

package/src/router/NestedNavigationContext.tsx

@@ -1,10 +1,9 @@
-import React from "react";
-import { FixLinks } from "./FixLinks";
-import { NavigateOptions } from "./HistoryNavigator";
-import { RouteComponent } from "./RouteComponent";
-import { ReactRouterContext, useRouterContext } from "./Router";
-import { joinPath } from "./path";
-
+import type React from 'react';
+import { FixLinks } from './FixLinks';
+import type { NavigateOptions } from './HistoryNavigator';
+import { joinPath } from './path';
+import { RouteComponent } from './RouteComponent';
+import { ReactRouterContext, useRouterContext } from './Router';
 
 interface NestedNavigationContextProps {
     basePath: string;
@@ -14,23 +13,25 @@ interface NestedNavigationContextProps {
 export function NestedNavigationContext({ basePath, fixLinks = false, children }: NestedNavigationContextProps) {
     const ctx = useRouterContext();
 
-    const wrapWithFixLinks = fixLinks ?
-        (elem: any) => <FixLinks basePath={ctx.matchedRoutePath}>{elem}</FixLinks>
-        : (elem: any) => elem;
+    const wrapWithFixLinks = fixLinks
+        ? (elem: React.ReactNode) => <FixLinks basePath={ctx.matchedRoutePath}>{elem}</FixLinks>
+        : (elem: React.ReactNode) => elem;
 
     return (
-        <ReactRouterContext.Provider value={{
-            ...ctx,
-            navigate: (to: string, options?: NavigateOptions) => {
-                if (options?.isBasePathNested === false) {
-                    // Navigate to an absolute path without adding this context's basePath
-                    return ctx.navigate(to, options);
-                }
-                const actualBasePath = options?.basePath ? joinPath(basePath, options.basePath) : basePath;
-                return ctx.navigate(to, { ...options, basePath: actualBasePath });
-            }
-        }}>
+        <ReactRouterContext.Provider
+            value={{
+                ...ctx,
+                navigate: (to: string, options?: NavigateOptions) => {
+                    if (options?.isBasePathNested === false) {
+                        // Navigate to an absolute path without adding this context's basePath
+                        return ctx.navigate(to, options);
+                    }
+                    const actualBasePath = options?.basePath ? joinPath(basePath, options.basePath) : basePath;
+                    return ctx.navigate(to, { ...options, basePath: actualBasePath });
+                },
+            }}
+        >
             {wrapWithFixLinks(children ? children : <RouteComponent />)}
         </ReactRouterContext.Provider>
-    )
+    );
 }

package/src/router/NestedRouterProvider.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { FixLinks } from "./FixLinks";
-import { PathMatch } from "./PathMatcher";
-import { createRoute404 } from "./Route404";
-import { RouteComponent } from "./RouteComponent";
-import { NestedRouter, ReactRouterContext, Route, useRouterContext } from "./Router";
-import { NavigateOptions } from "./HistoryNavigator";
-
+import type React from 'react';
+import { useMemo, useRef } from 'react';
+import { FixLinks } from './FixLinks';
+import type { NavigateOptions } from './HistoryNavigator';
+import { createRoute404 } from './Route404';
+import { RouteComponent } from './RouteComponent';
+import { NestedRouter, ReactRouterContext, type Route, useRouterContext } from './Router';
 
 interface RouterProviderProps {
-    routes: Route[],
+    routes: Route[];
     /**
      * The path to use for the root resource. Defaults to '/'. Cannot contains path variables or wildcards
      */
@@ -18,49 +17,56 @@ interface RouterProviderProps {
 }
 export function NestedRouterProvider({ routes, index, children, fixLinks = false }: RouterProviderProps) {
     const ctx = useRouterContext();
-    const [nestedRouteMatch, setNestedRouteMatch] = useState<PathMatch<Route> | undefined>(undefined);
+    // Capture basePath once at mount. When the parent router switches to a different
+    // top-level route (e.g. /store -> /studio), the lazy loader briefly keeps rendering
+    // this (now-stale) module with a new ctx. Keeping basePath stable lets the
+    // ctx.matchedRoutePath !== nestedRouter.basePath check below detect the mismatch and
+    // skip rendering instead of running match() against the wrong route table.
+    const basePathRef = useRef(ctx.matchedRoutePath);
     const nestedRouter = useMemo(() => {
         if (typeof window === 'undefined') return null;
-        const basePath = ctx.matchedRoutePath;
-        const nestedRouter = new NestedRouter(ctx.router, basePath, routes);
+        const nestedRouter = new NestedRouter(ctx.router, basePathRef.current, routes);
         nestedRouter.index = index;
         return nestedRouter;
-    }, []);
-
+    }, [ctx.router, index, routes]);
 
-    useEffect(() => {
-        if (nestedRouter) {
-            if (ctx.matchedRoutePath !== nestedRouter.basePath) {
-                // the change doesn't belong to this nested router
-                // it should be handled by the top level router which will change the page or the nested router
-                return;
-            }
-            const route = nestedRouter.match(ctx.remainingPath || '/') || createRoute404();
-            setNestedRouteMatch(route);
+    const nestedRouteMatch = useMemo(() => {
+        if (!nestedRouter) {
+            return undefined;
         }
-    }, [nestedRouter, ctx.remainingPath]);
-
-
-    const wrapWithFixLinks = fixLinks ?
-        (elem: any) => <FixLinks basePath={ctx.matchedRoutePath}>{elem}</FixLinks>
-        : (elem: any) => elem;
+        if (ctx.matchedRoutePath !== nestedRouter.basePath) {
+            // The change belongs to another router level and will be handled there.
+            return undefined;
+        }
+        return nestedRouter.match(ctx.remainingPath || '/') || createRoute404();
+    }, [ctx.matchedRoutePath, ctx.remainingPath, nestedRouter]);
 
-    return nestedRouteMatch && (
-        <ReactRouterContext.Provider value={{
-            ...ctx,
-            router: nestedRouter!,
-            route: nestedRouteMatch.value,
-            params: nestedRouteMatch.params,
-            matchedRoutePath: '/' + nestedRouteMatch.matchedSegments.join('/'),
-            remainingPath: nestedRouteMatch.remainingSegments ? '/' + nestedRouteMatch.remainingSegments.join('/') : undefined,
-            navigate: (to: string, options?: NavigateOptions) => {
-                if (nestedRouter) {
-                    return nestedRouter.navigate(to, options);
-                }
-            }
+    const wrapWithFixLinks = fixLinks
+        ? (elem: React.ReactNode) => <FixLinks basePath={ctx.matchedRoutePath}>{elem}</FixLinks>
+        : (elem: React.ReactNode) => elem;
 
-        }}>
-            {wrapWithFixLinks(children ? children : <RouteComponent />)}
-        </ReactRouterContext.Provider>
-    )
+    return (
+        nestedRouteMatch && (
+            <ReactRouterContext.Provider
+                value={{
+                    ...ctx,
+                    // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
+                    router: nestedRouter!,
+                    route: nestedRouteMatch.value,
+                    params: nestedRouteMatch.params,
+                    matchedRoutePath: `/${nestedRouteMatch.matchedSegments.join('/')}`,
+                    remainingPath: nestedRouteMatch.remainingSegments
+                        ? `/${nestedRouteMatch.remainingSegments.join('/')}`
+                        : undefined,
+                    navigate: (to: string, options?: NavigateOptions) => {
+                        if (nestedRouter) {
+                            return nestedRouter.navigate(to, options);
+                        }
+                    },
+                }}
+            >
+                {wrapWithFixLinks(children ? children : <RouteComponent />)}
+            </ReactRouterContext.Provider>
+        )
+    );
 }

package/src/router/PathMatcher.ts

@@ -1,6 +1,6 @@
-import { PathMatchParams, getPathSegments, toSegments } from "./path";
+import { getPathSegments, type PathMatchParams, toSegments } from './path';
 
-export interface PathMatch<T = any> {
+export interface PathMatch<T = unknown> {
     params: PathMatchParams;
     matchedSegments: string[];
     remainingSegments?: string[];
@@ -11,9 +11,8 @@ export interface PathMatch<T = any> {
  * Path matcher which support :param and *wildcard segments.
  * The wildcard segment is only supported as the last segment
  */
-export class PathMatcher<T = any> {
-
-    tree: RootSegmentNode = new RootSegmentNode();
+export class PathMatcher<T = unknown> {
+    tree: RootSegmentNode<T> = new RootSegmentNode<T>();
 
     loadMapping(mapping: Record<string, T>) {
         for (const [key, value] of Object.entries(mapping)) {
@@ -30,32 +29,40 @@ export class PathMatcher<T = any> {
             if (segment[0] === ':') {
                 let childNode = node.wildcard;
                 if (!childNode) {
-                    childNode = new VariableSegmentNode(segment);
+                    childNode = new VariableSegmentNode<T>(segment);
                     node.wildcard = childNode;
                 } else if (!(childNode instanceof VariableSegmentNode)) {
-                    throw new Error(`Failed to index path segments: ${segments.join('/')}. A wildcard ":" segment will overwrite an existing wildcard segment at path: ${'/' + segments.slice(0, i).join("/")}`);
+                    throw new Error(
+                        `Failed to index path segments: ${segments.join('/')}. A wildcard ":" segment will overwrite an existing wildcard segment at path: ${`/${segments.slice(0, i).join('/')}`}`,
+                    );
                 }
-                node = childNode as VariableSegmentNode;
+                node = childNode as VariableSegmentNode<T>;
             } else if (segment === '*') {
                 if (node.wildcard) {
-                    throw new Error(`Failed to index path segments: ${segments.join('/')}. A wildcard "*" segment already exists at path: ${'/' + segments.slice(0, i).join("/")}`);
+                    throw new Error(
+                        `Failed to index path segments: ${segments.join('/')}. A wildcard "*" segment already exists at path: ${`/${segments.slice(0, i).join('/')}`}`,
+                    );
                 }
                 node.wildcard = new WildcardSegmentNode(segment, value);
                 if (i < l - 1) {
-                    throw new Error(`Failed to index path segments: ${segments.join('/')}. A wildcard segment must be the last segment`);
+                    throw new Error(
+                        `Failed to index path segments: ${segments.join('/')}. A wildcard segment must be the last segment`,
+                    );
                 }
                 return;
             } else {
                 let childNode = node.children[segment];
                 if (!childNode) {
-                    childNode = new LiteralSegmentNode(segment);
+                    childNode = new LiteralSegmentNode<T>(segment);
                     node.children[segment] = childNode;
                 } // else // a literal segment already exists
-                node = childNode as LiteralSegmentNode;
+                node = childNode as LiteralSegmentNode<T>;
             }
         }
         if (node.value !== undefined) {
-            throw new Error(`Failed to index path segments: ${segments.join('/')}. A value already exists at path: ${'/' + segments.join("/")}`);
+            throw new Error(
+                `Failed to index path segments: ${segments.join('/')}. A value already exists at path: ${`/${segments.join('/')}`}`,
+            );
         }
         node.value = value;
     }
@@ -76,12 +83,13 @@ export class PathMatcher<T = any> {
             }
         }
 
-        if (!node.value) { // not a leaf node (partial match)
+        if (!node.value) {
+            // not a leaf node (partial match)
             if (node instanceof ParentSegmentNode) {
                 if (node.wildcard instanceof WildcardSegmentNode) {
                     node = node.wildcard.match('', params);
                     if (!node.value) {
-                        throw new Error("Wildcard segment node `*` must have a value");
+                        throw new Error('Wildcard segment node `*` must have a value');
                     }
                 }
             }
@@ -96,23 +104,24 @@ export class PathMatcher<T = any> {
         }
         return { params, matchedSegments, remainingSegments, value: node.value };
     }
-
 }
 
-interface SegmentNode<T = any> {
+interface SegmentNode<T = unknown> {
     name: string;
     value?: T | undefined;
     match(segment: string, params: PathMatchParams): SegmentNode<T> | null;
 }
-class ParentSegmentNode<T = any> implements SegmentNode<T> {
+class ParentSegmentNode<T = unknown> implements SegmentNode<T> {
     children: Record<string, SegmentNode<T>> = {};
     wildcard?: SegmentNode<T>;
 
-    constructor(public name: string, public value?: T | undefined) {
-    }
+    constructor(
+        public name: string,
+        public value?: T | undefined,
+    ) {}
 
     match(segment: string, params: PathMatchParams): SegmentNode<T> | null {
-        let node = this.children[segment];
+        const node = this.children[segment];
         if (node) {
             return node;
         } else if (this.wildcard) {
@@ -122,44 +131,41 @@ class ParentSegmentNode<T = any> implements SegmentNode<T> {
                 params[this.wildcard.paramName] = segment;
                 return this.wildcard;
             } else {
-                throw new Error("Unknown wildcard segment node type: " + this.wildcard.constructor.name);
+                throw new Error(`Unknown wildcard segment node type: ${this.wildcard.constructor.name}`);
             }
         } else {
             return null;
         }
     }
-
 }
 
-class RootSegmentNode<T = any> extends ParentSegmentNode<T> {
+class RootSegmentNode<T = unknown> extends ParentSegmentNode<T> {
     constructor() {
-        super("#root");
+        super('#root');
     }
 }
 
-class LiteralSegmentNode<T = any> extends ParentSegmentNode<T> {
-    constructor(name: string, value?: T | undefined) {
-        super(name, value);
-    }
-}
+class LiteralSegmentNode<T = unknown> extends ParentSegmentNode<T> {}
 
-class VariableSegmentNode<T = any> extends ParentSegmentNode<T> {
+class VariableSegmentNode<T = unknown> extends ParentSegmentNode<T> {
     paramName: string;
     constructor(name: string, value?: T | undefined) {
-        super(name, value)
+        super(name, value);
         this.paramName = name.substring(1);
     }
 }
 
-class WildcardSegmentNode<T = any> implements SegmentNode<T> {
-    constructor(public name: string, public value?: T | undefined) {
-    }
+class WildcardSegmentNode<T = unknown> implements SegmentNode<T> {
+    constructor(
+        public name: string,
+        public value?: T | undefined,
+    ) {}
 
     match(segment: string, params: PathMatchParams) {
         if (!params._) {
             params._ = segment ? [segment] : [];
         } else {
-            segment && params._.push(segment);
+            if (segment) params._.push(segment);
         }
         return this;
     }

package/src/router/PathWithParams.ts

@@ -1,5 +1,4 @@
 export class PathWithParams {
-
     path: string;
     params: URLSearchParams;
     hash: string;
@@ -29,6 +28,6 @@ export class PathWithParams {
         return this;
     }
     toString() {
-        return this.path + '?' + this.params.toString() + this.hash;
+        return `${this.path}?${this.params.toString()}${this.hash}`;
     }
 }