Comfy-Org / Comfy-Org/ComfyUI_frontend
refactor: simplify multi-output resolution in WidgetSelectDropdown using computedAsync
- 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
Assessment
This issue has not been assessed yet.