@svgrid/grid 2.6.20 → 2.6.22

package/src/core.row-shape.test.ts

@@ -0,0 +1,119 @@
+/**
+ * The public shape of a `Row`.
+ *
+ * Rows were rewritten from object literals with per-row closures to objects
+ * carrying shared `this`-based methods, which cut mount allocation from 56.5 MB
+ * to 14.5 MB. Those shared methods need a pointer back to the table, and the
+ * first version stored it as a plain `_ctx` property - which made every row
+ * serialise the whole grid, because `options.data` is reachable through it.
+ * `JSON.stringify(oneRow)` grew with the dataset: 981 characters at 3 rows,
+ * 67,719 at 3,000. Stringifying a row model was quadratic.
+ *
+ * The fix is to key the internals with symbols: invisible to `JSON.stringify`,
+ * `Object.keys` and `for...in`, but still copied by object spread, which
+ * several row models rely on when they do `{ ...row, depth }`.
+ *
+ * These tests pin all four of those properties. `Row` is public API and its
+ * observable shape is part of the contract.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  createCoreRowModel,
+  createGroupedRowModel,
+  createSvGridCore,
+  columnGroupingFeature,
+  tableFeatures,
+  type ColumnDef,
+} from './core'
+
+type Data = Record<string, unknown>
+
+function makeGrid(count: number, grouping: string[] = []) {
+  const data: Data[] = Array.from({ length: count }, (_, i) => ({
+    name: `row-${i}`,
+    score: i,
+    bucket: i % 2 === 0 ? 'even' : 'odd',
+  }))
+  return createSvGridCore({
+    _features: tableFeatures({ columnGroupingFeature }),
+    _rowModels: grouping.length
+      ? { coreRowModel: createCoreRowModel(), groupedRowModel: createGroupedRowModel() }
+      : { coreRowModel: createCoreRowModel() },
+    columns: [{ field: 'name' }, { field: 'score' }, { field: 'bucket' }] as unknown as Array<
+      ColumnDef<ReturnType<typeof tableFeatures>, Data>
+    >,
+    data,
+    state: { grouping },
+    onGroupingChange: () => {},
+  })
+}
+
+const PUBLIC_KEYS = [
+  'id',
+  'index',
+  'original',
+  'depth',
+  'getCanExpand',
+  'getIsExpanded',
+  'toggleExpanded',
+  'getIsSelected',
+  'toggleSelected',
+  'getAllCells',
+  'getCellValueByColumnId',
+]
+
+describe('Row public shape', () => {
+  it('exposes exactly the documented keys, with no internals', () => {
+    const row = makeGrid(10).getRowModel().rows[0]!
+    expect(Object.keys(row).sort()).toEqual([...PUBLIC_KEYS].sort())
+  })
+
+  it('does not leak internals through for...in', () => {
+    const row = makeGrid(10).getRowModel().rows[0]!
+    const seen: string[] = []
+    for (const k in row) seen.push(k)
+    expect(seen.sort()).toEqual([...PUBLIC_KEYS].sort())
+  })
+
+  it('serialises to a constant size regardless of dataset size', () => {
+    // The regression this guards: `_ctx` reached `options.data`, so a single
+    // row carried the entire grid into JSON. Sizes must not grow with count.
+    const sizes = [10, 100, 1000].map(
+      (n) => JSON.stringify(makeGrid(n).getRowModel().rows[0]).length,
+    )
+    expect(new Set(sizes).size).toBe(1)
+    // And it must stay small - this is 4 scalar fields, not a grid.
+    expect(sizes[0]!).toBeLessThan(200)
+  })
+
+  it('serialises a whole row model linearly, not quadratically', () => {
+    const small = JSON.stringify(makeGrid(50).getRowModel().rows).length
+    const large = JSON.stringify(makeGrid(500).getRowModel().rows).length
+    // Ten times the rows should cost about ten times the characters. Quadratic
+    // growth would put this well past 20x.
+    expect(large).toBeLessThan(small * 20)
+  })
+
+  it('survives an object spread with its methods intact', () => {
+    // `createGroupedRowModel` does `{ ...row, depth }` for leaf rows; the clone
+    // has to keep working, which is why the internals are symbol-keyed rather
+    // than non-enumerable.
+    const row = makeGrid(10).getRowModel().rows[0]!
+    const clone = { ...row, depth: 3 }
+    expect(clone.depth).toBe(3)
+    expect(typeof clone.getCellValueByColumnId).toBe('function')
+    expect(clone.getCellValueByColumnId('name')).toBe(row.getCellValueByColumnId('name'))
+    expect(clone.getIsSelected()).toBe(false)
+    // The clone must not have grown a public surface either.
+    expect(Object.keys(clone).sort()).toEqual([...PUBLIC_KEYS].sort())
+  })
+
+  it('keeps grouped leaf rows working after the model clones them', () => {
+    const rows = makeGrid(10, ['bucket']).getRowModel().rows
+    const group = rows[0]!
+    expect(group.subRows?.length).toBeGreaterThan(0)
+    const leaf = group.subRows![0]!
+    expect(leaf.getCellValueByColumnId('name')).toMatch(/^row-\d+$/)
+    expect(leaf.depth).toBe(1)
+  })
+})

package/src/core.rowmodel-cache.test.ts

@@ -0,0 +1,121 @@
+/**
+ * Row-model memo invalidation.
+ *
+ * `getRowModel()` caches on the identity of the data, the columns, and a set of
+ * state slices. `rowSelection` was one of those slices, so ticking a single
+ * checkbox on a 100k-row grid re-ran the whole pipeline - re-filtering and
+ * re-sorting the entire dataset - to produce a row array that was, by
+ * construction, identical. Measured at 5 full re-runs for 5 toggles
+ * (`pnpm bench --case=selection-toggle`).
+ *
+ * Nothing in the pipeline reads selection. The two consumers, `getIsSelected`
+ * on data rows (core.ts) and on group rows, are closures that read
+ * `store.state` when called, so they see a selection change without the model
+ * being rebuilt. That is what the last test here pins: dropping the slice must
+ * not make a selected row report the wrong thing.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  createSvGridCore,
+  rowSelectionFeature,
+  tableFeatures,
+  type ColumnDef,
+  type RowModelFactory,
+} from './core'
+
+type Row = { id: number; name: string; score: number }
+
+const COLUMNS = [
+  { field: 'id', editorType: 'number' },
+  { field: 'name' },
+  { field: 'score', editorType: 'number' },
+]
+
+function makeRows(n: number): Row[] {
+  return Array.from({ length: n }, (_, i) => ({
+    id: i,
+    name: `name-${(i * 7919) % n}`,
+    score: (i * 31) % 1000,
+  }))
+}
+
+/** Wrap a stage so we can count how many times the pipeline actually ran it. */
+function counted<T extends Row>(factory: RowModelFactory<T>, tally: { n: number }): RowModelFactory<T> {
+  return (args) => {
+    tally.n++
+    return factory(args)
+  }
+}
+
+function makeGrid(rows: Row[], tallies: { filter: { n: number }; sort: { n: number } }) {
+  return createSvGridCore({
+    _features: tableFeatures({ rowSelectionFeature }),
+    _rowModels: {
+      coreRowModel: createCoreRowModel(),
+      filteredRowModel: counted(createFilteredRowModel<Row>(), tallies.filter),
+      sortedRowModel: counted(createSortedRowModel<Row>(), tallies.sort),
+    },
+    columns: COLUMNS as unknown as Array<ColumnDef<ReturnType<typeof tableFeatures>, Row>>,
+    data: rows,
+    state: {
+      columnFilters: [{ id: 'name', value: 'name-' }],
+      sorting: [{ id: 'score', desc: false }],
+      rowSelection: {},
+    },
+  })
+}
+
+describe('row-model cache: selection', () => {
+  it('does not re-run the pipeline when only the selection changes', () => {
+    const tallies = { filter: { n: 0 }, sort: { n: 0 } }
+    const grid = makeGrid(makeRows(500), tallies)
+
+    grid.getRowModel() // first build - expected to run
+    const after = { filter: tallies.filter.n, sort: tallies.sort.n }
+    expect(after.filter).toBe(1)
+    expect(after.sort).toBe(1)
+
+    for (let i = 0; i < 5; i++) {
+      grid.setRowSelection((prev) => ({ ...prev, [String(i)]: true }))
+      grid.getRowModel()
+    }
+
+    expect(tallies.filter.n - after.filter).toBe(0)
+    expect(tallies.sort.n - after.sort).toBe(0)
+  })
+
+  it('still re-runs when a slice the pipeline DOES read changes', () => {
+    const tallies = { filter: { n: 0 }, sort: { n: 0 } }
+    const grid = makeGrid(makeRows(200), tallies)
+    grid.getRowModel()
+    const before = tallies.sort.n
+
+    // No `setSorting` on the core - sorting is driven through the store (or a
+    // column's `toggleSorting`), which is also how <SvGrid> does it.
+    grid.store.setState((prev) => ({ ...prev, sorting: [{ id: 'score', desc: true }] }))
+    grid.getRowModel()
+
+    expect(tallies.sort.n).toBeGreaterThan(before)
+  })
+
+  it('reports selection correctly even though the model was not rebuilt', () => {
+    const tallies = { filter: { n: 0 }, sort: { n: 0 } }
+    const grid = makeGrid(makeRows(50), tallies)
+
+    const rows = grid.getRowModel().rows
+    const target = rows[3]!
+    expect(target.getIsSelected()).toBe(false)
+
+    grid.setRowSelection((prev) => ({ ...prev, [target.id]: true }))
+
+    // Same row object, no rebuild - the closure must observe the new state.
+    expect(grid.getRowModel().rows[3]).toBe(target)
+    expect(target.getIsSelected()).toBe(true)
+
+    grid.setRowSelection(() => ({}))
+    expect(target.getIsSelected()).toBe(false)
+  })
+})

package/src/core.sort.test.ts

@@ -0,0 +1,293 @@
+/**
+ * Equivalence + work-budget tests for `createSortedRowModel`.
+ *
+ * The sort path was rewritten to stop resolving the clause's column inside the
+ * comparator: it used to call `table.getAllColumns().find(...)` once per
+ * comparison per clause, which is ~1.5M array scans for a single-clause sort of
+ * 100k rows (measured - see `pnpm bench --case=sort-1col`).
+ *
+ * A faster sort that orders rows differently is a bug, not an optimisation, and
+ * ordering has a lot of edges: nulls, undefined, unparseable dates, mixed
+ * types, ties that must stay stable, and custom comparators. So rather than
+ * snapshot the new output, `referenceSort` below is a literal transcription of
+ * the ORIGINAL comparator, and every case asserts the two agree. If the rewrite
+ * ever diverges on any input, including the randomised ones, this fails.
+ */
+import { describe, expect, it } from 'vitest'
+// From './core' rather than './index': `createSvGridCore` is the runes-free
+// engine and is not on the main barrel (it ships via the `@svgrid/grid/core`
+// subpath). Driving it directly keeps this test about the row model rather than
+// about Svelte reactivity.
+import {
+  createCoreRowModel,
+  createSortedRowModel,
+  createSvGridCore,
+  sortFns,
+  tableFeatures,
+  type ColumnDef,
+  type SortingState,
+} from './core'
+
+type Row = Record<string, unknown>
+
+/**
+ * The original implementation, verbatim, as the oracle. Deliberately naive:
+ * this is the behaviour being preserved, not a second optimisation.
+ */
+function referenceSort(
+  rows: Row[],
+  columns: Array<{ field: string; editorType?: string }>,
+  sorting: SortingState,
+  fns: typeof sortFns = sortFns,
+): Row[] {
+  return [...rows].sort((a, b) => {
+    for (const clause of sorting) {
+      const column = columns.find((col) => col.field === clause.id)
+      if (!column) continue
+      const editorType = column.editorType
+      const comparator =
+        editorType === 'number'
+          ? fns.number
+          : editorType === 'date' || editorType === 'datetime'
+            ? fns.date
+            : fns.auto
+      const result = comparator(a[column.field], b[column.field])
+      if (result !== 0) return clause.desc ? -result : result
+    }
+    return 0
+  })
+}
+
+function actualSort(
+  rows: Row[],
+  columns: Array<{ field: string; editorType?: string }>,
+  sorting: SortingState,
+  fns: typeof sortFns = sortFns,
+): Row[] {
+  const grid = createSvGridCore({
+    _features: tableFeatures({}),
+    _rowModels: {
+      coreRowModel: createCoreRowModel(),
+      sortedRowModel: createSortedRowModel(fns),
+    },
+    columns: columns as Array<ColumnDef<ReturnType<typeof tableFeatures>, Row>>,
+    data: rows,
+    state: { sorting },
+  })
+  return grid.getRowModel().rows.map((r) => r.original as Row)
+}
+
+/** Compare by identity, so a stable-sort difference on ties is caught too. */
+function expectSameOrder(a: Row[], b: Row[]) {
+  expect(a.length).toBe(b.length)
+  for (let i = 0; i < a.length; i++) expect(a[i]).toBe(b[i])
+}
+
+const COLUMNS = [
+  { field: 'text' },
+  { field: 'num', editorType: 'number' },
+  { field: 'when', editorType: 'date' },
+  { field: 'tie' },
+]
+
+describe('createSortedRowModel - equivalence with the original comparator', () => {
+  const nasty: Row[] = [
+    { text: 'banana', num: 2, when: '2021-03-04', tie: 'x' },
+    { text: 'Apple', num: 10, when: '2020-01-01', tie: 'x' },
+    { text: 'apple', num: -3, when: '1999-12-31', tie: 'x' },
+    { text: null, num: null, when: null, tie: 'x' },
+    { text: undefined, num: undefined, when: undefined, tie: 'x' },
+    { text: '', num: 0, when: '', tie: 'x' },
+    { text: 'zebra', num: NaN, when: 'not a date', tie: 'x' },
+    { text: '10', num: '10', when: '2020-01-01T05:00:00Z', tie: 'x' },
+    { text: '9', num: '9', when: 1600000000000, tie: 'x' },
+    { text: 'é', num: 1e21, when: new Date('2022-06-01'), tie: 'x' },
+    { text: 'e', num: -0, when: '2022-06-01', tie: 'x' },
+    { text: true, num: true, when: true, tie: 'x' },
+  ]
+
+  for (const field of ['text', 'num', 'when', 'tie']) {
+    for (const desc of [false, true]) {
+      it(`matches on ${field}, desc=${desc}`, () => {
+        const sorting: SortingState = [{ id: field, desc }]
+        expectSameOrder(actualSort(nasty, COLUMNS, sorting), referenceSort(nasty, COLUMNS, sorting))
+      })
+    }
+  }
+
+  it('matches on a multi-clause sort where the first clause ties everywhere', () => {
+    // `tie` is identical on every row, so ordering is decided entirely by the
+    // later clauses - which is where an unstable rewrite would show up.
+    const sorting: SortingState = [
+      { id: 'tie', desc: false },
+      { id: 'num', desc: true },
+      { id: 'text', desc: false },
+    ]
+    expectSameOrder(actualSort(nasty, COLUMNS, sorting), referenceSort(nasty, COLUMNS, sorting))
+  })
+
+  it('preserves input order when every clause ties (stability)', () => {
+    const rows: Row[] = Array.from({ length: 50 }, (_, i) => ({ text: 'same', num: 1, when: null, tie: i }))
+    const sorted = actualSort(rows, COLUMNS, [{ id: 'text', desc: false }])
+    expect(sorted.map((r) => r.tie)).toEqual(rows.map((r) => r.tie))
+  })
+
+  it('ignores a clause naming a column that does not exist', () => {
+    const sorting: SortingState = [{ id: 'nope', desc: false }, { id: 'num', desc: false }]
+    expectSameOrder(actualSort(nasty, COLUMNS, sorting), referenceSort(nasty, COLUMNS, sorting))
+  })
+
+  it('returns rows untouched when there is no sorting', () => {
+    expect(actualSort(nasty, COLUMNS, [])).toEqual(nasty)
+  })
+
+  it('honours custom comparators passed in place of the built-ins', () => {
+    // Reverse-length ordering: nothing like the built-ins, so this only passes
+    // if the rewrite actually calls the supplied function.
+    const custom = {
+      ...sortFns,
+      auto: (a: unknown, b: unknown) => String(b).length - String(a).length,
+    }
+    const sorting: SortingState = [{ id: 'text', desc: false }]
+    expectSameOrder(
+      actualSort(nasty, COLUMNS, sorting, custom),
+      referenceSort(nasty, COLUMNS, sorting, custom),
+    )
+  })
+
+  // The text comparator has two paths. When a column's distinct values are few
+  // relative to its rows, the distinct values are collated once and rows are
+  // sorted by rank; otherwise rows are collated directly. Both must produce the
+  // same order, and the small `nasty` fixture above only ever exercises the
+  // second, so these force the first.
+  describe('low-cardinality text (the rank path)', () => {
+    const words = ['banana', 'Apple', 'apple', 'zebra', 'é', 'e', '', '10', '9', 'Ä', 'a']
+
+    function repeated(rowCount: number): Row[] {
+      return Array.from({ length: rowCount }, (_, i) => ({
+        text: words[i % words.length],
+        num: i,
+        when: null,
+        tie: 'x',
+      }))
+    }
+
+    for (const desc of [false, true]) {
+      it(`matches the direct comparator, desc=${desc}`, () => {
+        // 220 rows over 11 distinct values: comfortably past the ratio guard.
+        const rows = repeated(220)
+        const sorting: SortingState = [{ id: 'text', desc }]
+        expectSameOrder(actualSort(rows, COLUMNS, sorting), referenceSort(rows, COLUMNS, sorting))
+      })
+    }
+
+    it('keeps equal values in input order (rank ties are still stable)', () => {
+      const rows = repeated(220)
+      const sorted = actualSort(rows, COLUMNS, [{ id: 'text', desc: false }])
+      // Within one text value, `num` must still ascend - proof the shared rank
+      // did not disturb relative order.
+      const byText = new Map<unknown, number[]>()
+      for (const r of sorted) {
+        const list = byText.get(r.text) ?? []
+        list.push(r.num as number)
+        byText.set(r.text, list)
+      }
+      for (const [, nums] of byText) {
+        expect(nums).toEqual([...nums].sort((a, b) => a - b))
+      }
+    })
+
+    it('agrees with the direct path on the same data at both cardinalities', () => {
+      // 22 rows over 11 values takes the rank path (11 * 2 <= 22); 20 rows over
+      // the same 11 values does not (11 * 2 > 20). Same inputs, same order.
+      const sorting: SortingState = [{ id: 'text', desc: false }]
+      for (const count of [20, 22, 100, 121]) {
+        const rows = repeated(count)
+        expectSameOrder(actualSort(rows, COLUMNS, sorting), referenceSort(rows, COLUMNS, sorting))
+      }
+    })
+  })
+
+  it('matches across randomised datasets', () => {
+    // Seeded so a failure is reproducible from the message alone.
+    let seed = 42
+    const rand = () => {
+      seed = (seed * 1103515245 + 12345) & 0x7fffffff
+      return seed / 0x7fffffff
+    }
+    const pick = <T,>(xs: T[]) => xs[Math.floor(rand() * xs.length)]!
+    const texts = ['a', 'B', 'c', '', null, undefined, 'ä', '10', '9']
+    const nums = [0, -1, 5, null, undefined, NaN, '3', 1e9]
+    const dates = ['2020-01-01', '2021-05-05', null, undefined, 'junk', 1600000000000]
+
+    for (let trial = 0; trial < 25; trial++) {
+      const rows: Row[] = Array.from({ length: 60 }, () => ({
+        text: pick(texts), num: pick(nums), when: pick(dates), tie: pick(['p', 'q']),
+      }))
+      const sorting: SortingState = [
+        { id: pick(['text', 'num', 'when', 'tie']), desc: rand() > 0.5 },
+        { id: pick(['text', 'num', 'when']), desc: rand() > 0.5 },
+      ]
+      expectSameOrder(actualSort(rows, COLUMNS, sorting), referenceSort(rows, COLUMNS, sorting))
+    }
+  })
+})
+
+describe('createSortedRowModel - work budget', () => {
+  /** Count `getAllColumns` calls the way tools/bench does, but in-process. */
+  function countColumnLookups(rowCount: number, sorting: SortingState): number {
+    const rows: Row[] = Array.from({ length: rowCount }, (_, i) => ({
+      text: `t${(i * 7919) % rowCount}`,
+      num: (i * 31) % rowCount,
+      when: null,
+      tie: 'x',
+    }))
+    let calls = 0
+    const grid = createSvGridCore({
+      _features: tableFeatures({}),
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        sortedRowModel: (args) => {
+          const table = new Proxy(args.table, {
+            get(obj, prop, recv) {
+              const v = Reflect.get(obj, prop, recv)
+              if (prop === 'getAllColumns' && typeof v === 'function') {
+                return (...a: unknown[]) => {
+                  calls++
+                  return (v as (...x: unknown[]) => unknown).apply(obj, a)
+                }
+              }
+              return v
+            },
+          })
+          return createSortedRowModel()({ ...args, table })
+        },
+      },
+      columns: COLUMNS as Array<ColumnDef<ReturnType<typeof tableFeatures>, Row>>,
+      data: rows,
+      state: { sorting },
+    })
+    grid.getRowModel()
+    return calls
+  }
+
+  it('resolves each clause once instead of once per comparison', () => {
+    // The original made this proportional to n log n: 2,000 rows produced tens
+    // of thousands of lookups. A handful is the whole point of the rewrite, and
+    // the budget is what stops it regressing.
+    expect(countColumnLookups(2_000, [{ id: 'num', desc: false }])).toBeLessThanOrEqual(4)
+    expect(
+      countColumnLookups(2_000, [
+        { id: 'text', desc: false },
+        { id: 'num', desc: true },
+        { id: 'tie', desc: false },
+      ]),
+    ).toBeLessThanOrEqual(12)
+  })
+
+  it('does not grow with row count', () => {
+    const small = countColumnLookups(500, [{ id: 'num', desc: false }])
+    const large = countColumnLookups(20_000, [{ id: 'num', desc: false }])
+    expect(large).toBe(small)
+  })
+})