Fix the basics of the benchmark

Author: WorldMaker

frameworks/keyed/butterfloat/app-vm.ts

@@ -35,7 +35,7 @@ export class AppViewModel {
     ;[this.#selectedId, this.#setSelectedId] = butterfly<number>(-1)
 
     this.#rows = this.#idRange.pipe(
-      filter((idRange) => idRange.added[0] > 0 && idRange.added[1] > 0),
+      filter((idRange) => idRange.added[1] > 0),
       mergeMap((idRange) => range(idRange.added[0], idRange.added[1])),
       map((id) => new RowViewModel(this, id)),
     )

frameworks/keyed/butterfloat/main.ts

@@ -9,10 +9,10 @@ if (appStamp) {
   stamps.registerOnlyStamp(App, appStamp)
 }
 
-const rowStamp = document.querySelector<HTMLTemplateElement>('template#row')
-if (rowStamp) {
-  stamps.registerOnlyStamp(Row, rowStamp)
-}
+// const rowStamp = document.querySelector<HTMLTemplateElement>('template#row')
+// if (rowStamp) {
+//   stamps.registerOnlyStamp(Row, rowStamp)
+// }
 
 const main = document.querySelector('#main')!
 runStamps(main, App, stamps)

frameworks/keyed/butterfloat/row-vm.ts

@@ -1,5 +1,14 @@
 import { butterfly, StateSetter } from 'butterfloat'
-import { filter, map, merge, NEVER, Observable, Subject, takeUntil } from 'rxjs'
+import {
+  filter,
+  map,
+  merge,
+  NEVER,
+  Observable,
+  Subject,
+  takeUntil,
+  tap,
+} from 'rxjs'
 import { randomLabel } from './data.js'
 import { AppViewModel } from './app-vm.js'
 
@@ -17,11 +26,12 @@ export class RowViewModel {
     return this.#label
   }
 
-  readonly #remove = new Subject<boolean>()
+  readonly #remove: Observable<boolean>
+  readonly #setRemove: (remove: StateSetter<boolean>) => void
 
-  readonly #alive: Observable<boolean>
-  get alive() {
-    return this.#alive
+  readonly #removed: Observable<boolean>
+  get removed() {
+    return this.#removed
   }
 
   readonly #selected: Observable<boolean>
@@ -33,16 +43,13 @@ export class RowViewModel {
     this.#app = app
     this.#id = id
     ;[this.#label, this.#setLabel] = butterfly(randomLabel())
+    ;[this.#remove, this.#setRemove] = butterfly(false)
 
-    this.#alive = NEVER.pipe(
-      takeUntil(
-        merge(
-          this.#remove.pipe(filter(() => true)),
-          this.#app.idRange.pipe(
-            filter((range) => range.min > this.#id),
-            map(() => true),
-          ),
-        ),
+    this.#removed = merge(
+      this.#remove.pipe(filter((remove) => remove)),
+      this.#app.idRange.pipe(
+        filter((range) => range.min > this.#id),
+        map(() => true),
       ),
     )
 
@@ -54,8 +61,7 @@ export class RowViewModel {
   }
 
   remove() {
-    this.#remove.next(true)
-    this.#remove.complete()
+    this.#setRemove(true)
   }
 
   select() {

frameworks/keyed/butterfloat/row.tsx

@@ -1,6 +1,6 @@
 import { ComponentContext, jsx, ObservableEvent } from 'butterfloat'
 import { RowViewModel } from './row-vm'
-import { of } from 'rxjs'
+import { concat, NEVER, of, takeUntil } from 'rxjs'
 
 export interface RowProps {
   vm: RowViewModel
@@ -15,18 +15,21 @@ export function Row(
   { vm }: RowProps,
   { bindImmediateEffect, events }: ComponentContext<RowEvents>,
 ) {
-  bindImmediateEffect(vm.alive, () => {})
   bindImmediateEffect(events.select, () => vm.select())
-  bindImmediateEffect(events.remove, () => vm.remove())
+  bindImmediateEffect(events.remove.pipe(takeUntil(vm.removed)), () =>
+    vm.remove(),
+  )
+
+  const id = concat(of(vm.id.toString()), NEVER)
 
   return (
     <tr classBind={{ danger: vm.selected }}>
-      <td class="col-md-1" bind={{ innerText: of(vm.id.toString()) }}></td>
+      <td class="col-md-1" bind={{ innerText: id }}></td>
       <td class="col-md-4">
         <a bind={{ innerText: vm.label }} events={{ click: events.select }}></a>
       </td>
       <td class="col-md-1">
-        <a events={{ click: events.remove }}>
+        <a type="button" events={{ click: events.remove }}>
           <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
         </a>
       </td>