@tanstack/solid-virtual 3.0.0-beta.23 → 3.0.0-beta.26

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.
@@ -1,681 +0,0 @@
1
- /**
2
- * solid-virtual
3
- *
4
- * Copyright (c) TanStack
5
- *
6
- * This source code is licensed under the MIT license found in the
7
- * LICENSE.md file in the root directory of this source tree.
8
- *
9
- * @license MIT
10
- */
11
- 'use strict';
12
-
13
- Object.defineProperty(exports, '__esModule', { value: true });
14
-
15
- /**
16
- * virtual-core
17
- *
18
- * Copyright (c) TanStack
19
- *
20
- * This source code is licensed under the MIT license found in the
21
- * LICENSE.md file in the root directory of this source tree.
22
- *
23
- * @license MIT
24
- */
25
- function memo(getDeps, fn, opts) {
26
- let deps = [];
27
- let result;
28
- return () => {
29
- let depTime;
30
- if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
31
- const newDeps = getDeps();
32
- const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
33
-
34
- if (!depsChanged) {
35
- return result;
36
- }
37
-
38
- deps = newDeps;
39
- let resultTime;
40
- if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
41
- result = fn(...newDeps);
42
- opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
43
-
44
- if (opts.key && opts.debug != null && opts.debug()) {
45
- const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
46
- const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
47
- const resultFpsPercentage = resultEndTime / 16;
48
-
49
- const pad = (str, num) => {
50
- str = String(str);
51
-
52
- while (str.length < num) {
53
- str = ' ' + str;
54
- }
55
-
56
- return str;
57
- };
58
-
59
- console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n font-size: .6rem;\n font-weight: bold;\n color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
60
- }
61
-
62
- return result;
63
- };
64
- }
65
-
66
- //
67
- const defaultKeyExtractor = index => index;
68
- const defaultRangeExtractor = range => {
69
- const start = Math.max(range.startIndex - range.overscan, 0);
70
- const end = Math.min(range.endIndex + range.overscan, range.count - 1);
71
- const arr = [];
72
-
73
- for (let i = start; i <= end; i++) {
74
- arr.push(i);
75
- }
76
-
77
- return arr;
78
- };
79
-
80
- const memoRectCallback = (instance, cb) => {
81
- let prev = {
82
- height: -1,
83
- width: -1
84
- };
85
- return rect => {
86
- if (instance.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
87
- cb(rect);
88
- }
89
-
90
- prev = rect;
91
- };
92
- };
93
-
94
- const observeElementRect = (instance, cb) => {
95
- const observer = new ResizeObserver(entries => {
96
- var _entries$, _entries$2;
97
-
98
- cb({
99
- width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
100
- height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
101
- });
102
- });
103
-
104
- if (!instance.scrollElement) {
105
- return;
106
- }
107
-
108
- cb(instance.scrollElement.getBoundingClientRect());
109
- observer.observe(instance.scrollElement);
110
- return () => {
111
- observer.unobserve(instance.scrollElement);
112
- };
113
- };
114
- const observeWindowRect = (instance, cb) => {
115
- const memoizedCallback = memoRectCallback(instance, cb);
116
-
117
- const onResize = () => memoizedCallback({
118
- width: instance.scrollElement.innerWidth,
119
- height: instance.scrollElement.innerHeight
120
- });
121
-
122
- if (!instance.scrollElement) {
123
- return;
124
- }
125
-
126
- onResize();
127
- instance.scrollElement.addEventListener('resize', onResize, {
128
- capture: false,
129
- passive: true
130
- });
131
- return () => {
132
- instance.scrollElement.removeEventListener('resize', onResize);
133
- };
134
- };
135
- const scrollProps = {
136
- element: ['scrollLeft', 'scrollTop'],
137
- window: ['scrollX', 'scrollY']
138
- };
139
-
140
- const createOffsetObserver = mode => {
141
- return (instance, cb) => {
142
- if (!instance.scrollElement) {
143
- return;
144
- }
145
-
146
- const propX = scrollProps[mode][0];
147
- const propY = scrollProps[mode][1];
148
- let prevX = instance.scrollElement[propX];
149
- let prevY = instance.scrollElement[propY];
150
-
151
- const scroll = () => {
152
- const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
153
- cb(Math.max(0, offset - instance.options.scrollMargin));
154
- };
155
-
156
- scroll();
157
-
158
- const onScroll = e => {
159
- const target = e.currentTarget;
160
- const scrollX = target[propX];
161
- const scrollY = target[propY];
162
-
163
- if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
164
- scroll();
165
- }
166
-
167
- prevX = scrollX;
168
- prevY = scrollY;
169
- };
170
-
171
- instance.scrollElement.addEventListener('scroll', onScroll, {
172
- capture: false,
173
- passive: true
174
- });
175
- return () => {
176
- instance.scrollElement.removeEventListener('scroll', onScroll);
177
- };
178
- };
179
- };
180
-
181
- const observeElementOffset = createOffsetObserver('element');
182
- const observeWindowOffset = createOffsetObserver('window');
183
- const measureElement = (element, instance) => {
184
- return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
185
- };
186
- const windowScroll = (offset, _ref, instance) => {
187
- var _instance$scrollEleme;
188
-
189
- let {
190
- canSmooth,
191
- sync
192
- } = _ref;
193
- const toOffset = sync ? offset : offset + instance.options.scrollMargin;
194
- (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
195
- [instance.options.horizontal ? 'left' : 'top']: toOffset,
196
- behavior: canSmooth ? 'smooth' : undefined
197
- });
198
- };
199
- const elementScroll = (offset, _ref2, instance) => {
200
- var _instance$scrollEleme2;
201
-
202
- let {
203
- canSmooth,
204
- sync
205
- } = _ref2;
206
- const toOffset = sync ? offset : offset + instance.options.scrollMargin;
207
- (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
208
- [instance.options.horizontal ? 'left' : 'top']: toOffset,
209
- behavior: canSmooth ? 'smooth' : undefined
210
- });
211
- };
212
- class Virtualizer {
213
- constructor(_opts) {
214
- var _this = this;
215
-
216
- this.unsubs = [];
217
- this.scrollElement = null;
218
- this.isScrolling = false;
219
- this.isScrollingTimeoutId = null;
220
- this.measurementsCache = [];
221
- this.itemMeasurementsCache = {};
222
- this.pendingMeasuredCacheIndexes = [];
223
- this.scrollDelta = 0;
224
- this.measureElementCache = {};
225
-
226
- this.getResizeObserver = (() => {
227
- let _ro = null;
228
- return () => {
229
- if (_ro) {
230
- return _ro;
231
- } else if (typeof ResizeObserver !== 'undefined') {
232
- return _ro = new ResizeObserver(entries => {
233
- entries.forEach(entry => {
234
- this._measureElement(entry.target, false);
235
- });
236
- });
237
- } else {
238
- return null;
239
- }
240
- };
241
- })();
242
-
243
- this.range = {
244
- startIndex: 0,
245
- endIndex: 0
246
- };
247
-
248
- this.setOptions = opts => {
249
- Object.entries(opts).forEach(_ref3 => {
250
- let [key, value] = _ref3;
251
- if (typeof value === 'undefined') delete opts[key];
252
- });
253
- this.options = {
254
- debug: false,
255
- initialOffset: 0,
256
- overscan: 1,
257
- paddingStart: 0,
258
- paddingEnd: 0,
259
- scrollPaddingStart: 0,
260
- scrollPaddingEnd: 0,
261
- horizontal: false,
262
- getItemKey: defaultKeyExtractor,
263
- rangeExtractor: defaultRangeExtractor,
264
- enableSmoothScroll: true,
265
- onChange: () => {},
266
- measureElement,
267
- initialRect: {
268
- width: 0,
269
- height: 0
270
- },
271
- scrollMargin: 0,
272
- scrollingDelay: 150,
273
- indexAttribute: 'data-index',
274
- ...opts
275
- };
276
- };
277
-
278
- this.notify = () => {
279
- var _this$options$onChang, _this$options;
280
-
281
- (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
282
- };
283
-
284
- this.cleanup = () => {
285
- this.unsubs.filter(Boolean).forEach(d => d());
286
- this.unsubs = [];
287
- this.scrollElement = null;
288
- };
289
-
290
- this._didMount = () => {
291
- return () => {
292
- var _this$getResizeObserv;
293
-
294
- (_this$getResizeObserv = this.getResizeObserver()) == null ? void 0 : _this$getResizeObserv.disconnect();
295
- this.measureElementCache = {};
296
- this.cleanup();
297
- };
298
- };
299
-
300
- this._willUpdate = () => {
301
- const scrollElement = this.options.getScrollElement();
302
-
303
- if (this.scrollElement !== scrollElement) {
304
- this.cleanup();
305
- this.scrollElement = scrollElement;
306
-
307
- this._scrollToOffset(this.scrollOffset, {
308
- canSmooth: false,
309
- sync: true,
310
- requested: false
311
- });
312
-
313
- this.unsubs.push(this.options.observeElementRect(this, rect => {
314
- this.scrollRect = rect;
315
- this.calculateRange();
316
- }));
317
- this.unsubs.push(this.options.observeElementOffset(this, offset => {
318
- if (this.isScrollingTimeoutId !== null) {
319
- clearTimeout(this.isScrollingTimeoutId);
320
- this.isScrollingTimeoutId = null;
321
- }
322
-
323
- if (this.scrollOffset !== offset) {
324
- this.scrollOffset = offset;
325
- this.isScrolling = true;
326
- this.scrollDelta = 0;
327
- this.isScrollingTimeoutId = setTimeout(() => {
328
- this.isScrollingTimeoutId = null;
329
- this.isScrolling = false;
330
- this.notify();
331
- }, this.options.scrollingDelay);
332
- } else {
333
- this.isScrolling = false;
334
- this.scrollDelta = 0;
335
- }
336
-
337
- this.calculateRange();
338
- }));
339
- } else if (!this.isScrolling) {
340
- this.calculateRange();
341
- }
342
- };
343
-
344
- this.getSize = () => {
345
- return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
346
- };
347
-
348
- this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
349
- const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
350
- this.pendingMeasuredCacheIndexes = [];
351
- const measurements = this.measurementsCache.slice(0, min);
352
-
353
- for (let i = min; i < count; i++) {
354
- const key = getItemKey(i);
355
- const measuredSize = measurementsCache[key];
356
- const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
357
- const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
358
- const end = start + size;
359
- measurements[i] = {
360
- index: i,
361
- start,
362
- size,
363
- end,
364
- key
365
- };
366
- }
367
-
368
- this.measurementsCache = measurements;
369
- return measurements;
370
- }, {
371
- key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
372
- debug: () => this.options.debug
373
- });
374
- this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
375
- const range = calculateRange({
376
- measurements,
377
- outerSize,
378
- scrollOffset
379
- });
380
-
381
- if (range.startIndex !== this.range.startIndex || range.endIndex !== this.range.endIndex) {
382
- this.range = range;
383
- this.notify();
384
- }
385
-
386
- return this.range;
387
- }, {
388
- key: process.env.NODE_ENV !== 'production' && 'calculateRange',
389
- debug: () => this.options.debug
390
- });
391
- this.getIndexes = memo(() => [this.options.rangeExtractor, this.range, this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
392
- return rangeExtractor({ ...range,
393
- overscan,
394
- count: count
395
- });
396
- }, {
397
- key: process.env.NODE_ENV !== 'production' && 'getIndexes',
398
- debug: () => this.options.debug
399
- });
400
-
401
- this.indexFromElement = node => {
402
- const attributeName = this.options.indexAttribute;
403
- const indexStr = node.getAttribute(attributeName);
404
-
405
- if (!indexStr) {
406
- console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
407
- return -1;
408
- }
409
-
410
- return parseInt(indexStr, 10);
411
- };
412
-
413
- this._measureElement = (node, _sync) => {
414
- var _this$itemMeasurement;
415
-
416
- const index = this.indexFromElement(node);
417
- const item = this.measurementsCache[index];
418
-
419
- if (!item) {
420
- return;
421
- }
422
-
423
- const prevNode = this.measureElementCache[item.key];
424
- const ro = this.getResizeObserver();
425
-
426
- if (!node.isConnected) {
427
- if (prevNode) {
428
- ro == null ? void 0 : ro.unobserve(prevNode);
429
- delete this.measureElementCache[item.key];
430
- }
431
-
432
- return;
433
- }
434
-
435
- if (!prevNode || prevNode !== node) {
436
- if (prevNode) {
437
- ro == null ? void 0 : ro.unobserve(prevNode);
438
- }
439
-
440
- this.measureElementCache[item.key] = node;
441
- ro == null ? void 0 : ro.observe(node);
442
- }
443
-
444
- const measuredItemSize = this.options.measureElement(node, this);
445
- const itemSize = (_this$itemMeasurement = this.itemMeasurementsCache[item.key]) != null ? _this$itemMeasurement : item.size;
446
- const delta = measuredItemSize - itemSize;
447
-
448
- if (delta !== 0) {
449
- if (item.start < this.scrollOffset && this.isScrolling && this.destinationOffset === undefined) {
450
- if (process.env.NODE_ENV !== 'production' && this.options.debug) {
451
- console.info('correction', delta);
452
- }
453
-
454
- this.scrollDelta += delta;
455
-
456
- this._scrollToOffset(this.scrollOffset + this.scrollDelta, {
457
- canSmooth: false,
458
- sync: false,
459
- requested: false
460
- });
461
- }
462
-
463
- this.pendingMeasuredCacheIndexes.push(index);
464
- this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
465
- [item.key]: measuredItemSize
466
- };
467
- this.notify();
468
- }
469
- };
470
-
471
- this.measureElement = node => {
472
- if (!node) {
473
- return;
474
- }
475
-
476
- this._measureElement(node, true);
477
- };
478
-
479
- this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements()], (indexes, measurements) => {
480
- const virtualItems = [];
481
-
482
- for (let k = 0, len = indexes.length; k < len; k++) {
483
- const i = indexes[k];
484
- const measurement = measurements[i];
485
- virtualItems.push(measurement);
486
- }
487
-
488
- return virtualItems;
489
- }, {
490
- key: process.env.NODE_ENV !== 'production' && 'getIndexes',
491
- debug: () => this.options.debug
492
- });
493
-
494
- this.scrollToOffset = function (toOffset, _temp) {
495
- let {
496
- align = 'start',
497
- smoothScroll = _this.options.enableSmoothScroll
498
- } = _temp === void 0 ? {} : _temp;
499
- const offset = _this.scrollOffset;
500
-
501
- const size = _this.getSize();
502
-
503
- if (align === 'auto') {
504
- if (toOffset <= offset) {
505
- align = 'start';
506
- } else if (toOffset >= offset + size) {
507
- align = 'end';
508
- } else {
509
- align = 'start';
510
- }
511
- }
512
-
513
- const options = {
514
- canSmooth: smoothScroll,
515
- sync: false,
516
- requested: true
517
- };
518
-
519
- if (align === 'start') {
520
- _this._scrollToOffset(toOffset, options);
521
- } else if (align === 'end') {
522
- _this._scrollToOffset(toOffset - size, options);
523
- } else if (align === 'center') {
524
- _this._scrollToOffset(toOffset - size / 2, options);
525
- }
526
- };
527
-
528
- this.scrollToIndex = function (index, _temp2) {
529
- let {
530
- align = 'auto',
531
- smoothScroll = _this.options.enableSmoothScroll,
532
- ...rest
533
- } = _temp2 === void 0 ? {} : _temp2;
534
-
535
- const measurements = _this.getMeasurements();
536
-
537
- const offset = _this.scrollOffset;
538
-
539
- const size = _this.getSize();
540
-
541
- const {
542
- count
543
- } = _this.options;
544
- const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
545
-
546
- if (!measurement) {
547
- return;
548
- }
549
-
550
- if (align === 'auto') {
551
- if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
552
- align = 'end';
553
- } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
554
- align = 'start';
555
- } else {
556
- return;
557
- }
558
- }
559
-
560
- const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
561
-
562
- _this.scrollToOffset(toOffset, {
563
- align,
564
- smoothScroll,
565
- ...rest
566
- });
567
- };
568
-
569
- this.getTotalSize = () => {
570
- var _this$getMeasurements;
571
-
572
- return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
573
- };
574
-
575
- this._scrollToOffset = (offset, _ref4) => {
576
- let {
577
- requested,
578
- canSmooth,
579
- sync
580
- } = _ref4;
581
- clearTimeout(this.scrollCheckFrame);
582
-
583
- if (requested) {
584
- this.destinationOffset = offset;
585
- }
586
-
587
- this.options.scrollToFn(offset, {
588
- canSmooth,
589
- sync
590
- }, this);
591
- let scrollCheckFrame;
592
-
593
- const check = () => {
594
- let lastOffset = this.scrollOffset;
595
- this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
596
- if (this.scrollCheckFrame !== scrollCheckFrame) {
597
- return;
598
- }
599
-
600
- if (this.scrollOffset === lastOffset) {
601
- this.destinationOffset = undefined;
602
- return;
603
- }
604
-
605
- lastOffset = this.scrollOffset;
606
- check();
607
- }, 100);
608
- };
609
-
610
- check();
611
- };
612
-
613
- this.measure = () => {
614
- this.itemMeasurementsCache = {};
615
- this.notify();
616
- };
617
-
618
- this.setOptions(_opts);
619
- this.scrollRect = this.options.initialRect;
620
- this.scrollOffset = this.options.initialOffset;
621
- this.calculateRange();
622
- }
623
-
624
- }
625
-
626
- const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
627
- while (low <= high) {
628
- const middle = (low + high) / 2 | 0;
629
- const currentValue = getCurrentValue(middle);
630
-
631
- if (currentValue < value) {
632
- low = middle + 1;
633
- } else if (currentValue > value) {
634
- high = middle - 1;
635
- } else {
636
- return middle;
637
- }
638
- }
639
-
640
- if (low > 0) {
641
- return low - 1;
642
- } else {
643
- return 0;
644
- }
645
- };
646
-
647
- function calculateRange(_ref5) {
648
- let {
649
- measurements,
650
- outerSize,
651
- scrollOffset
652
- } = _ref5;
653
- const count = measurements.length - 1;
654
-
655
- const getOffset = index => measurements[index].start;
656
-
657
- const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
658
- let endIndex = startIndex;
659
-
660
- while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
661
- endIndex++;
662
- }
663
-
664
- return {
665
- startIndex,
666
- endIndex
667
- };
668
- }
669
-
670
- exports.Virtualizer = Virtualizer;
671
- exports.defaultKeyExtractor = defaultKeyExtractor;
672
- exports.defaultRangeExtractor = defaultRangeExtractor;
673
- exports.elementScroll = elementScroll;
674
- exports.measureElement = measureElement;
675
- exports.memo = memo;
676
- exports.observeElementOffset = observeElementOffset;
677
- exports.observeElementRect = observeElementRect;
678
- exports.observeWindowOffset = observeWindowOffset;
679
- exports.observeWindowRect = observeWindowRect;
680
- exports.windowScroll = windowScroll;
681
- //# sourceMappingURL=index.js.map