Comfy-Org / Comfy-Org/ComfyUI_frontend
Upgrade reka-ui and replace PrimeVue Splitters with pixel sizing support
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Overview
PrimeVue's Splitter component does not support pixel-based panel sizing, requiring a workaround composable (`useStablePrimeVueSplitterSizer`) introduced in #9439. reka-ui provides native pixel sizing support for its Splitter component and should be used instead.
**Reference:** https://reka-ui.com/docs/components/splitter#pixel-sizing
## Background
In #9439, a workaround composable `src/composables/useStablePrimeVueSplitterSizer.ts` was added to stabilize PrimeVue Splitter panel widths using pixel-based sizing stored via `useStorage`. This was noted as a temporary measure pending an upstream splitter upgrade.
## Files to Update
The following files currently use PrimeVue's `Splitter` / `SplitterPanel` components and should be migrated:
- `src/views/LinearView.vue`
- `src/components/graph/GraphCanvas.vue`
- `src/components/LiteGraphCanvasSplitterOverlay.vue`
The workaround composable `src/composables/useStablePrimeVueSplitterSizer.ts` (and its test file) can be removed once the migration is complete.
## Tasks
- [ ] Upgrade `reka-ui` from the current version (`^2.5.0`) if a newer version with stable pixel sizing is available
- [ ] Replace PrimeVue `Splitter`/`SplitterPanel` usage in the files listed above with reka-ui's Splitter component using pixel sizing
- [ ] Remove the `useStablePrimeVueSplitterSizer` workaround composable and its test file
- [ ] Verify layout stability across panel toggles and tab switches
## References
- PR introducing the workaround: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9439
- reka-ui Splitter pixel sizing docs: https://reka-ui.com/docs/components/splitter#pixel-sizing
/cc @pythongosssss
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9508-Upgrade-reka-ui-and-replace-PrimeVue-Splitters-with-pixel-sizing-support-31b6d73d365081278f87e53ef309a16d) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.