Convert nodeDefStore to use composition API (#1318)

* Convert nodeDefStore to use composition API

* nit

src/scripts/app.ts

@@ -1969,7 +1969,7 @@ export class ComfyApp {
     const nodeDefArray: ComfyNodeDef[] = Object.values(allNodeDefs)
     this.#invokeExtensions('beforeRegisterVueAppNodeDefs', nodeDefArray, this)
     nodeDefStore.updateNodeDefs(nodeDefArray)
-    nodeDefStore.updateWidgets(this.widgets)
+    nodeDefStore.widgets = this.widgets
   }
 
   /**

src/stores/nodeDefStore.ts

@@ -278,79 +278,78 @@ export function createDummyFolderNodeDef(folderPath: string): ComfyNodeDefImpl {
   } as ComfyNodeDef)
 }
 
-interface State {
+export const useNodeDefStore = defineStore('nodeDef', () => {
-  nodeDefsByName: Record<string, ComfyNodeDefImpl>
+  const nodeDefsByName = ref<Record<string, ComfyNodeDefImpl>>({})
-  nodeDefsByDisplayName: Record<string, ComfyNodeDefImpl>
+  const nodeDefsByDisplayName = ref<Record<string, ComfyNodeDefImpl>>({})
-  widgets: Record<string, ComfyWidgetConstructor>
+  const widgets = ref<Record<string, ComfyWidgetConstructor>>({})
-  showDeprecated: boolean
+  const showDeprecated = ref(false)
-  showExperimental: boolean
+  const showExperimental = ref(false)
-}
 
-export const useNodeDefStore = defineStore('nodeDef', {
+  const nodeDefs = computed(() => Object.values(nodeDefsByName.value))
-  state: (): State => ({
+  const visibleNodeDefs = computed(() =>
-    nodeDefsByName: {},
+    nodeDefs.value.filter(
-    nodeDefsByDisplayName: {},
+      (nodeDef: ComfyNodeDefImpl) =>
-    widgets: {},
+        (showDeprecated.value || !nodeDef.deprecated) &&
-    showDeprecated: false,
+        (showExperimental.value || !nodeDef.experimental)
-    showExperimental: false
+    )
-  }),
+  )
-  getters: {
+  const nodeSearchService = computed(
-    nodeDefs(state) {
+    () => new NodeSearchService(visibleNodeDefs.value)
-      return Object.values(state.nodeDefsByName)
+  )
-    },
+  const nodeTree = computed(() => buildNodeDefTree(visibleNodeDefs.value))
-    // Node defs that are not deprecated
+
-    visibleNodeDefs(state): ComfyNodeDefImpl[] {
+  function updateNodeDefs(nodeDefs: ComfyNodeDef[]) {
-      return this.nodeDefs.filter(
+    const newNodeDefsByName: { [key: string]: ComfyNodeDefImpl } = {}
-        (nodeDef: ComfyNodeDefImpl) =>
+    const newNodeDefsByDisplayName: { [key: string]: ComfyNodeDefImpl } = {}
-          (state.showDeprecated || !nodeDef.deprecated) &&
+    for (const nodeDef of nodeDefs) {
-          (state.showExperimental || !nodeDef.experimental)
-      )
-    },
-    nodeSearchService() {
-      return new NodeSearchService(this.visibleNodeDefs)
-    },
-    nodeTree(): TreeNode {
-      return buildNodeDefTree(this.visibleNodeDefs)
-    }
-  },
-  actions: {
-    updateNodeDefs(nodeDefs: ComfyNodeDef[]) {
-      const newNodeDefsByName: { [key: string]: ComfyNodeDefImpl } = {}
-      const nodeDefsByDisplayName: { [key: string]: ComfyNodeDefImpl } = {}
-      for (const nodeDef of nodeDefs) {
-        const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
-        newNodeDefsByName[nodeDef.name] = nodeDefImpl
-        nodeDefsByDisplayName[nodeDef.display_name] = nodeDefImpl
-      }
-      this.nodeDefsByName = newNodeDefsByName
-      this.nodeDefsByDisplayName = nodeDefsByDisplayName
-    },
-    addNodeDef(nodeDef: ComfyNodeDef) {
       const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
-      this.nodeDefsByName[nodeDef.name] = nodeDefImpl
+      newNodeDefsByName[nodeDef.name] = nodeDefImpl
-      this.nodeDefsByDisplayName[nodeDef.display_name] = nodeDefImpl
+      newNodeDefsByDisplayName[nodeDef.display_name] = nodeDefImpl
-    },
-    updateWidgets(widgets: Record<string, ComfyWidgetConstructor>) {
-      this.widgets = widgets
-    },
-    getWidgetType(type: string, inputName: string) {
-      if (type === 'COMBO') {
-        return 'COMBO'
-      } else if (`${type}:${inputName}` in this.widgets) {
-        return `${type}:${inputName}`
-      } else if (type in this.widgets) {
-        return type
-      } else {
-        return null
-      }
-    },
-    inputIsWidget(spec: BaseInputSpec) {
-      return this.getWidgetType(spec.type, spec.name) !== null
-    },
-    fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
-      // Frontend-only nodes don't have nodeDef
-      return this.nodeDefsByName[node.constructor.nodeData?.name] ?? null
     }
+    nodeDefsByName.value = newNodeDefsByName
+    nodeDefsByDisplayName.value = newNodeDefsByDisplayName
+  }
+  function addNodeDef(nodeDef: ComfyNodeDef) {
+    const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
+    nodeDefsByName.value[nodeDef.name] = nodeDefImpl
+    nodeDefsByDisplayName.value[nodeDef.display_name] = nodeDefImpl
+  }
+  function getWidgetType(type: string, inputName: string) {
+    if (type === 'COMBO') {
+      return 'COMBO'
+    } else if (`${type}:${inputName}` in widgets.value) {
+      return `${type}:${inputName}`
+    } else if (type in widgets.value) {
+      return type
+    } else {
+      return null
+    }
+  }
+  function inputIsWidget(spec: BaseInputSpec) {
+    return getWidgetType(spec.type, spec.name) !== null
+  }
+  function fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
+    // Frontend-only nodes don't have nodeDef
+    return nodeDefsByName.value[node.constructor?.nodeData?.name] ?? null
+  }
+
+  return {
+    nodeDefsByName,
+    nodeDefsByDisplayName,
+    widgets,
+    showDeprecated,
+    showExperimental,
+
+    nodeDefs,
+    visibleNodeDefs,
+    nodeSearchService,
+    nodeTree,
+
+    updateNodeDefs,
+    addNodeDef,
+    getWidgetType,
+    inputIsWidget,
+    fromLGraphNode
   }
 })