@humanspeak/svelte-virtual-list 0.2.2 โ†’ 0.2.4

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.
Files changed (3) hide show
  1. package/README.md +33 -173
  2. package/package.json +77 -76
  3. /package/{LICENSE.md โ†’ LICENSE} +0 -0
package/README.md CHANGED
@@ -1,28 +1,32 @@
1
- # Svelte Virtual List
1
+ # @humanspeak/svelte-virtual-list
2
2
 
3
3
  [![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-virtual-list.svg)](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
4
4
  [![Build Status](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/npm-publish.yml)
5
5
  [![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-virtual-list/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-virtual-list?branch=main)
6
- [![License](https://img.shields.io/npm/l/@humanspeak/svelte-virtual-list.svg)](https://github.com/humanspeak/svelte-virtual-list/blob/main/LICENSE.md)
6
+ [![License](https://img.shields.io/npm/l/@humanspeak/svelte-virtual-list.svg)](https://github.com/humanspeak/svelte-virtual-list/blob/main/LICENSE)
7
7
  [![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-virtual-list.svg)](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
8
8
  [![CodeQL](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-virtual-list/actions/workflows/codeql.yml)
9
+ [![Code Style: Trunk](https://img.shields.io/badge/code%20style-trunk-blue.svg)](https://trunk.io)
9
10
  [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
10
11
  [![Types](https://img.shields.io/npm/types/@humanspeak/svelte-virtual-list.svg)](https://www.npmjs.com/package/@humanspeak/svelte-virtual-list)
11
12
  [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-virtual-list/graphs/commit-activity)
12
13
 
13
- A virtual list component for Svelte applications. Built for Svelte 5 with TypeScript support.
14
+ A high-performance virtual list component for Svelte 5 applications that efficiently renders large datasets with minimal memory usage.
14
15
 
15
16
  ## Features
16
17
 
17
- - Efficient rendering of large lists with dynamic heights
18
- - Bi-directional scrolling (top-to-bottom and bottom-to-top)
19
- - Automatic resize handling and content updates
20
- - TypeScript support with full type safety
21
- - SSR compatible with hydration support
22
- - Svelte 5 runes and snippets support
23
- - Customizable styling with class props
24
- - Debug mode for development
25
- - Smooth scrolling with configurable buffer zones
18
+ - ๐Ÿ“ Dynamic item height handling - no fixed height required
19
+ - ๐Ÿ”„ Bi-directional scrolling support (top-to-bottom and bottom-to-top)
20
+ - ๐Ÿ”„ Automatic resize handling for dynamic content
21
+ - ๐Ÿ“ TypeScript support with full type safety
22
+ - ๐Ÿš€ SSR compatible with hydration support
23
+ - โœจ Svelte 5 runes and snippets support
24
+ - ๐ŸŽจ Customizable styling with class props
25
+ - ๐Ÿ› Debug mode for development
26
+ - ๐ŸŽฏ Smooth scrolling with configurable buffer zones
27
+ - ๐Ÿง  Memory-optimized for 10k+ items
28
+ - ๐Ÿงช Comprehensive test coverage (vitest and playwright)
29
+ - ๐Ÿš€ Progressive initialization for large datasets
26
30
 
27
31
  ## Installation
28
32
 
@@ -49,155 +53,8 @@ npm install @humanspeak/svelte-virtual-list
49
53
  </SvelteVirtualList>
50
54
  ```
51
55
 
52
- ## Props
53
-
54
- | Prop | Type | Default | Description |
55
- | ------------------- | -------------------------------- | --------------- | ------------------------------------------- |
56
- | `items` | `T[]` | Required | Array of items to render |
57
- | `defaultItemHeight` | `number` | `40` | Initial height for items before measurement |
58
- | `mode` | `'topToBottom' \| 'bottomToTop'` | `'topToBottom'` | Scroll direction |
59
- | `bufferSize` | `number` | `20` | Number of items to render outside viewport |
60
- | `debug` | `boolean` | `false` | Enable debug logging and visualizations |
61
- | `containerClass` | `string` | `''` | Class for outer container |
62
- | `viewportClass` | `string` | `''` | Class for scrollable viewport |
63
- | `contentClass` | `string` | `''` | Class for content wrapper |
64
- | `itemsClass` | `string` | `''` | Class for items container |
65
-
66
- ## Dependencies
67
-
68
- - [esm-env](https://github.com/benmccann/esm-env) - svelte5 suggested environment detecting
69
-
70
- ## Usage
71
-
72
- ```svelte
73
- <script lang="ts">
74
- import SvelteVirtualList from '@humanspeak/svelte-virtual-list'
75
- import { onMount } from 'svelte'
76
-
77
- type Item = {
78
- id: number
79
- text: string
80
- }
81
-
82
- const items: Item[] = Array.from({ length: 10000 }, (_, i) => ({
83
- id: i,
84
- text: `Item ${i}`
85
- }))
86
- </script>
87
-
88
- <div class="grid grid-cols-2 gap-8">
89
- <!-- Top to bottom scrolling -->
90
- <div>
91
- <SvelteVirtualList {items}>
92
- {#snippet renderItem(item: Item, index: number)}
93
- <div>
94
- {item.text}
95
- </div>
96
- {/snippet}
97
- </SvelteVirtualList>
98
- </div>
99
-
100
- <!-- Bottom to top scrolling -->
101
- <div>
102
- <SvelteVirtualList {items} mode="bottomToTop">
103
- {#snippet renderItem(item: Item, index: number)}
104
- <div>
105
- {item.text}
106
- </div>
107
- {/snippet}
108
- </SvelteVirtualList>
109
- </div>
110
- </div>
111
- ```
112
-
113
- ## Development
114
-
115
- ```bash
116
- npm install
117
- npm run dev
118
- ```
119
-
120
- ## Testing
121
-
122
- ```bash
123
- npm run test
124
- ```
125
-
126
- ## Building
127
-
128
- ```bash
129
- npm run build
130
- ```
131
-
132
- ## License
133
-
134
- [MIT](LICENSE.md)
135
-
136
- ## Key Features
137
-
138
- - Dynamic item height handling - no fixed height required
139
- - Bi-directional scrolling support (top-to-bottom and bottom-to-top)
140
- - Automatic resize handling for dynamic content
141
- - Efficient rendering of large lists
142
- - TypeScript support
143
- - Customizable styling
144
- - Debug mode for development
145
- - Smooth scrolling with buffer zones
146
- - SSR compatible
147
- - Svelte 5 runes support
148
-
149
- ## Usage Examples
150
-
151
- ### Basic Usage
152
-
153
- ### Default display
154
-
155
- ```svelte
156
- <script lang="ts">
157
- import SvelteVirtualList from '@humanspeak/svelte-virtual-list'
158
-
159
- const items = Array.from({ length: 1000 }, (_, i) => ({
160
- id: i,
161
- text: `Item ${i}`
162
- }))
163
- </script>
164
-
165
- <SvelteVirtualList {items}>
166
- {#snippet renderItem(item)}
167
- <div>
168
- {item.text}
169
- </div>
170
- {/snippet}
171
- </SvelteVirtualList>
172
- ```
173
-
174
- ### Bottom-to-Top Scrolling
175
-
176
- The component supports reverse scrolling, which is useful for chat applications or logs:
177
-
178
- ```svelte
179
- <SvelteVirtualList {items} mode="bottomToTop">
180
- {#snippet renderItem(item)}
181
- <div>{item.text}</div>
182
- {/snippet}
183
- </SvelteVirtualList>
184
- ```
185
-
186
56
  ## Advanced Features
187
57
 
188
- ### Auto-resize Handling
189
-
190
- The component automatically handles:
191
-
192
- - Dynamic content changes within items
193
- - Window resize events
194
- - Container resize events
195
- - Dynamic height calculations
196
-
197
- No manual intervention is needed when item contents or dimensions change.
198
-
199
- ## Advanced Usage
200
-
201
58
  ### Chat Application Example
202
59
 
203
60
  ```svelte
@@ -229,20 +86,21 @@ No manual intervention is needed when item contents or dimensions change.
229
86
  {/snippet}
230
87
  </SvelteVirtualList>
231
88
  </div>
89
+ ```
232
90
 
233
- <style>
234
- .message-container {
235
- padding: 1rem;
236
- border-radius: 0.5rem;
237
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
238
- }
91
+ ## Props
239
92
 
240
- .timestamp {
241
- font-size: 0.875rem;
242
- color: #6b7280;
243
- }
244
- </style>
245
- ```
93
+ | Prop | Type | Default | Description |
94
+ | ------------------- | -------------------------------- | --------------- | ------------------------------------------- |
95
+ | `items` | `T[]` | Required | Array of items to render |
96
+ | `defaultItemHeight` | `number` | `40` | Initial height for items before measurement |
97
+ | `mode` | `'topToBottom' \| 'bottomToTop'` | `'topToBottom'` | Scroll direction |
98
+ | `bufferSize` | `number` | `20` | Number of items to render outside viewport |
99
+ | `debug` | `boolean` | `false` | Enable debug logging and visualizations |
100
+ | `containerClass` | `string` | `''` | Class for outer container |
101
+ | `viewportClass` | `string` | `''` | Class for scrollable viewport |
102
+ | `contentClass` | `string` | `''` | Class for content wrapper |
103
+ | `itemsClass` | `string` | `''` | Class for items container |
246
104
 
247
105
  ## Performance Considerations
248
106
 
@@ -252,8 +110,10 @@ No manual intervention is needed when item contents or dimensions change.
252
110
  - Resize observers handle container/content changes
253
111
  - Virtual DOM updates are batched for efficiency
254
112
 
255
- ## Related
113
+ ## License
114
+
115
+ MIT ยฉ [Humanspeak, Inc.](LICENSE)
256
116
 
257
- - [Svelte](https://svelte.dev) - JavaScript front-end framework
117
+ ## Credits
258
118
 
259
119
  Made with โ™ฅ by [Humanspeak](https://humanspeak.com)
package/package.json CHANGED
@@ -1,113 +1,107 @@
1
1
  {
2
2
  "name": "@humanspeak/svelte-virtual-list",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "description": "A lightweight, high-performance virtual list component for Svelte 5 that renders large datasets with minimal memory usage. Features include dynamic height support, smooth scrolling, TypeScript support, and efficient DOM recycling. Ideal for infinite scrolling lists, data tables, chat interfaces, and any application requiring the rendering of thousands of items without compromising performance. Zero dependencies and fully customizable.",
5
+ "keywords": [
6
+ "svelte",
7
+ "virtual-list",
8
+ "virtual-scroll",
9
+ "infinite-scroll",
10
+ "performance",
11
+ "ui-component",
12
+ "svelte5",
13
+ "dom-recycling",
14
+ "large-lists",
15
+ "scroll-optimization"
16
+ ],
17
+ "homepage": "https://virtuallist.svelte.page",
18
+ "bugs": {
19
+ "url": "https://github.com/humanspeak/svelte-virtual-list/issues"
20
+ },
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/humanspeak/svelte-virtual-list.git"
24
+ },
25
+ "funding": {
26
+ "type": "github",
27
+ "url": "https://github.com/sponsors/humanspeak"
28
+ },
29
+ "license": "MIT",
30
+ "author": "Humanspeak, Inc.",
31
+ "sideEffects": [
32
+ "**/*.css"
33
+ ],
5
34
  "type": "module",
6
- "svelte": "./dist/index.js",
7
- "types": "./dist/index.d.ts",
8
35
  "exports": {
9
36
  ".": {
10
37
  "types": "./dist/index.d.ts",
11
38
  "svelte": "./dist/index.js"
12
39
  }
13
40
  },
41
+ "svelte": "./dist/index.js",
42
+ "types": "./dist/index.d.ts",
14
43
  "files": [
15
44
  "dist",
16
45
  "!dist/**/*.test.*",
17
46
  "!dist/**/*.spec.*"
18
47
  ],
19
- "sideEffects": [
20
- "**/*.css"
21
- ],
22
48
  "scripts": {
23
- "dev": "vite dev",
24
49
  "build": "vite build && npm run package",
25
- "preview": "vite preview",
26
- "package": "svelte-kit sync && svelte-package && publint",
27
- "prepublishOnly": "npm run package",
28
50
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
29
51
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
30
- "test": "vitest run --coverage",
31
- "test:only": "vitest run",
32
- "test:watch": "vitest",
52
+ "dev": "vite dev",
53
+ "format": "prettier --write .",
33
54
  "lint": "prettier --check . && eslint .",
34
55
  "lint:fix": "npm run format && eslint . --fix",
35
- "format": "prettier --write .",
56
+ "package": "svelte-kit sync && svelte-package && publint",
57
+ "prepublishOnly": "npm run package",
58
+ "preview": "vite preview",
59
+ "test": "vitest run --coverage",
60
+ "test:all": "npm run test && npm run test:e2e",
36
61
  "test:e2e": "playwright test",
37
- "test:e2e:ui": "playwright test --ui",
38
62
  "test:e2e:debug": "playwright test --debug",
39
- "test:e2e:report": "playwright show-report"
63
+ "test:e2e:report": "playwright show-report",
64
+ "test:e2e:ui": "playwright test --ui",
65
+ "test:only": "vitest run",
66
+ "test:watch": "vitest"
40
67
  },
41
68
  "dependencies": {
42
- "esm-env": "^1.2.1"
43
- },
44
- "peerDependencies": {
45
- "svelte": "^5.0.0"
69
+ "esm-env": "^1.2.2"
46
70
  },
47
71
  "devDependencies": {
48
- "@eslint/js": "^9.17.0",
72
+ "@eslint/js": "^9.18.0",
49
73
  "@playwright/test": "^1.49.1",
50
- "@sveltejs/adapter-auto": "^3.3.1",
51
- "@sveltejs/kit": "^2.15.2",
52
- "@sveltejs/package": "^2.3.7",
74
+ "@sveltejs/adapter-auto": "^4.0.0",
75
+ "@sveltejs/kit": "^2.16.1",
76
+ "@sveltejs/package": "^2.3.8",
53
77
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
54
78
  "@testing-library/jest-dom": "^6.6.3",
55
79
  "@testing-library/svelte": "^5.2.6",
56
- "@testing-library/user-event": "^14.5.2",
57
- "@types/node": "^22.10.5",
58
- "@typescript-eslint/eslint-plugin": "^8.19.1",
59
- "@typescript-eslint/parser": "^8.19.1",
60
- "@vitest/coverage-v8": "^3.0.0-beta.3",
61
- "eslint": "^9.17.0",
62
- "eslint-config-prettier": "^9.1.0",
80
+ "@testing-library/user-event": "^14.6.0",
81
+ "@types/node": "^22.10.7",
82
+ "@typescript-eslint/eslint-plugin": "^8.21.0",
83
+ "@typescript-eslint/parser": "^8.21.0",
84
+ "@vitest/coverage-v8": "^3.0.3",
85
+ "eslint": "^9.18.0",
86
+ "eslint-config-prettier": "^10.0.1",
63
87
  "eslint-plugin-svelte": "^2.46.1",
64
88
  "globals": "^15.14.0",
65
- "jsdom": "^25.0.1",
89
+ "jsdom": "^26.0.0",
66
90
  "prettier": "^3.4.2",
67
91
  "prettier-plugin-organize-imports": "^4.1.0",
68
- "prettier-plugin-svelte": "^3.3.2",
69
- "publint": "^0.3.0",
70
- "svelte": "^5.16.6",
71
- "svelte-check": "^4.1.1",
72
- "typescript": "^5.7.2",
73
- "vite": "^6.0.7",
74
- "vitest": "^3.0.0-beta.3"
92
+ "prettier-plugin-svelte": "^3.3.3",
93
+ "publint": "^0.3.2",
94
+ "svelte": "^5.19.1",
95
+ "svelte-check": "^4.1.4",
96
+ "typescript": "^5.7.3",
97
+ "vite": "^6.0.11",
98
+ "vitest": "^3.0.3"
75
99
  },
76
- "keywords": [
77
- "svelte",
78
- "virtual-list",
79
- "virtual-scroll",
80
- "infinite-scroll",
81
- "performance",
82
- "ui-component",
83
- "svelte5",
84
- "dom-recycling",
85
- "large-lists",
86
- "scroll-optimization"
87
- ],
88
- "tags": [
89
- "svelte",
90
- "virtual-list",
91
- "virtual-scroll",
92
- "virtual-scroller",
93
- "infinite-scroll",
94
- "performance",
95
- "ui-component",
96
- "svelte5"
97
- ],
98
- "author": "Humanspeak, Inc.",
99
- "license": "MIT",
100
- "repository": {
101
- "type": "git",
102
- "url": "git+https://github.com/humanspeak/svelte-virtual-list.git"
103
- },
104
- "homepage": "https://virtuallist.svelte.page",
105
- "bugs": {
106
- "url": "https://github.com/humanspeak/svelte-virtual-list/issues"
100
+ "peerDependencies": {
101
+ "svelte": "^5.0.0"
107
102
  },
108
- "funding": {
109
- "type": "github",
110
- "url": "https://github.com/sponsors/humanspeak"
103
+ "volta": {
104
+ "node": "22.13.0"
111
105
  },
112
106
  "publishConfig": {
113
107
  "access": "public"
@@ -117,7 +111,14 @@
117
111
  "cookie": "^0.7.0"
118
112
  }
119
113
  },
120
- "volta": {
121
- "node": "22.12.0"
122
- }
114
+ "tags": [
115
+ "svelte",
116
+ "virtual-list",
117
+ "virtual-scroll",
118
+ "virtual-scroller",
119
+ "infinite-scroll",
120
+ "performance",
121
+ "ui-component",
122
+ "svelte5"
123
+ ]
123
124
  }
/package/{LICENSE.md โ†’ LICENSE} RENAMED
File without changes