chore(core): use auto imports to for utils, composables etc.

packages/core/src/auto-imports.d.ts

@@ -8,40 +8,100 @@ declare global {
   const $ref: typeof import('vue/macros')['$ref']
   const $shallowRef: typeof import('vue/macros')['$shallowRef']
   const $toRef: typeof import('vue/macros')['$toRef']
+  const EdgeId: typeof import('./context/index')['EdgeId']
+  const EdgeRef: typeof import('./context/index')['EdgeRef']
   const EffectScope: typeof import('vue')['EffectScope']
+  const NodeId: typeof import('./context/index')['NodeId']
+  const NodeRef: typeof import('./context/index')['NodeRef']
+  const Slots: typeof import('./context/index')['Slots']
+  const Storage: typeof import('./composables/useVueFlow')['Storage']
+  const VueFlow: typeof import('./context/index')['VueFlow']
+  const actions: typeof import('./store/actions')['default']
+  const addEdge: typeof import('./utils/graph')['addEdge']
+  const addEdgeToStore: typeof import('./utils/store')['addEdgeToStore']
+  const applyChanges: typeof import('./utils/changes')['applyChanges']
+  const applyEdgeChanges: typeof import('./utils/changes')['applyEdgeChanges']
+  const applyExtent: typeof import('./utils/drag')['applyExtent']
+  const applyNodeChanges: typeof import('./utils/changes')['applyNodeChanges']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const boxToRect: typeof import('./utils/graph')['boxToRect']
+  const checkElementBelowIsValid: typeof import('./composables/useHandle')['checkElementBelowIsValid']
+  const clamp: typeof import('./utils/graph')['clamp']
+  const clampPosition: typeof import('./utils/graph')['clampPosition']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const connectionExists: typeof import('./utils/graph')['connectionExists']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createAdditionChange: typeof import('./utils/changes')['createAdditionChange']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createGraphNodes: typeof import('./utils/store')['createGraphNodes']
+  const createHooks: typeof import('./store/hooks')['createHooks']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRemoveChange: typeof import('./utils/changes')['createRemoveChange']
+  const createSelectionChange: typeof import('./utils/changes')['createSelectionChange']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defaultEdgeTypes: typeof import('./store/state')['defaultEdgeTypes']
+  const defaultNodeTypes: typeof import('./store/state')['defaultNodeTypes']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getBoundsofRects: typeof import('./utils/graph')['getBoundsofRects']
+  const getConnectedEdges: typeof import('./utils/graph')['getConnectedEdges']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getDimensions: typeof import('./utils/graph')['getDimensions']
+  const getDragItems: typeof import('./utils/drag')['getDragItems']
+  const getEdgeId: typeof import('./utils/graph')['getEdgeId']
+  const getEdgePositions: typeof import('./utils/edge')['getEdgePositions']
+  const getEventHandlerParams: typeof import('./utils/drag')['getEventHandlerParams']
+  const getHandle: typeof import('./utils/edge')['getHandle']
+  const getHandleBounds: typeof import('./utils/node')['getHandleBounds']
+  const getHandlePosition: typeof import('./utils/edge')['getHandlePosition']
+  const getHostForElement: typeof import('./utils/graph')['getHostForElement']
+  const getIncomers: typeof import('./utils/graph')['getIncomers']
+  const getMarkerId: typeof import('./utils/graph')['getMarkerId']
+  const getNodesInside: typeof import('./utils/graph')['getNodesInside']
+  const getOutgoers: typeof import('./utils/graph')['getOutgoers']
+  const getOverlappingArea: typeof import('./utils/graph')['getOverlappingArea']
+  const getRectOfNodes: typeof import('./utils/graph')['getRectOfNodes']
+  const getSelectionChanges: typeof import('./utils/changes')['getSelectionChanges']
+  const getTransformForBounds: typeof import('./utils/graph')['getTransformForBounds']
+  const getXYZPos: typeof import('./utils/graph')['getXYZPos']
+  const getters: typeof import('./store/getters')['default']
+  const graphPosToZoomedPos: typeof import('./utils/graph')['graphPosToZoomedPos']
+  const groupEdgesByZLevel: typeof import('./utils/edge')['groupEdgesByZLevel']
   const h: typeof import('vue')['h']
+  const handleNodeClick: typeof import('./utils/node')['handleNodeClick']
+  const hasSelector: typeof import('./utils/drag')['hasSelector']
+  const hooks: typeof import('./store/hooks')['default']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const isDef: typeof import('./utils/store')['isDef']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isEdge: typeof import('./utils/graph')['isEdge']
+  const isEdgeVisible: typeof import('./utils/edge')['isEdgeVisible']
+  const isGraphEdge: typeof import('./utils/graph')['isGraphEdge']
+  const isGraphNode: typeof import('./utils/graph')['isGraphNode']
+  const isNode: typeof import('./utils/graph')['isNode']
+  const isParentSelected: typeof import('./utils/graph')['isParentSelected']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
+  const isRect: typeof import('./utils/graph')['isRect']
   const isRef: typeof import('vue')['isRef']
   const logicAnd: typeof import('@vueuse/core')['logicAnd']
   const logicNot: typeof import('@vueuse/core')['logicNot']
@@ -49,6 +109,7 @@ declare global {
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
+  const nodeToRect: typeof import('./utils/graph')['nodeToRect']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
@@ -66,7 +127,10 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const parseEdge: typeof import('./utils/graph')['parseEdge']
+  const parseNode: typeof import('./utils/graph')['parseNode']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const pointToRendererPoint: typeof import('./utils/graph')['pointToRendererPoint']
   const provide: typeof import('vue')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
@@ -75,6 +139,7 @@ declare global {
   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
+  const rectToBox: typeof import('./utils/graph')['rectToBox']
   const ref: typeof import('vue')['ref']
   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
   const refDebounced: typeof import('@vueuse/core')['refDebounced']
@@ -88,6 +153,7 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const state: typeof import('./store/state')['default']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
@@ -106,6 +172,10 @@ declare global {
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
+  const updateEdge: typeof import('./utils/graph')['updateEdge']
+  const updateEdgeAction: typeof import('./utils/store')['updateEdgeAction']
+  const updatePosition: typeof import('./utils/drag')['updatePosition']
+  const useActions: typeof import('./store/index')['useActions']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
@@ -138,8 +208,11 @@ declare global {
   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDrag: typeof import('./composables/useDrag')['default']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
   const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useEdge: typeof import('./composables/useEdge')['default']
+  const useEdgeHooks: typeof import('./composables/useEdgeHooks')['default']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -159,6 +232,9 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useGetters: typeof import('./store/index')['useGetters']
+  const useHandle: typeof import('./composables/useHandle')['default']
+  const useHooks: typeof import('./store/index')['useHooks']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -166,6 +242,7 @@ declare global {
   const useInterval: typeof import('@vueuse/core')['useInterval']
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useKeyPress: typeof import('./composables/useKeyPress')['default']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
@@ -181,6 +258,8 @@ declare global {
   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNode: typeof import('./composables/useNode')['default']
+  const useNodeHooks: typeof import('./composables/useNodeHooks')['default']
   const useNow: typeof import('@vueuse/core')['useNow']
   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
@@ -206,6 +285,7 @@ declare global {
   const useSlots: typeof import('vue')['useSlots']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useState: typeof import('./store/index')['useState']
   const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
@@ -231,14 +311,19 @@ declare global {
   const useVModels: typeof import('@vueuse/core')['useVModels']
   const useVibrate: typeof import('@vueuse/core')['useVibrate']
   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useVueFlow: typeof import('./composables/useVueFlow')['default']
   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWatch: typeof import('./utils/watch')['useWatch']
   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindow: typeof import('./composables/useWindow')['default']
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const useZoomPanHelper: typeof import('./composables/useZoomPanHelper')['default']
+  const warn: typeof import('./utils/log')['warn']
   const watch: typeof import('vue')['watch']
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']

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

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import type { D3ZoomEvent } from 'd3-zoom'
 import Viewport from '../Viewport/Viewport.vue'
-import { useHooks } from '../../store'
-import { useVueFlow } from '../../composables'
 import type { FlowElements, FlowProps } from '../../types/flow'
-import { Slots } from '../../context'
 import type {
   Connection,
   EdgeChange,
@@ -19,7 +16,6 @@ import type {
   ViewpaneTransform,
   VueFlowStore,
 } from '../../types'
-import useWatch from './watch'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: undefined,
@@ -42,7 +38,6 @@ const props = withDefaults(defineProps<FlowProps>(), {
   autoConnect: undefined,
   elevateEdgesOnSelect: undefined,
 })
-
 const emit = defineEmits<{
   (event: 'nodesChange', changes: NodeChange[]): void
   (event: 'edgesChange', changes: EdgeChange[]): void
@@ -99,7 +94,7 @@ const emit = defineEmits<{
   (event: 'update:nodes', value: GraphNode[]): void
   (event: 'update:edges', value: GraphEdge[]): void
 }>()
-
+console.log('flubarg')
 const modelValue = useVModel(props, 'modelValue', emit)
 const modelNodes = useVModel(props, 'nodes', emit)
 const modelEdges = useVModel(props, 'edges', emit)

packages/core/src/utils/watch.ts

@@ -5,7 +5,11 @@ import type { Connection, FlowProps, GraphEdge, GraphNode, VueFlowStore } from '
 
 const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
 
-export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>, props: FlowProps, store: VueFlowStore) => {
+export const useWatch = (
+  models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
+  props: FlowProps,
+  store: VueFlowStore,
+) => {
   const scope = effectScope()
 
   scope.run(() => {

packages/core/vite.config.ts

@@ -47,6 +47,7 @@ export default defineConfig({
     vueTypes(),
     AutoImport({
       imports: ['vue', '@vueuse/core', 'vue/macros'],
+      dirs: ['./src/utils/**', './src/composables/**', './src/context/**', './src/store/**'],
       dts: 'src/auto-imports.d.ts',
     }),
     replace({