ComfyUI_frontend Add support for growable inputs

autogrow-optional_00002

Also fixes connections to widget inputs created by a dynamic combo breaking on reload.

Performs some refactoring to group the prior dynamic inputs code.

See also, the overarching frontend PR: comfyanonymous/ComfyUI#10832

┆Issue is synchronized with this Notion page by Unito

Nov 22 '25 21:11 AustinMroz

📝 Walkthrough

Walkthrough

Moves match-type and autogrow dynamic-input logic into a centralized dynamicWidgets module, adding applyDynamicInputs and handlers (match-type, autogrow), type-management helpers, schema changes for autogrow, service integration to skip default socket creation when handled, LGraphNode field addition, removal of spliceInputs, and updated tests for autogrow.

Changes

Cohort / File(s)	Summary
Core dynamic widgets enhancement `src/core/graph/widgets/dynamicWidgets.ts`	Adds `applyDynamicInputs` dispatcher and `dynamicInputs` map; implements `applyMatchType`, `applyAutogrow`, `changeOutputType`, `combineTypes`, `intersection`, `isStrings`; rewrites dynamicComboWidget/autogrow behavior for inserting/removing/relinking inputs, preserving connections, and propagating types.
Extension removal `src/extensions/core/index.ts`, `src/extensions/core/matchType.ts`	Removes `./matchType` import from `index.ts` and deletes `matchType.ts` (logic migrated into dynamicWidgets).
Schema updates `src/schemas/nodeDefSchema.ts`	Removes `zWidgetTemplate` and `template` from `zBaseInputOptions`; adds exported `zAutogrowOptions` (with nested template schema); updates `zDynamicComboInputSpec` to extend `zBaseInputOptions`.
Service integration `src/services/litegraphService.ts`	Imports `applyDynamicInputs` and short-circuits input socket creation when `applyDynamicInputs(node, inputSpec)` returns truthy.
Node runtime shape changes `src/lib/litegraph/src/LGraphNode.ts`	Adds public `comfyMatchType?: Record<string, Record<string, string>>` field; removes `spliceInputs` method; input slot rendering now considers `slot.alwaysVisible`.
Interfaces / slots `src/lib/litegraph/src/interfaces.ts`, `src/lib/litegraph/src/node/NodeInputSlot.ts`	Adds optional `alwaysVisible?: boolean` to `INodeInputSlot` and `NodeInputSlot` class.
Type guard util `src/utils/typeGuardUtil.ts`	Adds exported `isStrings(types: unknown[]): types is string[]` type guard.
Tests updated `tests-ui/tests/widgets/dynamicCombo.test.ts`	Adds `LGraph` import, test helper `nextTick`, helpers `addAutogrow`/`connectInput`, updates expected input naming, and introduces Autogrow tests for naming, min/max, growth, and shrink behavior.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant Service as litegraphService
    participant Dynamic as dynamicWidgets
    participant Node as LGraphNode
    participant Handler as DynamicHandler

    Service->>Dynamic: applyDynamicInputs(node, inputSpec)
    alt inputSpec handled dynamically
        Dynamic->>Handler: dispatch to specific handler (autogrow / matchType)
        Handler->>Node: add/remove/reorder inputs, update comfyMatchType, adjust output types, relink/prune connections
        Handler-->>Dynamic: handler complete
        Dynamic-->>Service: return true (skip default socket creation)
    else not dynamic
        Dynamic-->>Service: return false (proceed with default socket creation)
    end
    Service->>Node: create input socket (if not skipped)

✨ Finishing touches

[ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

[ ] Create PR with unit tests
[ ] Post copyable unit tests in a comment
[ ] Commit unit tests in branch austin/growable-inputs

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88e5728a8346d5685d5d926c8201d1f026f09689 and 3baa747509ee76800be70fb290971663f040f6fc.

📒 Files selected for processing (6)

src/core/graph/widgets/dynamicWidgets.ts (5 hunks)
src/lib/litegraph/src/LGraphNode.ts (2 hunks)
src/lib/litegraph/src/interfaces.ts (1 hunks)
src/lib/litegraph/src/node/NodeInputSlot.ts (1 hunks)
src/schemas/nodeDefSchema.ts (1 hunks)
tests-ui/tests/widgets/dynamicCombo.test.ts (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

src/lib/litegraph/src/LGraphNode.ts
src/schemas/nodeDefSchema.ts

🧰 Additional context used

📓 Path-based instructions (15)

**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursorrules)

Use es-toolkit for utility functions

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

Use TypeScript for type safety

**/*.{ts,tsx}: Never use any type - use proper TypeScript types Never use as any type assertions - fix the underlying type issue

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (.cursorrules)

Implement proper error handling in components and services

**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in .prettierrc Organize imports by sorting and grouping by plugin, and run pnpm format before committing

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles Implement proper error handling Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions Use TypeScript for type safety

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use camelCase for variable and setting names in TypeScript/Vue files

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,vue}: Use const settingStore = useSettingStore() and settingStore.get('Comfy.SomeSetting') to retrieve settings in TypeScript/Vue files Use await settingStore.set('Comfy.SomeSetting', newValue) to update settings in TypeScript/Vue files Check server capabilities using api.serverSupportsFeature('feature_name') before using enhanced features Use api.getServerFeature('config_name', defaultValue) to retrieve server feature configuration

Enforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration Use defaultsByInstallVersion property for gradual feature rollout based on version in settings configuration

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts
tests-ui/tests/widgets/dynamicCombo.test.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks Avoid using @ts-expect-error; use proper TypeScript types instead Use es-toolkit for utility functions instead of other utility libraries Implement proper TypeScript types throughout the codebase

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts
src/core/graph/widgets/dynamicWidgets.ts

src/lib/litegraph/**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)

src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the pnpm lint:fix command Take advantage of TypedArray subarray when appropriate The size and pos properties of Rectangle share the same array buffer (subarray); they may be used to set the rectangle's size and position Prefer single line if syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement Do not replace &&= or ||= with = when there is no reason to do so. If you do find a reason to remove either &&= or ||=, leave a comment explaining why the removal occurred When writing methods, prefer returning idiomatic JavaScript undefined over null

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts

src/lib/litegraph/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)

Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code

Files:

src/lib/litegraph/src/node/NodeInputSlot.ts
src/lib/litegraph/src/interfaces.ts

tests-ui/**/*.test.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)

tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features Follow existing test patterns in the codebase Use existing test utilities rather than writing custom utilities Mock external dependencies in tests Always prefer vitest mock functions over writing verbose manual mocks

Files:

tests-ui/tests/widgets/dynamicCombo.test.ts

**/*.{test,spec}.{ts,tsx,js}

📄 CodeRabbit inference engine (AGENTS.md)

Unit and component tests should be located in tests-ui/ or co-located with components as src/components/**/*.{test,spec}.ts; E2E tests should be in browser_tests/

Files:

tests-ui/tests/widgets/dynamicCombo.test.ts

🧠 Learnings (15)