@tanstack/solid-virtual 3.0.0-beta.22 → 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,682 +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
-
447
- if (measuredItemSize !== itemSize) {
448
- if (item.start < this.scrollOffset) {
449
- if (process.env.NODE_ENV !== 'production' && this.options.debug) {
450
- console.info('correction', measuredItemSize - itemSize);
451
- }
452
-
453
- if (this.destinationOffset === undefined) {
454
- this.scrollDelta += measuredItemSize - itemSize;
455
-
456
- this._scrollToOffset(this.scrollOffset + this.scrollDelta, {
457
- canSmooth: false,
458
- sync: false,
459
- requested: false
460
- });
461
- }
462
- }
463
-
464
- this.pendingMeasuredCacheIndexes.push(index);
465
- this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
466
- [item.key]: measuredItemSize
467
- };
468
- this.notify();
469
- }
470
- };
471
-
472
- this.measureElement = node => {
473
- if (!node) {
474
- return;
475
- }
476
-
477
- this._measureElement(node, true);
478
- };
479
-
480
- this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements()], (indexes, measurements) => {
481
- const virtualItems = [];
482
-
483
- for (let k = 0, len = indexes.length; k < len; k++) {
484
- const i = indexes[k];
485
- const measurement = measurements[i];
486
- virtualItems.push(measurement);
487
- }
488
-
489
- return virtualItems;
490
- }, {
491
- key: process.env.NODE_ENV !== 'production' && 'getIndexes',
492
- debug: () => this.options.debug
493
- });
494
-
495
- this.scrollToOffset = function (toOffset, _temp) {
496
- let {
497
- align = 'start',
498
- smoothScroll = _this.options.enableSmoothScroll
499
- } = _temp === void 0 ? {} : _temp;
500
- const offset = _this.scrollOffset;
501
-
502
- const size = _this.getSize();
503
-
504
- if (align === 'auto') {
505
- if (toOffset <= offset) {
506
- align = 'start';
507
- } else if (toOffset >= offset + size) {
508
- align = 'end';
509
- } else {
510
- align = 'start';
511
- }
512
- }
513
-
514
- const options = {
515
- canSmooth: smoothScroll,
516
- sync: false,
517
- requested: true
518
- };
519
-
520
- if (align === 'start') {
521
- _this._scrollToOffset(toOffset, options);
522
- } else if (align === 'end') {
523
- _this._scrollToOffset(toOffset - size, options);
524
- } else if (align === 'center') {
525
- _this._scrollToOffset(toOffset - size / 2, options);
526
- }
527
- };
528
-
529
- this.scrollToIndex = function (index, _temp2) {
530
- let {
531
- align = 'auto',
532
- smoothScroll = _this.options.enableSmoothScroll,
533
- ...rest
534
- } = _temp2 === void 0 ? {} : _temp2;
535
-
536
- const measurements = _this.getMeasurements();
537
-
538
- const offset = _this.scrollOffset;
539
-
540
- const size = _this.getSize();
541
-
542
- const {
543
- count
544
- } = _this.options;
545
- const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
546
-
547
- if (!measurement) {
548
- return;
549
- }
550
-
551
- if (align === 'auto') {
552
- if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
553
- align = 'end';
554
- } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
555
- align = 'start';
556
- } else {
557
- return;
558
- }
559
- }
560
-
561
- const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
562
-
563
- _this.scrollToOffset(toOffset, {
564
- align,
565
- smoothScroll,
566
- ...rest
567
- });
568
- };
569
-
570
- this.getTotalSize = () => {
571
- var _this$getMeasurements;
572
-
573
- return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
574
- };
575
-
576
- this._scrollToOffset = (offset, _ref4) => {
577
- let {
578
- requested,
579
- canSmooth,
580
- sync
581
- } = _ref4;
582
- clearTimeout(this.scrollCheckFrame);
583
-
584
- if (requested) {
585
- this.destinationOffset = offset;
586
- }
587
-
588
- this.options.scrollToFn(offset, {
589
- canSmooth,
590
- sync
591
- }, this);
592
- let scrollCheckFrame;
593
-
594
- const check = () => {
595
- let lastOffset = this.scrollOffset;
596
- this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
597
- if (this.scrollCheckFrame !== scrollCheckFrame) {
598
- return;
599
- }
600
-
601
- if (this.scrollOffset === lastOffset) {
602
- this.destinationOffset = undefined;
603
- return;
604
- }
605
-
606
- lastOffset = this.scrollOffset;
607
- check();
608
- }, 100);
609
- };
610
-
611
- check();
612
- };
613
-
614
- this.measure = () => {
615
- this.itemMeasurementsCache = {};
616
- this.notify();
617
- };
618
-
619
- this.setOptions(_opts);
620
- this.scrollRect = this.options.initialRect;
621
- this.scrollOffset = this.options.initialOffset;
622
- this.calculateRange();
623
- }
624
-
625
- }
626
-
627
- const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
628
- while (low <= high) {
629
- const middle = (low + high) / 2 | 0;
630
- const currentValue = getCurrentValue(middle);
631
-
632
- if (currentValue < value) {
633
- low = middle + 1;
634
- } else if (currentValue > value) {
635
- high = middle - 1;
636
- } else {
637
- return middle;
638
- }
639
- }
640
-
641
- if (low > 0) {
642
- return low - 1;
643
- } else {
644
- return 0;
645
- }
646
- };
647
-
648
- function calculateRange(_ref5) {
649
- let {
650
- measurements,
651
- outerSize,
652
- scrollOffset
653
- } = _ref5;
654
- const count = measurements.length - 1;
655
-
656
- const getOffset = index => measurements[index].start;
657
-
658
- const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
659
- let endIndex = startIndex;
660
-
661
- while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
662
- endIndex++;
663
- }
664
-
665
- return {
666
- startIndex,
667
- endIndex
668
- };
669
- }
670
-
671
- exports.Virtualizer = Virtualizer;
672
- exports.defaultKeyExtractor = defaultKeyExtractor;
673
- exports.defaultRangeExtractor = defaultRangeExtractor;
674
- exports.elementScroll = elementScroll;
675
- exports.measureElement = measureElement;
676
- exports.memo = memo;
677
- exports.observeElementOffset = observeElementOffset;
678
- exports.observeElementRect = observeElementRect;
679
- exports.observeWindowOffset = observeWindowOffset;
680
- exports.observeWindowRect = observeWindowRect;
681
- exports.windowScroll = windowScroll;
682
- //# sourceMappingURL=index.js.map