@humanspeak/svelte-virtual-list 0.3.1 → 0.3.3

package/README.md

@@ -79,7 +79,14 @@ You can now programmatically scroll to any item in the list using the `scroll` m
 ## Installation
 
 ```bash
+# Using npm
 npm install @humanspeak/svelte-virtual-list
+
+# Using pnpm (recommended)
+pnpm add @humanspeak/svelte-virtual-list
+
+# Using yarn
+yarn add @humanspeak/svelte-virtual-list
 ```
 
 ## Basic Usage
@@ -170,10 +177,50 @@ Use `mode="bottomToTop"` for chat-like lists anchored to the bottom. Programmati
 
 ## Testing
 
-- Unit tests (Vitest): `npm test`
-- E2E tests (Playwright):
-    - One-time: `npx playwright install`
-    - Run: `npm run test:e2e`
+### Unit Tests (Vitest)
+
+```bash
+# Run unit tests with coverage
+pnpm test
+
+# Run specific test files
+pnpm vitest src/lib/utils/throttle.test.ts
+```
+
+### E2E Tests (Playwright)
+
+```bash
+# Install Playwright browsers (one-time setup)
+npx playwright install
+
+# Run all e2e tests
+pnpm run test:e2e
+
+# Run specific e2e test
+npx playwright test tests/docs-visit.spec.ts --project=chromium
+
+# Debug mode
+npx playwright test --debug
+```
+
+### Development Commands
+
+```bash
+# Start development server
+pnpm dev
+
+# Start both package and docs
+pnpm run dev:all
+
+# Check TypeScript/Svelte
+pnpm run check
+
+# Build package
+pnpm run build
+
+# Format and lint code
+pnpm run lint:fix
+```
 
 ## Performance Considerations
 
@@ -183,6 +230,29 @@ Use `mode="bottomToTop"` for chat-like lists anchored to the bottom. Programmati
 - Resize observers handle container/content changes
 - Virtual DOM updates are batched for efficiency
 
+## Project Structure
+
+This is a **PNPM workspace** with two packages:
+
+1. **`./`** - Main Svelte Virtual List component package
+2. **`./docs`** - Documentation site with live demos and examples
+
+### Development Workflow
+
+```bash
+# Install dependencies for both packages
+pnpm install
+
+# Run development servers simultaneously
+pnpm run dev:all
+
+# Build both packages
+pnpm run build
+
+# Run tests across the workspace
+pnpm test:all
+```
+
 ## License
 
 MIT © [Humanspeak, Inc.](LICENSE)

package/dist/SvelteVirtualList.svelte

@@ -177,9 +177,13 @@
 
     const rafSchedule = createRafScheduler()
     // Package-specific debug flag - safe for library distribution
-    // Enable with: NODE_ENV=development SVELTE_VIRTUAL_LIST_DEBUG=true
-    const INTERNAL_DEBUG =
-        import.meta.env.DEV && import.meta.env.VITE_SVELTE_VIRTUAL_LIST_DEBUG === 'true'
+    // Enable with: PUBLIC_SVELTE_VIRTUAL_LIST_DEBUG=true (preferred) or SVELTE_VIRTUAL_LIST_DEBUG=true
+    // Avoid SvelteKit-only $env imports so library works in non-Kit/Vitest contexts
+    const INTERNAL_DEBUG = Boolean(
+        typeof process !== 'undefined' &&
+            (process?.env?.PUBLIC_SVELTE_VIRTUAL_LIST_DEBUG === 'true' ||
+                process?.env?.SVELTE_VIRTUAL_LIST_DEBUG === 'true')
+    )
     /**
      * Core configuration props with default values
      * @type {SvelteVirtualListProps<TItem>}
@@ -533,7 +537,7 @@
     function updateDebugTailDistance() {
         if (!heightManager.viewportElement) return
         const last = heightManager.viewport.querySelector(
-            '[data-original-index="999"]'
+            `[data-original-index="${items.length - 1}"]`
         ) as HTMLElement | null
         if (!last) return
         const v = heightManager.viewport.getBoundingClientRect()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-virtual-list",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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.",
   "keywords": [
     "svelte",
@@ -46,6 +46,10 @@
     "!dist/**/*.spec.*",
     "!dist/test/**/*"
   ],
+  "workspaces": [
+    ".",
+    "docs"
+  ],
   "overrides": {
     "@sveltejs/kit": {
       "cookie": "^0.7.0"
@@ -55,43 +59,44 @@
     "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.34.0",
-    "@faker-js/faker": "^9.9.0",
-    "@playwright/test": "^1.55.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.36.0",
+    "@faker-js/faker": "^10.0.0",
+    "@playwright/test": "^1.55.1",
     "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/kit": "^2.36.2",
-    "@sveltejs/package": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.3",
-    "@tailwindcss/vite": "^4.1.12",
+    "@sveltejs/kit": "^2.43.4",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.13",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.40.0",
-    "@typescript-eslint/parser": "^8.40.0",
+    "@types/node": "^24.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.34.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-svelte": "^3.11.0",
+    "eslint-plugin-svelte": "^3.12.4",
     "eslint-plugin-unused-imports": "^4.2.0",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "husky": "^9.1.7",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.0",
     "prettier": "^3.6.2",
-    "prettier-plugin-organize-imports": "^4.2.0",
+    "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "publint": "^0.3.12",
-    "svelte": "^5.38.2",
-    "svelte-check": "^4.3.1",
-    "tailwindcss": "^4.1.12",
-    "tw-animate-css": "^1.3.7",
+    "publint": "^0.3.13",
+    "svelte": "^5.39.6",
+    "svelte-check": "^4.3.2",
+    "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0",
-    "vite": "^7.1.3",
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
@@ -118,6 +123,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "vite dev",
+    "dev:all": "concurrently -k -n pkg,docs -c green,cyan \"pnpm -w -r --filter @humanspeak/svelte-virtual-list run dev:pkg\" \"pnpm --filter docs run dev\"",
+    "dev:pkg": "svelte-kit sync && svelte-package --watch",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
     "lint:fix": "pnpm run format && eslint . --fix",