fix: migrate remaining ECMAScript private fields to TypeScript private (#8495)

Migrates remaining `#field` syntax to `private _field` for Vue
reactivity compatibility.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8495-fix-migrate-remaining-ECMAScript-private-fields-to-TypeScript-private-2f86d73d365081ec87afe2273c0ff6eb)
by [Unito](https://www.unito.io)

Co-authored-by: Amp <amp@ampcode.com>

src/lib/litegraph/src/LGraph.ts

@@ -2466,13 +2466,13 @@ export class LGraph
     }
   }
 
-  #canvas?: LGraphCanvas
+  private _canvas?: LGraphCanvas
   get primaryCanvas(): LGraphCanvas | undefined {
-    return this.rootGraph.#canvas
+    return this.rootGraph._canvas
   }
 
   set primaryCanvas(canvas: LGraphCanvas) {
-    this.rootGraph.#canvas = canvas
+    this.rootGraph._canvas = canvas
   }
 
   load(url: string | Blob | URL | File, callback: () => void) {
@@ -2541,9 +2541,9 @@ export class Subgraph
   /** A list of node widgets displayed in the parent graph, on the subgraph object. */
   readonly widgets: ExposedWidget[] = []
 
-  #rootGraph: LGraph
+  private _rootGraph: LGraph
   override get rootGraph(): LGraph {
-    return this.#rootGraph
+    return this._rootGraph
   }
 
   constructor(rootGraph: LGraph, data: ExportedSubgraph) {
@@ -2551,11 +2551,11 @@ export class Subgraph
 
     super()
 
-    this.#rootGraph = rootGraph
+    this._rootGraph = rootGraph
 
     const cloned = structuredClone(data)
     this._configureBase(cloned)
-    this.#configureSubgraph(cloned)
+    this._configureSubgraph(cloned)
   }
 
   getIoNodeOnPos(
@@ -2567,7 +2567,7 @@ export class Subgraph
     if (outputNode.containsPoint([x, y])) return outputNode
   }
 
-  #configureSubgraph(
+  private _configureSubgraph(
     data:
       | (ISerialisedGraph & ExportedSubgraph)
       | (SerialisableGraph & ExportedSubgraph)
@@ -2611,7 +2611,7 @@ export class Subgraph
   ): boolean | undefined {
     const r = super.configure(data, keep_old)
 
-    this.#configureSubgraph(data)
+    this._configureSubgraph(data)
     return r
   }
 

src/lib/litegraph/src/LLink.ts

@@ -119,14 +119,14 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
   /** @inheritdoc */
   _dragging?: boolean
 
-  #color?: CanvasColour | null
+  private _color?: CanvasColour | null
   /** Custom colour for this link only */
   public get color(): CanvasColour | null | undefined {
-    return this.#color
+    return this._color
   }
 
   public set color(value: CanvasColour) {
-    this.#color = value === '' ? null : value
+    this._color = value === '' ? null : value
   }
 
   public get isFloatingOutput(): boolean {

src/lib/litegraph/src/subgraph/SubgraphInput.ts

@@ -35,14 +35,14 @@ export class SubgraphInput extends SubgraphSlot {
   events = new CustomEventTarget<SubgraphInputEventMap>()
 
   /** The linked widget that this slot is connected to. */
-  #widgetRef?: WeakRef<IBaseWidget>
+  private _widgetRef?: WeakRef<IBaseWidget>
 
   get _widget() {
-    return this.#widgetRef?.deref()
+    return this._widgetRef?.deref()
   }
 
   set _widget(widget) {
-    this.#widgetRef = widget ? new WeakRef(widget) : undefined
+    this._widgetRef = widget ? new WeakRef(widget) : undefined
   }
 
   override connect(
@@ -187,7 +187,7 @@ export class SubgraphInput extends SubgraphSlot {
    * @returns `true` if the connection is valid, otherwise `false`.
    */
   matchesWidget(otherWidget: IBaseWidget): boolean {
-    const widget = this.#widgetRef?.deref()
+    const widget = this._widgetRef?.deref()
     if (!widget) return true
 
     if (

src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts

@@ -46,7 +46,7 @@ export abstract class SubgraphSlot
     return LiteGraph.NODE_SLOT_HEIGHT
   }
 
-  readonly #pos: Point = [0, 0]
+  private readonly _pos: Point = [0, 0]
 
   readonly measurement: ConstrainedSize = new ConstrainedSize(
     SubgraphSlot.defaultHeight,
@@ -67,14 +67,14 @@ export abstract class SubgraphSlot
   )
 
   override get pos() {
-    return this.#pos
+    return this._pos
   }
 
   override set pos(value) {
     if (!value || value.length < 2) return
 
-    this.#pos[0] = value[0]
-    this.#pos[1] = value[1]
+    this._pos[0] = value[0]
+    this._pos[1] = value[1]
   }
 
   /** Whether this slot is connected to another slot. */

src/stores/nodeDefStore.ts

@@ -89,7 +89,7 @@ export class ComfyNodeDefImpl
    * @internal
    * Migrate default input options to forceInput.
    */
-  static #migrateDefaultInput(nodeDef: ComfyNodeDefV1): ComfyNodeDefV1 {
+  private static _migrateDefaultInput(nodeDef: ComfyNodeDefV1): ComfyNodeDefV1 {
     const def = _.cloneDeep(nodeDef)
     def.input ??= {}
     // For required inputs, now we have the input socket always present. Specifying
@@ -118,7 +118,7 @@ export class ComfyNodeDefImpl
   }
 
   constructor(def: ComfyNodeDefV1) {
-    const obj = ComfyNodeDefImpl.#migrateDefaultInput(def)
+    const obj = ComfyNodeDefImpl._migrateDefaultInput(def)
 
     /**
      * Assign extra fields to `this` for compatibility with group node feature.