From 31700221f26cdb2e3d191f366c07ab200e828f85 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 24 Mar 2024 12:42:59 +0100
Subject: [PATCH] fix(core): store vf instance on vue app for ssr

---
 packages/core/src/composables/useVueFlow.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index 9a04aac4..4d08ab94 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -1,6 +1,6 @@
 import { toRefs, tryOnScopeDispose } from '@vueuse/core'
 import type { EffectScope } from 'vue'
-import { computed, effectScope, getCurrentScope, inject, provide, reactive, watch } from 'vue'
+import { computed, effectScope, getCurrentInstance, getCurrentScope, inject, provide, reactive, watch } from 'vue'
 import type { EdgeChange, FlowOptions, NodeChange, VueFlowStore } from '../types'
 import { warn } from '../utils'
 import { useActions, useGetters, useState } from '../store'
@@ -15,8 +15,15 @@ export class Storage {
   static instance: Storage
 
   public static getInstance(): Storage {
-    if (!Storage.instance) {
-      Storage.instance = new Storage()
+    // todo: this is just a workaround for now, in the next major this class won't exist and the state will be ctx-based (like React Provider)
+    const vueApp = getCurrentInstance()?.appContext.app
+
+    const existingInstance = vueApp?.config.globalProperties.$vueFlowStorage
+
+    Storage.instance = existingInstance ?? new Storage()
+
+    if (vueApp) {
+      vueApp.config.globalProperties.$vueFlowStorage = Storage.instance
     }
 
     return Storage.instance
@@ -140,7 +147,8 @@ export function useVueFlow(options?: FlowOptions): VueFlowStore {
 
     vueFlow = state
 
-    effectScope().run(() => {
+    const vfScope = scope ?? effectScope(true)
+    vfScope.run(() => {
       /**
        * We have to watch the applyDefault option here,
        * because we need to register the default hooks before the `VueFlow` component is actually mounted and props passed