forked from mengyxu/noob-components
2 changed files with 127 additions and 0 deletions
@ -0,0 +1,83 @@ |
|||||||
|
# Pretext.js Integration for list-table-v2 |
||||||
|
|
||||||
|
## Goal |
||||||
|
|
||||||
|
Replace the mini-table DOM measurement approach with Pretext.js for calculating text heights in list-table-v2, eliminating forced synchronous reflow and improving performance. |
||||||
|
|
||||||
|
## Context |
||||||
|
|
||||||
|
### Current State |
||||||
|
- list-table-v2 uses a hidden mini-table to measure row heights via `getBoundingClientRect()` |
||||||
|
- This triggers forced synchronous reflow (~94ms for 1000 items) |
||||||
|
- The mini-table approach works but has performance cost |
||||||
|
|
||||||
|
### Target State |
||||||
|
- Use Pretext.js to calculate text heights mathematically (no DOM access) |
||||||
|
- Keep mini-table for custom renderer columns (or use running max heuristic) |
||||||
|
- Reduce/eliminate reflow during height calculation |
||||||
|
|
||||||
|
## Requirements |
||||||
|
|
||||||
|
### Must Have |
||||||
|
1. [ ] Install `@chenglou/pretext` dependency |
||||||
|
2. [ ] Calculate column widths mathematically (flexbox replication) |
||||||
|
3. [ ] Integrate Pretext into `renderCellContent` for text-only columns |
||||||
|
4. [ ] Fallback for custom renderer columns (keep mini-table or use heuristic) |
||||||
|
5. [ ] Support horizontal resize (recalculate widths when container width changes) |
||||||
|
|
||||||
|
### Should Have |
||||||
|
6. [ ] Verify width calculation matches el-table-v2 actual rendering |
||||||
|
7. [ ] Performance benchmark comparing old vs new approach |
||||||
|
|
||||||
|
## Technical Approach |
||||||
|
|
||||||
|
### 1. Width Calculation |
||||||
|
- Use `useColumnWidthCalculator` (already created) |
||||||
|
- Formula: `width = flexBasis + (freeSpace * flexGrow / totalFlexGrow)` |
||||||
|
- Handle shrinking case: `width = flexBasis + (freeSpace * flexShrink / totalFlexShrink)` |
||||||
|
- Clamp to [minWidth, maxWidth] |
||||||
|
|
||||||
|
### 2. Pretext Integration |
||||||
|
```ts |
||||||
|
// In renderCellContent |
||||||
|
import { prepare, layout } from '@chenglou/pretext' |
||||||
|
|
||||||
|
// Prepare once per text/font pair |
||||||
|
const prepared = prepare(cellData, '14px Inter') |
||||||
|
|
||||||
|
// Layout at runtime with calculated width |
||||||
|
const { height } = layout(prepared, textMaxWidth, lineHeight) |
||||||
|
``` |
||||||
|
|
||||||
|
### 3. Hybrid Approach for Custom Renderers |
||||||
|
- Text-only columns: Use Pretext directly |
||||||
|
- Custom renderer columns: Use running maximum heuristic |
||||||
|
- Initial estimate based on worst-case content |
||||||
|
- Update `estimatedRowHeight` with actual observed maximum on scroll |
||||||
|
|
||||||
|
## Files to Modify |
||||||
|
|
||||||
|
1. `packages/base/data/list-table-v2.vue` |
||||||
|
- Add Pretext import |
||||||
|
- Modify `renderCellContent` to use Pretext for text columns |
||||||
|
- Handle custom renderer fallback |
||||||
|
|
||||||
|
2. `packages/base/data/useColumnWidthCalculator.ts` |
||||||
|
- May need refactoring to work with Vue's script setup order |
||||||
|
|
||||||
|
## Risks & Mitigation |
||||||
|
|
||||||
|
| Risk | Mitigation | |
||||||
|
|------|------------| |
||||||
|
| Initialization order issue | Integrate Pretext directly, not via separate composable | |
||||||
|
| Width calculation mismatch | Benchmark against actual el-table-v2 widths | |
||||||
|
| Custom renderer fallback | Keep mini-table as fallback for non-text columns | |
||||||
|
|
||||||
|
## Acceptance Criteria |
||||||
|
|
||||||
|
1. [ ] Table renders without errors at http://localhost:5173/#/table-v2 |
||||||
|
2. [ ] Horizontal scroll works in Combined Test (section 13) |
||||||
|
3. [ ] Fixed columns display correctly |
||||||
|
4. [ ] No "Cannot access 'tableColumns' before initialization" error |
||||||
|
5. [ ] Performance: Height calculation completes without triggering reflow |
||||||
|
6. [ ] Basic Usage (section 1) still works correctly |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
{ |
||||||
|
"id": "pretext-integration", |
||||||
|
"name": "pretext-integration", |
||||||
|
"title": "Pretext.js Integration for list-table-v2", |
||||||
|
"description": "", |
||||||
|
"status": "completed", |
||||||
|
"dev_type": null, |
||||||
|
"scope": null, |
||||||
|
"priority": "P2", |
||||||
|
"creator": "hechang27-sprt", |
||||||
|
"assignee": "hechang27-sprt", |
||||||
|
"createdAt": "2026-04-01", |
||||||
|
"completedAt": "2026-04-01", |
||||||
|
"branch": null, |
||||||
|
"base_branch": "dev", |
||||||
|
"worktree_path": null, |
||||||
|
"current_phase": 0, |
||||||
|
"next_action": [ |
||||||
|
{ |
||||||
|
"phase": 1, |
||||||
|
"action": "implement" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": 2, |
||||||
|
"action": "check" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": 3, |
||||||
|
"action": "finish" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": 4, |
||||||
|
"action": "create-pr" |
||||||
|
} |
||||||
|
], |
||||||
|
"commit": null, |
||||||
|
"pr_url": null, |
||||||
|
"subtasks": [], |
||||||
|
"children": [], |
||||||
|
"parent": null, |
||||||
|
"relatedFiles": [], |
||||||
|
"notes": "", |
||||||
|
"meta": {} |
||||||
|
} |
||||||
Loading…
Reference in new issue