From d8f3ae20e57f1de7baff486f77540758ad48597b Mon Sep 17 00:00:00 2001
From: Michael Hladky <michael@hladky.at>
Date: Thu, 3 Feb 2022 21:18:11 +0100
Subject: [PATCH 01/26] feat: reintroduce smosh, add docs to selections

---
 libs/state/selections/docs/Readme.md          |  81 +++++-
 libs/state/selections/spec/smosh.spec.ts      | 255 ++++++++++++++++++
 libs/state/selections/src/index.ts            |   1 +
 .../selections/src/lib/interfaces/index.ts    |  34 +++
 libs/state/selections/src/lib/smosh.ts        |  94 +++++++
 5 files changed, 459 insertions(+), 6 deletions(-)
 create mode 100644 libs/state/selections/spec/smosh.spec.ts
 create mode 100644 libs/state/selections/src/lib/smosh.ts

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 648364e263..147c5f20fe 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -1,10 +1,79 @@
 # Motivation
 
-TBD
+<INTOR IMG>
 
-* [`Interfaces`](./operators/interfaces.md)
-* [`distinctUntilSomeChanged`](./operators/distinct-until-some-changed.md)
-* [`select`](./operators/select.md)
-* [`selectSlice`](./operators/select-slice.md)
-* [`stateful`](./operators/stateful.md)
+When managing state you want to maintain a core unit of data. 
+This data is then later on distributed to multiple places in your component template (local) or whole app (global). 
 
+We can forward this state to thier consumers directly or compute specific derivations (selections) for the core unit.
+
+As an example we could think of the following shape: 
+
+**A list and a list title**
+```typescript
+interface GlobalModel {
+  title: string;
+  list: { id: number, date: Date }
+}
+```
+
+This data is consumed in different screens:
+
+**A list of all items sorted by id**
+```typescript
+interface SeceltionScreen1 {
+  title: string;
+  sortDirection: 'asc' | 'desc' | 'none';
+  list: { id: number }
+}
+```
+
+**A list of items filtered by date**
+```typescript
+interface SeceltionScreen2 {
+  title: string;
+  startingDate: Date;
+  list: { id: number }
+}
+```
+
+The 2 rendered lists are a derivation, a modified version of the core set of items.
+One time they are displayed in a sorted order, the other time only filtered subset of the items.
+
+> **Hint:**  
+> Derivations are always redundant information of our core data and therefore should not get stored,
+> but cached in the derivation logic.
+
+<SELECTIONS IMG>
+
+As this process contains a lot of gotchas and possible pitfalls in terms of memory usage and performance this small helper library was created.
+
+# Benefits
+
+<Solutions IMG>
+
+- Sophisticated set of helpers for any selection problem
+- Enables lazy rendering
+- Computes only distinct values
+- Shares computed result with multiple subscriber
+- Select distinct sub-sets
+- Select from static values
+- Fully Tested
+- Fully Typed
+
+## Selection owner - Template vs Class
+
+As Observables are cold their resulting srteam will only get active too by a subscription.
+This leads to situations called the late or the early subscriber problem. (LINK)
+
+<Subscriber Problem IMG>
+
+In most cases it's best to go with solving problems on the early subscriber side and be sure we never loose values that should render on the screen.
+
+<State LAYER IMG>
+
+## Advanced derivations architecture
+
+<SELECT => CONNECT BAD IMG>
+
+<SELECT GOOD IMG>
diff --git a/libs/state/selections/spec/smosh.spec.ts b/libs/state/selections/spec/smosh.spec.ts
new file mode 100644
index 0000000000..1bdb06f57d
--- /dev/null
+++ b/libs/state/selections/spec/smosh.spec.ts
@@ -0,0 +1,255 @@
+import { TestScheduler } from 'rxjs/testing';
+// tslint:disable-next-line:nx-enforce-module-boundaries
+import { jestMatcher } from '@test-helpers';
+
+import { smosh } from '@rx-angular/state/selections';
+import { coalesceWith } from '@rx-angular/cdk/coalescing';
+import { from, Observable, of } from 'rxjs';
+
+let testScheduler: TestScheduler;
+
+interface ViewModelTest {
+  prop1?: number;
+  prop2?: string;
+  prop3?: boolean;
+}
+
+const _: any = undefined;
+const a = 'a';
+const b = 'b';
+const c = 'c';
+const t = true;
+const f = false;
+const h = 0;
+const i = 1;
+const j = 2;
+
+/**
+ * {
+ *  prop1: h,
+ *  prop2: a,
+ *  prop3: f,
+ * }
+ */
+const u = {
+  prop1: h,
+  prop2: a,
+  prop3: f,
+};
+/**
+ * {
+ *  prop1: i,
+ *  prop2: a,
+ *  prop3: f,
+ * }
+ */
+const v = {
+  prop1: i,
+  prop2: a,
+  prop3: f,
+};
+/**
+ * {
+ *  prop1: i,
+ *  prop2: b,
+ *  prop3: f,
+ * }
+ */
+const w = {
+  prop1: i,
+  prop2: b,
+  prop3: f,
+};
+/**
+ * {
+ *  prop1: i,
+ *  prop2: b,
+ *  prop3: t,
+ * }
+ */
+const x = {
+  prop1: i,
+  prop2: b,
+  prop3: t,
+};
+
+/**
+ * {
+ *  prop1: h,
+ *  prop2: a,
+ *  prop3: t,
+ * }
+ */
+const viewModel1 = {
+  prop1: h,
+  prop2: a,
+  prop3: t,
+};
+
+beforeEach(() => {
+  testScheduler = new TestScheduler(jestMatcher);
+});
+
+// tslint:disable: no-duplicate-string
+describe('createSmoshObservable', () => {
+  it('should return an observable', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: of(1),
+        prop2: of('42'),
+        prop3: of(true)
+      });
+      expect(vm$.subscribe).toBeDefined();
+      expect(vm$.subscribe().unsubscribe).toBeDefined();
+    });
+  });
+
+  it('should return observable that emits when all sources emitted at least once', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-', { h, i }),
+        prop2: cold('--a-b-', { a, b }),
+        prop3: cold('----t-', { t }),
+      }, cold(      's'))
+      const expected = '----x-';
+      expectObservable(vm$).toBe(expected, { x });
+    });
+  });
+
+  it('should emit last for sync values when durationSelector is a Promise', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const durationSelector = from(Promise.resolve(1));
+      const s1 = cold('(abcdef|)');
+      const exp = '(f|)';
+
+      const result = s1.pipe(coalesceWith(durationSelector));
+      expectObservable(result).toBe(exp);
+    });
+  });
+
+  it('should return observable that does not emits when not all sources emitted at least once', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-', { h, i }),
+        prop2: cold('--a-b-', { a, b }),
+        prop3: cold<boolean>('------'),
+      });
+      const expected = '------';
+      expectObservable(vm$).toBe(expected);
+    });
+  });
+
+  it('should return observable that emits only distinct values  --  should distinguish between values', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const values = { u, v, w, x };
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-i-i-i', { h, i }),
+        prop2: cold('a-a-a-b-b-b', { a, b }),
+        prop3: cold('f-f-f-f-t-t', { f, t }),
+      }, cold('s'));
+      const expected = 'u---v-w-x--';
+      expectObservable(vm$).toBe(expected, values);
+    });
+  });
+
+  it('should ignore changes if any key is undefined', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const values = { u, v, w, x };
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-i-i-i-i', { h, i }),
+        prop2: cold('_-a-a-_-b-_-b', { _, a, b }),
+        prop3: cold('f-f-f-f-f-t-t', { f, t }),
+      }, cold('s'));
+      const expected = '--u-v---w-x--';
+      expectObservable(vm$).toBe(expected, values);
+    });
+  });
+
+  it('should return observable that shares the composition', () => {
+    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+      const values = { u, v, w, x };
+      const prop1$ = cold('--h--', { h, i });
+      const prop2$ = cold('--a--', { a, b });
+      const prop3$ = cold('--f--', { f });
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: prop1$,
+        prop2: prop2$,
+        prop3: prop3$,
+      }, cold('s'));
+      const psubs = '^----';
+      const expected = '--u--';
+
+      expectObservable(vm$).toBe(expected, values);
+      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+    });
+  });
+
+  it('should replay the last emitted value', () => {
+    testScheduler.run(({ cold, expectObservable }) => {});
+  });
+
+  it('should return observable that coalesce sync emissions caused by combineLatest (over emitting)', () => {
+    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+      const values = { u, v, w, x };
+      const prop1$ = cold('--h--i-', { h, i });
+      const prop2$ = cold('--a--b-', { a, b });
+      const prop3$ = cold('--f--t-', { f, t });
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: prop1$,
+        prop2: prop2$,
+        prop3: prop3$,
+      }, cold('s'));
+      const psubs =    '^------';
+      const expected = '--u--x-';
+
+      expectObservable(vm$).toBe(expected, values);
+      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+    });
+  });
+
+  it('should return observable that coalesce sync emissions caused by sync emissions (over emitting)', () => {
+    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+      const values = { u, v, w, x };
+      const prop1$ = cold('(hhi)', { h, i });
+      const prop2$ = cold('(abb)', { a, b });
+      const prop3$ = cold('(fft)', { f, t });
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: prop1$,
+        prop2: prop2$,
+        prop3: prop3$,
+      }, cold('s'));
+      const psubs =    '^------';
+      const expected = 'x';
+
+      expectObservable(vm$).toBe(expected, values);
+      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+    });
+  });
+
+  it('should return observable that coalesce by a custom duration (edge-case)', () => {
+    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+      const values = { u, v, w, x };
+      const prop1$ = cold('h--i', { h, i });
+      const prop2$ = cold('a--b', { a, b });
+      const prop3$ = cold('f--t', { f, t });
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: prop1$,
+        prop2: prop2$,
+        prop3: prop3$,
+      },          cold('-----s'));
+      const psubs =    '^-----';
+      const expected = '-----x';
+
+      expectObservable(vm$).toBe(expected, values);
+      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+    });
+  });
+});
diff --git a/libs/state/selections/src/index.ts b/libs/state/selections/src/index.ts
index 6dbb1a5e1a..263f98fd32 100644
--- a/libs/state/selections/src/index.ts
+++ b/libs/state/selections/src/index.ts
@@ -17,3 +17,4 @@ export { safePluck } from './lib/utils/safe-pluck';
 export { KeyCompareMap, CompareFn, PickSlice } from './lib/interfaces/index';
 export { createAccumulationObservable } from './lib/accumulation-observable';
 export { createSideEffectObservable } from './lib/side-effect-observable';
+export { smosh } from './lib/smosh';
diff --git a/libs/state/selections/src/lib/interfaces/index.ts b/libs/state/selections/src/lib/interfaces/index.ts
index d829643f27..d3138a63e8 100644
--- a/libs/state/selections/src/lib/interfaces/index.ts
+++ b/libs/state/selections/src/lib/interfaces/index.ts
@@ -1,3 +1,37 @@
+import { Observable } from 'rxjs';
+
 export { CompareFn } from './compare-fn';
 export { KeyCompareMap } from './key-compare-map';
 export { PickSlice } from './pick-slice';
+
+export type ObservableMap = Record<string, Observable<any>>;
+
+/**
+ * Type to map `ObservableMap` to a static record type
+ * the 'in' syntax forces the type specification by key
+ */
+export type ObservableAccumulation<T extends ObservableMap> = {
+  [K in keyof T]: ExtractObservableValue<T[K]>;
+};
+
+/**
+ * This type avoids empty objects
+ */
+export type NotEmpty<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> &
+  U[keyof U];
+
+export type ExtractObservableValue<T> = T extends Observable<infer R>
+  ? R
+  : never;
+export type PropName<T> = keyof T;
+export type PropType<T> = T[PropName<T>];
+
+/**
+ * Typed reducer function for the `Array#reduce` method.
+ */
+export type ArrayReducerFn<T extends Record<string, any>> = (
+  acc: T,
+  cur?: PropType<T>,
+  idx?: number
+) => T;
+
diff --git a/libs/state/selections/src/lib/smosh.ts b/libs/state/selections/src/lib/smosh.ts
new file mode 100644
index 0000000000..ae8189ab8d
--- /dev/null
+++ b/libs/state/selections/src/lib/smosh.ts
@@ -0,0 +1,94 @@
+import { combineLatest, from, Observable } from 'rxjs';
+import { distinctUntilChanged, filter, map, shareReplay } from 'rxjs/operators';
+
+
+import { Promise } from '@rx-angular/cdk/zone-less/browser';
+import { coalesceWith } from '@rx-angular/cdk/coalescing';
+import { ExtractObservableValue } from '../../../../cdk/internals/core/src/lib/model';
+import { ArrayReducerFn, NotEmpty, ObservableMap, PropName, PropType } from './interfaces';
+
+const resolvedPromise = Promise.resolve();
+const resolvedPromise$ = from(resolvedPromise);
+
+/**
+ * @internal
+ *
+ * Used for typing
+ */
+function getEntriesToObjectReducerFn<T extends Record<string, any>>(
+  keys: PropName<T>[]
+): ArrayReducerFn<T> {
+  return (
+    accumulator: T,
+    currentValue?: PropType<T>,
+    currentIndex?: number
+  ): T => {
+    return {
+      ...accumulator,
+      [keys[currentIndex]]: currentValue,
+    };
+  };
+}
+
+/**
+ * This Observable creation function helps to accumulate an object of key & Observable of values to
+ * an Observable of objects of key & value.
+ * This comes in handy if you quickly want to create subsets as objects/state-slices of different Observables.
+ *
+ * The resulting Observable filters out undefined values forwards only distinct values and shared the aggregated output.
+ *
+ * @example
+ *
+ * Default usage:
+ *
+ * const object$: Observable<{
+ *   prop1: number,
+ *   prop2: string,
+ *   prop3: string
+ * }> = accumulateObservables({
+ *   prop1: interval(42),
+ *   prop2: of('lorem'),
+ *   prop3: 'test'
+ * });
+ *
+ * Usage with custom duration selector:
+ *
+ * const object$: Observable<{
+ *   prop1: number,
+ *   prop2: string,
+ *   prop3: string
+ * }> = accumulateObservables({
+ *   prop1: interval(42),
+ *   prop2: of('lorem'),
+ *   prop3: 'test'
+ * }, timer(0, 20));
+ *
+ * @param obj - An object of key & Observable values pairs
+ * @param durationSelector - An Observable determining the duration for the internal coalescing method
+ */
+export function smosh<T extends ObservableMap & NotEmpty<T>>(
+  // @TODO type static or Observable to enable mixing of imperative and reatctive values
+  obj: T,
+  durationSelector: Observable<any> = resolvedPromise$
+): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]> | T[K] }> {
+  const keys = Object.keys(obj) as (keyof T)[];
+  // @TODO better typing to enable static values => coerceObservable(obj[key])
+  const observables = keys.map((key) =>
+    obj[key].pipe(
+      // we avoid using the nullish operator later ;)
+      filter((v) => v !== undefined),
+      // state "changes" differ from each other, this operator ensures distinct values
+      distinctUntilChanged()
+    )
+  );
+  return combineLatest(observables).pipe(
+    // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
+    coalesceWith(durationSelector),
+    // mapping array of values to object
+    map((values) =>
+      values.reduce(getEntriesToObjectReducerFn(keys), {} as any)
+    ),
+    // by using shareReplay we share the last composition work done to create the accumulated object
+    shareReplay(1)
+  );
+}

From a5a0e492971bd67afd1c5c4beff59e661b0c0007 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:22:46 +0100
Subject: [PATCH 02/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 147c5f20fe..3846dbe364 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -1,6 +1,6 @@
 # Motivation
 
-<INTOR IMG>
+![Selections (1)](https://user-images.githubusercontent.com/10064416/152422745-b3d8e094-d0f0-4810-b1b2-5f81fae25938.png)
 
 When managing state you want to maintain a core unit of data. 
 This data is then later on distributed to multiple places in your component template (local) or whole app (global). 

From 78becbd5f7c4dca8bf6083260c98ca51413ef02c Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:23:09 +0100
Subject: [PATCH 03/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 3846dbe364..063f57a577 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -44,7 +44,9 @@ One time they are displayed in a sorted order, the other time only filtered subs
 > Derivations are always redundant information of our core data and therefore should not get stored,
 > but cached in the derivation logic.
 
-<SELECTIONS IMG>
+![Selections (2)](https://user-images.githubusercontent.com/10064416/152422803-bfd07ab2-0a6f-4521-836e-b71677e11923.png)
+
+
 
 As this process contains a lot of gotchas and possible pitfalls in terms of memory usage and performance this small helper library was created.
 

From caed2fa7c27b79cca92ee7a57e1801a56788b27f Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:23:41 +0100
Subject: [PATCH 04/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 063f57a577..f616cbf829 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -72,7 +72,9 @@ This leads to situations called the late or the early subscriber problem. (LINK)
 
 In most cases it's best to go with solving problems on the early subscriber side and be sure we never loose values that should render on the screen.
 
-<State LAYER IMG>
+![Selections (4)](https://user-images.githubusercontent.com/10064416/152422883-0b5f6006-7929-4520-b0b2-79eb61e4eb08.png)
+
+
 
 ## Advanced derivations architecture
 

From 70652abb747272151d0e277b99b75daa79bd7e4c Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:24:12 +0100
Subject: [PATCH 05/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index f616cbf829..4e94524b0b 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -68,7 +68,8 @@ As this process contains a lot of gotchas and possible pitfalls in terms of memo
 As Observables are cold their resulting srteam will only get active too by a subscription.
 This leads to situations called the late or the early subscriber problem. (LINK)
 
-<Subscriber Problem IMG>
+![Selections (5)](https://user-images.githubusercontent.com/10064416/152422955-cb89d198-1a69-450b-be84-29dd6c8c4fdb.png)
+
 
 In most cases it's best to go with solving problems on the early subscriber side and be sure we never loose values that should render on the screen.
 

From d622605a41dfd8a1e839f14daba6b17716fc7b3b Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:24:48 +0100
Subject: [PATCH 06/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 4e94524b0b..99553b30b6 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -81,4 +81,5 @@ In most cases it's best to go with solving problems on the early subscriber side
 
 <SELECT => CONNECT BAD IMG>
 
-<SELECT GOOD IMG>
+![Selections (7)](https://user-images.githubusercontent.com/10064416/152423026-d23326c2-97d5-4bd0-9015-f498c3fc0e55.png)
+

From ef3131fa2ec9ef8e3261df574fe4f15fb37a76f3 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:24:56 +0100
Subject: [PATCH 07/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 99553b30b6..6fd456c244 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -79,7 +79,8 @@ In most cases it's best to go with solving problems on the early subscriber side
 
 ## Advanced derivations architecture
 
-<SELECT => CONNECT BAD IMG>
+![Selections (6)](https://user-images.githubusercontent.com/10064416/152422999-db8260f0-69e1-4d99-b6ac-b2b1d043b4b7.png)
+
 
 ![Selections (7)](https://user-images.githubusercontent.com/10064416/152423026-d23326c2-97d5-4bd0-9015-f498c3fc0e55.png)
 

From d2d52ff89bc749c979d6583b860f4c497c43c2a3 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 3 Feb 2022 21:25:02 +0100
Subject: [PATCH 08/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 6fd456c244..b8bf4a0990 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -52,7 +52,8 @@ As this process contains a lot of gotchas and possible pitfalls in terms of memo
 
 # Benefits
 
-<Solutions IMG>
+![Selections (3)](https://user-images.githubusercontent.com/10064416/152422856-a483a06c-84e0-4067-9eaa-f3bb54a0156d.png)
+
 
 - Sophisticated set of helpers for any selection problem
 - Enables lazy rendering

From 0352d14d68bb18fd32cfe35dbd3f5048b9ac777a Mon Sep 17 00:00:00 2001
From: Michael Hladky <michael@hladky.at>
Date: Mon, 7 Feb 2022 21:27:20 +0100
Subject: [PATCH 09/26] perf: reduce smosh, organize typings

---
 libs/state/selections/spec/smosh.spec.ts | 49 ++++++++++++++++++++++++
 libs/state/selections/src/lib/smosh.ts   | 43 +++++++--------------
 2 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/libs/state/selections/spec/smosh.spec.ts b/libs/state/selections/spec/smosh.spec.ts
index 1bdb06f57d..85bf11a26a 100644
--- a/libs/state/selections/spec/smosh.spec.ts
+++ b/libs/state/selections/spec/smosh.spec.ts
@@ -104,6 +104,42 @@ describe('createSmoshObservable', () => {
     });
   });
 
+  it('should return observable that emits if only static values are used', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: i,
+        prop2: b,
+        prop3: t,
+      },        cold('s'))
+      const expected = '(x|)';
+      expectObservable(vm$).toBe(expected, { x });
+    });
+  });
+
+  it('should return observable that emits when all static and observable sources emitted at least once', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-', { h, i }),
+        prop2: cold('--a-b-', { a, b }),
+        prop3: t,
+      }, cold(      's'))
+      const expected = '----x-';
+      expectObservable(vm$).toBe(expected, { x });
+    });
+  });
+
+  it('should return observable that not emit when all static and observable sources emitted not at least once', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-', { h, i }),
+        prop2: cold('--a-b-', { a, b }),
+        prop3: undefined,
+      }, cold(      's'))
+      const expected = '----x-';
+      expectObservable(vm$).toBe(expected, { x });
+    });
+  });
+
   it('should return observable that emits when all sources emitted at least once', () => {
     testScheduler.run(({ cold, expectObservable }) => {
       const vm$: Observable<ViewModelTest> = smosh({
@@ -116,6 +152,19 @@ describe('createSmoshObservable', () => {
     });
   });
 
+  it('should return observable that not emit when all sources emitted not at least once', () => {
+    testScheduler.run(({ cold, expectObservable }) => {
+      const vm$: Observable<ViewModelTest> = smosh({
+        prop1: cold('h-h-i-', { h, i }),
+        prop2: cold('--a-b-', { a, b }),
+        prop3: cold('------', { t }),
+      }, cold(      's'))
+      const expected = '------';
+      expectObservable(vm$).toBe(expected);
+    });
+  });
+
+
   it('should emit last for sync values when durationSelector is a Promise', () => {
     testScheduler.run(({ cold, expectObservable }) => {
       const durationSelector = from(Promise.resolve(1));
diff --git a/libs/state/selections/src/lib/smosh.ts b/libs/state/selections/src/lib/smosh.ts
index ae8189ab8d..4a08f7d9b8 100644
--- a/libs/state/selections/src/lib/smosh.ts
+++ b/libs/state/selections/src/lib/smosh.ts
@@ -1,35 +1,15 @@
 import { combineLatest, from, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, map, shareReplay } from 'rxjs/operators';
 
-
 import { Promise } from '@rx-angular/cdk/zone-less/browser';
 import { coalesceWith } from '@rx-angular/cdk/coalescing';
 import { ExtractObservableValue } from '../../../../cdk/internals/core/src/lib/model';
-import { ArrayReducerFn, NotEmpty, ObservableMap, PropName, PropType } from './interfaces';
+import { NotEmpty, ObservableMap } from './interfaces';
+import { coerceObservable } from '@rx-angular/cdk/coercing';
 
 const resolvedPromise = Promise.resolve();
 const resolvedPromise$ = from(resolvedPromise);
 
-/**
- * @internal
- *
- * Used for typing
- */
-function getEntriesToObjectReducerFn<T extends Record<string, any>>(
-  keys: PropName<T>[]
-): ArrayReducerFn<T> {
-  return (
-    accumulator: T,
-    currentValue?: PropType<T>,
-    currentIndex?: number
-  ): T => {
-    return {
-      ...accumulator,
-      [keys[currentIndex]]: currentValue,
-    };
-  };
-}
-
 /**
  * This Observable creation function helps to accumulate an object of key & Observable of values to
  * an Observable of objects of key & value.
@@ -66,15 +46,14 @@ function getEntriesToObjectReducerFn<T extends Record<string, any>>(
  * @param obj - An object of key & Observable values pairs
  * @param durationSelector - An Observable determining the duration for the internal coalescing method
  */
-export function smosh<T extends ObservableMap & NotEmpty<T>>(
-  // @TODO type static or Observable to enable mixing of imperative and reatctive values
+export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>)>(
   obj: T,
   durationSelector: Observable<any> = resolvedPromise$
-): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]> | T[K] }> {
+): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]> }> {
   const keys = Object.keys(obj) as (keyof T)[];
-  // @TODO better typing to enable static values => coerceObservable(obj[key])
   const observables = keys.map((key) =>
-    obj[key].pipe(
+    // turn values, if they are static, into Observables
+    coerceObservable(obj[key]).pipe(
       // we avoid using the nullish operator later ;)
       filter((v) => v !== undefined),
       // state "changes" differ from each other, this operator ensures distinct values
@@ -85,9 +64,13 @@ export function smosh<T extends ObservableMap & NotEmpty<T>>(
     // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
     coalesceWith(durationSelector),
     // mapping array of values to object
-    map((values) =>
-      values.reduce(getEntriesToObjectReducerFn(keys), {} as any)
-    ),
+    map((values) => {
+      let obj = {} as any;
+      for (let i = 0; i < values.length; i++) {
+        obj[keys[i]] = values[i];
+      }
+      return obj;
+    }),
     // by using shareReplay we share the last composition work done to create the accumulated object
     shareReplay(1)
   );

From f4bdba70484cbf869ccc02f5cb13c7a534b829a0 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:03:14 +0100
Subject: [PATCH 10/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index b8bf4a0990..ea16940a37 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -67,7 +67,7 @@ As this process contains a lot of gotchas and possible pitfalls in terms of memo
 ## Selection owner - Template vs Class
 
 As Observables are cold their resulting srteam will only get active too by a subscription.
-This leads to situations called the late or the early subscriber problem. (LINK)
+This leads to a situation called: "the late or the early subscriber problem". (LINK)
 
 ![Selections (5)](https://user-images.githubusercontent.com/10064416/152422955-cb89d198-1a69-450b-be84-29dd6c8c4fdb.png)
 

From e09314d63aecdecad0e3c86b7cbb27c5b1c516dc Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:03:22 +0100
Subject: [PATCH 11/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index ea16940a37..4f3981052a 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -66,7 +66,7 @@ As this process contains a lot of gotchas and possible pitfalls in terms of memo
 
 ## Selection owner - Template vs Class
 
-As Observables are cold their resulting srteam will only get active too by a subscription.
+As Observables are cold their resulting stream will only get activated by a subscription.
 This leads to a situation called: "the late or the early subscriber problem". (LINK)
 
 ![Selections (5)](https://user-images.githubusercontent.com/10064416/152422955-cb89d198-1a69-450b-be84-29dd6c8c4fdb.png)

From 6da1e2e619866b54ea3bd452636fff58a68a5d89 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:03:33 +0100
Subject: [PATCH 12/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 4f3981052a..a6f7811d46 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -30,7 +30,7 @@ interface SeceltionScreen1 {
 
 **A list of items filtered by date**
 ```typescript
-interface SeceltionScreen2 {
+interface SelectionScreen2 {
   title: string;
   startingDate: Date;
   list: { id: number }

From ca28c9e192d1c01303eeb5fb118f8e7b0e278af4 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:03:41 +0100
Subject: [PATCH 13/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index a6f7811d46..00a7bdad0c 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -21,7 +21,7 @@ This data is consumed in different screens:
 
 **A list of all items sorted by id**
 ```typescript
-interface SeceltionScreen1 {
+interface SelectionScreen1 {
   title: string;
   sortDirection: 'asc' | 'desc' | 'none';
   list: { id: number }

From 406cecedb2fd6864246ec4f033311768f549abcb Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:03:49 +0100
Subject: [PATCH 14/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 00a7bdad0c..8a31aaa4d6 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -24,7 +24,7 @@ This data is consumed in different screens:
 interface SelectionScreen1 {
   title: string;
   sortDirection: 'asc' | 'desc' | 'none';
-  list: { id: number }
+  list: Array<{ id: number }>
 }
 ```
 

From 4b2d18e3abdebe2097f4b8396c6397643d0645ac Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:03:54 +0100
Subject: [PATCH 15/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 8a31aaa4d6..13cc584dbd 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -13,7 +13,7 @@ As an example we could think of the following shape:
 ```typescript
 interface GlobalModel {
   title: string;
-  list: { id: number, date: Date }
+  list: Array<{ id: number, date: Date }>
 }
 ```
 

From ba7cb504ca04f487b1e2e5750b0901eb030bffa7 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:04:01 +0100
Subject: [PATCH 16/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 13cc584dbd..a13afdb047 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -5,7 +5,7 @@
 When managing state you want to maintain a core unit of data. 
 This data is then later on distributed to multiple places in your component template (local) or whole app (global). 
 
-We can forward this state to thier consumers directly or compute specific derivations (selections) for the core unit.
+We can forward this state to their consumers directly or compute specific derivations (selections) for the core unit.
 
 As an example we could think of the following shape: 
 

From b7a02bdd77d454162465bfe2d290abd745fea94d Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 12:10:57 +0100
Subject: [PATCH 17/26] Update libs/state/selections/docs/Readme.md

---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index a13afdb047..7a225c9023 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -67,7 +67,7 @@ As this process contains a lot of gotchas and possible pitfalls in terms of memo
 ## Selection owner - Template vs Class
 
 As Observables are cold their resulting stream will only get activated by a subscription.
-This leads to a situation called: "the late or the early subscriber problem". (LINK)
+This leads to a situations called: "the late subscriber problem" or "the early subscriber problem". (LINK)
 
 ![Selections (5)](https://user-images.githubusercontent.com/10064416/152422955-cb89d198-1a69-450b-be84-29dd6c8c4fdb.png)
 

From 163e81b5b507a03553039076035531a05e1b3cae Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Sun, 27 Feb 2022 22:54:08 +0100
Subject: [PATCH 18/26] Update Readme.md

---
 libs/state/selections/docs/Readme.md | 48 ++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 7a225c9023..b5cd1b73b9 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -46,8 +46,6 @@ One time they are displayed in a sorted order, the other time only filtered subs
 
 ![Selections (2)](https://user-images.githubusercontent.com/10064416/152422803-bfd07ab2-0a6f-4521-836e-b71677e11923.png)
 
-
-
 As this process contains a lot of gotchas and possible pitfalls in terms of memory usage and performance this small helper library was created.
 
 # Benefits
@@ -77,8 +75,52 @@ In most cases it's best to go with solving problems on the early subscriber side
 ![Selections (4)](https://user-images.githubusercontent.com/10064416/152422883-0b5f6006-7929-4520-b0b2-79eb61e4eb08.png)
 
 
+## Advanced derivation architecture
+
+**The problem**
+
+We have the following state sources to manage:
+- the list of products received form global state - `Product[]`
+- the title of the list including it's number of children computen in the component class - `string`
+- the sort direction triggered over a UI element click - `boolean`
+
+A setup of the compoents class based on `RxState` could look like this:
+
+```typescript
+@Component({
+  selector: 'app-problem',
+  template: `
+    <ng-container>
+      <h1>{{}}</h1>
+    </ng-container>
+    `,
+  providers: [RxState],
+})
+export class ProblemComponent {
+
+  constructor(private globalState: GlobalState, private state: RxState<Model>) {
+    this.state.set(title: 'My list')
+    this.state.connect('products', this.globalState.products$);
+    
+  }
+  
+  toggleSort() {
+    this.state.set('sort', ({sort}) => !sort))
+  }
+}
+
+```
+
+In a components template we want to render the the UI for the above explained view model `SelectionScreen1`.
+
+```typescript
+interface SelectionScreen1 {
+  title: string;
+  sortDirection: 'asc' | 'desc' | 'none';
+  list: Array<{ id: number }>
+}
+```
 
-## Advanced derivations architecture
 
 ![Selections (6)](https://user-images.githubusercontent.com/10064416/152422999-db8260f0-69e1-4d99-b6ac-b2b1d043b4b7.png)
 

From 119328be6d0f61cd58b5df00eab08c676161fc27 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Mon, 7 Mar 2022 03:09:14 +0100
Subject: [PATCH 19/26] Update Readme.md

---
 libs/state/selections/docs/Readme.md | 76 +++++++++++++++++++++++++---
 1 file changed, 69 insertions(+), 7 deletions(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index b5cd1b73b9..e4c3d9c62c 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -24,7 +24,7 @@ This data is consumed in different screens:
 interface SelectionScreen1 {
   title: string;
   sortDirection: 'asc' | 'desc' | 'none';
-  list: Array<{ id: number }>
+  sortedList: Array<{ id: number }>
 }
 ```
 
@@ -33,7 +33,7 @@ interface SelectionScreen1 {
 interface SelectionScreen2 {
   title: string;
   startingDate: Date;
-  list: { id: number }
+  filteredList: { id: number }
 }
 ```
 
@@ -90,18 +90,22 @@ A setup of the compoents class based on `RxState` could look like this:
 @Component({
   selector: 'app-problem',
   template: `
-    <ng-container>
-      <h1>{{}}</h1>
+    <ng-container *rxLet="viewModel$; let vm">
+      <h1>{{vm.title}} - {{vm.sortDirection}}</h1>
+      <ul>
+        <li *ngFor="let item of vm.sortedList">{{item}}</li>
+      </ul>
     </ng-container>
     `,
   providers: [RxState],
 })
 export class ProblemComponent {
+  
+  viewModel$: Observable<ViewModel>; // ???
 
   constructor(private globalState: GlobalState, private state: RxState<Model>) {
-    this.state.set(title: 'My list')
+    this.state.set({title: 'My list'})
     this.state.connect('products', this.globalState.products$);
-    
   }
   
   toggleSort() {
@@ -117,13 +121,71 @@ In a components template we want to render the the UI for the above explained vi
 interface SelectionScreen1 {
   title: string;
   sortDirection: 'asc' | 'desc' | 'none';
-  list: Array<{ id: number }>
+  sortedList: Array<{ id: number }>
 }
 ```
 
+A common implementations looks like this:
+
+
+```typescript
+// template removed for brevity
+export class ProblemComponent {
+  
+  private sortedList$ = this.state.select(
+      selectSlice(['sortDirection', 'list']),
+      map(() => {
+         // sort `list` by `sortDirection` to `sortedList` here
+        return sortedList;
+      })
+  );
+  
+  viewModel$ = this.state.select(
+    selectSlice(['title', 'sortedList', 'sortDirection'])
+  )
+
+  //                                                    BAD: modle viewmodel mix up 👇
+  constructor(private globalState: GlobalState, private state: RxState<Model & Pick<ViewModel, 'sortedList'>>) {
+    this.state.set({title: 'My list'})
+    this.state.connect('products', this.globalState.products$);
+    // BAD: store derived state 👇
+    this.state.connect('sortedList', this.sortedList$);
+  }
+  
+  // ...
+}
+
+```
 
 ![Selections (6)](https://user-images.githubusercontent.com/10064416/152422999-db8260f0-69e1-4d99-b6ac-b2b1d043b4b7.png)
 
+By removing the sorted list form the state and moving it into the selection  
+we can clean up the state's typing and have a nice separation of which data is owned by the component (model) and which data is owned by the template (view model)
+
+```typescript
+// template removed for brevity
+export class ProblemComponent {
+  
+  private sortedSlice$ = this.state.select(
+      selectSlice(['sortDirection', 'list']),
+      map(({list, sortDirection}) => {
+        // sort `list` by `sortDirection` to `sortedList` here
+        return { sortDirection, sortedList };
+      })
+  );
+  
+  // GOOD: Derive view model from model 👇
+  viewModel$ = smosh({ title: this.state.select('title')}, this.sortedSlice$);
+
+  constructor(private globalState: GlobalState, private state: RxState<Model>) {
+    this.state.set({title: 'My list'});
+    this.state.connect('products', this.globalState.products$);
+  }
+  
+  // ...
+}
+
+```
 
 ![Selections (7)](https://user-images.githubusercontent.com/10064416/152423026-d23326c2-97d5-4bd0-9015-f498c3fc0e55.png)
 

From 3893bb50c76af5484106af39ac9b4ac16ae2ef2f Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Mon, 7 Mar 2022 03:13:12 +0100
Subject: [PATCH 20/26] Update Readme.md

---
 libs/state/selections/docs/Readme.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index e4c3d9c62c..c0b67db962 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -104,7 +104,7 @@ export class ProblemComponent {
   viewModel$: Observable<ViewModel>; // ???
 
   constructor(private globalState: GlobalState, private state: RxState<Model>) {
-    this.state.set({title: 'My list'})
+    this.state.connect('title', this.globalState.title$);
     this.state.connect('products', this.globalState.products$);
   }
   
@@ -144,11 +144,11 @@ export class ProblemComponent {
     selectSlice(['title', 'sortedList', 'sortDirection'])
   )
 
-  //                                                    BAD: modle viewmodel mix up 👇
+  //                                                    ❌ BAD: modle viewmodel mix up 👇
   constructor(private globalState: GlobalState, private state: RxState<Model & Pick<ViewModel, 'sortedList'>>) {
-    this.state.set({title: 'My list'})
-    this.state.connect('products', this.globalState.products$);
-    // BAD: store derived state 👇
+    // ...
+    
+    // ❌ BAD: store derived state 👇
     this.state.connect('sortedList', this.sortedList$);
   }
   
@@ -174,12 +174,12 @@ export class ProblemComponent {
       })
   );
   
-  // GOOD: Derive view model from model 👇
+  // ✔ GOOD: Derive view model from model 👇
   viewModel$ = smosh({ title: this.state.select('title')}, this.sortedSlice$);
 
   constructor(private globalState: GlobalState, private state: RxState<Model>) {
-    this.state.set({title: 'My list'});
-    this.state.connect('products', this.globalState.products$);
+    // ...
+    
   }
   
   // ...

From 910331e10e21d1dbc5a3764f332eb896a4c9e6b2 Mon Sep 17 00:00:00 2001
From: Michael Hladky <michael@hladky.at>
Date: Tue, 8 Mar 2022 00:38:42 +0100
Subject: [PATCH 21/26] refactor(state): wip selections add spreads to smosh

---
 libs/state/README.md                     |   4 +-
 libs/state/selections/spec/smosh.spec.ts | 417 ++++++++++++++---------
 libs/state/selections/src/lib/smosh.ts   |  33 +-
 3 files changed, 276 insertions(+), 178 deletions(-)

diff --git a/libs/state/README.md b/libs/state/README.md
index 39fe7c0409..80f8963556 100644
--- a/libs/state/README.md
+++ b/libs/state/README.md
@@ -12,7 +12,9 @@ RxState is a lightweight, flexible, strongly typed and tested tool dedicated to
 
 ## Sub Modules
 
-- [⛔ Selections](https://github.com/rx-angular/rx-angular/blob/main/libs/state/selections/README.md)
+- [**{ }** State (root module)](https://github.com/rx-angular/rx-angular/blob/main/libs/state/README.md)
+- [🧩 Selections](https://github.com/rx-angular/rx-angular/blob/main/libs/state/selections/README.md)
+- [☁ Effects](https://github.com/rx-angular/rx-angular/blob/main/libs/state/effects/README.md)
 
 ## Intro Video
 
diff --git a/libs/state/selections/spec/smosh.spec.ts b/libs/state/selections/spec/smosh.spec.ts
index 85bf11a26a..10234db546 100644
--- a/libs/state/selections/spec/smosh.spec.ts
+++ b/libs/state/selections/spec/smosh.spec.ts
@@ -92,211 +92,294 @@ beforeEach(() => {
 
 // tslint:disable: no-duplicate-string
 describe('createSmoshObservable', () => {
-  it('should return an observable', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: of(1),
-        prop2: of('42'),
-        prop3: of(true)
+  describe('with only the object param', () => {
+    it('should return an observable', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh({
+          prop1: of(1),
+          prop2: of('42'),
+          prop3: of(true),
+        });
+        expect(vm$.subscribe).toBeDefined();
+        expect(vm$.subscribe().unsubscribe).toBeDefined();
       });
-      expect(vm$.subscribe).toBeDefined();
-      expect(vm$.subscribe().unsubscribe).toBeDefined();
     });
-  });
 
-  it('should return observable that emits if only static values are used', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: i,
-        prop2: b,
-        prop3: t,
-      },        cold('s'))
-      const expected = '(x|)';
-      expectObservable(vm$).toBe(expected, { x });
+    it('should return observable that emits if only static values are used', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: i,
+            prop2: b,
+            prop3: t,
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = '(x|)';
+        expectObservable(vm$).toBe(expected, { x });
+      });
     });
-  });
 
-  it('should return observable that emits when all static and observable sources emitted at least once', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-', { h, i }),
-        prop2: cold('--a-b-', { a, b }),
-        prop3: t,
-      }, cold(      's'))
-      const expected = '----x-';
-      expectObservable(vm$).toBe(expected, { x });
+    it('should return observable that emits when all static and observable sources emitted at least once', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: cold('h-i--', { h, i }),
+            prop2: cold('---b-', { b }),
+            prop3: t,
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = '---x-';
+        expectObservable(vm$).toBe(expected, { x });
+      });
     });
-  });
 
-  it('should return observable that not emit when all static and observable sources emitted not at least once', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-', { h, i }),
-        prop2: cold('--a-b-', { a, b }),
-        prop3: undefined,
-      }, cold(      's'))
-      const expected = '----x-';
-      expectObservable(vm$).toBe(expected, { x });
+    it('should return observable that not emit if one sources emitted not at least once or is undefined', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: cold('h-h-i-', { h, i }),
+            prop2: cold('--a-b-', { a, b }),
+            prop3: undefined,
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = '------';
+        expectObservable(vm$).toBe(expected, { x });
+      });
     });
-  });
 
-  it('should return observable that emits when all sources emitted at least once', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-', { h, i }),
-        prop2: cold('--a-b-', { a, b }),
-        prop3: cold('----t-', { t }),
-      }, cold(      's'))
-      const expected = '----x-';
-      expectObservable(vm$).toBe(expected, { x });
+    it('should return observable that emits when all sources emitted at least once', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: cold('h-h-i-', { h, i }),
+            prop2: cold('--a-b-', { a, b }),
+            prop3: cold('----t-', { t }),
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = '----x-';
+        expectObservable(vm$).toBe(expected, { x });
+      });
     });
-  });
 
-  it('should return observable that not emit when all sources emitted not at least once', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-', { h, i }),
-        prop2: cold('--a-b-', { a, b }),
-        prop3: cold('------', { t }),
-      }, cold(      's'))
-      const expected = '------';
-      expectObservable(vm$).toBe(expected);
+    it('should return observable that not emit when if any of the sources not emitted at least once', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: cold('h-h-i-', { h, i }),
+            prop2: cold('--a-b-', { a, b }),
+            prop3: cold('------', { t }),
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = '------';
+        expectObservable(vm$).toBe(expected);
+      });
     });
-  });
 
+    it('should emit last for sync values when durationSelector is a Promise', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const durationSelector = from(Promise.resolve(1));
+        const s1 = cold('(abcdef|)');
+        const exp = '(f|)';
 
-  it('should emit last for sync values when durationSelector is a Promise', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const durationSelector = from(Promise.resolve(1));
-      const s1 = cold('(abcdef|)');
-      const exp = '(f|)';
-
-      const result = s1.pipe(coalesceWith(durationSelector));
-      expectObservable(result).toBe(exp);
+        const result = s1.pipe(coalesceWith(durationSelector));
+        expectObservable(result).toBe(exp);
+      });
     });
-  });
 
-  it('should return observable that does not emits when not all sources emitted at least once', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-', { h, i }),
-        prop2: cold('--a-b-', { a, b }),
-        prop3: cold<boolean>('------'),
+    it('should return observable that does not emits when not all sources emitted at least once', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const vm$: Observable<ViewModelTest> = smosh({
+          prop1: cold('h-h-i-', { h, i }),
+          prop2: cold('--a-b-', { a, b }),
+          prop3: cold<boolean>('------'),
+        });
+        const expected = '------';
+        expectObservable(vm$).toBe(expected);
       });
-      const expected = '------';
-      expectObservable(vm$).toBe(expected);
     });
-  });
 
-  it('should return observable that emits only distinct values  --  should distinguish between values', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const values = { u, v, w, x };
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-i-i-i', { h, i }),
-        prop2: cold('a-a-a-b-b-b', { a, b }),
-        prop3: cold('f-f-f-f-t-t', { f, t }),
-      }, cold('s'));
-      const expected = 'u---v-w-x--';
-      expectObservable(vm$).toBe(expected, values);
+    it('should return observable that emits only distinct values  --  should distinguish between values', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const values = { u, v, w, x };
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: cold('h-h-i-i-i-i', { h, i }),
+            prop2: cold('a-a-a-b-b-b', { a, b }),
+            prop3: cold('f-f-f-f-t-t', { f, t }),
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = 'u---v-w-x--';
+        expectObservable(vm$).toBe(expected, values);
+      });
     });
-  });
 
-  it('should ignore changes if any key is undefined', () => {
-    testScheduler.run(({ cold, expectObservable }) => {
-      const values = { u, v, w, x };
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: cold('h-h-i-i-i-i-i', { h, i }),
-        prop2: cold('_-a-a-_-b-_-b', { _, a, b }),
-        prop3: cold('f-f-f-f-f-t-t', { f, t }),
-      }, cold('s'));
-      const expected = '--u-v---w-x--';
-      expectObservable(vm$).toBe(expected, values);
+    it('should ignore changes if any key is undefined', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        const values = { u, v, w, x };
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: cold('h-h-i-i-i-i-i', { h, i }),
+            prop2: cold('_-a-a-_-b-_-b', { _, a, b }),
+            prop3: cold('f-f-f-f-f-t-t', { f, t }),
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const expected = '--u-v---w-x--';
+        expectObservable(vm$).toBe(expected, values);
+      });
     });
-  });
 
-  it('should return observable that shares the composition', () => {
-    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
-      const values = { u, v, w, x };
-      const prop1$ = cold('--h--', { h, i });
-      const prop2$ = cold('--a--', { a, b });
-      const prop3$ = cold('--f--', { f });
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: prop1$,
-        prop2: prop2$,
-        prop3: prop3$,
-      }, cold('s'));
-      const psubs = '^----';
-      const expected = '--u--';
+    it('should return observable that shares the composition', () => {
+      testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+        const values = { u, v, w, x };
+        const prop1$ = cold('--h--', { h, i });
+        const prop2$ = cold('--a--', { a, b });
+        const prop3$ = cold('--f--', { f });
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: prop1$,
+            prop2: prop2$,
+            prop3: prop3$,
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const psubs = '^----';
+        const expected = '--u--';
 
-      expectObservable(vm$).toBe(expected, values);
-      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
-      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
-      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+        expectObservable(vm$).toBe(expected, values);
+        expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+      });
     });
-  });
+    it('should return observable that coalesce sync emissions caused by combineLatest (over emitting)', () => {
+      testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+        const values = { u, v, w, x };
+        const prop1$ = cold('--h--i-', { h, i });
+        const prop2$ = cold('--a--b-', { a, b });
+        const prop3$ = cold('--f--t-', { f, t });
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: prop1$,
+            prop2: prop2$,
+            prop3: prop3$,
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const psubs = '^------';
+        const expected = '--u--x-';
 
-  it('should replay the last emitted value', () => {
-    testScheduler.run(({ cold, expectObservable }) => {});
-  });
+        expectObservable(vm$).toBe(expected, values);
+        expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+      });
+    });
 
-  it('should return observable that coalesce sync emissions caused by combineLatest (over emitting)', () => {
-    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
-      const values = { u, v, w, x };
-      const prop1$ = cold('--h--i-', { h, i });
-      const prop2$ = cold('--a--b-', { a, b });
-      const prop3$ = cold('--f--t-', { f, t });
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: prop1$,
-        prop2: prop2$,
-        prop3: prop3$,
-      }, cold('s'));
-      const psubs =    '^------';
-      const expected = '--u--x-';
+    it('should return observable that coalesce sync emissions caused by sync emissions (over emitting)', () => {
+      testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+        const values = { u, v, w, x };
+        const prop1$ = cold('(hhi)', { h, i });
+        const prop2$ = cold('(abb)', { a, b });
+        const prop3$ = cold('(fft)', { f, t });
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: prop1$,
+            prop2: prop2$,
+            prop3: prop3$,
+          },
+          undefined,
+          { durationSelector: cold('s') }
+        );
+        const psubs = '^------';
+        const expected = 'x';
 
-      expectObservable(vm$).toBe(expected, values);
-      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
-      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
-      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+        expectObservable(vm$).toBe(expected, values);
+        expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+      });
     });
-  });
 
-  it('should return observable that coalesce sync emissions caused by sync emissions (over emitting)', () => {
-    testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
-      const values = { u, v, w, x };
-      const prop1$ = cold('(hhi)', { h, i });
-      const prop2$ = cold('(abb)', { a, b });
-      const prop3$ = cold('(fft)', { f, t });
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: prop1$,
-        prop2: prop2$,
-        prop3: prop3$,
-      }, cold('s'));
-      const psubs =    '^------';
-      const expected = 'x';
+    it('should return observable that coalesce by a custom duration (edge-case)', () => {
+      testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+        const values = { u, v, w, x };
+        const prop1$ = cold('h--i', { h, i });
+        const prop2$ = cold('a--b', { a, b });
+        const prop3$ = cold('f--t', { f, t });
+        const vm$: Observable<ViewModelTest> = smosh(
+          {
+            prop1: prop1$,
+            prop2: prop2$,
+            prop3: prop3$,
+          },
+          undefined,
+          { durationSelector: cold('-----s') }
+        );
+        const psubs = '^-----';
+        const expected = '-----x';
 
-      expectObservable(vm$).toBe(expected, values);
-      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
-      expectSubscriptions(prop2$.subscriptions).toBe(psubs);
-      expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+        expectObservable(vm$).toBe(expected, values);
+        expectSubscriptions(prop1$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+      });
     });
   });
 
-  it('should return observable that coalesce by a custom duration (edge-case)', () => {
+  describe('with only the array param', () => {
+    it('should replay the last emitted value with all params used', () => {
+      testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
+        const values = { u, v, w, x };
+        const prop1$ = cold('h--i', { h: { prop1: h}, i: { prop1: i} });
+        const prop2$ = cold('--a--', { a: { prop2: a} });
+        const prop3$ = cold('--f--', { f: { prop3: f } });
+        const vm$: Observable<ViewModelTest> = smosh(
+          undefined,
+          [prop1$, prop2$, prop3$],
+          { durationSelector: cold('s') }
+        );
+        const psubs = '^----';
+        const expected = '--u--';
+
+        expectObservable(vm$).toBe(expected, values);
+        expectSubscriptions(prop2$.subscriptions).toBe(psubs);
+        expectSubscriptions(prop3$.subscriptions).toBe(psubs);
+      });
+    });
+  });
+  it('should replay the last emitted value with all params used', () => {
     testScheduler.run(({ cold, expectObservable, expectSubscriptions }) => {
       const values = { u, v, w, x };
-      const prop1$ = cold('h--i', { h, i });
-      const prop2$ = cold('a--b', { a, b });
-      const prop3$ = cold('f--t', { f, t });
-      const vm$: Observable<ViewModelTest> = smosh({
-        prop1: prop1$,
-        prop2: prop2$,
-        prop3: prop3$,
-      },          cold('-----s'));
-      const psubs =    '^-----';
-      const expected = '-----x';
+      const prop2$ = cold('--a--', { a });
+      const prop3$ = cold('--f--', { f: { prop3: f } });
+      const vm$: Observable<ViewModelTest> = smosh(
+        {
+          prop1: h,
+          prop2: prop2$,
+        },
+        [prop3$],
+        { durationSelector: cold('s') }
+      );
+      const psubs = '^----';
+      const expected = '--u--';
 
       expectObservable(vm$).toBe(expected, values);
-      expectSubscriptions(prop1$.subscriptions).toBe(psubs);
       expectSubscriptions(prop2$.subscriptions).toBe(psubs);
       expectSubscriptions(prop3$.subscriptions).toBe(psubs);
     });
diff --git a/libs/state/selections/src/lib/smosh.ts b/libs/state/selections/src/lib/smosh.ts
index 4a08f7d9b8..2e3dcdfb86 100644
--- a/libs/state/selections/src/lib/smosh.ts
+++ b/libs/state/selections/src/lib/smosh.ts
@@ -1,10 +1,10 @@
-import { combineLatest, from, Observable } from 'rxjs';
+import { combineLatest, from, merge, Observable, scan } from 'rxjs';
 import { distinctUntilChanged, filter, map, shareReplay } from 'rxjs/operators';
 
 import { Promise } from '@rx-angular/cdk/zone-less/browser';
 import { coalesceWith } from '@rx-angular/cdk/coalescing';
 import { ExtractObservableValue } from '../../../../cdk/internals/core/src/lib/model';
-import { NotEmpty, ObservableMap } from './interfaces';
+import { NonUndefined, NotEmpty, ObservableMap } from './interfaces';
 import { coerceObservable } from '@rx-angular/cdk/coercing';
 
 const resolvedPromise = Promise.resolve();
@@ -46,10 +46,13 @@ const resolvedPromise$ = from(resolvedPromise);
  * @param obj - An object of key & Observable values pairs
  * @param durationSelector - An Observable determining the duration for the internal coalescing method
  */
-export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>)>(
-  obj: T,
-  durationSelector: Observable<any> = resolvedPromise$
-): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]> }> {
+export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>), U extends Record<string, any>>(
+  obj: Partial<T>,
+  spreads: Observable<U>[] = [],
+  options?: {durationSelector: Observable<any>}
+): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]>} & U> {
+  let {durationSelector} = options || {};
+  durationSelector = durationSelector || resolvedPromise$;
   const keys = Object.keys(obj) as (keyof T)[];
   const observables = keys.map((key) =>
     // turn values, if they are static, into Observables
@@ -60,12 +63,11 @@ export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>)>(
       distinctUntilChanged()
     )
   );
-  return combineLatest(observables).pipe(
-    // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
-    coalesceWith(durationSelector),
+
+  const obj$ = combineLatest(observables).pipe(
     // mapping array of values to object
     map((values) => {
-      let obj = {} as any;
+      const obj = {} as any;
       for (let i = 0; i < values.length; i++) {
         obj[keys[i]] = values[i];
       }
@@ -73,5 +75,16 @@ export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>)>(
     }),
     // by using shareReplay we share the last composition work done to create the accumulated object
     shareReplay(1)
+  )
+  spreads = spreads.map(o => o.pipe(
+    // we avoid using the nullish operator later ;)
+    filter((v) => v !== undefined),
+    // state "changes" differ from each other, this operator ensures distinct values
+    distinctUntilChanged()
+    )
+  );
+  return merge(...spreads, obj$).pipe(scan((acc, slice) => ({...acc, ...slice}), {})).pipe(
+    // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
+    coalesceWith(durationSelector)
   );
 }

From 7406ec64fa27e3f73244530be050468590c9ae9e Mon Sep 17 00:00:00 2001
From: Michael Hladky <michael@hladky.at>
Date: Tue, 8 Mar 2022 01:15:05 +0100
Subject: [PATCH 22/26] refactor(state): wip selections add spreads to smosh

---
 libs/state/selections/docs/Readme.md     | 19 +++++++++++++++++++
 libs/state/selections/spec/smosh.spec.ts |  2 +-
 libs/state/selections/src/lib/smosh.ts   | 19 +++++++++++++------
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index c0b67db962..e79be4fa93 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -177,6 +177,25 @@ export class ProblemComponent {
   // ✔ GOOD: Derive view model from model 👇
   viewModel$ = smosh({ title: this.state.select('title')}, this.sortedSlice$);
 
+  // target API
+  viewModel$ = smosh({ 
+    prop1: 'prop1', // string
+    prop2: prop1$ // Observable<string>
+    }, 
+    slice1$, // Observable<{prop3: 3}>
+    slice2$  // Observable<{prop4: 'four'}>,
+    // durationSelector$ (optional)
+  );
+
+  
+  // ✔ GOOD: Derive view model from model 👇
+  viewModel$ = smosh({ 
+      title: this.state.select('title'),
+      ...this.sortedSlice$
+  });
+
+
+
   constructor(private globalState: GlobalState, private state: RxState<Model>) {
     // ...
     
diff --git a/libs/state/selections/spec/smosh.spec.ts b/libs/state/selections/spec/smosh.spec.ts
index 10234db546..959ab901d4 100644
--- a/libs/state/selections/spec/smosh.spec.ts
+++ b/libs/state/selections/spec/smosh.spec.ts
@@ -351,7 +351,7 @@ describe('createSmoshObservable', () => {
         const prop3$ = cold('--f--', { f: { prop3: f } });
         const vm$: Observable<ViewModelTest> = smosh(
           undefined,
-          [prop1$, prop2$, prop3$],
+          [prop1$, /*prop2$, prop3$*/],
           { durationSelector: cold('s') }
         );
         const psubs = '^----';
diff --git a/libs/state/selections/src/lib/smosh.ts b/libs/state/selections/src/lib/smosh.ts
index 2e3dcdfb86..b578bea87e 100644
--- a/libs/state/selections/src/lib/smosh.ts
+++ b/libs/state/selections/src/lib/smosh.ts
@@ -4,7 +4,7 @@ import { distinctUntilChanged, filter, map, shareReplay } from 'rxjs/operators';
 import { Promise } from '@rx-angular/cdk/zone-less/browser';
 import { coalesceWith } from '@rx-angular/cdk/coalescing';
 import { ExtractObservableValue } from '../../../../cdk/internals/core/src/lib/model';
-import { NonUndefined, NotEmpty, ObservableMap } from './interfaces';
+import { NotEmpty, ObservableMap } from './interfaces';
 import { coerceObservable } from '@rx-angular/cdk/coercing';
 
 const resolvedPromise = Promise.resolve();
@@ -72,9 +72,7 @@ export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>), U ex
         obj[keys[i]] = values[i];
       }
       return obj;
-    }),
-    // by using shareReplay we share the last composition work done to create the accumulated object
-    shareReplay(1)
+    })
   )
   spreads = spreads.map(o => o.pipe(
     // we avoid using the nullish operator later ;)
@@ -83,8 +81,17 @@ export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>), U ex
     distinctUntilChanged()
     )
   );
-  return merge(...spreads, obj$).pipe(scan((acc, slice) => ({...acc, ...slice}), {})).pipe(
+
+  return merge(...spreads, obj$).pipe(scan((acc, slice) => {
+    const ks = Object.keys(slice) as (keyof T)[];
+    for (let i = 0; i < ks.length; i++) {
+      acc[ks[i] as any] = slice[ks[i]];
+    }
+    return acc as any;
+  }, {})).pipe(
     // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
-    coalesceWith(durationSelector)
+    coalesceWith(durationSelector),
+    // by using shareReplay we share the last composition work done to create the accumulated object
+    shareReplay(1)
   );
 }

From 7d474c579ac69f0dd9ceb15b201e995a6068a4a2 Mon Sep 17 00:00:00 2001
From: Michael Hladky <michael@hladky.at>
Date: Wed, 23 Mar 2022 21:57:54 +0100
Subject: [PATCH 23/26] docs(state):  selection

---
 libs/state/selections/README.md        | 15 ++++--
 libs/state/selections/docs/Readme.md   | 75 ++++++++++++++++++++++++--
 libs/state/selections/src/lib/smosh.ts | 54 +++++++++++--------
 3 files changed, 114 insertions(+), 30 deletions(-)

diff --git a/libs/state/selections/README.md b/libs/state/selections/README.md
index 2c91948026..1a7904a6bb 100644
--- a/libs/state/selections/README.md
+++ b/libs/state/selections/README.md
@@ -6,15 +6,23 @@
 
 ## Slogan
 
-`@rx-angular/state/selections` TBD
+`@rx-angular/state/selections` provides performant and boiler plate free helpers for to craft custom selections with just a few lines of code.
 
 ## Key features
 
-- ✅ 
+- ✅ reduces repetitative code to a minimum
+- ✅ most common problems solved with a 1 liner
+- ✅ distinct values
+- ✅ lazy initialization (avoids `?` in the template)
+- ✅ shared computation
+- ✅ strongly types
+- ✅ fully tested
+
+
 
 ## Demos:
 
-- ⚡ GitHub
+- ⚡ GitHub Todo
 
 ## Install
 
@@ -27,4 +35,3 @@ yarn add @rx-angular/state
 ## Documentation
 
 - [Selections](https://github.com/rx-angular/rx-angular/tree/main/libs/state/selections/docs/Readme.md)
-
diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index e79be4fa93..6f45a2cc16 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -59,10 +59,16 @@ As this process contains a lot of gotchas and possible pitfalls in terms of memo
 - Shares computed result with multiple subscriber
 - Select distinct sub-sets
 - Select from static values
-- Fully Tested
-- Fully Typed
+- Fully tested
+- Strongly typed
 
-## Selection owner - Template vs Class
+# Concepts
+
+## Selection composition - lazy vs eager
+
+## Selection composition - functional vs reactive
+
+## Selection setup - Template vs Class
 
 As Observables are cold their resulting stream will only get activated by a subscription.
 This leads to a situations called: "the late subscriber problem" or "the early subscriber problem". (LINK)
@@ -74,8 +80,69 @@ In most cases it's best to go with solving problems on the early subscriber side
 
 ![Selections (4)](https://user-images.githubusercontent.com/10064416/152422883-0b5f6006-7929-4520-b0b2-79eb61e4eb08.png)
 
+# Usage
+
+## select
+
+`select` is the stand-alone version of the `RxState#select` top level method. It helps to create default selection's from a changing state source.
+
+```typescritp
+// emissions: 
+// 0.        - no emission ever happened
+// 1. {a: 1} - incomplete state leads to `?` pollution in the template
+// 2. {a: 1, b: 'a'} - render relevant emission
+// 2. {a: 1, b: 'a'} - same instance emisssion 
+// 3. {a: 1, b: 'a', c: true} - render irrelevant change
+// 4. {a: 1, b: 'b', c: true} - render relevant emission
+const model$: Observable<Partial<{a: number, b: string, c: boolean}>>;
+``` 
+**Problem**
+```html
+<!-- 
+
+Computes 2 times & Renders 0. ❌; 1. ❌; 2. ✅; 3. ❌; .4 ✅
+-->
+<div *rxLet="model$; let vm">
+    B: {{vm?.b}}
+</div>
+B: {{(model$ | push)?.b}}
+```
+
+### single property short hand
+```typescritp
+const vm$ = model$.pipe(select('b'));
+``` 
+```html
+<!-- 
+Computes 1 time & Renders 2. ✅; .4 ✅
+-->
+<div *rxLet="model$; let vm">
+    B: {{vm.b}}
+</div>
+B: {{(model$ | push).b}}
+```
+
+### single operators
+```typescritp
+const vm$: Observable<> = model$.pipe(select(map(({b}) => b === 'a')));
+``` 
+```html
+<!-- 
+Computes 1 time & Renders 2. ✅; .4 ✅
+-->
+<div *rxLet="model$; let vm">
+    B: {{vm.b}}
+</div>
+B: {{(model$ | push).b}}
+```
+
+## selectSlice
+
+## smosh
+  
+## distinctUntilSomeChanges
 
-## Advanced derivation architecture
+# Advanced derivation architecture
 
 **The problem**
 
diff --git a/libs/state/selections/src/lib/smosh.ts b/libs/state/selections/src/lib/smosh.ts
index b578bea87e..0cc9900d5e 100644
--- a/libs/state/selections/src/lib/smosh.ts
+++ b/libs/state/selections/src/lib/smosh.ts
@@ -46,12 +46,15 @@ const resolvedPromise$ = from(resolvedPromise);
  * @param obj - An object of key & Observable values pairs
  * @param durationSelector - An Observable determining the duration for the internal coalescing method
  */
-export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>), U extends Record<string, any>>(
+export function smosh<
+  T extends ObservableMap | (Partial<T> & NotEmpty<T>),
+  U extends Record<string, any>
+>(
   obj: Partial<T>,
   spreads: Observable<U>[] = [],
-  options?: {durationSelector: Observable<any>}
-): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]>} & U> {
-  let {durationSelector} = options || {};
+  options?: { durationSelector: Observable<any> }
+): Observable<{ [K in keyof T]: ExtractObservableValue<T[K]> } & U> {
+  let { durationSelector } = options || {};
   durationSelector = durationSelector || resolvedPromise$;
   const keys = Object.keys(obj) as (keyof T)[];
   const observables = keys.map((key) =>
@@ -73,25 +76,32 @@ export function smosh<T extends ObservableMap | (Partial<T> & NotEmpty<T>), U ex
       }
       return obj;
     })
-  )
-  spreads = spreads.map(o => o.pipe(
-    // we avoid using the nullish operator later ;)
-    filter((v) => v !== undefined),
-    // state "changes" differ from each other, this operator ensures distinct values
-    distinctUntilChanged()
+  );
+  spreads = spreads.map((o) =>
+    o.pipe(
+      // we avoid using the nullish operator later ;)
+      filter((v) => v !== undefined),
+      // state "changes" differ from each other, this operator ensures distinct values
+      distinctUntilChanged()
     )
   );
 
-  return merge(...spreads, obj$).pipe(scan((acc, slice) => {
-    const ks = Object.keys(slice) as (keyof T)[];
-    for (let i = 0; i < ks.length; i++) {
-      acc[ks[i] as any] = slice[ks[i]];
-    }
-    return acc as any;
-  }, {})).pipe(
-    // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
-    coalesceWith(durationSelector),
-    // by using shareReplay we share the last composition work done to create the accumulated object
-    shareReplay(1)
-  );
+  return combineLatest([...spreads, obj$])
+    .pipe(
+      scan((acc, slices) => {
+        const ks = slices.flatMap((slice) => Object.keys(slice)) as (keyof T)[];
+        slices.forEach((slice) => {
+          for (let i = 0; i < ks.length; i++) {
+            acc[ks[i] as any] = slice[ks[i]];
+          }
+        });
+        return acc as any;
+      }, {})
+    )
+    .pipe(
+      // As combineLatest will emit multiple times for a change in multiple properties we coalesce those emissions together
+      coalesceWith(durationSelector),
+      // by using shareReplay we share the last composition work done to create the accumulated object
+      shareReplay(1)
+    );
 }

From d8f4e5fbda00b6dfa03dea52b58f262c9b6f0a57 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 24 Mar 2022 13:32:55 +0100
Subject: [PATCH 24/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: push-based-bot <95690470+push-based-bot@users.noreply.github.com>
---
 libs/state/selections/docs/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 6f45a2cc16..9b374a9a17 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -258,7 +258,7 @@ export class ProblemComponent {
   // ✔ GOOD: Derive view model from model 👇
   viewModel$ = smosh({ 
       title: this.state.select('title'),
-      ...this.sortedSlice$
+      [this.sortedSlice$]
   });
 
 

From d8f2ae120f2f7f5abd5d64da8442878a8f73b095 Mon Sep 17 00:00:00 2001
From: Michael Hladky <10064416+BioPhoton@users.noreply.github.com>
Date: Thu, 24 Mar 2022 13:35:09 +0100
Subject: [PATCH 25/26] Update libs/state/selections/docs/Readme.md

Co-authored-by: push-based-bot <95690470+push-based-bot@users.noreply.github.com>
---
 libs/state/selections/docs/Readme.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/state/selections/docs/Readme.md b/libs/state/selections/docs/Readme.md
index 9b374a9a17..9a2e3589f6 100644
--- a/libs/state/selections/docs/Readme.md
+++ b/libs/state/selections/docs/Readme.md
@@ -257,9 +257,8 @@ export class ProblemComponent {
   
   // ✔ GOOD: Derive view model from model 👇
   viewModel$ = smosh({ 
-      title: this.state.select('title'),
-      [this.sortedSlice$]
-  });
+      title: this.state.select('title')
+  }, [this.sortedSlice$]);
 
 
 

From 0b1bda8a849a636e2670dbb25db5b8e4eba6dad6 Mon Sep 17 00:00:00 2001
From: Edouard Bozon <bozonedouard@gmail.com>
Date: Fri, 25 Mar 2022 11:42:56 +0100
Subject: [PATCH 26/26] chore(state): make eslint happy

---
 libs/state/selections/spec/smosh.spec.ts | 4 ++--
 libs/state/selections/src/lib/smosh.ts   | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/libs/state/selections/spec/smosh.spec.ts b/libs/state/selections/spec/smosh.spec.ts
index 959ab901d4..5ec7421b5b 100644
--- a/libs/state/selections/spec/smosh.spec.ts
+++ b/libs/state/selections/spec/smosh.spec.ts
@@ -1,8 +1,8 @@
 import { TestScheduler } from 'rxjs/testing';
-// tslint:disable-next-line:nx-enforce-module-boundaries
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { jestMatcher } from '@test-helpers';
 
-import { smosh } from '@rx-angular/state/selections';
+import { smosh } from '../src';
 import { coalesceWith } from '@rx-angular/cdk/coalescing';
 import { from, Observable, of } from 'rxjs';
 
diff --git a/libs/state/selections/src/lib/smosh.ts b/libs/state/selections/src/lib/smosh.ts
index 0cc9900d5e..cb68573913 100644
--- a/libs/state/selections/src/lib/smosh.ts
+++ b/libs/state/selections/src/lib/smosh.ts
@@ -1,11 +1,10 @@
-import { combineLatest, from, merge, Observable, scan } from 'rxjs';
+import { combineLatest, from, Observable, scan } from 'rxjs';
 import { distinctUntilChanged, filter, map, shareReplay } from 'rxjs/operators';
 
 import { Promise } from '@rx-angular/cdk/zone-less/browser';
 import { coalesceWith } from '@rx-angular/cdk/coalescing';
-import { ExtractObservableValue } from '../../../../cdk/internals/core/src/lib/model';
-import { NotEmpty, ObservableMap } from './interfaces';
 import { coerceObservable } from '@rx-angular/cdk/coercing';
+import { ExtractObservableValue, NotEmpty, ObservableMap } from './interfaces';
 
 const resolvedPromise = Promise.resolve();
 const resolvedPromise$ = from(resolvedPromise);
@@ -25,7 +24,7 @@ const resolvedPromise$ = from(resolvedPromise);
  *   prop1: number,
  *   prop2: string,
  *   prop3: string
- * }> = accumulateObservables({
+ * }> = smosh({
  *   prop1: interval(42),
  *   prop2: of('lorem'),
  *   prop3: 'test'
@@ -37,7 +36,7 @@ const resolvedPromise$ = from(resolvedPromise);
  *   prop1: number,
  *   prop2: string,
  *   prop3: string
- * }> = accumulateObservables({
+ * }> = smosh({
  *   prop1: interval(42),
  *   prop2: of('lorem'),
  *   prop3: 'test'