Move node EventMap to types and use createEventDispatcher from svelte

Using createEventDispatcher from another imported function seems to
break the svelte types and thus none of the node events where typed.

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -5,17 +5,17 @@
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
-  import type { Node } from '$lib/types';
+  import type { Node, NodeEventMap } from '$lib/types';
-  import { createNodeEventDispatcher } from '$lib';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
 
-  const dispatch = createEventDispatcher<{
+  const dispatch = createEventDispatcher<
-    selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
+    NodeEventMap & {
-    selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+      selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
-  }>();
+      selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
-  const dispatchNodeEvent = createNodeEventDispatcher();
+    }
+  >();
 
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
@@ -37,13 +37,13 @@
       disabled: false,
       store,
       onDrag: (event, _, __, nodes) => {
-        dispatchNodeEvent('nodedrag', { event, targetNode: null, nodes });
+        dispatch('nodedrag', { event, targetNode: null, nodes });
       },
       onDragStart: (event, _, __, nodes) => {
-        dispatchNodeEvent('nodedragstart', { event, targetNode: null, nodes });
+        dispatch('nodedragstart', { event, targetNode: null, nodes });
       },
       onDragStop: (event, _, __, nodes) => {
-        dispatchNodeEvent('nodedragstop', { event, targetNode: null, nodes });
+        dispatch('nodedragstop', { event, targetNode: null, nodes });
       }
     }}
     on:contextmenu={onContextMenu}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import { setContext, onDestroy } from 'svelte';
+  import { setContext, onDestroy, createEventDispatcher } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
   import { errorMessages, Position } from '@xyflow/system';
@@ -11,7 +11,7 @@
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
   import { getNodeInlineStyleDimensions } from './utils';
-  import { createNodeEventDispatcher } from '$lib';
+  import type { NodeEventMap } from '$lib/types';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -58,7 +58,7 @@
   let nodeRef: HTMLDivElement;
   let prevNodeRef: HTMLDivElement | null = null;
 
-  const dispatchNodeEvent = createNodeEventDispatcher();
+  const dispatchNodeEvent = createEventDispatcher<NodeEventMap>();
   const connectableStore = writable(connectable);
   let prevType: string | undefined = undefined;
   let prevSourcePosition: Position | undefined = undefined;

packages/svelte/src/lib/types/nodes.ts

@@ -45,3 +45,14 @@ export type NodeTypes = Record<
 export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
 
 export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
+
+export type NodeEventMap = {
+  nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+  nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+  nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+  nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+  nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+  nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+  nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+  nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+};

packages/svelte/src/lib/utils/index.ts

@@ -1,4 +1,3 @@
-import { createEventDispatcher } from 'svelte';
 import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '$lib/types';
@@ -22,15 +21,3 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
-
-export const createNodeEventDispatcher = () =>
-  createEventDispatcher<{
-    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
-    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
-    nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
-    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
-    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
-  }>();