docs: improve selection docs

edbzn · edbzn · commit 5a61861a8358 · 2023-01-30T10:26:09.000+01:00
diff --git a/apps/docs/docs/state/selections/selections.mdx b/apps/docs/docs/state/selections/selections.mdx
@@ -116,15 +116,15 @@ In most cases it's best to go with solving problems on the early subscriber side
 
 `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
+```typescript
 // 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
+// 2. {a: 1, b: 'a'} - same instance emission
 // 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}>>;
+const model$: Observable<Partial<{ a: number; b: string; c: boolean }>>;
 ```
 
 **Problem**
@@ -140,7 +140,7 @@ B: {{(model$ | push)?.b}}
 
 ### single property short hand
 
-```typescritp
+```typescript
 const vm$ = model$.pipe(select('b'));
 ```
 
@@ -154,8 +154,8 @@ B: {{(model$ | push).b}}
 
 ### single operators
 
-```typescritp
-const vm$: Observable<> = model$.pipe(select(map(({b}) => b === 'a')));
+```typescript
+const vm$: Observable<> = model$.pipe(select(map(({ b }) => b === 'a')));
 ```
 
 ```html
@@ -168,21 +168,21 @@ B: {{(model$ | push).b}}
 
 ## selectSlice
 
-## smosh
-
 ## distinctUntilSomeChanges
 
+## stateful
+
 # 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 title of the list including it's number of children computed 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:
+A setup of the components class based on `RxState` could look like this:
 
 ```typescript
 @Component({
@@ -226,7 +226,6 @@ interface SelectionScreen1 {
 A common implementations looks like this:
 
 ```typescript
-// template removed for brevity
 export class ProblemComponent {
   private sortedList$ = this.state.select(
     selectSlice(['sortDirection', 'list']),
@@ -240,7 +239,7 @@ export class ProblemComponent {
     selectSlice(['title', 'sortedList', 'sortDirection'])
   );
 
-  //                                                    ❌ BAD: modle viewmodel mix up 👇
+  // ❌ BAD: model and view model mix up 👇
   constructor(
     private globalState: GlobalState,
     private state: RxState<Model & Pick<ViewModel, 'sortedList'>>
@@ -257,41 +256,20 @@ export class ProblemComponent {
 
 ![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)
+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 }) => {
+    ['sortDirection', 'list'],
+    ({ 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$);
-
-  // 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$]
-  );
+  vm$ = // what to promote here as smosh isn't part of RxA?
 
   constructor(private globalState: GlobalState, private state: RxState<Model>) {
     // ...
