refactor: back to jsx 🥇

src/components/Handle/Handle.ts

@@ -1,70 +0,0 @@
-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,11 +1,8 @@
 import { getHostForElement } from '../../utils';
-import { ElementId, XYPosition, ConnectionMode, SetConnectionId, Connection, HandleType, RevueFlowStore } from '../../types';
+import { ElementId, ConnectionMode, Connection, HandleType, RevueFlowStore } from '../../types';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 export type ValidConnectionFunc = (connection: Connection) => boolean;
-export type SetSourceIdFunc = (params: SetConnectionId) => void;
-
-export type SetPosition = (pos: XYPosition) => void;
 
 type Result = {
   elementBelow: Element | null;

src/components/Handle/index.tsx

@@ -5,7 +5,7 @@ import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 
 const alwaysValid = () => true;
 
-const Handle = defineComponent({
+export default defineComponent({
   props: {
     type: {
       type: String,
@@ -41,21 +41,18 @@ const Handle = defineComponent({
   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 nodeId = inject<ElementId>('NodeIdContext')!;
 
-    const onMouseDownHandler = (event: MouseEvent) => {
-      console.log('mousedown');
-      onMouseDown(event, store, hooks, props.id as string, nodeId, isTarget.value, props.isValidConnection);
-    };
+    const onMouseDownHandler = (event: MouseEvent) =>
+      onMouseDown(event, store, hooks, props.id as string, nodeId, props.type === 'target', props.isValidConnection);
 
     const handleClasses = computed(() => [
       'revue-flow__handle',
       `revue-flow__handle-${props.position}`,
       'nodrag',
       {
-        source: !isTarget.value,
-        target: isTarget.value,
+        source: props.type !== 'target',
+        target: props.type === 'target',
         connectable: props.isConnectable
       }
     ]);
@@ -73,5 +70,3 @@ const Handle = defineComponent({
     );
   }
 });
-
-export default Handle;