chore(svelte): use prettier

packages/svelte/src/lib/components/Attribution/Attribution.svelte

@@ -8,14 +8,18 @@
   export let position: AttributionProps['position'] = 'bottom-right';
 </script>
 
-
 {#if !proOptions?.hideAttribution}
   <Panel
-    position={position}
+    {position}
     class="svelte-flow__attribution"
     data-message="Please only hide this attribution when you are subscribed to Svelte Flow Pro: https://pro.reactflow.dev"
   >
-    <a href="https://reactflow.dev/svelte" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">
+    <a
+      href="https://reactflow.dev/svelte"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Svelte Flow attribution"
+    >
       Svelte Flow
     </a>
   </Panel>
@@ -33,4 +37,4 @@
     text-decoration: none;
     color: #999;
   }
-</style>
+</style>

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -18,12 +18,12 @@
 
 <path
   d={path}
-  id={id}
+  {id}
   fill="none"
   class="svelte-flow__edge-path"
   marker-start={markerStart}
   marker-end={markerEnd}
-  style={style}
+  {style}
 />
 
 {#if interactionWidth}

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -29,8 +29,8 @@
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
   export let targetHandleId: $$Props['targetHandleId'] = undefined;
-  
-   // @ todo: support edge updates
+
+  // @ todo: support edge updates
 
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
   const dispatch = createEventDispatcher();
@@ -45,19 +45,13 @@
       addSelectedEdges([id]);
     }
 
-    const edge = $edges.find(e => e.id === id);
+    const edge = $edges.find((e) => e.id === id);
     dispatch('edge:click', edge);
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<g
-  class="svelte-flow__edge"
-  class:animated
-  class:selected
-  data-id={id}
-  on:click={onClick}
->
+<g class="svelte-flow__edge" class:animated class:selected data-id={id} on:click={onClick}>
   <svelte:component
     this={edgeComponent}
     {id}

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -25,7 +25,7 @@
 
   const handleId = id || null;
   const dispatch = createEventDispatcher();
-  
+
   const store = useStore();
   const {
     connectionMode,
@@ -38,7 +38,7 @@
     addEdge,
     panBy,
     cancelConnection,
-    updateConnection,
+    updateConnection
   } = store;
 
   function dispatchEvent(eventName: string, params?: Connection) {
@@ -47,7 +47,7 @@
 
   function onConnectExtended(params: Connection) {
     addEdge(params);
-    dispatchEvent('connect', params)
+    dispatchEvent('connect', params);
   }
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -69,7 +69,7 @@
         cancelConnection,
         panBy,
         onConnect: onConnectExtended,
-        getTransform: () => $transform,
+        getTransform: () => $transform
       });
     }
   }

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  
   import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
   import { errorMessages, type NodeProps } from '@xyflow/system';
@@ -59,7 +58,7 @@
   });
 
   function dispatchEvent(eventName: string) {
-    const node = $nodes.find(n => n.id === id);
+    const node = $nodes.find((n) => n.id === id);
     dispatch(eventName, node);
   }
 
@@ -69,13 +68,20 @@
       addSelectedNodes([id]);
     }
 
-    dispatchEvent('node:click')
+    dispatchEvent('node:click');
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  use:drag={{ nodeId: id, isSelectable: selectable, disabled: false, handleSelector: undefined, noDragClassName: 'nodrag', store }}
+  use:drag={{
+    nodeId: id,
+    isSelectable: selectable,
+    disabled: false,
+    handleSelector: undefined,
+    noDragClassName: 'nodrag',
+    store
+  }}
   bind:this={nodeRef}
   data-id={id}
   class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}

packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  
+
   import { createStoreContext } from '$lib/store';
-  
+
   const store = createStoreContext();
 
   onDestroy(() => {

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -28,4 +28,3 @@
   interactionWidth={$$props.interactionWidth}
   style={$$props.style}
 />
-

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -26,4 +26,3 @@
   interactionWidth={$$props.interactionWidth}
   style={$$props.style}
 />
-

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -17,4 +17,3 @@
 <Handle type="target" position={targetPosition} on:connect:start on:connect on:connect:end />
 {data?.label}
 <Handle type="source" position={sourcePosition} on:connect:start on:connect on:connect:end />
-

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -14,7 +14,6 @@
   <MarkerDefinition />
 </svg>
 
-
 <style>
   .svelte-flow__edges {
     width: 100%;

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte

@@ -8,19 +8,19 @@
   export let width: $$Props['width'] = 12.5;
   export let height: $$Props['height'] = 12.5;
   export let markerUnits: $$Props['markerUnits'] = 'strokeWidth';
-  export let orient: $$Props['orient']= 'auto-start-reverse';
+  export let orient: $$Props['orient'] = 'auto-start-reverse';
   export let color: $$Props['color'] = undefined;
   export let strokeWidth: $$Props['strokeWidth'] = undefined;
 </script>
 
 <marker
   class="svelte-flow__arrowhead"
-  id={id}
+  {id}
   markerWidth={`${width}`}
   markerHeight={`${height}`}
   viewBox="-10 -10 20 20"
-  markerUnits={markerUnits}
-  orient={orient}
+  {markerUnits}
+  {orient}
   refX="0"
   refY="0"
 >
@@ -43,4 +43,4 @@
       points="-5,-4 0,0 -5,4 -5,-4"
     />
   {/if}
-</marker>
+</marker>

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <defs>
-  {#each $markers as marker(marker.id)}
+  {#each $markers as marker (marker.id)}
     <Marker {...marker} />
   {/each}
-</defs>
+</defs>

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -5,7 +5,8 @@
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
 
-  const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore();
+  const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } =
+    useStore();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
@@ -38,8 +39,14 @@
       data={node.data}
       selected={node.selected}
       draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
-      selectable={!!(node.selectable || ($elementsSelectable && typeof node.selectable === 'undefined'))}
-      connectable={!!(node.connectable || ($nodesConnectable && typeof node.connectable === 'undefined'))}
+      selectable={!!(
+        node.selectable ||
+        ($elementsSelectable && typeof node.selectable === 'undefined')
+      )}
+      connectable={!!(
+        node.connectable ||
+        ($nodesConnectable && typeof node.connectable === 'undefined')
+      )}
       positionAbsolute={node.positionAbsolute}
       positionOrigin={posOrigin}
       isParent={!!node[internalsSymbol]?.isParent}

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -30,8 +30,8 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { SelectionMode, getEventPosition, getNodesInside  } from '@xyflow/system';
-  
+  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
+
   import { useStore } from '$lib/store';
   import { getConnectedEdges } from '$lib/utils';
   import type { Node, Edge } from '$lib/types';
@@ -52,7 +52,7 @@
     selectionRectMode,
     selectionKeyPressed,
     selectionMode,
-    unselectNodesAndEdges,
+    unselectNodesAndEdges
   } = useStore();
 
   let container: HTMLDivElement;
@@ -166,7 +166,6 @@
 
     dispatch('pane:contextmenu', event);
   };
-
 </script>
 
 <div

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

@@ -25,7 +25,7 @@
   export let fitView: $$Props['fitView'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: Viewport = { x:0, y: 0, zoom: 1 };
+  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
@@ -66,8 +66,8 @@
     store.height.set(height);
     store.domNode.set(domNode);
 
-    store.syncNodeStores(nodes)
-    store.syncEdgeStores(edges)
+    store.syncNodeStores(nodes);
+    store.syncEdgeStores(edges);
 
     if (fitView !== undefined) {
       store.fitViewOnInit.set(fitView);
@@ -78,15 +78,15 @@
       edgeTypes,
       minZoom,
       maxZoom,
-      translateExtent,
+      translateExtent
     });
 
     return () => {
       store.reset();
-    }
+    };
   });
 
-  // this updates the store for simple changes 
+  // this updates the store for simple changes
   // where the prop names equals the store name
   $: {
     const updatableProps: UpdatableStoreProps = {
@@ -99,10 +99,10 @@
       nodesDraggable,
       nodesConnectable,
       elementsSelectable,
-      isValidConnection,
+      isValidConnection
     };
 
-   updateStoreByKeys(store, updatableProps);
+    updateStoreByKeys(store, updatableProps);
   }
 
   $: updateStore(store, {

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

@@ -64,6 +64,7 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr
   getKeys(keys).forEach((prop) => {
     const update = keys[prop];
     if (update !== undefined) {
+      // @todo: how to fix this TS error?
       // @ts-ignore
       store[prop].set(update);
     }

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -1,23 +1,23 @@
-<script lang="ts"> 
+<script lang="ts">
   import { PanOnScrollMode } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
 
-  type $$Props = ZoomProps; 
+  type $$Props = ZoomProps;
 
   export let initialViewport: $$Props['initialViewport'];
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let panOnScrollMode: $$Props['panOnScrollMode'];
-  export let preventScrolling: $$Props['preventScrolling'];;
-  export let zoomOnScroll: $$Props['zoomOnScroll'];;
-  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];;
-  export let zoomOnPinch: $$Props['zoomOnPinch'];;
+  export let preventScrolling: $$Props['preventScrolling'];
+  export let zoomOnScroll: $$Props['zoomOnScroll'];
+  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];
+  export let zoomOnPinch: $$Props['zoomOnPinch'];
   export let panOnDrag: $$Props['panOnDrag'];
-  export let panOnScroll: $$Props['panOnScroll'];;
+  export let panOnScroll: $$Props['panOnScroll'];
 
   const {
     transform,
@@ -29,35 +29,38 @@
     translateExtent,
     lib
   } = useStore();
-  
+
   $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
 </script>
 
-<div class="svelte-flow__zoom" use:zoom={{
-  transform,
-  minZoom: $minZoom,
-  maxZoom: $maxZoom,
-  initialViewport: viewPort,
-  dragging,
-  panZoom,
-  onPanZoomStart: onMoveStart,
-  onPanZoom: onMove,
-  onPanZoomEnd: onMoveEnd,
-  zoomOnScroll,
-  zoomOnDoubleClick,
-  zoomOnPinch,
-  panOnScroll,
-  panOnDrag,
-  panOnScrollSpeed: 0.5,
-  panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
-  zoomActivationKeyPressed: false,
-  preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
-  noPanClassName: 'nopan',
-  noWheelClassName: 'nowheel',
-  userSelectionActive: $selectionKeyPressed,
-  translateExtent: $translateExtent,
-  lib: $lib
-}}>
+<div
+  class="svelte-flow__zoom"
+  use:zoom={{
+    transform,
+    minZoom: $minZoom,
+    maxZoom: $maxZoom,
+    initialViewport: viewPort,
+    dragging,
+    panZoom,
+    onPanZoomStart: onMoveStart,
+    onPanZoom: onMove,
+    onPanZoomEnd: onMoveEnd,
+    zoomOnScroll,
+    zoomOnDoubleClick,
+    zoomOnPinch,
+    panOnScroll,
+    panOnDrag,
+    panOnScrollSpeed: 0.5,
+    panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
+    zoomActivationKeyPressed: false,
+    preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
+    noPanClassName: 'nopan',
+    noWheelClassName: 'nowheel',
+    userSelectionActive: $selectionKeyPressed,
+    translateExtent: $translateExtent,
+    lib: $lib
+  }}
+>
   <slot />
 </div>
 

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

@@ -20,7 +20,7 @@
   import { useStore } from '$lib/store';
   import { BackgroundVariant, type BackgroundProps } from './types';
 
-  type $$Props = BackgroundProps; 
+  type $$Props = BackgroundProps;
 
   export let variant: $$Props['variant'] = BackgroundVariant.Dots;
   export let gap: $$Props['gap'] = 20;
@@ -47,7 +47,11 @@
     : [patternDimensions[0] / 2, patternDimensions[1] / 2];
 </script>
 
-<svg class={cc(['svelte-flow__background', className])} {style} data-testid="svelte-flow__background">
+<svg
+  class={cc(['svelte-flow__background', className])}
+  {style}
+  data-testid="svelte-flow__background"
+>
   <pattern
     id={patternId}
     x={$transform[0] % scaledGap[0]}

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

@@ -18,7 +18,15 @@
   export let showInteractive: $$Props['showInteractive'] = true;
 
   const {
-    zoomIn, zoomOut, fitView, transform, minZoom, maxZoom, nodesDraggable, nodesConnectable, elementsSelectable
+    zoomIn,
+    zoomOut,
+    fitView,
+    transform,
+    minZoom,
+    maxZoom,
+    nodesDraggable,
+    nodesConnectable,
+    elementsSelectable
   } = useStore();
 
   $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
@@ -45,7 +53,7 @@
     elementsSelectable.set(isInteractive);
   };
 </script>
- 
+
 <Panel class="svelte-flow__controls" {position} data-testid="svelte-flow__controls">
   {#if showZoom}
     <ControlButton

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

@@ -12,12 +12,12 @@
   import { useStore } from '$lib/store';
   import { Panel } from '$lib/container/Panel';
   import MinimapNode from './MinimapNode.svelte';
-  import interactive from './interactive'
+  import interactive from './interactive';
   import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
 
   type $$Props = MiniMapProps;
 
-  let position: $$Props['position']  = 'bottom-right';
+  let position: $$Props['position'] = 'bottom-right';
   let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
   let style: $$Props['style'] = '';
   let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
@@ -32,7 +32,7 @@
   let width: $$Props['width'] = undefined;
   let height: $$Props['height'] = undefined;
   let pannable: $$Props['pannable'] = true;
-  let zoomable: $$Props['zoomable'] = true;  
+  let zoomable: $$Props['zoomable'] = true;
   let inversePan: $$Props['inversePan'] = undefined;
   let zoomStep: $$Props['zoomStep'] = undefined;
 
@@ -41,8 +41,16 @@
 
   const defaultWidth = 200;
   const defaultHeight = 150;
-  const { nodes, transform, width: containerWidth, height: containerHeight, flowId, panZoom, translateExtent } = useStore();
-  
+  const {
+    nodes,
+    transform,
+    width: containerWidth,
+    height: containerHeight,
+    flowId,
+    panZoom,
+    translateExtent
+  } = useStore();
+
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
@@ -56,8 +64,7 @@
     width: $containerWidth / $transform[2],
     height: $containerHeight / $transform[2]
   };
-  $: boundingRect =
-    $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
+  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
   $: elementWidth = width ?? defaultWidth;
   $: elementHeight = height ?? defaultHeight;
   $: scaledWidth = boundingRect.width / elementWidth;
@@ -97,7 +104,7 @@
         inversePan,
         zoomStep,
         pannable,
-        zoomable,
+        zoomable
       }}
     >
       {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
@@ -122,9 +129,9 @@
       {/each}
       <path
         class="svelte-flow__minimap-mask"
-        d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${
-          -viewboxWidth - offset * 2
-        }z
+        d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${
+          viewboxHeight + offset * 2
+        }h${-viewboxWidth - offset * 2}z
       M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
         fill={maskColor}
         fill-rule="evenodd"