perf(additional-components): inject slots to avoid performance drop

packages/additional-components/src/minimap/MiniMap.vue

@@ -8,6 +8,7 @@ import type { PanelPosition } from '../panel'
 import { Panel } from '../panel'
 import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode'
+import { MiniMapSlots } from './types'
 
 const {
   width,
@@ -34,14 +35,7 @@ const { id, edges, viewport, dimensions, emits, nodes, d3Selection, d3Zoom } = u
 
 const el = ref<SVGElement>()
 
-const slots = useSlots()
+provide(MiniMapSlots, useSlots())
-
-const hasSlot = (type: string) => {
-  const slotType = slots[type]
-
-  console.log(slotType && slotType().length > 0)
-  return !!(slotType && slotType().length > 0)
-}
 
 const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
@@ -219,29 +213,13 @@ export default {
         :stroke-color="nodeStrokeColorFunc(node)"
         :stroke-width="nodeStrokeWidth"
         :shape-rendering="shapeRendering"
+        :type="node.type"
         @click="onNodeClick($event, node)"
         @dblclick="onNodeDblClick($event, node)"
         @mouseenter="onNodeMouseEnter($event, node)"
         @mousemove="onNodeMouseMove($event, node)"
         @mouseleave="onNodeMouseLeave($event, node)"
-      >
+      />
-        <!-- todo: slot causes some lag spikes with FF when a lot of nodes are rendered -->
-        <slot
-          :id="node.id"
-          :name="`node-${node.type}`"
-          :parent-node="node.parentNode"
-          :selected="node.selected"
-          :position="node.computedPosition"
-          :dimensions="node.dimensions"
-          :style="node.style"
-          :class="nodeClassNameFunc(node)"
-          :color="nodeColorFunc(node)"
-          :border-radius="nodeBorderRadius"
-          :stroke-color="nodeStrokeColorFunc(node)"
-          :stroke-width="nodeStrokeWidth"
-          :shape-rendering="shapeRendering"
-        />
-      </MiniMapNode>
 
       <path class="vue-flow__minimap-mask" :style="pannable ? 'cursor: grab' : ''" :d="d" :fill="maskColor" fill-rule="evenodd" />
     </svg>

packages/additional-components/src/minimap/MiniMapNode.ts

@@ -1,12 +1,14 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, Slots } from 'vue'
 import type { MiniMapNodeProps } from './types'
+import { MiniMapSlots } from './types'
 
 export default defineComponent({
   name: 'MiniMapNode',
-  props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering'],
+  props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering', 'type'],
   emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
-  setup(props: MiniMapNodeProps, { attrs, emit, slots }) {
+  setup(props: MiniMapNodeProps, { attrs, emit }) {
     const style = (attrs.style ?? {}) as CSSProperties
+    const miniMapSlots: Slots = inject(MiniMapSlots)!
 
     return () => [
       h('rect', {
@@ -29,7 +31,7 @@ export default defineComponent({
         onMousemove: (e: MouseEvent) => emit('mousemove', e),
         onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
       }),
-      slots?.default?.(),
+      miniMapSlots[props.type] && miniMapSlots[props.type]!(props),
     ]
   },
 })

packages/additional-components/src/minimap/types.ts

@@ -1,5 +1,5 @@
 import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, InjectionKey, Slots } from 'vue'
 import type { PanelPosition } from '../panel'
 
 /** expects a node and returns a color value */
@@ -38,6 +38,7 @@ export interface MiniMapProps {
 /** these props are passed to mini map node slots */
 export interface MiniMapNodeProps {
   id: string
+  type: string
   parentNode?: string
   selected?: boolean
   dragging?: boolean
@@ -49,3 +50,5 @@ export interface MiniMapNodeProps {
   strokeColor?: string
   strokeWidth?: number
 }
+
+export const MiniMapSlots: InjectionKey<Slots> = Symbol('MiniMapSlots')