feat(svelte): add Provider

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, setContext } from 'svelte';
+  import { onMount } from 'svelte';
   import cc from 'classcat';
 
   import { Zoom } from '$lib/container/Zoom';
@@ -11,15 +11,13 @@
   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 { useStore } from '$lib/store';
   import type { SvelteFlowProps, SvelteFlowEvents } from './types';
 
   type $$Props = SvelteFlowProps;
   type $$Events = SvelteFlowEvents;
 
   export let id: $$Props['id'] = '1';
-  export let nodes: $$Props['nodes'];
-  export let edges: $$Props['edges'];
   export let fitView: $$Props['fitView'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
@@ -36,16 +34,7 @@
 
   let domNode: HTMLDivElement;
 
-  const store = createStore({
-    nodes,
-    edges,
-    fitView,
-  });
-
-  // we overwrite the context to be able to use the nodes and edges stores passed by the user 
-  setContext(key, {
-    getStore: () => store
-  });
+  const store = useStore();
 
   onMount(() => {
     const { width, height } = domNode.getBoundingClientRect();
@@ -86,6 +75,10 @@
     if (maxZoom !== undefined) {
       store.setMaxZoom(maxZoom);
     }
+
+    if (fitView !== undefined) {
+      store.fitViewOnInit.set(fitView);
+    }
   }
 </script>
 

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

@@ -1,25 +0,0 @@
-<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 './Wrapper.svelte';
+export { default as SvelteFlow } from './SvelteFlow.svelte';
 export * from './types';

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

@@ -11,9 +11,6 @@ import type { Writable } from 'svelte/store';
 import type { createNodes } from '$lib/utils';
 
 export type SvelteFlowProps = {
-  nodes: ReturnType<typeof createNodes>;
-  edges: Writable<Edge[]>;
-
   id?: string;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;