Skip to content

Commit e7721f1

Browse files
jonasgeilerjonasgeiler
authored
Merge pull request #105 from jonasgeiler/refactor/remove-listprops-liststate
refactor: get rid of ListProps and ListState classes by putting it directly in component
2 parents 15853d8 + 10b0b7d commit e7721f1

File tree

3 files changed

+158
-291
lines changed

3 files changed

+158
-291
lines changed

‎src/lib/VirtualList.svelte‎

Lines changed: 158 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
SCROLL_PROP,
99
SCROLL_PROP_LEGACY
1010
} from './constants.js';
11-
import { ListState } from './utils/ListState.svelte.js';
12-
import { ListProps } from './utils/ListProps.svelte.js';
1311
/** @import { VirtualListProps, VirtualListEvents, VirtualListSnippets } from './types.js'; */
1412
1513
/** @type {VirtualListProps & VirtualListEvents & VirtualListSnippets} */
@@ -21,13 +19,13 @@
2119
2220
itemCount,
2321
itemSize,
24-
estimatedItemSize = 0,
22+
estimatedItemSize: optEstimatedItemSize,
2523
stickyIndices = [],
2624
getKey,
2725
2826
scrollDirection = DIRECTION.VERTICAL,
29-
scrollOffset = 0,
30-
scrollToIndex = -1,
27+
scrollOffset,
28+
scrollToIndex,
3129
scrollToAlignment = ALIGNMENT.START,
3230
scrollToBehaviour = 'instant',
3331
@@ -49,107 +47,168 @@
4947
footer: footerSnippet
5048
} = $props();
5149
50+
let estimatedItemSize = $derived(
51+
optEstimatedItemSize || (typeof itemSize === 'number' && itemSize) || 50
52+
);
53+
const sizeAndPositionManager = new SizeAndPositionManager(itemSize, itemCount, estimatedItemSize);
54+
5255
/** @type {HTMLDivElement} */
5356
let wrapper;
54-
55-
/** @type {Record<number, string>} */
56-
let styleCache = $state({});
57-
let wrapperStyle = $state.raw('');
58-
let innerStyle = $state.raw('');
59-
6057
let wrapperHeight = $state(400);
6158
let wrapperWidth = $state(400);
62-
6359
/** @type {{ index: number, style: string }[]} */
6460
let items = $state.raw([]);
6561
66-
const _props = new ListProps(
67-
scrollToIndex,
68-
scrollToAlignment,
69-
scrollOffset,
70-
itemCount,
71-
itemSize,
72-
estimatedItemSize,
73-
Number.isFinite(height) ? height : 400,
74-
Number.isFinite(width) ? width : 400,
75-
stickyIndices
76-
);
77-
78-
const _state = new ListState(scrollOffset || 0);
62+
/** @type {{ offset: number, changeReason: number }} */
63+
let scroll = $state.raw({
64+
offset: scrollOffset || (scrollToIndex !== undefined && getOffsetForIndex(scrollToIndex)) || 0,
65+
changeReason: SCROLL_CHANGE_REASON.REQUESTED
66+
});
67+
let prevScroll = $state.snapshot(scroll);
68+
69+
let heightNumber = $derived(Number.isFinite(height) ? Number(height) : wrapperHeight);
70+
let widthNumber = $derived(Number.isFinite(width) ? Number(width) : wrapperWidth);
71+
let prevProps = {
72+
scrollToIndex: $state.snapshot(scrollToIndex),
73+
scrollToAlignment: $state.snapshot(scrollToAlignment),
74+
scrollOffset: $state.snapshot(scrollOffset),
75+
itemCount: $state.snapshot(itemCount),
76+
itemSize: typeof itemSize === 'function' ? itemSize : $state.snapshot(itemSize),
77+
estimatedItemSize: $state.snapshot(estimatedItemSize),
78+
heightNumber: $state.snapshot(heightNumber),
79+
widthNumber: $state.snapshot(widthNumber),
80+
stickyIndices: $state.snapshot(stickyIndices)
81+
};
7982
80-
const sizeAndPositionManager = new SizeAndPositionManager(
81-
itemSize,
82-
itemCount,
83-
_props.estimatedItemSize
84-
);
83+
/** @type {Record<number, string>} */
84+
let styleCache = $state({});
85+
let wrapperStyle = $state.raw('');
86+
let innerStyle = $state.raw('');
8587
8688
// Effect 0: Event listener
8789
$effect(() => {
90+
/** @type {number | undefined} */
91+
let frame;
92+
/** @param {Event} event */
93+
const handleScrollAsync = (event) => {
94+
if (frame !== undefined) {
95+
cancelAnimationFrame(frame);
96+
}
97+
frame = requestAnimationFrame(() => {
98+
handleScroll(event);
99+
frame = undefined;
100+
});
101+
};
102+
88103
const options = { passive: true };
89-
wrapper.addEventListener('scroll', handleScroll, options);
104+
wrapper.addEventListener('scroll', handleScrollAsync, options);
90105
91106
return () => {
92107
// @ts-expect-error because options is not really needed, but maybe in the future
93-
wrapper.removeEventListener('scroll', handleScroll, options);
108+
wrapper.removeEventListener('scroll', handleScrollAsync, options);
94109
};
95110
});
96111
97112
// Effect 1: Update props from user provided props
98113
$effect(() => {
99-
_props.listen(
100-
scrollToIndex,
101-
scrollToAlignment,
102-
scrollOffset,
103-
itemCount,
104-
itemSize,
105-
estimatedItemSize,
106-
Number.isFinite(height) ? height : wrapperHeight,
107-
Number.isFinite(width) ? width : wrapperWidth,
108-
stickyIndices
109-
);
114+
scrollToIndex;
115+
scrollToAlignment;
116+
scrollOffset;
117+
itemCount;
118+
itemSize;
119+
estimatedItemSize;
120+
heightNumber;
121+
widthNumber;
122+
stickyIndices;
123+
124+
untrack(propsUpdated);
125+
});
110126
111-
untrack(() => {
112-
let doRecomputeSizes = false;
127+
// Effect 2: Update scroll
128+
$effect(() => {
129+
scroll;
113130
114-
if (_props.haveSizesChanged) {
115-
sizeAndPositionManager.updateConfig(itemSize, itemCount, _props.estimatedItemSize);
116-
doRecomputeSizes = true;
117-
}
131+
untrack(scrollUpdated);
132+
});
118133
119-
if (_props.hasScrollOffsetChanged)
120-
_state.listen(_props.scrollOffset, SCROLL_CHANGE_REASON.REQUESTED);
121-
else if (_props.hasScrollIndexChanged)
122-
_state.listen(
123-
getOffsetForIndex(scrollToIndex, scrollToAlignment),
124-
SCROLL_CHANGE_REASON.REQUESTED
125-
);
134+
function propsUpdated() {
135+
const scrollPropsHaveChanged =
136+
prevProps.scrollToIndex !== scrollToIndex ||
137+
prevProps.scrollToAlignment !== scrollToAlignment;
138+
const itemPropsHaveChanged =
139+
prevProps.itemCount !== itemCount ||
140+
prevProps.itemSize !== itemSize ||
141+
prevProps.estimatedItemSize !== estimatedItemSize;
126142
127-
if (_props.haveDimsOrStickyIndicesChanged || doRecomputeSizes) recomputeSizes();
143+
let forceRecomputeSizes = false;
144+
if (itemPropsHaveChanged) {
145+
sizeAndPositionManager.updateConfig(itemSize, itemCount, estimatedItemSize);
128146
129-
_props.update();
130-
});
131-
});
147+
forceRecomputeSizes = true;
148+
}
132149
133-
// Effect 2: Update UI from state
134-
$effect(() => {
135-
_state.offset;
150+
if (prevProps.scrollOffset !== scrollOffset) {
151+
scroll = {
152+
offset: scrollOffset || 0,
153+
changeReason: SCROLL_CHANGE_REASON.REQUESTED
154+
};
155+
} else if (
156+
typeof scrollToIndex === 'number' &&
157+
(scrollPropsHaveChanged || itemPropsHaveChanged)
158+
) {
159+
scroll = {
160+
offset: getOffsetForIndex(scrollToIndex),
161+
changeReason: SCROLL_CHANGE_REASON.REQUESTED
162+
};
163+
}
136164
137-
untrack(() => {
138-
if (_state.doRefresh) refresh();
165+
if (
166+
forceRecomputeSizes ||
167+
prevProps.heightNumber !== heightNumber ||
168+
prevProps.widthNumber !== widthNumber ||
169+
prevProps.stickyIndices.toString() !== $state.snapshot(stickyIndices).toString()
170+
) {
171+
recomputeSizes();
172+
}
139173
140-
if (_state.doScrollToOffset) scrollTo(_state.offset);
174+
prevProps = {
175+
scrollToIndex: $state.snapshot(scrollToIndex),
176+
scrollToAlignment: $state.snapshot(scrollToAlignment),
177+
scrollOffset: $state.snapshot(scrollOffset),
178+
itemCount: $state.snapshot(itemCount),
179+
itemSize: typeof itemSize === 'function' ? itemSize : $state.snapshot(itemSize),
180+
estimatedItemSize: $state.snapshot(estimatedItemSize),
181+
heightNumber: $state.snapshot(heightNumber),
182+
widthNumber: $state.snapshot(widthNumber),
183+
stickyIndices: $state.snapshot(stickyIndices)
184+
};
185+
}
141186
142-
_state.update();
143-
});
144-
});
187+
function scrollUpdated() {
188+
if (prevScroll.offset !== scroll.offset || prevScroll.changeReason !== scroll.changeReason) {
189+
refresh();
190+
}
191+
192+
if (
193+
prevScroll.offset !== scroll.offset &&
194+
scroll.changeReason === SCROLL_CHANGE_REASON.REQUESTED
195+
) {
196+
wrapper.scroll({
197+
[SCROLL_PROP[scrollDirection]]: scroll.offset,
198+
behavior: scrollToBehaviour
199+
});
200+
}
201+
202+
prevScroll = $state.snapshot(scroll);
203+
}
145204
146205
/**
147206
* Recomputes the sizes of the items and updates the visible items.
148207
*/
149-
const refresh = () => {
208+
function refresh() {
150209
const { start, end } = sizeAndPositionManager.getVisibleRange(
151-
scrollDirection === DIRECTION.VERTICAL ? _props.height : _props.width,
152-
_state.offset,
210+
scrollDirection === DIRECTION.VERTICAL ? heightNumber : widthNumber,
211+
scroll.offset,
153212
overscanCount
154213
);
155214
@@ -160,11 +219,10 @@
160219
const heightUnit = typeof height === 'number' ? 'px' : '';
161220
const widthUnit = typeof width === 'number' ? 'px' : '';
162221
222+
wrapperStyle = `height:${height}${heightUnit};width:${width}${widthUnit};`;
163223
if (scrollDirection === DIRECTION.VERTICAL) {
164-
wrapperStyle = `height:${height}${heightUnit};width:${width}${widthUnit};`;
165224
innerStyle = `flex-direction:column;height:${totalSize}px;`;
166225
} else {
167-
wrapperStyle = `height:${height}${heightUnit};width:${width}${widthUnit};`;
168226
innerStyle = `min-height:100%;width:${totalSize}px;`;
169227
}
170228
@@ -193,97 +251,80 @@
193251
}
194252
195253
items = visibleItems;
196-
};
197-
198-
/**
199-
* Scrolls the list to a specific coordinate.
200-
* @param {number} value
201-
*/
202-
const scrollTo = (value) => {
203-
wrapper.scroll({
204-
[SCROLL_PROP[scrollDirection]]: value,
205-
behavior: scrollToBehaviour
206-
});
207-
};
254+
}
208255
209256
/**
210257
* Recomputes the sizes of the items in the list.
211-
* @param {number} startIndex
212258
*/
213-
export const recomputeSizes = (startIndex = scrollToIndex) => {
259+
export function recomputeSizes(startIndex = scrollToIndex) {
214260
styleCache = {};
215-
if (startIndex >= 0) sizeAndPositionManager.resetItem(startIndex);
261+
if (startIndex !== undefined && startIndex >= 0) {
262+
sizeAndPositionManager.resetItem(startIndex);
263+
}
216264
refresh();
217-
};
265+
}
218266
219267
/**
220268
* Calculates the offset for a given index based on the scroll direction and alignment.
221269
* @param {number} index
222-
* @param {import('./types.js').Alignment} align
223270
*/
224-
const getOffsetForIndex = (index, align = scrollToAlignment) => {
271+
function getOffsetForIndex(index) {
225272
if (index < 0 || index >= itemCount) index = 0;
226273
227274
return sizeAndPositionManager.getUpdatedOffsetForIndex(
228-
align,
229-
scrollDirection === DIRECTION.VERTICAL ? _props.height : _props.width,
230-
_state.offset || 0,
275+
scrollToAlignment,
276+
scrollDirection === DIRECTION.VERTICAL ? heightNumber : widthNumber,
277+
scroll.offset || 0,
231278
index
232279
);
233-
};
280+
}
234281
235282
/**
236283
* Handles the scroll event on the wrapper element.
237284
* @param {Event} event
238285
*/
239-
const handleScroll = (event) => {
240-
const offset = getWrapperOffset();
286+
function handleScroll(event) {
287+
const offset = wrapper[SCROLL_PROP_LEGACY[scrollDirection]];
241288
242-
if (offset < 0 || _state.offset === offset || event.target !== wrapper) return null;
289+
if (offset < 0 || scroll.offset === offset || event.target !== wrapper) return;
243290
244-
_state.listen(offset, SCROLL_CHANGE_REASON.OBSERVED);
291+
scroll = { offset, changeReason: SCROLL_CHANGE_REASON.OBSERVED };
245292
246293
if (handleAfterScroll) handleAfterScroll({ offset, event });
247-
};
248-
249-
/**
250-
* Returns the current scroll offset of the wrapper element.
251-
* @returns {number}
252-
*/
253-
const getWrapperOffset = () => {
254-
return wrapper[SCROLL_PROP_LEGACY[scrollDirection]];
255-
};
294+
}
256295
257296
/**
258297
* Returns the style for a given item index.
259298
* @param {number} index The index of the item
260299
* @param {boolean} sticky Whether the item should be sticky or not
261300
*/
262-
const getStyle = (index, sticky) => {
301+
function getStyle(index, sticky) {
263302
if (styleCache[index]) return styleCache[index];
264303
265304
const { size, offset } = sizeAndPositionManager.getSizeAndPositionForIndex(index);
266305
267306
let style;
268-
269307
if (scrollDirection === DIRECTION.VERTICAL) {
270308
style = `left:0;width:100%;height:${size}px;`;
271309
272-
if (sticky)
310+
if (sticky) {
273311
style += `position:sticky;flex-grow:0;z-index:1;top:0;margin-top:${offset}px;margin-bottom:${-(offset + size)}px;`;
274-
else style += `position:absolute;top:${offset}px;`;
312+
} else {
313+
style += `position:absolute;top:${offset}px;`;
314+
}
275315
} else {
276316
style = `top:0;width:${size}px;`;
277317
278-
if (sticky)
318+
if (sticky) {
279319
style += `position:sticky;z-index:1;left:0;margin-left:${offset}px;margin-right:${-(offset + size)}px;`;
280-
else style += `position:absolute;height:100%;left:${offset}px;`;
320+
} else {
321+
style += `position:absolute;height:100%;left:${offset}px;`;
322+
}
281323
}
282324
283325
styleCache[index] = style;
284-
285326
return styleCache[index];
286-
};
327+
}
287328
</script>
288329

289330
<div

0 commit comments

Comments
 (0)