@ngxs-labs/select-snapshot - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

index.d.ts

		@@ -1,1 +0,3 @@
		export * from './public_api';
		export { SelectSnapshot } from './lib/core/decorators/select-snapshot';
		export { ViewSelectSnapshot } from './lib/core/decorators/view-select-snapshot';
		export { NgxsSelectSnapshotModule } from './lib/select-snapshot.module';

lib/core/internals/select-snapshot.d.ts

		import { Store } from '@ngxs/store';
		declare type CreateSelectorFactory = (selectorOrFeature: any) => any;
		type CreateSelectorFactory = (selectorOrFeature: any) => any;
		export declare function createSelectorFactory(paths: string[]): CreateSelectorFactory;
		export declare function getSelectorFromInstance(instance: any, selectorFnName: string, createSelector: CreateSelectorFactory, selectorOrFeature: any): any;
		@@ -4,0 +5,0 @@ export declare function defineSelectSnapshotProperties(selectorOrFeature: any, paths: string[], target: Object, name: string \| symbol, store?: Store): {

package.json

		{
		"$schema": "../node_modules/ng-packagr/package.schema.json",
		"name": "@ngxs-labs/select-snapshot",
		"version": "4.0.0",
		"version": "5.0.0",
		"repository": {
		@@ -21,3 +20,3 @@ "type": "git",
		"peerDependencies": {
		"@angular/core": ">=13.0.0",
		"@angular/core": ">=15.0.0",
		"@ngxs/store": ">=3.7.3",
		@@ -31,3 +30,3 @@ "rxjs": ">=6.5.2"
		"fesm2015": "fesm2015/ngxs-labs-select-snapshot.mjs",
		"typings": "ngxs-labs-select-snapshot.d.ts",
		"typings": "index.d.ts",
		"exports": {
		@@ -38,3 +37,3 @@ "./package.json": {
		".": {
		"types": "./ngxs-labs-select-snapshot.d.ts",
		"types": "./index.d.ts",
		"esm2020": "./esm2020/ngxs-labs-select-snapshot.mjs",
		@@ -41,0 +40,0 @@ "es2020": "./fesm2020/ngxs-labs-select-snapshot.mjs",

README.md

		@@ -15,3 +15,3 @@ <p align="center">

		- [Angular Compatibility](#angular-compatibility)
		- [Compatibility with Angular Versions](#compatibility-with-angular-versions)
		- [Install](#📦-install)
		@@ -24,14 +24,49 @@ - [Usage](#🔨-usage)

		## Angular Compatibility
		## Compatibility with Angular Versions

		`@ngxs-labs/select-snapshot@3+` is compatible only with Angular starting from 10.0.5 version.
		<table>
		<thead>
		<tr>
		<th>@ngxs-labs/select-snapshot</th>
		<th>Angular</th>
		</tr>
		</thead>
		<tbody>
		<tr>
		<td>
		3.x
		</td>
		<td>
		>= 10.0.5 < 13
		</td>
		</tr>
		<tr>
		<td>
		4.x
		</td>
		<td>
		>= 13 < 15
		</td>
		</tr>
		<tr>
		<td>
		5.x
		</td>
		<td>
		>= 15
		</td>
		</tr>
		</tbody>
		</table>

		## 📦 Install

		To install `@ngxs-labs/select-snapshot` run the following command:
		To install `@ngxs-labs/select-snapshot`, run the following command:

		```console
		npm install @ngxs-labs/select-snapshot
		# of if you use yarn
		yarn add @ngxs-labs/select-snapshot
		```sh
		$ npm install @ngxs-labs/select-snapshot
		# Or if you're using yarn
		$ yarn add @ngxs-labs/select-snapshot
		# Or if you're using pnpm
		$ pnpm install @ngxs-labs/select-snapshot
		```
		@@ -56,7 +91,7 @@

		There are 2 decorators exposed publicly. These are `@SelectSnapshot` and `@ViewSelectSnapshot`. They can be used to decorate class properties.
		`@ngxs-labs/select-snapshot` exposes `@SelectSnapshot` and `@ViewSelectSnapshot` decorators, they might be used to decorate class properties.

		### SelectSnapshot

		`@SelectSnapshot` decorator behaves the same as the `@Select` decorator. The only difference is `@SelectSnapshot` decorated property will always return the current state value whereas `@Select` decorated property returns an `Observable`. Let's look at the following example:
		`@SelectSnapshot` decorator should be used similarly to the `@Select` decorator. It will decorate the property to always return the selected value, whereas `@Select` decorates properties to return observable. Given the following example:

		@@ -84,3 +119,3 @@ ```ts

		As you may notice we don't have to inject the `Store` class and invoke the `selectSnapshot` on it.
		We don't have to inject the `Store` and call the `selectSnapshot`.

		@@ -107,3 +142,3 @@ ### ViewSelectSnapshot

		Why? Because if the `progress` state gets updated then Angular has to check that view and update it. This view will not get updated because it's marked as `OnPush`, which means it's constantly in `CheckOnce` state. How to make the above example work?
		The `@ViewSelectSnapshot` decorator will force the template to be updated whenever the `progress` property is changed on the state:

		@@ -126,3 +161,3 @@ ```ts

		How does it work? The `@ViewSelectSnapshot` decorator calls `markForCheck()` under the hood when the `progress` state gets updated.
		The decorator internally subscribes to `store.select` with the provided selector and calls `markForCheck()` whenever the state is updated (and the selector emits).

		@@ -129,0 +164,0 @@ ## Summary

esm2020/public_api.mjs

ngxs-labs-select-snapshot.d.ts

public_api.d.ts

esm2020/index.mjs