feat(svelte): add updateNodeInternals

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -27,7 +27,6 @@ export function useSvelteFlow(): {
   nodes: SvelteFlowStore['nodes'];
   edges: SvelteFlowStore['edges'];
 } {
-  // how to get the new context here? fit view doesn't work, because the store is not updated (uses old nodes store)
   const {
     zoomIn,
     zoomOut,

packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts

@@ -0,0 +1,28 @@
+import { get } from 'svelte/store';
+import type { UpdateNodeInternals, NodeDimensionUpdate } from '@xyflow/system';
+
+import { useStore } from '$lib/store';
+
+export function useUpdateNodeInternals(): UpdateNodeInternals {
+  const { domNode, updateNodeDimensions } = useStore();
+
+  // @todo: do we want to add this to system?
+  const updateInternals = (id: string | string[]) => {
+    const updateIds = Array.isArray(id) ? id : [id];
+    const updates = updateIds.reduce<NodeDimensionUpdate[]>((res, updateId) => {
+      const nodeElement = get(domNode)?.querySelector(
+        `.svelte-flow__node[data-id="${updateId}"]`
+      ) as HTMLDivElement;
+
+      if (nodeElement) {
+        res.push({ id: updateId, nodeElement, forceUpdate: true });
+      }
+
+      return res;
+    }, []);
+
+    requestAnimationFrame(() => updateNodeDimensions(updates));
+  };
+
+  return updateInternals;
+}

packages/svelte/src/lib/index.ts

@@ -20,6 +20,7 @@ export { useStore } from '$lib/store';
 // utils
 export * from '$lib/utils';
 export * from '$lib/hooks/useSvelteFlow';
+export * from '$lib/hooks/useUpdateNodeInternals';
 
 // types
 export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';