ngx-data-loader - npm Package Compare versions

Comparing version 2.1.1 to 2.1.3

lib/data/data.component.d.ts

 import { OnInit, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class DataComponent implements OnInit {
-    dataTemplate?: TemplateRef<any>;
-    data: any;
+    dataTemplate?: TemplateRef<unknown>;
+    data: unknown;
     loading: boolean;
@@ -7,0 +7,0 @@ showStaleData: boolean;

lib/error/error.component.d.ts

 import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class ErrorComponent implements OnInit {
-    errorTemplate?: TemplateRef<any>;
+    errorTemplate?: TemplateRef<unknown>;
     error?: Error | null;
@@ -6,0 +6,0 @@ reload: EventEmitter<void>;

lib/loading-state-template.pipe.d.ts

@@ -6,3 +6,3 @@ import { PipeTransform } from '@angular/core';
 export declare class LoadingStateTemplatePipe implements PipeTransform {
-    transform(state: LoadingState<any>, showStaleData: boolean): templateName;
+    transform(state: LoadingState<unknown>, showStaleData: boolean): templateName;
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingStateTemplatePipe, never>;
@@ -9,0 +9,0 @@ static ɵpipe: i0.ɵɵPipeDeclaration<LoadingStateTemplatePipe, "loadingStateTemplate", false>;

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

@@ -5,17 +5,62 @@ import { EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class NgxDataLoaderComponent<T = any> implements OnInit, OnChanges {
-    dataTemplate?: TemplateRef<any>;
-    errorTemplate?: TemplateRef<any>;
-    skeletonTemplate?: TemplateRef<any>;
+export declare class NgxDataLoaderComponent<T = unknown> implements OnInit, OnChanges {
+    dataTemplate?: TemplateRef<unknown>;
+    errorTemplate?: TemplateRef<unknown>;
+    skeletonTemplate?: TemplateRef<unknown>;
+    /**
+     * Function that returns an `Observable` of the data to be loaded.
+     * Called on init and on reload.
+     *
+     * @example
+     * getDataFn = () => this.http.get('https://example.com/api/data')
+     */
     getDataFn: () => Observable<T> | Promise<T>;
+    /**
+     * Data to be rendered on init. When set, `getDataFn` will not be invoked on init.
+     * The loading state will be set to `loaded`.
+     */
     initialData?: T;
+    /**
+     * Number of times to retry loading the data.
+     * @defaultValue `0`                                                                    |
+     */
     retries: number;
+    /**
+     * Delay in milliseconds between retries.
+     * @defaultValue `1000`
+     */
     retryDelay: number;
+    /**
+     * Whether to show stale data while reloading.
+     * @defaultValue `false`
+     */
     showStaleData: boolean;
+    /**
+     * Delay in milliseconds before showing the skeleton.
+     * @defaultValue `0`
+     */
     skeletonDelay: number;
+    /**
+     * Number of milliseconds to wait for `getDataFn` to emit before throwing an error.
+     */
     timeout?: number;
+    /**
+     * Emits the data when loaded.
+     */
     dataLoaded: EventEmitter<T>;
+    /**
+     * Emits the error when the data fails to load.
+     */
     error: EventEmitter<Error>;
+    /**
+     * Emits when the data loading completes (either successfully or unsuccessfully).
+     */
     loadAttemptFinished: EventEmitter<void>;
+    /**
+     * Emits when the data loading starts.
+     */
     loadAttemptStarted: EventEmitter<void>;
+    /**
+     * Emits the loading state when it changes.
+     */
     loadingStateChange: EventEmitter<LoadingState<T>>;
@@ -29,5 +74,17 @@ loadingState$: Observable<LoadingState<T>>;
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     *  Resets the loading state and calls `getDataFn`.
+     */
     reload(): void;
+    /**
+     * Cancels `getDataFn`. Loading state will remain unchanged.
+     */
     cancel(): void;
+    /**
+     * Updates the loading state as if the passed data were loaded through `getDataFn`.
+     */
     setData(data: T): void;
+    /**
+     * Updates the loading state as if the passed error were thrown by `getDataFn`.
+     */
     setError(error: Error): void;
@@ -34,0 +91,0 @@ private getLoadingStateChanges;

lib/skeleton/skeleton.component.d.ts

@@ -5,3 +5,3 @@ import { OnInit, TemplateRef } from '@angular/core';
 export declare class SkeletonComponent implements OnInit {
-    skeletonTemplate?: TemplateRef<any>;
+    skeletonTemplate?: TemplateRef<unknown>;
     skeletonDelay: number;
@@ -8,0 +8,0 @@ showSkeleton$: Observable<boolean>;

package.json

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

README.md

 # NgxDataLoader
 
-Lightweight Angular component that loads async data, handles errors and switches templates based on loading state.
+Lightweight Angular 14+ component for easy async data loading.
 
-[![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)
+[![Build status](https://img.shields.io/github/workflow/status/rensjaspers/ngx-data-loader/CI)](https://github.com/rensjaspers/ngx-data-loader/actions/workflows/main.yml)
 [![NPM version](https://img.shields.io/npm/v/ngx-data-loader.svg)](https://www.npmjs.com/package/ngx-data-loader)
@@ -11,15 +11,16 @@ [![NPM downloads](https://img.shields.io/npm/dm/ngx-data-loader.svg)](https://www.npmjs.com/package/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)
+[![Codecov](https://img.shields.io/codecov/c/github/rensjaspers/ngx-data-loader)](https://app.codecov.io/gh/rensjaspers/ngx-data-loader)
 
 ## Description
 
-The `NgxDataLoaderComponent` lets you easily load any kind of async data, without having to worry about error handling, reloading and UI logic.
+The `NgxDataLoaderComponent` lets you load any kind of async data without having to waste time on common stuff like error handling, cancel/reload strategies and template display logic.
 
-You only need to provide a `getDataFn` that returns an `Observable` of the data, and an `ng-template` for each of the loading states.
+You only need to provide a `getDataFn` that returns an `Observable` of the data. You can optionally provide an `ng-template` for each of the loading states.
 
 ## Features
 
-- Bring your own template for each loading state
-- Provides `cancel` and `reload` methods
-- Automatic cancellation of ongoing http requests on reload/destroy[^note]
-- Configure auto retry and timeouts
+- Bring your own template for each loading stated
+- Provides `reload` and `cancel` methods
+- Automatic cancellation of ongoing http requests on cancel/reload/destroy[^note]
+- Configure auto retry and timeout
 - Supports server-side rendering through `initialData` input
@@ -32,3 +33,3 @@ - Supports optimistic updates through `setData` method
 
-## Getting started
+## Installation
 
@@ -56,3 +57,3 @@ Install the package
 
-Use the component
+## Usage
 
@@ -62,3 +63,3 @@ ```html
 <ngx-data-loader [getDataFn]="getTodo">
-  <!-- showing once data has finished loading-->
+  <!-- showing when data has loaded -->
   <ng-template #dataTemplate let-todo>
@@ -69,3 +70,3 @@ Title: {{ todo.title }} <br />
 
-  <!-- showing during initial loading phase -->
+  <!-- showing during loading phase -->
   <ng-template #skeletonTemplate> Loading... </ng-template>
@@ -95,19 +96,19 @@
 
-| Name                                                                          | Description                                            | Local variables                                                                                                                                 |
-| ----------------------------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@ContentChild('dataTemplate')`<br />`dataTemplate?: TemplateRef<any>`        | Template to be displayed when the data is loaded.      | `$implicit: T`: the resolved data.<br />`loading: boolean`: whether the data is reloading (only available if `showStaleData` is set to `true`). |
-| `@ContentChild('skeletonTemplate)`<br />`skeletonTemplate?: TemplateRef<any>` | Template to be displayed when the data is loading.     | _(none)_                                                                                                                                        |
-| `@ContentChild('errorTemplate')`<br />`errorTemplate?: TemplateRef<any>`      | Template to be displayed when the data failed to load. | `$implicit: Error<any>`: the error object.<br />`reloadFn: () => void`: can be called to trigger a retry.                                       |
+| Name                                                                              | Description                                            | Local variables                                                                                                                                 |
+| --------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@ContentChild('dataTemplate')`<br />`dataTemplate?: TemplateRef<unknown>`        | Template to be displayed when the data is loaded.      | `$implicit: T`: the resolved data.<br />`loading: boolean`: whether the data is reloading (only available if `showStaleData` is set to `true`). |
+| `@ContentChild('skeletonTemplate)`<br />`skeletonTemplate?: TemplateRef<unknown>` | Template to be displayed when the data is loading.     | _(none)_                                                                                                                                        |
+| `@ContentChild('errorTemplate')`<br />`errorTemplate?: TemplateRef<unknown>`      | Template to be displayed when the data failed to load. | `$implicit: Error<unknown>`: the error object.<br />`reloadFn: () => void`: can be called to trigger a retry.                                   |
 
 ## Properties
 
-| 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.                                           |
+| 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`                 | 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`                 | 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.                                           |
 
@@ -118,6 +119,6 @@ ## Events
 | -------------------------------------------------------------------- | -------------------------------------------------------------------- |
-| `@Output()`<br />`dataLoaded: EventEmitter<T>`                       | Emitted when the data is loaded.                                     |
-| `@Output()`<br />`loadAttemptStarted: EventEmitter<void>`            | Emitted when the data loading is started.                            |
-| `@Output()`<br />`error: EventEmitter<Error>`                        | Emitted when the data failed to load.                                |
-| `@Output()`<br />`loadAttemptFinished: EventEmitter<void>`           | Emitted when the data has either loaded or failed to load.           |
+| `@Output()`<br />`dataLoaded: EventEmitter<T>`                       | Emits when the data is loaded.                                       |
+| `@Output()`<br />`loadAttemptStarted: EventEmitter<void>`            | Emits when the data loading is started.                              |
+| `@Output()`<br />`error: EventEmitter<Error>`                        | Emits when the data fails to load.                                   |
+| `@Output()`<br />`loadAttemptFinished: EventEmitter<void>`           | Emits when the data has either loaded or failed to load.             |
 | `@Output()`<br />`loadingStateChange: EventEmitter<LoadingState<T>>` | Emits entire loading state when any of the above events are emitted. |
@@ -124,0 +125,0 @@

No alert changes

Improved metrics

Total package byte prevSize

134536

increased by9.15%

Lines of code

1067

increased by21.11%

Number of lines in readme file

144

increased by0.7%

No dependency changes