update: Remove wrapEdge and wrapNode files

* implement Edge.tsx and Node.vue to wrap the components accordingly
refactor!: Removing callbacks from props in favor of events
chore: upgrade vue and vite vue plugin

src/components/Handle/Handle.ts

@@ -0,0 +1,70 @@
+import { ElementId, Position, RevueFlowStore } from '../../types';
+import { onMouseDown, ValidConnectionFunc } from './handler';
+import { computed, defineComponent, h, inject, PropType } from 'vue';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+const alwaysValid = () => true;
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'source'
+    },
+    position: {
+      type: String as PropType<Position>,
+      required: false,
+      default: Position.Top
+    },
+    isValidConnection: {
+      type: Function as PropType<ValidConnectionFunc>,
+      required: false,
+      default: alwaysValid
+    },
+    isConnectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    id: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props, { slots }) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
+    const isTarget = computed(() => props.type === 'target');
+
+    const onMouseDownHandler = (event: MouseEvent) => {
+      onMouseDown(event, store, hooks, props.id || '', nodeId, isTarget.value, props.isValidConnection);
+    };
+
+    const handleClasses = computed(() => [
+      'revue-flow__handle',
+      `revue-flow__handle-${props.position}`,
+      'nodrag',
+      {
+        source: !isTarget.value,
+        target: isTarget.value,
+        connectable: props.isConnectable
+      }
+    ]);
+
+    return () =>
+      h(
+        'div',
+        {
+          dataHandleid: props.id,
+          dataNodeid: nodeId,
+          dataHandlepos: props.position,
+          class: handleClasses.value,
+          onMouseDown: onMouseDownHandler
+        },
+        slots.default?.()
+      );
+  }
+});

src/components/Handle/handler.ts

@@ -1,15 +1,5 @@
 import { getHostForElement } from '../../utils';
-
-import {
-  ElementId,
-  XYPosition,
-  OnConnectFunc,
-  ConnectionMode,
-  SetConnectionId,
-  Connection,
-  HandleType,
-  RevueFlowStore
-} from '../../types';
+import { ElementId, XYPosition, ConnectionMode, SetConnectionId, Connection, HandleType, RevueFlowStore } from '../../types';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 export type ValidConnectionFunc = (connection: Connection) => boolean;
@@ -89,14 +79,14 @@ export function onMouseDown(
     connectStart: RevueFlowHooks['connectStart'];
     connectStop: RevueFlowHooks['connectStop'];
     connectEnd: RevueFlowHooks['connectEnd'];
+    connect: RevueFlowHooks['connect'];
+    edgeUpdateEnd: RevueFlowHooks['edgeUpdateEnd'];
   },
   handleId: ElementId | null,
   nodeId: ElementId,
-  onConnect: OnConnectFunc,
   isTarget: boolean,
   isValidConnection: ValidConnectionFunc,
-  elementEdgeUpdaterType?: HandleType,
-  onEdgeUpdateEnd?: (evt: MouseEvent) => void
+  elementEdgeUpdaterType?: HandleType
 ): void {
   const revueFlowNode = (event.target as Element).closest('.revue-flow');
   // when revue-flow is used inside a shadow root we can't use document
@@ -169,13 +159,13 @@ export function onMouseDown(
     hooks.connectStop.trigger(event);
 
     if (isValid) {
-      onConnect?.(connection);
+      hooks.connect.trigger(connection);
     }
 
     hooks.connectEnd.trigger(event);
 
-    if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
-      onEdgeUpdateEnd(event);
+    if (elementEdgeUpdaterType) {
+      hooks.edgeUpdateEnd.trigger({ event } as any);
     }
 
     resetRecentHandle(recentHoveredHandle);

src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
+import { ElementId, Position, RevueFlowStore } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
 import { computed, defineComponent, inject, PropType } from 'vue';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
@@ -43,26 +43,10 @@ const Handle = defineComponent({
     const hooks = inject<RevueFlowHooks>('hooks')!;
     const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
     const isTarget = computed(() => props.type === 'target');
-    const onConnect = computed(() => store.onConnect);
-
-    const onConnectExtended = (params: Connection) => {
-      onConnect.value?.(params);
-      props.onConnect?.(params);
-    };
 
     const onMouseDownHandler = (event: MouseEvent) => {
-      onMouseDown(
-        event,
-        store,
-        hooks,
-        props.id as string,
-        nodeId,
-        onConnectExtended,
-        isTarget.value,
-        props.isValidConnection,
-        undefined,
-        undefined
-      );
+      console.log('mousedown');
+      onMouseDown(event, store, hooks, props.id as string, nodeId, isTarget.value, props.isValidConnection);
     };
 
     const handleClasses = computed(() => [