update(store): only inject if in current instance

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

src/composables/useStore.ts

@@ -1,3 +1,4 @@
+import { getCurrentInstance } from 'vue'
 import { FlowExportObject, FlowOptions, FlowState, FlowStore } from '~/types'
 import { useNewStore } from '~/store'
 import { StoreSymbol } from '~/context'
@@ -36,11 +37,12 @@ export const createStore = (options?: FlowOptions) => {
 }
 
 export default (options?: FlowOptions): FlowStore => {
-  let store = options?.id ? createStore(options) : inject(StoreSymbol, undefined)
+  const currentInstance = getCurrentInstance()
-  if (!store) {
+  let store = currentInstance ? inject(StoreSymbol, undefined) : false
+  if (!store || (store && options?.id && options.id !== store.id?.value)) {
     store = createStore(options)
   }
-  provide(StoreSymbol, store)
+  if (currentInstance) provide(StoreSymbol, store)
 
   return reactive(store)
 }

src/container/VueFlow/VueFlow.vue

@@ -146,10 +146,14 @@ const transitionName = computed(() => {
   return name
 })
 </script>
-
+<script lang="ts">
+export default {
+  name: 'VueFlow',
+}
+</script>
 <template>
   <div class="vue-flow">
-    <Transition :key="`vue-flow-transition-${store.id}`" :name="transitionName">
+    <Transition :name="transitionName">
       <Suspense timeout="0">
         <template #default>
           <Renderer :key="`renderer-${store.id}`" :elements="elements">
@@ -230,11 +234,7 @@ const transitionName = computed(() => {
                       <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
                     </template>
                     <template #custom-connection-line="customConnectionLineProps">
-                      <slot
+                      <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
-                        :key="`connection-line-${store.id}`"
-                        name="custom-connection-line"
-                        v-bind="customConnectionLineProps"
-                      />
                     </template>
                   </EdgeRenderer>
                 </SelectionPane>
@@ -244,8 +244,8 @@ const transitionName = computed(() => {
           </Renderer>
         </template>
         <template v-if="store.loading" #fallback>
-          <slot :key="`loading-indicator-${store.id}`" name="loading-indicator">
+          <slot name="loading-indicator">
-            <LoadingIndicator :key="`default-loading-indicator-${store.id}`" v-bind="store.loading">
+            <LoadingIndicator v-bind="store.loading">
               <slot name="loading-label" />
             </LoadingIndicator>
           </slot>