Comfy-Org / Comfy-Org/ComfyUI_frontend

[RFC] Investigate and clean up `LGraphNode.vue` (842 lines) in vueNodes

Open
#11,094 0 comments 0 reactions 0 assignees View on GitHub
area:nodes developer experience refactor
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.