refactor(core): resolve slots before returning default component (#1013)

Author: bcakmakoglu

.changeset/hot-nails-cough.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Deprecate template prop for nodes

.changeset/rude-pets-build.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Resolve slot templates before falling back to default node/edge components

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -22,6 +22,8 @@ const {
   emits,
 } = useVueFlow()
 
+const instance = getCurrentInstance()
+
 function selectable(edgeSelectable?: boolean) {
   return typeof edgeSelectable === 'undefined' ? elementsSelectable.value : edgeSelectable
 }
@@ -34,8 +36,13 @@ function focusable(edgeFocusable?: boolean) {
 
 function getType(type?: string, template?: GraphEdge['template']) {
   const name = type || 'default'
+
+  const slot = slots?.[`edge-${name}`]
+  if (slot) {
+    return slot
+  }
+
   let edgeType = template ?? getEdgeTypes.value[name]
-  const instance = getCurrentInstance()
 
   if (typeof edgeType === 'string') {
     if (instance) {
@@ -45,17 +52,14 @@ function getType(type?: string, template?: GraphEdge['template']) {
       }
     }
   }
+
   if (edgeType && typeof edgeType !== 'string') {
     return edgeType
   }
 
-  const slot = slots?.[`edge-${name}`]
-  if (!slot) {
-    emits.error(new VueFlowError(ErrorCode.EDGE_TYPE_MISSING, edgeType))
-    return false
-  }
+  emits.error(new VueFlowError(ErrorCode.EDGE_TYPE_MISSING, edgeType))
 
-  return slot
+  return false
 }
 </script>
 

packages/core/src/container/NodeRenderer/NodeRenderer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, resolveComponent } from 'vue'
+import { getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, ref, resolveComponent } from 'vue'
 import { until } from '@vueuse/core'
 import { NodeWrapper } from '../../components'
 import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
@@ -19,20 +19,22 @@ const {
   getNodeTypes,
   updateNodeDimensions,
   emits,
-} = $(useVueFlow())
+} = useVueFlow()
 
-let resizeObserver = $ref<ResizeObserver>()
+const resizeObserver = ref<ResizeObserver>()
 
-until(() => getNodes.length > 0 && getNodesInitialized.length === getNodes.length)
+const instance = getCurrentInstance()
+
+until(() => getNodes.value.length > 0 && getNodesInitialized.value.length === getNodes.value.length)
   .toBe(true)
   .then(() => {
     nextTick(() => {
-      emits.nodesInitialized(getNodesInitialized)
+      emits.nodesInitialized(getNodesInitialized.value)
     })
   })
 
 onMounted(() => {
-  resizeObserver = new ResizeObserver((entries) => {
+  resizeObserver.value = new ResizeObserver((entries) => {
     const updates = entries.map((entry) => {
       const id = entry.target.getAttribute('data-id') as string
 
@@ -47,25 +49,30 @@ onMounted(() => {
   })
 })
 
-onBeforeUnmount(() => resizeObserver?.disconnect())
+onBeforeUnmount(() => resizeObserver.value?.disconnect())
 
 function draggable(nodeDraggable?: boolean) {
-  return typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable
+  return typeof nodeDraggable === 'undefined' ? nodesDraggable.value : nodeDraggable
 }
 function selectable(nodeSelectable?: boolean) {
-  return typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable
+  return typeof nodeSelectable === 'undefined' ? elementsSelectable.value : nodeSelectable
 }
 function connectable(nodeConnectable?: HandleConnectable) {
-  return typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
+  return typeof nodeConnectable === 'undefined' ? nodesConnectable.value : nodeConnectable
 }
 function focusable(nodeFocusable?: boolean) {
-  return typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable
+  return typeof nodeFocusable === 'undefined' ? nodesFocusable.value : nodeFocusable
 }
 
 function getType(type?: string, template?: GraphNode['template']) {
   const name = type || 'default'
-  let nodeType = template ?? getNodeTypes[name]
-  const instance = getCurrentInstance()
+
+  const slot = slots?.[`node-${name}`]
+  if (slot) {
+    return slot
+  }
+
+  let nodeType = template ?? getNodeTypes.value[name]
 
   if (typeof nodeType === 'string') {
     if (instance) {
@@ -75,17 +82,14 @@ function getType(type?: string, template?: GraphNode['template']) {
       }
     }
   }
-  if (typeof nodeType !== 'string') {
+
+  if (nodeType && typeof nodeType !== 'string') {
     return nodeType
   }
 
-  const slot = slots?.[`node-${name}`]
-  if (!slot) {
-    emits.error(new VueFlowError(ErrorCode.NODE_TYPE_MISSING, nodeType))
-    return false
-  }
+  emits.error(new VueFlowError(ErrorCode.NODE_TYPE_MISSING, nodeType))
 
-  return slot
+  return false
 }
 </script>
 

packages/core/src/types/node.ts

@@ -85,7 +85,10 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   style?: Styles | StyleFunc<GraphNode<Data, CustomEvents>>
   /** Is node hidden */
   hidden?: boolean
-  /** overwrites current node type */
+  /**
+   * @deprecated will be removed in the next major release
+   * overwrites current node type
+   */
   template?: NodeComponent
   /** Additional data that is passed to your custom components */
   data?: Data