feat(nodes): Pass node slots as injections to wrapper

* Avoids drilling slots which causes huge performance issues when 100+ nodes are present due to re-binding of props on each level

package/src/components/Nodes/NodeWrapper.vue

@@ -2,7 +2,7 @@
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { NodeComponent, SnapGrid } from '../../types'
-import { NodeId } from '../../context'
+import { NodeId, Slots } from '../../context'
 import { getXYZPos } from '../../utils'
 
 interface NodeWrapperProps {
@@ -16,7 +16,7 @@ interface NodeWrapperProps {
 const props = defineProps<NodeWrapperProps>()
 const { store } = useVueFlow()
 const node = computed(() => store.getNode(props.id)!)
-if (!node.value) throw new Error(`Node with ${props.id} not found!`)
+if (!node.value) throw new Error(`[vueflow]: Node with ${props.id} not found!`)
 provide(NodeId, props.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
@@ -108,18 +108,38 @@ watch(
 
 store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
 
+const slots = inject(Slots)
+
 const name = ref(node.value.type ?? 'default')
+watch(
+  () => node.value.type,
+  (v) => v && (name.value = v),
+)
+
 const type = computed(() => {
+  const instance = getCurrentInstance()
   let nodeType = store.getNodeTypes[name.value]
-  if (typeof nodeType === 'string') nodeType = resolveComponent(name.value, false) as NodeComponent
+  if (typeof nodeType === 'string') {
+    if (instance) {
+      const components = Object.keys(instance.appContext.components)
+      if (components && components.includes(name.value)) {
+        nodeType = resolveComponent(name.value, false) as NodeComponent
+      }
+    }
+  }
   if (typeof nodeType !== 'string') return nodeType
 
-  const slot = useSlots()?.[name.value]?.({})
+  const slot = slots?.[`node-${name.value}`]?.({})
-  if (!slot || !slot[0].key?.toString().includes(name.value)) {
+  if (!slot) {
-    console.warn(`Node type "${node.value.type}" not found and no slot detected. Using fallback type "default".`)
+    console.warn(`[vueflow]: Node type "${node.value.type}" not found and no node-slot detected. Using fallback type "default".`)
     name.value = 'default'
     return store.getNodeTypes.default
   }
+  if (slot.length > 1) {
+    console.warn('[vue-flow]: More than one element in node-slots detected. Using fallback to first slot item.')
+  }
+
+  return slot[0]
 })
 </script>
 <script lang="ts">
@@ -167,14 +187,16 @@ export default {
       @click="onSelectNodeHandler"
       @dblclick="onDoubleClick"
     >
-      <slot
+      <component
+        :is="type"
+        v-if="type"
         v-bind="{
           nodeElement,
           id: node.id,
           type: node.type,
           data: node.data,
           selected: !!node.selected,
-          isConnectable: props.connectable,
+          connectable: props.connectable,
           position: node.position,
           computedPosition: node.computedPosition,
           dimensions: node.dimensions,
@@ -188,32 +210,7 @@ export default {
           label: node.label,
           dragHandle: node.dragHandle,
         }"
-      >
+      />
-        <component
-          :is="type"
-          v-if="type"
-          v-bind="{
-            nodeElement,
-            id: node.id,
-            type: node.type,
-            data: node.data,
-            selected: !!node.selected,
-            connectable: props.connectable,
-            position: node.position,
-            computedPosition: node.computedPosition,
-            dimensions: node.dimensions,
-            isValidTargetPos: node.isValidTargetPos,
-            isValidSourcePos: node.isValidSourcePos,
-            parentNode: node.parentNode,
-            dragging: !!node.dragging,
-            zIndex: node.dragging || node.selected ? 1000 : node.computedPosition.z,
-            targetPosition: node.targetPosition,
-            sourcePosition: node.sourcePosition,
-            label: node.label,
-            dragHandle: node.dragHandle,
-          }"
-        />
-      </slot>
     </div>
   </DraggableCore>
 </template>

package/src/container/NodeRenderer/NodeRenderer.vue

@@ -14,7 +14,7 @@ export default {
     <NodeWrapper
       v-for="node of store.getNodes"
       :id="node.id"
-      :key="node.id"
+      :key="`vue-flow__node-${node.id}`"
       :draggable="typeof node.draggable === 'undefined' ? store.nodesDraggable : !!node.draggable"
       :selectable="typeof node.selectable === 'undefined' ? store.elementsSelectable : !!node.selectable"
       :connectable="typeof node.connectable === 'undefined' ? store.nodesConnectable : !!node.connectable"

package/src/container/TransformationPane/TransformationPane.vue

@@ -34,26 +34,8 @@ const transform = computed(() => `translate(${store.transform[0]}px,${store.tran
 </script>
 <template>
   <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
-    <NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`">
+    <NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`" />
-      <template
-        v-for="nodeName of Object.keys(store.getNodeTypes)"
-        #[`node-${nodeName}`]="nodeProps"
-        :key="`node-${nodeName}-${id}`"
-      >
-        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
-      </template>
-    </NodeRenderer>
     <EdgeRenderer :key="`edge-renderer-${id}`">
-      <template
-        v-for="edgeName of Object.keys(store.getEdgeTypes)"
-        #[`edge-${edgeName}`]="edgeProps"
-        :key="`edge-${edgeName}-${id}`"
-      >
-        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
-      </template>
-      <template #connection-line="customConnectionLineProps">
-        <slot name="connection-line" v-bind="customConnectionLineProps" />
-      </template>
     </EdgeRenderer>
     <slot />
   </div>

package/src/container/VueFlow/VueFlow.vue

@@ -3,6 +3,7 @@ import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import { createHooks, useHooks } from '../../store'
 import { useVueFlow } from '../../composables'
 import type { FlowProps } from '../../types/flow'
+import { Slots } from '../../context'
 import useWatch from './watch'
 
 const props = withDefaults(defineProps<FlowProps>(), {
@@ -74,6 +75,9 @@ if (edges && edges.value) {
     () => (edges.value = [...storedEdges.value]),
   )
 }
+
+const slots = useSlots()
+provide(Slots, slots)
 </script>
 <script lang="ts">
 export default {
@@ -83,20 +87,8 @@ export default {
 <template>
   <div class="vue-flow">
     <ZoomPane :key="`renderer-${id}`">
-      <template v-for="nodeName of Object.keys(getNodeTypes)" #[`node-${nodeName}`]="nodeProps" :key="`node-${nodeName}-${id}`">
-        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
-      </template>
-      <template v-for="edgeName of Object.keys(getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps" :key="`edge-${edgeName}-${id}`">
-        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
-      </template>
-      <template #connection-line="customConnectionLineProps">
-        <slot name="connection-line" v-bind="customConnectionLineProps" />
-      </template>
       <slot name="zoom-pane" />
     </ZoomPane>
     <slot />
   </div>
 </template>
-<style>
-@import '../../style.css';
-</style>

package/src/container/ZoomPane/ZoomPane.vue

@@ -165,23 +165,6 @@ export default {
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__container">
     <TransformationPane>
-      <template
-        v-for="nodeName of Object.keys(store.getNodeTypes)"
-        #[`node-${nodeName}`]="nodeProps"
-        :key="`node-${nodeName}-${id}`"
-      >
-        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
-      </template>
-      <template
-        v-for="edgeName of Object.keys(store.getEdgeTypes)"
-        #[`edge-${edgeName}`]="edgeProps"
-        :key="`edge-${edgeName}-${id}`"
-      >
-        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
-      </template>
-      <template #connection-line="customConnectionLineProps">
-        <slot name="connection-line" v-bind="customConnectionLineProps" />
-      </template>
       <slot />
     </TransformationPane>
     <SelectionPane :key="`selection-pane-${id}`" />

package/src/context/index.ts

@@ -1,5 +1,6 @@
-import { InjectionKey } from 'vue'
+import { InjectionKey, Slots as TSlots } from 'vue'
 import { UseVueFlow } from '~/types'
 
 export const VueFlow: InjectionKey<UseVueFlow> = Symbol('vueFlow')
 export const NodeId: InjectionKey<string> = Symbol('nodeId')
+export const Slots: InjectionKey<TSlots> = Symbol('slots')