New settings API (#1292)

* Add settings API

* Add playwright test

* Update README

src/scripts/ui/settings.ts

@@ -169,6 +169,23 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     this.#dispatchChange(id, value)
   }
 
+  /**
+   * Deprecated for external callers/extensions. Use `ComfyExtension.settings` field instead.
+   * Example:
+   * ```ts
+   * app.registerExtension({
+   *   name: 'My Extension',
+   *   settings: [
+   *     {
+   *       id: 'My.Setting',
+   *       name: 'My Setting',
+   *       type: 'text',
+   *       defaultValue: 'Hello, world!'
+   *     }
+   *   ]
+   * })
+   * ```
+   */
   addSetting(params: SettingParams) {
     const {
       id,

src/stores/extensionStore.ts

@@ -47,6 +47,7 @@ export const useExtensionStore = defineStore('extension', () => {
     useKeybindingStore().loadExtensionKeybindings(extension)
     useCommandStore().loadExtensionCommands(extension)
     useMenuItemStore().loadExtensionMenuCommands(extension)
+    useSettingStore().loadExtensionSettings(extension)
 
     /*
      * Extensions are currently stored in both extensionStore and app.extensions.

src/stores/settingStore.ts

@@ -16,6 +16,7 @@ import { buildTree } from '@/utils/treeUtil'
 import { defineStore } from 'pinia'
 import type { TreeNode } from 'primevue/treenode'
 import { CORE_SETTINGS } from '@/stores/coreSettings'
+import { ComfyExtension } from '@/types/comfy'
 
 export interface SettingTreeNode extends TreeNode {
   data?: SettingParams
@@ -68,6 +69,12 @@ export const useSettingStore = defineStore('setting', {
       })
     },
 
+    loadExtensionSettings(extension: ComfyExtension) {
+      extension.settings?.forEach((setting: SettingParams) => {
+        app.ui.settings.addSetting(setting)
+      })
+    },
+
     async set<K extends keyof Settings>(key: K, value: Settings[K]) {
       this.settingValues[key] = value
       await app.ui.settings.setSettingValueAsync(key, value)

src/stores/workspaceStateStore.ts

@@ -4,6 +4,7 @@ import { useToastStore } from './toastStore'
 import { useQueueSettingsStore } from './queueStore'
 import { useCommandStore } from './commandStore'
 import { useSidebarTabStore } from './workspace/sidebarTabStore'
+import { useSettingStore } from './settingStore'
 
 interface WorkspaceState {
   spinner: boolean
@@ -30,6 +31,12 @@ export const useWorkspaceStore = defineStore('workspace', {
     },
     sidebarTab() {
       return useSidebarTabStore()
+    },
+    setting() {
+      return {
+        get: useSettingStore().get,
+        set: useSettingStore().set
+      }
     }
   },
   actions: {

src/types/comfy.d.ts

@@ -3,6 +3,7 @@ import { ComfyApp } from '../scripts/app'
 import type { ComfyNodeDef } from '@/types/apiTypes'
 import type { Keybinding } from '@/types/keyBindingTypes'
 import type { ComfyCommand } from '@/stores/commandStore'
+import { SettingParams } from './settingTypes'
 
 export type Widgets = Record<
   string,
@@ -43,6 +44,10 @@ export interface ComfyExtension {
    * Menu commands to add to the menu bar
    */
   menuCommands?: MenuCommandGroup[]
+  /**
+   * Settings to add to the settings menu
+   */
+  settings?: SettingParams[]
   /**
    * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
    * @param app The ComfyUI app instance

src/types/extensionTypes.ts

@@ -37,9 +37,12 @@ export interface ExtensionManager {
   unregisterSidebarTab(id: string): void
   getSidebarTabs(): SidebarTabExtension[]
 
-  // Toast
   toast: ToastManager
   command: CommandManager
+  setting: {
+    get: (id: string) => any
+    set: (id: string, value: any) => void
+  }
 }
 
 export interface CommandManager {