@svgrid/grid 3.0.4 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/README.md +3 -3
  2. package/dist/SvGrid.controller.svelte.d.ts +12 -2
  3. package/dist/SvGrid.controller.svelte.js +191 -8
  4. package/dist/SvGrid.css +73 -0
  5. package/dist/SvGrid.svelte +82 -3
  6. package/dist/SvGrid.types.d.ts +105 -3
  7. package/dist/build-api.js +11 -6
  8. package/dist/cdn/{GridMenus-7kbpnnBW.js → GridMenus-CLI93jke.js} +26 -26
  9. package/dist/cdn/{GridMenus-BL7ZgQvU.js → GridMenus-CwooL3QA.js} +26 -26
  10. package/dist/cdn/server-block-cache-CGoWz-87.js +237 -0
  11. package/dist/cdn/{src-BKhZ6eXd.js → src-B6HXdfHY.js} +4099 -4140
  12. package/dist/cdn/{src-V1uu8iE9.js → src-C6Iowdvs.js} +4052 -4093
  13. package/dist/cdn/svgrid.js +27 -26
  14. package/dist/cdn/svgrid.svelte-external.js +27 -26
  15. package/dist/cdn/validate-CchXzyrX.js +76 -0
  16. package/dist/core.js +36 -13
  17. package/dist/editing.js +10 -0
  18. package/dist/grid-icons.d.ts +2 -2
  19. package/dist/grid-icons.js +2 -2
  20. package/dist/grid-messages.d.ts +2 -0
  21. package/dist/grid-messages.js +2 -0
  22. package/dist/index.d.ts +3 -4
  23. package/dist/index.js +2 -3
  24. package/dist/row-model.d.ts +133 -0
  25. package/dist/row-model.js +16 -0
  26. package/dist/selection.d.ts +2 -1
  27. package/dist/selection.js +30 -2
  28. package/dist/server-block-cache.d.ts +214 -0
  29. package/dist/server-block-cache.js +531 -0
  30. package/dist/server-data-source.d.ts +240 -6
  31. package/dist/server-data-source.js +220 -20
  32. package/dist/server.d.ts +13 -0
  33. package/dist/server.js +13 -0
  34. package/dist/validate.d.ts +2 -0
  35. package/dist/validate.js +8 -3
  36. package/package.json +6 -1
  37. package/src/SvGrid.controller.svelte.ts +190 -8
  38. package/src/SvGrid.css +73 -0
  39. package/src/SvGrid.svelte +82 -3
  40. package/src/SvGrid.types.ts +105 -3
  41. package/src/build-api.ts +11 -4
  42. package/src/core.rowmodel-cache.test.ts +51 -0
  43. package/src/core.ts +33 -12
  44. package/src/editing.ts +8 -0
  45. package/src/grid-icons.ts +2 -2
  46. package/src/grid-messages.ts +5 -0
  47. package/src/icon-seam.test.ts +2 -4
  48. package/src/index.ts +19 -10
  49. package/src/row-model.ts +146 -0
  50. package/src/selection.test.ts +3 -0
  51. package/src/selection.ts +32 -2
  52. package/src/server-block-cache.test.ts +645 -0
  53. package/src/server-block-cache.ts +677 -0
  54. package/src/server-data-source.infinite.test.ts +343 -0
  55. package/src/server-data-source.ts +450 -27
  56. package/src/server.ts +47 -0
  57. package/src/svgrid.row-model-prop.svelte.test.ts +352 -0
  58. package/src/svgrid.row-model-seam.svelte.test.ts +289 -0
  59. package/src/validate.test.ts +10 -0
  60. package/src/validate.ts +10 -3
  61. package/dist/SvGroupCell.svelte +0 -141
  62. package/dist/SvGroupCell.svelte.d.ts +0 -49
  63. package/dist/SvRowGroupPanel.svelte +0 -186
  64. package/dist/SvRowGroupPanel.svelte.d.ts +0 -25
  65. package/dist/cdn/validate-_CDJzgIo.js +0 -75
  66. package/dist/server-group-model.d.ts +0 -98
  67. package/dist/server-group-model.js +0 -263
  68. package/src/SvGroupCell.svelte +0 -141
  69. package/src/SvRowGroupPanel.svelte +0 -186
  70. package/src/server-group-model.test.ts +0 -294
  71. package/src/server-group-model.ts +0 -370
@@ -0,0 +1,677 @@
1
+ /**
2
+ * Block cache for server-backed rows - the engine behind infinite scrolling.
3
+ *
4
+ * Paging asks for "page 3". Infinite scrolling asks a different question: the
5
+ * user is looking at rows 4,000 to 4,020 of a table with a million rows, so
6
+ * fetch the block that covers them, keep a bounded number of recently-seen
7
+ * blocks, and render something sensible for every row nobody has fetched yet.
8
+ * That is all this module does, in plain TypeScript with no Svelte and no DOM.
9
+ *
10
+ * The shape of the problem (and most of the vocabulary) is the same one every
11
+ * grid with a server row model solves, so the options here are deliberately
12
+ * recognisable: `blockSize`, `maxBlocksInCache`, `maxConcurrentRequests`,
13
+ * `blockLoadDebounceMs`, `initialRowCount`, `overflowRows`.
14
+ *
15
+ * Three things it takes seriously:
16
+ *
17
+ * - **Unloaded rows still have to render.** `rows()` always returns a dense
18
+ * array, with a shared sentinel object in every slot that has no data. The
19
+ * grid recognises those (see {@link rowPlaceholderState}) and draws a
20
+ * skeleton or a retry affordance instead of an empty row, so the scrollbar
21
+ * never lies and scrolling never leaves a hole.
22
+ * - **The row count may be unknown.** A backend that cannot cheaply count
23
+ * says so (omit `rowCount`, or send `-1`) and the list grows by a block at
24
+ * a time until a short block proves where the end is.
25
+ * - **Requests are not free.** In-flight blocks are deduplicated, at most
26
+ * `maxConcurrentRequests` are open at once, a fast scroll debounces rather
27
+ * than firing a request per frame, and blocks abandoned by eviction or
28
+ * purge are aborted.
29
+ *
30
+ * Enterprise's server row model runs one of these per group level; the free
31
+ * flat controller runs exactly one.
32
+ */
33
+
34
+ /**
35
+ * The mark that says "this row is not data yet".
36
+ *
37
+ * A symbol, for two reasons. It cannot collide with a field in anyone's row
38
+ * data, which a string key like `__svPlaceholder` eventually would. And
39
+ * `Symbol.for` puts it in the global registry, so a placeholder still reads as
40
+ * one after it has crossed a module boundary - two copies of this file loaded
41
+ * through different specifiers would otherwise mint different symbols.
42
+ */
43
+ const PLACEHOLDER = Symbol.for('svgrid.rowPlaceholder')
44
+
45
+ /** Rows the cache has not loaded. One shared object per state, not per row. */
46
+ const LOADING_ROW = Object.freeze({ [PLACEHOLDER]: 'loading' as const })
47
+ const FAILED_ROW = Object.freeze({ [PLACEHOLDER]: 'failed' as const })
48
+
49
+ /**
50
+ * Why a row is not real data, or `null` when it is.
51
+ *
52
+ * Deliberately NOT an identity check. The sentinels are shared objects, so
53
+ * `row === LOADING_ROW` looks like the obvious test - but rows routinely
54
+ * arrive here through something that wrapped them. Svelte is the everyday
55
+ * case: assigning the controller state into `$state` makes the row array
56
+ * deeply reactive, and every row read back out is a proxy of the original.
57
+ * Identity fails, every placeholder reads as real data, and the grid renders
58
+ * a screen of blank rows instead of skeletons. Reading the mark works through
59
+ * any wrapper that forwards property access, which is all of them.
60
+ */
61
+ export function rowPlaceholderState(row: unknown): 'loading' | 'failed' | null {
62
+ if (row == null || typeof row !== 'object') return null
63
+ const mark = (row as Record<symbol, unknown>)[PLACEHOLDER]
64
+ return mark === 'loading' || mark === 'failed' ? mark : null
65
+ }
66
+
67
+ /**
68
+ * Mint a frozen placeholder the grid will recognise, carrying whatever
69
+ * other fields the caller wants on it. The row model uses this to give its
70
+ * placeholders a `kind`, so code reading display rows and code reading grid
71
+ * rows agree on what they are looking at.
72
+ */
73
+ export function createRowPlaceholder<T extends object>(
74
+ state: 'loading' | 'failed',
75
+ fields: T,
76
+ ): Readonly<T & { readonly [PLACEHOLDER]: 'loading' | 'failed' }> {
77
+ return Object.freeze({ ...fields, [PLACEHOLDER]: state })
78
+ }
79
+
80
+ /** What a block fetch has to answer with. `rowCount` is optional: see {@link BlockCacheOptions}. */
81
+ export type BlockFetchResult<TData> = {
82
+ rows: ReadonlyArray<TData>
83
+ /**
84
+ * Total rows after filtering. Omit it (or send `-1`) when the backend cannot
85
+ * count cheaply - the cache then discovers the end from the first short
86
+ * block, and `lastRowKnown()` stays false until it does.
87
+ */
88
+ rowCount?: number
89
+ }
90
+
91
+ /** What a block cache is built from: block size, caps, debounce and the fetch. */
92
+ export type BlockCacheOptions<TData> = {
93
+ /**
94
+ * Rows per request. Bigger blocks mean fewer round trips and more wasted
95
+ * rows when the user scrolls past; 100 is the usual compromise.
96
+ */
97
+ blockSize?: number
98
+ /**
99
+ * Keep at most this many loaded blocks. Blocks outside the viewport are
100
+ * evicted least-recently-seen first, and scrolling back re-fetches them.
101
+ * Unlimited by default, which is right until the dataset is big enough that
102
+ * holding every visited block matters.
103
+ */
104
+ maxBlocksInCache?: number
105
+ /** Requests open at once. Default 2. */
106
+ maxConcurrentRequests?: number
107
+ /**
108
+ * Wait this long after the viewport settles before fetching. Non-zero values
109
+ * stop a drag of the scrollbar from requesting every block it flies past.
110
+ */
111
+ blockLoadDebounceMs?: number
112
+ /**
113
+ * Rows to claim before anything is loaded, so the grid has a scrollbar (and
114
+ * `scrollToRow` has somewhere to land) on the first paint. Default 1.
115
+ */
116
+ initialRowCount?: number
117
+ /**
118
+ * While the total is unknown, how many unloaded rows to keep past the last
119
+ * loaded one. Scrolling into them is what asks for the next block. Default 1.
120
+ */
121
+ overflowRows?: number
122
+ /** Fetch one block. Reject, or throw, to mark it failed. */
123
+ fetch: (
124
+ startRow: number,
125
+ endRow: number,
126
+ signal: AbortSignal,
127
+ ) => Promise<BlockFetchResult<TData>>
128
+ /** Called after any change to the rows, the count, or a block's state. */
129
+ onChange: (cache: BlockCacheState) => void
130
+ /**
131
+ * How to coalesce `onChange`. Defaults to a microtask, so a burst of block
132
+ * arrivals rebuilds the row array once. Pass `(fn) => fn()` in tests to make
133
+ * every change synchronous.
134
+ */
135
+ schedule?: (flush: () => void) => void
136
+ }
137
+
138
+ /** One block's place in the world, for diagnostics and for tests. */
139
+ export type BlockState = {
140
+ blockIndex: number
141
+ startRow: number
142
+ endRow: number
143
+ status: 'loading' | 'loaded' | 'failed'
144
+ /** Monotonic counter of when the viewport last covered this block. */
145
+ lastTouched: number
146
+ }
147
+
148
+ /** One block as `getCacheState()` reports it. */
149
+ export type BlockCacheState = {
150
+ /** Rows after filtering, or `null` while the backend has not said. */
151
+ rowCount: number | null
152
+ /** False while the end of the data is still being discovered. */
153
+ lastRowKnown: boolean
154
+ /** True while at least one block is in flight. */
155
+ loading: boolean
156
+ /** Blocks whose fetch rejected. Empty unless something went wrong. */
157
+ failedBlocks: number[]
158
+ }
159
+
160
+ /**
161
+ * A block cache: rows arrive in blocks as the viewport reaches them,
162
+ * placeholders stand in until then, and blocks far from the viewport are
163
+ * evicted past the cap.
164
+ */
165
+ export type BlockCache<TData> = {
166
+ /**
167
+ * Tell the cache which rows are on screen. Fetches what is missing (after
168
+ * `blockLoadDebounceMs`) and marks those blocks as recently seen so eviction
169
+ * spares them. Safe to call on every scroll frame.
170
+ */
171
+ setViewport(startIndex: number, endIndex: number): void
172
+ /** The dense row array to hand the grid. Placeholders fill unloaded slots. */
173
+ rows(): ReadonlyArray<TData>
174
+ /** One row, without building the array. Returns a placeholder when unloaded. */
175
+ getRow(index: number): TData | typeof LOADING_ROW | typeof FAILED_ROW
176
+ rowCount(): number | null
177
+ lastRowKnown(): boolean
178
+ /** Re-fetch the blocks that failed. */
179
+ retryFailed(): void
180
+ /**
181
+ * Re-fetch the loaded blocks in place, keeping the row count and scroll
182
+ * position. What you want after a mutation lands on the server.
183
+ */
184
+ refresh(): void
185
+ /** Drop everything and start over from the current viewport. */
186
+ purge(): void
187
+ /** Override the total, e.g. from a count endpoint that answered separately. */
188
+ setRowCount(count: number | null, known?: boolean): void
189
+ /**
190
+ * Write rows straight into the cache from `startRow`, as if a fetch had
191
+ * returned them, bypassing the datasource, the debounce and the
192
+ * concurrency cap. `startRow` must sit on a block boundary. An explicit
193
+ * `rowCount` settles the total; without one a short final slice does.
194
+ */
195
+ applyRows(startRow: number, rows: ReadonlyArray<TData>, rowCount?: number): void
196
+ /** Replace one loaded row. No-op when its block is not loaded. */
197
+ patch(index: number, row: TData): boolean
198
+ /**
199
+ * The index of the first LOADED row matching `predicate`, or -1. Rows
200
+ * that are not loaded are not visited - a transaction addressed by id
201
+ * can only touch what is in the cache.
202
+ */
203
+ findIndex(predicate: (row: TData, index: number) => boolean): number
204
+ /**
205
+ * Insert rows at an index and grow the count. Works within whichever
206
+ * run of loaded blocks contains `index`; loaded blocks AFTER that run
207
+ * are dropped, because their rows have shifted and will be re-fetched at
208
+ * their new offsets. An index in an unloaded region grows the count
209
+ * only (the rows exist; they arrive when scrolled to). Returns whether
210
+ * the rows were placed in the cache.
211
+ */
212
+ insert(index: number, rows: ReadonlyArray<TData>): boolean
213
+ /**
214
+ * Remove `count` rows at an index and shrink the count, with the same
215
+ * run semantics as `insert`. Returns how many rows were actually
216
+ * removed from the cache.
217
+ */
218
+ remove(index: number, count?: number): number
219
+ /** Every block the cache is holding, for `debug` output and tests. */
220
+ getCacheState(): BlockState[]
221
+ /** Abort what is in flight and stop emitting. Call on unmount. */
222
+ dispose(): void
223
+ }
224
+
225
+ type Block<TData> = {
226
+ status: 'loading' | 'loaded' | 'failed'
227
+ rows: TData[]
228
+ lastTouched: number
229
+ controller: AbortController | null
230
+ }
231
+
232
+ const defaultSchedule = (flush: () => void): void => {
233
+ void Promise.resolve().then(flush)
234
+ }
235
+
236
+ /**
237
+ * Build a block cache over a `fetch(startRow, endRow, signal)`. The free
238
+ * infinite row model and the Enterprise server-side row model both run on
239
+ * it, one per level.
240
+ */
241
+ export function createBlockCache<TData>(options: BlockCacheOptions<TData>): BlockCache<TData> {
242
+ const blockSize = Math.max(1, options.blockSize ?? 100)
243
+ const maxBlocks = options.maxBlocksInCache ?? Infinity
244
+ const maxConcurrent = Math.max(1, options.maxConcurrentRequests ?? 2)
245
+ const debounceMs = Math.max(0, options.blockLoadDebounceMs ?? 0)
246
+ const initialRowCount = Math.max(0, options.initialRowCount ?? 1)
247
+ const overflowRows = Math.max(0, options.overflowRows ?? 1)
248
+ const schedule = options.schedule ?? defaultSchedule
249
+
250
+ const blocks = new Map<number, Block<TData>>()
251
+ /** Block indices waiting for a slot, in the order the viewport asked for them. */
252
+ const queue: number[] = []
253
+ let inFlight = 0
254
+ let touchClock = 0
255
+ let count: number | null = null
256
+ let countKnown = false
257
+ let disposed = false
258
+
259
+ let viewStart = 0
260
+ let viewEnd = 0
261
+ let debounceTimer: ReturnType<typeof setTimeout> | null = null
262
+
263
+ let emitScheduled = false
264
+ let rowsCache: TData[] | null = null
265
+
266
+ const blockOf = (rowIndex: number): number => Math.floor(rowIndex / blockSize)
267
+ const startOf = (blockIndex: number): number => blockIndex * blockSize
268
+
269
+ /**
270
+ * How many rows to claim we have.
271
+ *
272
+ * With a known count that is simply the count. Without one it is the last row
273
+ * we have touched plus `overflowRows`, so there is always somewhere to scroll
274
+ * that will ask for the next block - this is what makes the list grow as you
275
+ * go rather than ending at the first unloaded row.
276
+ */
277
+ function currentLength(): number {
278
+ if (countKnown && count != null) return count
279
+ let highestEnd = 0
280
+ let anySettled = false
281
+ for (const b of blocks.values()) if (b.status !== 'loading') anySettled = true
282
+ for (const [index, block] of blocks) {
283
+ // A block in flight extends the list only once some block has settled.
284
+ // Before that the list is `initialRowCount` long: the few skeleton
285
+ // rows a level shows while it waits, not a hundred of them. The first
286
+ // block failing says nothing about how long the list is either, so it
287
+ // keeps those few rows (its Retry sits on them); a failed block further
288
+ // in was scrolled to, so its slots stay and the scrollbar holds still.
289
+ const end = block.status === 'loaded'
290
+ ? startOf(index) + block.rows.length
291
+ : block.status === 'failed'
292
+ ? index === 0 ? 0 : startOf(index) + blockSize
293
+ : anySettled
294
+ ? startOf(index) + blockSize
295
+ : 0
296
+ if (end > highestEnd) highestEnd = end
297
+ }
298
+ if (!anySettled) return initialRowCount
299
+ return Math.max(initialRowCount, highestEnd + overflowRows)
300
+ }
301
+
302
+ function state(): BlockCacheState {
303
+ const failed: number[] = []
304
+ for (const [index, block] of blocks) if (block.status === 'failed') failed.push(index)
305
+ return {
306
+ rowCount: countKnown ? count : null,
307
+ lastRowKnown: countKnown,
308
+ loading: inFlight > 0,
309
+ failedBlocks: failed.sort((a, b) => a - b),
310
+ }
311
+ }
312
+
313
+ /**
314
+ * Something changed: forget the row array NOW, so a synchronous read after
315
+ * a mutation sees the new state, and notify on the next tick, so a burst of
316
+ * mutations notifies once. Every mutating path ends here.
317
+ */
318
+ function emit(): void {
319
+ rowsCache = null // rebuilt lazily, on the next read
320
+ if (disposed || emitScheduled) return
321
+ emitScheduled = true
322
+ schedule(() => {
323
+ emitScheduled = false
324
+ if (disposed) return
325
+ options.onChange(state())
326
+ })
327
+ }
328
+
329
+ function ensureBlock(blockIndex: number): void {
330
+ if (disposed) return
331
+ const existing = blocks.get(blockIndex)
332
+ // Loading or loaded blocks are left alone; a failed one only retries when
333
+ // asked, so a broken backend is not hammered once per scroll frame.
334
+ if (existing) return
335
+ if (queue.includes(blockIndex)) return
336
+ queue.push(blockIndex)
337
+ pump()
338
+ }
339
+
340
+ function pump(): void {
341
+ while (!disposed && inFlight < maxConcurrent && queue.length > 0) {
342
+ const blockIndex = queue.shift()!
343
+ if (blocks.has(blockIndex)) continue
344
+ void load(blockIndex)
345
+ }
346
+ }
347
+
348
+ async function load(blockIndex: number): Promise<void> {
349
+ const controller = new AbortController()
350
+ const block: Block<TData> = {
351
+ status: 'loading',
352
+ rows: [],
353
+ lastTouched: (touchClock += 1),
354
+ controller,
355
+ }
356
+ blocks.set(blockIndex, block)
357
+ inFlight += 1
358
+ emit()
359
+
360
+ const startRow = startOf(blockIndex)
361
+ const endRow = startRow + blockSize
362
+ try {
363
+ const result = await options.fetch(startRow, endRow, controller.signal)
364
+ if (disposed || controller.signal.aborted || blocks.get(blockIndex) !== block) return
365
+ block.rows = [...result.rows]
366
+ block.status = 'loaded'
367
+ block.controller = null
368
+ applyCountFrom(blockIndex, block.rows.length, result.rowCount)
369
+ evictIfNeeded()
370
+ } catch {
371
+ if (disposed || controller.signal.aborted || blocks.get(blockIndex) !== block) return
372
+ block.status = 'failed'
373
+ block.rows = []
374
+ block.controller = null
375
+ } finally {
376
+ if (!disposed && !controller.signal.aborted) {
377
+ inFlight -= 1
378
+ emit()
379
+ pump()
380
+ }
381
+ }
382
+ }
383
+
384
+ /**
385
+ * Learn the total from a block that just landed.
386
+ *
387
+ * An explicit non-negative `rowCount` settles it. Otherwise a SHORT block is
388
+ * the proof that we hit the end: fewer rows came back than were asked for, so
389
+ * the data stops where they stop.
390
+ */
391
+ function applyCountFrom(blockIndex: number, received: number, reported: number | undefined): void {
392
+ if (typeof reported === 'number' && reported >= 0) {
393
+ count = reported
394
+ countKnown = true
395
+ return
396
+ }
397
+ if (received < blockSize) {
398
+ count = startOf(blockIndex) + received
399
+ countKnown = true
400
+ }
401
+ }
402
+
403
+ /**
404
+ * Evict loaded blocks over the limit, least-recently-seen first, never one
405
+ * the viewport is currently on - dropping a visible block would swap real
406
+ * rows for skeletons under the user's eyes and immediately re-fetch them.
407
+ */
408
+ function evictIfNeeded(): void {
409
+ if (!Number.isFinite(maxBlocks)) return
410
+ const firstVisible = blockOf(viewStart)
411
+ const lastVisible = blockOf(Math.max(viewStart, viewEnd))
412
+ const evictable = [...blocks.entries()]
413
+ .filter(([index, b]) => b.status === 'loaded' && (index < firstVisible || index > lastVisible))
414
+ .sort((a, b) => a[1].lastTouched - b[1].lastTouched)
415
+
416
+ let loaded = 0
417
+ for (const b of blocks.values()) if (b.status === 'loaded') loaded += 1
418
+
419
+ for (const [index] of evictable) {
420
+ if (loaded <= maxBlocks) break
421
+ blocks.delete(index)
422
+ loaded -= 1
423
+ }
424
+ }
425
+
426
+ function fetchViewport(): void {
427
+ if (disposed) return
428
+ const first = blockOf(viewStart)
429
+ const last = blockOf(Math.max(viewStart, viewEnd))
430
+ for (let i = first; i <= last; i += 1) {
431
+ const block = blocks.get(i)
432
+ if (block) block.lastTouched = touchClock += 1
433
+ else ensureBlock(i)
434
+ }
435
+ }
436
+
437
+ function abortAll(): void {
438
+ for (const block of blocks.values()) block.controller?.abort()
439
+ inFlight = 0
440
+ queue.length = 0
441
+ }
442
+
443
+ return {
444
+ setViewport(startIndex, endIndex) {
445
+ if (disposed) return
446
+ viewStart = Math.max(0, startIndex)
447
+ viewEnd = Math.max(viewStart, endIndex)
448
+ if (debounceMs === 0) {
449
+ fetchViewport()
450
+ return
451
+ }
452
+ if (debounceTimer) clearTimeout(debounceTimer)
453
+ debounceTimer = setTimeout(() => {
454
+ debounceTimer = null
455
+ fetchViewport()
456
+ }, debounceMs)
457
+ },
458
+
459
+ rows() {
460
+ if (rowsCache) return rowsCache
461
+ const length = currentLength()
462
+ const out = new Array<TData>(length)
463
+ // Fill from the blocks we have, then pad the rest with placeholders. One
464
+ // pass per block beats one lookup per row: at a million rows the
465
+ // difference is the frame budget.
466
+ out.fill(LOADING_ROW as unknown as TData)
467
+ for (const [index, block] of blocks) {
468
+ const start = startOf(index)
469
+ if (start >= length) continue
470
+ if (block.status === 'failed') {
471
+ const end = Math.min(start + blockSize, length)
472
+ for (let i = start; i < end; i += 1) out[i] = FAILED_ROW as unknown as TData
473
+ continue
474
+ }
475
+ for (let i = 0; i < block.rows.length && start + i < length; i += 1) {
476
+ out[start + i] = block.rows[i]!
477
+ }
478
+ }
479
+ rowsCache = out
480
+ return out
481
+ },
482
+
483
+ getRow(index) {
484
+ const block = blocks.get(blockOf(index))
485
+ if (!block) return LOADING_ROW
486
+ if (block.status === 'failed') return FAILED_ROW
487
+ const row = block.rows[index - startOf(blockOf(index))]
488
+ return row ?? LOADING_ROW
489
+ },
490
+
491
+ rowCount: () => (countKnown ? count : null),
492
+ lastRowKnown: () => countKnown,
493
+
494
+ retryFailed() {
495
+ let any = false
496
+ for (const [index, block] of [...blocks]) {
497
+ if (block.status !== 'failed') continue
498
+ blocks.delete(index)
499
+ ensureBlock(index)
500
+ any = true
501
+ }
502
+ if (any) emit()
503
+ },
504
+
505
+ refresh() {
506
+ // Keep the count and the scroll position: drop the DATA, re-request the
507
+ // same blocks. The user sees skeletons where they were, not a jump home.
508
+ for (const [index, block] of [...blocks]) {
509
+ block.controller?.abort()
510
+ blocks.delete(index)
511
+ ensureBlock(index)
512
+ }
513
+ emit()
514
+ },
515
+
516
+ purge() {
517
+ abortAll()
518
+ blocks.clear()
519
+ count = null
520
+ countKnown = false
521
+ rowsCache = null
522
+ fetchViewport()
523
+ emit()
524
+ },
525
+
526
+ setRowCount(next, known = next != null) {
527
+ count = next
528
+ countKnown = known && next != null
529
+ emit()
530
+ },
531
+
532
+ applyRows(startRow, rows, rowCount) {
533
+ if (startRow % blockSize !== 0) {
534
+ throw new Error(
535
+ `createBlockCache.applyRows: startRow ${startRow} is not a multiple of blockSize ${blockSize}`,
536
+ )
537
+ }
538
+ const firstBlock = blockOf(startRow)
539
+ const blockCount = Math.ceil(rows.length / blockSize)
540
+ for (let i = 0; i < blockCount; i += 1) {
541
+ const index = firstBlock + i
542
+ blocks.get(index)?.controller?.abort() // ours now, whatever was in flight
543
+ blocks.set(index, {
544
+ status: 'loaded',
545
+ rows: rows.slice(i * blockSize, (i + 1) * blockSize),
546
+ lastTouched: (touchClock += 1),
547
+ controller: null,
548
+ })
549
+ }
550
+ const lastBlock = blocks.get(firstBlock + blockCount - 1)
551
+ if (lastBlock) applyCountFrom(firstBlock + blockCount - 1, lastBlock.rows.length, rowCount)
552
+ else if (typeof rowCount === 'number' && rowCount >= 0) {
553
+ count = rowCount
554
+ countKnown = true
555
+ }
556
+ emit()
557
+ },
558
+
559
+ patch(index, row) {
560
+ const block = blocks.get(blockOf(index))
561
+ if (!block || block.status !== 'loaded') return false
562
+ const offset = index - startOf(blockOf(index))
563
+ if (offset < 0 || offset >= block.rows.length) return false
564
+ block.rows[offset] = row
565
+ emit()
566
+ return true
567
+ },
568
+
569
+ findIndex(predicate) {
570
+ for (const [blockIndex, block] of blocks) {
571
+ if (block.status !== 'loaded') continue
572
+ const start = startOf(blockIndex)
573
+ for (let i = 0; i < block.rows.length; i += 1) {
574
+ if (predicate(block.rows[i]!, start + i)) return start + i
575
+ }
576
+ }
577
+ return -1
578
+ },
579
+
580
+ insert(index, rows) {
581
+ if (rows.length === 0) return false
582
+ const clamped = Math.max(0, Math.min(index, currentLength()))
583
+ const run = loadedRunAt(clamped)
584
+ if (run) {
585
+ // Rows shift across block boundaries, so re-slice the run from its
586
+ // first block; everything loaded past it is dropped (offsets moved).
587
+ run.flat.splice(clamped - startOf(run.startBlock), 0, ...rows)
588
+ reseat(run.startBlock, run.flat)
589
+ } else {
590
+ dropLoadedFrom(blockOf(clamped))
591
+ }
592
+ if (countKnown && count != null) count += rows.length
593
+ emit()
594
+ return run != null
595
+ },
596
+
597
+ remove(index, removeCount = 1) {
598
+ if (removeCount <= 0) return 0
599
+ const run = loadedRunAt(index)
600
+ if (!run) return 0
601
+ const removed = run.flat.splice(index - startOf(run.startBlock), removeCount).length
602
+ reseat(run.startBlock, run.flat)
603
+ if (countKnown && count != null) count = Math.max(0, count - removed)
604
+ emit()
605
+ return removed
606
+ },
607
+
608
+ getCacheState() {
609
+ return [...blocks.entries()]
610
+ .map(([blockIndex, block]) => ({
611
+ blockIndex,
612
+ startRow: startOf(blockIndex),
613
+ endRow: startOf(blockIndex) + blockSize,
614
+ status: block.status,
615
+ lastTouched: block.lastTouched,
616
+ }))
617
+ .sort((a, b) => a.blockIndex - b.blockIndex)
618
+ },
619
+
620
+ dispose() {
621
+ disposed = true
622
+ if (debounceTimer) clearTimeout(debounceTimer)
623
+ debounceTimer = null
624
+ abortAll()
625
+ blocks.clear()
626
+ },
627
+ }
628
+
629
+ /**
630
+ * The run of consecutive loaded blocks containing `index`, flattened, with
631
+ * the block it starts at. Null when the block at `index` is not loaded -
632
+ * an index-shifting edit there would have nothing to shift.
633
+ */
634
+ function loadedRunAt(index: number): { startBlock: number; flat: TData[] } | null {
635
+ const at = blockOf(index)
636
+ if (blocks.get(at)?.status !== 'loaded') return null
637
+ let startBlock = at
638
+ while (blocks.get(startBlock - 1)?.status === 'loaded') startBlock -= 1
639
+ const flat: TData[] = []
640
+ for (let i = startBlock; ; i += 1) {
641
+ const block = blocks.get(i)
642
+ if (!block || block.status !== 'loaded') break
643
+ flat.push(...block.rows)
644
+ if (block.rows.length < blockSize) break // the last block, by definition
645
+ }
646
+ return { startBlock, flat }
647
+ }
648
+
649
+ /**
650
+ * Lay a flat run back out into blocks from `startBlock`, and drop every
651
+ * block after the run: their rows have shifted, and re-fetching them at
652
+ * the new offsets is the honest outcome. Blocks before it are untouched.
653
+ */
654
+ function reseat(startBlock: number, flat: TData[]): void {
655
+ const blockCount = Math.ceil(flat.length / blockSize)
656
+ dropLoadedFrom(startBlock)
657
+ for (let i = 0; i < blockCount; i += 1) {
658
+ blocks.set(startBlock + i, {
659
+ status: 'loaded',
660
+ rows: flat.slice(i * blockSize, (i + 1) * blockSize),
661
+ lastTouched: (touchClock += 1),
662
+ controller: null,
663
+ })
664
+ }
665
+ rowsCache = null
666
+ }
667
+
668
+ /** Forget every block from `fromBlock` on, aborting any in flight. */
669
+ function dropLoadedFrom(fromBlock: number): void {
670
+ for (const [index, block] of [...blocks]) {
671
+ if (index < fromBlock) continue
672
+ block.controller?.abort()
673
+ blocks.delete(index)
674
+ }
675
+ rowsCache = null
676
+ }
677
+ }