@svgrid/grid 3.0.5 → 3.0.7

package/src/svgrid.sticky-groups.svelte.test.ts

@@ -0,0 +1,145 @@
+/**
+ * Sticky group rows: the group a row belongs to stays under the header
+ * while its rows scroll past. Under virtualization the band renders a copy
+ * of each ancestor; without it the real rows stick. Driven through the
+ * `serverGroup` seam with plain data, so no row model is needed to say
+ * which rows are groups and how deep they sit.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: string; name: string; kind: 'group' | 'leaf'; level: number }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'id', header: 'Id', width: 80 },
+]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+/** A(0) > A1(1) > 20 leaves, A2(1) > 20 leaves, B(0) > B1(1) > 20 leaves: 65 rows. */
+function tree(): Row[] {
+  const out: Row[] = []
+  let n = 0
+  const leaves = (under: string) => {
+    for (let i = 0; i < 20; i += 1) out.push({ id: `${under}-${i}`, name: `leaf ${n++}`, kind: 'leaf', level: 2 })
+  }
+  out.push({ id: 'A', name: 'A', kind: 'group', level: 0 })
+  out.push({ id: 'A1', name: 'A1', kind: 'group', level: 1 })
+  leaves('A1')
+  out.push({ id: 'A2', name: 'A2', kind: 'group', level: 1 })
+  leaves('A2')
+  out.push({ id: 'B', name: 'B', kind: 'group', level: 0 })
+  out.push({ id: 'B1', name: 'B1', kind: 'group', level: 1 })
+  leaves('B1')
+  return out
+}
+
+function mountGrid(extra: Record<string, unknown>) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: tree(),
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => r.id,
+        rowHeight: 30,
+        containerHeight: 200,
+        stickyGroupRows: true,
+        serverGroup: {
+          isGroup: (r: Row) => r.kind === 'group',
+          level: (r: Row) => r.level,
+          expanded: () => true,
+          onToggle: () => {},
+        },
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, destroy: () => { unmount(app); target.remove() } })
+        },
+        ...extra,
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+async function scrollTo(target: HTMLElement, top: number) {
+  const container = target.querySelector('.sv-grid-container') as HTMLElement
+  container.scrollTop = top
+  container.dispatchEvent(new Event('scroll'))
+  // The virtualizer syncs to the scroll position on the next animation frame.
+  await new Promise<void>((r) => requestAnimationFrame(() => r()))
+  await tick()
+  await tick()
+}
+
+const stickyNames = (target: HTMLElement) =>
+  [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')].map((tr) => tr.textContent!.replace(/\s+/g, ' ').trim().split(' ')[0])
+
+describe('stickyGroupRows under virtualization', () => {
+  it('renders copies of the ancestors of the first row under the header, deepest last', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: true })
+    try {
+      await tick()
+      // Row 0 is A itself: nothing to hold.
+      expect(stickyNames(target)).toEqual([])
+      // Row 10 is a leaf under A1: A, then A1.
+      await scrollTo(target, 300)
+      expect(stickyNames(target)).toEqual(['A', 'A1'])
+      const band = [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')]
+      expect(band[0]!.getAttribute('aria-hidden')).toBe('true')
+      expect(band[1]!.classList.contains('sv-grid-row-sticky-group-last')).toBe(true)
+      // The second sits a row under the first.
+      expect(parseInt(band[1]!.style.top, 10) - parseInt(band[0]!.style.top, 10)).toBe(30)
+      // A copy carries no cell ids, so the real row's id stays unique.
+      expect(band[0]!.querySelector('[id]')).toBeNull()
+      // Row 30 is a leaf under A2.
+      await scrollTo(target, 900)
+      expect(stickyNames(target)).toEqual(['A', 'A2'])
+      // Row 50 is a leaf under B1.
+      await scrollTo(target, 1500)
+      expect(stickyNames(target)).toEqual(['B', 'B1'])
+      // Back to the top: the band is gone.
+      await scrollTo(target, 0)
+      expect(stickyNames(target)).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('is off unless asked for', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: true, stickyGroupRows: false })
+    try {
+      await scrollTo(target, 300)
+      expect(stickyNames(target)).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('stickyGroupRows without virtualization', () => {
+  it('makes the real ancestor rows sticky instead of copying them', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: false })
+    try {
+      await scrollTo(target, 300)
+      const sticky = [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')]
+      expect(sticky.map((tr) => tr.textContent!.trim().split(/\s+/)[0])).toEqual(['A', 'A1'])
+      // They are the rows themselves: cells keep their row index.
+      expect(sticky[0]!.querySelector('[data-svgrid-row]')?.getAttribute('data-svgrid-row')).toBe('0')
+      expect(sticky[1]!.querySelector('[data-svgrid-row]')?.getAttribute('data-svgrid-row')).toBe('1')
+      expect(sticky[0]!.getAttribute('aria-hidden')).toBeNull()
+      // Every row renders exactly once.
+      const rows = [...target.querySelectorAll('tbody.sv-grid-body tr.sv-grid-row')]
+      expect(rows).toHaveLength(65)
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/svgrid.upsell-license.test.ts

@@ -95,7 +95,7 @@ describe('Enterprise upsell notes', () => {
         })
 
         const note = target.querySelector(LICENSE)!
-        // Soft-gated: the feature runs without a key and the grid watermarks.
+        // The feature runs without a key and the grid watermarks.
         // The wording must not imply it is inert, because it is not.
         expect(note.textContent, name).toContain('license key')
         expect(note.textContent, name).toContain('watermark')

package/src/test-setup.ts

@@ -59,4 +59,16 @@ if (typeof Element !== 'undefined' && !Element.prototype.animate) {
   }
 }
 
+// jsdom has no canvas: getContext() returns null and prints "Not implemented:
+// HTMLCanvasElement's getContext() method" through its virtual console on
+// every call, hundreds of lines per run that bury the real warnings. The
+// callers (the sheet's text measuring, the picture rasteriser) already treat a
+// null context as "no canvas", so answering null quietly changes nothing a
+// test can see; a test that needs a context still spies on the prototype.
+if (typeof HTMLCanvasElement !== 'undefined') {
+  ;(HTMLCanvasElement.prototype as any).getContext = function () {
+    return null
+  }
+}
+
 export {}

package/src/transaction.test.ts

@@ -97,4 +97,62 @@ describe('api.applyTransaction', () => {
       destroy()
     }
   })
+  it('removes a row that the same transaction also updates, by id or by reference', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      const byId = api.applyTransaction({ update: [{ id: 'a', symbol: 'AAPL', price: 1 }], remove: ['a'] })
+      await tick()
+      expect(byId).toEqual({ added: 0, updated: 1, removed: 1 })
+      expect(api.getData().map((o) => o.id)).toEqual(['b', 'c'])
+      const ref = api.getData()[0]! // 'b'
+      const byRef = api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 2 }], remove: [ref] })
+      await tick()
+      expect(byRef).toEqual({ added: 0, updated: 1, removed: 1 })
+      expect(api.getData().map((o) => o.id)).toEqual(['c'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('an update batch looks its rows up by id instead of walking the array', async () => {
+    // The id -> index map is built once per data array and carried across
+    // update-only transactions, so the second tick calls getRowId only for
+    // the rows in the batch. Before, every transaction called it for every
+    // row - 100k calls per tick on a 100k-row feed.
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let calls = 0
+    let captured: SvGridApi<typeof features, Order> | null = null
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: seed,
+        columns,
+        features,
+        getRowId: (o: Order) => { calls++; return o.id },
+        _rowModels: { coreRowModel: createCoreRowModel(), filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(sortFns) },
+        containerHeight: 400,
+        virtualization: false,
+        onApiReady(api: SvGridApi<typeof features, Order>) { captured = api },
+      } as any,
+    })
+    try {
+      await tick()
+      const api = captured!
+      api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 201 }] })
+      await tick()
+      const afterFirst = calls
+      api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 202 }] })
+      await tick()
+      // One call: the id of the update itself. The row model's own getRowId
+      // calls for the replaced row are not part of this count because the
+      // map answered the lookup.
+      expect(calls - afterFirst).toBeLessThanOrEqual(2)
+      expect(api.getData()[1]!.price).toBe(202)
+    } finally {
+      unmount(app)
+      target.remove()
+    }
+  })
 })
+

package/src/validate.ts

@@ -77,7 +77,13 @@ export function validateGridConfig<
   // (a key absent from row 0 but present later) does not trip it. A row
   // model shows placeholder rows before its first block lands; those carry
   // no data keys at all and say nothing about the columns.
-  const sample = (input.data ?? []).filter((row) => !rowPlaceholderState(row)).slice(0, FIELD_SAMPLE_ROWS)
+  // Stops at the sample size: this runs on every data change, and a filter
+  // over all the rows first was O(n) per tick on a live feed.
+  const sample: TData[] = []
+  for (const row of input.data ?? []) {
+    if (sample.length >= FIELD_SAMPLE_ROWS) break
+    if (!rowPlaceholderState(row)) sample.push(row)
+  }
   // Under server-side grouping the first rows are group rows, which carry
   // a key and aggregates and none of the leaf fields; nothing to judge by.
   if (sample.length && !input.serverGroup) {

package/src/virtualization/svelte-virtualizer.svelte.ts

@@ -14,6 +14,7 @@ export function createSvelteVirtualizer(options: VirtualizerOptions) {
       return version
     },
     setOptions: virtualizer.setOptions,
+    measure: virtualizer.measure,
     setScrollOffset: virtualizer.setScrollOffset,
     setViewportHeight: virtualizer.setViewportHeight,
     scrollToIndex: virtualizer.scrollToIndex,

package/src/virtualization/virtualizer.test.ts

@@ -44,4 +44,48 @@ describe('virtualizer', () => {
     v.scrollToIndex(9_999)
     expect(v.getState().scrollOffset).toBe(2_700)
   })
+
+  it('re-measures a stable size function passed back through setOptions (#102)', () => {
+    const heights = new Map<number, number>()
+    const estimateSize = (i: number) => heights.get(i) ?? 20
+    const v = createVirtualizer({ count: 10, estimateSize, viewportHeight: 100 })
+    expect(v.getTotalSize()).toBe(200)
+
+    heights.set(0, 120)
+    v.setOptions({ estimateSize })
+    expect(v.getSizeForIndex(0)).toBe(120)
+    expect(v.getTotalSize()).toBe(300) // 9 x 20 + 120
+    expect(v.getOffsetForIndex(5)).toBe(200) // 120 + 4 x 20
+  })
+
+  it('measure() re-reads sizes and notifies subscribers', () => {
+    const heights = new Map<number, number>()
+    const v = createVirtualizer({
+      count: 10,
+      estimateSize: (i: number) => heights.get(i) ?? 20,
+      viewportHeight: 100,
+    })
+    let notified = 0
+    v.subscribe(() => (notified += 1))
+
+    heights.set(3, 50)
+    v.measure()
+    expect(v.getTotalSize()).toBe(230)
+    expect(v.getOffsetForIndex(4)).toBe(110)
+    expect(notified).toBe(1)
+  })
+
+  it('keeps the offset cache across scrolls', () => {
+    let calls = 0
+    const v = createVirtualizer({
+      count: 1000,
+      estimateSize: () => (calls++, 20),
+      viewportHeight: 100,
+    })
+    const afterBuild = calls
+    v.setScrollOffset(500)
+    v.setScrollOffset(900)
+    v.setViewportHeight(200)
+    expect(calls).toBe(afterBuild)
+  })
 })

package/src/virtualization/virtualizer.ts

@@ -261,8 +261,20 @@ export function createVirtualizer(initial: VirtualizerOptions) {
   return {
     setOptions(next: Partial<VirtualizerOptions>) {
       const merged = { ...options, ...next }
-      if (sameOptions(options, merged)) return
+      // Passing a size function means "sizes may have changed", even when it is
+      // the same reference: the documented variable-height pattern is a stable
+      // function reading a mutable map, and keying the cache on identity alone
+      // left the offsets and total stale after a row grew (#102).
+      const remeasure = typeof next.estimateSize === 'function'
+      if (!remeasure && sameOptions(options, merged)) return
       options = merged
+      if (remeasure) offsetCache = null
+      recalc()
+    },
+    /** Drop the cached offsets and re-read every size from `estimateSize`.
+     *  Call after the sizes a stable size function reports have changed. */
+    measure() {
+      offsetCache = null
       recalc()
     },
     setScrollOffset(scrollOffset: number) {