Skip to content

Commit d20cdfb

Browse files
jonasgeilerjonasgeiler
committed
refactor: many improvements all around
- Improve component typings - Add svelte-check tool to verify typings - Improve performance and simplify SizeAndPositionManager - Deprecate `children` snippet and use `item` instead - Deprecate `onListItemsUpdate` and use `onItemsUpdated` instead - Bring back some old types that are now migrated to Svelte 5 - Actually export the correct types - Don't use $state for bind:this - Change `height` default to `'100%'` - Get rid of Element.scroll fallback since older browsers are not supported anymore anyways
1 parent a4b5ea5 commit d20cdfb

File tree

18 files changed

+424
-330
lines changed

18 files changed

+424
-330
lines changed

‎.lintstagedrc.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"*.{js,ts,css,json}": "biome check",
3-
"*.{js,ts,svelte}": "eslint",
3+
"*.{js,svelte}": "eslint",
44
"*.{js,ts,svelte,css,html,json,yml,yaml,md}": "prettier --check",
5-
"*.{test,spec}.{js,ts}": "vitest related --run",
5+
"*.{js,ts}": "vitest related --run",
66
"e2e/*.{js,ts}": "playwright test"
77
}

‎README.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -107,23 +107,23 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/jonas
107107

108108
### Props
109109

110-
| Property | Type | Required? | Description |
111-
| ----------------- | -------------------------------------------------- | :-------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
112-
| width | `number \| string` | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
113-
| height | `number \| string` | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
114-
| itemCount | `number` | ✓ | The number of items you want to render |
115-
| itemSize | `number \| number[] \| (index: number) => number` | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |
116-
| scrollDirection | `string` | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
117-
| scrollOffset | `number` | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |
118-
| scrollToIndex | `number` | | Item index to scroll to (by forcefully scrolling if necessary) |
119-
| scrollToAlignment | `string` | | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
120-
| scrollToBehaviour | `string` | | Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'`, `'smooth'` or `'instant'` (default). |
121-
| stickyIndices | `number[]` | | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) |
122-
| overscanCount | `number` | | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
123-
| estimatedItemSize | `number` | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
124-
| getKey | `(index: number) => any` | | Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index. |
125-
| onAfterScroll | `({ event: ScrollEvent, offset: number }) => void` | | Function that fires after handling the scroll event. Props: `event: ScrollEvent` - The original scroll event, `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft` |
126-
| onListItemsUpdate | `({ start: number, end: number }) => void` | | Function that fires when the visible items are updated. Props: `start: number` - Index of the first visible item, `end: number` - Index of the last visible item. |
110+
| Property | Type | Default | Description |
111+
| ----------------- | -------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
112+
| width | `number \| string` | REQUIRED or `'100%'` | Width of the list view box. When `scrollDirection` is `'horizontal'`, this property is required to be a `number` and determines the number of rendered items. |
113+
| height | `number \| string` | REQUIRED or `'100%'` | Height of the list view box. When `scrollDirection` is `'vertical'`, this property is required to be a `number` and determines the number of rendered items. |
114+
| itemCount | `number` | REQUIRED | The number of items you want to render. |
115+
| itemSize | `number \| number[] \| (index: number) => number` | REQUIRED | Either a fixed height/width (depending on the `scrollDirection`), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number) => number`. |
116+
| scrollDirection | `'vertical' \| 'horizontal'` | `'vertical'` | Whether the list should scroll vertically or horizontally. |
117+
| scrollOffset | `number` | `0` | Used to control the scroll offset, but also useful for setting an initial scroll offset. |
118+
| scrollToIndex | `number` | `-1` | Item index to scroll to (by forcefully scrolling if necessary). |
119+
| scrollToAlignment | `'start' \| 'center' \| 'end' \| 'auto'` | `'start'` | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. Use `'auto'` to scroll the least amount required to ensure that the specified `scrollToIndex` item is fully visible. |
120+
| scrollToBehaviour | `'smooth' \| 'instant' \| 'auto'` | `'instant'` | Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. See: [Element: scroll() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll#behavior). |
121+
| stickyIndices | `number[]` | `[]` | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) |
122+
| overscanCount | `number` | `3` | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
123+
| estimatedItemSize | `number` | `0` | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
124+
| getKey | `((index: number) => any) \| null` | `undefined` | Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index. |
125+
| onAfterScroll | `({ event: ScrollEvent, offset: number }) => void` | `undefined` | Function that fires after handling the scroll event. Props: `event: ScrollEvent` - The original scroll event, `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft` |
126+
| onListItemsUpdate | `({ start: number, end: number }) => void` | `undefined` | Function that fires when the visible items are updated. Props: `start: number` - Index of the first visible item, `end: number` - Index of the last visible item. |
127127

128128
### Snippets
129129

@@ -221,4 +221,4 @@ You can style the elements of the virtual list like this:
221221

222222
## License
223223

224-
[MIT License](https://github.com/jonasgeiler/svelte-tiny-virtual-list/blob/master/LICENSE.md)
224+
[MIT License](https://github.com/jonasgeiler/svelte-tiny-virtual-list/blob/main/LICENSE.md)

‎jsconfig.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
22
"extends": "./.svelte-kit/tsconfig.json",
33
"compilerOptions": {
4+
"allowJs": true,
5+
"checkJs": true,
46
"esModuleInterop": true,
57
"forceConsistentCasingInFileNames": true,
68
"resolveJsonModule": true,
79
"skipLibCheck": true,
810
"sourceMap": true,
911
"module": "NodeNext",
10-
"moduleResolution": "NodeNext"
12+
"moduleResolution": "NodeNext",
13+
"strict": true
1114
}
1215
}

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"check:prettier": "prettier --check .",
2525
"check:vitest": "vitest run",
2626
"check:playwright": "playwright test",
27+
"check:svelte": "svelte-kit sync && (svelte-check --tsconfig ./jsconfig.json || echo 'Fix svelte-check errors!')",
2728
"fix": "pnpm run fix:biome && pnpm run fix:eslint && pnpm run fix:prettier",
2829
"fix:biome": "biome check --fix",
2930
"fix:eslint": "eslint --fix .",
@@ -62,6 +63,7 @@
6263
"prettier-plugin-svelte": "^3.4.0",
6364
"publint": "^0.3.12",
6465
"svelte": "^5.34.5",
66+
"svelte-check": "^4.2.1",
6567
"svelte-infinite-loading": "1.4.0",
6668
"typescript": "^5.3.2",
6769
"vite": "^6.3.5",

‎pnpm-lock.yaml‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)