chore(svelte): run prettier

packages/svelte/.prettierrc

@@ -1,5 +1,4 @@
 {
-	"useTabs": true,
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -10,11 +10,7 @@
 </script>
 
 {#if $connectionPath}
-  <svg
+  <svg width={$width} height={$height} class="react-flow__connectionline">
-    width={$width}
-    height={$height}
-    class="react-flow__connectionline"
-  >
     <g class={cc(['react-flow__connection', $connection.status])}>
       <path d={$connectionPath} fill="none" class="react-flow__connection-path" />
     </g>

packages/svelte/src/lib/components/EdgeLabelRenderer/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import portal from '$lib/actions/portal';
 
-  type $$Props = {}
+  type $$Props = {};
 </script>
 
 <div use:portal={'.react-flow__edgelabel-renderer'}>

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

@@ -38,7 +38,7 @@
     // @todo add props
     // onConnectAction?.(edgeParams);
     // onConnect?.(edgeParams);
-    };
+  }
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
     const isMouseTriggered = isMouseEvent(event);
@@ -58,7 +58,7 @@
         onConnect: onConnectExtended,
         updateConnection,
         cancelConnection,
-          panBy,
+        panBy
       });
     }
 
@@ -67,7 +67,7 @@
     // } else {
     //   onTouchStart?.(event);
     // }
-    };
+  }
 </script>
 
 <div
@@ -92,7 +92,6 @@
   <slot />
 </div>
 
-
 <style>
   .react-flow__handle {
     position: absolute;

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -2,7 +2,7 @@
   import { shortcut } from '@svelte-put/shortcut';
 
   import { useStore } from '$lib/store';
-  import type { KeyHandlerProps } from './KeyHandler'
+  import type { KeyHandlerProps } from './KeyHandler';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
 
   const { selectionKeyPressed, deleteKeyPressed } = useStore();
@@ -25,19 +25,43 @@
 
 <svelte:window
   use:shortcut={{
-    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(true) }],
+    trigger: [
+      {
+        key: selectionKeyString,
+        modifier: selectionKeyModifier,
+        callback: () => selectionKeyPressed.set(true)
+      }
+    ],
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(false) }],
+    trigger: [
+      {
+        key: selectionKeyString,
+        modifier: selectionKeyModifier,
+        callback: () => selectionKeyPressed.set(false)
+      }
+    ],
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(true) }],
+    trigger: [
+      {
+        key: deleteKeyString,
+        modifier: deleteKeyModifier,
+        callback: () => deleteKeyPressed.set(true)
+      }
+    ],
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(false) }],
+    trigger: [
+      {
+        key: deleteKeyString,
+        modifier: deleteKeyModifier,
+        callback: () => deleteKeyPressed.set(false)
+      }
+    ],
     type: 'keyup'
   }}
 />

packages/svelte/src/lib/components/NodeSelection/index.svelte

@@ -3,11 +3,11 @@
 
   import { useStore } from '$lib/store';
   import Selection from '$lib/components/Selection/index.svelte';
-  import drag  from '$lib/actions/drag'
+  import drag from '$lib/actions/drag';
 
   const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();
 
-  $: selectedNodes = $nodes.filter(n => n.selected);
+  $: selectedNodes = $nodes.filter((n) => n.selected);
   $: rect = getRectOfNodes(selectedNodes, $nodeOrigin);
 </script>
 

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

@@ -11,11 +11,7 @@
   export let interactionWidth: $$Props['interactionWidth'] = 20;
 </script>
 
-<path
+<path d={path} fill="none" class="react-flow__edge-path" />
-  d={path}
-  fill="none"
-  class="react-flow__edge-path"
-/>
 
 {#if interactionWidth}
   <path

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

@@ -12,13 +12,8 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
+    targetPosition: $$props.targetPosition
   });
 </script>
 
-<BaseEdge
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
-  {path}
-  {labelX}
-  {labelY}
-  {...$$props}
-/>

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

@@ -26,11 +26,7 @@
   const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
 </script>
 
-<g
+<g class="react-flow__edge" class:animated data-id={id}>
-  class="react-flow__edge"
-  class:animated
-  data-id={id}
->
   <svelte:component
     this={edgeComponent}
     {id}

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

@@ -12,13 +12,8 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
+    targetPosition: $$props.targetPosition
   });
 </script>
 
-<BaseEdge
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
-  {path}
-  {labelX}
-  {labelY}
-  {...$$props}
-/>

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

@@ -10,13 +10,8 @@
     sourceX: $$props.sourceX,
     sourceY: $$props.sourceY,
     targetX: $$props.targetX,
-    targetY: $$props.targetY,
+    targetY: $$props.targetY
   });
 </script>
 
-<BaseEdge
+<BaseEdge {path} {labelX} {labelY} {...$$props} />
-  {path}
-  {labelX}
-  {labelY}
-  {...$$props}
-/>

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

@@ -10,4 +10,3 @@
 
 {data?.label}
 <Handle type="source" position={sourcePosition} />
-

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

@@ -3,7 +3,7 @@
   import cc from 'classcat';
   import { type XYPosition, Position } from '@reactflow/system';
 
-  import drag  from '$lib/actions/drag'
+  import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
   import DefaultNode from './DefaultNode.svelte';
   import type { WrapNodeProps, NodeProps } from '$lib/types';
@@ -29,7 +29,8 @@
   let nodeRef: HTMLDivElement;
 
   const { nodes, transform, nodeTypes, updateNodePositions, addSelectedNodes } = useStore();
-  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypes[type] || DefaultNode;
+  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
+    $nodeTypes[type] || DefaultNode;
   const isSelectable = true;
   const selectNodesOnDrag = false;
   const isDraggable = true;
@@ -41,7 +42,7 @@
 
     return () => {
       resizeObserver?.unobserve(nodeRef);
-    }
+    };
   });
 
   function onSelectNodeHandler(event: MouseEvent) {
@@ -54,15 +55,15 @@
     //   const node = store.getState().nodeInternals.get(id)!;
     //   onClick(event, { ...node });
     // }
-  };
+  }
 </script>
 
 <div
   use:drag={{ nodeId: id, nodes, transform, updateNodePositions }}
   class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
   class:initializing={!width && !height}
-  class:dragging={dragging}
+  class:dragging
-  class:selected={selected}
+  class:selected
   bind:this={nodeRef}
   on:click={onSelectNodeHandler}
   style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}

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

@@ -10,4 +10,3 @@
 
 {data?.label}
 <Handle type="target" position={targetPosition} />
-

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

@@ -5,11 +5,7 @@
   const { edgesLayouted, width, height } = useStore();
 </script>
 
-
+<svg width={$width} height={$height} class="react-flow__edges">
-<svg
-  width={$width}
-  height={$height}
-  class="react-flow__edges"
   {#each $edgesLayouted as edge (edge.id)}
     <EdgeWrapper {...edge} />
   {/each}

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

@@ -5,12 +5,15 @@
   import { useStore } from '$lib/store';
 
   const { nodes, updateNodeDimensions } = useStore();
-  const resizeObserver: ResizeObserver | null = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver((entries: ResizeObserverEntry[]) => {
+  const resizeObserver: ResizeObserver | null =
+    typeof ResizeObserver === 'undefined'
+      ? null
+      : new ResizeObserver((entries: ResizeObserverEntry[]) => {
           const updates = entries.map((entry: ResizeObserverEntry) => ({
             id: entry.target.getAttribute('data-id') as string,
             nodeElement: entry.target as HTMLDivElement,
-      forceUpdate: true,
+            forceUpdate: true
-    }))
+          }));
 
           updateNodeDimensions(updates);
         });

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

@@ -10,7 +10,7 @@
 
       handler?.(event);
     };
-  };
+  }
 
   export function toggleSelected<Item extends Node | Edge>(ids: string[]) {
     return (item: Item) => {
@@ -19,12 +19,12 @@
       if (item.selected !== isSelected) {
         return {
           ...item,
-          selected: isSelected,
+          selected: isSelected
         };
       }
 
       return item;
-    }
+    };
   }
 </script>
 
@@ -33,25 +33,34 @@
   import { SelectionMode, type Node, type Edge } from '@reactflow/system';
   import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
 
-  const { nodes, edges, transform, nodeOrigin, dragging, selectionRect, selectionRectMode, selectionKeyPressed, resetSelectedElements } = useStore();
+  const {
+    nodes,
+    edges,
+    transform,
+    nodeOrigin,
+    dragging,
+    selectionRect,
+    selectionRectMode,
+    selectionKeyPressed,
+    resetSelectedElements
+  } = useStore();
 
   // @todo take from props
   const elementsSelectable = true;
-  const selectionMode = SelectionMode.Partial
+  const selectionMode = SelectionMode.Partial;
 
   let container: HTMLDivElement;
-  let containerBounds: DOMRect | null = null
+  let containerBounds: DOMRect | null = null;
   let selectedNodes: Node[] = [];
 
   $: isSelecting = $selectionKeyPressed;
   $: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');
 
-
   function onClick(event: MouseEvent) {
     // onPaneClick?.(event);
 
     resetSelectedElements();
-    selectionRectMode.set(null)
+    selectionRectMode.set(null);
   }
 
   function onMouseDown(event: MouseEvent) {
@@ -80,11 +89,8 @@
       y
     });
 
-   
     // onSelectionStart?.(event);
-  };
+  }
-
-
 
   function onMouseMove(event: MouseEvent) {
     if (!isSelecting || !containerBounds || !$selectionRect) {
@@ -98,11 +104,11 @@
       x: mousePos.x < startX ? mousePos.x : startX,
       y: mousePos.y < startY ? mousePos.y : startY,
       width: Math.abs(mousePos.x - startX),
-      height: Math.abs(mousePos.y - startY),
+      height: Math.abs(mousePos.y - startY)
     };
 
     selectedNodes = getNodesInside(
-      new Map($nodes.map(node => [node.id, node])),
+      new Map($nodes.map((node) => [node.id, node])),
       nextUserSelectRect,
       $transform,
       selectionMode === SelectionMode.Partial,
@@ -112,8 +118,8 @@
     const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
     const selectedNodeIds = selectedNodes.map((n) => n.id);
 
-    nodes.update(nodes => nodes.map(toggleSelected(selectedNodeIds)));
+    nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
-    edges.update(edges => edges.map(toggleSelected(selectedEdgeIds)));
+    edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
 
     selectionRectMode.set('user');
     selectionRect.set(nextUserSelectRect);
@@ -135,7 +141,6 @@
       selectionRectMode.set('nodes');
     }
 
-    
     // onSelectionEnd?.(event);
   }
 

packages/svelte/src/lib/container/Panel/index.svelte

@@ -7,15 +7,12 @@
   export let position: $$Props['position'] = 'top-right';
   export let style: $$Props['style'] = '';
   let className: $$Props['class'] = undefined;
-  export { className as class }
+  export { className as class };
 
   $: positionClasses = `${position}`.split('-');
 </script>
 
-<div
+<div class={cc(['react-flow__panel', className, ...positionClasses])} {style}>
-  class={cc(['react-flow__panel', className, ...positionClasses])}
-  style={style}
->
   <slot />
 </div>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { setContext, onMount } from 'svelte'
+  import { setContext, onMount } from 'svelte';
   import cc from 'classcat';
 
   import { key, createStore } from '$lib/store';
@@ -51,7 +51,6 @@
     });
   });
 
-
   // $: {
   //   const updatableProps = {
   //     defaultEdgeOptions,
@@ -86,7 +85,7 @@
   {...$$restProps}
   class={cc(['react-flow', className])}
   data-testid="rf__wrapper"
-  id={id}
+  {id}
   bind:this={domNode}
 >
   <KeyHandler {selectionKey} {deleteKey} />

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

@@ -18,13 +18,13 @@
   const defaultColor = {
     [BackgroundVariant.Dots]: '#91919a',
     [BackgroundVariant.Lines]: '#eee',
-    [BackgroundVariant.Cross]: '#e2e2e2',
+    [BackgroundVariant.Cross]: '#e2e2e2'
   };
 
   const defaultSize = {
     [BackgroundVariant.Dots]: 1,
     [BackgroundVariant.Lines]: 1,
-    [BackgroundVariant.Cross]: 6,
+    [BackgroundVariant.Cross]: 6
   };
 
   const { transform, id } = useStore();
@@ -56,7 +56,7 @@
     {#if isDots}
       <DotPattern color={patternColor} radius={scaledSize / 2} />
     {:else}
-      <LinePattern dimensions={patternDimensions } color={patternColor} lineWidth={lineWidth} />
+      <LinePattern dimensions={patternDimensions} color={patternColor} {lineWidth} />
     {/if}
   </pattern>
   <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let radius = 5;
-  export let color = "#000";
+  export let color = '#000';
 </script>
 
 <circle cx={radius} cy={radius} r={radius} fill={color} />

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

@@ -1,13 +1,11 @@
 <script lang="ts">
   export let lineWidth = 1;
-  export let color = "#777";
+  export let color = '#777';
   export let dimensions: [number, number];
 </script>
 
 <path
   stroke={color}
   stroke-width={lineWidth}
-  d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
+  d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
-    dimensions[0]
-  }`}
 />

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

@@ -3,10 +3,15 @@
 
   let className: string;
 
-  export { className as class }
+  export { className as class };
 </script>
 
-<button type="button" on:click class={cc(['react-flow__controls-button', className])} {...$$restProps} >
+<button
+  type="button"
+  on:click
+  class={cc(['react-flow__controls-button', className])}
+  {...$$restProps}
+>
   <slot class="button-svg" />
 </button>
 

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

@@ -37,13 +37,11 @@
     //   nodesConnectable: !isInteractive,
     //   elementsSelectable: !isInteractive,
     // });
-
     // onInteractiveChange?.(!isInteractive);
   };
-
 </script>
 
-<Panel class="react-flow__controls" position={position}>
+<Panel class="react-flow__controls" {position}>
   {#if showZoom}
     <ControlButton
       on:click={onZoomInHandler}

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

@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
-  <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
+  <path
+    d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"
+  />
 </svg>

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

@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
-  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
+  <path
+    d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"
+  />
 </svg>

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

@@ -1,3 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
-  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
+  <path
+    d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"
+  />
 </svg>

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

@@ -27,20 +27,23 @@
   const { nodes, transform, width, height, nodeOrigin, id } = useStore();
 
   type GetMiniMapNodeAttribute = (node: Node) => string;
-  const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
+  const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
+    func instanceof Function ? func : () => func;
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
-  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+  const shapeRendering =
+    typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
   const labelledBy = `react-flow__minimap-desc-${$id}`;
 
   $: viewBB = {
     x: -$transform[0] / $transform[2],
     y: -$transform[1] / $transform[2],
     width: $width / $transform[2],
-    height: $height / $transform[2],
+    height: $height / $transform[2]
   } as Rect;
-  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes, $nodeOrigin), viewBB) : viewBB
+  $: boundingRect =
+    $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes, $nodeOrigin), viewBB) : viewBB;
   $: elementWidth = (style?.width as number) ?? defaultWidth;
   $: elementHeight = (style?.height as number) ?? defaultHeight;
   $: scaledWidth = boundingRect.width / elementWidth;
@@ -55,7 +58,11 @@
   $: viewboxHeight = viewHeight + offset * 2;
 </script>
 
-<Panel position={position} class={cc(['react-flow__minimap', className])} style={`background-color: ${bgColor};`}>
+<Panel
+  {position}
+  class={cc(['react-flow__minimap', className])}
+  style={`background-color: ${bgColor};`}
+>
   <svg
     width={elementWidth}
     height={elementHeight}
@@ -77,7 +84,7 @@
           borderRadius={nodeBorderRadius}
           strokeColor={nodeStrokeColorFunc(node)}
           strokeWidth={nodeStrokeWidth}
-          shapeRendering={shapeRendering}
+          {shapeRendering}
           class={nodeClassNameFunc(node)}
           style={{}}
         />
@@ -85,7 +92,9 @@
     {/each}
     <path
       class="react-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"

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

@@ -20,13 +20,13 @@
 
 <rect
   class={cc(['react-flow__minimap-node', className])}
-  x={x}
+  {x}
-  y={y}
+  {y}
   rx={borderRadius}
   ry={borderRadius}
-  width={width}
+  {width}
-  height={height}
+  {height}
-  fill={fill}
+  {fill}
   stroke={strokeColor}
   stroke-width={strokeWidth}
   shape-rendering={shapeRendering}

packages/svelte/src/routes/+page.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
   import type { Node, Edge, NodeTypes } from '../lib/types';
-  import SvelteFlow, { Controls, Background, BackgroundVariant, Minimap, Panel } from '../lib/index';
+  import SvelteFlow, {
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    Panel
+  } from '../lib/index';
   import CustomNode from '../customnodes/Custom.svelte';
 
   const nodeTypes: NodeTypes = {
-    custom: CustomNode,
+    custom: CustomNode
   };
 
   // const yNodes = 10;
@@ -13,8 +19,6 @@
   // const nodes: Node[] = [];
   // const edges: Edge[] = [];
 
-
-
   // let source = null;
 
   // for (let y = 0; y < yNodes; y++) {
@@ -43,60 +47,69 @@
   //   }
   // }
 
-  let nodes: Node<{ label: string }>[] = [{
+  let nodes: Node<{ label: string }>[] = [
+    {
       id: '1',
       type: 'input',
       data: { label: 'Input Node' },
       position: { x: 150, y: 5 }
-   }, {
+    },
+    {
       id: '2',
       type: 'default',
       data: { label: 'Node' },
-    position: { x: 0, y: 150 },
+      position: { x: 0, y: 150 }
-  }, {
+    },
+    {
       id: 'A',
       type: 'default',
       data: { label: 'Styled with class' },
       class: 'custom-style',
-    position: { x: 150, y: 150 },
+      position: { x: 150, y: 150 }
-  }, {
+    },
+    {
       id: '3',
       type: 'output',
       data: { label: 'Output Node' },
-    position: { x: 300, y: 150 },
+      position: { x: 300, y: 150 }
     },
     {
       id: 'B',
       type: 'default',
       data: { label: 'Styled with style' },
       style: 'border: 2px solid #ff5050;',
-    position: { x: 450, y: 150 },
+      position: { x: 450, y: 150 }
     },
     {
       id: '4',
       type: 'custom',
       data: { label: 'Custom Node' },
-    position: { x: 150, y: 300 },
+      position: { x: 150, y: 300 }
-  }];
+    }
+  ];
 
-  let edges: Edge[] = [{
+  let edges: Edge[] = [
+    {
       id: '1-2',
       type: 'default',
       source: '1',
       target: '2',
       label: 'Edge Text'
-  }, {
+    },
+    {
       id: '1-3',
       type: 'smoothstep',
       source: '1',
       target: '3'
-  }, {
+    },
+    {
       id: '2-4',
       type: 'default',
       source: '2',
       target: '4',
       animated: true
-  }];
+    }
+  ];
 
   function updateNode() {
     nodes[0].position = { x: nodes[0].position.x + 20, y: nodes[0].position.y };