Custom Node Documentation incorrect?

[PhilG0lding]

Hello!

Wasn't sure whether to raise this as a an issue or not, as I may be at fault!

Currently looking at implementing some custom Nodes - based off behaviour trees. I'm following along with the documentation, using TypeScript, here:
https://vueflow.dev/guide/node.html#user-defined-nodes

Firstly, it looks like './nodes' file is missing, referenced in CustomNode.vue:
import { CustomData, CustomEvents } from './nodes'

I have assumed this is a typo, and should be imported from the App.vue (or rather, pulled out to their own file)

export interface CustomData {
  hello: string
}

export interface CustomEvents {
  onCustomEvent: (event: MouseEvent) => void
}

Having "corrected" that, and error when defining the CustomNode type:
type CustomNode = Node<CustomData, CustomEvents, CustomNodeTypes>
Type 'CustomEvents' does not satisfy the constraint 'Record<string, CustomEvent>'. Index signature for type 'string' is missing in type 'CustomEvents'

Previously I had tried converting the CustomEvents to a type, but that kicked errors down to the component instead.

Is there any examples setting up Custom Nodes with TypeScript?

[bcakmakoglu]

Firstly, it looks like './nodes' file is missing, referenced in CustomNode.vue:

True, I'll inline the types so it's clear what they represent.

As to the rest of your issues:

1. Avoid using "CustomEvents" - it's going to be removed really soon and it serves no meaningful purpose. If you need to add some "listener" to a node, put it into node.data.
2. A Node type could look like this:

interface ColorSelectorData {
  color: string
}

type ColorSelectorNode = Node<ColorSelectorData, {}, 'color-selector'>

3. If, for whatever reason, you have to use CustomEvents you can try this:

import type { Node } from '@vue-flow/core'

interface ColorSelectorData {
  color: string
}

interface CustomEvents extends Record<string, any> {
  onColorChange: (color: string) => void
}

type ColorSelectorNode = Node<ColorSelectorData, CustomEvents, 'color-selector'>

Or just inline the events into Node<Data, { eventName: () => void }, NodeType>

[PhilG0lding]

Thank you very much, for a quick and detailed reply!

I don't need CustomEvents, so just opted for the empty object option (Much to ESLint's dismay):

import type { Node } from '@vue-flow/core'

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export type BehaviourNode = Node<BehaviourNodeData, {}, BehaviourNodeTypes>

export type BehaviourNodeTypes = 'root' | 'selector' | 'sequence' | 'decorator' | 'task'

export interface BehaviourNodeData {
  label: string
}

Thanks for your hard work!