Rough first pass at the benchmark

Author: WorldMaker

frameworks/keyed/butterfloat/_build.js

@@ -1,10 +1,11 @@
 import { writeFile } from 'node:fs/promises'
-import { buildStamp } from 'butterfloat'
+import { buildStamp, makeTestComponentContext, makeTestEvent } from 'butterfloat'
 import { build } from 'esbuild'
 import { JSDOM } from 'jsdom'
+import { NEVER } from 'rxjs'
 
 await build({
-  entryPoints: ['./app.tsx'],
+  entryPoints: ['./app-vm.ts', './app.tsx', './data.ts', './row-vm.ts', './row.tsx'],
   bundle: false,
   format: 'esm',
   outdir: '.',
@@ -40,8 +41,28 @@ globalThis.document = document
 globalThis.window = window
 
 const { App } = await import('./app.js')
-const appStamp = buildStamp(App(), document)
+const { context: appContext } = makeTestComponentContext({
+  run: makeTestEvent(NEVER),
+  runlots: makeTestEvent(NEVER),
+  add: makeTestEvent(NEVER),
+  update: makeTestEvent(NEVER),
+  clear: makeTestEvent(NEVER),
+  swaprows: makeTestEvent(NEVER),
+})
+const appStamp = buildStamp(App({}, appContext), document)
 appStamp.id = 'app'
 document.body.append(appStamp)
 
+const { Row } = await import('./row.js')
+const { AppViewModel } = await import('./app-vm.js')
+const { RowViewModel } = await import('./row-vm.js')
+const vm = new RowViewModel(new AppViewModel(), -999)
+const { context: rowContext } = makeTestComponentContext({
+  select: makeTestEvent(NEVER),
+  remove: makeTestEvent(NEVER),
+})
+const rowStamp = buildStamp(Row({ vm }, rowContext), document)
+rowStamp.id = 'row'
+document.body.append(rowStamp)
+
 await writeFile('./index.html', dom.serialize())

frameworks/keyed/butterfloat/app-vm.ts

@@ -1,6 +1,6 @@
 import { butterfly, StateSetter } from 'butterfloat'
 import { filter, map, mergeMap, Observable, range } from 'rxjs'
-import { RowViewModel } from './row-vm'
+import { RowViewModel } from './row-vm.js'
 
 export interface IdRange {
   min: number
@@ -53,7 +53,15 @@ export class AppViewModel {
     this.#setSelectedId(id)
   }
 
-  addRows(count: number) {
+  createRows(count: number) {
+    this.#setIdRange((current) => {
+      const min = current.max
+      const max = current.max + count
+      return { min, max, added: [current.max, count] }
+    })
+  }
+
+  appendRows(count: number) {
     this.#setIdRange((current) => {
       const min = current.min
       const max = current.max + count

frameworks/keyed/butterfloat/app.tsx

@@ -1,6 +1,34 @@
-import { jsx } from 'butterfloat'
+import { ComponentContext, jsx, ObservableEvent } from 'butterfloat'
+import { AppViewModel } from './app-vm.js'
+import { Row } from './row.js'
+import { map } from 'rxjs'
+
+interface AppEvents {
+  run: ObservableEvent<MouseEvent>
+  runlots: ObservableEvent<MouseEvent>
+  add: ObservableEvent<MouseEvent>
+  update: ObservableEvent<MouseEvent>
+  clear: ObservableEvent<MouseEvent>
+  swaprows: ObservableEvent<MouseEvent>
+}
+
+export function App(
+  _props: unknown,
+  { 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.add, () => vm.appendRows(1000))
+  bindImmediateEffect(events.clear, () => vm.clear())
 
-export function App() {
   return (
     <div class="container">
       <div class="jumbotron">
@@ -15,6 +43,7 @@ export function App() {
                   type="button"
                   class="btn btn-primary btn-block"
                   id="run"
+                  events={{ click: events.run }}
                 >
                   Create 1,000 rows
                 </button>
@@ -24,6 +53,7 @@ export function App() {
                   type="button"
                   class="btn btn-primary btn-block"
                   id="runlots"
+                  events={{ click: events.runlots }}
                 >
                   Create 10,000 rows
                 </button>
@@ -33,6 +63,7 @@ export function App() {
                   type="button"
                   class="btn btn-primary btn-block"
                   id="add"
+                  events={{ click: events.add }}
                 >
                   Append 1,000 rows
                 </button>
@@ -42,6 +73,7 @@ export function App() {
                   type="button"
                   class="btn btn-primary btn-block"
                   id="update"
+                  events={{ click: events.update }}
                 >
                   Update every 10th row
                 </button>
@@ -51,6 +83,7 @@ export function App() {
                   type="button"
                   class="btn btn-primary btn-block"
                   id="clear"
+                  events={{ click: events.clear }}
                 >
                   Clear
                 </button>
@@ -60,6 +93,7 @@ export function App() {
                   type="button"
                   class="btn btn-primary btn-block"
                   id="swaprows"
+                  events={{ click: events.swaprows }}
                 >
                   Swap Rows
                 </button>
@@ -69,7 +103,11 @@ export function App() {
         </div>
       </div>
       <table class="table table-hover table-striped test-data">
-        <tbody id="tbody"></tbody>
+        <tbody
+          id="tbody"
+          childrenBind={children}
+          childrenBindMode="append"
+        ></tbody>
       </table>
     </div>
   )

frameworks/keyed/butterfloat/main.ts

@@ -1,5 +1,6 @@
 import { runStamps, StampCollection } from 'butterfloat'
 import { App } from './app.js'
+import { Row } from './row.js'
 
 const stamps = new StampCollection()
 
@@ -8,5 +9,10 @@ if (appStamp) {
   stamps.registerOnlyStamp(App, appStamp)
 }
 
+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.tsx

@@ -0,0 +1,36 @@
+import { ComponentContext, jsx, ObservableEvent } from 'butterfloat'
+import { RowViewModel } from './row-vm'
+import { of } from 'rxjs'
+
+export interface RowProps {
+  vm: RowViewModel
+}
+
+export interface RowEvents {
+  select: ObservableEvent<MouseEvent>
+  remove: ObservableEvent<MouseEvent>
+}
+
+export function Row(
+  { vm }: RowProps,
+  { bindImmediateEffect, events }: ComponentContext<RowEvents>,
+) {
+  bindImmediateEffect(vm.alive, () => {})
+  bindImmediateEffect(events.select, () => vm.select())
+  bindImmediateEffect(events.remove, () => vm.remove())
+
+  return (
+    <tr classBind={{ danger: vm.selected }}>
+      <td class="col-md-1" bind={{ innerText: of(vm.id.toString()) }}></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 }}>
+          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+        </a>
+      </td>
+      <td class="col-md-6"></td>
+    </tr>
+  )
+}