refactor(svelte): simplify nodes and edges store handling

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, hasContext } from 'svelte';
   import cc from 'classcat';
-  import { PanOnScrollMode, type CoordinateExtent, type Viewport } from '@xyflow/system';
+  import { PanOnScrollMode, type Viewport } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
@@ -13,13 +13,15 @@
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
   import { Attribution } from '$lib/components/Attribution';
-  import { useStore } from '$lib/store';
+  import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
-  import type { EdgeTypes, NodeTypes } from '$lib/types';
+  import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
 
   type $$Props = SvelteFlowProps;
 
   export let 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;
@@ -53,10 +55,10 @@
   export let style: $$Props['style'] = undefined;
   let className: $$Props['class'] = undefined;
   export { className as class };
+
   let domNode: HTMLDivElement;
-  
-  $: flowId = id;
-  const store = useStore();
+
+  const store = hasContext(key) ? useStore() : createStoreContext();
 
   onMount(() => {
     const { width, height } = domNode.getBoundingClientRect();
@@ -64,13 +66,19 @@
     store.height.set(height);
     store.domNode.set(domNode);
 
-    updateStore({
+    store.syncNodeStores(nodes)
+    store.syncEdgeStores(edges)
+
+    if (fitView !== undefined) {
+      store.fitViewOnInit.set(fitView);
+    }
+
+    updateStore(store, {
       nodeTypes,
       edgeTypes,
       minZoom,
       maxZoom,
       translateExtent,
-      fitView
     });
 
     return () => {
@@ -78,70 +86,32 @@
     }
   });
 
+  // this updates the store for simple changes 
+  // where the prop names equals the store name
   $: {
-    const updatableProps = {
-      flowId,
+    const updatableProps: UpdatableStoreProps = {
+      flowId: id,
       connectionLineType,
       connectionRadius,
       selectionMode,
       snapGrid,
-      isValidConnection,
       defaultMarkerColor,
       nodesDraggable,
       nodesConnectable,
       elementsSelectable,
+      isValidConnection,
     };
 
-    Object.keys(updatableProps).forEach(prop => {
-      // @ts-ignore
-      if (updatableProps[prop] !== undefined) {
-        // @ts-ignore
-        store[prop].set(updatableProps[prop]);
-      }
-    })
+   updateStoreByKeys(store, updatableProps);
   }
 
-  function updateStore({ nodeTypes, edgeTypes, minZoom, maxZoom, translateExtent, fitView }: {
-    nodeTypes?: NodeTypes,
-    edgeTypes?: EdgeTypes,
-    minZoom?: number,
-    maxZoom?: number,
-    translateExtent?: CoordinateExtent,
-    fitView?: boolean
-  }) {
-    if (nodeTypes !== undefined) {
-     store.setNodeTypes(nodeTypes);
-    }
-
-    if (edgeTypes !== undefined) {
-      store.setEdgeTypes(edgeTypes);
-    }
-
-    if (minZoom !== undefined) {
-      store.setMinZoom(minZoom);
-    }
-
-    if (maxZoom !== undefined) {
-      store.setMaxZoom(maxZoom);
-    }
-
-    if (translateExtent !== undefined) {
-      store.setTranslateExtent(translateExtent)
-    }
-
-    if (fitView !== undefined) {
-      store.fitViewOnInit.set(fitView);
-    }
-  }
-
-  $: updateStore({
+  $: updateStore(store, {
     nodeTypes,
     edgeTypes,
     minZoom,
     maxZoom,
-    translateExtent,
-    fitView
-  })
+    translateExtent
+  });
 </script>
 
 <div

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

@@ -16,9 +16,12 @@ import type {
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
+import type { Writable } from 'svelte/store';
 
 export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   id?: string;
+  nodes: Writable<Node[]>;
+  edges: Writable<Edge[]>;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
   selectionKey?: KeyDefinition;

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

@@ -0,0 +1,71 @@
+import type { SvelteFlowStore } from '$lib/store/types';
+import type { EdgeTypes, NodeTypes } from '$lib/types';
+import type { CoordinateExtent } from '@xyflow/system';
+import type { Writable } from 'svelte/store';
+
+// this is helper function for updating the store
+// for props where we need to call a specific store action
+export function updateStore(
+  store: SvelteFlowStore,
+  {
+    nodeTypes,
+    edgeTypes,
+    minZoom,
+    maxZoom,
+    translateExtent
+  }: {
+    nodeTypes?: NodeTypes;
+    edgeTypes?: EdgeTypes;
+    minZoom?: number;
+    maxZoom?: number;
+    translateExtent?: CoordinateExtent;
+  }
+) {
+  if (nodeTypes !== undefined) {
+    store.setNodeTypes(nodeTypes);
+  }
+
+  if (edgeTypes !== undefined) {
+    store.setEdgeTypes(edgeTypes);
+  }
+
+  if (minZoom !== undefined) {
+    store.setMinZoom(minZoom);
+  }
+
+  if (maxZoom !== undefined) {
+    store.setMaxZoom(maxZoom);
+  }
+
+  if (translateExtent !== undefined) {
+    store.setTranslateExtent(translateExtent);
+  }
+}
+
+const getKeys = <T extends object>(obj: T) => Object.keys(obj) as Array<keyof T>;
+
+type UnwrapWritable<T> = T extends Writable<infer U> ? U : T;
+
+// @todo there must be a better way to define the types here..
+export type UpdatableStoreProps = {
+  flowId?: UnwrapWritable<SvelteFlowStore['flowId']>;
+  connectionLineType?: UnwrapWritable<SvelteFlowStore['connectionLineType']>;
+  connectionRadius?: UnwrapWritable<SvelteFlowStore['connectionRadius']>;
+  selectionMode?: UnwrapWritable<SvelteFlowStore['selectionMode']>;
+  snapGrid?: UnwrapWritable<SvelteFlowStore['snapGrid']>;
+  defaultMarkerColor?: UnwrapWritable<SvelteFlowStore['defaultMarkerColor']>;
+  nodesDraggable?: UnwrapWritable<SvelteFlowStore['nodesDraggable']>;
+  nodesConnectable?: UnwrapWritable<SvelteFlowStore['nodesConnectable']>;
+  elementsSelectable?: UnwrapWritable<SvelteFlowStore['elementsSelectable']>;
+  isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
+};
+
+export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
+  getKeys(keys).forEach((prop) => {
+    const update = keys[prop];
+    if (update !== undefined) {
+      // @ts-ignore
+      store[prop].set(update);
+    }
+  });
+}