refactor(core): remove primtive typeguards

packages/core/src/components/Edges/BaseEdge.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
 import type { BaseEdgeProps } from '../../types'
-import { isNumber } from '../../utils'
 import EdgeText from './EdgeText.vue'
 
 const { interactionWidth = 20, labelShowBg = true, ...props } = defineProps<BaseEdgeProps>()
@@ -52,7 +51,7 @@ export default {
   />
 
   <EdgeText
-    v-if="label && isNumber(labelX) && isNumber(labelY)"
+    v-if="label && labelX && labelY"
     ref="labelEl"
     :x="labelX"
     :y="labelY"

packages/core/src/components/Edges/EdgeText.vue

@@ -2,7 +2,6 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import type { EdgeTextProps } from '../../types/components'
 import type { Rect as RectType } from '../../types'
-import { isString } from '../../utils'
 
 const {
   x,
@@ -61,7 +60,7 @@ export default {
 
     <text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle">
       <slot>
-        <component :is="label as any" v-if="!isString(label)" />
+        <component :is="label" v-if="typeof label !== 'string'" />
         <template v-else>
           {{ label }}
         </template>

packages/core/src/components/Handle/Handle.vue

@@ -4,7 +4,7 @@ import { computed, onUnmounted, ref } from 'vue'
 import type { HandleProps } from '../../types/handle'
 import { Position } from '../../types'
 import { useHandle, useNode, useVueFlow } from '../../composables'
-import { getDimensions, isDef, isFunction, isMouseEvent, isNumber, isString } from '../../utils'
+import { getDimensions, isDef, isMouseEvent } from '../../utils'
 
 const {
   position = Position.Top,
@@ -47,7 +47,7 @@ const { handlePointerDown, handleClick } = useHandle({
 })
 
 const isConnectable = computed(() => {
-  if (isString(connectable) && connectable === 'single') {
+  if (typeof connectable === 'string' && connectable === 'single') {
     return !connectedEdges.value.some((edge) => {
       const id = edge[`${type.value}Handle`]
 
@@ -59,7 +59,7 @@ const isConnectable = computed(() => {
     })
   }
 
-  if (isNumber(connectable)) {
+  if (typeof connectable === 'number') {
     return (
       connectedEdges.value.filter((edge) => {
         const id = edge[`${type.value}Handle`]
@@ -73,14 +73,14 @@ const isConnectable = computed(() => {
     )
   }
 
-  if (isFunction(connectable)) {
+  if (typeof connectable === 'function') {
     return connectable(node, connectedEdges.value)
   }
 
   return isDef(connectable) ? connectable : nodesConnectable.value
 })
 
-const isConnecting = computed(
+const isConnecting = toRef(
   () =>
     (connectionStartHandle.value?.nodeId === nodeId &&
       connectionStartHandle.value?.handleId === handleId.value &&
@@ -90,7 +90,7 @@ const isConnecting = computed(
       connectionEndHandle.value?.type === type.value),
 )
 
-const isClickConnecting = computed(
+const isClickConnecting = toRef(
   () =>
     connectionClickStartHandle.value?.nodeId === nodeId &&
     connectionClickStartHandle.value?.handleId === handleId.value &&

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -11,7 +11,6 @@ import {
   getConnectedEdges,
   getXYZPos,
   handleNodeClick,
-  isNumber,
 } from '~/utils'
 
 interface Props {
@@ -153,7 +152,7 @@ const NodeWrapper = defineComponent({
           z: nodeZIndex + (elevateNodesOnSelect.value ? (node.value.selected ? 1000 : 0) : 0),
         }
 
-        if (isNumber(parentX) && isNumber(parentY)) {
+        if (typeof parentX !== 'undefined' && typeof parentY !== 'undefined') {
           node.value.computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
         } else {
           node.value.computedPosition = xyzPos

packages/core/src/composables/useWatchProps.ts

@@ -3,7 +3,7 @@ import { effectScope, nextTick, onScopeDispose, watch } from 'vue'
 import type { WatchPausableReturn } from '@vueuse/core'
 import { toRef, watchPausable } from '@vueuse/core'
 import type { Connection, FlowProps, VueFlowStore } from '~/types'
-import { isDef, isFunction } from '~/utils'
+import { isDef } from '~/utils'
 
 export function useWatchProps(
   models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
@@ -221,7 +221,7 @@ export function useWatchProps(
         const autoConnector = async (params: Connection) => {
           let connection: boolean | Connection = params
 
-          if (isFunction(props.autoConnect)) {
+          if (typeof props.autoConnect === 'function') {
             connection = await props.autoConnect(params)
           }
 

packages/core/src/utils/changes.ts

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue'
-import { isDef, isFunction, isGraphNode, isString } from '.'
+import { isDef, isGraphNode } from '.'
 import type {
   EdgeAddChange,
   EdgeChange,
@@ -26,7 +26,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
     if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
       let parentStyles: Styles = {}
 
-      if (isFunction(parent.style)) {
+      if (typeof parent.style === 'function') {
         parentStyles = { ...parent.style(parent) }
       } else if (parent.style) {
         parentStyles = { ...parent.style }
@@ -36,7 +36,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
       parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
 
       if (extendWidth > 0) {
-        if (isString(parentStyles.width)) {
+        if (typeof parentStyles.width === 'string') {
           const currWidth = Number(parentStyles.width.replace('px', ''))
           parentStyles.width = `${currWidth + extendWidth}px`
         } else {
@@ -45,7 +45,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
       }
 
       if (extendHeight > 0) {
-        if (isString(parentStyles.height)) {
+        if (typeof parentStyles.height === 'string') {
           const currWidth = Number(parentStyles.height.replace('px', ''))
           parentStyles.height = `${currWidth + extendHeight}px`
         } else {
@@ -57,7 +57,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
         const xDiff = Math.abs(updateItem.position.x)
         parent.position.x = parent.position.x - xDiff
 
-        if (isString(parentStyles.width)) {
+        if (typeof parentStyles.width === 'string') {
           const currWidth = Number(parentStyles.width.replace('px', ''))
           parentStyles.width = `${currWidth + xDiff}px`
         } else {
@@ -71,7 +71,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
         const yDiff = Math.abs(updateItem.position.y)
         parent.position.y = parent.position.y - yDiff
 
-        if (isString(parentStyles.height)) {
+        if (typeof parentStyles.height === 'string') {
           const currWidth = Number(parentStyles.height.replace('px', ''))
           parentStyles.height = `${currWidth + yDiff}px`
         } else {
@@ -84,7 +84,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
       parent.dimensions.width = Number(parentStyles.width.toString().replace('px', ''))
       parent.dimensions.height = Number(parentStyles.height.toString().replace('px', ''))
 
-      if (isFunction(parent.style)) {
+      if (typeof parent.style === 'function') {
         parent.style = (p) => {
           const styleFunc = parent.style as StyleFunc
 

packages/core/src/utils/drag.ts

@@ -1,5 +1,5 @@
 import { markRaw } from 'vue'
-import { ErrorCode, VueFlowError, clampPosition, isNumber, isParentSelected } from '.'
+import { ErrorCode, VueFlowError, clampPosition, isParentSelected } from '.'
 import type {
   Actions,
   CoordinateExtent,
@@ -108,10 +108,10 @@ function getParentExtent(
 
   if (
     parent &&
-    isNumber(parent.computedPosition.x) &&
+    typeof parent.computedPosition.x !== 'undefined' &&
-    isNumber(parent.computedPosition.y) &&
+    typeof parent.computedPosition.y !== 'undefined' &&
-    isNumber(parent.dimensions.width) &&
+    typeof parent.dimensions.width !== 'undefined' &&
-    isNumber(parent.dimensions.height)
+    typeof parent.dimensions.height !== 'undefined'
   ) {
     return [
       [parent.computedPosition.x + left, parent.computedPosition.y + top],

packages/core/src/utils/edge.ts

@@ -1,4 +1,4 @@
-import { isNumber, rectToBox } from '.'
+import { rectToBox } from '.'
 import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
 import { Position } from '~/types'
 
@@ -132,7 +132,7 @@ export function isEdgeVisible({
 }
 
 export function getEdgeZIndex(edge: GraphEdge, findNode: Actions['findNode'], elevateEdgesOnSelect = false) {
-  const hasZIndex = isNumber(edge.zIndex)
+  const hasZIndex = typeof edge.zIndex === 'number'
   let z = hasZIndex ? edge.zIndex! : 0
 
   const source = findNode(edge.source)

packages/core/src/utils/general.ts

@@ -13,20 +13,4 @@ export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRec
   }
 }
 
-export function isString(val: any): val is string {
-  return typeof val === 'string'
-}
-
-export function isFunction(val: any): val is Function {
-  return typeof val === 'function'
-}
-
-export function isBoolean(val: any): val is boolean {
-  return typeof val === 'boolean'
-}
-
-export function isNumber(val: any): val is number {
-  return typeof val === 'number'
-}
-
 export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0

packages/core/src/utils/graph.ts

@@ -1,5 +1,5 @@
 import { markRaw } from 'vue'
-import { isDef, isString, warn } from '.'
+import { isDef, warn } from '.'
 import type {
   Actions,
   Box,
@@ -145,7 +145,7 @@ export function parseEdge(edge: Edge, defaults: Partial<GraphEdge> = {}): GraphE
         focusable: edge.focusable ?? defaults.focusable,
         data,
         events: markRaw(events),
-        label: (edge.label && !isString(edge.label) ? markRaw(edge.label) : edge.label) || defaults.label,
+        label: (edge.label && typeof edge.label !== 'string' ? markRaw(edge.label) : edge.label) || defaults.label,
         interactionWidth: edge.interactionWidth || defaults.interactionWidth,
       } as GraphEdge)
     : defaults
@@ -159,7 +159,7 @@ function getConnectedElements<T extends Node = Node>(
   edges: Edge[],
   dir: 'source' | 'target',
 ): T[] {
-  const id = isString(nodeOrId) ? nodeOrId : nodeOrId.id
+  const id = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
 
   const connectedIds = new Set()
 
@@ -186,9 +186,9 @@ export function getOutgoers(...args: any[]) {
   }
 
   const [nodeOrId, elements] = args
-  const node: Node = isString(nodeOrId) ? { id: nodeOrId } : nodeOrId
+  const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
 
-  const outgoers = elements.filter((el: Element) => isEdge(el) && el.source === node.id)
+  const outgoers = elements.filter((el: Element) => isEdge(el) && el.source === nodeId)
 
   return outgoers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.target))
 }
@@ -205,9 +205,9 @@ export function getIncomers(...args: any[]) {
   }
 
   const [nodeOrId, elements] = args
-  const node: Node = isString(nodeOrId) ? { id: nodeOrId } : nodeOrId
+  const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
 
-  const incomers = elements.filter((el: Element) => isEdge(el) && el.target === node.id)
+  const incomers = elements.filter((el: Element) => isEdge(el) && el.target === nodeId)
 
   return incomers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.source))
 }
@@ -408,7 +408,7 @@ export function getNodesInside(
 export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, edges: E[]) {
   const nodeIds = new Set()
 
-  if (isString(nodesOrId)) {
+  if (typeof nodesOrId === 'string') {
     nodeIds.add(nodesOrId)
   } else if (nodesOrId.length >= 1) {
     nodesOrId.forEach((n) => nodeIds.add(n.id))
@@ -420,7 +420,7 @@ export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, ed
 export function getConnectedNodes<N extends Node | { id: string } | string>(nodes: N[], edges: Edge[]) {
   const nodeIds = new Set()
 
-  nodes.forEach((node) => nodeIds.add(isString(node) ? node : node.id))
+  nodes.forEach((node) => nodeIds.add(typeof node === 'string' ? node : node.id))
 
   const connectedNodeIds = edges.reduce((acc, edge) => {
     if (nodeIds.has(edge.source)) {
@@ -434,7 +434,7 @@ export function getConnectedNodes<N extends Node | { id: string } | string>(node
     return acc
   }, new Set())
 
-  return nodes.filter((node) => connectedNodeIds.has(isString(node) ? node : node.id))
+  return nodes.filter((node) => connectedNodeIds.has(typeof node === 'string' ? node : node.id))
 }
 
 export function getTransformForBounds(