@dooboostore/simple-web-component 1.0.13 → 1.0.14

package/src/elements/apps/SwcAppTime.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-time', extends: 'time' })
 export class SwcAppTime extends SwcHTMLTimeElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppTime extends SwcHTMLTimeElementBase implements SwcAppInterfac
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppTime extends SwcHTMLTimeElementBase implements SwcAppInterfac
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppTime extends SwcHTMLTimeElementBase implements SwcAppInterfac
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppTime extends SwcHTMLTimeElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppTitle.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-title', extends: 'title' })
 export class SwcAppTitle extends SwcHTMLTitleElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppTitle extends SwcHTMLTitleElementBase implements SwcAppInterf
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppTitle extends SwcHTMLTitleElementBase implements SwcAppInterf
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppTitle extends SwcHTMLTitleElementBase implements SwcAppInterf
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppTitle extends SwcHTMLTitleElementBase implements SwcAppInterf
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppTrack.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-track', extends: 'track' })
 export class SwcAppTrack extends SwcHTMLTrackElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppTrack extends SwcHTMLTrackElementBase implements SwcAppInterf
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppTrack extends SwcHTMLTrackElementBase implements SwcAppInterf
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppTrack extends SwcHTMLTrackElementBase implements SwcAppInterf
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppTrack extends SwcHTMLTrackElementBase implements SwcAppInterf
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppUl.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-ul', extends: 'ul' })
 export class SwcAppUl extends SwcHTMLUListElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppUl extends SwcHTMLUListElementBase implements SwcAppInterface
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppUl extends SwcHTMLUListElementBase implements SwcAppInterface
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppUl extends SwcHTMLUListElementBase implements SwcAppInterface
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppUl extends SwcHTMLUListElementBase implements SwcAppInterface
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppVideo.ts

@@ -4,6 +4,7 @@ import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-video', extends: 'video' })
 export class SwcAppVideo extends SwcHTMLVideoElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppVideo extends SwcHTMLVideoElementBase implements SwcAppInterf
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -52,8 +60,8 @@ export class SwcAppVideo extends SwcHTMLVideoElementBase implements SwcAppInterf
 
           // Use 'any' key for Map to allow Abstract classes like Router
           const otherInstanceSim = new Map<any, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -65,7 +73,7 @@ export class SwcAppVideo extends SwcHTMLVideoElementBase implements SwcAppInterf
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -79,7 +87,7 @@ export class SwcAppVideo extends SwcHTMLVideoElementBase implements SwcAppInterf
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/router/ElementRouter.ts

@@ -0,0 +1,187 @@
+import { ChangeStateConfig, ChangeStateResult, RouteAction, Router, RouterConfig, RouterMethodOptions } from '@dooboostore/core-web/routers/Router';
+import { UrlUtils } from '@dooboostore/core/url/UrlUtils';
+
+export class ElementRouter extends Router {
+  private _history: { url: string; data: any; title?: string }[] = [];
+  private _currentIndex = -1;
+
+  constructor(config: RouterConfig) {
+    // Router 부모 클래스가 생성자에서 go()를 호출하여 초기화되지 않은 필드에 접근하는 것을 방지하기 위해
+    // firstUrl을 제거하고 넘긴 뒤 자식에서 수동 처리합니다.
+    const { firstUrl, ...rest } = config;
+    super(rest);
+
+    const startUrl = firstUrl ?? '/';
+    this._history = [{ url: startUrl, data: null }];
+    this._currentIndex = 0;
+
+    if (firstUrl) {
+      this.replace(firstUrl, { config: { noEventAndPublish: true } });
+    }
+  }
+
+  // Override pushState to manage internal history
+  pushState(data: any, title: string | undefined, path: string, config?: ChangeStateConfig): ChangeStateResult {
+    const behaviorSubject = (this as any).behaviorSubject;
+    if (!config?.noEventAndPublish && behaviorSubject) {
+      behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: 'start' });
+    }
+
+    // Ensure _history is initialized (defense for super calls)
+    if (!this._history) this._history = [];
+
+    this._history = this._history.slice(0, this._currentIndex + 1);
+    this._history.push({ url: path, data, title });
+    this._currentIndex++;
+
+    if (!config?.noEventAndPublish && behaviorSubject) {
+      behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: 'end' });
+    }
+    return { data };
+  }
+
+  // Override replaceState to manage internal history
+  replaceState(data: any, title: string | undefined, path: string, config?: ChangeStateConfig): ChangeStateResult {
+    const behaviorSubject = (this as any).behaviorSubject;
+    if (!config?.noEventAndPublish && behaviorSubject) {
+      behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: 'start' });
+    }
+
+    if (!this._history) this._history = [];
+    if (this._currentIndex === -1) {
+      this._history.push({ url: path, data, title });
+      this._currentIndex = 0;
+    } else {
+      this._history[this._currentIndex] = { url: path, data, title };
+    }
+
+    if (!config?.noEventAndPublish && behaviorSubject) {
+      behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: path }), triggerPoint: 'end' });
+    }
+    return { data };
+  }
+
+  push(path: RouteAction, state?: RouterMethodOptions): void {
+    this.pushState(state?.data, state?.title, this.toUrl(path), state?.config);
+  }
+
+  replace(path: RouteAction, state?: RouterMethodOptions): void {
+    this.replaceState(state?.data, state?.title, this.toUrl(path), state?.config);
+  }
+
+  back(config?: ChangeStateConfig): void {
+    if (this._currentIndex > 0) {
+      this.go(-1, config);
+    }
+  }
+
+  forward(config?: ChangeStateConfig): void {
+    if (this._currentIndex < this._history.length - 1) {
+      this.go(1, config);
+    }
+  }
+
+  go(i: number, config?: ChangeStateConfig): void;
+  async go(config: string | { path: RouteAction; state?: RouterMethodOptions; replace?: boolean; scrollToTop?: boolean }): Promise<void>;
+  go(config: number | string | { path: RouteAction; state?: RouterMethodOptions; replace?: boolean; scrollToTop?: boolean }, changeStateConfig?: ChangeStateConfig): Promise<void> | void {
+    if (typeof config === 'number') {
+      const targetIndex = this._currentIndex + config;
+      if (this._history && targetIndex >= 0 && targetIndex < this._history.length) {
+        const behaviorSubject = (this as any).behaviorSubject;
+        if (!changeStateConfig?.noEventAndPublish && behaviorSubject) {
+          behaviorSubject.next({ ...this.getRouteData(), triggerPoint: 'start' });
+        }
+
+        this._currentIndex = targetIndex;
+        const entry = this._history[this._currentIndex];
+
+        if (!changeStateConfig?.noEventAndPublish && behaviorSubject) {
+          behaviorSubject.next({ ...this.getRouteData({ pathOrUrl: entry.url }), triggerPoint: 'end' });
+        }
+      }
+      return;
+    }
+    return super.go(config as any, changeStateConfig);
+  }
+
+  getData(): any {
+    return this._history?.[this._currentIndex]?.data;
+  }
+
+  getUrl(): string {
+    return this._history?.[this._currentIndex]?.url ?? this.config?.firstUrl ?? '/';
+  }
+
+  getHref(): string {
+    return this.getUrl();
+  }
+
+  getPathName(): string {
+    return this.getUrl().split('?')[0];
+  }
+
+  getSearch(): string {
+    const parts = this.getUrl().split('?');
+    return parts[1] ? `?${parts[1]}` : '';
+  }
+
+  getSearchParams(data?: { delete?: string[]; append?: [[string, string]] }): URLSearchParams {
+    const search = this.getSearch();
+    const searchParams = new URLSearchParams(search);
+    return UrlUtils.manipulateSearchParams(searchParams, data);
+  }
+
+  getHashSearchParams(data?: { delete?: string[]; append?: [[string, string]] }): URLSearchParams {
+    const url = this.getUrl();
+    const hashIdx = url.indexOf('#');
+    const hash = hashIdx !== -1 ? url.slice(hashIdx + 1) : '';
+    const searchParams = new URLSearchParams(hash);
+    return UrlUtils.manipulateSearchParams(searchParams, data);
+  }
+
+  pushAddSearchParam(params: [[string, string]], state: RouterMethodOptions | undefined): void {
+    const s = this.getSearchParams({ append: params });
+    this.push({ searchParams: s }, state);
+  }
+
+  pushDeleteHashSearchParam(name: string | string[], state: RouterMethodOptions | undefined): void {
+    const s = this.getHashSearchParams({ delete: Array.isArray(name) ? name : [name] });
+    const url = this.getUrl().split('#')[0];
+    const size = Array.from(s.entries()).length;
+    this.push(url + (size > 0 ? '#' + s.toString() : ''), state);
+  }
+
+  pushDeleteSearchParam(name: string | string[], state: RouterMethodOptions | undefined): void {
+    const s = this.getSearchParams({ delete: Array.isArray(name) ? name : [name] });
+    this.push({ searchParams: s }, state);
+  }
+
+  pushUpsertSearchParam(params: Record<string, string | string[]>, state: RouterMethodOptions | undefined): void {
+    const s = this.getSearchParams();
+    UrlUtils.upsertSearchParam(s, params);
+    this.push({ searchParams: s }, state);
+  }
+
+  replaceAddSearchParam(params: [[string, string]], state: RouterMethodOptions | undefined): void {
+    const s = this.getSearchParams({ append: params });
+    this.replace({ searchParams: s }, state);
+  }
+
+  replaceDeleteHashSearchParam(name: string | string[], state: RouterMethodOptions | undefined): void {
+    const s = this.getHashSearchParams({ delete: Array.isArray(name) ? name : [name] });
+    const url = this.getUrl().split('#')[0];
+    const size = Array.from(s.entries()).length;
+    this.replace(url + (size > 0 ? '#' + s.toString() : ''), state);
+  }
+
+  replaceDeleteSearchParam(name: string | string[], state: RouterMethodOptions | undefined): void {
+    const s = this.getSearchParams({ delete: Array.isArray(name) ? name : [name] });
+    this.replace({ searchParams: s }, state);
+  }
+
+  replaceUpsertSearchParam(params: Record<string, string | string[]>, state: RouterMethodOptions | undefined): void {
+    const s = this.getSearchParamObject();
+    UrlUtils.upsertSearchParam(s as any, params);
+    this.replace({ searchParams: s as any }, state);
+  }
+}