feat!: make parameter selector types stricter (#278)

# Feature
- Remove type parameter from `selectQueryParam`
- Specify strict observable type returned from `selectQueryParam`
- Remove type parameter from `selectRouteParam`
- Specify strict observable type returned from `selectRouteParam`

BREAKING CHANGE:
- Stricter types for `selectQueryParam`

Before:
```typescript
// Actual emitted values are of type `string | undefined` regardless of what we specify
const filter$ = routerStore.selectQueryParam<string | null>('filter');
```

After:
```typescript
// Emitted values are implicitly of type `string | undefined` and are only changeable through operators
const filter$ = routerStore.selectQueryParam('filter').pipe(
  map(filter => filter ?? null),
);
```

- Stricter types for `selectRouteParam`

Before:
```typescript
// Actual emitted values are of type `string | undefined` regardless of what we specify
const id$ = routerStore.selectRouteParam<number>('id');
```

After:
```typescript
// Emitted values are implicitly of type `string | undefined` and are only changeable through operators
const id$ = routerStore.selectRouteParam('id').pipe(
  map(id => id === undefined ? undefined : Number(id),
);
```

README.md

@@ -19,16 +19,16 @@ Published with partial Ivy compilation.
 
 A `RouterStore` service has the following public properties:
 
-| API                                                         | Description                                |
-| ----------------------------------------------------------- | ------------------------------------------ |
-| currentRoute$: Observable<MinimalActivatedRouteSnapshot>    | Select the current route.                  |
-| fragment$: Observable<string \| null>                       | Select the current route fragment.         |
-| queryParams$: Observable<Params>                            | Select the current route query parameters. |
-| routeData$: Observable<Data>                                | Select the current route data.             |
-| routeParams$: Observable<Params>                            | Select the current route parameters.       |
-| url$: Observable<string>                                    | Select the current URL.                    |
-| selectQueryParam<TValue>(param: string): Observable<TValue> | Select the specified query parameter.      |
-| selectRouteParam<TValue>(param: string): Observable<TValue> | Select the specified route parameter.      |
+| API                                                              | Description                                |
+| ---------------------------------------------------------------- | ------------------------------------------ |
+| currentRoute$: Observable<MinimalActivatedRouteSnapshot>         | Select the current route.                  |
+| fragment$: Observable<string \| null>                            | Select the current route fragment.         |
+| queryParams$: Observable<Params>                                 | Select the current route query parameters. |
+| routeData$: Observable<Data>                                     | Select the current route data.             |
+| routeParams$: Observable<Params>                                 | Select the current route parameters.       |
+| url$: Observable<string>                                         | Select the current URL.                    |
+| selectQueryParam(param: string): Observable<string \| undefined> | Select the specified query parameter.      |
+| selectRouteParam(param: string): Observable<string \| undefined> | Select the specified route parameter.      |
 
 A `RouterStore` service is provided by using either `provideGlobalRouterStore` or `provideLocalRouterStore`.
 

packages/router-component-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngworker/router-component-store",
-  "version": "0.1.2-alpha.8",
+  "version": "0.2.0-alpha.0",
   "description": "An Angular Router-connecting NgRx component store.",
   "license": "MIT",
   "peerDependencies": {

packages/router-component-store/src/lib/classic-routed-component-test.spec.ts

@@ -88,7 +88,7 @@ async function setup({
   `,
 })
 class ClassicRoutedComponent {
-  id$: Observable<string>;
+  id$: Observable<string | undefined>;
   url$: Observable<string>;
 
   constructor(routerStore: RouterStore) {

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

@@ -77,11 +77,11 @@ export class GlobalRouterStore
     })
   );
 
-  selectQueryParam<TValue>(param: string): Observable<TValue> {
+  selectQueryParam(param: string): Observable<string | undefined> {
     return this.select(this.queryParams$, (params) => params[param]);
   }
 
-  selectRouteParam<TValue>(param: string): Observable<TValue> {
+  selectRouteParam(param: string): Observable<string | undefined> {
     return this.select(this.routeParams$, (params) => params[param]);
   }
 }

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

@@ -73,11 +73,11 @@ export class LocalRouterStore
     })
   );
 
-  selectQueryParam<TValue>(param: string): Observable<TValue> {
+  selectQueryParam(param: string): Observable<string | undefined> {
     return this.select(this.queryParams$, (params) => params[param]);
   }
 
-  selectRouteParam<TValue>(param: string): Observable<TValue> {
+  selectRouteParam(param: string): Observable<string | undefined> {
     return this.select(this.routeParams$, (params) => params[param]);
   }
 }

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

@@ -65,7 +65,7 @@ export abstract class RouterStore {
    * @example <caption>Usage</caption>
    * const order$ = routerStore.selectQueryParam('order');
    */
-  abstract selectQueryParam<TValue>(param: string): Observable<TValue>;
+  abstract selectQueryParam(param: string): Observable<string | undefined>;
   /**
    * Select the specified route parameter.
    *
@@ -74,5 +74,5 @@ export abstract class RouterStore {
    * @example <caption>Usage</caption>
    * const id$ = routerStore.selectRouteParam('id');
    */
-  abstract selectRouteParam<TValue>(param: string): Observable<TValue>;
+  abstract selectRouteParam(param: string): Observable<string | undefined>;
 }

packages/router-component-store/src/lib/standalone-routed-component-test.spec.ts

@@ -87,7 +87,7 @@ async function setup({
   `,
 })
 class StandaloneRoutedComponent {
-  id$: Observable<string>;
+  id$: Observable<string | undefined>;
   url$: Observable<string>;
 
   constructor(routerStore: RouterStore) {