feat(svelte): reactive nodes

packages/svelte/src/lib/container/Panel/Panel.d.ts

@@ -0,0 +1,7 @@
+import type { PanelPosition } from '@reactflow/system';
+
+export type PanelProps = {
+	position?: PanelPosition;
+	style?: string;
+	class?: string;
+};

packages/svelte/src/lib/container/Panel/index.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { PanelPosition } from '@reactflow/system';
   import cc from 'classcat';
+  import type { PanelProps } from './Panel';
 
-  export let position: PanelPosition = 'top-right';
-  export let style: string = '';
+  interface $$Props extends PanelProps {}
 
-  let className: string;
+  export let position: $$Props['position'] = 'top-right';
+  export let style: $$Props['style'] = '';
+  let className: $$Props['class'] = undefined;
   export { className as class }
 
   $: positionClasses = `${position}`.split('-');

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

@@ -11,21 +11,21 @@
   import UserSelection from '$lib/components/UserSelection/index.svelte';
   import NodeSelection from '$lib/components/NodeSelection/index.svelte';
   import KeyHandler from '$lib/components/KeyHandler/index.svelte';
-	import type { NodeTypes, Node, Edge } from '$lib/types';
+	import type { SvelteFlowProps } from '$lib/types';
 
-  export let id: string = '1';
-  export let nodes: Node[] = [];
-  export let edges: Edge[] = [];
-  export let fitView: boolean = false;
-  export let nodeTypes: NodeTypes;
-  let className: string = '';
+  interface $$Props extends SvelteFlowProps {}
+
+  export let id: $$Props['id'] = '1';
+  export let nodes: $$Props['nodes'] = [];
+  export let edges: $$Props['edges'] = [];
+  export let fitView: $$Props['fitView'] = undefined;
+  export let nodeTypes: $$Props['nodeTypes'] = undefined;
+  let className: $$Props['class'] = undefined;
   export { className as class };
 
   let domNode: Element;
 
   const store = createStore({
-    nodes,
-    edges,
     fitView,
     nodeTypes
   });
@@ -38,7 +38,20 @@
     const { width, height } = domNode.getBoundingClientRect();
     store.widthStore.set(width);
     store.heightStore.set(height);
-  })
+
+    // @todo: is this a svelte way for two way binding?
+    store.nodesStore.subscribe((ns) => {
+      nodes = ns;
+    });
+  });
+
+  $: {
+    store.setNodes(nodes);
+  }
+
+  $: {
+    store.setEdges(edges);
+  }
 </script>
 
 <div