@humanspeak/svelte-virtual-list 0.2.0 → 0.2.2

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 (5) hide show
  1. package/README.md +2 -2
  2. package/dist/SvelteVirtualList.svelte +7 -4
  3. package/dist/SvelteVirtualList.svelte.d.ts +1 -0
  4. package/dist/types.d.ts +2 -0
  5. package/package.json +12 -7
package/README.md CHANGED
@@ -3,7 +3,7 @@
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)
6
+ [![License](https://img.shields.io/npm/l/@humanspeak/svelte-virtual-list.svg)](https://github.com/humanspeak/svelte-virtual-list/blob/main/LICENSE.md)
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
9
  [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
@@ -131,7 +131,7 @@ npm run build
131
131
 
132
132
  ## License
133
133
 
134
- [MIT](LICENSE)
134
+ [MIT](LICENSE.md)
135
135
 
136
136
  ## Key Features
137
137
 
package/dist/SvelteVirtualList.svelte CHANGED
@@ -15,6 +15,7 @@
15
15
  - `contentClass` - Custom class for content wrapper
16
16
  - `itemsClass` - Custom class for items wrapper
17
17
  - `debugFunction` - Custom debug logging function
18
+ - `testId` - Base test ID for component elements
18
19
 
19
20
  Usage:
20
21
  ```svelte
@@ -150,7 +151,8 @@
150
151
  itemsClass, // Custom class for the items wrapper
151
152
  debugFunction, // Custom debug logging function
152
153
  mode = 'topToBottom', // Scroll direction mode
153
- bufferSize = 20 // Number of items to render outside visible area
154
+ bufferSize = 20, // Number of items to render outside visible area
155
+ testId // Base test ID for component elements (undefined = no data-testid attributes)
154
156
  }: SvelteVirtualListProps = $props()
155
157
 
156
158
  /**
@@ -550,14 +552,14 @@
550
552
  -->
551
553
  <div
552
554
  id="virtual-list-container"
553
- data-testid="virtual-list-container"
555
+ {...testId ? { 'data-testid': `${testId}-container` } : {}}
554
556
  class={containerClass ?? 'virtual-list-container'}
555
557
  bind:this={containerElement}
556
558
  >
557
559
  <!-- Viewport handles scrolling -->
558
560
  <div
559
561
  id="virtual-list-viewport"
560
- data-testid="virtual-list-viewport"
562
+ {...testId ? { 'data-testid': `${testId}-viewport` } : {}}
561
563
  class={viewportClass ?? 'virtual-list-viewport'}
562
564
  bind:this={viewportElement}
563
565
  onscroll={handleScroll}
@@ -565,13 +567,14 @@
565
567
  <!-- Content provides full scrollable height -->
566
568
  <div
567
569
  id="virtual-list-content"
570
+ {...testId ? { 'data-testid': `${testId}-content` } : {}}
568
571
  class={contentClass ?? 'virtual-list-content'}
569
- data-testid="virtual-list-content"
570
572
  style:height="{Math.max(height, items.length * calculatedItemHeight)}px"
571
573
  >
572
574
  <!-- Items container is translated to show correct items -->
573
575
  <div
574
576
  id="virtual-list-items"
577
+ {...testId ? { 'data-testid': `${testId}-items` } : {}}
575
578
  class={itemsClass ?? 'virtual-list-items'}
576
579
  style:transform="translateY({calculateTransformY(
577
580
  mode,
package/dist/SvelteVirtualList.svelte.d.ts CHANGED
@@ -15,6 +15,7 @@ import type { SvelteVirtualListProps } from './types.js';
15
15
  * - `contentClass` - Custom class for content wrapper
16
16
  * - `itemsClass` - Custom class for items wrapper
17
17
  * - `debugFunction` - Custom debug logging function
18
+ * - `testId` - Base test ID for component elements
18
19
  *
19
20
  * Usage:
20
21
  * ```svelte
package/dist/types.d.ts CHANGED
@@ -23,6 +23,7 @@ export type SvelteVirtualListMode = 'topToBottom' | 'bottomToTop';
23
23
  * @property {SvelteVirtualListMode} [mode='topToBottom'] - Determines the scroll and render direction.
24
24
  * @property {Snippet<[item: any, index: number]>} renderItem - Svelte snippet function that defines
25
25
  * how each item should be rendered. Receives the item and its index as arguments.
26
+ * @property {string} [testId] - Base test ID for component elements to facilitate testing.
26
27
  * @property {string} [viewportClass] - CSS class to apply to the scrollable viewport element.
27
28
  */
28
29
  export type SvelteVirtualListProps = {
@@ -36,6 +37,7 @@ export type SvelteVirtualListProps = {
36
37
  itemsClass?: string;
37
38
  mode?: SvelteVirtualListMode;
38
39
  renderItem: Snippet<[item: any, index: number]>;
40
+ testId?: string;
39
41
  viewportClass?: string;
40
42
  };
41
43
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humanspeak/svelte-virtual-list",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
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
5
  "type": "module",
6
6
  "svelte": "./dist/index.js",
@@ -32,7 +32,11 @@
32
32
  "test:watch": "vitest",
33
33
  "lint": "prettier --check . && eslint .",
34
34
  "lint:fix": "npm run format && eslint . --fix",
35
- "format": "prettier --write ."
35
+ "format": "prettier --write .",
36
+ "test:e2e": "playwright test",
37
+ "test:e2e:ui": "playwright test --ui",
38
+ "test:e2e:debug": "playwright test --debug",
39
+ "test:e2e:report": "playwright show-report"
36
40
  },
37
41
  "dependencies": {
38
42
  "esm-env": "^1.2.1"
@@ -42,16 +46,17 @@
42
46
  },
43
47
  "devDependencies": {
44
48
  "@eslint/js": "^9.17.0",
49
+ "@playwright/test": "^1.49.1",
45
50
  "@sveltejs/adapter-auto": "^3.3.1",
46
- "@sveltejs/kit": "^2.15.1",
51
+ "@sveltejs/kit": "^2.15.2",
47
52
  "@sveltejs/package": "^2.3.7",
48
53
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
49
54
  "@testing-library/jest-dom": "^6.6.3",
50
55
  "@testing-library/svelte": "^5.2.6",
51
56
  "@testing-library/user-event": "^14.5.2",
52
57
  "@types/node": "^22.10.5",
53
- "@typescript-eslint/eslint-plugin": "^8.19.0",
54
- "@typescript-eslint/parser": "^8.19.0",
58
+ "@typescript-eslint/eslint-plugin": "^8.19.1",
59
+ "@typescript-eslint/parser": "^8.19.1",
55
60
  "@vitest/coverage-v8": "^3.0.0-beta.3",
56
61
  "eslint": "^9.17.0",
57
62
  "eslint-config-prettier": "^9.1.0",
@@ -61,8 +66,8 @@
61
66
  "prettier": "^3.4.2",
62
67
  "prettier-plugin-organize-imports": "^4.1.0",
63
68
  "prettier-plugin-svelte": "^3.3.2",
64
- "publint": "^0.2.12",
65
- "svelte": "^5.16.2",
69
+ "publint": "^0.3.0",
70
+ "svelte": "^5.16.6",
66
71
  "svelte-check": "^4.1.1",
67
72
  "typescript": "^5.7.2",
68
73
  "vite": "^6.0.7",