mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
4fc1d2ef5b
## Summary - Add `typescript/no-explicit-any` rule to `.oxlintrc.json` to enforce no explicit `any` types - Fix all 40 instances of explicit `any` throughout the codebase - Improve type safety with proper TypeScript types ## Changes Made ### Configuration - Added `typescript/no-explicit-any` rule to `.oxlintrc.json` ### Type Fixes - Replaced `any` with `unknown` for truly unknown types - Updated generic type parameters to use `unknown` defaults instead of `any` - Fixed method `this` parameters to avoid variance issues - Updated component props to match new generic types - Fixed test mocks to use proper type assertions ### Key Files Modified - `src/types/treeExplorerTypes.ts`: Updated TreeExplorerNode interface generics - `src/platform/settings/types.ts`: Fixed SettingParams generic default - `src/lib/litegraph/src/LGraph.ts`: Fixed ParamsArray type constraint - `src/extensions/core/electronAdapter.ts`: Fixed onChange callbacks - `src/views/GraphView.vue`: Added proper type imports - Multiple test files: Fixed type assertions and mocks ## Test Plan - [x] All lint checks pass (`pnpm lint`) - [x] TypeScript compilation succeeds (`pnpm typecheck`) - [x] Pre-commit hooks pass - [x] No regression in functionality ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8601-feat-add-typescript-no-explicit-any-rule-and-fix-all-instances-2fd6d73d365081fd9beef75d5a6daf5b) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
ref="container"
|
|
class="node-lib-node-container"
|
|
data-testid="node-tree-folder"
|
|
:data-folder-name="node.label"
|
|
>
|
|
<TreeExplorerTreeNode :node="node" @item-dropped="handleItemDrop" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
|
import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
|
|
import type { BookmarkCustomization } from '@/schemas/apiSchema'
|
|
import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
|
|
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
|
import { InjectKeyExpandedKeys } from '@/types/treeExplorerTypes'
|
|
import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
|
|
|
const { node } = defineProps<{
|
|
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
|
}>()
|
|
|
|
const nodeBookmarkStore = useNodeBookmarkStore()
|
|
const customization = computed<BookmarkCustomization | undefined>(() => {
|
|
const nodeDef = node.data
|
|
return nodeDef
|
|
? nodeBookmarkStore.bookmarksCustomization[nodeDef.nodePath]
|
|
: undefined
|
|
})
|
|
|
|
const treeNodeElement = ref<HTMLElement | null>(null)
|
|
const iconElement = ref<HTMLElement | null>(null)
|
|
|
|
let stopWatchCustomization: (() => void) | null = null
|
|
|
|
const container = ref<HTMLElement | null>(null)
|
|
onMounted(() => {
|
|
treeNodeElement.value = container.value?.closest(
|
|
'.p-tree-node-content'
|
|
) as HTMLElement
|
|
iconElement.value = treeNodeElement.value.querySelector(
|
|
':scope > .p-tree-node-icon'
|
|
) as HTMLElement
|
|
updateIconColor()
|
|
|
|
// Start watching after the component is mounted
|
|
stopWatchCustomization = watch(customization, updateIconColor, { deep: true })
|
|
})
|
|
|
|
const updateIconColor = () => {
|
|
if (iconElement.value && customization.value) {
|
|
iconElement.value.style.color = customization.value.color ?? ''
|
|
}
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
if (stopWatchCustomization) {
|
|
stopWatchCustomization()
|
|
}
|
|
})
|
|
|
|
const expandedKeys = inject(InjectKeyExpandedKeys)
|
|
const handleItemDrop = (node: RenderedTreeExplorerNode<ComfyNodeDefImpl>) => {
|
|
if (!expandedKeys) return
|
|
expandedKeys.value[node.key] = true
|
|
}
|
|
</script>
|