refactor(store): remove useStore.ts and move logic to store.ts

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

src/composables/index.ts

@@ -3,6 +3,5 @@ export { default as useHooks } from './useHooks'
 export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
-export { default as useStore, createStore } from './useStore'
 export { default as useWindow } from './useWindow'
 export { default as useVueFlow, initFlow } from './useVueFlow'

src/composables/useStore.ts

@@ -1,52 +0,0 @@
-import { getCurrentInstance } from 'vue'
-import { FlowExportObject, FlowOptions, FlowState, FlowStore } from '~/types'
-import { useFlowStore, initialState } from '~/store'
-import { StoreSymbol } from '~/context'
-import { onLoadToObject } from '~/utils'
-
-let id = 0
-export const createStore = (options?: FlowOptions) => {
-  const withStorage = options?.storageKey ?? false
-  let storedState = ref<FlowExportObject>()
-  const initial = initialState()
-  const storageKey = options?.id ?? `vue-flow-${id++}`
-  delete options?.id
-  const preloadedState = {
-    ...initial,
-    ...(options as FlowState),
-  }
-  if (withStorage) {
-    storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
-    if (storedState.value) {
-      preloadedState.elements =
-        storedState.value.nodes || storedState.value.edges
-          ? [...storedState.value.nodes, ...storedState.value.edges]
-          : options?.elements ?? []
-      if (storedState.value.position && storedState.value.zoom)
-        preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
-    }
-  }
-  const store = useFlowStore(storageKey, preloadedState)
-  if (withStorage && storageKey === store.id) {
-    const toObject = onLoadToObject(store.state)
-    watch(
-      store.state,
-      () => {
-        storedState.value = toObject()
-      },
-      { deep: true },
-    )
-  }
-  return store
-}
-
-export default (options?: FlowOptions): FlowStore => {
-  const currentInstance = getCurrentInstance()
-  let store = currentInstance ? inject(StoreSymbol, undefined) : false
-  if (!store || (store && options?.id && options.id !== store.id)) {
-    store = createStore(options)
-  }
-  if (currentInstance) provide(StoreSymbol, store)
-
-  return reactive(store)
-}

src/store/index.ts

@@ -1,2 +1,2 @@
-export { default as useFlowStore } from './store'
+export { default as useStore } from './store'
 export * from './state'

src/store/store.ts

@@ -1,9 +1,12 @@
-import useState from './state'
+import { getCurrentInstance } from 'vue'
+import useState, { initialState } from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowState, Store } from '~/types'
+import { FlowExportObject, FlowOptions, FlowState, FlowStore, Store } from '~/types'
+import { StoreSymbol } from '~/context'
+import { onLoadToObject } from '~/utils'
 
-export default (id: string, preloadedState: FlowState): Store => {
+const useFlowStore = (id: string, preloadedState: FlowState): Store => {
   const state = reactive(useState(preloadedState))
   const getters = useGetters(state)
   const actions = useActions(state, getters)
@@ -15,3 +18,50 @@ export default (id: string, preloadedState: FlowState): Store => {
     ...actions,
   }
 }
+
+let id = 0
+export const createStore = (options?: FlowOptions) => {
+  const withStorage = options?.storageKey ?? false
+  let storedState = ref<FlowExportObject>()
+  const initial = initialState()
+  const storageKey = options?.id ?? `vue-flow-${id++}`
+  delete options?.id
+  const preloadedState = {
+    ...initial,
+    ...(options as FlowState),
+  }
+  if (withStorage) {
+    storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
+    if (storedState.value) {
+      preloadedState.elements =
+        storedState.value.nodes || storedState.value.edges
+          ? [...storedState.value.nodes, ...storedState.value.edges]
+          : options?.elements ?? []
+      if (storedState.value.position && storedState.value.zoom)
+        preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
+    }
+  }
+  const store = useFlowStore(storageKey, preloadedState)
+  if (withStorage && storageKey === store.id) {
+    const toObject = onLoadToObject(store.state)
+    watch(
+      store.state,
+      () => {
+        storedState.value = toObject()
+      },
+      { deep: true },
+    )
+  }
+  return store
+}
+
+export default (options?: FlowOptions): FlowStore => {
+  const currentInstance = getCurrentInstance()
+  let store = currentInstance ? inject(StoreSymbol, undefined) : false
+  if (!store || (store && options?.id && options.id !== store.id)) {
+    store = createStore(options)
+  }
+  if (currentInstance) provide(StoreSymbol, store)
+
+  return reactive(store)
+}