feat(core): factories for factory selectors for ngrx 12+ #694

Author: satanTime

.gitignore

@@ -3,3 +3,5 @@ dist
 node_modules
 test-reports
 tmp
+
+*.iml

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx commitlint --edit $1

.husky/post-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+git update-index --again

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npm run lint
+npm run test

docs/articles/api/core/to-factory-selector.md

@@ -0,0 +1,34 @@
+---
+title: toFactorySelector
+description: Information about toFactorySelector function and how to create a factory selector function
+sidebar_label: toFactorySelector
+---
+
+`toFactorySelector` helps to create a factory selector function from a root selector.
+In this case, the produced selector can be passed directly to NGRX `store.select`.
+
+This function is useful for NGRX v12 and younger.
+
+```ts
+export class MyComponent {
+  public readonly users$: Observable<User>;
+
+  private readonly selectUser =
+    toFactorySelector(
+      rootUser(
+        relUserCompany(
+          relCompanyAddress(),
+        ),
+      ),
+    );
+
+  constructor(private store: Store) {
+    this.users$ = this.store.select(
+      // let's select current user
+      this.selectUser(
+        selectCurrentUserId,
+      ),
+    );
+  }
+}
+```

docs/articles/api/core/to-static-selector.md

@@ -0,0 +1,33 @@
+---
+title: toStaticSelector
+description: Information about toStaticSelector function and how to bind param to a root selector
+sidebar_label: toStaticSelector
+---
+
+`toStaticSelector` helps to create a selector function from a root selector.
+Its behavior very similar to [`toFactorySelector`](./to-factory-selector.md),
+with the difference that the passed params are static and cannot be changed.
+
+This function is useful for NGRX v12 and younger.
+
+```ts
+export class MyComponent {
+  public readonly users$: Observable<User>;
+
+  private readonly selectCurrentUser =
+    toStaticSelector(
+      rootUser(
+        relUserCompany(
+          relCompanyAddress(),
+        ),
+      ),
+      selectCurrentUserId,
+    );
+
+  constructor(private store: Store) {
+    this.users$ = this.store.select(
+      this.selectCurrentUser,
+    );
+  }
+}
+```

docs/articles/guide/ngrx-data.md

@@ -110,12 +110,16 @@ export class MyComponent {
       userSelectors: UserSelectorService,
   ) {
     this.user$ = store.select(
-      userSelectors.selectUser,
-      '1',
+      toStaticSelector(
+        userSelectors.selectUser,
+        '1',
+      ),
     );
     this.users$ = store.select(
-      userSelectors.selectUsers,
-      ['1', '2'],
+      toStaticSelector(
+        userSelectors.selectUsers,
+        ['1', '2'],
+      ),
     );
   }
 }

docs/articles/guide/quick.md

@@ -55,8 +55,7 @@ the only requirement is the `Dictionary` (a regular object).
 The next step is to define functions which select the state of an entity.
 In this library, they are called [**entity state selectors**](../api/core/entity-state-selector.md).
 
-```ts
-// Redux
+```ts title="Redux"
 export const selectUserState = state => state.users;
 export const selectCompanyState = state => state.companies;
 // `stateKeys` function helps in case of different names of the properties.
@@ -67,8 +66,7 @@ export const selectAddressState = stateKeys(
 );
 ```
 
-```ts
-// NGRX
+```ts title="NGRX"
 export const selectUserState =
   createFeatureSelector<fromUser.State>(
     'users',
@@ -165,8 +163,7 @@ In case of arrays, such as `company.staff`, there is [`childrenEntitiesSelector`
 Now, let's go to a component where we want to select a user with relationships,
 and create a **root selector** via the factories there:
 
-```ts
-// Redux
+```ts title="Redux"
 const selectUser = rootUser(
   relUserCompany(
     relCompanyAddress(),
@@ -182,8 +179,32 @@ const mapStateToProps = state => {
 export default connect(mapStateToProps)(MyComponent);
 ```
 
-```ts
-// NGRX
+```ts title="NGRX 12 and younger"
+export class MyComponent {
+  public readonly users$: Observable<User>;
+
+  private readonly selectUser =
+    rootUser(
+      relUserCompany(
+        relCompanyAddress(),
+      ),
+  );
+
+  constructor(private store: Store) {
+    this.users$ = this.store.select(
+      // toStaticSelector should be used
+      // to create a selector for v12
+      toStaticSelector(
+        this.selectUser,
+        // '1' is the id of user
+        '1',
+      ),
+    );
+  }
+}
+```
+
+```ts title="NGRX 11 and older"
 export class MyComponent {
   public readonly users$: Observable<User>;
 
@@ -205,13 +226,20 @@ export class MyComponent {
 
 Of course, instead of a hardcoded id like `1`, we can pass another **selector, that selects ids** from the state.
 
-```ts
-// Redux
+```ts title="Redux"
 selectUser(state, selectCurrentUserId);
 ```
 
-```ts
-// NGRX
+```ts title="NGRX 12 and younger"
+this.store.select(
+  toStaticSelector(
+    this.selectUser,
+    selectCurrentUserId,
+  ),
+);
+```
+
+```ts title="NGRX 11 and older"
 this.store.select(this.selectUser, selectCurrentUserId);
 ```
 
@@ -234,13 +262,20 @@ const selectUsers = rootEntities(selectUser);
 
 Now we can use `selectUsers` in our components, but instead of an id, it requires an array of them.
 
-```ts
-// Redux
+```ts title="Redux"
 selectUsers(state, ['1', '2']);
 ```
 
-```ts
-// NGRX
+```ts title="NGRX 12 and younger"
+this.store.select(
+  toStaticSelector(
+    this.selectUsers,
+    ['1', '2'],
+  ),
+);
+```
+
+```ts title="NGRX and older"
 this.store.select(this.selectUsers, ['1', '2']);
 ```
 

docs/articles/index.md

@@ -19,9 +19,10 @@ The current version of `ngrx-entity-relationship` has been tested and can be use
 
 - Redux 4, React Redux 7, **try it live on [StackBlitz](https://stackblitz.com/edit/ngrx-entity-relationship-react?file=src/MyComponent.tsx)
   or [CodeSandbox](https://codesandbox.io/s/github/satanTime/ngrx-entity-relationship-react?file=/src/MyComponent.tsx)**
-
-- NGRX 10, **try it live on [StackBlitz](https://stackblitz.com/github/satanTime/ngrx-entity-relationship-angular?file=src/app/app.component.ts)
+- NGRX 12, **try it live on [StackBlitz](https://stackblitz.com/github/satanTime/ngrx-entity-relationship-angular?file=src/app/app.component.ts)
   or [CodeSandbox](https://codesandbox.io/s/github/satanTime/ngrx-entity-relationship-angular?file=/src/app/app.component.ts)**
+- NGRX 11
+- NGRX 10
 - NGRX 9
 - NGRX 8
 - NGRX 7

docs/sidebars.js

@@ -51,6 +51,8 @@ module.exports = {
                         'api/core/childentityselector-function',
                         'api/core/childrenentities-function',
                         'api/core/childrenentitiesselector-function',
+                        'api/core/to-factory-selector',
+                        'api/core/to-static-selector',
                     ],
                 },
                 {