refactor: Destructure props with reactivity transform

.eslintrc.js

@@ -1,4 +1,5 @@
 const baseRules = {
+  'vue/no-setup-props-destructure': 0,
   'no-console': 0,
   'chai-friendly/no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
   'prettier/prettier': ['error', {}, { usePrettierrc: true }],

package/.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   rules: {
     'no-use-before-define': 0,
+    'vue/no-setup-props-destructure': 0,
   },
   extends: ['../.eslintrc.js'],
 }

package/src/additional-components/Background/Background.vue

@@ -3,15 +3,17 @@ import { BackgroundVariant } from '../../types'
 import { useVueFlow } from '../../composables'
 import type { BackgroundProps } from '../../types/components'
 
-const props = withDefaults(defineProps<BackgroundProps>(), {
+const {
-  variant: 'dots' as BackgroundVariant,
+  variant = 'dots' as BackgroundVariant,
-  gap: 10,
+  gap = 10,
-  size: 0.4,
+  size = 0.4,
-  height: 100,
+  height = 100,
-  width: 100,
+  width = 100,
-  x: 0,
+  x = 0,
-  y: 0,
+  y = 0,
-})
+  bgColor,
+  patternColor: initialPatternColor,
+} = defineProps<BackgroundProps>()
 
 const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Dots]: '#81818a',
@@ -21,25 +23,23 @@ const defaultColors: Record<BackgroundVariant, string> = {
 const { viewport } = $(useVueFlow())
 
 const background = $computed(() => {
-  const scaledGap = props.gap && props.gap * viewport.zoom
+  const scaledGap = gap && gap * viewport.zoom
   const xOffset = scaledGap && viewport.x % scaledGap
   const yOffset = scaledGap && viewport.y % scaledGap
-  const size = props.size || 0.4 * viewport.zoom
+  const bgSize = size || 0.4 * viewport.zoom
 
   return {
     scaledGap,
     xOffset,
     yOffset,
-    size,
+    size: bgSize,
   }
 })
 
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
 
-const patternColor = computed(() =>
+const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
-  props.patternColor ? props.patternColor : defaultColors[props.variant || BackgroundVariant.Dots],
-)
 
 const d = computed(
   () => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
@@ -54,8 +54,8 @@ export default {
   <svg
     class="vue-flow__background"
     :style="{
-      height: `${props.height > 100 ? 100 : props.height}%`,
+      height: `${height > 100 ? 100 : height}%`,
-      width: `${props.width > 100 ? 100 : props.width}%`,
+      width: `${width > 100 ? 100 : width}%`,
     }"
   >
     <pattern
@@ -66,17 +66,17 @@ export default {
       :height="background.scaledGap"
       patternUnits="userSpaceOnUse"
     >
-      <template v-if="props.variant === BackgroundVariant.Lines">
+      <template v-if="variant === BackgroundVariant.Lines">
-        <path :stroke="patternColor" :stroke-width="props.size" :d="d" />
+        <path :stroke="patternColor" :stroke-width="size" :d="d" />
       </template>
-      <template v-else-if="props.variant === BackgroundVariant.Dots">
+      <template v-else-if="variant === BackgroundVariant.Dots">
         <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
       </template>
-      <svg v-if="props.bgColor" height="100" width="100">
+      <svg v-if="bgColor" height="100" width="100">
-        <rect width="100%" height="100%" :fill="props.bgColor" />
+        <rect width="100%" height="100%" :fill="bgColor" />
       </svg>
     </pattern>
-    <rect :x="props.x" :y="props.y" width="100%" height="100%" :fill="`url(#${patternId})`" />
+    <rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
     <slot></slot>
   </svg>
 </template>

package/src/additional-components/Controls/Controls.vue

@@ -8,11 +8,8 @@ import Fitview from '~/assets/icons/fitview.svg'
 import Lock from '~/assets/icons/lock.svg'
 import Unlock from '~/assets/icons/unlock.svg'
 
-const props = withDefaults(defineProps<ControlProps>(), {
+const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
-  showZoom: true,
+
-  showFitView: true,
-  showInteractive: true,
-})
 const emit = defineEmits<{
   (event: 'zoom-in'): void
   (event: 'zoom-out'): void
@@ -35,7 +32,7 @@ const onZoomOutHandler = () => {
 }
 
 const onFitViewHandler = () => {
-  instance?.fitView(props.fitViewParams)
+  instance?.fitView(fitViewParams)
   emit('fit-view')
 }
 
@@ -51,7 +48,7 @@ export default {
 </script>
 <template>
   <div class="vue-flow__controls">
-    <template v-if="props.showZoom">
+    <template v-if="showZoom">
       <slot name="control-zoom-in">
         <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
           <slot name="icon-zoom-in">
@@ -68,14 +65,14 @@ export default {
       </slot>
     </template>
     <slot name="control-fitview">
-      <ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
+      <ControlButton v-if="showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
         <slot name="icon-fitview">
           <Fitview />
         </slot>
       </ControlButton>
     </slot>
     <slot name="control-interactive">
-      <ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
+      <ControlButton v-if="showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
         <slot name="icon-unlock">
           <Unlock v-if="isInteractive" />
         </slot>

package/src/additional-components/MiniMap/MiniMap.vue

@@ -5,14 +5,14 @@ import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
 import MiniMapNode from './MiniMapNode'
 
-const props = withDefaults(defineProps<MiniMapProps>(), {
+const {
-  nodeStrokeColor: '#555',
+  nodeStrokeColor = '#555',
-  nodeColor: '#fff',
+  nodeColor = '#fff',
-  nodeClassName: '',
+  nodeClassName,
-  nodeBorderRadius: 5,
+  nodeBorderRadius = 5,
-  nodeStrokeWidth: 2,
+  nodeStrokeWidth = 2,
-  maskColor: 'rgb(240, 242, 243, 0.7)',
+  maskColor = 'rgb(240, 242, 243, 0.7)',
-})
+} = defineProps<MiniMapProps>()
 
 const attrs: Record<string, any> = useAttrs()
 
@@ -27,13 +27,12 @@ const elementWidth = attrs.style?.width ?? defaultWidth
 
 const elementHeight = attrs.style?.height ?? defaultHeight
 
-const nodeColorFunc: MiniMapNodeFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+const nodeColorFunc: MiniMapNodeFunc = nodeColor instanceof Function ? nodeColor : () => nodeColor as string
 
 const nodeStrokeColorFunc: MiniMapNodeFunc =
-  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
+  nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string
 
-const nodeClassNameFunc =
+const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc)
-  props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
@@ -113,9 +112,9 @@ export default {
       :style="node.style"
       :class="nodeClassNameFunc(node)"
       :color="nodeColorFunc(node)"
-      :border-radius="props.nodeBorderRadius"
+      :border-radius="nodeBorderRadius"
       :stroke-color="nodeStrokeColorFunc(node)"
-      :stroke-width="props.nodeStrokeWidth"
+      :stroke-width="nodeStrokeWidth"
       :shape-rendering="shapeRendering"
       @click="(e: MouseEvent) => onNodeClick(e, node)"
       @dblclick="(e: MouseEvent) => onNodeDblClick(e, node)"
@@ -131,12 +130,12 @@ export default {
         :style="node.style"
         :class="nodeClassNameFunc(node)"
         :color="nodeColorFunc(node)"
-        :border-radius="props.nodeBorderRadius"
+        :border-radius="nodeBorderRadius"
         :stroke-color="nodeStrokeColorFunc(node)"
-        :stroke-width="props.nodeStrokeWidth"
+        :stroke-width="nodeStrokeWidth"
         :shape-rendering="shapeRendering"
       />
     </MiniMapNode>
-    <path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
+    <path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
   </svg>
 </template>

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -8,7 +8,7 @@ interface ConnectionLineProps {
   sourceNode: GraphNode
 }
 
-const props = defineProps<ConnectionLineProps>()
+const { sourceNode } = defineProps<ConnectionLineProps>()
 
 const {
   getNodes,
@@ -27,14 +27,14 @@ const hasSlot = slots?.({})
 
 const sourceHandle =
   connectionHandleId && connectionHandleType
-    ? props.sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
+    ? sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
-    : connectionHandleType && props.sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
+    : connectionHandleType && sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
 
-const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
+const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2
-const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
+const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height
 
-const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
+const sourceX = sourceNode.computedPosition.x + sourceHandleX
-const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
+const sourceY = sourceNode.computedPosition.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 
@@ -101,7 +101,7 @@ export default {
         connectionLineType,
         connectionLineStyle,
         nodes: getNodes,
-        sourceNode: props.sourceNode,
+        sourceNode,
         sourceHandle,
       }"
     />

package/src/components/Edges/EdgeWrapper.vue

@@ -15,13 +15,13 @@ interface EdgeWrapper {
   updatable?: boolean
 }
 
-const props = defineProps<EdgeWrapper>()
+const { id, edge, sourceNode, targetNode, selectable, updatable } = defineProps<EdgeWrapper>()
 
 const slots = inject(Slots)
 
-const { hooks, connectionMode, setState, addSelectedEdges, getEdgeTypes, edgeUpdaterRadius, noPanClassName } = $(useVueFlow())
+const { hooks, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, addSelectedEdges, getEdgeTypes } = $(
-
+  useVueFlow(),
-const edge = $(useVModel(props, 'edge'))
+)
 
 let name = $ref(edge.type ?? 'default')
 watch(
@@ -31,41 +31,11 @@ watch(
 
 let updating = $ref(false)
 
-onMounted(() => {
-  watch(
-    [
-      sourcePosition,
-      targetPosition,
-      () => props.sourceNode.position,
-      () => props.targetNode.position,
-      () => props.sourceNode.computedPosition,
-      () => props.targetNode.computedPosition,
-      () => props.sourceNode.dimensions,
-      () => props.targetNode.dimensions,
-    ],
-    () => {
-      const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
-        props.sourceNode,
-        sourceHandle.value,
-        sourcePosition.value,
-        props.targetNode,
-        targetHandle.value,
-        targetPosition.value,
-      )
-      if (edge.sourceX !== sourceX) edge.sourceX = sourceX
-      if (edge.sourceY !== sourceY) edge.sourceY = sourceY
-      if (edge.targetX !== targetX) edge.targetX = targetX
-      if (edge.targetY !== targetY) edge.targetY = targetY
-    },
-    { immediate: true },
-  )
-})
-
 const { onMouseDown } = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
   const data = { event, edge }
-  if (props.selectable) {
+  if (selectable) {
     setState({
       nodesSelectionActive: false,
     })
@@ -112,35 +82,66 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
 }
 
 // when connection type is loose we can define all handles as sources
-const targetNodeHandles = computed(() => {
+const targetNodeHandles = $computed(() => {
   if (connectionMode === ConnectionMode.Strict) {
-    return props.targetNode.handleBounds.target
+    return targetNode.handleBounds.target
   }
 
-  const targetBounds = props.targetNode.handleBounds.target
+  const targetBounds = targetNode.handleBounds.target
-  const sourceBounds = props.targetNode.handleBounds.source
+  const sourceBounds = targetNode.handleBounds.source
   return targetBounds ?? sourceBounds
 })
 
-const sourceNodeHandles = computed(() => {
+const sourceNodeHandles = $computed(() => {
   if (connectionMode === ConnectionMode.Strict) {
-    return props.sourceNode.handleBounds.source
+    return sourceNode.handleBounds.source
   }
 
-  const targetBounds = props.sourceNode.handleBounds.target
+  const targetBounds = sourceNode.handleBounds.target
-  const sourceBounds = props.sourceNode.handleBounds.source
+  const sourceBounds = sourceNode.handleBounds.source
   return sourceBounds ?? targetBounds
 })
 
-const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.sourceHandle))
+const sourceHandle = $computed(() => getHandle(sourceNodeHandles, edge.sourceHandle))
 
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.targetHandle))
+const targetHandle = $computed(() => getHandle(targetNodeHandles, edge.targetHandle))
 
-const sourcePosition = controlledComputed(sourceHandle, () =>
+const sourcePosition = $(controlledComputed($$(sourceHandle), () => (sourceHandle ? sourceHandle.position : Position.Bottom)))
-  sourceHandle.value ? sourceHandle.value.position : Position.Bottom,
-)
 
-const targetPosition = controlledComputed(targetHandle, () => (targetHandle.value ? targetHandle.value.position : Position.Top))
+const targetPosition = $(controlledComputed($$(targetHandle), () => (targetHandle ? targetHandle.position : Position.Top)))
+
+onMounted(() => {
+  watch(
+    [
+      sourcePosition,
+      targetPosition,
+      () => sourceNode.position,
+      () => targetNode.position,
+      () => sourceNode.computedPosition,
+      () => targetNode.computedPosition,
+      () => sourceNode.dimensions,
+      () => targetNode.dimensions,
+    ],
+    () => {
+      const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
+        sourceNode,
+        sourceHandle,
+        sourcePosition,
+        targetNode,
+        targetHandle,
+        targetPosition,
+      )
+
+      const edge = getEdge(id)!
+
+      if (edge.sourceX !== sourceX) edge.sourceX = sourceX
+      if (edge.sourceY !== sourceY) edge.sourceY = sourceY
+      if (edge.targetX !== targetX) edge.targetX = targetX
+      if (edge.targetY !== targetY) edge.targetY = targetY
+    },
+    { immediate: true },
+  )
+})
 
 const type = computed(() => {
   let edgeType = edge.template ?? getEdgeTypes[name]
@@ -175,7 +176,7 @@ const getClass = computed(() => {
     {
       selected: edge.selected,
       animated: edge.animated,
-      inactive: !props.selectable,
+      inactive: !selectable,
       updating,
     },
     extraClass,
@@ -203,11 +204,11 @@ export default {
     <component
       :is="type"
       :id="edge.id"
-      :source-node="props.sourceNode"
+      :source-node="sourceNode"
-      :target-node="props.targetNode"
+      :target-node="targetNode"
       :source="edge.source"
       :target="edge.target"
-      :updatable="props.updatable"
+      :updatable="updatable"
       :selected="edge.selected"
       :animated="edge.animated"
       :label="edge.label"
@@ -230,7 +231,7 @@ export default {
       :target-handle-id="edge.targetHandle"
     />
     <g
-      v-if="props.updatable"
+      v-if="updatable"
       @mousedown="onEdgeUpdaterSourceMouseDown"
       @mouseenter="onEdgeUpdaterMouseEnter"
       @mouseout="onEdgeUpdaterMouseOut"
@@ -238,7 +239,7 @@ export default {
       <EdgeAnchor :position="sourcePosition" :center-x="edge.sourceX" :center-y="edge.sourceY" :radius="edgeUpdaterRadius" />
     </g>
     <g
-      v-if="props.updatable"
+      v-if="updatable"
       @mousedown="onEdgeUpdaterTargetMouseDown"
       @mouseenter="onEdgeUpdaterMouseEnter"
       @mouseout="onEdgeUpdaterMouseOut"

package/src/components/Handle/Handle.vue

@@ -4,45 +4,47 @@ import { ConnectionMode, Position } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
 
-const props = withDefaults(defineProps<HandleProps>(), {
+const {
-  type: 'source',
+  type = 'source',
-  position: 'top' as Position,
+  position = 'top' as Position,
-  connectable: true,
+  connectable = true,
-})
+  id,
+  isValidConnection = function () {
+    return true
+  },
+} = defineProps<HandleProps>()
 
-const { id, hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
+const { hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
 
 const nodeId = inject(NodeId, '')
 
-const handleId = $computed(
+const handleId = $computed(() => id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${position}`))
-  () => props.id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
-)
 
 const { onMouseDown, onClick } = useHandle()
 
 const onMouseDownHandler = (event: MouseEvent) => {
-  onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
+  onMouseDown(event, handleId, nodeId, type === 'target', isValidConnection, undefined)
 }
 
 const onClickHandler = (event: MouseEvent) => {
-  onClick(event, handleId ?? null, nodeId, props.type, props.isValidConnection)
+  onClick(event, handleId ?? null, nodeId, type, isValidConnection)
 }
 
 const getClasses = computed(() => {
   return [
     'vue-flow__handle',
-    `vue-flow__handle-${props.position}`,
+    `vue-flow__handle-${position}`,
     `vue-flow__handle-${handleId}`,
     'nodrag',
     {
-      source: props.type !== 'target',
+      source: type !== 'target',
-      target: props.type === 'target',
+      target: type === 'target',
-      connectable: props.connectable,
+      connectable,
       connecting:
         connectionStartHandle &&
         connectionStartHandle.nodeId === nodeId &&
         connectionStartHandle.handleId === handleId &&
-        connectionStartHandle.type === props.type,
+        connectionStartHandle.type === type,
     },
   ]
 })
@@ -56,11 +58,18 @@ export default {
   <div
     :data-handleid="handleId"
     :data-nodeid="nodeId"
-    :data-handlepos="props.position"
+    :data-handlepos="position"
     :class="getClasses"
     @mousedown="onMouseDownHandler"
     @click="onClickHandler"
   >
-    <slot :node-id="nodeId" v-bind="props"></slot>
+    <slot
+      :id="id"
+      :node-id="nodeId"
+      :type="type"
+      :position="position"
+      :connectable="connectable"
+      :is-valid-connection="isValidConnection"
+    />
   </div>
 </template>

package/src/components/Nodes/NodeWrapper.vue

@@ -15,9 +15,9 @@ interface NodeWrapperProps {
   snapGrid?: SnapGrid
 }
 
-const props = defineProps<NodeWrapperProps>()
+const { id, node, draggable, selectable, connectable, snapGrid } = defineProps<NodeWrapperProps>()
 
-provide(NodeId, props.id)
+provide(NodeId, id)
 
 const slots = inject(Slots)
 
@@ -35,8 +35,6 @@ const {
   addSelectedNodes,
 } = $(useVueFlow())
 
-const node = $(useVModel(props, 'node'))
-
 let name = $ref(node.type ?? 'default')
 watch(
   () => node.type,
@@ -47,8 +45,8 @@ const nodeElement = ref()
 
 const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
   handle: node.dragHandle,
-  disabled: !props.draggable,
+  disabled: !draggable,
-  grid: props.snapGrid,
+  grid: snapGrid,
   cancel: `.${noDragClassName}`,
   enableUserSelectHack: false,
   scale: viewport.zoom,
@@ -100,12 +98,12 @@ watch(
     }
 
     if (parent) {
-      node.computedPosition = getXYZPos(parent, xyzPos)
+      getNode(id)!.computedPosition = getXYZPos(parent, xyzPos)
     } else {
-      node.computedPosition = xyzPos
+      getNode(id)!.computedPosition = xyzPos
     }
 
-    node.handleBounds = getHandleBounds(nodeElement.value, scale.value)
+    getNode(id)!.handleBounds = getHandleBounds(nodeElement.value, scale.value)
   },
   { deep: true, flush: 'post' },
 )
@@ -142,8 +140,8 @@ const onContextMenu = (event: MouseEvent) => {
 const onDoubleClick = (event: MouseEvent) => hooks.nodeDoubleClick.trigger({ event, node })
 
 const onSelectNode = (event: MouseEvent) => {
-  if (!props.draggable) {
+  if (!draggable) {
-    if (props.selectable) {
+    if (selectable) {
       setState({
         nodesSelectionActive: false,
       })
@@ -182,13 +180,13 @@ onDragStart(({ event }) => {
   addSelectedNodes([])
   hooks.nodeDragStart.trigger({ event, node })
 
-  if (selectNodesOnDrag && props.selectable) {
+  if (selectNodesOnDrag && selectable) {
     setState({
       nodesSelectionActive: false,
     })
 
     if (!node.selected) addSelectedNodes([node])
-  } else if (!selectNodesOnDrag && !node.selected && props.selectable) {
+  } else if (!selectNodesOnDrag && !node.selected && selectable) {
     setState({
       nodesSelectionActive: false,
     })
@@ -206,7 +204,7 @@ onDragStop(({ event, data: { deltaX, deltaY } }) => {
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
   if (!node.dragging) {
-    if (props.selectable && !selectNodesOnDrag && !node.selected) {
+    if (selectable && !selectNodesOnDrag && !node.selected) {
       addSelectedNodes([node])
     }
     hooks.nodeClick.trigger({ event, node })
@@ -225,7 +223,7 @@ const getClass = computed(() => {
     {
       dragging: node.dragging,
       selected: node.selected,
-      selectable: props.selectable,
+      selectable,
     },
     extraClass,
   ]
@@ -241,7 +239,7 @@ const getStyle = computed(() => {
   return {
     zIndex: node.computedPosition.z,
     transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
-    pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
+    pointerEvents: selectable || draggable ? 'all' : 'none',
     ...styles,
   } as CSSProperties
 })
@@ -271,7 +269,7 @@ export default {
       :type="node.type"
       :data="node.data"
       :selected="!!node.selected"
-      :connectable="props.connectable"
+      :connectable="connectable"
       :position="node.position"
       :computed-position="node.computedPosition"
       :dimensions="node.dimensions"

package/src/components/UserSelection/SelectionRect.vue

@@ -6,7 +6,7 @@ interface SelectionRectProps {
   y: number
 }
 
-const props = defineProps<SelectionRectProps>()
+const { width, height, x, y } = defineProps<SelectionRectProps>()
 </script>
 <script lang="ts">
 export default {
@@ -17,9 +17,9 @@ export default {
   <div
     class="vue-flow__selection"
     :style="{
-      width: `${props.width}px`,
+      width: `${width}px`,
-      height: `${props.height}px`,
+      height: `${height}px`,
-      transform: `translate(${props.x}px, ${props.y}px)`,
+      transform: `translate(${x}px, ${y}px)`,
     }"
   />
 </template>

package/src/container/EdgeRenderer/Marker.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import type { MarkerProps } from '../../types/edge'
 
-const props = withDefaults(defineProps<MarkerProps>(), {
+const {
-  width: 12.5,
+  id,
-  height: 12.5,
+  type,
-  markerUnits: 'strokeWidth',
+  width = 12.5,
-  orient: 'auto',
+  height = 12.5,
-  strokeWidth: 1,
+  markerUnits = 'strokeWidth',
-  color: 'none',
+  orient = 'auto',
-})
+  strokeWidth = 1,
+  color = 'none',
+} = defineProps<MarkerProps>()
 </script>
 <script lang="ts">
 export default {
@@ -17,31 +19,31 @@ export default {
 </script>
 <template>
   <marker
-    :id="props.id"
+    :id="id"
     class="vue-flow__arrowhead"
     viewBox="-10 -10 20 20"
     refX="0"
     refY="0"
-    :markerWidth="`${props.width}`"
+    :markerWidth="`${width}`"
-    :markerHeight="`${props.height}`"
+    :markerHeight="`${height}`"
-    :markerUnits="props.markerUnits"
+    :markerUnits="markerUnits"
-    :orient="props.orient"
+    :orient="orient"
   >
     <polyline
-      v-if="props.type === 'arrowclosed'"
+      v-if="type === 'arrowclosed'"
-      :stroke="props.color"
+      :stroke="color"
       stroke-linecap="round"
       stroke-linejoin="round"
-      :stroke-width="props.strokeWidth"
+      :stroke-width="strokeWidth"
-      :fill="props.color"
+      :fill="color"
       points="-5,-4 0,0 -5,4 -5,-4"
     />
     <polyline
-      v-if="props.type === 'arrow'"
+      v-if="type === 'arrow'"
-      :stroke="props.color"
+      :stroke="color"
       stroke-linecap="round"
       stroke-linejoin="round"
-      :stroke-width="props.strokeWidth"
+      :stroke-width="strokeWidth"
       fill="none"
       points="-5,-4 0,0 -5,4"
     />

package/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -9,9 +9,7 @@ interface MarkerDefinitionsProps {
   defaultColor: string
 }
 
-const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
+const { defaultColor = '' } = defineProps<MarkerDefinitionsProps>()
-  defaultColor: '',
-})
 
 const { edges } = $(useVueFlow())
 
@@ -23,8 +21,8 @@ const markers = computed(() => {
       if (marker) {
         const markerId = getMarkerId(marker)
         if (!ids.includes(markerId)) {
-          if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || props.defaultColor })
+          if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
-          else markers.push({ id: markerId, color: props.defaultColor, type: marker as MarkerType })
+          else markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
           ids.push(markerId)
         }
       }