Browse Source

chore(task): archive 04-01-pretext-integration

dev
hechang27-sprt 3 months ago
parent
commit
0764ee24e0
  1. 83
      .trellis/tasks/archive/2026-04/04-01-pretext-integration/prd.md
  2. 44
      .trellis/tasks/archive/2026-04/04-01-pretext-integration/task.json

83
.trellis/tasks/archive/2026-04/04-01-pretext-integration/prd.md

@ -0,0 +1,83 @@ @@ -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

44
.trellis/tasks/archive/2026-04/04-01-pretext-integration/task.json

@ -0,0 +1,44 @@ @@ -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…
Cancel
Save