Comfy-Org / Comfy-Org/ComfyUI_frontend

Upgrade reka-ui and replace PrimeVue Splitters with pixel sizing support

Open
#9,508 0 comments 0 reactions 1 assignee Claimed by @pythongosssss View on GitHub
dependencies PrimeVue
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.