Road to No Explicit Any Part 4: LiteGraph Cleanup#7970
Conversation
dosubot
bot
added
the
size:L
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughRefactors safe per-canvas method invocation in LGraph; introduces/export Panel-related types and tightens LGraphCanvas public API to use Panel/PanelWidget types; updates LGraphNode property typings and node panel method signatures; adds early-return guard in LegacyMenuCompat and preserves event typing in subgraph slot context menus. Changes
Sequence Diagram(s)(omitted — changes are typings and localized invocation guards; no new multi-component sequential flow to visualize) Possibly related PRs
Suggested reviewers
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Tests:
|
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/14/2026, 12:53:55 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.32 MB (baseline 3.32 MB) • 🔴 +264 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 1.04 MB (baseline 1.04 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.63 kB (baseline 6.63 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 372 kB (baseline 372 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 206 kB (baseline 206 kB) • ⚪ 0 BReusable component library chunks
Status: 8 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 9.19 MB (baseline 9.19 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 5.25 MB (baseline 5.25 MB) • ⚪ 0 BBundles that do not match a named category
Status: 16 added / 16 removed |
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
src/lib/litegraph/src/LGraph.ts (1)
836-853: This method is deprecated; migrate callers tocanvasActioninstead.The
typeof method === 'function'guard is sound for runtime safety. However, TypeScript cannot narrow indexed access through generic type constraints (a known limitation), making the type assertion(method as (...args: unknown[]) => unknown)technically necessary here. Per litegraph guidelines, type assertions are a last resort—but in this case it's a practical necessity unless you restructure around the constraint.Since
sendActionToCanvasis already marked@deprecatedin favor ofcanvasAction(line 830), focus on migrating callers rather than optimizing this method. If refactoring becomes necessary, a small helper function could localize the assertion, but the deprecation makes that a lower priority.src/lib/litegraph/src/contextMenuCompat.ts (1)
79-99: Guard should checktypeof newImpl !== 'function'instead of just!newImpl.The current guard only rejects falsy values, allowing any truthy non-function value to pass through. Since the code calls
newImpl.toString()and the type annotation indicates these properties should only be functions, the guard should explicitly verify the type. All test cases in the codebase assign only functions to these methods—no code attempts to "clear" patches vianullorundefined.Safer guard
- set: (newImpl: LGraphCanvas[K]) => { - if (!newImpl) return + set: (newImpl: LGraphCanvas[K]) => { + if (typeof newImpl !== 'function') return const fnKey = `${methodName as string}:${newImpl.toString().slice(0, 100)}`src/lib/litegraph/src/LGraphCanvas.ts (4)
6364-6432: Bug: default-node “inputs” are created withaddOutput(andnewNode.inputs = []).
IfnodeNewOpts.inputsis meant to define inputs, this will build the node incorrectly.Proposed fix
if (nodeNewOpts.inputs) { newNode.inputs = [] for (const input of nodeNewOpts.inputs) { - newNode.addOutput(input[0], input[1]) + newNode.addInput(input[0], input[1]) } }Also,
nodeNewOpts = nodeNewType as SlotTypeDefaultNodeOptsis a hard assertion; consider a small runtime/type guard to avoid brittle casts in this “extension-driven” config path. (As per litegraph guidelines: type assertions as last resort.)
6966-6969: Fix element typing:.slot_*_type_filterare<select>elements, notHTMLInputElement.
Current typing masks mistakes and defeats the purpose of this PR’s type-tightening.Proposed fix
- // @ts-expect-error Panel? - that.search_box?.close() + that.search_box?.close?.() @@ - let sIn: HTMLInputElement | null = null - let sOut: HTMLInputElement | null = null + let sIn: HTMLSelectElement | null = null + let sOut: HTMLSelectElement | null = null if (options.do_type_filter && that.search_box) { - sIn = that.search_box.querySelector<HTMLInputElement>( + sIn = that.search_box.querySelector<HTMLSelectElement>( '.slot_in_type_filter' ) - sOut = that.search_box.querySelector<HTMLInputElement>( + sOut = that.search_box.querySelector<HTMLSelectElement>( '.slot_out_type_filter' ) }If you want to fully drop the
@ts-expect-error, typesearch_boxas something likeHTMLDivElement & Partial<ICloseable>(since you’re assigning a.close()implementation).Also applies to: 7252-7261
7645-7681: Bug:createPanelignoresoptions.window,options.onOpen, andoptions.onClose.
showShowNodePanel()passes these expecting behavior; without wiring them, panel open/close hooks (and popup document behavior) can silently break.Proposed fix
createPanel(title: string, options: ICreatePanelOptions): Panel { options = options || {} - const root = document.createElement('div') as Panel + const doc = options.window?.document ?? document + const root = doc.createElement('div') as Panel root.className = 'litegraph dialog' root.innerHTML = "<div class='dialog-header'><span class='dialog-title'></span></div><div class='dialog-content'></div><div style='display:none;' class='dialog-alt-content'></div><div class='dialog-footer'></div>" root.header = root.querySelector('.dialog-header')! + root.onOpen = options.onOpen + root.onClose = options.onClose @@ root.close = function () { if (typeof root.onClose == 'function') root.onClose() root.remove() - this.remove() } @@ - if (typeof root.onOpen == 'function') root.onOpen() + if (typeof root.onOpen == 'function') root.onOpen() return root }Also applies to: 7846-7848
7711-7722: SanitizeaddHTML()with DOMPurify to prevent XSS from node metadata.The function directly assigns
innerHTMLwithout sanitization. SinceaddHTML()receives potentially untrusted data from node metadata (e.g.,node.type,node.constructor.descin the call at line 7725–7729), malicious HTML/JS from extensions or custom nodes could execute. DOMPurify is already a project dependency.Proposed fix
+import DOMPurify from 'dompurify' @@ root.addHTML = function ( code: string, classname?: string, on_footer?: boolean ) { const elem = document.createElement('div') if (classname) elem.className = classname - elem.innerHTML = code + elem.innerHTML = DOMPurify.sanitize(code) if (on_footer) root.footer.append(elem) else root.content.append(elem) return elem }
🤖 Fix all issues with AI agents
In @src/lib/litegraph/src/LGraphNode.ts:
- Around line 99-106: The return type for onGetPropertyInfo is too strict
because INodePropertyInfo currently requires name but getPropertyInfo and
onGetPropertyInfo allow/produce empty partials (they do info ||= {} and call
sites treat fields as optional), so change the typing to reflect optional
fields: either make the name property optional in INodePropertyInfo (name?:
string) or change onGetPropertyInfo's return type to Partial<INodePropertyInfo>
(and similarly update any related declarations like getPropertyInfo's signature)
so implementers aren't forced to supply a name while preserving the other fields
as optional.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphCanvas.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
🧰 Additional context used
📓 Path-based instructions (8)
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/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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 thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax 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 JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
🧠 Learnings (16)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:22.621Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: When testing components, import the real type definitions from the component files instead of duplicating interface definitions in the test files. This prevents type drift and maintains consistency.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to 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
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
📚 Learning: 2026-01-09T02:07:59.035Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraph.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Applied to files:
src/lib/litegraph/src/LGraph.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/interfaces.ts
🧬 Code graph analysis (2)
src/lib/litegraph/src/LGraphNode.ts (2)
src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)src/lib/litegraph/src/interfaces.ts (1)
Panel(538-562)
src/lib/litegraph/src/LGraphCanvas.ts (2)
src/lib/litegraph/src/interfaces.ts (5)
Panel(538-562)PanelButton(522-524)PanelWidgetOptions(510-517)PanelWidgetCallback(501-505)PanelWidget(529-532)src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)
🪛 ast-grep (0.40.4)
src/lib/litegraph/src/LGraphCanvas.ts
[warning] 7649-7650: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 7649-7650: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (7)
src/lib/litegraph/src/interfaces.ts (2)
3-3: Good: importingTWidgetValueto ground the new panel APIs in existing widget value types.
497-562:PanelWidgetOptions.valuesshould not be typed asTWidgetValue[]— it represents available options, not widget values.The suggestion to change
values?: unknown[]tovalues?: TWidgetValue[]conflates two distinct domain concepts:
TWidgetValueis the current value of a widget (what the user has selected)valuesis the available options to choose from (e.g.,['fast', 'slow', 'medium']or{ hq: 'High Quality', ... })Examining actual usage shows
valuescan be:
string[](combo choices)Record<string, string>(label-to-value mapping)() => string[](dynamic generation, deprecated but still supported)A better approach would be to use a union type similar to
ComboWidgetValuesif narrowing the type is desired:values?: string[] | Record<string, string> | (() => string[])Alternatively, keep
unknown[]if maintaining flexibility across diverse widget types is required. ButTWidgetValue[]would be semantically incorrect and potentially break existing code passing object or function values.src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts (1)
193-204: Nice: removing theas anycast by passing the correctly typedevent.src/lib/litegraph/src/LGraphNode.ts (1)
613-615: Strong improvement: panel hooks now acceptPanelinstead ofany.src/lib/litegraph/src/LGraphCanvas.ts (3)
699-704: Good:node_panel/options_panelare now typed asPanel, and panel close clearsnode_panel.
This aligns with the “no explicit any” objective and makes panel lifecycle state more explicit.Also applies to: 7869-7870
1255-1264: Good: context menu callback now guardsvbeing missing or a string.
This prevents accidental execution paths where the callback receives a non-entry value.
7890-7894: Good:PanelWidgetCallbackusage now guards missingnamebefore mutating node state.
This matches the callback’s(name: string | undefined, ...)contract and prevents accidental writes.
Myestery
added
the
claude-review
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
src/lib/litegraph/src/contextMenuCompat.ts (1)
79-99: Guard blocks unpatch viaundefined/null, but no code in-repo uses this pattern.The guard
if (!newImpl) returnat line 84 does prevent assignment ofundefined/nullto reset methods, which would leavecurrentImplunchanged. However, no code in the repository attempts to unpatch methods via null/undefined assignment.If supporting explicit reset is desired (as a quality-of-life improvement for extension developers), the proposed adjustment is sound:
Proposed adjustment (add reset-to-original capability)
set: (newImpl: LGraphCanvas[K]) => { - if (!newImpl) return + if (newImpl == null) { + currentImpl = originalMethod + return + } const fnKey = `${methodName as string}:${newImpl.toString().slice(0, 100)}` if (!this.hasWarned.has(fnKey) && this.currentExtension) {
originalMethodis available in scope (line 71), and this would safely restore the original implementation without breaking existing code.src/lib/litegraph/src/LGraphNode.ts (1)
551-675: Loosen callback return types to match existing runtime fallbacks —onGetPropertyInfoalready has a fallback (info ||= {}), andonAddPropertyToPanel's conditional check treatsundefinedas falsy. Current types prevent valid implementations that return nothing implicitly.Type adjustments
- onAddPropertyToPanel?(this: LGraphNode, pName: string, panel: Panel): boolean + onAddPropertyToPanel?( + this: LGraphNode, + pName: string, + panel: Panel + ): boolean | undefined - onGetPropertyInfo?(this: LGraphNode, property: string): INodePropertyInfo + onGetPropertyInfo?( + this: LGraphNode, + property: string + ): INodePropertyInfo | undefinedsrc/lib/litegraph/src/LGraphCanvas.ts (2)
6364-6449: Bug:nodeNewOpts.inputspopulates outputs (should be inputs) + missing node-type guard. This will build the wrong slot layout for default nodes and can make auto-created nodes unusable. Also,nodeTypeStr = nodeNewOpts.node ?? ''can pass an empty type intoLiteGraph.createNode, failing silently.As per litegraph guidelines, avoid type assertions when possible; if this config can be malformed at runtime, consider a small runtime shape-check instead of `as SlotTypeDefaultNodeOpts`.Proposed fix
if (nodeNewType) { interface SlotTypeDefaultNodeOpts { node?: string title?: string properties?: Record<string, NodeProperty> inputs?: [string, string][] outputs?: [string, string][] json?: Parameters<LGraphNode['configure']>[0] } let nodeNewOpts: SlotTypeDefaultNodeOpts | undefined let nodeTypeStr: string if (typeof nodeNewType == 'object') { nodeNewOpts = nodeNewType as SlotTypeDefaultNodeOpts nodeTypeStr = nodeNewOpts.node ?? '' } else { nodeTypeStr = nodeNewType } + if (!nodeTypeStr) { + console.error('slot_types_default_* entry is missing a node type:', { + fromSlotType, + nodeNewType + }) + return false + } + // that.graph.beforeChange(); const xSizeFix = opts.posSizeFix[0] * LiteGraph.NODE_WIDTH const ySizeFix = opts.posSizeFix[1] * LiteGraph.NODE_SLOT_HEIGHT const nodeX = opts.position[0] + opts.posAdd[0] + xSizeFix const nodeY = opts.position[1] + opts.posAdd[1] + ySizeFix const pos = [nodeX, nodeY] const newNode = LiteGraph.createNode(nodeTypeStr, nodeNewOpts?.title, { pos }) if (newNode) { // if is object pass options if (nodeNewOpts) { if (nodeNewOpts.properties) { for (const i in nodeNewOpts.properties) { newNode.addProperty(i, nodeNewOpts.properties[i]) } } if (nodeNewOpts.inputs) { newNode.inputs = [] for (const input of nodeNewOpts.inputs) { - newNode.addOutput(input[0], input[1]) + newNode.addInput(input[0], input[1]) } } if (nodeNewOpts.outputs) { newNode.outputs = [] for (const output of nodeNewOpts.outputs) { newNode.addOutput(output[0], output[1]) } } if (nodeNewOpts.json) { newNode.configure(nodeNewOpts.json) } }
7645-7722: XSS vulnerability:addHTML()directly assigns arbitraryinnerHTMLfrom extension-provided node metadata.The
codeparameter accepts untrusted content fromnode.typeandnode.constructor.desc, which extensions can set arbitrarily via node registration. Sanitize with DOMPurify:+import { default as DOMPurify } from 'dompurify' + root.addHTML = function ( code: string, classname?: string, on_footer?: boolean ) { const elem = document.createElement('div') if (classname) elem.className = classname - elem.innerHTML = code + elem.innerHTML = DOMPurify.sanitize(code) if (on_footer) root.footer.append(elem) else root.content.append(elem) return elem }
🤖 Fix all issues with AI agents
In @src/lib/litegraph/src/interfaces.ts:
- Around line 497-562: The PanelWidgetOptions.values type is too generic
(unknown[]) and should be replaced with a union that matches actual ComboWidget
usage: allow string[] for choice arrays, Record<string,string> for key→label
maps, the deprecated function signature ((widget?: ComboWidget, node?:
LGraphNode) => string[]) and undefined; update the values property on the
PanelWidgetOptions interface (keeping other properties and the index signature)
to use this union so consumers like ComboWidget and code referencing LGraphNode
get correct typings.
In @src/lib/litegraph/src/LGraphCanvas.ts:
- Around line 7252-7261: The variables sIn and sOut in LGraphCanvas (the block
where options.do_type_filter is checked and that.search_box is queried) are
HTMLSelectElement elements, not HTMLInputElement; update their declarations and
the querySelector generics from HTMLInputElement to HTMLSelectElement, and apply
the same change to the similar block around lines 7351-7365 to avoid incorrect
typing and potential DOM errors (look for variables named sIn/sOut and queries
for '.slot_in_type_filter' / '.slot_out_type_filter').
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphCanvas.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
🧰 Additional context used
📓 Path-based instructions (8)
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/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.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 thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax 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 JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.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/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
🧠 Learnings (16)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.tssrc/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/contextMenuCompat.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/contextMenuCompat.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/lib/litegraph/src/LGraph.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Applied to files:
src/lib/litegraph/src/LGraph.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/lib/litegraph/src/LGraph.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-09T02:07:59.035Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/interfaces.ts
🧬 Code graph analysis (3)
src/lib/litegraph/src/LGraphNode.ts (2)
src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)src/lib/litegraph/src/interfaces.ts (1)
Panel(538-562)
src/lib/litegraph/src/interfaces.ts (2)
src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)src/lib/litegraph/src/LGraphNode.ts (4)
LGraphNode(215-217)LGraphNode(227-4201)LGraphNode(748-756)LGraphNode(758-764)
src/lib/litegraph/src/LGraphCanvas.ts (3)
src/lib/litegraph/src/interfaces.ts (5)
Panel(538-562)PanelButton(522-524)PanelWidgetOptions(510-517)PanelWidgetCallback(501-505)PanelWidget(529-532)src/lib/litegraph/src/widgets/BaseWidget.ts (3)
node(61-63)value(100-102)value(104-106)src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)
🪛 ast-grep (0.40.4)
src/lib/litegraph/src/LGraphCanvas.ts
[warning] 7649-7650: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 7649-7650: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
🔇 Additional comments (6)
src/lib/litegraph/src/LGraphNode.ts (1)
95-106:INodePropertyInfoextension is fine; ensure new fields match actual widget semantics.Making
default_valueoptional aligns with nodes that don’t define it, andwidget/label/valuesare useful for richer panels.src/lib/litegraph/src/interfaces.ts (1)
1-4: GoodTWidgetValueimport to keep Panel APIs typed end-to-end.src/lib/litegraph/src/LGraph.ts (1)
836-853:sendActionToCanvasis deprecated and unused — concerns are mootThe method is marked
@deprecatedwith proper reference tocanvasAction, and no call sites exist anywhere in the codebase. The recommended replacement (canvasAction) uses a cleaner callback pattern instead of dynamic method invocation. Since the deprecated method has no active users, the behavior changes regarding null handling and array spreading do not impact the codebase.src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts (1)
193-204: No issue found. TheCanvasPointerEventis fully compatible withLiteGraph.ContextMenu.
CanvasPointerEventextendsPointerEvent(via the interface hierarchy in events.ts), andContextMenuexplicitly validates that the event'sconstructor.nameis one of'MouseEvent','CustomEvent', or'PointerEvent'. At runtime, aCanvasPointerEventhasconstructor.nameof'PointerEvent', which passes validation. All properties used byContextMenu(target,clientX,clientY) are present onPointerEventand are accessible. Removing theas anycast was correct and safe.src/lib/litegraph/src/LGraphCanvas.ts (2)
55-60: Good typing cleanup for Panel + widget values. ThePanel*imports,node_panel/options_paneltyping, and thePanelWidgetCallback-typedfUpdate(withnameguard) all move the public surface away fromanywithout changing behavior.Also applies to: 102-103, 701-703, 7890-7894
1255-1264: Context-menu callback guard looks correct. Early-returning whenvis missing or astringprevents accidental misuse and matches the generic menu value typing better.
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
| if (options.do_type_filter && that.search_box) { | ||
| sIn = that.search_box.querySelector('.slot_in_type_filter') | ||
| sOut = that.search_box.querySelector('.slot_out_type_filter') | ||
| sIn = that.search_box.querySelector<HTMLInputElement>( |
There was a problem hiding this comment.
[quality] high Priority
Issue: Using non-null assertion (!) operator on querySelector results without checking if search_box exists
Context: If this.search_box is null, querySelector will throw a runtime error when accessing properties
Suggestion: Add a null check for this.search_box before calling querySelector: if (!this.search_box) return
There was a problem hiding this comment.
Comprehensive PR Review
This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.
Review Summary
PR: Road to No Explicit Any Part 4: LiteGraph Cleanup (#7970)
Impact: 182 additions, 92 deletions across 6 files
Issue Distribution
- Critical: 0
- High: 1
- Medium: 3
- Low: 2
Category Breakdown
- Architecture: 0 issues
- Security: 0 issues
- Performance: 1 issue
- Code Quality: 5 issues
Key Findings
Architecture & Design
This PR successfully continues the effort to remove explicit any types from the LiteGraph module. The architectural approach is sound:
- New Panel interfaces are well-structured and provide proper typing for dialog components
- Type definitions follow established patterns in the codebase
- The SlotTypeDefaultNodeOpts interface provides better type safety for dynamic node creation
Security Considerations
No security vulnerabilities were identified. The changes are primarily focused on type safety improvements without introducing new attack vectors.
Performance Impact
- One performance-related issue identified regarding incorrect method calls in loop optimization
- The conversion from for...in to for...of loops is a positive performance improvement
- Overall bundle size impact should be minimal as these are primarily type additions
Integration Points
The changes maintain backward compatibility well:
- Existing APIs are preserved with improved typing
- Panel interface additions don't break existing functionality
- Method signature improvements maintain compatibility while adding type safety
Positive Observations
Excellent TypeScript Improvements
- Systematic removal of any types with proper replacements
- Well-structured interface definitions for Panel components
- Good use of generic types and proper null handling in most areas
- Improved type inference in sendActionToCanvas method
Code Quality Enhancements
- Better function parameter typing with proper optional parameters
- Conversion of legacy for...in loops to more modern for...of patterns
- Addition of proper null guards where needed
- Consistent use of TypeScript strict mode features
Documentation and Maintainability
- Clear interface documentation with JSDoc comments
- Logical organization of new type definitions
- Good separation of concerns between different interface types
References
- Repository Architecture Guide
- Frontend Standards
Next Steps
- Address the high-priority issue regarding potential runtime error in querySelector usage
- Fix the incorrect addOutput/addInput method call in the node creation loop
- Consider the medium-priority suggestions for improved type safety and consistency
- Review low-priority items for better code clarity
This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.
github-actions
bot
removed
the
claude-review
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/lib/litegraph/src/LGraphCanvas.ts (3)
6364-6477: HardenSlotTypeDefaultNodeOptsparsing (avoid blind cast + empty node type)
nodeNewType as SlotTypeDefaultNodeOptsassumes the defaults object is well-formed. If an extension (or malformed config) provides{ title: ... }withoutnode, you’ll callLiteGraph.createNode('')and silently fail.Proposed fix (runtime guard + safer `inputs/outputs` handling)
- let nodeNewOpts: SlotTypeDefaultNodeOpts | undefined + let nodeNewOpts: SlotTypeDefaultNodeOpts | undefined let nodeTypeStr: string if (typeof nodeNewType == 'object') { - nodeNewOpts = nodeNewType as SlotTypeDefaultNodeOpts - nodeTypeStr = nodeNewOpts.node ?? '' + // Runtime guard: slot_types_default_* can be extended externally. + const candidate = nodeNewType as Partial<SlotTypeDefaultNodeOpts> + if (typeof candidate.node !== 'string' || candidate.node.length === 0) { + console.warn('Invalid default node config (missing .node):', nodeNewType) + return false + } + nodeNewOpts = candidate as SlotTypeDefaultNodeOpts + nodeTypeStr = candidate.node } else { nodeTypeStr = nodeNewType } + if (!nodeTypeStr) return false const newNode = LiteGraph.createNode(nodeTypeStr, nodeNewOpts?.title, { pos }) if (newNode) { // if is object pass options if (nodeNewOpts) { if (nodeNewOpts.properties) { for (const i in nodeNewOpts.properties) { newNode.addProperty(i, nodeNewOpts.properties[i]) } } if (nodeNewOpts.inputs) { newNode.inputs = [] for (const input of nodeNewOpts.inputs) { newNode.addInput(input[0], input[1]) } } if (nodeNewOpts.outputs) { newNode.outputs = [] for (const output of nodeNewOpts.outputs) { newNode.addOutput(output[0], output[1]) } }Also: nice catch switching inputs to
addInput(instead ofaddOutput).
7645-7844: XSS risk:addHTML(code)usesinnerHTMLon a parameter — sanitize with DOMPurify
Even if most callers pass trusted strings, this is a reusable API surface and an easy injection point (extensions, node metadata, etc.). Coding guidelines explicitly require DOMPurify for HTML.Proposed fix (sanitize `code`)
+import DOMPurify from 'dompurify' @@ root.addHTML = function ( code: string, classname?: string, on_footer?: boolean ) { const elem = document.createElement('div') if (classname) elem.className = classname - elem.innerHTML = code + elem.innerHTML = DOMPurify.sanitize(code) if (on_footer) root.footer.append(elem) else root.content.append(elem) return elem }(Separate note:
root.innerHTML = "<div ...>"is constant and less risky, but if you want to fully satisfy the static analyzer, consider building the DOM tree viacreateElement/appendinstead.)
27-65: FixPanelWidgetOptions.valuestype to matchgetPropertyPrintableValuesignature
PanelWidgetOptions.valuesis typed asunknown[](interfaces.ts:514), butgetPropertyPrintableValueacceptsunknown[] | object | undefined(LGraphCanvas.ts:1503). This mismatch forces a workaround assertion at line 7820 (const values = (options?.values || []) as string[]), which is brittle since actual call sites pass objects likeLiteGraph.NODE_MODES. Update the type definition tovalues?: unknown[] | object | undefinedinPanelWidgetOptionsto eliminate the assertion and match the implementation.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/lib/litegraph/src/LGraphCanvas.tssrc/lib/litegraph/src/LGraphNode.ts
🧰 Additional context used
📓 Path-based instructions (8)
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/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.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 thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax 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 JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.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/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
🧠 Learnings (20)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
📚 Learning: 2026-01-09T02:07:59.035Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/lib/litegraph/src/LGraphNode.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Never use `as any` type assertions - fix the underlying type issue
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-08T02:40:22.621Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:22.621Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: When testing components, import the real type definitions from the component files instead of duplicating interface definitions in the test files. This prevents type drift and maintains consistency.
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use separate `import type` statements instead of inline `type` in mixed imports
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx} : Use function declarations instead of function expressions when possible
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
🧬 Code graph analysis (2)
src/lib/litegraph/src/LGraphNode.ts (2)
src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)src/lib/litegraph/src/interfaces.ts (1)
Panel(538-562)
src/lib/litegraph/src/LGraphCanvas.ts (2)
src/lib/litegraph/src/interfaces.ts (6)
Panel(538-562)IContextMenuValue(410-431)PanelButton(522-524)PanelWidgetOptions(510-517)PanelWidgetCallback(501-505)PanelWidget(529-532)src/lib/litegraph/src/ContextMenu.ts (2)
ContextMenu(9-13)ContextMenu(19-411)
🪛 ast-grep (0.40.5)
src/lib/litegraph/src/LGraphCanvas.ts
[warning] 7649-7650: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 7649-7650: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (8)
src/lib/litegraph/src/LGraphNode.ts (4)
44-44: LGTM!The
Panelimport is correctly added to support typing the callback parameters below.
99-106: LGTM!The interface changes are well-motivated:
nameis now optional to supportgetPropertyInforeturning an empty object (line 1858).- The simplified
default_value?: NodePropertysyntax is cleaner thandefault_value: NodeProperty | undefined.- New properties (
widget,label,values) extend the interface to support richer panel widget metadata.
613-614: LGTM!Properly typed
Panelparameter replaces previousanytype, aligning with the PR's goal of removing explicitanytypes from LiteGraph.
674-674: LGTM!Adding the explicit
INodePropertyInforeturn type improves type inference when implementing this callback.src/lib/litegraph/src/LGraphCanvas.ts (4)
699-715: Good:node_panel/options_panelare now typed asPaneland cleared toundefined
This tightens legacy panel usage without introducingany, and aligns with the “preferundefinedovernull” guidance.
1255-1264: Good guard: context-menu callback now safely ignores string/empty callbacks
Theif (!v || typeof v === 'string') returnprevents accidental access to.callback/.valuewhen LiteGraph passes a string label.
6921-7373: Good:iS/sIn/sOuttyping and null-safe filter checks
TypingsIn/sOutasHTMLSelectElement | nulland using(sIn?.value || sOut?.value)eliminates a bunch of implicit-anyand DOM uncertainty without changing behavior.
7861-7934: Good:PanelWidgetCallbackusage now defends against missingname
if (!name) returnis the right guard given the callback can be invoked for widgets without a property key. Thenode_panel = undefinedcleanup on close is also correct.Also applies to: 7995-7997
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/lib/litegraph/src/LGraphCanvas.ts (2)
7117-7145: Simplify theiSguards to avoid indexing with-1/false.
Current checks are safe-ish, but readability and correctness are better if we only index wheniS >= 0.Proposed tweak
- if (iS !== false && options.node_from.outputs[iS] !== undefined) { - if (iS > -1) { + if (typeof iS === 'number' && iS >= 0 && options.node_from.outputs[iS] !== undefined) { if (node == null) throw new TypeError( 'options.slot_from was null when showing search box' ) options.node_from.connectByType( iS, node, options.node_from.outputs[iS].type ) - } }(Apply similarly for the
node_to.inputsbranch.)Also applies to: 7161-7189
7645-7722: SanitizeaddHTMLto prevent XSS: it assignsinnerHTMLfrom an unsanitized parameter.The method accepts a
codeparameter and directly assigns it toelem.innerHTMLwithout sanitization. SinceaddHTMLis a public Panel API and is called with node metadata (e.g.,node.type,node.constructor.desc) that can come from user-loaded graphs, this is a legitimate injection vector. UseDOMPurify.sanitize()to mitigate the risk.Proposed fix
+import { default as DOMPurify } from 'dompurify' + root.addHTML = function ( code: string, classname?: string, on_footer?: boolean ) { const elem = document.createElement('div') if (classname) elem.className = classname - elem.innerHTML = code + elem.innerHTML = DOMPurify.sanitize(code) if (on_footer) root.footer.append(elem) else root.content.append(elem) return elem }DOMPurify is already a project dependency and is consistently used throughout the codebase with the import pattern shown above.
🤖 Fix all issues with AI agents
In @src/lib/litegraph/src/interfaces.ts:
- Around line 519-524: The PanelButton.options is typed as unknown which loses
useful type information; replace it with a concrete type (or a generic) that
reflects the actual option shapes used by LGraphCanvas.createPanel—for example
define a PanelButtonOptions interface (or a union of known option shapes) and
change PanelButton to use options?: PanelButtonOptions or make PanelButton
generic (PanelButton<TOptions = PanelButtonOptions>) so callers and createPanel
can pass/expect the correct option properties; update LGraphCanvas.createPanel
and any call sites to use the new type or supply the generic parameter.
♻️ Duplicate comments (4)
src/lib/litegraph/src/interfaces.ts (1)
510-517: Previous review concerns remain relevant.The past review correctly identified two issues that still apply:
valuestype (line 514): Based on actualComboWidgetusage,valuescan also beRecord<string, string>for key-to-label mappings. The current type doesn't support this pattern.Index signature (line 516):
[key: string]: unknowncreates type safety holes. Consider defining known optional properties explicitly.src/lib/litegraph/src/LGraphCanvas.ts (3)
6364-6449: MoveSlotTypeDefaultNodeOptsto module scope + replace theas SlotTypeDefaultNodeOptscast with a type guard.
Keeping this interface insidecreateDefaultNodeForSlot+ asserting the shape weakens the “no assertions” guideline and makes the config brittle.Proposed refactor (type guard, no blind assertion)
+type SlotTypeDefaultNodeOpts = { + node?: string + title?: string + properties?: Record<string, NodeProperty> + inputs?: [string, string][] + outputs?: [string, string][] + json?: Parameters<LGraphNode['configure']>[0] +} + +function isSlotTypeDefaultNodeOpts(v: unknown): v is SlotTypeDefaultNodeOpts { + return !!v && typeof v === 'object' +} + if (nodeNewType) { - interface SlotTypeDefaultNodeOpts { - node?: string - title?: string - properties?: Record<string, NodeProperty> - inputs?: [string, string][] - outputs?: [string, string][] - json?: Parameters<LGraphNode['configure']>[0] - } - let nodeNewOpts: SlotTypeDefaultNodeOpts | undefined let nodeTypeStr: string if (typeof nodeNewType == 'object') { - nodeNewOpts = nodeNewType as SlotTypeDefaultNodeOpts - nodeTypeStr = nodeNewOpts.node ?? '' + nodeNewOpts = isSlotTypeDefaultNodeOpts(nodeNewType) + ? nodeNewType + : undefined + nodeTypeStr = nodeNewOpts?.node ?? '' } else { nodeTypeStr = nodeNewType } + if (!nodeTypeStr) { + console.error('Invalid slot type default node config:', nodeNewType) + return false + }
7819-7833:enum/combowidget: confirmoptions.valuesshapes and callback value mapping (object-map vs array).
This area previously had a bug risk whenvaluesis an object map (e.g. enum-like objects). The cast is gone, but the behavior still needs to be explicit: do we want “label” or “mapped value” passed toinnerChange?
7994-7997: Avoid the non-null assertion on the textarea lookup; throw a real error instead.
This is safer if markup changes and avoids!in a hot UI path.Proposed tweak
panel.alt_content.innerHTML = "<textarea class='code'></textarea>" - const textarea: HTMLTextAreaElement = - panel.alt_content.querySelector('textarea')! + const textarea = panel.alt_content.querySelector('textarea') + if (!(textarea instanceof HTMLTextAreaElement)) + throw new TypeError('Textarea not found when opening code pad.')
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/lib/litegraph/src/LGraphCanvas.tssrc/lib/litegraph/src/interfaces.ts
🧰 Additional context used
📓 Path-based instructions (8)
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/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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 thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax 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 JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
🧠 Learnings (22)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
📚 Learning: 2026-01-09T02:07:59.035Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-08T02:40:22.621Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:22.621Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: When testing components, import the real type definitions from the component files instead of duplicating interface definitions in the test files. This prevents type drift and maintains consistency.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Never use `as any` type assertions - fix the underlying type issue
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Never use `any` type - use proper TypeScript types
Applied to files:
src/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use separate `import type` statements instead of inline `type` in mixed imports
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx} : Use function declarations instead of function expressions when possible
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
🪛 ast-grep (0.40.5)
src/lib/litegraph/src/LGraphCanvas.ts
[warning] 7649-7650: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 7649-7650: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (10)
src/lib/litegraph/src/interfaces.ts (4)
3-3: LGTM!The import of
TWidgetValueis correctly added as a type import and is used appropriately by the new Panel-related types.
497-505: LGTM!The callback type is well-defined with appropriate parameter types for handling widget value changes.
526-532: LGTM!The
PanelWidgetinterface is well-typed, correctly usingPanelWidgetOptionsandTWidgetValuefor its properties.
534-562: LGTM!The
Panelinterface is comprehensive and well-structured, providing a complete API surface for panel management with proper method signatures and return types.One minor note: the
options?: unknownparameter inaddButton(line 552) has the same type safety concern asPanelButton.options, but this is consistent with the rest of the API design.src/lib/litegraph/src/LGraphCanvas.ts (6)
55-60: Good: Panel + widget value types are now threaded through the public canvas surface.
This movesnode_panel/options_paneloffanyand makes widget interactions much easier to reason about.Also applies to: 102-103, 701-704
1255-1264: Good: context-menu callback typing +stringguard matches LiteGraph menu semantics.
This avoids treating label-only menu entries as actionable values.
6417-6427: Nice catch: inputs now calladdInput(notaddOutput).
This removes a real behavior bug risk in the default-node path.
7252-7370: Good:sIn/sOutare correctly typed asHTMLSelectElement, and optional chaining avoids null hazards.
7869-7870: Good: panel state resets toundefined(notnull).
Matches the project preference of returning/usingundefinedovernull.
7890-7893: Good:PanelWidgetCallbacknow guardsnamebefore mutating graph state.
This prevents accidental property writes for unnamed widgets.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/lib/litegraph/src/LGraphCanvas.ts (3)
6373-6477: Guard against emptynodeTypeStrwhen slot default config is object-shaped.
IfnodeNewTypeis an object butnodeNewOpts.nodeis missing/empty, this currently callsLiteGraph.createNode(''...), which will fail later with a generic error path.Proposed fix
- let nodeNewOpts: SlotTypeDefaultNodeOpts | undefined - let nodeTypeStr: string + let nodeNewOpts: SlotTypeDefaultNodeOpts | undefined + let nodeTypeStr: string if (typeof nodeNewType == 'object') { nodeNewOpts = nodeNewType as SlotTypeDefaultNodeOpts nodeTypeStr = nodeNewOpts.node ?? '' } else { nodeTypeStr = nodeNewType } + if (!nodeTypeStr) { + console.warn('slot_types_default_* entry is missing a node type', { + fromSlotType, + nodeNewType + }) + return false + }
7648-7673: Avoid non-null assertions onquerySelector()for panel internals.
Right now,root.querySelector(...)!will throw later in harder-to-debug ways if markup changes. Prefer explicit checks with targeted errors.Proposed fix
- root.header = root.querySelector('.dialog-header')! + const header = root.querySelector('.dialog-header') + if (!header) throw new TypeError('Panel header element was null.') + root.header = header @@ - root.title_element = root.querySelector('.dialog-title')! + const titleEl = root.querySelector('.dialog-title') + if (!(titleEl instanceof HTMLSpanElement)) + throw new TypeError('Panel title element was null or not a <span>.') + root.title_element = titleEl @@ - root.content = root.querySelector('.dialog-content')! - root.alt_content = root.querySelector('.dialog-alt-content')! - root.footer = root.querySelector('.dialog-footer')! + const content = root.querySelector('.dialog-content') + if (!(content instanceof HTMLDivElement)) + throw new TypeError('Panel content element was null or not a <div>.') + root.content = content + + const altContent = root.querySelector('.dialog-alt-content') + if (!(altContent instanceof HTMLDivElement)) + throw new TypeError('Panel alt_content element was null or not a <div>.') + root.alt_content = altContent + + const footer = root.querySelector('.dialog-footer') + if (!(footer instanceof HTMLDivElement)) + throw new TypeError('Panel footer element was null or not a <div>.') + root.footer = footer
7645-7736: UnsanitizedinnerHTMLinaddHTML()is an XSS vulnerability.
TheaddHTML(code)method writes user-controlled HTML directly toelem.innerHTMLwithout sanitization. When called with dynamic content (e.g.,node.type,node.constructor.desc), this creates an XSS attack surface. Sanitize the input with DOMPurify before assignment.Proposed fix
+import { default as DOMPurify } from 'dompurify' + root.addHTML = function ( code: string, classname?: string, on_footer?: boolean ) { const elem = document.createElement('div') if (classname) elem.className = classname - elem.innerHTML = code + elem.innerHTML = DOMPurify.sanitize(code) if (on_footer) root.footer.append(elem) else root.content.append(elem) return elem }Note: DOMPurify is already a dependency and the import style matches existing codebase patterns (e.g., in
markdownRendererUtil.ts). The static HTML template increatePanelinitialization is safe and does not require changes.
♻️ Duplicate comments (3)
src/lib/litegraph/src/interfaces.ts (1)
510-516:valuestype may still be incomplete.The past review identified that
valuescan also beRecord<string, string>(object mapping keys to labels) or a function type in actual ComboWidget usage. The currentArray<...>type doesn't cover these cases.src/lib/litegraph/src/LGraphCanvas.ts (2)
7810-7833: Enum/combo widget still assumesoptions.valuesis a string-like list (breaks object-valued enums).
Ifoptions.valuesis object-valued (common for enums), the current callback andtextContentassignment can mis-handle selection (and can display"[object Object]").Proposed fix (support array + object map)
- value_element.addEventListener('click', function (event) { - const values = options?.values || [] + value_element.addEventListener('click', function (event) { + const rawValues = options?.values + const values = Array.isArray(rawValues) + ? rawValues.filter((v) => v != null) + : rawValues && typeof rawValues === 'object' + ? Object.keys(rawValues as Record<string, unknown>) + : [] const propname = this.parentElement?.dataset['property'] - const inner_clicked = (v?: string) => { - this.textContent = v ?? null - innerChange(propname, v) + const inner_clicked = (v?: string) => { + if (!v) return false + this.textContent = v + const mapped = + rawValues && typeof rawValues === 'object' + ? (rawValues as Record<string, unknown>)[v] + : v + innerChange(propname, mapped as TWidgetValue) return false } new LiteGraph.ContextMenu(values, { event, className: 'dark', callback: inner_clicked }) })
7990-8024: ReplacequerySelector('textarea')!with a real null/type check.
This is a direct runtime crash if markup changes or if a DOM mutation occurs before query.Proposed fix
- const textarea: HTMLTextAreaElement = - panel.alt_content.querySelector('textarea')! + const textarea = panel.alt_content.querySelector<HTMLTextAreaElement>( + 'textarea' + ) + if (!textarea) throw new TypeError('Code editor textarea was not found.')
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/lib/litegraph/src/LGraphCanvas.tssrc/lib/litegraph/src/interfaces.ts
🧰 Additional context used
📓 Path-based instructions (8)
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/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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 thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax 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 JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.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/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
🧠 Learnings (22)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
📚 Learning: 2026-01-09T02:07:59.035Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Never use `as any` type assertions - fix the underlying type issue
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Never use `any` type - use proper TypeScript types
Applied to files:
src/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/interfaces.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/lib/litegraph/src/interfaces.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : 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
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-08T02:40:22.621Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:22.621Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: When testing components, import the real type definitions from the component files instead of duplicating interface definitions in the test files. This prevents type drift and maintains consistency.
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use separate `import type` statements instead of inline `type` in mixed imports
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx} : Use function declarations instead of function expressions when possible
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
🧬 Code graph analysis (2)
src/lib/litegraph/src/interfaces.ts (2)
src/lib/litegraph/src/types/widgets.ts (1)
TWidgetValue(264-264)src/lib/litegraph/src/LGraphNode.ts (4)
LGraphNode(215-217)LGraphNode(227-4201)LGraphNode(748-756)LGraphNode(758-764)
src/lib/litegraph/src/LGraphCanvas.ts (1)
src/lib/litegraph/src/interfaces.ts (6)
Panel(537-561)IContextMenuValue(410-431)PanelButton(521-523)PanelWidgetOptions(510-516)PanelWidgetCallback(501-505)PanelWidget(528-531)
🪛 ast-grep (0.40.5)
src/lib/litegraph/src/LGraphCanvas.ts
[warning] 7649-7650: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 7649-7650: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: root.innerHTML =
"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: collect
🔇 Additional comments (8)
src/lib/litegraph/src/interfaces.ts (4)
3-3: LGTM!Correctly uses
import typefor type-only import, following the coding guidelines.
497-505: LGTM!Clean callback type definition with proper parameter typing and clear documentation.
525-531: LGTM!
PanelWidgetis well-typed with specificPanelWidgetOptionsandTWidgetValuetypes.
533-561: Well-structured Panel interface.The interface comprehensively captures the panel's structure and behavior. DOM element types are correct, and the method signatures are properly typed. The use of
options?: unknowninaddButtonis consistent withPanelButton.optionsand was previously justified as appropriate since no concrete option shape is defined yet.src/lib/litegraph/src/LGraphCanvas.ts (4)
27-65: Good typing wins: Panel surface + node_panel/options_panel now properly typed (and cleared toundefined).
This aligns with “no explicit any” and the repo preference forundefinedovernullfor optional fields.Also applies to: 102-103, 710-713, 7869-7870
1264-1273: ContextMenu callback typing +stringguard look correct.
The early return for string/non-actionable menu items keeps the callback path safe.
7252-7370: Search box filter DOM typing improvements (HTMLSelectElement + optional chaining) look solid.
This removes a whole class of “wrong element type” bugs and aligns with the PR goal.
7837-7841: No changes needed. ThePanelWidgetCallbacktype definition ininterfaces.tsexplicitly expects 3 parameters:(name: string | undefined, value: TWidgetValue, options: PanelWidgetOptions) => void. The invocations in the code (opts.callback?.(name, value, opts)andcallback?.(name, value, opts)) match this signature exactly, so there is no typing mismatch or safety concern.Likely an incorrect or invalid review comment.
| interface SlotTypeDefaultNodeOpts { | ||
| node?: string | ||
| title?: string | ||
| properties?: Record<string, NodeProperty> | ||
| inputs?: [string, string][] | ||
| outputs?: [string, string][] | ||
| json?: Parameters<LGraphNode['configure']>[0] | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
SlotTypeDefaultNodeOpts should be validated at runtime (and/or narrowed) before use.
Right now it’s only enforced via typing; the underlying config object can still be malformed and lead to confusing failures later. Consider a small type-guard (even just checking node is a non-empty string) before consuming it.
AustinMroz
left a comment
AustinMroz
left a comment
There was a problem hiding this comment.
I must agree. The code was real rough to review, but I didn't see any actual issues. Looks good to merge.
| const method = c[action] | ||
|
|
||
| if (typeof method === 'function') { | ||
| const args = | ||
| params == null ? [] : Array.isArray(params) ? params : [params] | ||
| ;(method as (...args: unknown[]) => unknown).apply(c, args) | ||
| } |
There was a problem hiding this comment.
| const method = c[action] | |
| if (typeof method === 'function') { | |
| const args = | |
| params == null ? [] : Array.isArray(params) ? params : [params] | |
| ;(method as (...args: unknown[]) => unknown).apply(c, args) | |
| } | |
| this.canvasAction((c) => c[action]?.(params)) |
From personal testing, the above seems to satisfy the compiler.
I would hope that there's a nicer way to do this given how well typed the inputs to this function are, but it's not anything I would consider blocking.
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed all instances of "as unknown as" patterns from test files
- Used proper factory functions from litegraphTestUtils instead of
custom mocks
- Made incomplete mocks explicit using Partial<T> types
- Fixed DialogStore mocking with proper interface exports
- Improved type safety with satisfies operator where applicable
#### App Parameter Removal
- **Removed the unused `app` parameter from all ComfyExtension interface
methods**
- The app parameter was always undefined at runtime as it was never
passed from invokeExtensions
- Affected methods: init, setup, addCustomNodeDefs,
beforeRegisterNodeDef, beforeRegisterVueAppNodeDefs,
registerCustomNodes, loadedGraphNode, nodeCreated, beforeConfigureGraph,
afterConfigureGraph
##### Breaking Change Analysis
Verified via Sourcegraph that this is NOT a breaking change:
- Searched all 10 affected methods across GitHub repositories
- Only one external repository
([drawthingsai/draw-things-comfyui](https://github.com/drawthingsai/draw-things-comfyui))
declares the app parameter in their extension methods
- That repository never actually uses the app parameter (just declares
it in the function signature)
- All other repositories already omit the app parameter
- Search queries used:
- [init method
search](https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/.*+lang:typescript+%22init%28app%22+-repo:Comfy-Org/ComfyUI_frontend&patternType=standard)
- [setup method
search](https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/.*+lang:typescript+%22setup%28app%22+-repo:Comfy-Org/ComfyUI_frontend&patternType=standard)
- Similar searches for all 10 methods confirmed no usage
### Files Changed
Test files:
-
src/components/settings/widgets/__tests__/WidgetInputNumberInput.test.ts
- src/services/keybindingService.escape.test.ts
- src/services/keybindingService.forwarding.test.ts
- src/utils/__tests__/newUserService.test.ts →
src/utils/__tests__/useNewUserService.test.ts
- src/services/jobOutputCache.test.ts
-
src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
-
src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
-
src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
Source files:
- src/types/comfy.ts - Removed app parameter from ComfyExtension
interface
- src/services/extensionService.ts - Improved type safety with
FunctionPropertyNames helper
- src/scripts/metadata/isobmff.ts - Fixed extractJson return type per
review
- src/extensions/core/*.ts - Updated extension implementations
- src/scripts/app.ts - Updated app initialization
### Testing
- All existing tests pass
- Type checking passes
- ESLint/oxlint checks pass
- No breaking changes for external repositories
Part of the "Road to No Explicit Any" initiative.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344 (this PR)
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed all instances of "as unknown as" patterns from test files
- Used proper factory functions from litegraphTestUtils instead of
custom mocks
- Made incomplete mocks explicit using Partial<T> types
- Fixed DialogStore mocking with proper interface exports
- Improved type safety with satisfies operator where applicable
#### App Parameter Removal
- **Removed the unused `app` parameter from all ComfyExtension interface
methods**
- The app parameter was always undefined at runtime as it was never
passed from invokeExtensions
- Affected methods: init, setup, addCustomNodeDefs,
beforeRegisterNodeDef, beforeRegisterVueAppNodeDefs,
registerCustomNodes, loadedGraphNode, nodeCreated, beforeConfigureGraph,
afterConfigureGraph
##### Breaking Change Analysis
Verified via Sourcegraph that this is NOT a breaking change:
- Searched all 10 affected methods across GitHub repositories
- Only one external repository
([drawthingsai/draw-things-comfyui](https://github.com/drawthingsai/draw-things-comfyui))
declares the app parameter in their extension methods
- That repository never actually uses the app parameter (just declares
it in the function signature)
- All other repositories already omit the app parameter
- Search queries used:
- [init method
search](https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/.*+lang:typescript+%22init%28app%22+-repo:Comfy-Org/ComfyUI_frontend&patternType=standard)
- [setup method
search](https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/.*+lang:typescript+%22setup%28app%22+-repo:Comfy-Org/ComfyUI_frontend&patternType=standard)
- Similar searches for all 10 methods confirmed no usage
### Files Changed
Test files:
-
src/components/settings/widgets/__tests__/WidgetInputNumberInput.test.ts
- src/services/keybindingService.escape.test.ts
- src/services/keybindingService.forwarding.test.ts
- src/utils/__tests__/newUserService.test.ts →
src/utils/__tests__/useNewUserService.test.ts
- src/services/jobOutputCache.test.ts
-
src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
-
src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
-
src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
Source files:
- src/types/comfy.ts - Removed app parameter from ComfyExtension
interface
- src/services/extensionService.ts - Improved type safety with
FunctionPropertyNames helper
- src/scripts/metadata/isobmff.ts - Fixed extractJson return type per
review
- src/extensions/core/*.ts - Updated extension implementations
- src/scripts/app.ts - Updated app initialization
### Testing
- All existing tests pass
- Type checking passes
- ESLint/oxlint checks pass
- No breaking changes for external repositories
Part of the "Road to No Explicit Any" initiative.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344 (this PR)
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed improper `as unknown as Type` patterns from 17 test files in
Group 8 part 7
- Replaced with proper TypeScript patterns using factory functions and
Mock types
- Fixed createTestingPinia usage in test files (was incorrectly using
createPinia)
- Fixed vi.hoisted pattern for mockSetDirty in viewport tests
- Fixed vi.doMock lint issues with vi.mock and vi.hoisted pattern
- Retained necessary `as unknown as` casts only for complex mock objects
where direct type assertions would fail
### Files Changed
Test files (Group 8 part 7 - services, stores, utils):
- src/services/nodeOrganizationService.test.ts
- src/services/providers/algoliaSearchProvider.test.ts
- src/services/providers/registrySearchProvider.test.ts
- src/stores/comfyRegistryStore.test.ts
- src/stores/domWidgetStore.test.ts
- src/stores/executionStore.test.ts
- src/stores/firebaseAuthStore.test.ts
- src/stores/modelToNodeStore.test.ts
- src/stores/queueStore.test.ts
- src/stores/subgraphNavigationStore.test.ts
- src/stores/subgraphNavigationStore.viewport.test.ts
- src/stores/subgraphStore.test.ts
- src/stores/systemStatsStore.test.ts
- src/stores/workspace/nodeHelpStore.test.ts
- src/utils/colorUtil.test.ts
- src/utils/executableGroupNodeChildDTO.test.ts
Source files:
- src/stores/modelStore.ts - Improved type handling
### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- All affected test files pass (`pnpm test:unit`)
- Linting passes without errors (`pnpm lint`)
- Code formatting applied (`pnpm format`)
Part of the "Road to No Explicit Any" initiative, cleaning up type
casting issues from branch `fix/remove-any-types-part8`.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459 (this PR)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8459-Road-to-No-explicit-any-Group-8-part-7-test-files-2f86d73d36508114ad28d82e72a3a5e9)
by [Unito](https://www.unito.io)
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed improper `as unknown as Type` patterns from 17 test files in
Group 8 part 7
- Replaced with proper TypeScript patterns using factory functions and
Mock types
- Fixed createTestingPinia usage in test files (was incorrectly using
createPinia)
- Fixed vi.hoisted pattern for mockSetDirty in viewport tests
- Fixed vi.doMock lint issues with vi.mock and vi.hoisted pattern
- Retained necessary `as unknown as` casts only for complex mock objects
where direct type assertions would fail
### Files Changed
Test files (Group 8 part 7 - services, stores, utils):
- src/services/nodeOrganizationService.test.ts
- src/services/providers/algoliaSearchProvider.test.ts
- src/services/providers/registrySearchProvider.test.ts
- src/stores/comfyRegistryStore.test.ts
- src/stores/domWidgetStore.test.ts
- src/stores/executionStore.test.ts
- src/stores/firebaseAuthStore.test.ts
- src/stores/modelToNodeStore.test.ts
- src/stores/queueStore.test.ts
- src/stores/subgraphNavigationStore.test.ts
- src/stores/subgraphNavigationStore.viewport.test.ts
- src/stores/subgraphStore.test.ts
- src/stores/systemStatsStore.test.ts
- src/stores/workspace/nodeHelpStore.test.ts
- src/utils/colorUtil.test.ts
- src/utils/executableGroupNodeChildDTO.test.ts
Source files:
- src/stores/modelStore.ts - Improved type handling
### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- All affected test files pass (`pnpm test:unit`)
- Linting passes without errors (`pnpm lint`)
- Code formatting applied (`pnpm format`)
Part of the "Road to No Explicit Any" initiative, cleaning up type
casting issues from branch `fix/remove-any-types-part8`.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459 (this PR)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8459-Road-to-No-explicit-any-Group-8-part-7-test-files-2f86d73d36508114ad28d82e72a3a5e9)
by [Unito](https://www.unito.io)
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed improper `as unknown as Type` patterns from test files in
Group 8 part 8
- Replaced with proper TypeScript patterns using Pinia store testing
patterns
- Fixed parameter shadowing issue in typeGuardUtil.test.ts (constructor
→ nodeConstructor)
- Fixed stale mock values in useConflictDetection.test.ts using getter
functions
- Refactored useManagerState tests to follow proper Pinia store testing
patterns with createTestingPinia
### Files Changed
Test files (Group 8 part 8 - utils and manager composables):
- src/utils/typeGuardUtil.test.ts - Fixed parameter shadowing
- src/utils/graphTraversalUtil.test.ts - Removed unsafe type assertions
- src/utils/litegraphUtil.test.ts - Improved type handling
- src/workbench/extensions/manager/composables/useManagerState.test.ts -
Complete rewrite using Pinia testing patterns
-
src/workbench/extensions/manager/composables/useConflictDetection.test.ts
- Fixed stale mock values with getters
- src/workbench/extensions/manager/composables/useManagerQueue.test.ts -
Type safety improvements
-
src/workbench/extensions/manager/composables/nodePack/useMissingNodes.test.ts
- Removed unsafe casts
-
src/workbench/extensions/manager/composables/nodePack/usePacksSelection.test.ts
- Type improvements
-
src/workbench/extensions/manager/composables/nodePack/usePacksStatus.test.ts
- Type improvements
- src/workbench/extensions/manager/utils/versionUtil.test.ts - Type
safety fixes
Source files (minor type fixes):
- src/utils/fuseUtil.ts - Type improvements
- src/utils/linkFixer.ts - Type safety fixes
- src/utils/syncUtil.ts - Type improvements
-
src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
- Type fix
-
src/workbench/extensions/manager/composables/useConflictAcknowledgment.ts
- Type fix
### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- All affected test files pass (`pnpm test:unit`)
- Linting passes without errors (`pnpm lint`)
- Code formatting applied (`pnpm format`)
Part of the "Road to No Explicit Any" initiative, cleaning up type
casting issues from branch `fix/remove-any-types-part8`.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496 (this PR)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8496-Road-to-No-explicit-any-Group-8-part-8-test-files-2f86d73d365081f3afdcf8d01fba81e1)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed improper `as unknown as Type` patterns from 17 test files in
Group 8 part 7
- Replaced with proper TypeScript patterns using factory functions and
Mock types
- Fixed createTestingPinia usage in test files (was incorrectly using
createPinia)
- Fixed vi.hoisted pattern for mockSetDirty in viewport tests
- Fixed vi.doMock lint issues with vi.mock and vi.hoisted pattern
- Retained necessary `as unknown as` casts only for complex mock objects
where direct type assertions would fail
### Files Changed
Test files (Group 8 part 7 - services, stores, utils):
- src/services/nodeOrganizationService.test.ts
- src/services/providers/algoliaSearchProvider.test.ts
- src/services/providers/registrySearchProvider.test.ts
- src/stores/comfyRegistryStore.test.ts
- src/stores/domWidgetStore.test.ts
- src/stores/executionStore.test.ts
- src/stores/firebaseAuthStore.test.ts
- src/stores/modelToNodeStore.test.ts
- src/stores/queueStore.test.ts
- src/stores/subgraphNavigationStore.test.ts
- src/stores/subgraphNavigationStore.viewport.test.ts
- src/stores/subgraphStore.test.ts
- src/stores/systemStatsStore.test.ts
- src/stores/workspace/nodeHelpStore.test.ts
- src/utils/colorUtil.test.ts
- src/utils/executableGroupNodeChildDTO.test.ts
Source files:
- src/stores/modelStore.ts - Improved type handling
### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- All affected test files pass (`pnpm test:unit`)
- Linting passes without errors (`pnpm lint`)
- Code formatting applied (`pnpm format`)
Part of the "Road to No Explicit Any" initiative, cleaning up type
casting issues from branch `fix/remove-any-types-part8`.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459 (this PR)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8459-Road-to-No-explicit-any-Group-8-part-7-test-files-2f86d73d36508114ad28d82e72a3a5e9)
by [Unito](https://www.unito.io)
## Summary
This PR removes unsafe type assertions ("as unknown as Type") from test
files and improves type safety across the codebase.
### Key Changes
#### Type Safety Improvements
- Removed improper `as unknown as Type` patterns from test files in
Group 8 part 8
- Replaced with proper TypeScript patterns using Pinia store testing
patterns
- Fixed parameter shadowing issue in typeGuardUtil.test.ts (constructor
→ nodeConstructor)
- Fixed stale mock values in useConflictDetection.test.ts using getter
functions
- Refactored useManagerState tests to follow proper Pinia store testing
patterns with createTestingPinia
### Files Changed
Test files (Group 8 part 8 - utils and manager composables):
- src/utils/typeGuardUtil.test.ts - Fixed parameter shadowing
- src/utils/graphTraversalUtil.test.ts - Removed unsafe type assertions
- src/utils/litegraphUtil.test.ts - Improved type handling
- src/workbench/extensions/manager/composables/useManagerState.test.ts -
Complete rewrite using Pinia testing patterns
-
src/workbench/extensions/manager/composables/useConflictDetection.test.ts
- Fixed stale mock values with getters
- src/workbench/extensions/manager/composables/useManagerQueue.test.ts -
Type safety improvements
-
src/workbench/extensions/manager/composables/nodePack/useMissingNodes.test.ts
- Removed unsafe casts
-
src/workbench/extensions/manager/composables/nodePack/usePacksSelection.test.ts
- Type improvements
-
src/workbench/extensions/manager/composables/nodePack/usePacksStatus.test.ts
- Type improvements
- src/workbench/extensions/manager/utils/versionUtil.test.ts - Type
safety fixes
Source files (minor type fixes):
- src/utils/fuseUtil.ts - Type improvements
- src/utils/linkFixer.ts - Type safety fixes
- src/utils/syncUtil.ts - Type improvements
-
src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
- Type fix
-
src/workbench/extensions/manager/composables/useConflictAcknowledgment.ts
- Type fix
### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- All affected test files pass (`pnpm test:unit`)
- Linting passes without errors (`pnpm lint`)
- Code formatting applied (`pnpm format`)
Part of the "Road to No Explicit Any" initiative, cleaning up type
casting issues from branch `fix/remove-any-types-part8`.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496 (this PR)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8496-Road-to-No-explicit-any-Group-8-part-8-test-files-2f86d73d365081f3afdcf8d01fba81e1)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
## Summary This PR removes `any` types from UI component files and replaces them with proper TypeScript types. ### Key Changes #### Type Safety Improvements - Replaced `any` with `unknown`, explicit types, or proper interfaces across UI components - Used `ComponentPublicInstance` with explicit method signatures for component refs - Used `Record<string, unknown>` for dynamic property access - Added generics for form components with flexible value types - Used `CSSProperties` for style objects ### Files Changed UI Components: - src/components/common/ComfyImage.vue - Used proper class prop type - src/components/common/DeviceInfo.vue - Used `string | number` for formatValue - src/components/common/FormItem.vue - Used `unknown` for model value - src/components/common/FormRadioGroup.vue - Added generic type parameter - src/components/common/TreeExplorer.vue - Used proper async function signature - src/components/custom/widget/WorkflowTemplateSelectorDialog.vue - Fixed duplicate import - src/components/graph/CanvasModeSelector.vue - Used `ComponentPublicInstance` for ref - src/components/node/NodePreview.vue - Changed `any` to `unknown` - src/components/queue/job/JobDetailsPopover.vue - Removed unnecessary casts - src/components/queue/job/JobFiltersBar.vue - Removed `as any` casts - src/platform/assets/components/MediaAssetContextMenu.vue - Added `ContextMenuInstance` type - src/renderer/extensions/minimap/MiniMapPanel.vue - Used `CSSProperties` - src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts - Added `PrimeVueTooltipElement` interface - src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue - Used `Record<string, unknown>` - src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue - Added `LicenseObject` interface ### Testing - All TypeScript type checking passes (`pnpm typecheck`) - Linting passes without errors (`pnpm lint`) Part of the "Road to No Explicit Any" initiative. ### Previous PRs in this series: - Part 2: #7401 - Part 3: #7935 - Part 4: #7970 - Part 5: #8064 - Part 6: #8083 - Part 7: #8092 - Part 8 Group 1: #8253 - Part 8 Group 2: #8258 - Part 8 Group 3: #8304 - Part 8 Group 4: #8314 - Part 8 Group 5: #8329 - Part 8 Group 6: #8344 - Part 8 Group 7: #8459 - Part 8 Group 8: #8496 - Part 9: #8498 - Part 10: #8499 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8499-Road-to-No-Explicit-Any-Part-10-2f86d73d365081aab129f165c7d02434) by [Unito](https://www.unito.io)
## Summary
This PR removes `any` types from core source files and replaces them
with proper TypeScript types.
### Key Changes
#### Type Safety Improvements
- Replaced `any` with `unknown`, explicit types, or proper interfaces
across core files
- Introduced new type definitions: `SceneConfig`, `Load3DNode`,
`ElectronWindow`
- Used `Object.assign` instead of `as any` for dynamic property
assignment
- Replaced `as any` casts with proper type assertions
### Files Changed
Source files:
- src/extensions/core/widgetInputs.ts - Removed unnecessary `as any`
cast
- src/platform/cloud/onboarding/auth.ts - Used `Record<string, unknown>`
and Sentry types
- src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts -
Used `AuditLog[]` type
- src/platform/workflow/management/stores/workflowStore.ts - Used
`typeof ComfyWorkflow` constructor type
- src/scripts/app.ts - Used `ResultItem[]` for Clipspace images
- src/services/colorPaletteService.ts - Used `Object.assign` instead of
`as any`
- src/services/customerEventsService.ts - Used `unknown` instead of
`any`
- src/services/load3dService.ts - Added proper interface types for
Load3D nodes
- src/types/litegraph-augmentation.d.ts - Used `TWidgetValue[]` type
- src/utils/envUtil.ts - Added ElectronWindow interface
- src/workbench/extensions/manager/stores/comfyManagerStore.ts - Typed
event as `CustomEvent<{ ui_id?: string }>`
### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- Linting passes without errors (`pnpm lint`)
- Code formatting applied (`pnpm format`)
Part of the "Road to No Explicit Any" initiative.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496
- Part 9: #8498 (this PR)
## Summary
This PR removes `any` types from widgets, services, stores, and test
files, replacing them with proper TypeScript types.
### Key Changes
#### Type Safety Improvements
- Replaced `any` with `unknown`, explicit types, or proper interfaces
across widgets and services
- Added proper type imports (TgpuRoot, Point, StyleValue, etc.)
- Created typed interfaces (NumericWidgetOptions, TestWindow,
ImportFailureDetail, etc.)
- Fixed function return types to be non-nullable where appropriate
- Added type guards and null checks instead of non-null assertions
- Used `ComponentProps` from vue-component-type-helpers for component
testing
#### Widget System
- Added index signature to IWidgetOptions for Record compatibility
- Centralized disabled logic in WidgetInputNumberInput
- Moved template type assertions to computed properties
- Fixed ComboWidget getOptionLabel type assertions
- Improved remote widget type handling with runtime checks
#### Services & Stores
- Fixed getOrCreateViewer to return non-nullable values
- Updated addNodeOnGraph to use specific options type `{ pos?: Point }`
- Added proper type assertions for settings store retrieval
- Fixed executionIdToCurrentId return type (string | undefined)
#### Test Infrastructure
- Exported GraphOrSubgraph from litegraph barrel to avoid circular
dependencies
- Updated test fixtures with proper TypeScript types (TestInfo,
LGraphNode)
- Replaced loose Record types with ComponentProps in tests
- Added proper error handling in WebSocket fixture
#### Code Organization
- Created shared i18n-types module for locale data types
- Made ImportFailureDetail non-exported (internal use only)
- Added @public JSDoc tag to ElectronWindow type
- Fixed console.log usage in scripts to use allowed methods
### Files Changed
**Widgets & Components:**
-
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
-
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
-
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
- src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
-
src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
- src/lib/litegraph/src/widgets/ComboWidget.ts
- src/lib/litegraph/src/types/widgets.ts
- src/components/common/LazyImage.vue
- src/components/load3d/Load3dViewerContent.vue
**Services & Stores:**
- src/services/litegraphService.ts
- src/services/load3dService.ts
- src/services/colorPaletteService.ts
- src/stores/maskEditorStore.ts
- src/stores/nodeDefStore.ts
- src/platform/settings/settingStore.ts
- src/platform/workflow/management/stores/workflowStore.ts
**Composables & Utils:**
- src/composables/node/useWatchWidget.ts
- src/composables/useCanvasDrop.ts
- src/utils/widgetPropFilter.ts
- src/utils/queueDisplay.ts
- src/utils/envUtil.ts
**Test Files:**
- browser_tests/fixtures/ComfyPage.ts
- browser_tests/fixtures/ws.ts
- browser_tests/tests/actionbar.spec.ts
-
src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
- src/lib/litegraph/src/subgraph/subgraphUtils.test.ts
- src/components/rightSidePanel/shared.test.ts
- src/platform/cloud/subscription/composables/useSubscription.test.ts
-
src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts
**Scripts & Types:**
- scripts/i18n-types.ts (new shared module)
- scripts/diff-i18n.ts
- scripts/check-unused-i18n-keys.ts
- src/workbench/extensions/manager/types/conflictDetectionTypes.ts
- src/types/algoliaTypes.ts
- src/types/simplifiedWidget.ts
**Infrastructure:**
- src/lib/litegraph/src/litegraph.ts (added GraphOrSubgraph export)
- src/lib/litegraph/src/infrastructure/CustomEventTarget.ts
- src/platform/assets/services/assetService.ts
**Stories:**
- apps/desktop-ui/src/views/InstallView.stories.ts
- src/components/queue/job/JobDetailsPopover.stories.ts
**Extension Manager:**
- src/workbench/extensions/manager/composables/useConflictDetection.ts
- src/workbench/extensions/manager/composables/useManagerQueue.ts
- src/workbench/extensions/manager/services/comfyManagerService.ts
- src/workbench/extensions/manager/utils/conflictMessageUtil.ts
### Testing
- [x] All TypeScript type checking passes (`pnpm typecheck`)
- [x] ESLint passes without errors (`pnpm lint`)
- [x] Format checks pass (`pnpm format:check`)
- [x] Knip (unused exports) passes (`pnpm knip`)
- [x] Pre-commit and pre-push hooks pass
Part of the "Road to No Explicit Any" initiative.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496
- Part 9: #8498
- Part 10: #8499
---------
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
## Summary
This PR removes `any` types from widgets, services, stores, and test
files, replacing them with proper TypeScript types.
### Key Changes
#### Type Safety Improvements
- Replaced `any` with `unknown`, explicit types, or proper interfaces
across widgets and services
- Added proper type imports (TgpuRoot, Point, StyleValue, etc.)
- Created typed interfaces (NumericWidgetOptions, TestWindow,
ImportFailureDetail, etc.)
- Fixed function return types to be non-nullable where appropriate
- Added type guards and null checks instead of non-null assertions
- Used `ComponentProps` from vue-component-type-helpers for component
testing
#### Widget System
- Added index signature to IWidgetOptions for Record compatibility
- Centralized disabled logic in WidgetInputNumberInput
- Moved template type assertions to computed properties
- Fixed ComboWidget getOptionLabel type assertions
- Improved remote widget type handling with runtime checks
#### Services & Stores
- Fixed getOrCreateViewer to return non-nullable values
- Updated addNodeOnGraph to use specific options type `{ pos?: Point }`
- Added proper type assertions for settings store retrieval
- Fixed executionIdToCurrentId return type (string | undefined)
#### Test Infrastructure
- Exported GraphOrSubgraph from litegraph barrel to avoid circular
dependencies
- Updated test fixtures with proper TypeScript types (TestInfo,
LGraphNode)
- Replaced loose Record types with ComponentProps in tests
- Added proper error handling in WebSocket fixture
#### Code Organization
- Created shared i18n-types module for locale data types
- Made ImportFailureDetail non-exported (internal use only)
- Added @public JSDoc tag to ElectronWindow type
- Fixed console.log usage in scripts to use allowed methods
### Files Changed
**Widgets & Components:**
-
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
-
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
-
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
- src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
-
src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
- src/lib/litegraph/src/widgets/ComboWidget.ts
- src/lib/litegraph/src/types/widgets.ts
- src/components/common/LazyImage.vue
- src/components/load3d/Load3dViewerContent.vue
**Services & Stores:**
- src/services/litegraphService.ts
- src/services/load3dService.ts
- src/services/colorPaletteService.ts
- src/stores/maskEditorStore.ts
- src/stores/nodeDefStore.ts
- src/platform/settings/settingStore.ts
- src/platform/workflow/management/stores/workflowStore.ts
**Composables & Utils:**
- src/composables/node/useWatchWidget.ts
- src/composables/useCanvasDrop.ts
- src/utils/widgetPropFilter.ts
- src/utils/queueDisplay.ts
- src/utils/envUtil.ts
**Test Files:**
- browser_tests/fixtures/ComfyPage.ts
- browser_tests/fixtures/ws.ts
- browser_tests/tests/actionbar.spec.ts
-
src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
- src/lib/litegraph/src/subgraph/subgraphUtils.test.ts
- src/components/rightSidePanel/shared.test.ts
- src/platform/cloud/subscription/composables/useSubscription.test.ts
-
src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts
**Scripts & Types:**
- scripts/i18n-types.ts (new shared module)
- scripts/diff-i18n.ts
- scripts/check-unused-i18n-keys.ts
- src/workbench/extensions/manager/types/conflictDetectionTypes.ts
- src/types/algoliaTypes.ts
- src/types/simplifiedWidget.ts
**Infrastructure:**
- src/lib/litegraph/src/litegraph.ts (added GraphOrSubgraph export)
- src/lib/litegraph/src/infrastructure/CustomEventTarget.ts
- src/platform/assets/services/assetService.ts
**Stories:**
- apps/desktop-ui/src/views/InstallView.stories.ts
- src/components/queue/job/JobDetailsPopover.stories.ts
**Extension Manager:**
- src/workbench/extensions/manager/composables/useConflictDetection.ts
- src/workbench/extensions/manager/composables/useManagerQueue.ts
- src/workbench/extensions/manager/services/comfyManagerService.ts
- src/workbench/extensions/manager/utils/conflictMessageUtil.ts
### Testing
- [x] All TypeScript type checking passes (`pnpm typecheck`)
- [x] ESLint passes without errors (`pnpm lint`)
- [x] Format checks pass (`pnpm format:check`)
- [x] Knip (unused exports) passes (`pnpm knip`)
- [x] Pre-commit and pre-push hooks pass
Part of the "Road to No Explicit Any" initiative.
### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496
- Part 9: #8498
- Part 10: #8499
---------
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
5 participants
Summary
anytypes from LiteGraph modulePanelinterface for createPanel function and related callbacksSlotTypeDefaultNodeOptsfor slot type defaults configurationChanges
as anycast in showSlotContextMenuTest plan
┆Issue is synchronized with this Notion page by Unito