refactor: Refactor some jsx files to vue files

feat: add global hooks to emulate sort of an event bus between components
* global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient

examples/CustomConnectionLine/ConnectionLine.vue

@@ -1,3 +1,16 @@
+<template>
+  <g>
+    <path
+      class="animated"
+      fill="none"
+      stroke="#222"
+      :stroke-width="1.5"
+      :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
+    />
+    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>
+<script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { ConnectionLineComponentProps } from '../../src';
 
@@ -19,21 +32,8 @@ const ConnectionLine = defineComponent({
       type: Number as PropType<ConnectionLineComponentProps['targetY']>,
       required: true
     }
-  },
-  setup(props) {
-    return () => (
-      <g>
-        <path
-          fill="none"
-          stroke="#222"
-          stroke-width={1.5}
-          class="animated"
-          d={`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`}
-        />
-        <circle cx={props.targetX} cy={props.targetY} fill="#fff" r={3} stroke="#222" stroke-width={1.5} />
-      </g>
-    );
   }
 });
 
 export default ConnectionLine;
+</script>

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -0,0 +1,36 @@
+<template>
+  <RevueFlow
+    v-model="elements"
+    :connectionLineComponent="ConnectionLine"
+    :onElementsRemove="onElementsRemove"
+    :onConnect="onConnect"
+  >
+    <Background :variant="bgVariant" />
+  </RevueFlow>
+</template>
+<script lang="ts">
+import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
+
+import ConnectionLine from './ConnectionLine.vue';
+import { defineComponent, ref } from 'vue';
+
+const ConnectionLineFlow = defineComponent({
+  components: { RevueFlow, Background },
+  setup() {
+    const elements = ref<Elements>([{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }]);
+    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));
+
+    return {
+      ConnectionLine,
+      elements,
+      onElementsRemove,
+      onConnect,
+      bgVariant: BackgroundVariant.Lines
+    };
+  }
+});
+
+export default ConnectionLineFlow;
+</script>

examples/CustomConnectionLine/index.tsx

@@ -1,28 +0,0 @@
-import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
-
-import ConnectionLine from './ConnectionLine';
-import { defineComponent, ref } from 'vue';
-
-const initialElements: Elements = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
-
-const ConnectionLineFlow = defineComponent({
-  components: { Background },
-  setup() {
-    const elements = ref(initialElements);
-    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
-
-    return () => (
-      <RevueFlow
-        elements={elements.value}
-        connectionLineComponent={ConnectionLine as any}
-        onElementsRemove={onElementsRemove}
-        onConnect={onConnect}
-      >
-        <Background variant={BackgroundVariant.Lines} />
-      </RevueFlow>
-    );
-  }
-});
-
-export default ConnectionLineFlow;