update(deps): Add unplugin-components

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

* Remove more jsx files

src/components/Edges/Edge.vue

@@ -180,6 +180,8 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
         data: props.edge.data,
         style: props.edge.style,
         arrowHeadType: props.edge.arrowHeadType,
+        sourcePosition,
+        targetPosition,
         sourceX: edgePos.sourceX,
         sourceY: edgePos.sourceY,
         targetX: edgePos.targetX,

src/components/Edges/EdgeText.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { HTMLAttributes, ref, VNode, watchEffect } from 'vue'
-import { Rect } from '~/types'
+import { HTMLAttributes, VNode } from 'vue'
 
 interface EdgeTextProps extends HTMLAttributes {
   x: number
@@ -22,30 +21,14 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 })
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
-const edgeTextBox = ref<Rect>({ x: 0, y: 0, width: 0, height: 0 })
-
-watchEffect(() => {
-  const textBbox = edgeRef.value?.getBBox()
-
-  if (textBbox) {
-    edgeTextBox.value = {
-      x: textBbox.x,
-      y: textBbox.y,
-      width: textBbox.width,
-      height: textBbox.height,
-    }
-  }
-})
+const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
 </script>
 <template>
-  <g
-    :transform="`translate(${props.x - edgeTextBox.width / 2} ${props.y - edgeTextBox.height / 2})`"
-    class="revue-flow__edge-textwrapper"
-  >
+  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="revue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
-      :width="edgeTextBox.width + 2 * props.labelBgPadding[0] + 'px'"
-      :height="edgeTextBox.height + 2 * props.labelBgPadding[1] + 'px'"
+      :width="width + 2 * props.labelBgPadding[0] + 'px'"
+      :height="height + 2 * props.labelBgPadding[1] + 'px'"
       :x="-props.labelBgPadding[0]"
       :y="-props.labelBgPadding[1]"
       class="revue-flow__edge-textbg"
@@ -53,8 +36,11 @@ watchEffect(() => {
       :rx="props.labelBgBorderRadius"
       :ry="props.labelBgBorderRadius"
     />
-    <text ref="edge-text" class="revue-flow__edge-text" :y="edgeTextBox.height / 2" dy="0.3em" :style="props.labelStyle">
-      {{ props.label }}
+    <text ref="edge-text" class="revue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
+      <component :is="props.label" v-if="typeof props.label !== 'string'" />
+      <template v-else>
+        {{ props.label }}
+      </template>
     </text>
     <slot></slot>
   </g>

src/components/Nodes/DefaultNode.vue

@@ -19,7 +19,10 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
 <template>
   <div class="revue-flow__node-default">
     <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
-    {{ props.data?.label }}
+    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+    <template v-else>
+      {{ props.data?.label }}
+    </template>
     <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
   </div>
 </template>

src/components/Nodes/InputNode.vue

@@ -16,7 +16,10 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
 </script>
 <template>
   <div class="revue-flow__node-input">
-    {{ props.data?.label }}
+    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+    <template v-else>
+      {{ props.data?.label }}
+    </template>
     <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
   </div>
 </template>

src/components/Nodes/OutputNode.vue

@@ -16,7 +16,10 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
 </script>
 <template>
   <div class="revue-flow__node-output">
-    {{ props.data?.label }}
+    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+    <template v-else>
+      {{ props.data?.label }}
+    </template>
     <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
   </div>
 </template>