refactor: back to jsx 🥇

src/container/EdgeRenderer/Marker.tsx

@@ -0,0 +1,22 @@
+import { FunctionalComponent } from 'vue';
+
+interface MarkerProps {
+  id: string;
+}
+
+export default ((props: MarkerProps, { slots }) => {
+  return () => (
+    <marker
+      id={props.id}
+      class="revue-flow__arrowhead"
+      markerWidth="12.5"
+      markerHeight="12.5"
+      viewBox="-10 -10 20 20"
+      orient="auto"
+      refX="0"
+      refY="0"
+    >
+      {slots.default ? slots.default() : ''}
+    </marker>
+  );
+}) as FunctionalComponent<MarkerProps>;

src/container/EdgeRenderer/Marker.vue

@@ -1,30 +0,0 @@
-<template>
-  <marker
-    :id="id"
-    class="revue-flow__arrowhead"
-    markerWidth="12.5"
-    markerHeight="12.5"
-    viewBox="-10 -10 20 20"
-    orient="auto"
-    refX="0"
-    refY="0"
-  >
-    <slot></slot>
-  </marker>
-</template>
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-interface MarkerProps {
-  id: string;
-}
-
-export default defineComponent({
-  props: {
-    id: {
-      type: String as PropType<MarkerProps['id']>,
-      required: true
-    }
-  }
-});
-</script>

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -0,0 +1,42 @@
+import { defineComponent, PropType } from 'vue';
+import Marker from './Marker';
+
+interface MarkerDefinitionsProps {
+  color: string;
+}
+
+export default defineComponent({
+  components: { Marker },
+  props: {
+    color: {
+      type: String as PropType<MarkerDefinitionsProps['color']>,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => (
+      <defs>
+        <Marker id="revue-flow__arrowclosed">
+          <polyline
+            stroke={props.color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1"
+            fill={props.color}
+            points="-5,-4 0,0 -5,4 -5,-4"
+          />
+        </Marker>
+        <Marker id="revue-flow__arrow">
+          <polyline
+            stroke={props.color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            fill="none"
+            points="-5,-4 0,0 -5,4"
+          />
+        </Marker>
+      </defs>
+    );
+  }
+});

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -1,45 +0,0 @@
-<template>
-  <defs>
-    <Marker id="revue-flow__arrowclosed">
-      <polyline
-        :stroke="color"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1"
-        :fill="color"
-        points="-5,-4 0,0 -5,4 -5,-4"
-      />
-    </Marker>
-    <Marker id="revue-flow__arrow">
-      <polyline
-        :stroke="color"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-        fill="none"
-        points="-5,-4 0,0 -5,4"
-      />
-    </Marker>
-  </defs>
-</template>
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import Marker from './Marker.vue';
-
-interface MarkerDefinitionsProps {
-  color: string;
-}
-
-const MarkerDefinitions = defineComponent({
-  name: 'MarkerDefinitions',
-  components: { Marker },
-  props: {
-    color: {
-      type: String as PropType<MarkerDefinitionsProps['color']>,
-      required: true
-    }
-  }
-});
-
-export default MarkerDefinitions;
-</script>

src/container/EdgeRenderer/index.tsx

@@ -1,30 +1,8 @@
-<template>
-  <svg :width="width" :height="height" class="revue-flow__edges">
-    <MarkerDefinitions :color="arrowHeadColor" />
-    <g :transform="transformStyle">
-      <template v-for="edge of edges" :key="edge.id">
-        <Edge
-          :edge="edge"
-          :marker-end-id="markerEndId"
-          :onlyRenderVisibleElements="onlyRenderVisibleElements"
-          :type="edgeTypes[edge.type]"
-        />
-        <ConnectionLine
-          v-if="renderConnectionLine"
-          :connectionLineStyle="connectionLineStyle"
-          :connectionLineType="connectionLineType"
-          :CustomConnectionLineComponent="connectionLineComponent"
-        />
-      </template>
-    </g>
-  </svg>
-</template>
-<script lang="ts">
 import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
-import Edge from '../../components/Edges/Edge.vue';
-import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue';
 import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
-import MarkerDefinitions from './MarkerDefinitions.vue';
+import ConnectionLine from '../../components/ConnectionLine';
+import MarkerDefinitions from './MarkerDefinitions';
+import Edge from '../../components/Edges/Edge';
 
 interface EdgeRendererProps {
   edgeTypes: any;
@@ -38,7 +16,7 @@ interface EdgeRendererProps {
   edgeUpdaterRadius?: number;
 }
 
-const EdgeRenderer = defineComponent({
+export default defineComponent({
   name: 'EdgeRenderer',
   components: {
     Edge,
@@ -48,8 +26,7 @@ const EdgeRenderer = defineComponent({
   props: {
     edgeTypes: {
       type: Object,
-      required: false,
-      default: undefined
+      required: true
     },
     connectionLineType: {
       type: String as PropType<EdgeRendererProps['connectionLineType']>,
@@ -92,27 +69,36 @@ const EdgeRenderer = defineComponent({
       default: undefined
     }
   },
-  setup() {
-    const store = inject<RevueFlowStore>('store')!;
-    const edges = computed(() => store.edges);
-    const transform = computed(() => store.transform);
+  setup(props) {
+    const store = inject<RevueFlowStore>('store');
+    const transform = computed(() => store?.transform);
     const transformStyle = computed(() => {
       return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
     });
-    const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
-    const width = computed(() => store.width);
-    const height = computed(() => store.height);
+    const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
 
-    return {
-      transform,
-      transformStyle,
-      renderConnectionLine,
-      edges,
-      width,
-      height
-    };
+    return () => (
+      <svg width={store?.width} height={store?.height} class="revue-flow__edges">
+        <MarkerDefinitions color={props.arrowHeadColor as string} />
+        <g transform={transformStyle.value}>
+          {store?.edges.map((edge) => (
+            <Edge
+              key={edge.id}
+              edge={edge}
+              type={props.edgeTypes[edge.type || 'default']}
+              onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+              markerEndId={props.markerEndId}
+            />
+          ))}
+          {renderConnectionLine.value && (
+            <ConnectionLine
+              connectionLineStyle={props.connectionLineStyle}
+              connectionLineType={props.connectionLineType}
+              customConnectionLine={props.connectionLineComponent}
+            />
+          )}
+        </g>
+      </svg>
+    );
   }
 });
-
-export default EdgeRenderer;
-</script>