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,

packages/svelte/src/routes/overview/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import SvelteFlow, {
+    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
@@ -103,31 +104,34 @@
   }
 </script>
 
-<SvelteFlow
+<SvelteFlowProvider
   {nodes}
   {edges}
-  {nodeTypes}
-  fitView
-  minZoom={0.1}
-  maxZoom={2.5}
-  initialViewport={{ x: 100, y: 100, zoom: 2 }}
-  on:node:click={(event) => console.log('on node click', event)}
-  on:node:mouseenter={(event) => console.log('on node enter', event)} 
-  on:node:mouseleave={(event) => console.log('on node leave', event)}
-  on:edge:click={(event) => console.log('edge click', event)}
-  on:connect:start={(event) => console.log('on connect start', event)}
-  on:connect={(event) => console.log('on connect', event)}
-  on:connect:end={(event) => console.log('on connect end', event)}
-  on:pane:click={(event) => console.log('on pane click', event)}
-  on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
 >
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <Minimap />
-  <Panel position="top-right">
-    <button on:click={updateNode}>update node pos</button>
-  </Panel>
-</SvelteFlow>
+  <SvelteFlow
+    {nodeTypes}
+    fitView
+    minZoom={0.1}
+    maxZoom={2.5}
+    initialViewport={{ x: 100, y: 100, zoom: 2 }}
+    on:node:click={(event) => console.log('on node click', event)}
+    on:node:mouseenter={(event) => console.log('on node enter', event)} 
+    on:node:mouseleave={(event) => console.log('on node leave', event)}
+    on:edge:click={(event) => console.log('edge click', event)}
+    on:connect:start={(event) => console.log('on connect start', event)}
+    on:connect={(event) => console.log('on connect', event)}
+    on:connect:end={(event) => console.log('on connect end', event)}
+    on:pane:click={(event) => console.log('on pane click', event)}
+    on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+    <Panel position="top-right">
+      <button on:click={updateNode}>update node pos</button>
+    </Panel>
+  </SvelteFlow>
+</SvelteFlowProvider>
 
 <style>
   :root {

packages/svelte/src/routes/stress/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import SvelteFlow, {
+    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
@@ -48,13 +49,15 @@
   const edges = createEdges(edgeItems, { animated: true });
 </script>
 
-<SvelteFlow
+<SvelteFlowProvider
   {nodes}
   {edges}
-  fitView
 >
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <Minimap />
-</SvelteFlow>
-
+  <SvelteFlow
+    fitView
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+</SvelteFlowProvider>

packages/svelte/src/routes/usesvelteflow/+page.svelte

@@ -1,11 +1,53 @@
 <script lang="ts">
   import {
+    createEdges,
+    createNodes,
     SvelteFlowProvider,
   } from '../../lib/index';
 
   import Flow from './Flow.svelte';
+
+  const nodes = createNodes([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Input Node' },
+      position: { x: 150, y: 5 }
+    },
+    {
+      id: '2',
+      type: 'default',
+      data: { label: 'Node' },
+      position: { x: 0, y: 150 }
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output Node' },
+      position: { x: 300, y: 150 }
+    }
+  ]);
+
+  const edges = createEdges([
+    {
+      id: '1-2',
+      type: 'default',
+      source: '1',
+      target: '2',
+      label: 'Edge Text'
+    },
+    {
+      id: '1-3',
+      type: 'smoothstep',
+      source: '1',
+      target: '3'
+    }
+  ]);
 </script>
 
-<SvelteFlowProvider>
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
   <Flow />
 </SvelteFlowProvider>

packages/svelte/src/routes/usesvelteflow/Flow.svelte

@@ -5,55 +5,13 @@
     BackgroundVariant,
     Minimap,
     Panel,
-    createNodes,
-    createEdges,
     useSvelteFlow
   } from '../../lib/index';
  
-  const nodes = createNodes([
-    {
-      id: '1',
-      type: 'input',
-      data: { label: 'Input Node' },
-      position: { x: 150, y: 5 }
-    },
-    {
-      id: '2',
-      type: 'default',
-      data: { label: 'Node' },
-      position: { x: 0, y: 150 }
-    },
-    {
-      id: '3',
-      type: 'output',
-      data: { label: 'Output Node' },
-      position: { x: 300, y: 150 }
-    }
-  ]);
-
-  const edges = createEdges([
-    {
-      id: '1-2',
-      type: 'default',
-      source: '1',
-      target: '2',
-      label: 'Edge Text'
-    },
-    {
-      id: '1-3',
-      type: 'smoothstep',
-      source: '1',
-      target: '3'
-    }
-  ]);
-
   const svelteFlow = useSvelteFlow();
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
->
+<SvelteFlow>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <Minimap />