feat!: use strict query params

Array query parameters like `?size=m&size=l&size=xl now correctly resolved to `readonly string[]` instead of `string`.

**BREAKING CHANGES**

`RouterStore#queryParams$` and `MinimalActivatedRouteSnapshot#queryParams` use `StrictQueryParams` instead of `StrictRouteParams`. Members are of type `string | readonly string[] | undefined` instead of `string | undefined`.

The TypeScript compiler will fail to compile code that does not handle the string array type.

BEFORE:

```typescript
// shirts.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@component({
// (...)
})
export class ShirtsComponent {
  #routerStore = inject(RouterStore);

  size$: Observable<string> = this.#routerStore.queryParams$.pipe(
    map((params) => params["size"]),
  );
}
```

AFTER:

```typescript
// shirts.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@component({
// (...)
})
export class ShirtsComponent {
  #routerStore = inject(RouterStore);

  size$: Observable<readonly string[]> = this.#routerStore.queryParams$.pipe(
    map((params) => params["size"]),
    map((size) => (Array.isArray(size) ? size : [size]))
  );
}
```

`RouterStore#selectQueryParam` use `StrictQueryParams` instead of `StrictRouteParams`. The returned value is of type `string | readonly string[] | undefined` instead of `string | undefined`.

The TypeScript compiler will fail to compile code that does not handle the string array type.

BEFORE:

```typescript
// shirts.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@component({
// (...)
})
export class ShirtsComponent {
  #routerStore = inject(RouterStore);

  size$: Observable<string> = this.#routerStore.selectQueryParam('size');
}
```

AFTER:

```typescript
// shirts.component.ts
// (...)
import { RouterStore } from "@ngworker/router-component-store";

@component({
// (...)
})
export class ShirtsComponent {
  #routerStore = inject(RouterStore);

  size$: Observable<readonly string[]> = this.#routerStore.selectQueryParam('size').pipe(
    map((size) => (Array.isArray(size) ? size : [size]))
  );
}
```

Author: LayZeeDK

packages/router-component-store/src/index.ts

@@ -1,13 +1,11 @@
 // GlobalRouterStore
+// Serializable route state
+export * from './lib/@ngrx/router-store/minimal-activated-route-state-snapshot';
 export * from './lib/global-router-store/provide-global-router-store';
-
 // LocalRouterStore
 export * from './lib/local-router-store/provide-local-router-store';
-
 // RouterStore
 export * from './lib/router-store';
-
-// Serializable route state
-export * from './lib/@ngrx/router-store/minimal-activated-route-state-snapshot';
+export * from './lib/strict-query-params';
 export * from './lib/strict-route-data';
 export * from './lib/strict-route-params';

packages/router-component-store/src/lib/@ngrx/router-store/minimal-activated-route-state-snapshot.ts

@@ -30,6 +30,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { ActivatedRouteSnapshot } from '@angular/router';
+import { StrictQueryParams } from '../../strict-query-params';
 import { StrictRouteData } from '../../strict-route-data';
 import { StrictRouteParams } from '../../strict-route-params';
 
@@ -54,7 +55,7 @@ export interface MinimalActivatedRouteSnapshot {
   /**
    * The query parameters shared by all the routes.
    */
-  readonly queryParams: StrictRouteParams;
+  readonly queryParams: StrictQueryParams;
   /**
    * The URL fragment shared by all the routes.
    */

packages/router-component-store/src/lib/global-router-store/global-router-store.ts

@@ -14,6 +14,7 @@ import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal-act
 import { MinimalRouterStateSnapshot } from '../@ngrx/router-store/minimal-router-state-snapshot';
 import { MinimalRouterStateSerializer } from '../@ngrx/router-store/minimal_serializer';
 import { filterRouterEvents } from '../filter-router-event.operator';
+import { InternalStrictQueryParams } from '../internal-strict-query-params';
 import { InternalStrictRouteData } from '../internal-strict-route-data';
 import { InternalStrictRouteParams } from '../internal-strict-route-params';
 import { RouterStore } from '../router-store';
@@ -52,7 +53,7 @@ export class GlobalRouterStore
     this.#rootRoute$,
     (route) => route.fragment
   );
-  queryParams$: Observable<InternalStrictRouteParams> = this.select(
+  queryParams$: Observable<InternalStrictQueryParams> = this.select(
     this.#rootRoute$,
     (route) => route.queryParams
   );
@@ -101,7 +102,9 @@ export class GlobalRouterStore
     })
   );
 
-  selectQueryParam(param: string): Observable<string | undefined> {
+  selectQueryParam(
+    param: string
+  ): Observable<string | readonly string[] | undefined> {
     return this.select(this.queryParams$, (params) => params[param]);
   }
 

packages/router-component-store/src/lib/internal-strict-query-params.ts

@@ -0,0 +1,10 @@
+import { Params } from '@angular/router';
+import { StrictNoAny } from './util-types/strict-no-any';
+
+/**
+ * @remarks We use this type to ensure compatibility with {@link Params}.
+ * @internal
+ */
+export type InternalStrictQueryParams = Readonly<
+  StrictNoAny<Params, string | readonly string[] | undefined>
+>;

packages/router-component-store/src/lib/local-router-store/local-router-store.ts

@@ -17,6 +17,7 @@ import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal-act
 import { MinimalRouterStateSnapshot } from '../@ngrx/router-store/minimal-router-state-snapshot';
 import { MinimalRouterStateSerializer } from '../@ngrx/router-store/minimal_serializer';
 import { filterRouterEvents } from '../filter-router-event.operator';
+import { InternalStrictQueryParams } from '../internal-strict-query-params';
 import { InternalStrictRouteData } from '../internal-strict-route-data';
 import { InternalStrictRouteParams } from '../internal-strict-route-params';
 import { RouterStore } from '../router-store';
@@ -44,7 +45,7 @@ export class LocalRouterStore
 
   currentRoute$: Observable<MinimalActivatedRouteSnapshot> = this.#localRoute;
   fragment$: Observable<string | null>;
-  queryParams$: Observable<InternalStrictRouteParams>;
+  queryParams$: Observable<InternalStrictQueryParams>;
   routeData$: Observable<InternalStrictRouteData>;
   routeParams$: Observable<InternalStrictRouteParams>;
   title$: Observable<string | undefined>;
@@ -87,7 +88,9 @@ export class LocalRouterStore
     })
   );
 
-  selectQueryParam(param: string): Observable<string | undefined> {
+  selectQueryParam(
+    param: string
+  ): Observable<string | readonly string[] | undefined> {
     return this.select(this.queryParams$, (params) => params[param]);
   }
 

packages/router-component-store/src/lib/router-store.ts

@@ -2,6 +2,7 @@ import { Injectable, Type } from '@angular/core';
 import { Event as RouterEvent } from '@angular/router';
 import { Observable } from 'rxjs';
 import { MinimalActivatedRouteSnapshot } from './@ngrx/router-store/minimal-activated-route-state-snapshot';
+import { StrictQueryParams } from './strict-query-params';
 import { StrictRouteData } from './strict-route-data';
 import { StrictRouteParams } from './strict-route-params';
 
@@ -46,7 +47,7 @@ export abstract class RouterStore {
   /**
    * Select the current route query parameters.
    */
-  abstract readonly queryParams$: Observable<StrictRouteParams>;
+  abstract readonly queryParams$: Observable<StrictQueryParams>;
   /**
    * Select the current route data.
    */
@@ -80,7 +81,9 @@ export abstract class RouterStore {
    * @example <caption>Usage</caption>
    * const order$ = routerStore.selectQueryParam('order');
    */
-  abstract selectQueryParam(param: string): Observable<string | undefined>;
+  abstract selectQueryParam(
+    param: string
+  ): Observable<string | readonly string[] | undefined>;
   /**
    * Select the specified route parameter.
    *

packages/router-component-store/src/lib/strict-query-params.ts

@@ -0,0 +1,11 @@
+// [@typescript-eslint/no-unused-vars] Used in TSDoc.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Params } from '@angular/router';
+
+/**
+ * Strict route query {@link Params} with read-only members where the `any` member
+ * type is converted to `string | readonly string[] | undefined`.
+ */
+export interface StrictQueryParams {
+  readonly [param: string]: string | readonly string[] | undefined;
+}