Start support dynamic sugments

addon/-private/dynamic-segments-from-route-info.ts

@@ -0,0 +1,22 @@
+import RouteInfo from "@ember/routing/-private/route-info";
+
+export function dynamicSegmentsFromRouteInfo(routeInfo?: RouteInfo | null): string[] {
+  const parts: string[] = [];
+
+  if (!routeInfo) {
+    return parts;
+  }
+
+  if (routeInfo && routeInfo.paramNames) {
+    const parentValues = dynamicSegmentsFromRouteInfo(routeInfo.parent);
+    // TODO: fix type
+    const values: any = routeInfo.paramNames.map(k => routeInfo.params[k]);
+
+    parts.push(
+      ...parentValues,
+      ...values,
+    );
+  }
+
+  return parts;
+}

addon/-private/url-from-cache.ts

@@ -0,0 +1,12 @@
+import * as qs from 'qs';
+
+export function urlFromCache(routePath: string, dynamicSegmentValues: string[], cache: QueryParamsByPath) {
+  const { protocol, host, pathname, search, hash } = window.location;
+  const queryParams = cache[routePath];
+  const existing = qs.parse(search.split('?')[1]);
+  const query = qs.stringify({ ...existing, ...queryParams });
+  const newUrl = `${protocol}//${host}${pathname}${hash}?${query}`;
+
+
+  return newUrl;
+}

addon/services/query-params.ts

@@ -4,14 +4,8 @@ import RouterService from '@ember/routing/router-service';
 import { tracked } from '@glimmer/tracking';
 import * as qs from 'qs';
 import Transition from '@ember/routing/-private/transition';
-
-interface QueryParams {
-  [key: string]: number | string | undefined | QueryParams;
-}
-
-interface QueryParamsByPath {
-  [key: string]: QueryParams;
-}
+import { urlFromCache } from 'ember-query-params-service/-private/url-from-cache';
+import { dynamicSegmentsFromRouteInfo } from 'ember-query-params-service/-private/dynamic-segments-from-route-info';
 
 export default class QueryParamsService extends Service {
   @service router!: RouterService;
@@ -64,12 +58,9 @@ export default class QueryParamsService extends Service {
    *
    */
   private updateURL(transition: Transition) {
-    const path = this.router.urlFor(transition.to.name);
-    const { protocol, host, pathname, search, hash } = window.location;
-    const queryParams = this.byPath[path];
-    const existing = qs.parse(search.split('?')[1]);
-    const query = qs.stringify({ ...existing, ...queryParams });
-    const newUrl = `${protocol}//${host}${pathname}${hash}?${query}`;
+    const routeParams = dynamicSegmentsFromRouteInfo(transition.to);
+    const path = this.router.urlFor(transition.to.name, ...routeParams);
+    const newUrl = urlFromCache(path, routeParams, this.byPath);
 
     window.history.replaceState({ path: newUrl }, '', newUrl);
   }

addon/types.ts

@@ -0,0 +1,7 @@
+interface QueryParams {
+  [key: string]: number | string | undefined | QueryParams;
+}
+
+interface QueryParamsByPath {
+  [key: string]: QueryParams;
+}