chore(svelte): formatted and lint errors fixed

packages/svelte/.eslintignore

@@ -2,6 +2,7 @@
 node_modules
 /build
 /.svelte-kit
+dist
 /package
 .env
 .env.*

packages/svelte/.prettierrc

@@ -3,6 +3,5 @@
   "trailingComma": "none",
   "printWidth": 100,
   "plugins": ["prettier-plugin-svelte"],
-  "pluginSearchDirs": ["."],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

packages/svelte/CHANGELOG.md

@@ -16,7 +16,7 @@
 
 ## ⚠️ Breaking changes
 
-- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps<AppNode>`  
+- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps<AppNode>`
 
 ## Patch changes
 
@@ -45,7 +45,7 @@
 - fix `on:panecontextmenu`
 - add `role="button"` to `<EdgeLabel />` to prevent a11y warnings
 - don't delete node when input is focused and user presses Backspace + Ctrl (or any other mod key)
-- `useHandleConnections`: use context node id when no node id is passed  
+- `useHandleConnections`: use context node id when no node id is passed
 - don't trigger drag start / end when node is not draggable
 
 ## 0.0.35
@@ -87,7 +87,7 @@
 
 ### ⚠️ Breaking
 
-- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)`  
+- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)`
 
 ## 0.0.32
 
@@ -106,7 +106,7 @@
 ### Features
 
 - add `onbeforedelete` handler to prevent/ manage deletions
-- TSDocs for hooks and some types 
+- TSDocs for hooks and some types
 
 ### Patch changes
 
@@ -302,4 +302,4 @@ This very first release comes with lots of features already:
 - draggable, selectable and deletable nodes
 - support for custom `nodeTypes` and `edgeTypes`
 - basic viewport settings like `fitView`, `minZoom` and `maxZoom`
-- additional components: `<MiniMap />`, `<Controls />` & `<Background />` 
+- additional components: `<MiniMap />`, `<Controls />` & `<Background />`

packages/svelte/README.md

@@ -10,7 +10,7 @@ Svelte Flow is a highly customizable component for building interactive graphs a
 
 ☣️ **Svelte Flow is still alpha and currently under heavy development. The API is relatively stable but some things might change.** ☣️
 
-[🚀 Getting Started](https://svelteflow.dev/learn) | [📖 Documentation](https://svelteflow.dev/api-reference/svelte-flow) | [📺 Examples](https://svelteflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) 
+[🚀 Getting Started](https://svelteflow.dev/learn) | [📖 Documentation](https://svelteflow.dev/api-reference/svelte-flow) | [📺 Examples](https://svelteflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW)
 
 </div>
 
@@ -18,7 +18,7 @@ Svelte Flow is a highly customizable component for building interactive graphs a
 
 - **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
 - **Customizable:** Different [node](https://svelteflow.dev/examples) and [edge types](https://svelteflow.dev/examples/edges/edge-types) and support for custom nodes with multiple handles and custom edges
-- **Fast rendering:** Only nodes that have changed are re-rendered 
+- **Fast rendering:** Only nodes that have changed are re-rendered
 - **Hooks and Utils:** [Hooks](https://svelteflow.dev/api-reference/hooks) for handling nodes, edges and the viewport and graph [helper functions](https://svelteflow.dev/api-reference/utils)
 - **Plugin Components:** [Background](https://svelteflow.dev/api-reference/components/background), [MiniMap](https://svelteflow.dev/api-reference/components/minimap) and [Controls](https://svelteflow.dev/api-reference/components/controls)
 - **Reliable**: Written in [Typescript](https://www.typescriptlang.org) and tested with [Playwright](https://www.playwright.dev)
@@ -38,18 +38,12 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes
 ```svelte
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import {
+  import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';
-    SvelteFlow,
-    Controls,
-    Background,
-    BackgroundVariant,
-    MiniMap,
-  } from '@xyflow/svelte';
 
   // you need to import the styles for Svelte Flow to work
   // if you just want to load the basic styleds, you can import '@xyflow/svelte/dist/base.css'
-  import '@xyflow/svelte/dist/style.css'
+  import '@xyflow/svelte/dist/style.css';
-  
+
   // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position. This also makes it easier to update nodes in user land.
   const nodes = writable([
     {
@@ -78,12 +72,7 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes
   ]);
 </script>
 
-<SvelteFlow
+<SvelteFlow {nodes} {edges} fitView on:nodeclick={(event) => console.log('on node click', event)}>
-  {nodes}
-  {edges}
-  fitView
-  on:nodeclick={(event) => console.log('on node click', event)}
->
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <MiniMap />
@@ -102,7 +91,6 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes
 
 And of course, we love Github stars ⭐
 
-
 ## Development
 
 If you want to check out the current version you need to run the following command from the root directory:
@@ -113,7 +101,6 @@ If you want to check out the current version you need to run the following comma
 
 You can now access the examples under http://127.0.0.1:5173
 
-
 ## Maintainers
 
 Svelte Flow is maintained by the team behind [xyflow](https://xyflow.com). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs).

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

@@ -4,8 +4,8 @@
 
   type $$Props = AttributionProps;
 
-  export let proOptions: AttributionProps['proOptions'] = undefined;
+  export let proOptions: $$Props['proOptions'] = undefined;
-  export let position: AttributionProps['position'] = 'bottom-right';
+  export let position: $$Props['position'] = 'bottom-right';
 </script>
 
 {#if !proOptions?.hideAttribution}

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

@@ -2,8 +2,6 @@
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
 
-  type $$Props = {};
-
   const { domNode } = useStore();
 </script>
 

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

@@ -1 +1 @@
-export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';
+export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';

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

@@ -80,7 +80,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
-  <svg style:zIndex>
+  <svg style:z-index={zIndex}>
     <g
       class={cc(['svelte-flow__edge', className])}
       class:animated
@@ -92,8 +92,8 @@
       aria-label={ariaLabel === null
         ? undefined
         : ariaLabel
-        ? ariaLabel
+          ? ariaLabel
-        : `Edge from ${source} to ${target}`}
+          : `Edge from ${source} to ${target}`}
       role="img"
     >
       <svelte:component

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

@@ -1,7 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import { createEventDispatcher, setContext, onDestroy } from 'svelte';
+  import { setContext, onDestroy } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
   import { errorMessages, Position } from '@xyflow/system';
@@ -10,40 +10,39 @@
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
-  import type { Node } from '$lib/types';
   import { getNodeInlineStyleDimensions } from './utils';
   import { createNodeEventDispatcher } from '$lib';
 
   interface $$Props extends NodeWrapperProps {}
 
-  export let node: NodeWrapperProps['node'];
+  export let node: $$Props['node'];
-  export let id: NodeWrapperProps['id'];
+  export let id: $$Props['id'];
-  export let data: NodeWrapperProps['data'] = {};
+  export let data: $$Props['data'] = {};
-  export let selected: NodeWrapperProps['selected'] = false;
+  export let selected: $$Props['selected'] = false;
-  export let draggable: NodeWrapperProps['draggable'] = undefined;
+  export let draggable: $$Props['draggable'] = undefined;
-  export let selectable: NodeWrapperProps['selectable'] = undefined;
+  export let selectable: $$Props['selectable'] = undefined;
-  export let connectable: NodeWrapperProps['connectable'] = true;
+  export let connectable: $$Props['connectable'] = true;
-  export let hidden: NodeWrapperProps['hidden'] = false;
+  export let hidden: $$Props['hidden'] = false;
   export let dragging: boolean = false;
-  export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
+  export let resizeObserver: $$Props['resizeObserver'] = null;
-  export let style: NodeWrapperProps['style'] = undefined;
+  export let style: $$Props['style'] = undefined;
-  export let type: NodeWrapperProps['type'] = 'default';
+  export let type: $$Props['type'] = 'default';
-  export let isParent: NodeWrapperProps['isParent'] = false;
+  export let isParent: $$Props['isParent'] = false;
-  export let positionX: NodeWrapperProps['positionX'];
+  export let positionX: $$Props['positionX'];
-  export let positionY: NodeWrapperProps['positionY'];
+  export let positionY: $$Props['positionY'];
-  export let positionOriginX: NodeWrapperProps['positionOriginX'];
+  export let positionOriginX: $$Props['positionOriginX'];
-  export let positionOriginY: NodeWrapperProps['positionOriginY'];
+  export let positionOriginY: $$Props['positionOriginY'];
-  export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
-  export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
-  export let zIndex: NodeWrapperProps['zIndex'];
+  export let zIndex: $$Props['zIndex'];
-  export let computedWidth: NodeWrapperProps['computedWidth'] = undefined;
+  export let computedWidth: $$Props['computedWidth'] = undefined;
-  export let computedHeight: NodeWrapperProps['computedHeight'] = undefined;
+  export let computedHeight: $$Props['computedHeight'] = undefined;
-  export let initialWidth: NodeWrapperProps['initialWidth'] = undefined;
+  export let initialWidth: $$Props['initialWidth'] = undefined;
-  export let initialHeight: NodeWrapperProps['initialHeight'] = undefined;
+  export let initialHeight: $$Props['initialHeight'] = undefined;
-  export let width: NodeWrapperProps['width'] = undefined;
+  export let width: $$Props['width'] = undefined;
-  export let height: NodeWrapperProps['height'] = undefined;
+  export let height: $$Props['height'] = undefined;
-  export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
+  export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let initialized: NodeWrapperProps['initialized'] = false;
+  export let initialized: $$Props['initialized'] = false;
   let className: string = '';
   export { className as class };
 

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -2,8 +2,6 @@
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
 
-  type $$Props = {};
-
   const { domNode } = useStore();
 </script>
 

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

@@ -178,7 +178,7 @@
     // onSelectionEnd?.(event);
   }
 
-  const onMouseLeave = (event: MouseEvent) => {
+  const onMouseLeave = () => {
     if ($selectionRectMode === 'user') {
       selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null);
       //  onSelectionEnd?.(event);

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

@@ -76,8 +76,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-expect-error @todo: how to fix this TS error?
-      // @ts-ignore
       store[prop].set(update);
     }
   });

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

@@ -20,7 +20,8 @@ export function useNodesData<NodeType extends Node = Node>(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const { nodes, nodeLookup } = useStore();
-  let prevNodesData: any = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let prevNodesData: any[] = [];
 
   return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
     const nextNodesData = [];

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

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
-  declare const window: any;
+  declare const window: Window | undefined;
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
     func instanceof Function ? func : () => func;
 </script>
@@ -61,6 +61,7 @@
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassFunc = getAttrFunction(nodeClass);
   const shapeRendering =
+    // @ts-expect-error - TS doesn't know about chrome
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
   const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
 

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -52,7 +52,7 @@
 
   $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
   $: _style = style ?? '';
-  $: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;
+  $: controlStyle = color ? `${_style} ${colorStyleProp}: ${color};` : _style;
 
   onMount(() => {
     if (resizeControlRef) {

packages/svelte/src/lib/store/derived-connection-props.ts

@@ -6,7 +6,8 @@ import {
   ConnectionLineType,
   ConnectionMode,
   Position,
-  internalsSymbol
+  internalsSymbol,
+  type HandleElement
 } from '@xyflow/system';
 
 import type { SvelteFlowStoreState } from './types';
@@ -68,16 +69,16 @@ export function getDerivedConnectionProps(
       const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
       const handleBoundsStrict =
         fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || [];
-      const handleBoundsLoose = handleBoundsStrict
+      const handleBoundsLoose: HandleElement[] | undefined | null = handleBoundsStrict
         ? handleBoundsStrict
         : fromHandleBounds?.[
             connection?.connectionStartHandle?.type === 'source' ? 'target' : 'source'
-          ]!;
+          ];
       const handleBounds =
         connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
       const fromHandle = connection.connectionStartHandle?.handleId
-        ? handleBounds.find((d) => d.id === connection.connectionStartHandle?.handleId)
+        ? handleBounds?.find((d) => d.id === connection.connectionStartHandle?.handleId)
-        : handleBounds[0];
+        : handleBounds?.[0];
       const fromHandleX = fromHandle
         ? fromHandle.x + fromHandle.width / 2
         : (fromNode?.computed?.width ?? 0) / 2;