feat(svelte): add SvelteFlowProvider and useSvelteFlow hook

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
+  import { getPositionWithOrigin } from '@reactflow/utils';
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
-    import { getPositionWithOrigin } from '@reactflow/utils';
-    import { Position } from '@reactflow/system';
 
   const { nodes, nodeOrigin, updateNodeDimensions } = useStore();
+
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
       ? null
@@ -16,7 +16,6 @@
             nodeElement: entry.target as HTMLDivElement,
             forceUpdate: true
           }));
-
           updateNodeDimensions(updates);
         });
 

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { setContext, onMount } from 'svelte';
+  import { onMount, setContext } from 'svelte';
   import cc from 'classcat';
 
-  import { key, createStore } from '$lib/store';
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
   import { Viewport } from '$lib/container/Viewport';
@@ -12,6 +11,7 @@
   import { NodeSelection } from '$lib/components/NodeSelection';
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
+  import { createStore, key, useStore } from '$lib/store';
   import type { SvelteFlowProps, SvelteFlowEvents } from './types';
 
   type $$Props = SvelteFlowProps;
@@ -40,9 +40,9 @@
     nodes,
     edges,
     fitView,
-    nodeTypes
   });
 
+  // we overwrite the context to be able to use the nodes and edges stores passed by the user 
   setContext(key, {
     getStore: () => store
   });
@@ -72,7 +72,7 @@
 
   $: {
     if (nodeTypes !== undefined) {
-      store.setNodeTypes(nodeTypes);
+     store.setNodeTypes(nodeTypes);
     }
 
     if (edgeTypes !== undefined) {

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { hasContext } from 'svelte';
+  import { key } from '$lib/store';
+
+  import SvelteFlow from './SvelteFlow.svelte';
+  import { SvelteFlowProvider } from '$lib/components/SvelteFlowProvider';
+  import type { SvelteFlowProps } from './types';
+  
+  type $$Props = SvelteFlowProps;
+
+  // @todo how to do this typing right?
+  const props = $$props as SvelteFlowProps;
+</script>
+
+{#if hasContext(key)}
+  <SvelteFlow {...props}>
+    <slot />
+  </SvelteFlow>
+{:else}
+  <SvelteFlowProvider>
+    <SvelteFlow {...props}>
+      <slot />
+    </SvelteFlow>
+  </SvelteFlowProvider>
+{/if}

packages/svelte/src/lib/container/SvelteFlow/index.ts

@@ -1,2 +1,2 @@
-export { default as SvelteFlow } from './SvelteFlow.svelte';
+export { default as SvelteFlow } from './Wrapper.svelte';
 export * from './types';