Start describing the view models

Author: WorldMaker

frameworks/keyed/butterfloat/app-vm.ts

@@ -0,0 +1,63 @@
+import { butterfly, StateSetter } from 'butterfloat'
+import { filter, map, mergeMap, Observable, range } from 'rxjs'
+import { RowViewModel } from './row-vm'
+
+export interface IdRange {
+  min: number
+  max: number
+  added: [start: number, count: number]
+}
+
+export class AppViewModel {
+  readonly #idRange: Observable<IdRange>
+  readonly #setIdRange: (idRange: StateSetter<IdRange>) => void
+  get idRange() {
+    return this.#idRange
+  }
+
+  readonly #selectedId: Observable<number>
+  readonly #setSelectedId: (id: StateSetter<number>) => void
+  get selectedId() {
+    return this.#selectedId
+  }
+
+  readonly #rows: Observable<RowViewModel>
+  get rows() {
+    return this.#rows
+  }
+
+  constructor() {
+    ;[this.#idRange, this.#setIdRange] = butterfly<IdRange>({
+      min: 0,
+      max: 0,
+      added: [-1, -1],
+    })
+    ;[this.#selectedId, this.#setSelectedId] = butterfly<number>(-1)
+
+    this.#rows = this.#idRange.pipe(
+      filter((idRange) => idRange.added[0] > 0 && idRange.added[1] > 0),
+      mergeMap((idRange) => range(idRange.added[0], idRange.added[1])),
+      map((id) => new RowViewModel(this, id)),
+    )
+  }
+
+  clear() {
+    this.#setIdRange((current) => ({
+      min: current.max,
+      max: current.max,
+      added: [-1, -1],
+    }))
+  }
+
+  selectRow(id: number) {
+    this.#setSelectedId(id)
+  }
+
+  addRows(count: number) {
+    this.#setIdRange((current) => {
+      const min = current.min
+      const max = current.max + count
+      return { min, max, added: [current.max, count] }
+    })
+  }
+}

frameworks/keyed/butterfloat/data.ts

@@ -0,0 +1,63 @@
+const adjectives = [
+  'pretty',
+  'large',
+  'big',
+  'small',
+  'tall',
+  'short',
+  'long',
+  'handsome',
+  'plain',
+  'quaint',
+  'clean',
+  'elegant',
+  'easy',
+  'angry',
+  'crazy',
+  'helpful',
+  'mushy',
+  'odd',
+  'unsightly',
+  'adorable',
+  'important',
+  'inexpensive',
+  'cheap',
+  'expensive',
+  'fancy',
+]
+const colors = [
+  'red',
+  'yellow',
+  'blue',
+  'green',
+  'pink',
+  'brown',
+  'purple',
+  'brown',
+  'white',
+  'black',
+  'orange',
+]
+
+const nouns = [
+  'table',
+  'chair',
+  'house',
+  'bbq',
+  'desk',
+  'car',
+  'pony',
+  'cookie',
+  'sandwich',
+  'burger',
+  'pizza',
+  'mouse',
+  'keyboard',
+]
+
+export function randomLabel() {
+  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)]
+  const color = colors[Math.floor(Math.random() * colors.length)]
+  const noun = nouns[Math.floor(Math.random() * nouns.length)]
+  return `${adjective} ${color} ${noun}`
+}

frameworks/keyed/butterfloat/row-vm.ts

@@ -0,0 +1,64 @@
+import { butterfly, StateSetter } from 'butterfloat'
+import { filter, map, merge, NEVER, Observable, Subject, takeUntil } from 'rxjs'
+import { randomLabel } from './data.js'
+import { AppViewModel } from './app-vm.js'
+
+export class RowViewModel {
+  readonly #app: AppViewModel
+
+  readonly #id: number
+  get id() {
+    return this.#id
+  }
+
+  readonly #label: Observable<string>
+  readonly #setLabel: (label: StateSetter<string>) => void
+  get label() {
+    return this.#label
+  }
+
+  readonly #remove = new Subject<boolean>()
+
+  readonly #alive: Observable<boolean>
+  get alive() {
+    return this.#alive
+  }
+
+  readonly #selected: Observable<boolean>
+  get selected() {
+    return this.#selected
+  }
+
+  constructor(app: AppViewModel, id: number) {
+    this.#app = app
+    this.#id = id
+    ;[this.#label, this.#setLabel] = butterfly(randomLabel())
+
+    this.#alive = NEVER.pipe(
+      takeUntil(
+        merge(
+          this.#remove.pipe(filter(() => true)),
+          this.#app.idRange.pipe(
+            filter((range) => range.min > this.#id),
+            map(() => true),
+          ),
+        ),
+      ),
+    )
+
+    this.#selected = this.#app.selectedId.pipe(map((id) => id === this.#id))
+  }
+
+  updateLabel() {
+    this.#setLabel((current) => current + '!!!')
+  }
+
+  remove() {
+    this.#remove.next(true)
+    this.#remove.complete()
+  }
+
+  select() {
+    this.#app.selectRow(this.#id)
+  }
+}