@tanstack/marko-virtual 3.14.2 → 3.15.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.
- package/README.md +268 -118
- package/dist/cjs/tags/virtualizer/options.d.cts +30 -1
- package/dist/cjs/tags/window-virtualizer/options.d.cts +32 -1
- package/dist/esm/tags/virtualizer/options.d.ts +30 -1
- package/dist/esm/tags/window-virtualizer/options.d.ts +32 -1
- package/dist/tags/virtualizer/index.d.marko +56 -0
- package/dist/tags/virtualizer/index.marko +59 -0
- package/dist/tags/virtualizer/options.d.ts +46 -0
- package/dist/tags/virtualizer/options.js +63 -0
- package/dist/tags/window-virtualizer/index.d.marko +55 -0
- package/dist/tags/window-virtualizer/index.marko +57 -0
- package/dist/tags/window-virtualizer/options.d.ts +45 -0
- package/dist/tags/window-virtualizer/options.js +67 -0
- package/marko.json +1 -1
- package/package.json +12 -9
- package/src/tags/virtualizer/index.marko +0 -78
- package/src/tags/virtualizer/options.ts +0 -50
- package/src/tags/window-virtualizer/index.marko +0 -75
- package/src/tags/window-virtualizer/options.ts +0 -46
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
elementScroll,
|
|
3
|
-
observeElementOffset,
|
|
4
|
-
observeElementRect,
|
|
5
|
-
} from '@tanstack/virtual-core'
|
|
6
|
-
import type { VirtualizerOptions } from '@tanstack/virtual-core'
|
|
7
|
-
|
|
8
|
-
// The subset of tag input that maps onto virtual-core options. Kept here
|
|
9
|
-
// (rather than imported from index.marko) so this helper has no dependency
|
|
10
|
-
// on the Marko template's generated types.
|
|
11
|
-
export interface VirtualizerInput {
|
|
12
|
-
count: number
|
|
13
|
-
estimateSize?: (index: number) => number
|
|
14
|
-
getScrollElement: () => Element | null
|
|
15
|
-
overscan?: number
|
|
16
|
-
horizontal?: boolean
|
|
17
|
-
paddingStart?: number
|
|
18
|
-
paddingEnd?: number
|
|
19
|
-
scrollPaddingStart?: number
|
|
20
|
-
scrollPaddingEnd?: number
|
|
21
|
-
gap?: number
|
|
22
|
-
lanes?: number
|
|
23
|
-
initialOffset?: number | (() => number)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// Single source of truth for the input -> virtual-core option mapping,
|
|
27
|
-
// shared by onMount (construction) and onUpdate (setOptions).
|
|
28
|
-
export function buildOptions(
|
|
29
|
-
input: VirtualizerInput,
|
|
30
|
-
notify: () => void,
|
|
31
|
-
): VirtualizerOptions<Element, Element> {
|
|
32
|
-
return {
|
|
33
|
-
count: input.count,
|
|
34
|
-
estimateSize: input.estimateSize ?? (() => 50),
|
|
35
|
-
getScrollElement: input.getScrollElement,
|
|
36
|
-
overscan: input.overscan ?? 5,
|
|
37
|
-
horizontal: input.horizontal ?? false,
|
|
38
|
-
paddingStart: input.paddingStart,
|
|
39
|
-
paddingEnd: input.paddingEnd,
|
|
40
|
-
scrollPaddingStart: input.scrollPaddingStart,
|
|
41
|
-
scrollPaddingEnd: input.scrollPaddingEnd,
|
|
42
|
-
gap: input.gap,
|
|
43
|
-
lanes: input.lanes,
|
|
44
|
-
initialOffset: input.initialOffset,
|
|
45
|
-
observeElementRect,
|
|
46
|
-
observeElementOffset,
|
|
47
|
-
scrollToFn: elementScroll,
|
|
48
|
-
onChange: notify,
|
|
49
|
-
}
|
|
50
|
-
}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { Virtualizer } from "@tanstack/virtual-core"
|
|
2
|
-
import type { VirtualItem, ScrollToOptions } from "@tanstack/virtual-core"
|
|
3
|
-
import { buildOptions } from "./options"
|
|
4
|
-
|
|
5
|
-
export interface Input {
|
|
6
|
-
count: number
|
|
7
|
-
estimateSize?: (index: number) => number
|
|
8
|
-
overscan?: number
|
|
9
|
-
paddingStart?: number
|
|
10
|
-
paddingEnd?: number
|
|
11
|
-
scrollPaddingStart?: number
|
|
12
|
-
scrollPaddingEnd?: number
|
|
13
|
-
gap?: number
|
|
14
|
-
lanes?: number
|
|
15
|
-
content: Marko.Body<[{
|
|
16
|
-
virtualItems: VirtualItem[]
|
|
17
|
-
totalSize: number
|
|
18
|
-
measureElement: ((el: Element | null) => void) | undefined
|
|
19
|
-
scrollToIndex: (index: number, options?: ScrollToOptions) => void
|
|
20
|
-
scrollToOffset: (offset: number, options?: ScrollToOptions) => void
|
|
21
|
-
}]>
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
<let/v = (null as Virtualizer<Window, Element> | null)/>
|
|
25
|
-
<let/cleanup = (null as (() => void) | null)/>
|
|
26
|
-
<let/items = ([] as VirtualItem[])/>
|
|
27
|
-
<let/size = 0/>
|
|
28
|
-
|
|
29
|
-
<lifecycle<{}>
|
|
30
|
-
onMount() {
|
|
31
|
-
const notify = () => {
|
|
32
|
-
const inst = v
|
|
33
|
-
if (!inst) return
|
|
34
|
-
items = inst.getVirtualItems()
|
|
35
|
-
size = inst.getTotalSize()
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
v = new Virtualizer<Window, Element>(buildOptions(input, notify))
|
|
39
|
-
cleanup = v!._didMount()
|
|
40
|
-
v!._willUpdate()
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
onUpdate() {
|
|
44
|
-
const current = v
|
|
45
|
-
if (!current) return
|
|
46
|
-
|
|
47
|
-
const notify = () => {
|
|
48
|
-
const inst = v
|
|
49
|
-
if (!inst) return
|
|
50
|
-
items = inst.getVirtualItems()
|
|
51
|
-
size = inst.getTotalSize()
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
current.setOptions({ ...current.options, ...buildOptions(input, notify) })
|
|
55
|
-
|
|
56
|
-
// _willUpdate() is a no-op when the scroll element is unchanged, so
|
|
57
|
-
// notify() explicitly afterwards to recompute on count/option changes.
|
|
58
|
-
current._willUpdate()
|
|
59
|
-
notify()
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
onDestroy() {
|
|
63
|
-
cleanup?.()
|
|
64
|
-
v = null
|
|
65
|
-
cleanup = null
|
|
66
|
-
}
|
|
67
|
-
/>
|
|
68
|
-
|
|
69
|
-
<${input.content}
|
|
70
|
-
virtualItems=items
|
|
71
|
-
totalSize=size
|
|
72
|
-
measureElement=v?.measureElement
|
|
73
|
-
scrollToIndex=(index: number, options?: ScrollToOptions) => v?.scrollToIndex(index, options)
|
|
74
|
-
scrollToOffset=(offset: number, options?: ScrollToOptions) => v?.scrollToOffset(offset, options)
|
|
75
|
-
/>
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
observeWindowOffset,
|
|
3
|
-
observeWindowRect,
|
|
4
|
-
windowScroll,
|
|
5
|
-
} from '@tanstack/virtual-core'
|
|
6
|
-
import type { VirtualizerOptions } from '@tanstack/virtual-core'
|
|
7
|
-
|
|
8
|
-
// The subset of tag input that maps onto virtual-core options. Kept here
|
|
9
|
-
// (rather than imported from index.marko) so this helper has no dependency
|
|
10
|
-
// on the Marko template's generated types.
|
|
11
|
-
export interface WindowVirtualizerInput {
|
|
12
|
-
count: number
|
|
13
|
-
estimateSize?: (index: number) => number
|
|
14
|
-
overscan?: number
|
|
15
|
-
paddingStart?: number
|
|
16
|
-
paddingEnd?: number
|
|
17
|
-
scrollPaddingStart?: number
|
|
18
|
-
scrollPaddingEnd?: number
|
|
19
|
-
gap?: number
|
|
20
|
-
lanes?: number
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Single source of truth for the input -> virtual-core option mapping,
|
|
24
|
-
// shared by onMount (construction) and onUpdate (setOptions).
|
|
25
|
-
export function buildOptions(
|
|
26
|
-
input: WindowVirtualizerInput,
|
|
27
|
-
notify: () => void,
|
|
28
|
-
): VirtualizerOptions<Window, Element> {
|
|
29
|
-
return {
|
|
30
|
-
count: input.count,
|
|
31
|
-
estimateSize: input.estimateSize ?? (() => 50),
|
|
32
|
-
getScrollElement: () => (typeof document !== 'undefined' ? window : null),
|
|
33
|
-
overscan: input.overscan ?? 5,
|
|
34
|
-
paddingStart: input.paddingStart,
|
|
35
|
-
paddingEnd: input.paddingEnd,
|
|
36
|
-
scrollPaddingStart: input.scrollPaddingStart,
|
|
37
|
-
scrollPaddingEnd: input.scrollPaddingEnd,
|
|
38
|
-
gap: input.gap,
|
|
39
|
-
lanes: input.lanes,
|
|
40
|
-
initialOffset: () => (typeof document !== 'undefined' ? window.scrollY : 0),
|
|
41
|
-
observeElementRect: observeWindowRect,
|
|
42
|
-
observeElementOffset: observeWindowOffset,
|
|
43
|
-
scrollToFn: windowScroll,
|
|
44
|
-
onChange: notify,
|
|
45
|
-
}
|
|
46
|
-
}
|