feat(svelte): add Provider

packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte

@@ -2,8 +2,17 @@
   import { setContext } from 'svelte';
   
   import { createStore, key } from '$lib/store';
+  import type { SvelteFlowProviderProps } from './types';
 
-  const store = createStore();
+  type $$Props = SvelteFlowProviderProps;
+
+  export let nodes: $$Props['nodes'];
+  export let edges: $$Props['edges'];
+
+  const store = createStore({
+    nodes,
+    edges,
+  });
 
   setContext(key, {
     getStore: () => store

packages/svelte/src/lib/components/SvelteFlowProvider/types.ts

@@ -1,6 +1,9 @@
-import type { SvelteFlowProps } from '$lib/container/SvelteFlow/types';
+import type { Writable } from 'svelte/store';
 
-export type SvelteFlowProviderProps = Pick<
-  SvelteFlowProps,
-  'nodes' | 'edges' | 'fitView' | 'nodeTypes'
->;
+import type { Edge } from '$lib/types';
+import type { createNodes } from '$lib/utils';
+
+export type SvelteFlowProviderProps = {
+  nodes: ReturnType<typeof createNodes>;
+  edges: Writable<Edge[]>;
+};

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;

packages/svelte/src/lib/store/index.ts

@@ -31,16 +31,14 @@ import type { SvelteFlowStore } from './types';
 
 export const key = Symbol();
 
-type CreateStoreParams = Pick<SvelteFlowStore, 'nodes' | 'edges'> & { fitView?: boolean };
+type CreateStoreParams = Pick<SvelteFlowStore, 'nodes' | 'edges'>;
 
-export function createStore(params?: CreateStoreParams): SvelteFlowStore {
+export function createStore(params: CreateStoreParams): SvelteFlowStore {
   const store = {
     ...initialStoreState,
-    ...(params !== undefined ? params : {})
+    ...params
   };
 
-  let fitViewOnInitDone = false;
-
   function setNodeTypes(nodeTypes: NodeTypes) {
     store.nodeTypes.set({
       ...initialNodeTypes,
@@ -120,9 +118,11 @@ export function createStore(params?: CreateStoreParams): SvelteFlowStore {
 
     const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
 
-    fitViewOnInitDone =
-      fitViewOnInitDone || (!!params?.fitView && !!d3Zoom && !!d3Selection && fitView());
+    const fitViewOnInitDone =
+      get(store.fitViewOnInitDone) ||
+      (get(store.fitViewOnInit) && !!d3Zoom && !!d3Selection && fitView());
 
+    store.fitViewOnInitDone.set(fitViewOnInitDone);
     store.nodes.set(nextNodes);
   }
 

packages/svelte/src/lib/store/initial-store.ts

@@ -47,7 +47,8 @@ export const initialStoreState = {
   width: writable<number>(500),
   minZoom: writable<number>(0.5),
   maxZoom: writable<number>(2),
-  fitViewOnInit: false,
+  fitViewOnInit: writable<boolean>(false),
+  fitViewOnInitDone: writable<boolean>(false),
   nodeOrigin: writable<NodeOrigin>([0, 0]),
   d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
     zoom: null,