Comfy-Org / Comfy-Org/ComfyUI_frontend

nodeApi: split mounted DOM/canvas widget lifecycle out of the widget collection

Open
#16,854 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2k
Forks
704
Avg merge
1d 8h
Merged PRs (30d)
512

Description

Follow-up owned from review of #16790 (thread on `widgetHandle.ts`).

## Context

`widgetHandle.ts` is ~1,200 lines and fuses two concerns in one factory: the ordered collection of widgets on a node (get, names, order-safe insertion, hide/show, linked widgets) and the lifecycle of a *mounted* widget — a DOM container or canvas strip the pack renders into, with its own change listeners, height allocation, and teardown.

The collection is graph data. The mount is renderer ownership with a disposal contract. They change for different reasons and under different renderers.

## Decision

Ticket rather than fix in #16790, for the same reason as #16853: a structural refactor inside the PR under review buys nothing a reviewer can check and risks the widget path, which is the most heavily used part of the surface.

## Done looks like

- The widget collection exposes ordering and lookup without knowing what a mount is
- Mount lifecycle — `render`, container ownership, `setHeight`, change subscription, disposal — lives in its own module with its own tests
- Teardown is provably tied to the mount that created it, not to a widget name
- No change to the published shapes; `widgets.mount()` and `widgets.canvas()` keep their contracts

Contributor guide

Open the contributing guide

Research direction

Start with widgetHandle.ts and the review thread on #16790 to understand the existing collection and mounted-widget responsibilities. Separate collection ordering and lookup from mount rendering, ownership, height, change subscription, and disposal, then add module-specific tests. Done means teardown remains tied to its mount, published shapes are unchanged, and widgets.mount() and widgets.canvas() retain their contracts.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.