WIP: migrated store and useSvelteFlow hook to signals & solved state propagation for provider

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -27,13 +27,17 @@
     class: className
   }: BackgroundProps = $props();
 
-  const { viewport, flowId } = useStore();
+  const store = useStore();
+  const { viewport } = store;
+
+  $inspect($viewport);
+
   const patternSize = size ?? defaultSize[variant!];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
   const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
 
-  let patternId = $derived(`background-pattern-${$flowId}-${id ?? ''}`);
+  let patternId = $derived(`background-pattern-${store.flowId}-${id ?? ''}`);
   let scaledGap = $derived([gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]);
   let scaledSize = $derived(patternSize * $viewport.zoom);
   let patternDimensions = $derived(

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -32,17 +32,8 @@
     after
   }: ControlsProps = $props();
 
-  const {
-    viewport,
-    minZoom,
-    maxZoom,
-    nodesDraggable,
-    nodesConnectable,
-    elementsSelectable,
-    zoomIn,
-    zoomOut,
-    fitView
-  } = useStore();
+  const store = useStore();
+  const { viewport } = store;
 
   const buttonProps = {
     bgColor: buttonBgColor,
@@ -52,29 +43,31 @@
     borderColor: buttonBorderColor
   };
 
-  let isInteractive = $state($nodesDraggable || $nodesConnectable || $elementsSelectable);
-  let minZoomReached = $derived($viewport.zoom <= $minZoom);
-  let maxZoomReached = $derived($viewport.zoom >= $maxZoom);
+  let isInteractive = $state(
+    store.nodesDraggable || store.nodesConnectable || store.elementsSelectable
+  );
+  let minZoomReached = $derived($viewport.zoom <= store.minZoom);
+  let maxZoomReached = $derived($viewport.zoom >= store.maxZoom);
   let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {
-    zoomIn();
+    store.zoomIn();
   };
 
   const onZoomOutHandler = () => {
-    zoomOut();
+    store.zoomOut();
   };
 
   const onFitViewHandler = () => {
-    fitView(fitViewOptions);
+    store.fitView(fitViewOptions);
   };
 
   const onToggleInteractivity = () => {
     isInteractive = !isInteractive;
 
-    nodesDraggable.set(isInteractive);
-    nodesConnectable.set(isInteractive);
-    elementsSelectable.set(isInteractive);
+    store.nodesDraggable = isInteractive;
+    store.nodesConnectable = isInteractive;
+    store.elementsSelectable = isInteractive;
   };
 </script>
 

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -42,16 +42,10 @@
     class: className
   }: MiniMapProps = $props();
 
-  const {
-    nodes,
-    nodeLookup,
-    viewport,
-    width: containerWidth,
-    height: containerHeight,
-    flowId,
-    panZoom,
-    translateExtent
-  } = useStore();
+  let store = useStore();
+  const { viewport } = store;
+
+  let nodes = $derived(store.nodes);
 
   const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -59,17 +53,20 @@
   const shapeRendering =
     // @ts-expect-error - TS doesn't know about chrome
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
-  const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
+
+  let labelledBy = $derived(`svelte-flow__minimap-desc-${store.flowId}`);
 
   // TODO: simplify this
   let viewBB = $derived({
     x: -$viewport.x / $viewport.zoom,
     y: -$viewport.y / $viewport.zoom,
-    width: $containerWidth / $viewport.zoom,
-    height: $containerHeight / $viewport.zoom
+    width: store.width / $viewport.zoom,
+    height: store.height / $viewport.zoom
   });
   let boundingRect = $derived(
-    $nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds($nodeLookup), viewBB) : viewBB
+    store.nodeLookup.size > 0
+      ? getBoundsOfRects(getInternalNodesBounds(store.nodeLookup), viewBB)
+      : viewBB
   );
   let scaledWidth = $derived(boundingRect.width / width);
   let scaledHeight = $derived(boundingRect.height / height);
@@ -91,7 +88,7 @@
   class={cc(['svelte-flow__minimap', className])}
   data-testid="svelte-flow__minimap"
 >
-  {#if $panZoom}
+  {#if store.panZoom}
     <svg
       {width}
       {height}
@@ -105,12 +102,12 @@
         ? maskStrokeWidth * viewScale
         : undefined}
       use:interactive={{
-        panZoom: $panZoom,
-        viewport,
+        panZoom: store.panZoom,
+        viewport: store.viewport,
         getViewScale,
-        translateExtent: $translateExtent,
-        width: $containerWidth,
-        height: $containerHeight,
+        translateExtent: store.translateExtent,
+        width: store.width,
+        height: store.height,
         inversePan,
         zoomStep,
         pannable,
@@ -120,7 +117,7 @@
       {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
 
       {#each $nodes as userNode (userNode.id)}
-        {@const node = $nodeLookup.get(userNode.id)}
+        {@const node = store.nodeLookup.get(userNode.id)}
         {#if node && nodeHasDimensions(node)}
           {@const nodeDimesions = getNodeDimensions(node)}
           <MinimapNode

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -4,7 +4,7 @@
 
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
-  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
+  import { useSvelteFlow } from '$lib/hooks';
 
   import type { InternalNode } from '$lib/types';
   import type { NodeToolbarProps } from './types';