refactor: Destructure props with reactivity transform

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>(), {
-  variant: 'dots' as BackgroundVariant,
-  gap: 10,
-  size: 0.4,
-  height: 100,
-  width: 100,
-  x: 0,
-  y: 0,
-})
+const {
+  variant = 'dots' as BackgroundVariant,
+  gap = 10,
+  size = 0.4,
+  height = 100,
+  width = 100,
+  x = 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(() =>
-  props.patternColor ? props.patternColor : defaultColors[props.variant || BackgroundVariant.Dots],
-)
+const patternColor = computed(() => initialPatternColor || defaultColors[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}%`,
-      width: `${props.width > 100 ? 100 : props.width}%`,
+      height: `${height > 100 ? 100 : height}%`,
+      width: `${width > 100 ? 100 : width}%`,
     }"
   >
     <pattern
@@ -66,17 +66,17 @@ export default {
       :height="background.scaledGap"
       patternUnits="userSpaceOnUse"
     >
-      <template v-if="props.variant === BackgroundVariant.Lines">
-        <path :stroke="patternColor" :stroke-width="props.size" :d="d" />
+      <template v-if="variant === BackgroundVariant.Lines">
+        <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">
-        <rect width="100%" height="100%" :fill="props.bgColor" />
+      <svg v-if="bgColor" height="100" width="100">
+        <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>(), {
-  showZoom: true,
-  showFitView: true,
-  showInteractive: true,
-})
+const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
+
 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>(), {
-  nodeStrokeColor: '#555',
-  nodeColor: '#fff',
-  nodeClassName: '',
-  nodeBorderRadius: 5,
-  nodeStrokeWidth: 2,
-  maskColor: 'rgb(240, 242, 243, 0.7)',
-})
+const {
+  nodeStrokeColor = '#555',
+  nodeColor = '#fff',
+  nodeClassName,
+  nodeBorderRadius = 5,
+  nodeStrokeWidth = 2,
+  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 =
-  props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
+const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((() => 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>