chore(svelte): use prettier

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>