mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
refactor: migrate ES private fields to TypeScript private for Vue Proxy compatibility (#8440)
## Summary Migrates ECMAScript private fields (`#`) to TypeScript private (`private`) across LiteGraph to fix Vue Proxy reactivity incompatibility. ## Problem ES private fields (`#field`) are incompatible with Vue's Proxy-based reactivity system - accessing `#field` through a Proxy throws `TypeError: Cannot read private member from an object whose class did not declare it`. ## Solution - Converted all `#field` to `private _field` across 10 phases - Added `toJSON()` methods to `LGraph`, `NodeSlot`, `NodeInputSlot`, and `NodeOutputSlot` to prevent circular reference errors during serialization (TypeScript private fields are visible to `JSON.stringify` unlike true ES private fields) - Made `DragAndScale.element.data` non-enumerable to break canvas circular reference chain ## Testing - All 4027 unit tests pass - Added 9 new serialization tests to catch future circular reference issues - Browser tests (undo/redo, save workflows) verified working ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8440-refactor-migrate-ES-private-fields-to-TypeScript-private-for-Vue-Proxy-compatibility-2f76d73d365081a3bd82d429a3e0fcb7) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
@@ -292,10 +292,10 @@ export class GroupNodeConfig {
|
||||
this.processNode(node, seenInputs, seenOutputs)
|
||||
}
|
||||
|
||||
for (const p of this.#convertedToProcess) {
|
||||
for (const p of this._convertedToProcess) {
|
||||
p()
|
||||
}
|
||||
this.#convertedToProcess = []
|
||||
this._convertedToProcess = []
|
||||
if (!this.nodeDef) return
|
||||
await app.registerNodeDef(`${PREFIX}${SEPARATOR}` + this.name, this.nodeDef)
|
||||
useNodeDefStore().addNodeDef(this.nodeDef)
|
||||
@@ -773,7 +773,7 @@ export class GroupNodeConfig {
|
||||
}
|
||||
}
|
||||
|
||||
#convertedToProcess: (() => void)[] = []
|
||||
private _convertedToProcess: (() => void)[] = []
|
||||
processNodeInputs(
|
||||
node: GroupNodeData,
|
||||
seenInputs: Record<string, number>,
|
||||
@@ -804,7 +804,7 @@ export class GroupNodeConfig {
|
||||
)
|
||||
|
||||
// Converted inputs have to be processed after all other nodes as they'll be at the end of the list
|
||||
this.#convertedToProcess.push(() =>
|
||||
this._convertedToProcess.push(() =>
|
||||
this.processConvertedWidgets(
|
||||
inputs,
|
||||
node,
|
||||
|
||||
Reference in New Issue
Block a user