Merge pull request #21 from daiscog/typing-improvements

Adjust typing for improved type guard ergonomics.

apps/examples/project.json

@@ -13,7 +13,7 @@
         "outputPath": "dist/apps/examples",
         "index": "apps/examples/src/index.html",
         "main": "apps/examples/src/main.ts",
-        "polyfills": ["zone.js"],
+        "polyfills": [],
         "tsConfig": "apps/examples/tsconfig.app.json",
         "assets": ["apps/examples/src/favicon.ico", "apps/examples/src/assets"],
         "styles": ["apps/examples/src/styles.css"],

apps/examples/src/app/app.config.ts

@@ -1,4 +1,7 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
 import {
   provideRouter,
   withEnabledBlockingInitialNavigation,
@@ -10,5 +13,6 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
     provideHttpClient(),
+    provideExperimentalZonelessChangeDetection(),
   ],
 };

libs/ngx-http-request-state/package.json

@@ -9,7 +9,7 @@
     "loading",
     "error"
   ],
-  "version": "3.3.0",
+  "version": "3.4.0",
   "peerDependencies": {
     "rxjs": "^6.2.0 || ^7.4.0",
     "@angular/common": "^14.2.10 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"

libs/ngx-http-request-state/src/lib/model.ts

@@ -1,28 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
 
-/**
- * Representation of the state of a data-loading operation.
- *
- * The various fields are readonly as this is meant to be used to represent an
- * immutable snapshot of the current state in a stream of state change events.
- */
-export interface HttpRequestState<T> {
-  /**
-   * Whether a request is currently in-flight.  true for a "loading" state,
-   * false otherwise.
-   */
-  readonly isLoading: boolean;
-  /**
-   * The response data for a "loaded" state, or optionally the last-known data
-   * (if any) for a "loading" or "error" state.
-   */
-  readonly value?: T;
-  /**
-   * The response error (if any) for an "error" state.
-   */
-  readonly error?: HttpErrorResponse | Error;
-}
-
 /**
  * Represents an in-flight HTTP request to load some data.
  *
@@ -32,7 +9,7 @@ export interface HttpRequestState<T> {
  * UI).
  *
  */
-export interface LoadingState<T> extends HttpRequestState<T> {
+export interface LoadingState<T> {
   readonly isLoading: true;
   readonly value?: T;
   readonly error: undefined;
@@ -56,7 +33,7 @@ export interface LoadingStateWithValue<T> extends LoadingState<T> {
  * A <code>value</code> may be omitted if there is no data to display and such
  * a scenario is not considered an error condition.
  */
-export interface LoadedState<T> extends HttpRequestState<T> {
+export interface LoadedState<T> {
   readonly isLoading: false;
   readonly value: T;
   readonly error: undefined;
@@ -68,7 +45,7 @@ export interface LoadedState<T> extends HttpRequestState<T> {
  *
  * A <code>value</code> may be set to represent a last-known value, or similar.
  */
-export interface ErrorState<T> extends HttpRequestState<T> {
+export interface ErrorState<T> {
   readonly isLoading: false;
   readonly value?: T;
   readonly error: HttpErrorResponse | Error;
@@ -85,3 +62,14 @@ export interface ErrorState<T> extends HttpRequestState<T> {
 export interface ErrorStateWithValue<T> extends ErrorState<T> {
   readonly value: T;
 }
+
+/**
+ * Representation of the state of a data-loading operation.
+ *
+ * The various fields are readonly as this is meant to be used to represent an
+ * immutable snapshot of the current state in a stream of state change events.
+ */
+export type HttpRequestState<T> =
+  | LoadingState<T>
+  | LoadedState<T>
+  | ErrorState<T>;

libs/ngx-http-request-state/src/lib/type-guards.ts

@@ -1,24 +1,19 @@
-import {
-  ErrorState,
-  HttpRequestState,
-  LoadedState,
-  LoadingState,
-} from './model';
+import { ErrorState, LoadedState, LoadingState } from './model';
 
 export function isLoadingState<T>(
-  state?: HttpRequestState<T>
+  state?: LoadingState<T> | ErrorState<unknown> | LoadedState<unknown>
 ): state is LoadingState<T> {
   return !!state && state.isLoading;
 }
 
 export function isLoadedState<T>(
-  state?: HttpRequestState<T>
+  state?: LoadedState<T> | LoadingState<unknown> | ErrorState<unknown>
 ): state is LoadedState<T> {
   return !!state && !state.isLoading && !state.error;
 }
 
 export function isErrorState<T>(
-  state?: HttpRequestState<T>
+  state?: ErrorState<T> | LoadedState<unknown> | LoadingState<unknown>
 ): state is ErrorState<T> {
   return !!state && !state.isLoading && !!state.error;
 }