10b7457f21
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
26 lines
942 B
TypeScript
26 lines
942 B
TypeScript
/**
|
|
* ============================================================================
|
|
* SHARED VIRTUALIZATION LAYER - MIGRATION GUIDE
|
|
* ============================================================================
|
|
*
|
|
* The virtualization API has been refactored to use Svelte 5 store pattern.
|
|
*
|
|
* Migration:
|
|
* - Component moved: src/shared/virtual/FontVirtualList.svelte → src/shared/ui/VirtualList.svelte
|
|
* - Hook removed: src/shared/virtual/useVirtualList.ts → src/shared/store/createVirtualizerStore.ts
|
|
* - Pattern changed: Hook pattern → Store pattern (more Svelte-idiomatic)
|
|
*
|
|
* New Imports:
|
|
* ```ts
|
|
* import { VirtualList } from '$shared/ui';
|
|
* import { createVirtualizerStore } from '$shared/store';
|
|
* ```
|
|
*
|
|
* Old Imports (deprecated):
|
|
* ```ts
|
|
* import { useVirtualList, FontVirtualList } from '$shared/virtual';
|
|
* ```
|
|
*
|
|
* See src/shared/virtual/README.md for detailed usage examples and API documentation.
|
|
*/
|