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

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

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

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
+import { getCurrentInstance, inject, resolveComponent } from 'vue'
+import { controlledComputed } from '@vueuse/core'
 import EdgeWrapper from '../../components/Edges/EdgeWrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
+import { Slots } from '../../context'
+import { useVueFlow } from '../../composables'
+import { ErrorCode, VueFlowError, groupEdgesByZLevel } from '../../utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
 const slots = inject(Slots)

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

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types/edge'
+import { useVueFlow } from '../../composables'
+import { getMarkerId } from '../../utils'
 import Marker from './Marker.vue'
 
 const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = $(useVueFlow())

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

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
+import { getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, resolveComponent } from 'vue'
+import { until } from '@vueuse/core'
 import { NodeWrapper } from '../../components'
 import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
+import { Slots } from '../../context'
+import { useVueFlow } from '../../composables'
+import { ErrorCode, VueFlowError } from '../../utils'
 
 const slots = inject(Slots)
 

packages/core/src/container/Pane/Pane.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import type { GraphNode } from '../../types'
 import { SelectionMode } from '../../types'
+import { useKeyPress, useVueFlow } from '../../composables'
+import { getConnectedEdges, getNodesInside } from '../../utils'
 import { getMousePosition } from './utils'
 
 const { isSelecting } = defineProps<{ isSelecting: boolean }>()

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

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { isClient } from '@vueuse/core'
+import { ref } from 'vue'
+import { isClient, until } from '@vueuse/core'
+import { useVueFlow } from '../../composables'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 

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

@@ -2,8 +2,12 @@
 import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import type { CoordinateExtent, D3ZoomHandler, FlowOptions, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
+import { useKeyPress, useVueFlow, useWindow } from '../../composables'
+import { ErrorCode, VueFlowError, clamp, getDimensions } from '../../utils'
 import Pane from '../Pane/Pane.vue'
 import Transform from './Transform.vue'
 

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

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import type { D3ZoomEvent } from 'd3-zoom'
+import { useVModel } from '@vueuse/core'
+import { onMounted, onUnmounted, provide, ref, useSlots } from 'vue'
 import Viewport from '../Viewport/Viewport.vue'
 import A11yDescriptions from '../../components/A11y/A11yDescriptions.vue'
 import type { FlowElements, FlowProps } from '../../types/flow'
@@ -18,6 +20,9 @@ import type {
   VueFlowStore,
 } from '../../types'
 import type { VueFlowError } from '../../utils/errors'
+import { useVueFlow, useWatchProps } from '../../composables'
+import { useHooks } from '../../store'
+import { Slots } from '../../context'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: undefined,
@@ -125,7 +130,7 @@ const modelEdges = useVModel(props, 'edges', emit)
 
 const { vueFlowRef, hooks, getNodeTypes, getEdgeTypes, ...rest } = useVueFlow(props)
 
-const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
+const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
   vueFlowRef,
   hooks,
   getNodeTypes,