feat!: use strict query params

[LayZeeDK]

Features

• Use StrictQueryParams for query parameters instead of StrictRouteParams

Array query parameters like ?size=m&size=l&size=xl are 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:

// 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:

// 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:

// 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:

// 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]))
  );
}