update(deps): Add unplugin-components

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

* Remove more jsx files

src/container/NodeRenderer/NodeRenderer.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import Node from '~/components/Nodes/Node.vue'
+import { NodeType, Node as TNode, Transform, Dimensions, RevueFlowStore } from '~/types'
+import { getNodesInside } from '~/utils/graph'
+
+interface NodeRendererProps {
+  nodeTypes: Record<string, NodeType>
+  dimensions: Dimensions
+  transform: Transform
+}
+
+const props = withDefaults(defineProps<NodeRendererProps>(), {
+  transform: () => [0, 0, 1],
+  dimensions: () => ({ width: 0, height: 0 }),
+})
+
+const store = inject<RevueFlowStore>('store')!
+
+const getNodes = computed(() =>
+  store.onlyRenderVisibleElements
+    ? store.nodes &&
+      getNodesInside(
+        store.nodes,
+        {
+          x: 0,
+          y: 0,
+          width: props.dimensions.width,
+          height: props.dimensions.height,
+        },
+        props.transform,
+        true,
+      )
+    : store.nodes,
+)
+
+const type = (node: TNode) => {
+  const nodeType = node.type || 'default'
+  const type = props.nodeTypes[nodeType] || props.nodeTypes.default
+  if (!props.nodeTypes[nodeType]) {
+    console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
+  }
+  return type
+}
+
+const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
+</script>
+<template>
+  <div
+    class="revue-flow__nodes"
+    :style="{ transform: `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})` }"
+  >
+    <template v-for="(node, i) of getNodes" :key="`node-${i}`">
+      <Node
+        :node="node"
+        :type="type(node)"
+        :scale="props.transform[2]"
+        :selected="selected(node.id)"
+        :selectable="node.selectable || store.elementsSelectable"
+        :connectable="node.connectable || store.nodesConnectable"
+        :draggable="node.draggable || store.nodesDraggable"
+      />
+    </template>
+  </div>
+</template>

src/container/NodeRenderer/index.tsx

@@ -1,94 +0,0 @@
-import { defineComponent, inject, PropType } from 'vue'
-import Node from '../../components/Nodes/NodeDepr'
-import { getNodesInside } from '../../utils/graph'
-import { NodeType, RevueFlowStore } from '../../types'
-
-interface NodeRendererProps {
-  nodeTypes: Record<string, NodeType>
-  selectNodesOnDrag: boolean
-  snapToGrid: boolean
-  snapGrid: [number, number]
-  onlyRenderVisibleElements: boolean
-}
-
-export default defineComponent({
-  name: 'NodeRenderer',
-  components: { Node },
-  props: {
-    nodeTypes: {
-      type: Object as PropType<NodeRendererProps['nodeTypes']>,
-      required: false,
-      default: undefined,
-    },
-    selectNodesOnDrag: {
-      type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
-      required: false,
-      default: undefined,
-    },
-    snapToGrid: {
-      type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
-      required: false,
-      default: undefined,
-    },
-    snapGrid: {
-      type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
-      required: false,
-      default: undefined,
-    },
-    onlyRenderVisibleElements: {
-      type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup(props) {
-    const store = inject<RevueFlowStore>('store')!
-
-    const getNodes = () => {
-      return props.onlyRenderVisibleElements
-        ? store.nodes &&
-            getNodesInside(
-              store.nodes,
-              {
-                x: 0,
-                y: 0,
-                width: store?.width,
-                height: store?.height,
-              },
-              store.transform,
-              true,
-            )
-        : store.nodes
-    }
-
-    return () => (
-      <div
-        className="revue-flow__nodes"
-        style={{
-          transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
-        }}
-      >
-        {getNodes().map((node, i) => {
-          const nodeType = node.type || 'default'
-          if (props.nodeTypes) {
-            const type = props.nodeTypes[nodeType] || props.nodeTypes.default
-            if (!props.nodeTypes[nodeType]) {
-              console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
-            }
-
-            return (
-              <Node
-                node={node}
-                snapGrid={props.snapGrid}
-                snapToGrid={props.snapToGrid}
-                selectNodesOnDrag={props.selectNodesOnDrag}
-                type={type}
-                key={node.id + i}
-              />
-            )
-          }
-        })}
-      </div>
-    )
-  },
-})