refactor(nodes,edges): change defaults to functional components

# What's changed?

* Change default node/edge components to functional components

package/src/components/Edges/BaseEdge.ts

@@ -16,26 +16,41 @@ interface Props {
   markerEnd?: string
 }
 
-export default (function BaseEdge(props: Props, { attrs }) {
+const BaseEdge: FunctionalComponent<Props> = function ({
+  path,
+  centerX,
+  centerY,
+  label,
+  labelBgBorderRadius,
+  labelBgPadding,
+  labelBgStyle,
+  labelShowBg,
+  labelStyle,
+  markerStart,
+  markerEnd,
+  style,
+}) {
   return [
     h('path', {
-      style: attrs.style,
+      style: { ...style },
-      d: props.path,
+      d: path,
       class: 'vue-flow__edge-path',
-      markerEnd: props.markerEnd,
+      markerEnd,
-      markerStart: props.markerStart,
+      markerStart,
     }),
-    props.label
+    label
       ? h(EdgeText, {
-          x: props.centerX,
+          x: centerX,
-          y: props.centerY,
+          y: centerY,
-          label: props.label,
+          label,
-          labelStyle: props.labelStyle,
+          labelStyle,
-          labelShowBg: props.labelShowBg,
+          labelShowBg,
-          labelBgStyle: props.labelBgStyle,
+          labelBgStyle,
-          labelBgPadding: props.labelBgPadding,
+          labelBgPadding,
-          labelBgBorderRadius: props.labelBgBorderRadius,
+          labelBgBorderRadius,
         })
       : null,
   ]
-} as FunctionalComponent)
+}
+
+export default BaseEdge

package/src/components/Edges/BezierEdge.ts

@@ -0,0 +1,80 @@
+import { FunctionalComponent } from 'vue'
+import { getBezierPath, getBezierCenter } from './utils'
+import BaseEdge from './BaseEdge'
+import { Position } from '~/types'
+import type { EdgeProps } from '~/types'
+
+const BezierEdge: FunctionalComponent<EdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  curvature,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const [centerX, centerY] = getBezierCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature,
+  })
+
+  const path = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature,
+  })
+
+  return h(BaseEdge, {
+    path,
+    centerX,
+    centerY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+BezierEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'curvature',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default BezierEdge

package/src/components/Edges/BezierEdge.vue

@@ -1,66 +0,0 @@
-<script lang="ts" setup>
-import { Position } from '../../types/flow'
-import type { EdgeProps } from '../../types/edge'
-import { getBezierPath, getBezierCenter } from './utils'
-import EdgeText from './EdgeText.vue'
-
-const props = withDefaults(defineProps<EdgeProps>(), {
-  selected: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-  labelStyle: () => ({}),
-  label: '',
-  labelShowBg: true,
-  labelBgStyle: () => ({}),
-})
-
-const centered = computed(() =>
-  getBezierCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    sourcePosition: props.sourcePosition,
-    targetPosition: props.targetPosition,
-    curvature: props.curvature,
-  }),
-)
-const path = computed(() => {
-  if (props.sourceX && props.sourceY)
-    return getBezierPath({
-      sourceX: props.sourceX,
-      sourceY: props.sourceY,
-      targetX: props.targetX,
-      targetY: props.targetY,
-      sourcePosition: props.sourcePosition,
-      targetPosition: props.targetPosition,
-      curvature: props.curvature,
-    })
-  else return ''
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'BezierEdge',
-}
-</script>
-<template>
-  <path
-    :style="props.style"
-    :d="path"
-    class="vue-flow__edge-path"
-    :marker-end="props.markerEnd"
-    :marker-start="props.markerStart"
-  />
-  <EdgeText
-    v-if="props.label"
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
-</template>

package/src/components/Edges/EdgeAnchor.ts

@@ -0,0 +1,45 @@
+import { FunctionalComponent, HTMLAttributes } from 'vue'
+import { Position } from '~/types'
+
+interface Props extends HTMLAttributes {
+  position: Position
+  centerX: number
+  centerY: number
+  radius?: number
+}
+
+const shiftX = (x: number, shift: number, position: Position): number => {
+  if (position === Position.Left) return x - shift
+  if (position === Position.Right) return x + shift
+  return x
+}
+
+const shiftY = (y: number, shift: number, position: Position): number => {
+  if (position === Position.Top) return y - shift
+  if (position === Position.Bottom) return y + shift
+  return y
+}
+
+const EdgeAnchor: FunctionalComponent<Props> = function ({ radius = 10, centerX = 0, centerY = 0, position = Position.Top }) {
+  const cx = computed(() => {
+    const val = shiftX(centerX, radius, position)
+    if (isNaN(val)) return 0
+    else return val
+  })
+  const cy = computed(() => {
+    const val = shiftY(centerY, radius, position)
+    if (isNaN(val)) return 0
+    else return val
+  })
+
+  return h('circle', {
+    class: 'vue-flow__edgeupdater',
+    cx: cx.value,
+    cy: cy.value,
+    r: radius,
+    stroke: 'transparent',
+    fill: 'transparent',
+  })
+}
+
+export default EdgeAnchor

package/src/components/Edges/EdgeAnchor.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import { HTMLAttributes } from 'vue'
-import { Position } from '../../types'
-
-const shiftX = (x: number, shift: number, position: Position): number => {
-  if (position === Position.Left) return x - shift
-  if (position === Position.Right) return x + shift
-  return x
-}
-
-const shiftY = (y: number, shift: number, position: Position): number => {
-  if (position === Position.Top) return y - shift
-  if (position === Position.Bottom) return y + shift
-  return y
-}
-
-interface EdgeAnchorProps extends HTMLAttributes {
-  position: Position
-  centerX: number
-  centerY: number
-  radius?: number
-}
-
-const props = withDefaults(defineProps<EdgeAnchorProps>(), {
-  radius: 10,
-  centerX: 0,
-  centerY: 0,
-  position: Position.Top,
-})
-
-const cx = computed(() => {
-  const val = shiftX(props.centerX, props.radius, props.position)
-  if (isNaN(val)) return 0
-  else return val
-})
-const cy = computed(() => {
-  const val = shiftY(props.centerY, props.radius, props.position)
-  if (isNaN(val)) return 0
-  else return val
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'EdgeAnchor',
-}
-</script>
-<template>
-  <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
-</template>

package/src/components/Edges/EdgeWrapper.vue

@@ -4,7 +4,7 @@ import { useHandle, useVueFlow } from '../../composables'
 import { ConnectionMode, EdgeComponent, GraphEdge, GraphNode, Position } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import { Slots } from '../../context'
-import EdgeAnchor from './EdgeAnchor.vue'
+import EdgeAnchor from './EdgeAnchor'
 
 interface EdgeWrapper {
   id: string

package/src/components/Edges/SimpleBezierEdge.ts

@@ -0,0 +1,76 @@
+import { FunctionalComponent } from 'vue'
+import { getSimpleBezierCenter, getSimpleBezierPath } from './utils'
+import BaseEdge from './BaseEdge'
+import { Position } from '~/types'
+import type { EdgeProps } from '~/types'
+
+const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const [centerX, centerY] = getSimpleBezierCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  const path = getSimpleBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  return h(BaseEdge, {
+    path,
+    centerX,
+    centerY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+SimpleBezierEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default SimpleBezierEdge

package/src/components/Edges/SimpleBezierEdge.vue

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { Position } from '../../types/flow'
-import type { EdgeProps } from '../../types/edge'
-import { getSimpleBezierPath, getSimpleBezierCenter } from './utils'
-import EdgeText from './EdgeText.vue'
-
-const props = withDefaults(defineProps<EdgeProps>(), {
-  selected: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-  labelStyle: () => ({}),
-  label: '',
-  labelShowBg: true,
-  labelBgStyle: () => ({}),
-})
-
-const centered = computed(() =>
-  getSimpleBezierCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    sourcePosition: props.sourcePosition,
-    targetPosition: props.targetPosition,
-  }),
-)
-const path = computed(() => {
-  if (props.sourceX && props.sourceY)
-    return getSimpleBezierPath({
-      sourceX: props.sourceX,
-      sourceY: props.sourceY,
-      targetX: props.targetX,
-      targetY: props.targetY,
-      sourcePosition: props.sourcePosition,
-      targetPosition: props.targetPosition,
-    })
-  else return ''
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'SimpleBezierEdge',
-}
-</script>
-<template>
-  <path
-    :style="props.style"
-    :d="path"
-    class="vue-flow__edge-path"
-    :marker-end="props.markerEnd"
-    :marker-start="props.markerStart"
-  />
-  <EdgeText
-    v-if="props.label"
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
-</template>

package/src/components/Edges/SmoothStepEdge.ts

@@ -0,0 +1,78 @@
+import { FunctionalComponent } from 'vue'
+import { getCenter, getSmoothStepPath } from './utils'
+import BaseEdge from './BaseEdge'
+import { Position, SmoothStepEdgeProps } from '~/types'
+
+const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  borderRadius,
+  style,
+}) {
+  const [centerX, centerY] = getCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  const path = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius,
+  })
+
+  return h(BaseEdge, {
+    path,
+    centerX,
+    centerY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+SmoothStepEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'borderRadius',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default SmoothStepEdge

package/src/components/Edges/SmoothStepEdge.vue

@@ -1,67 +0,0 @@
-<script lang="ts" setup>
-import { Position } from '../../types'
-import type { SmoothStepEdgeProps } from '../../types/edge'
-import { getCenter, getSmoothStepPath } from './utils'
-import EdgeText from './EdgeText.vue'
-
-const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
-  selected: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-  label: '',
-  labelStyle: () => ({}),
-  labelShowBg: true,
-  labelBgStyle: () => ({}),
-})
-
-const centered = computed(() =>
-  getCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    sourcePosition: props.sourcePosition,
-    targetPosition: props.targetPosition,
-  }),
-)
-
-const path = computed(() => {
-  if (props.sourceX && props.sourceY)
-    return getSmoothStepPath({
-      sourceX: props.sourceX,
-      sourceY: props.sourceY,
-      targetX: props.targetX,
-      targetY: props.targetY,
-      sourcePosition: props.sourcePosition,
-      targetPosition: props.targetPosition,
-      borderRadius: props.borderRadius,
-    })
-  else return ''
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'SmoothStepEdge',
-  inheritAttrs: false,
-}
-</script>
-<template>
-  <path
-    :style="props.style"
-    :d="path"
-    class="vue-flow__edge-path"
-    :marker-end="props.markerEnd"
-    :marker-start="props.markerStart"
-  />
-  <EdgeText
-    v-if="props.label"
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
-</template>

package/src/components/Edges/StepEdge.ts

@@ -0,0 +1,27 @@
+import { FunctionalComponent } from 'vue'
+import SmoothStepEdge from './SmoothStepEdge'
+import { EdgeProps } from '~/types'
+
+const StepEdge: FunctionalComponent<EdgeProps> = function (props) {
+  return h(SmoothStepEdge, { ...props, borderRadius: 0 })
+}
+
+StepEdge.props = [
+  'sourcePosition',
+  'targetPosition',
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default StepEdge

package/src/components/Edges/StepEdge.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { Position } from '../../types'
-import type { EdgeProps } from '../../types/edge'
-import SmoothStepEdge from './SmoothStepEdge.vue'
-
-const props = withDefaults(defineProps<EdgeProps>(), {
-  selected: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-  label: '',
-  labelStyle: () => ({}),
-  labelShowBg: true,
-  labelBgStyle: () => ({}),
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'StepEdge',
-  inheritAttrs: false,
-}
-</script>
-<template>
-  <SmoothStepEdge v-bind="props" :border-radius="0" />
-</template>

package/src/components/Edges/StraightEdge.ts

@@ -0,0 +1,61 @@
+import { FunctionalComponent } from 'vue'
+import BaseEdge from './BaseEdge'
+import { EdgeProps } from '~/types'
+
+const StraightEdge: FunctionalComponent<EdgeProps> = function ({
+  label,
+  labelStyle = {},
+  labelShowBg = true,
+  labelBgStyle = {},
+  labelBgPadding,
+  labelBgBorderRadius,
+  sourceY,
+  sourceX,
+  targetX,
+  targetY,
+  markerEnd,
+  markerStart,
+  style,
+}) {
+  const centerY = computed(() => {
+    const yOffset = Math.abs(targetY - sourceY) / 2
+    return targetY < sourceY ? targetY + yOffset : targetY - yOffset
+  })
+  const centerX = computed(() => {
+    const xOffset = Math.abs(targetX - sourceX) / 2
+    return targetX < sourceX ? targetX + xOffset : targetX - xOffset
+  })
+
+  return h(BaseEdge, {
+    path: `M ${sourceX},${sourceY}L ${targetX},${targetY}`,
+    centerX: centerX.value,
+    centerY: centerY.value,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  })
+}
+
+StraightEdge.props = [
+  'label',
+  'labelStyle',
+  'labelShowBg',
+  'labelBgStyle',
+  'labelBgPadding',
+  'labelBgBorderRadius',
+  'sourceY',
+  'sourceX',
+  'targetX',
+  'targetY',
+  'markerEnd',
+  'markerStart',
+  'style',
+]
+
+export default StraightEdge

package/src/components/Edges/StraightEdge.vue

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-import { Position } from '../../types'
-import type { EdgeProps } from '../../types/edge'
-import EdgeText from './EdgeText.vue'
-
-const props = withDefaults(defineProps<EdgeProps>(), {
-  selected: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-  label: '',
-  labelStyle: () => ({}),
-  labelShowBg: true,
-  labelBgStyle: () => ({}),
-})
-
-const centerY = computed(() => {
-  const yOffset = Math.abs(props.targetY - props.sourceY) / 2
-  return props.targetY < props.sourceY ? props.targetY + yOffset : props.targetY - yOffset
-})
-const centerX = computed(() => {
-  const xOffset = Math.abs(props.targetX - props.sourceX) / 2
-  return props.targetX < props.sourceX ? props.targetX + xOffset : props.targetX - xOffset
-})
-
-const path = computed(() => `M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`)
-</script>
-<script lang="ts">
-export default {
-  name: 'StraightEdge',
-}
-</script>
-<template>
-  <path
-    :style="props.style"
-    :d="path"
-    class="vue-flow__edge-path"
-    :marker-end="props.markerEnd"
-    :marker-start="props.markerStart"
-  />
-  <EdgeText
-    v-if="props.label"
-    :x="centerX"
-    :y="centerY"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
-</template>

package/src/components/Edges/index.ts

@@ -1,7 +1,7 @@
-export { default as BezierEdge } from './BezierEdge.vue'
+export { default as BezierEdge } from './BezierEdge'
-export { default as SimpleBezierEdge } from './SimpleBezierEdge.vue'
+export { default as SimpleBezierEdge } from './SimpleBezierEdge'
-export { default as StepEdge } from './StepEdge.vue'
+export { default as StepEdge } from './StepEdge'
-export { default as SmoothStepEdge } from './SmoothStepEdge.vue'
+export { default as SmoothStepEdge } from './SmoothStepEdge'
-export { default as StraightEdge } from './StraightEdge.vue'
+export { default as StraightEdge } from './StraightEdge'
-export { default as EdgeAnchor } from './EdgeAnchor.vue'
+export { default as EdgeAnchor } from './EdgeAnchor'
 export { default as EdgeText } from './EdgeText.vue'

package/src/components/Nodes/DefaultNode.ts

@@ -0,0 +1,25 @@
+import { FunctionalComponent } from 'vue'
+import Handle from '../Handle/Handle.vue'
+import { NodeProps, Position } from '~/types'
+
+const DefaultNode: FunctionalComponent<NodeProps> = function (
+  {
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    connectable = false,
+    isValidTargetPos,
+    isValidSourcePos,
+  }: NodeProps,
+  { attrs },
+) {
+  return [
+    h(Handle, { type: 'target', position: targetPosition, isConnectable: connectable, isValidConnection: isValidTargetPos }),
+    typeof label !== 'string' && label ? h(label) : h('span', {}, label),
+    h(Handle, { type: 'source', position: sourcePosition, isConnectable: connectable, isValidConnection: isValidSourcePos }),
+  ]
+}
+
+DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable']
+
+export default DefaultNode

package/src/components/Nodes/DefaultNode.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import Handle from '../Handle/Handle.vue'
-import { Position } from '../../types'
-import type { NodeProps } from '../../types/node'
-
-const props = withDefaults(defineProps<NodeProps>(), {
-  connectable: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'DefaultNode',
-}
-</script>
-<template>
-  <Handle
-    type="target"
-    :position="props.targetPosition"
-    :is-connectable="props.connectable"
-    :is-valid-connection="props.isValidTargetPos"
-  />
-  <component :is="props.label" v-if="typeof props.label !== 'string' && props.label" />
-  <span v-else v-html="props.label" />
-  <Handle
-    type="source"
-    :position="props.sourcePosition"
-    :is-connectable="props.connectable"
-    :is-valid-connection="props.isValidSourcePos"
-  />
-</template>

package/src/components/Nodes/InputNode.ts

@@ -0,0 +1,17 @@
+import { FunctionalComponent } from 'vue'
+import Handle from '../Handle/Handle.vue'
+import { NodeProps, Position } from '~/types'
+
+const InputNode: FunctionalComponent<NodeProps> = function (
+  { sourcePosition = Position.Bottom, label, connectable = false, isValidSourcePos }: NodeProps,
+  { attrs },
+) {
+  return [
+    typeof label !== 'string' && label ? h(label) : h('span', {}, label),
+    h(Handle, { type: 'source', position: sourcePosition, isConnectable: connectable, isValidConnection: isValidSourcePos }),
+  ]
+}
+
+InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable']
+
+export default InputNode

package/src/components/Nodes/InputNode.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import Handle from '../Handle/Handle.vue'
-import { Position } from '../../types'
-import type { NodeProps } from '../../types/node'
-
-const props = withDefaults(defineProps<NodeProps>(), {
-  connectable: false,
-  sourcePosition: 'bottom' as Position,
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'InputNode',
-}
-</script>
-<template>
-  <component :is="props.label" v-if="typeof props.label !== 'string' && props.label" />
-  <span v-else v-html="props.label" />
-  <Handle
-    type="source"
-    :position="props.sourcePosition"
-    :connectable="props.connectable"
-    :is-valid-connection="props.isValidSourcePos"
-  />
-</template>

package/src/components/Nodes/OutputNode.ts

@@ -0,0 +1,17 @@
+import { FunctionalComponent } from 'vue'
+import Handle from '../Handle/Handle.vue'
+import { NodeProps, Position } from '~/types'
+
+const OutputNode: FunctionalComponent<NodeProps> = function (
+  { targetPosition = Position.Top, label, connectable = false, isValidTargetPos }: NodeProps,
+  { attrs },
+) {
+  return [
+    h(Handle, { type: 'target', position: targetPosition, isConnectable: connectable, isValidConnection: isValidTargetPos }),
+    typeof label !== 'string' && label ? h(label) : h('span', {}, label),
+  ]
+}
+
+OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable']
+
+export default OutputNode

package/src/components/Nodes/OutputNode.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import Handle from '../Handle/Handle.vue'
-import { Position } from '../../types'
-import type { NodeProps } from '../../types/node'
-
-const props = withDefaults(defineProps<NodeProps>(), {
-  connectable: false,
-  targetPosition: 'top' as Position,
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'OutputNode',
-}
-</script>
-<template>
-  <component :is="props.label" v-bind="props.label" v-if="typeof props.label !== 'string' && props.label" />
-  <span v-else v-html="props.label" />
-  <Handle
-    type="source"
-    :position="props.targetPosition"
-    :is-connectable="props.connectable"
-    :is-valid-connection="props.isValidTargetPos"
-  />
-</template>

package/src/components/Nodes/index.ts

@@ -1,3 +1,3 @@
-export { default as DefaultNode } from './DefaultNode.vue'
+export { default as DefaultNode } from './DefaultNode'
-export { default as InputNode } from './InputNode.vue'
+export { default as InputNode } from './InputNode'
-export { default as OutputNode } from './OutputNode.vue'
+export { default as OutputNode } from './OutputNode'

package/src/container/SelectionPane/SelectionPane.vue

@@ -53,7 +53,13 @@ export default {
 }
 </script>
 <template>
-  <UserSelection v-if="selectionKeyPressed" />
+  <UserSelection v-if="selectionKeyPressed" :key="`user-selection-${id}`" />
-  <NodesSelection v-if="store.nodesSelectionActive" />
+  <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selection-${id}`" />
-  <div class="vue-flow__pane vue-flow__container" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <div
+    :key="`pane-${id}`"
+    class="vue-flow__pane vue-flow__container"
+    @click="onClick"
+    @contextmenu="onContextMenu"
+    @wheel="onWheel"
+  />
 </template>

package/src/container/Viewport/Transform.vue

@@ -5,7 +5,7 @@ import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
 import { FlowExportObject, FlowInstance, Store, XYPosition } from '../../types'
 import { pointToRendererPoint } from '../../utils'
 
-const { store } = useVueFlow()
+const { id, store } = useVueFlow()
 
 const untilDimensions = async (store: Store) => {
   // if ssr we can't wait for dimensions, they'll never really exist
@@ -55,9 +55,9 @@ onMounted(async () => {
   await untilDimensions(store)
 
   ready.value = true
-  store.instance = instance as FlowInstance
+  store.instance = instance
   store.fitViewOnInit && instance.fitView()
-  store.hooks.paneReady.trigger(instance as FlowInstance)
+  store.hooks.paneReady.trigger(instance)
 })
 
 const transform = computed(() => `translate(${store.viewport.x}px,${store.viewport.y}px) scale(${store.viewport.zoom})`)
@@ -68,15 +68,12 @@ export default {
 }
 </script>
 <template>
-  <div class="vue-flow__transformationpane vue-flow__container" :style="{ transform, opacity: ready ? undefined : 0 }">
+  <div
-    <NodeRenderer
+    :key="`transform-${id}`"
-      :draggable="store.nodesDraggable"
+    class="vue-flow__transformationpane vue-flow__container"
-      :selectable="store.elementsSelectable"
+    :style="{ transform, opacity: ready ? undefined : 0 }"
-      :connectable="store.nodesConnectable"
+  >
-      :nodes="store.getNodes"
+    <NodeRenderer />
-      :snap-to-grid="store.snapToGrid"
-      :snap-grid="store.snapGrid"
-    />
     <EdgeRenderer />
     <slot />
   </div>

package/src/container/Viewport/Viewport.vue

@@ -7,7 +7,7 @@ import { clamp, clampPosition } from '../../utils'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import Transform from './Transform.vue'
 
-const { store, zoomActivationKeyCode, selectionKeyCode } = useVueFlow()
+const { id, store, zoomActivationKeyCode, selectionKeyCode } = useVueFlow()
 const viewportEl = templateRef<HTMLDivElement>('viewport', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -83,7 +83,7 @@ onMounted(() => {
   })
 
   d3Selection
-    .on('wheel', (event: WheelEvent) => {
+    ?.on('wheel', (event: WheelEvent) => {
       if (store.panOnScroll && !zoomKeyPressed.value) {
         if (isWrappedWithClass(event, store.noWheelClassName)) return
         event.preventDefault()
@@ -108,7 +108,7 @@ onMounted(() => {
         const deltaY = store.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
 
         if (d3Selection && store.panOnScrollSpeed)
-          d3Zoom.translateBy(
+          d3Zoom?.translateBy(
             d3Selection,
             -(deltaX / currentZoom) * store.panOnScrollSpeed,
             -(deltaY / currentZoom) * store.panOnScrollSpeed,
@@ -163,10 +163,10 @@ export default {
 }
 </script>
 <template>
-  <div ref="viewport" class="vue-flow__viewport vue-flow__container">
+  <div ref="viewport" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container">
     <Transform>
       <slot />
     </Transform>
-    <SelectionPane />
+    <SelectionPane :key="`selection-${id}`" />
   </div>
 </template>

package/src/index.ts

@@ -1,12 +1,11 @@
 export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
-export { default as StraightEdge } from './components/Edges/StraightEdge.vue'
+export { default as StraightEdge } from './components/Edges/StraightEdge'
-export { default as StepEdge } from './components/Edges/StepEdge.vue'
+export { default as StepEdge } from './components/Edges/StepEdge'
-export { default as BezierEdge } from './components/Edges/BezierEdge.vue'
+export { default as BezierEdge } from './components/Edges/BezierEdge'
-export { default as SimpleBezierEdge } from './components/Edges/SimpleBezierEdge.vue'
+export { default as SimpleBezierEdge } from './components/Edges/SimpleBezierEdge'
-export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge.vue'
+export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge'
-export { default as BaseEdge } from './components/Edges/BaseEdge'
 
 export {
   getBezierPath,