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
70 lines
2.3 KiB
JSON
70 lines
2.3 KiB
JSON
{
|
|
"name": "glyphdiff",
|
|
"private": true,
|
|
"version": "0.0.1",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build",
|
|
"preview": "vite preview",
|
|
"prepare": "svelte-check --tsconfig ./tsconfig.json || echo ''",
|
|
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
|
"check:shadcn-excluded": "svelte-check --no-tsconfig --ignore \"src/shared/shadcn\"",
|
|
"lint": "oxlint",
|
|
"format": "dprint fmt",
|
|
"format:check": "dprint check",
|
|
"test:e2e": "playwright test",
|
|
"test:unit": "vitest run",
|
|
"test:unit:watch": "vitest",
|
|
"test:unit:ui": "vitest --ui",
|
|
"test:unit:coverage": "vitest run --coverage",
|
|
"test:component": "vitest run --config vitest.config.component.ts",
|
|
"test": "npm run test:e2e && npm run test:unit",
|
|
"storybook": "storybook dev -p 6006",
|
|
"build-storybook": "storybook build"
|
|
},
|
|
"devDependencies": {
|
|
"@chromatic-com/storybook": "^4.1.3",
|
|
"@internationalized/date": "^3.10.0",
|
|
"@lucide/svelte": "^0.561.0",
|
|
"@playwright/test": "^1.57.0",
|
|
"@storybook/addon-a11y": "^10.1.11",
|
|
"@storybook/addon-docs": "^10.1.11",
|
|
"@storybook/addon-svelte-csf": "^5.0.10",
|
|
"@storybook/addon-vitest": "^10.1.11",
|
|
"@storybook/svelte-vite": "^10.1.11",
|
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
"@tailwindcss/vite": "^4.1.18",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/svelte": "^5.3.1",
|
|
"@tsconfig/svelte": "^5.0.6",
|
|
"@types/jsdom": "^27",
|
|
"@vitest/browser-playwright": "^4.0.16",
|
|
"@vitest/coverage-v8": "^4.0.16",
|
|
"bits-ui": "^2.14.4",
|
|
"clsx": "^2.1.1",
|
|
"dprint": "^0.50.2",
|
|
"jsdom": "^27.4.0",
|
|
"lefthook": "^2.0.13",
|
|
"oxlint": "^1.35.0",
|
|
"playwright": "^1.57.0",
|
|
"storybook": "^10.1.11",
|
|
"svelte": "^5.45.6",
|
|
"svelte-check": "^4.3.4",
|
|
"svelte-language-server": "^0.17.23",
|
|
"tailwind-merge": "^3.4.0",
|
|
"tailwind-variants": "^3.2.2",
|
|
"tailwindcss": "^4.1.18",
|
|
"tw-animate-css": "^1.4.0",
|
|
"typescript": "^5.9.3",
|
|
"vite": "^7.2.6",
|
|
"vitest": "^4.0.16",
|
|
"vitest-browser-svelte": "^2.0.1"
|
|
},
|
|
"dependencies": {
|
|
"@tanstack/svelte-query": "^6.0.14",
|
|
"@tanstack/svelte-virtual": "^3.13.17"
|
|
}
|
|
}
|