Implement the remainder of the benchmark

Author: WorldMaker

frameworks/keyed/butterfloat/app-vm.ts

@@ -26,13 +26,20 @@ export class AppViewModel {
     return this.#rows
   }
 
+  readonly #rowsToUpdate: Observable<number>
+  readonly #setRowsToUpdate: (rowsToUpdate: StateSetter<number>) => void
+  get rowsToUpdate() {
+    return this.#rowsToUpdate
+  }
+
   constructor() {
     ;[this.#idRange, this.#setIdRange] = butterfly<IdRange>({
       min: 0,
       max: 0,
       added: [-1, -1],
     })
     ;[this.#selectedId, this.#setSelectedId] = butterfly<number>(-1)
+    ;[this.#rowsToUpdate, this.#setRowsToUpdate] = butterfly<number>(-1)
 
     this.#rows = this.#idRange.pipe(
       filter((idRange) => idRange.added[1] > 0),
@@ -68,4 +75,8 @@ export class AppViewModel {
       return { min, max, added: [current.max, count] }
     })
   }
+
+  updateRow(id: number) {
+    this.#setRowsToUpdate(id)
+  }
 }

frameworks/keyed/butterfloat/app.tsx

@@ -1,7 +1,7 @@
 import { ComponentContext, jsx, ObservableEvent } from 'butterfloat'
 import { AppViewModel } from './app-vm.js'
 import { Row } from './row.js'
-import { map } from 'rxjs'
+import { map, withLatestFrom } from 'rxjs'
 
 interface AppEvents {
   run: ObservableEvent<MouseEvent>
@@ -10,24 +10,46 @@ interface AppEvents {
   update: ObservableEvent<MouseEvent>
   clear: ObservableEvent<MouseEvent>
   swaprows: ObservableEvent<MouseEvent>
+  tbodyAttach: ObservableEvent<HTMLElement>
 }
 
 export function App(
   _props: unknown,
-  { bindImmediateEffect, events }: ComponentContext<AppEvents>,
+  { bindEffect, bindImmediateEffect, events }: ComponentContext<AppEvents>,
 ) {
   const vm = new AppViewModel()
 
   const children = vm.rows.pipe(map((row) => () => <Row vm={row} />))
 
-  bindImmediateEffect(events.run, () => {
-    vm.createRows(1000)
-  })
-  bindImmediateEffect(events.runlots, () => {
-    vm.createRows(10000)
-  })
+  bindImmediateEffect(events.run, () => vm.createRows(1000))
+  bindImmediateEffect(events.runlots, () => vm.createRows(10000))
   bindImmediateEffect(events.add, () => vm.appendRows(1000))
   bindImmediateEffect(events.clear, () => vm.clear())
+  bindEffect(
+    events.update.pipe(withLatestFrom(events.tbodyAttach)),
+    ([_, tbody]) => {
+      const rows = tbody.querySelectorAll('tr')
+      for (let i = 0; i < rows.length; i += 10) {
+        const row = rows[i]
+        const id = Number.parseInt(row.dataset.id!, 10)
+        vm.updateRow(id)
+      }
+    },
+  )
+  bindEffect(
+    events.swaprows.pipe(withLatestFrom(events.tbodyAttach)),
+    ([_, tbody]) => {
+      const rows = tbody.querySelectorAll('tr')
+      if (rows.length > 998) {
+        const row0 = rows[0]
+        const row1 = rows[1]
+        const row997 = rows[997]
+        const row998 = rows[998]
+        row0.after(row998)
+        row997.after(row1)
+      }
+    },
+  )
 
   return (
     <div class="container">
@@ -107,6 +129,7 @@ export function App(
           id="tbody"
           childrenBind={children}
           childrenBindMode="append"
+          events={{ bfDomAttach: events.tbodyAttach }}
         ></tbody>
       </table>
     </div>

frameworks/keyed/butterfloat/row-vm.ts

@@ -1,19 +1,13 @@
 import { butterfly, StateSetter } from 'butterfloat'
-import {
-  filter,
-  map,
-  merge,
-  NEVER,
-  Observable,
-  Subject,
-  takeUntil,
-  tap,
-} from 'rxjs'
+import { filter, map, merge, Observable } from 'rxjs'
 import { randomLabel } from './data.js'
 import { AppViewModel } from './app-vm.js'
 
 export class RowViewModel {
   readonly #app: AppViewModel
+  get app() {
+    return this.#app
+  }
 
   readonly #id: number
   get id() {

frameworks/keyed/butterfloat/row.tsx

@@ -1,29 +1,39 @@
 import { ComponentContext, jsx, ObservableEvent } from 'butterfloat'
 import { RowViewModel } from './row-vm'
-import { concat, NEVER, of, takeUntil } from 'rxjs'
+import { concat, filter, NEVER, of, takeUntil } from 'rxjs'
 
 export interface RowProps {
   vm: RowViewModel
 }
 
 export interface RowEvents {
+  attach: ObservableEvent<HTMLElement>
   select: ObservableEvent<MouseEvent>
   remove: ObservableEvent<MouseEvent>
 }
 
 export function Row(
   { vm }: RowProps,
-  { bindImmediateEffect, events }: ComponentContext<RowEvents>,
+  { bindEffect, bindImmediateEffect, events }: ComponentContext<RowEvents>,
 ) {
+  bindImmediateEffect(events.attach, (element) => {
+    element.dataset.id = vm.id.toString()
+  })
   bindImmediateEffect(events.select, () => vm.select())
   bindImmediateEffect(events.remove.pipe(takeUntil(vm.removed)), () =>
     vm.remove(),
   )
+  bindEffect(vm.app.rowsToUpdate.pipe(filter((id) => id === vm.id)), () =>
+    vm.updateLabel(),
+  )
 
   const id = concat(of(vm.id.toString()), NEVER)
 
   return (
-    <tr classBind={{ danger: vm.selected }}>
+    <tr
+      classBind={{ danger: vm.selected }}
+      events={{ bfDomAttach: events.attach }}
+    >
       <td class="col-md-1" bind={{ innerText: id }}></td>
       <td class="col-md-4">
         <a bind={{ innerText: vm.label }} events={{ click: events.select }}></a>