svelte-tiny-virtual-list
Advanced tools
svelte-tiny-virtual-list - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
@@ -561,11 +561,11 @@ (function (global, factory) { | ||
| updateConfig({ itemCount, itemSizeGetter, estimatedItemSize }) { | ||
| if (itemCount !== undefined) { | ||
| if (itemCount != null) { | ||
| this.itemCount = itemCount; | ||
| } | ||
| if (estimatedItemSize !== undefined) { | ||
| if (estimatedItemSize != null) { | ||
| this.estimatedItemSize = estimatedItemSize; | ||
| } | ||
| if (itemSizeGetter !== undefined) { | ||
| if (itemSizeGetter != null) { | ||
| this.itemSizeGetter = itemSizeGetter; | ||
@@ -601,3 +601,3 @@ } | ||
| if (size === undefined || isNaN(size)) { | ||
| if (size == null || isNaN(size)) { | ||
| throw Error(`Invalid size returned for index ${i} of value ${size}`); | ||
@@ -698,3 +698,3 @@ } | ||
| if (typeof start === 'undefined') { | ||
| if (start === undefined) { | ||
| throw Error(`Invalid offset ${offset} specified`); | ||
@@ -827,3 +827,3 @@ } | ||
| /* src\VirtualList.svelte generated by Svelte v3.31.0 */ | ||
| /* src/VirtualList.svelte generated by Svelte v3.31.0 */ | ||
@@ -1074,8 +1074,8 @@ function add_css() { | ||
| let { itemSize } = $$props; | ||
| let { estimatedItemSize } = $$props; | ||
| let { stickyIndices } = $$props; | ||
| let { estimatedItemSize = null } = $$props; | ||
| let { stickyIndices = null } = $$props; | ||
| let { scrollDirection = DIRECTION.VERTICAL } = $$props; | ||
| let { scrollOffset } = $$props; | ||
| let { scrollToIndex } = $$props; | ||
| let { scrollToAlignment } = $$props; | ||
| let { scrollOffset = null } = $$props; | ||
| let { scrollToIndex = null } = $$props; | ||
| let { scrollToAlignment = null } = $$props; | ||
| let { overscanCount = 3 } = $$props; | ||
@@ -1095,3 +1095,3 @@ const dispatchEvent = createEventDispatcher(); | ||
| let state = { | ||
| offset: scrollOffset || scrollToIndex !== undefined && getOffsetForIndex(scrollToIndex) || 0, | ||
| offset: scrollOffset || scrollToIndex != null && getOffsetForIndex(scrollToIndex) || 0, | ||
| scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED | ||
@@ -1120,5 +1120,5 @@ }; | ||
| if (scrollOffset !== undefined) { | ||
| if (scrollOffset != null) { | ||
| scrollTo(scrollOffset); | ||
| } else if (scrollToIndex !== undefined) { | ||
| } else if (scrollToIndex != null) { | ||
| scrollTo(getOffsetForIndex(scrollToIndex)); | ||
@@ -1199,3 +1199,3 @@ } | ||
| if (stickyIndices !== undefined && stickyIndices.length !== 0) { | ||
| if (stickyIndices != null && stickyIndices.length !== 0) { | ||
| stickyIndices.forEach(index => updatedItems.push({ index, style: getStyle(index, true) })); | ||
@@ -1208,5 +1208,5 @@ | ||
| if (typeof start !== "undefined" && typeof stop !== "undefined") { | ||
| if (start !== undefined && stop !== undefined) { | ||
| for (let index = start; index <= stop; index++) { | ||
| if (stickyIndices !== undefined && stickyIndices.includes(index)) { | ||
| if (stickyIndices != null && stickyIndices.includes(index)) { | ||
| continue; | ||
@@ -1213,0 +1213,0 @@ } |
| { | ||
| "name": "svelte-tiny-virtual-list", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪", | ||
@@ -5,0 +5,0 @@ "svelte": "src/index.js", |
| <p align="center"><img src="https://raw.githubusercontent.com/Skayo/svelte-tiny-virtual-list/master/assets/ListLogo.svg" alt="ListLogo" width="225"></p> | ||
| <h2 align="center">svelte-tiny-virtual-list</h2> | ||
| <p align="center">An infinite scroll component for Svelte apps</p> | ||
| <p align="center">A tiny but mighty list virtualization library, with zero dependencies 💪</p> | ||
| <p align="center"> | ||
@@ -20,3 +20,3 @@ <a href="https://npmjs.com/package/svelte-tiny-virtual-list"><img src="https://img.shields.io/npm/v/svelte-tiny-virtual-list?style=for-the-badge" alt="NPM VERSION"></a> | ||
| A tiny but mighty list virtualization library, with zero dependencies 💪 | ||
| Instead of rendering all your list of data in a huge list, the virtual list component just renders the bits that are visible, keeping your page nice and light. | ||
| This is heavily inspired by [react-tiny-virtual-list](https://github.com/clauderic/react-tiny-virtual-list) and uses most of its code and functionality! | ||
@@ -26,3 +26,3 @@ | ||
| - **Tiny & dependency free** – Only 3kb gzipped | ||
| - **Tiny & dependency free** – Only 5kb gzipped | ||
| - **Render millions of items**, without breaking a sweat | ||
@@ -165,4 +165,10 @@ - **Scroll to index** or **set the initial scroll offset** | ||
| Use them like this: | ||
| - `recomputeSizes(startIndex: number)` - This method force recomputes the item sizes after the specified index (these are normally cached). | ||
| - `refresh()` - This method refreshes the currently visible items. | ||
| `VirtualList` has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a `number`, this isn't an issue, as it can compare before and after values and automatically call `recomputeSizes` internally. | ||
| However, if you're passing a function to `itemSize`, that type of comparison is error prone. In that event, you'll need to call `recomputeSizes` manually to inform the `VirtualList` that the size of its items has changed. | ||
| #### Use the methods like this: | ||
| ```svelte | ||
@@ -197,13 +203,2 @@ <script> | ||
| #### `recomputeSizes(startIndex: number)` | ||
| This method force recomputes the item sizes after the specified index (these are normally cached). | ||
| `VirtualList` has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a `number`, this isn't an issue, as it can compare before and after values and automatically call `recomputeSizes` internally. | ||
| However, if you're passing a function to `itemSize`, that type of comparison is error prone. In that event, you'll need to call `recomputeSizes` manually to inform the `VirtualList` that the size of its items has changed. | ||
| #### `refresh()` | ||
| This method refreshes the currently visible items. | ||
| ### Styling | ||
@@ -210,0 +205,0 @@ |
@@ -0,0 +0,0 @@ export const ALIGNMENT = { |
@@ -80,11 +80,11 @@ /* Forked from react-virtualized 💖 */ | ||
| updateConfig({ itemCount, itemSizeGetter, estimatedItemSize }) { | ||
| if (itemCount !== undefined) { | ||
| if (itemCount != null) { | ||
| this.itemCount = itemCount; | ||
| } | ||
| if (estimatedItemSize !== undefined) { | ||
| if (estimatedItemSize != null) { | ||
| this.estimatedItemSize = estimatedItemSize; | ||
| } | ||
| if (itemSizeGetter !== undefined) { | ||
| if (itemSizeGetter != null) { | ||
| this.itemSizeGetter = itemSizeGetter; | ||
@@ -120,3 +120,3 @@ } | ||
| if (size === undefined || isNaN(size)) { | ||
| if (size == null || isNaN(size)) { | ||
| throw Error(`Invalid size returned for index ${i} of value ${size}`); | ||
@@ -217,3 +217,3 @@ } | ||
| if (typeof start === 'undefined') { | ||
| if (start === undefined) { | ||
| throw Error(`Invalid offset ${offset} specified`); | ||
@@ -220,0 +220,0 @@ } |
@@ -0,0 +0,0 @@ /// <reference types="svelte" /> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.72%
115456
- Number of lines in readme file
- decreased by-1.97%
249