migrate all components

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -7,7 +7,7 @@
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
-  import type { NodeWrapperProps } from './types';
+  import type { ConnectableContext, NodeWrapperProps } from './types';
   import { getNodeInlineStyleDimensions } from './utils';
   import type { NodeEvents } from '$lib/types';
 
@@ -64,14 +64,20 @@
   let nodeRef: HTMLDivElement | null = $state(null);
   let prevNodeRef: HTMLDivElement | null = null;
 
-  const connectableStore = writable(connectable);
-
   let prevType: string | undefined;
   let prevSourcePosition: Position | undefined;
   let prevTargetPosition: Position | undefined;
 
   let NodeComponent = $derived($nodeTypes[type] ?? DefaultNode);
 
+  let connectableContext: ConnectableContext = {
+    get value() {
+      return connectable;
+    }
+  };
+  setContext('svelteflow__node_connectable', connectableContext);
+  setContext('svelteflow__node_id', id);
+
   if (process.env.NODE_ENV === 'development') {
     $effect(() => {
       const valid = !!$nodeTypes[type];
@@ -92,10 +98,6 @@
     })
   );
 
-  $effect(() => {
-    connectableStore.set(!!connectable);
-  });
-
   $effect(() => {
     // if type, sourcePosition or targetPosition changes,
     // we need to re-calculate the handle positions
@@ -128,9 +130,6 @@
     prevTargetPosition = targetPosition;
   });
 
-  setContext('svelteflow__node_id', id);
-  setContext('svelteflow__node_connectable', connectableStore);
-
   // TODO: extract this part!
   $effect(() => {
     // TODO: HOLY MOLY! changing the order of the initialized breaks effect subscriptions
@@ -215,7 +214,7 @@
       {dragHandle}
       {parentId}
       {type}
-      isConnectable={$connectableStore}
+      isConnectable={connectable}
       positionAbsoluteX={positionX}
       positionAbsoluteY={positionY}
       {width}