Comfy-Org / Comfy-Org/ComfyUI_frontend
Make node outputs reactive in Vue
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Context
Follow-up from PR #7546 which made node inputs reactive.
Currently, outputs are returned as a shallow copy (`[...node.outputs]`) while inputs use a `shallowReactive` wrapper with property interception. This creates an inconsistency in reactivity tracking.
## What needs to be done
Apply the same reactive pattern to outputs that was implemented for inputs in PR #7546:
1. Create `reactiveOutputs` using `shallowReactive(node.outputs ?? [])`
2. Define a property on the node with getter/setter that intercepts mutations
3. Update the VueNodeData return to use `reactiveOutputs` instead of the shallow copy
This ensures mutations to the outputs array are properly tracked by Vue, maintaining consistency with how inputs are handled.
## Related
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7546
- Discussion: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7546#discussion_r2621739275
- File: `src/composables/graph/useGraphNodeManager.ts`
- Requested by: @DrJKL
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7547-Make-node-outputs-reactive-in-Vue-2cb6d73d3650815ab904e40a7023f9e7) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.