Skip to content

Commit 5151ee4

Browse files
tannerlinsleytannerlinsley
committedFeb 5, 2025·
fix: Revert "fix: add experimental_subscribeToEvents"
This reverts commit b7b0d5a. # Conflicts: # examples/react/table/src/main.tsx
·
v3.13.2@tanstack/angular-virtual@3.13.3
1 parent 659b157 commit 5151ee4

File tree

10 files changed

+149
-78
lines changed

10 files changed

+149
-78
lines changed
 

‎examples/react/dynamic/src/main.tsx

+109-1
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,110 @@ const generateData = (columns: Array<Column>, count = 300) => {
290290
)
291291
}
292292

293+
function RowVirtualizerExperimental() {
294+
const parentRef = React.useRef<HTMLDivElement>(null)
295+
const innerRef = React.useRef<HTMLDivElement>(null)
296+
const rowRefsMap = React.useRef(new Map<number, HTMLDivElement>())
297+
298+
const [enabled, setEnabled] = React.useState(true)
299+
300+
const count = sentences.length
301+
const virtualizer = useVirtualizer({
302+
count,
303+
getScrollElement: () => parentRef.current,
304+
estimateSize: () => 45,
305+
enabled,
306+
onChange: (instance) => {
307+
innerRef.current!.style.height = `${instance.getTotalSize()}px`
308+
instance.getVirtualItems().forEach((virtualRow) => {
309+
const rowRef = rowRefsMap.current.get(virtualRow.index)
310+
if (!rowRef) return
311+
rowRef.style.transform = `translateY(${virtualRow.start}px)`
312+
})
313+
},
314+
})
315+
316+
const indexes = virtualizer.getVirtualIndexes()
317+
318+
React.useEffect(() => {
319+
virtualizer.measure()
320+
}, [])
321+
322+
return (
323+
<div>
324+
<button
325+
onClick={() => {
326+
virtualizer.scrollToIndex(0)
327+
}}
328+
>
329+
scroll to the top
330+
</button>
331+
<span style={{ padding: '0 4px' }} />
332+
<button
333+
onClick={() => {
334+
virtualizer.scrollToIndex(count / 2)
335+
}}
336+
>
337+
scroll to the middle
338+
</button>
339+
<span style={{ padding: '0 4px' }} />
340+
<button
341+
onClick={() => {
342+
virtualizer.scrollToIndex(count - 1)
343+
}}
344+
>
345+
scroll to the end
346+
</button>
347+
<span style={{ padding: '0 4px' }} />
348+
<button
349+
onClick={() => {
350+
setEnabled((prev) => !prev)
351+
}}
352+
>
353+
turn {enabled ? 'off' : 'on'} virtualizer
354+
</button>
355+
<hr />
356+
<div
357+
ref={parentRef}
358+
className="List"
359+
style={{
360+
height: 400,
361+
width: 400,
362+
overflowY: 'auto',
363+
contain: 'strict',
364+
}}
365+
>
366+
<div
367+
ref={innerRef}
368+
style={{
369+
width: '100%',
370+
position: 'relative',
371+
}}
372+
>
373+
{indexes.map((index) => (
374+
<div
375+
key={index}
376+
data-index={index}
377+
ref={(el) => {
378+
if (el) {
379+
virtualizer.measureElement(el)
380+
rowRefsMap.current.set(index, el)
381+
}
382+
}}
383+
className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
384+
>
385+
<div style={{ padding: '10px 0' }}>
386+
<div>Row {index}</div>
387+
<div>{sentences[index]}</div>
388+
</div>
389+
</div>
390+
))}
391+
</div>
392+
</div>
393+
</div>
394+
)
395+
}
396+
293397
function App() {
294398
const pathname = location.pathname
295399
return (
@@ -314,6 +418,9 @@ function App() {
314418
<li>
315419
<a href="/grid">Grid</a>
316420
</li>
421+
<li>
422+
<a href="/experimental">Experimental</a>
423+
</li>
317424
</ul>
318425
</nav>
319426
{(() => {
@@ -327,6 +434,8 @@ function App() {
327434
const data = generateData(columns)
328435
return <GridVirtualizerDynamic columns={columns} data={data} />
329436
}
437+
case '/experimental':
438+
return <RowVirtualizerExperimental />
330439
default:
331440
return <div>Not found</div>
332441
}
@@ -344,7 +453,6 @@ function App() {
344453
)
345454
}
346455

347-
// eslint-disable-next-line
348456
const container = document.getElementById('root')!
349457
const root = createRoot(container)
350458
const { StrictMode } = React

‎examples/react/table/src/main.tsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,16 @@ function ReactTableVirtualized() {
5252
header: 'Profile Progress',
5353
size: 80,
5454
},
55-
// {
56-
// accessorKey: 'createdAt',
57-
// header: 'Created At',
58-
// cell: (info) => info.getValue<Date>().toLocaleString(),
59-
// },
55+
{
56+
accessorKey: 'createdAt',
57+
header: 'Created At',
58+
cell: (info) => info.getValue<Date>().toLocaleString(),
59+
},
6060
],
6161
[],
6262
)
6363

64-
const [data] = React.useState(() => makeData(50_000))
64+
const [data, setData] = React.useState(() => makeData(50_000))
6565

6666
const table = useReactTable({
6767
data,
@@ -82,12 +82,10 @@ function ReactTableVirtualized() {
8282
const virtualizer = useVirtualizer({
8383
count: rows.length,
8484
getScrollElement: () => parentRef.current,
85-
estimateSize: () => 200,
85+
estimateSize: () => 34,
8686
overscan: 20,
8787
})
8888

89-
console.log(virtualizer.isScrolling)
90-
9189
return (
9290
<div ref={parentRef} className="container">
9391
<div style={{ height: `${virtualizer.getTotalSize()}px` }}>
@@ -156,7 +154,6 @@ function ReactTableVirtualized() {
156154
</tbody>
157155
</table>
158156
</div>
159-
//{' '}
160157
</div>
161158
)
162159
}

‎examples/react/table/src/makeData.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ export type Person = {
88
visits: number
99
progress: number
1010
status: 'relationship' | 'complicated' | 'single'
11-
// createdAt: Date
11+
createdAt: Date
1212
}
1313

1414
const range = (len: number) => {
15-
const arr: Array<number> = []
15+
const arr: number[] = []
1616
for (let i = 0; i < len; i++) {
1717
arr.push(i)
1818
}
@@ -22,23 +22,23 @@ const range = (len: number) => {
2222
const newPerson = (index: number): Person => {
2323
return {
2424
id: index + 1,
25-
firstName: faker.person.firstName(),
26-
lastName: faker.person.lastName(),
25+
firstName: faker.name.firstName(),
26+
lastName: faker.name.lastName(),
2727
age: faker.number.int(40),
2828
visits: faker.number.int(1000),
2929
progress: faker.number.int(100),
30-
// createdAt: faker.datatype.datetime({ max: new Date().getTime() }),
30+
createdAt: faker.datatype.datetime({ max: new Date().getTime() }),
3131
status: faker.helpers.shuffle<Person['status']>([
3232
'relationship',
3333
'complicated',
3434
'single',
35-
])[0],
35+
])[0]!,
3636
}
3737
}
3838

39-
export function makeData(...lens: Array<number>) {
40-
const makeDataLevel = (depth = 0): Array<Person> => {
41-
const len = lens[depth]
39+
export function makeData(...lens: number[]) {
40+
const makeDataLevel = (depth = 0): Person[] => {
41+
const len = lens[depth]!
4242
return range(len).map((d): Person => {
4343
return {
4444
...newPerson(d),

‎packages/angular-virtual/src/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ function createVirtualizerBase<
4747
virtualizerSignal.set(virtualizer)
4848
virtualizer.setOptions({
4949
..._options,
50-
onChange: (instance, sync, source) => {
50+
onChange: (instance, sync) => {
5151
// update virtualizerSignal so that dependent computeds recompute.
5252
virtualizerSignal.set(instance)
53-
_options.onChange?.(instance, sync, source)
53+
_options.onChange?.(instance, sync)
5454
},
5555
})
5656
// update virtualizerSignal so that dependent computeds recompute.

‎packages/lit-virtual/src/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ class VirtualizerControllerBase<
2929

3030
const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
3131
...options,
32-
onChange: (instance, sync, source) => {
32+
onChange: (instance, sync) => {
3333
this.host.updateComplete.then(() => this.host.requestUpdate())
34-
options.onChange?.(instance, sync, source)
34+
options.onChange?.(instance, sync)
3535
},
3636
}
3737
this.virtualizer = new Virtualizer(resolvedOptions)

‎packages/react-virtual/src/index.tsx

+4-20
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ import {
99
observeWindowRect,
1010
windowScroll,
1111
} from '@tanstack/virtual-core'
12-
import type {
13-
NotifySource,
14-
PartialKeys,
15-
VirtualizerOptions,
16-
} from '@tanstack/virtual-core'
12+
import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
1713

1814
export * from '@tanstack/virtual-core'
1915

@@ -24,31 +20,19 @@ function useVirtualizerBase<
2420
TScrollElement extends Element | Window,
2521
TItemElement extends Element,
2622
>(
27-
options: VirtualizerOptions<TScrollElement, TItemElement> & {
28-
_experimental_subscribeToEvents?: boolean | Array<NotifySource>
29-
},
23+
options: VirtualizerOptions<TScrollElement, TItemElement>,
3024
): Virtualizer<TScrollElement, TItemElement> {
3125
const rerender = React.useReducer(() => ({}), {})[1]
3226

3327
const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
3428
...options,
35-
onChange: (instance, sync, source) => {
36-
const subscribeToEvents = options._experimental_subscribeToEvents ?? true
37-
38-
if (
39-
subscribeToEvents === false ||
40-
(Array.isArray(subscribeToEvents) &&
41-
!subscribeToEvents.includes(source))
42-
) {
43-
return
44-
}
45-
29+
onChange: (instance, sync) => {
4630
if (sync) {
4731
flushSync(rerender)
4832
} else {
4933
rerender()
5034
}
51-
options.onChange?.(instance, sync, source)
35+
options.onChange?.(instance, sync)
5236
},
5337
}
5438

‎packages/solid-virtual/src/index.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ import {
1616
onMount,
1717
} from 'solid-js'
1818
import { createStore, reconcile } from 'solid-js/store'
19-
import type {
20-
NotifySource,
21-
PartialKeys,
22-
VirtualizerOptions,
23-
} from '@tanstack/virtual-core'
19+
import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
2420

2521
export * from '@tanstack/virtual-core'
2622

@@ -73,7 +69,6 @@ function createVirtualizerBase<
7369
onChange: (
7470
instance: Virtualizer<TScrollElement, TItemElement>,
7571
sync: boolean,
76-
source: NotifySource,
7772
) => {
7873
instance._willUpdate()
7974
setVirtualItems(
@@ -82,7 +77,7 @@ function createVirtualizerBase<
8277
}),
8378
)
8479
setTotalSize(instance.getTotalSize())
85-
options.onChange?.(instance, sync, source)
80+
options.onChange?.(instance, sync)
8681
},
8782
}),
8883
)

‎packages/svelte-virtual/src/index.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@ import {
88
windowScroll,
99
} from '@tanstack/virtual-core'
1010
import { derived, writable } from 'svelte/store'
11-
import type {
12-
NotifySource,
13-
PartialKeys,
14-
VirtualizerOptions,
15-
} from '@tanstack/virtual-core'
11+
import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
1612
import type { Readable, Writable } from 'svelte/store'
1713

1814
export * from '@tanstack/virtual-core'
@@ -51,10 +47,9 @@ function createVirtualizerBase<
5147
onChange: (
5248
instance: Virtualizer<TScrollElement, TItemElement>,
5349
sync: boolean,
54-
source: NotifySource,
5550
) => {
5651
virtualizerWritable.set(instance)
57-
resolvedOptions.onChange?.(instance, sync, source)
52+
resolvedOptions.onChange?.(instance, sync)
5853
},
5954
})
6055
virtualizer._willUpdate()

‎packages/virtual-core/src/index.ts

+10-18
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,6 @@ export interface Rect {
4242
height: number
4343
}
4444

45-
export type NotifySource =
46-
| 'noScrollElement'
47-
| 'observeElementRect'
48-
| 'observeElementOffset'
49-
| 'measureItem'
50-
| 'resizeItem'
51-
| 'measure'
52-
5345
//
5446

5547
export const defaultKeyExtractor = (index: number) => index
@@ -311,7 +303,6 @@ export interface VirtualizerOptions<
311303
onChange?: (
312304
instance: Virtualizer<TScrollElement, TItemElement>,
313305
sync: boolean,
314-
source: NotifySource,
315306
) => void
316307
measureElement?: (
317308
element: TItemElement,
@@ -430,8 +421,8 @@ export class Virtualizer<
430421
}
431422
}
432423

433-
private notify = (sync: boolean, source: NotifySource) => {
434-
this.options.onChange?.(this, sync, source)
424+
private notify = (sync: boolean) => {
425+
this.options.onChange?.(this, sync)
435426
}
436427

437428
private maybeNotify = memo(
@@ -444,8 +435,8 @@ export class Virtualizer<
444435
this.range ? this.range.endIndex : null,
445436
]
446437
},
447-
(isScrolling) => (source: NotifySource) => {
448-
this.notify(isScrolling, source)
438+
(isScrolling) => {
439+
this.notify(isScrolling)
449440
},
450441
{
451442
key: process.env.NODE_ENV !== 'production' && 'maybeNotify',
@@ -481,7 +472,7 @@ export class Virtualizer<
481472
this.cleanup()
482473

483474
if (!scrollElement) {
484-
this.maybeNotify()('noScrollElement')
475+
this.maybeNotify()
485476
return
486477
}
487478

@@ -505,7 +496,7 @@ export class Virtualizer<
505496
this.unsubs.push(
506497
this.options.observeElementRect(this, (rect) => {
507498
this.scrollRect = rect
508-
this.maybeNotify()('observeElementRect')
499+
this.maybeNotify()
509500
}),
510501
)
511502

@@ -519,7 +510,8 @@ export class Virtualizer<
519510
: null
520511
this.scrollOffset = offset
521512
this.isScrolling = isScrolling
522-
this.maybeNotify()('observeElementOffset')
513+
514+
this.maybeNotify()
523515
}),
524516
)
525517
}
@@ -803,7 +795,7 @@ export class Virtualizer<
803795
this.pendingMeasuredCacheIndexes.push(item.index)
804796
this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size))
805797

806-
this.notify(false, 'resizeItem')
798+
this.notify(false)
807799
}
808800
}
809801

@@ -1056,7 +1048,7 @@ export class Virtualizer<
10561048

10571049
measure = () => {
10581050
this.itemSizeCache = new Map()
1059-
this.notify(false, 'measure')
1051+
this.notify(false)
10601052
}
10611053
}
10621054

‎packages/vue-virtual/src/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ function useVirtualizerBase<
5050
(options) => {
5151
virtualizer.setOptions({
5252
...options,
53-
onChange: (instance, sync, source) => {
53+
onChange: (instance, sync) => {
5454
triggerRef(state)
55-
options.onChange?.(instance, sync, source)
55+
options.onChange?.(instance, sync)
5656
},
5757
})
5858

0 commit comments

Comments
 (0)
Please sign in to comment.