Comfy-Org / Comfy-Org/ComfyUI_frontend
[RFC] Investigate and clean up `LGraphNode.vue` (842 lines) in vueNodes
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 704
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 512
Description
## Problem
While `renderer/extensions/vueNodes/` is generally well-organized (~160 files, ~28,000 lines), the core `LGraphNode.vue` component at 842 lines is a candidate for decomposition. It handles:
- Node rendering
- Widget management
- Slot layout
- Selection state
- Error display
- Image previews
- Drag/drop
- Context menus
This is the most complex single component in the renderer layer.
## Proposed Investigation
1. Analyze which concerns can be extracted into child components or composables
2. Identify props/events that could be simplified
3. Determine if the component can be split without breaking the render tree
## Migration Plan
- Audit first, then propose specific extractions
- Each extraction is a single PR
- Maintain visual regression test coverage
## Testing Strategy
- Existing vueNodes tests pass
- Visual regression tests catch rendering changes
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11094-RFC-Investigate-and-clean-up-LGraphNode-vue-842-lines-in-vueNodes-33e6d73d3650817a955bc94c476162cd) by [Unito](https://www.unito.io)
Contributor guide
Research direction
Start by auditing renderer/extensions/vueNodes/LGraphNode.vue and the existing vueNodes tests to map its rendering, widget, layout, state, preview, drag/drop, and menu concerns. Review the visual regression coverage, then document specific extraction candidates and a migration plan whose completed state preserves the render tree and keeps those tests passing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100