refactor(store)!: remove pinia

* replace pinia with a reactive state object and inject/provide

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

update(store)!: inject store if possible, otherwise create a new one by id

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

src/composables/index.ts

@@ -3,6 +3,6 @@ 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 } from './useStore'
+export { default as useStore, createStore } from './useStore'
 export { default as useWindow } from './useWindow'
 export { default as useVueFlow, initFlow } from './useVueFlow'

src/composables/useHandle.ts

@@ -1,6 +1,6 @@
 import useStore from './useStore'
 import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
+import { Connection, ConnectionMode, ElementId, HandleType, ReactiveFlowStore, ValidConnectionFunc } from '~/types'
 
 type Result = {
   elementBelow: Element | null
@@ -67,7 +67,7 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
   hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
-export default (store = useStore()) =>
+export default (store: ReactiveFlowStore = useStore()) =>
   (
     event: MouseEvent,
     handleId: ElementId,

src/composables/useHooks.ts

@@ -1,4 +1,4 @@
-import { EmitFunc, FlowHooks, FlowEvents, FlowStore } from '~/types'
+import { EmitFunc, FlowHooks, FlowEvents, FlowStore, ReactiveFlowStore } from '~/types'
 
 // flow event hooks
 export const createHooks = (): FlowHooks => ({
@@ -49,4 +49,4 @@ const bind = (emit: EmitFunc, hooks: FlowHooks) => {
   }
 }
 
-export default (store: FlowStore, emit: EmitFunc) => bind(emit, store.hooks)
+export default (store: ReactiveFlowStore, emit: EmitFunc) => bind(emit, store.hooks)

src/composables/useStore.ts

@@ -1,38 +1,46 @@
-import { FlowExportObject, FlowOptions, FlowState } from '~/types'
-import { useStateStore } from '~/store'
+import { FlowExportObject, FlowOptions, FlowState, ReactiveFlowStore } from '~/types'
+import { useNewStore } from '~/store'
 import { Store } from '~/context'
 import { onLoadToObject, initialState } from '~/utils'
 
 let id = 0
-export default (options?: Partial<FlowOptions>, key?: string) => {
-  let store = inject(Store, undefined)
-  if (!store) {
-    const withStorage = options?.storageKey ?? key ?? false
-    if (import.meta.env.DEV) console.warn('store context not found; creating default store')
-    let storedState = ref<FlowExportObject>()
-    const initial = initialState()
-    const storageKey = key ?? `vue-flow-${id++}`
-    const preloadedState = {
-      ...initial,
-      ...(options as FlowState),
+export const createStore = (options?: FlowOptions) => {
+  const withStorage = options?.storageKey ?? false
+  let storedState = ref<FlowExportObject>()
+  const initial = initialState()
+  const storageKey = options?.id ?? `vue-flow-${id++}`
+  const preloadedState = {
+    ...initial,
+    ...(options as FlowState),
+  }
+  if (withStorage) {
+    storedState = useStorage<FlowExportObject>(storageKey, { elements: [], position: [0, 0], zoom: 0 })
+    if (storedState.value) {
+      preloadedState.elements = storedState.value.elements ?? options?.elements ?? []
+      if (storedState.value.position && storedState.value.zoom)
+        preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
     }
-    if (withStorage) {
-      storedState = useStorage<FlowExportObject>(storageKey, { elements: [], position: [0, 0], zoom: 0 })
-      if (storedState.value) {
-        preloadedState.elements = storedState.value.elements ?? options?.elements ?? []
-        if (storedState.value.position && storedState.value.zoom)
-          preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
-      }
-    }
-    store = useStateStore(storageKey, preloadedState)()
-    if (withStorage && storageKey === store.$id) {
-      const toObject = onLoadToObject(store)
-      store.$subscribe(() => {
+  }
+  const store = useNewStore(storageKey, preloadedState)
+  if (withStorage && storageKey === store.id?.value) {
+    const toObject = onLoadToObject(store.state)
+    watch(
+      store.state,
+      () => {
         storedState.value = toObject()
-      })
-    }
-    provide(Store, store)
+      },
+      { deep: true },
+    )
   }
-
   return store
 }
+
+export default (options?: FlowOptions): ReactiveFlowStore => {
+  let store = options?.id ? createStore(options) : inject(Store, undefined)
+  if (!store) {
+    store = createStore(options)
+  }
+  provide(Store, store)
+
+  return reactive(store)
+}

src/composables/useVueFlow.ts

@@ -1,10 +1,12 @@
 import useStore from './useStore'
 import useHooks from './useHooks'
-import { EmitFunc, FlowOptions, FlowStore } from '~/types'
+import { EmitFunc, ReactiveFlowStore } from '~/types'
 
-export const initFlow = (emit: EmitFunc, key?: string, store = useStore(undefined, key)) => {
+let key = 0
+export const initFlow = (emit: EmitFunc, id = `vue-flow-${key++}`): ReactiveFlowStore => {
+  const store = useStore({ id })
   useHooks(store, emit)
   return store
 }
 
-export default (options?: Partial<FlowOptions>): FlowStore => useStore(options)
+export default useStore

src/composables/useZoomPanHelper.ts

@@ -1,11 +1,11 @@
 import { zoomIdentity } from 'd3-zoom'
 import useStore from './useStore'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, isGraphNode } from '~/utils'
-import { FitViewParams, FlowTransform, GraphNode, Rect, UseZoomPanHelper, XYPosition } from '~/types'
+import { FitViewParams, FlowTransform, GraphNode, ReactiveFlowStore, Rect, UseZoomPanHelper, XYPosition } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 
-export default (store = useStore()): UseZoomPanHelper => {
+export default (store: ReactiveFlowStore = useStore()): UseZoomPanHelper => {
   return {
     zoomIn: () => store.d3Selection && store.d3Zoom?.scaleBy(store.d3Selection, 1.2),
     zoomOut: () => store.d3Selection && store.d3Zoom?.scaleBy(store.d3Selection, 1 / 1.2),
@@ -14,7 +14,13 @@ export default (store = useStore()): UseZoomPanHelper => {
       const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom)
       store.d3Selection && store.d3Zoom?.transform(store.d3Selection, nextTransform)
     },
-    fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false, transitionDuration: 0 }) => {
+    fitView: (
+      options: FitViewParams = {
+        padding: DEFAULT_PADDING,
+        includeHiddenNodes: false,
+        transitionDuration: 0,
+      },
+    ) => {
       if (!store.getNodes.length) return
 
       let nodes: GraphNode[] = []