From 8b02d7d3b383a8f5ac82efde5b8d2c7f311a5e9a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 1 Aug 2022 14:45:05 +0200
Subject: [PATCH] refactor(store): re-bind hooks on mount and use hooks ref

---
 .../src/container/VueFlow/VueFlow.vue         |  2 +-
 packages/vue-flow/src/store/hooks.ts          | 27 ++++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/vue-flow/src/container/VueFlow/VueFlow.vue b/packages/vue-flow/src/container/VueFlow/VueFlow.vue
index ae03f2e7..1c29e9fd 100644
--- a/packages/vue-flow/src/container/VueFlow/VueFlow.vue
+++ b/packages/vue-flow/src/container/VueFlow/VueFlow.vue
@@ -127,7 +127,7 @@ onMounted(() => {
   vueFlowRef.value = el.value!
 })
 
-useHooks(emit, hooks.value)
+useHooks(emit, hooks)
 
 provide(Slots, useSlots())
 
diff --git a/packages/vue-flow/src/store/hooks.ts b/packages/vue-flow/src/store/hooks.ts
index 2a97dfa1..96eb38c3 100644
--- a/packages/vue-flow/src/store/hooks.ts
+++ b/packages/vue-flow/src/store/hooks.ts
@@ -1,3 +1,4 @@
+import type { Ref } from 'vue'
 import type { Emits, FlowHooks } from '~/types'
 
 // flow event hooks
@@ -48,18 +49,18 @@ export const createHooks = (): FlowHooks => ({
   updateNodeInternals: createEventHook(),
 })
 
-const bind = (emit: Emits, hooks: FlowHooks) => {
-  for (const [key, value] of Object.entries(hooks)) {
-    const listener = (data: any) => {
-      emit(key as any, data)
+export default (emit: Emits, hooks: Ref<FlowHooks>) => {
+  onBeforeMount(() => {
+    for (const [key, value] of Object.entries(hooks.value)) {
+      const listener = (data: any) => {
+        emit(key as Emits extends (event: infer Event) => void ? Event : never, data)
+      }
+
+      value.on(listener)
+
+      tryOnScopeDispose(() => {
+        value.off(listener)
+      })
     }
-
-    value.on(listener)
-
-    tryOnScopeDispose(() => {
-      value.off(listener)
-    })
-  }
+  })
 }
-
-export default (emit: Emits, hooks: FlowHooks) => bind(emit, hooks)