refactor: back to jsx 🥇

examples/CustomConnectionLine/ConnectionLine.vue

@@ -14,7 +14,7 @@
 import { defineComponent, PropType } from 'vue';
 import { ConnectionLineComponentProps } from '../../src';
 
-const ConnectionLine = defineComponent({
+export default defineComponent({
   props: {
     sourceX: {
       type: Number as PropType<ConnectionLineComponentProps['sourceX']>,
@@ -34,6 +34,4 @@ const ConnectionLine = defineComponent({
     }
   }
 });
-
-export default ConnectionLine;
 </script>

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,9 +1,9 @@
 <template>
   <RevueFlow
     v-model="elements"
-    :connectionLineComponent="ConnectionLine"
-    :onElementsRemove="onElementsRemove"
-    :onConnect="onConnect"
+    :connection-line-component="ConnectionLine"
+    @elementsRemove="onElementsRemove"
+    @connect="onConnect"
   >
     <Background :variant="bgVariant" />
   </RevueFlow>
@@ -14,10 +14,17 @@ import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elem
 import ConnectionLine from './ConnectionLine.vue';
 import { defineComponent, ref } from 'vue';
 
-const ConnectionLineFlow = defineComponent({
+export default defineComponent({
   components: { RevueFlow, Background },
   setup() {
-    const elements = ref<Elements>([{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }]);
+    const elements = ref<Elements>([
+      {
+        id: '1',
+        type: 'input',
+        data: { label: 'Node 1' },
+        position: { x: 250, y: 5 }
+      }
+    ] as Elements);
     const onElementsRemove = (elementsToRemove: Elements) =>
       (elements.value = removeElements(elementsToRemove, elements.value as Elements));
     const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
@@ -31,6 +38,4 @@ const ConnectionLineFlow = defineComponent({
     };
   }
 });
-
-export default ConnectionLineFlow;
 </script>

examples/CustomNode/CustomNode.vue

@@ -116,7 +116,7 @@ const CustomNodeFlow = defineComponent({
         { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
         { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
         { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
-      ];
+      ] as Elements;
     });
 
     const onElementsRemove = (elementsToRemove: Elements) =>

examples/DragNDrop/DnD.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="dndflow">
     <div class="revueflow-wrapper" @drop="onDrop">
-      <RevueFlow
-        v-model="elements"
-        :onConnect="onConnect"
-        :onElementsRemove="onElementsRemove"
-        :onLoad="onLoad"
-        @dragover="onDragOver"
-        @click="onDrop"
-      >
+      <RevueFlow v-model="elements" @elementsRemove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
         <Controls />
       </RevueFlow>
     </div>
@@ -43,7 +36,7 @@ const DnDFlow = defineComponent({
         data: { label: 'input node' },
         position: { x: 250, y: 5 }
       }
-    ]);
+    ] as Elements);
 
     let id = 0;
     const getId = (): ElementId => `dndnode_${id++}`;
@@ -67,12 +60,12 @@ const DnDFlow = defineComponent({
         console.log(event.dataTransfer?.getData('application/revueflow'));
         const type = event.dataTransfer?.getData('application/revueflow');
         const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
-        const newNode: Node = {
+        const newNode = {
           id: getId(),
           type,
           position,
           data: { label: `${type} node` }
-        };
+        } as Node;
 
         elements.value.push(newNode);
       }