update(deps): Add unplugin-components

fix: Excessive rerender of edge texts
update(script-setup): Update some examples

* Remove more jsx files

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { getSourceTargetNodes } from './utils'
+import MarkerDefinitions from './MarkerDefinitions.vue'
+import Edge from '~/components/Edges/Edge.vue'
+import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
+import {
+  ConnectionLineType,
+  ConnectionMode,
+  CustomConnectionLine,
+  Dimensions,
+  EdgeType,
+  RevueFlowStore,
+  Transform,
+} from '~/types'
+
+interface EdgeRendererProps {
+  edgeTypes: Record<string, EdgeType>
+  dimensions: Dimensions
+  transform: Transform
+  connectionLineType?: ConnectionLineType
+  connectionLineStyle?: CSSProperties
+  customConnectionLine?: CustomConnectionLine
+  connectionMode?: ConnectionMode
+  arrowHeadColor?: string
+  markerEndId?: string
+  onlyRenderVisibleElements?: boolean
+}
+
+const props = withDefaults(defineProps<EdgeRendererProps>(), {
+  transform: () => [0, 0, 1],
+  arrowHeadColor: '#b1b1b7',
+  dimensions: () => ({ width: 0, height: 0 }),
+  onlyRenderVisibleElements: false,
+  connectionMode: ConnectionMode.Strict,
+  connectionLineType: ConnectionLineType.Bezier,
+})
+
+const store = inject<RevueFlowStore>('store')!
+
+const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
+const connectionLineVisible = computed(
+  () => store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType,
+)
+</script>
+<template>
+  <svg :width="props.dimensions.width" :height="props.dimensions.height" class="revue-flow__edges">
+    <MarkerDefinitions :color="props.arrowHeadColor" />
+    <g
+      :transform="props.transform.length && `translate(${props.transform[0]},${props.transform[1]}) scale(${props.transform[2]})`"
+    >
+      <template v-for="(edge, i) of store.edges" :key="`edge-${i}`">
+        <Edge
+          :edge="edge"
+          :nodes="getSourceTargetNodes(edge, store.nodes)"
+          :type="props.edgeTypes[edge.type || 'default']"
+          :dimensions="props.dimensions"
+          :transform="props.transform"
+          :only-render-visible-elements="props.onlyRenderVisibleElements"
+          :marker-end-id="props.markerEndId"
+        />
+      </template>
+      <ConnectionLine
+        v-if="connectionLineVisible"
+        :source-node="sourceNode"
+        :connection-line-style="props.connectionLineStyle"
+        :connection-line-type="props.connectionLineType"
+        :custom-connection-line="props.customConnectionLine"
+      />
+    </g>
+  </svg>
+</template>

src/container/EdgeRenderer/Marker.tsx

@@ -1,30 +0,0 @@
-import { defineComponent } from 'vue'
-
-interface MarkerProps {
-  id: string
-}
-
-export default defineComponent({
-  props: {
-    id: {
-      type: String,
-      required: true
-    }
-  },
-  setup(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>
-    )
-  }
-})

src/container/EdgeRenderer/Marker.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+interface MarkerProps {
+  id: string
+}
+
+const props = defineProps<MarkerProps>()
+</script>
+<template>
+  <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"
+  >
+    <slot></slot>
+  </marker>
+</template>

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,43 +0,0 @@
-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: false,
-      default: ''
-    }
-  },
-  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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import Marker from './Marker.vue'
+
+interface MarkerDefinitionsProps {
+  color: string
+}
+
+const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
+  color: '',
+})
+</script>
+<template>
+  <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>
+</template>

src/container/EdgeRenderer/index.tsx

@@ -1,99 +0,0 @@
-import { CSSProperties, defineComponent, inject, PropType } from 'vue'
-import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types'
-import ConnectionLine from '../../components/ConnectionLine'
-import Edge from '../../components/Edges/EdgeDepr'
-import MarkerDefinitions from './MarkerDefinitions'
-
-interface EdgeRendererProps {
-  edgeTypes: any
-  connectionLineType: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  connectionLineComponent?: ConnectionLineComponent
-  connectionMode?: ConnectionMode
-  arrowHeadColor: string
-  markerEndId?: string
-  onlyRenderVisibleElements: boolean
-  edgeUpdaterRadius?: number
-}
-
-export default defineComponent({
-  name: 'EdgeRenderer',
-  components: {
-    Edge,
-    ConnectionLine,
-    MarkerDefinitions,
-  },
-  props: {
-    edgeTypes: {
-      type: Object,
-      required: true,
-    },
-    connectionLineType: {
-      type: String as PropType<EdgeRendererProps['connectionLineType']>,
-      required: false,
-      default: undefined,
-    },
-    connectionLineStyle: {
-      type: Object as PropType<EdgeRendererProps['connectionLineStyle']>,
-      required: false,
-      default: undefined,
-    },
-    connectionLineComponent: {
-      type: Object as PropType<EdgeRendererProps['connectionLineComponent']>,
-      required: false,
-      default: undefined,
-    },
-    connectionMode: {
-      type: String as PropType<EdgeRendererProps['connectionMode']>,
-      required: false,
-      default: undefined,
-    },
-    arrowHeadColor: {
-      type: String as PropType<EdgeRendererProps['arrowHeadColor']>,
-      required: false,
-      default: undefined,
-    },
-    markerEndId: {
-      type: String as PropType<EdgeRendererProps['markerEndId']>,
-      required: false,
-      default: undefined,
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<EdgeRendererProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: undefined,
-    },
-    edgeUpdaterRadius: {
-      type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup(props) {
-    const store = inject<RevueFlowStore>('store')!
-
-    return () => (
-      <svg width={store.width} height={store.height} className="revue-flow__edges">
-        <MarkerDefinitions color={props.arrowHeadColor} />
-        <g transform={`translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`}>
-          {store.edges.map((edge, i) => (
-            <Edge
-              edge={edge}
-              type={props.edgeTypes[edge.type || 'default']}
-              onlyRenderVisibleElements={props.onlyRenderVisibleElements}
-              markerEndId={props.markerEndId}
-              key={edge.id + i}
-            />
-          ))}
-          {store.connectionNodeId && store.connectionHandleType && (
-            <ConnectionLine
-              connectionLineStyle={props.connectionLineStyle}
-              connectionLineType={props.connectionLineType}
-              customConnectionLine={props.connectionLineComponent}
-            />
-          )}
-        </g>
-      </svg>
-    )
-  },
-})