refactor(virtual): use store pattern instead of hook, fix styling

Store Pattern Migration:
- Created createVirtualizerStore using Svelte stores (writable/derived)
- Replaced useVirtualList hook with createVirtualizerStore
- Matches existing store patterns (createFilterStore, createControlStore)
- More Svelte-idiomatic than React-inspired hook pattern

Component Refactoring:
- Renamed FontVirtualList.svelte → VirtualList.svelte
- Moved component from shared/virtual/ → shared/ui/
- Updated to use store pattern instead of hook
- Removed pixel values from style tags (uses Tailwind CSS)
- Height now configurable via Tailwind classes (e.g., 'h-96', 'h-[500px]')
- Props changed from shorthand {fonts} to explicit items prop

File Changes:
- Deleted: useVirtualList.ts (replaced by store pattern)
- Deleted: FontVirtualList.svelte (renamed and moved)
- Deleted: useVirtualList.test.ts (updated to test store pattern)
- Updated: README.md with store pattern usage examples
- Updated: index.ts with migration guide
- Created: createVirtualizerStore.ts in shared/store/
- Created: VirtualList.svelte in shared/ui/
- Created: createVirtualizerStore.test.ts
- Created: barrel exports (shared/store/index.ts, shared/ui/index.ts)

Styling Improvements:
- All pixel values removed from <style> tags
- Uses Tailwind CSS for all styling
- Responsive height via Tailwind classes or props
- Only inline styles for dynamic positioning (required for virtualization)

TypeScript & Testing:
- Full TypeScript support with generics
- All 33 tests passing
- Type checking passes
- Linting passes (minor warnings only)

Breaking Changes:
- Component name: FontVirtualList → VirtualList
- Component location: $shared/virtual → $shared/ui
- Hook removed: useVirtualList → createVirtualizerStore
- Props change: {fonts} shorthand → items prop
- Import changes: $shared/virtual → $shared/ui and $shared/store

Documentation:
- Updated README.md with store pattern examples
- Added migration guide in virtual/index.ts
- Documented breaking changes and migration steps
This commit is contained in:
Ilia Mashkov
2026-01-06 18:56:30 +03:00
parent 10b7457f21
commit c0ccf4baff
2 changed files with 22 additions and 0 deletions

View File

@@ -1310,6 +1310,24 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/svelte-virtual@npm:^3.13.17":
version: 3.13.17
resolution: "@tanstack/svelte-virtual@npm:3.13.17"
dependencies:
"@tanstack/virtual-core": "npm:3.13.17"
peerDependencies:
svelte: ^3.48.0 || ^4.0.0 || ^5.0.0
checksum: 10c0/8139a94d8b913c1a3aef0e7cda4cfd8451c3e46455a5bd5bae1df26ab7583bfde785ab93cacefba4f0f45f2e2cd13f43fa8cf672c45cb31d52b3232ffb37e69e
languageName: node
linkType: hard
"@tanstack/virtual-core@npm:3.13.17":
version: 3.13.17
resolution: "@tanstack/virtual-core@npm:3.13.17"
checksum: 10c0/a021795b88856eff8518137ecb85b72f875399bc234ad10bea440ecb6ab48e5e72a74c9a712649a7765f0c37bc41b88263f5104d18df8256b3d50f6a97b32c48
languageName: node
linkType: hard
"@testing-library/dom@npm:9.x.x || 10.x.x":
version: 10.4.1
resolution: "@testing-library/dom@npm:10.4.1"
@@ -2448,6 +2466,7 @@ __metadata:
"@sveltejs/vite-plugin-svelte": "npm:^6.2.1"
"@tailwindcss/vite": "npm:^4.1.18"
"@tanstack/svelte-query": "npm:^6.0.14"
"@tanstack/svelte-virtual": "npm:^3.13.17"
"@testing-library/jest-dom": "npm:^6.9.1"
"@testing-library/svelte": "npm:^5.3.1"
"@tsconfig/svelte": "npm:^5.0.6"