refactor(core): add explicit imports and remove auto-imports

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

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

@@ -1,6 +1,8 @@
 import type { Component, FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import EdgeText from './EdgeText.vue'
 import type { BaseEdgeProps } from '~/types'
+import { isNumber } from '~/utils'
 
 /**
  * The base edge is a simple wrapper for svg path

packages/core/src/components/Edges/BezierEdge.ts

@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getBezierPath } from './utils'
 import type { BezierEdgeProps } from '~/types'
 import { Position } from '~/types'
 

packages/core/src/components/Edges/EdgeAnchor.ts

@@ -1,4 +1,5 @@
 import type { FunctionalComponent, HTMLAttributes } from 'vue'
+import { h } from 'vue'
 import { Position } from '~/types'
 
 interface Props extends HTMLAttributes {

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

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
+import { toRef } from '@vueuse/core'
+import { useVueFlow } from '../../composables'
+
 const { viewportRef } = useVueFlow()
 
-const teleportTarget = computed(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
+const teleportTarget = toRef(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
 </script>
 
 <script lang="ts">
@@ -14,7 +17,7 @@ export default {
 <template>
   <svg>
     <foreignObject height="0" width="0">
-      <Teleport :to="teleportTarget" :disabled="!teleportTarget">
+      <Teleport :to="teleportTarget as any" :disabled="!teleportTarget">
         <slot />
       </Teleport>
     </foreignObject>

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue'
 import type { EdgeTextProps } from '../../types/components'
 import type { Rect as RectType } from '../../types'
-import { isString } from '../../utils/general'
+import { isString } from '../../utils'
 
 const {
   x,
@@ -14,25 +15,25 @@ const {
   labelBgBorderRadius = 2,
 } = defineProps<EdgeTextProps>()
 
-let box = $ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
+const box = ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
 
-const el = $ref<SVGTextElement | null>(null)
+const el = ref<SVGTextElement | null>(null)
 
-const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`)
+const transform = computed(() => `translate(${x - box.value.width / 2} ${y - box.value.height / 2})`)
 
 onMounted(getBox)
 
-watch([() => x, () => y, $$(el), () => label], getBox)
+watch([() => x, () => y, el, () => label], getBox)
 
 function getBox() {
-  if (!el) {
+  if (!el.value) {
     return
   }
 
-  const nextBox = el.getBBox()
+  const nextBox = el.value.getBBox()
 
-  if (nextBox.width !== box.width || nextBox.height !== box.height) {
-    box = nextBox
+  if (nextBox.width !== box.value.width || nextBox.height !== box.value.height) {
+    box.value = nextBox
   }
 }
 </script>

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -1,6 +1,11 @@
+import { defineComponent, h, provide, ref } from 'vue'
+import { useVModel } from '@vueuse/core'
 import EdgeAnchor from './EdgeAnchor'
 import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
 import { ConnectionMode, Position } from '~/types'
+import { useEdgeHooks, useHandle, useVueFlow } from '~/composables'
+import { EdgeId, EdgeRef } from '~/context'
+import { ARIA_EDGE_DESC_KEY, elementSelectionKeys, getEdgePositions, getHandle, getMarkerId } from '~/utils'
 
 interface Props {
   id: string

packages/core/src/components/Edges/SimpleBezierEdge.ts

@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getSimpleBezierPath } from './utils'
 import type { SimpleBezierEdgeProps } from '~/types'
 import { Position } from '~/types'
 

packages/core/src/components/Edges/SmoothStepEdge.ts

@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getSmoothStepPath } from './utils'
 import type { SmoothStepEdgeProps } from '~/types'
 import { Position } from '~/types'
 

packages/core/src/components/Edges/StepEdge.ts

@@ -1,4 +1,5 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
 import type { StepEdgeProps } from '~/types'
 

packages/core/src/components/Edges/StraightEdge.ts

@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getStraightPath } from './utils'
 import type { StraightEdgeProps } from '~/types'
 
 const StraightEdge: FunctionalComponent<StraightEdgeProps> = function (props, { attrs }) {