Comfy-Org / Comfy-Org/ComfyUI_frontend

refactor: simplify multi-output resolution in WidgetSelectDropdown using computedAsync

Open
#10,380 0 comments 0 reactions 1 assignee Claimed by @DrJKL View on GitHub
area:widgets developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

The current multi-output resolution logic in `src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue` uses a manual `watch` + `shallowRef(new Map())` + `pendingJobIds` Set pattern to lazily fetch and cache per-job resolved outputs. This pattern could likely be simplified using [`computedAsync`](https://vueuse.org/core/computedAsync/) from `@vueuse/core`.

## Current approach

The current implementation (introduced in #10131) uses:
- `resolvedByJobId` — a `shallowRef>` that accumulates resolved outputs per job
- `pendingJobIds` — a `Set` used as an in-flight guard to avoid duplicate fetches
- A `watch` block on `outputMediaAssets.media.value` that iterates assets, identifies multi-output jobs, fires `resolveOutputAssetItems` concurrently, and writes results back into the map

## Proposed simplification

`computedAsync` from `@vueuse/core` provides built-in handling for:
- Automatic re-evaluation when reactive dependencies change
- An `onCancel` callback to abort in-flight work when a new evaluation is triggered (replacing the manual `cancelled` flag)
- An optional `evaluating` ref to expose loading state
- An optional `lazy: true` mode to defer evaluation until first access
- An `onError` callback for error handling

The watch + map accumulation pattern could potentially be replaced with a single `computedAsync` call that:
1. Reads `outputMediaAssets.media.value` as a reactive dependency
2. Filters for multi-output assets not yet resolved
3. Calls `resolveOutputAssetItems` for each concurrently via `Promise.all`
4. Returns the resulting `Map`

**Note:** `computedAsync` only tracks synchronous dependencies in the first call stack — async dependencies do not trigger re-evaluation. The fan-out over multiple jobs would need to be restructured as a single `Promise.all` inside one `computedAsync` callback.

## References

- PR introducing this code: #10131
- Comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10131#discussion_r2970513399
- VueUse computedAsync docs: https://vueuse.org/core/computedAsync/

Requested by @DrJKL.

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10380-refactor-simplify-multi-output-resolution-in-WidgetSelectDropdown-using-computedAsyn-32a6d73d365081ed92b2d56fb58a8ba7) 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.