ngx-data-loader - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

lib/loading-state.interface.d.ts

@@ -5,3 +5,3 @@ export interface LoadingState<T> {
     error: Error | null;
-    data: T | null;
+    data: T | null | undefined;
 }

lib/ngx-data-loader.component.d.ts

@@ -1,2 +0,2 @@
-import { EventEmitter, OnChanges, OnInit, TemplateRef } from '@angular/core';
+import { EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
@@ -10,2 +10,3 @@ import { LoadingState } from './loading-state.interface';
     getDataFn: () => Observable<T> | Promise<T>;
+    initialData?: T;
     retries: number;
@@ -22,8 +23,12 @@ retryDelay: number;
     loadingState$: Observable<LoadingState<T>>;
-    private loadTrigger$;
-    private readonly initialState;
+    private loadSource;
+    private cancelSource;
+    private initialState;
     constructor();
     ngOnInit(): void;
-    ngOnChanges(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     reload(): void;
+    cancel(): void;
+    setData(data: T): void;
+    setError(error: Error): void;
     private getLoadingStateChanges;
@@ -34,5 +39,6 @@ private beforeLoad;
     private onError;
-    private stateHasChanged;
+    private runCustomGetDataFn;
+    private getInitialState;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxDataLoaderComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxDataLoaderComponent<any>, "ngx-data-loader", never, { "getDataFn": "getDataFn"; "retries": "retries"; "retryDelay": "retryDelay"; "showStaleData": "showStaleData"; "skeletonDelay": "skeletonDelay"; "timeout": "timeout"; }, { "dataLoaded": "dataLoaded"; "error": "error"; "loadAttemptFinished": "loadAttemptFinished"; "loadAttemptStarted": "loadAttemptStarted"; "loadingStateChange": "loadingStateChange"; }, ["dataTemplate", "errorTemplate", "skeletonTemplate"], never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxDataLoaderComponent<any>, "ngx-data-loader", never, { "getDataFn": "getDataFn"; "initialData": "initialData"; "retries": "retries"; "retryDelay": "retryDelay"; "showStaleData": "showStaleData"; "skeletonDelay": "skeletonDelay"; "timeout": "timeout"; }, { "dataLoaded": "dataLoaded"; "error": "error"; "loadAttemptFinished": "loadAttemptFinished"; "loadAttemptStarted": "loadAttemptStarted"; "loadingStateChange": "loadingStateChange"; }, ["dataTemplate", "errorTemplate", "skeletonTemplate"], never, false>;
 }

package.json

 {
   "name": "ngx-data-loader",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^14.1.0",

README.md

 # NgxDataLoader
 
-Lightweight Angular 14+ component that loads async data, handles errors and switches templates based on loading state. 
+Lightweight Angular component that loads async data, handles errors and switches templates based on loading state.
 
@@ -10,18 +10,18 @@ [![Build status](https://img.shields.io/github/workflow/status/rensjaspers/ngx-data-loader/Tests)](https://github.com/rensjaspers/ngx-data-loader/actions/workflows/main.yml)
 [![Minzipped size](https://img.shields.io/bundlephobia/minzip/ngx-data-loader)](https://bundlephobia.com/result?p=ngx-data-loader)
+[![CodeFactor](https://img.shields.io/codefactor/grade/github/rensjaspers/ngx-data-loader)](https://www.codefactor.io/repository/github/rensjaspers/ngx-data-loader)
 
 ## Description
 
-Most async data loading is done the same way: show a loading indicator while the data is being retrieved, then show the data when it's loaded, or show an error message or a retry button if the data failed to load.
+The `NgxDataLoaderComponent` lets you easily load any kind of async data, without having to worry about error handling, reloading and UI logic.
 
-While this seems simple, getting the logic right can be challenging, especially when error handling or data reloading is involved.
+You only need to provide a `getDataFn` that returns an `Observable` of the data, and an `ng-template` for each of the loading states.
 
-The `NgxDataLoaderComponent` makes it easy. You only need to provide a `getDataFn` that returns a `Promise` or `Observable` of the data, and the `data`, `skeleton` and `error` templates. The component will handle all of the logic for you.
-
 ## Features
 
 - Bring your own template for each loading state
-- Automatic template switching
-- Configurable auto retry
-- Easy manual retry/reload
-- Automatic cancellation of ongoing http requests on reload/destroy
+- Provides `cancel` and `reload` methods
+- Automatic cancellation of ongoing http requests on reload/destroy[^note]
+- Configure auto retry and timeouts
+- Supports server-side rendering through `initialData` input
+- Supports optimistic updates through `setData` method
 
@@ -99,10 +99,11 @@ ## Demo
 
-| Name                                                           | Description                                                                                               |
-| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `@Input()`<br />`getDataFn: () => Observable<T> \| Promise<T>` | Function that returns a `Promise` or `Observable` of the data to be loaded. Called on init and on reload. |
-| `@Input()`<br />`retries: number`                              | Number of times to retry loading the data. Default: `0`                                                   |
-| `@Input()`<br />`retryDelay: number`                           | Delay in milliseconds between retries. Default: `1000`                                                    |
-| `@Input()`<br />`showStaleData: boolean`                       | Whether to show stale data while reloading. Default: `false`                                              |
-| `@Input()`<br />`skeletonDelay: number`                        | Delay in milliseconds before showing the skeleton. Default: `0`                                           |
-| `@Input()`<br />`timeout: number`                              | Number of milliseconds to wait for `getDataFn` to emit before throwing an error.                          |
+| Name                                             | Description                                                                                                                          |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `@Input()`<br />`getDataFn: () => Observable<T>` | Function that returns an `Observable` of the data to be loaded. Called on init and on reload.                                        |
+| `@Input()`<br />`initialData: T`                 | Optional. Data to be rendered on init. When set, `getDataFn` will not be invoked on init. The loading state will be set to `loaded`. |
+| `@Input()`<br />`retries: number`                | Optional. Number of times to retry loading the data. Default: `0`                                                                    |
+| `@Input()`<br />`retryDelay: number`             | Optional. Delay in milliseconds between retries. Default: `1000`                                                                     |
+| `@Input()`<br />`showStaleData: boolean`         | Optional. Whether to show stale data while reloading. Default: `false`                                                               |
+| `@Input()`<br />`skeletonDelay: number`          | Optional. Delay in milliseconds before showing the skeleton. Default: `0`                                                            |
+| `@Input()`<br />`timeout: number`                | Optional. Number of milliseconds to wait for `getDataFn` to emit before throwing an error.                                           |
 
@@ -121,8 +122,24 @@ ## Events
 
-| Name     | Description                                                           |
-| -------- | --------------------------------------------------------------------- |
-| `reload` | Resets the loading state and calls the `getDataFn` that you provided. |
+| Name                               | Description                                                                      |
+| ---------------------------------- | -------------------------------------------------------------------------------- |
+| `reload: () => void`               | Resets the loading state and calls the `getDataFn` that you provided.            |
+| `cancel: () => void`               | Cancels the pending `getDataFn` and aborts any related http requests[^note].     |
+| `setData: (data: T) => void`       | Updates the loading state as if the passed data were loaded through `getDataFn`. |
+| `setError: (error: Error) => void` | Updates the loading state as if the passed error were thrown by `getDataFn`.     |
 
+[^note]: You must use Angular's `HttpClient` for http request cancellation to work.
+
+## Interfaces
+
+```typescript
+interface LoadingState<T> {
+  loading: boolean;
+  loaded: boolean;
+  error?: Error;
+  data?: T;
+}
+```
+
 ## License
 
 The MIT License (MIT). Please see [License File](https://github.com/rensjaspers/ngx-data-loader/blob/main/LICENSE) for more information.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123872

increased by6.25%

Lines of code

884

increased by8.2%

Number of lines in readme file

143

increased by13.49%

No dependency changes