chore(core): cleanup slots

packages/core/src/container/Viewport/Viewport.vue

@@ -394,10 +394,8 @@ export default {
       :class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
     >
       <Transform>
-        <slot name="zoom-pane" />
+        <slot />
       </Transform>
     </Pane>
   </div>
-
-  <slot />
 </template>

packages/core/src/container/VueFlow/VueFlow.vue

@@ -1,25 +1,9 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import { onUnmounted, provide, useSlots } from 'vue'
-import type { D3ZoomEvent } from 'd3-zoom'
+import { onUnmounted, provide } from 'vue'
 import Viewport from '../Viewport/Viewport.vue'
 import A11yDescriptions from '../../components/A11y/A11yDescriptions.vue'
-import type { FlowElements, FlowProps } from '../../types/flow'
-import type {
-  Connection,
-  EdgeChange,
-  EdgeMouseEvent,
-  EdgeUpdateEvent,
-  GraphEdge,
-  GraphNode,
-  NodeChange,
-  NodeDragEvent,
-  NodeMouseEvent,
-  OnConnectStartParams,
-  ViewportTransform,
-  VueFlowStore,
-} from '../../types'
-import type { VueFlowError } from '../../utils/errors'
+import type { FlowEmits, FlowProps, FlowSlots, VueFlowStore } from '../../types'
 import { useVueFlow, useWatchProps } from '../../composables'
 import { useHooks } from '../../store'
 import { Slots } from '../../context'
@@ -59,75 +43,9 @@ const props = withDefaults(defineProps<FlowProps>(), {
   zoomActivationKeyCode: undefined,
 })
 
-const emit = defineEmits<{
-  (event: 'nodesChange', changes: NodeChange[]): void
-  (event: 'edgesChange', changes: EdgeChange[]): void
-  (event: 'nodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeContextMenu', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
-  (event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
-  (event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
-  (event: 'nodesInitialized'): void
-  (event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'connect', connectionEvent: Connection): void
-  (
-    event: 'connectStart',
-    connectionEvent: {
-      event?: MouseEvent
-    } & OnConnectStartParams,
-  ): void
-  (event: 'connectEnd', connectionEvent?: MouseEvent): void
-  (
-    event: 'clickConnectStart',
-    connectionEvent: {
-      event?: MouseEvent
-    } & OnConnectStartParams,
-  ): void
-  (event: 'clickConnectEnd', connectionEvent?: MouseEvent): void
-  (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
-  (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
-  (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
-  (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
-  (event: 'selectionDrag', selectionEvent: NodeDragEvent): void
-  (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void
-  (event: 'selectionContextMenu', selectionEvent: { event: MouseEvent; nodes: GraphNode[] }): void
-  (event: 'selectionStart', selectionEvent: MouseEvent): void
-  (event: 'selectionEnd', selectionEvent: MouseEvent): void
-  (event: 'viewportChangeStart', viewport: ViewportTransform): void
-  (event: 'viewportChange', viewport: ViewportTransform): void
-  (event: 'viewportChangeEnd', viewport: ViewportTransform): void
-  (event: 'paneReady', paneEvent: VueFlowStore): void
-  (event: 'paneScroll', paneEvent: WheelEvent | undefined): void
-  (event: 'paneClick', paneEvent: MouseEvent): void
-  (event: 'paneContextMenu', paneEvent: MouseEvent): void
-  (event: 'paneMouseEnter', paneEvent: MouseEvent): void
-  (event: 'paneMouseMove', paneEvent: MouseEvent): void
-  (event: 'paneMouseLeave', paneEvent: MouseEvent): void
-  (event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeUpdate', edgeUpdateEvent: EdgeUpdateEvent): void
-  (event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'updateNodeInternals'): void
-  (event: 'error', error: VueFlowError): void
+const emit = defineEmits<FlowEmits>()
 
-  /** v-model event definitions */
-  (event: 'update:modelValue', value: FlowElements): void
-  (event: 'update:nodes', value: GraphNode[]): void
-  (event: 'update:edges', value: GraphEdge[]): void
-}>()
+const slots = defineSlots<FlowSlots>()
 
 const modelValue = useVModel(props, 'modelValue', emit)
 const modelNodes = useVModel(props, 'nodes', emit)
@@ -145,7 +63,7 @@ const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges
 
 useHooks(emit, hooks)
 
-provide(Slots, useSlots())
+provide(Slots, slots)
 
 onUnmounted(() => {
   dispose()
@@ -170,32 +88,13 @@ export default {
 <template>
   <div ref="vueFlowRef" class="vue-flow">
     <Viewport>
-      <!-- Pseudo-slots for nodes and edges so we can collect the templates using `useSlots` -->
-      <template #nodes>
-        <template v-for="nodeName of Object.keys(getNodeTypes)">
-          <slot :name="`node-${nodeName}`" />
-        </template>
-      </template>
-
-      <template #edges>
-        <template v-for="edgeName of Object.keys(getEdgeTypes)">
-          <slot :name="`edge-${edgeName}`" />
-        </template>
-      </template>
-
-      <template #connection-line>
-        <slot name="connection-line" />
-      </template>
-
       <!-- This slot will be passed down to the transformation-pane and rendered inside there, meaning it's affected by zooming/panning -->
-      <template #zoom-pane>
-        <slot name="zoom-pane" />
-      </template>
-
-      <!-- This slot will render outside the transformation-pane, meaning it's *not* affected by zooming and panning -->
-      <slot />
+      <slot name="zoom-pane" />
     </Viewport>
 
+    <!-- This slot will render outside the transformation-pane, meaning it's *not* affected by zooming and panning -->
+    <slot />
+
     <A11yDescriptions />
   </div>
 </template>

packages/core/src/context/index.ts

@@ -1,9 +1,9 @@
-import type { InjectionKey, Ref, Slots as TSlots } from 'vue'
-import type { VueFlowStore } from '~/types'
+import type { InjectionKey, Ref } from 'vue'
+import type { FlowSlots, VueFlowStore } from '~/types'
 
 export const VueFlow: InjectionKey<VueFlowStore> = Symbol('vueFlow')
 export const NodeId: InjectionKey<string> = Symbol('nodeId')
 export const NodeRef: InjectionKey<Ref<HTMLDivElement | null>> = Symbol('nodeRef')
 export const EdgeId: InjectionKey<string> = Symbol('edgeId')
 export const EdgeRef: InjectionKey<Ref<SVGElement | null>> = Symbol('edgeRef')
-export const Slots: InjectionKey<TSlots> = Symbol('slots')
+export const Slots: InjectionKey<Readonly<FlowSlots>> = Symbol('slots')