refactor(svelte/edges): cleanup types and components

examples/svelte/src/routes/examples/edges/+page.svelte

@@ -10,6 +10,8 @@
 	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
+	import ButtonEdge from './ButtonEdge.svelte';
+	import CustomBezierEdge from './CustomBezierEdge.svelte';
 
 	const nodes = writable([
 		{
@@ -110,13 +112,14 @@
 			id: 'e5-8',
 			source: '5',
 			target: '8',
-			data: { text: 'custom edge' }
+			type: 'button'
 		},
 		{
 			id: 'e5-9',
 			source: '5',
 			target: '9',
-			data: { text: 'custom edge 2' }
+			type: 'customBezier',
+			label: 'custom bezier'
 		},
 		{
 			id: 'e5-6',
@@ -143,9 +146,14 @@
 			}
 		}
 	]);
+
+	const edgeTypes = {
+		button: ButtonEdge,
+		customBezier: CustomBezierEdge
+	};
 </script>
 
-<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
+<SvelteFlow {nodes} {edges} {edgeTypes} fitView nodeDragThreshold={2}>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />

examples/svelte/src/routes/examples/edges/ButtonEdge.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabelRenderer } from '@xyflow/svelte';
+
+	type $$Props = EdgeProps;
+
+	export let id: $$Props['id'] = '';
+	export let source: $$Props['source'] = '';
+	export let target: $$Props['target'] = '';
+	export let animated: $$Props['animated'] = undefined;
+	export let selected: $$Props['selected'] = undefined;
+	export let label: $$Props['label'] = undefined;
+	export let labelStyle: $$Props['labelStyle'] = undefined;
+	export let data: $$Props['data'] = undefined;
+	export let style: $$Props['style'] = undefined;
+	export let markerStart: $$Props['markerStart'] = undefined;
+	export let markerEnd: $$Props['markerEnd'] = undefined;
+	export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+	export let sourceX: $$Props['sourceX'];
+	export let sourceY: $$Props['sourceY'];
+	export let sourcePosition: $$Props['sourcePosition'];
+	export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+	export let targetX: $$Props['targetX'];
+	export let targetY: $$Props['targetY'];
+	export let targetPosition: $$Props['targetPosition'];
+	export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+	$: [edgePath, labelX, labelY] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+
+	source;
+	target;
+	animated;
+	selected;
+	data;
+	label;
+	labelStyle;
+	markerStart;
+	interactionWidth;
+	sourceHandleId;
+	targetHandleId;
+</script>
+
+<BaseEdge path={edgePath} {markerEnd} {style} />
+<EdgeLabelRenderer>
+	<div
+		class="edgeButtonContainer nodrag nopan"
+		style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+	>
+		<button
+			class="edgeButton"
+			on:click={(event) => {
+				event.stopPropagation();
+				alert(`remove ${id}`);
+			}}
+		>
+			×
+		</button>
+	</div>
+</EdgeLabelRenderer>
+
+<style>
+	.edgeButtonContainer {
+		position: absolute;
+		font-size: 12pt;
+		/* everything inside EdgeLabelRenderer has no pointer events by default */
+		/* if you have an interactive element, set pointer-events: all */
+		pointer-events: all;
+	}
+
+	.edgeButton {
+		width: 20px;
+		height: 20px;
+		background: #eee;
+		border: 1px solid #fff;
+		cursor: pointer;
+		border-radius: 50%;
+		font-size: 12px;
+		line-height: 1;
+	}
+
+	.edgeButton:hover {
+		box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
+	}
+</style>

examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { BezierEdge, type EdgeProps } from '@xyflow/svelte';
+
+	type $$Props = EdgeProps;
+
+	export let id: $$Props['id'] = '';
+	export let source: $$Props['source'] = '';
+	export let target: $$Props['target'] = '';
+	export let animated: $$Props['animated'] = undefined;
+	export let selected: $$Props['selected'] = undefined;
+	export let label: $$Props['label'] = undefined;
+	export let labelStyle: $$Props['labelStyle'] = undefined;
+	export let data: $$Props['data'] = undefined;
+	export let style: $$Props['style'] = undefined;
+	export let markerStart: $$Props['markerStart'] = undefined;
+	export let markerEnd: $$Props['markerEnd'] = undefined;
+	export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+	export let sourceX: $$Props['sourceX'];
+	export let sourceY: $$Props['sourceY'];
+	export let sourcePosition: $$Props['sourcePosition'];
+	export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+	export let targetX: $$Props['targetX'];
+	export let targetY: $$Props['targetY'];
+	export let targetPosition: $$Props['targetPosition'];
+	export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+	id;
+	source;
+	target;
+	animated;
+	selected;
+	data;
+	sourcePosition;
+	targetPosition;
+	sourceHandleId;
+	targetHandleId;
+</script>
+
+<BezierEdge
+	{sourceX}
+	{sourceY}
+	{sourcePosition}
+	{targetX}
+	{targetY}
+	{targetPosition}
+	{label}
+	{labelStyle}
+	{markerStart}
+	{markerEnd}
+	{style}
+	{interactionWidth}
+	pathOptions={{ curvature: 1 }}
+/>

packages/react/src/components/Edges/StraightEdge.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type Optional, getStraightPath } from '@xyflow/system';
+import { getStraightPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
+import type { StraightEdgeProps } from '../../types';
 
 function createStraightEdge(params: { isInternal: boolean }) {
   // eslint-disable-next-line react/display-name
@@ -23,7 +23,7 @@ function createStraightEdge(params: { isInternal: boolean }) {
       markerEnd,
       markerStart,
       interactionWidth,
-    }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
+    }: StraightEdgeProps) => {
       const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
       const _id = params.isInternal ? undefined : id;

packages/react/src/types/edges.ts

@@ -109,7 +109,7 @@ export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd
 
 export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
 
-export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+export type StraightEdgeProps<T = any> = Omit<EdgeComponentProps<T>, 'sourcePosition' | 'targetPosition'>;
 
 export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: SmoothStepPathOptions;

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getBezierPath } from '@xyflow/system';
+
+  import type { BezierEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = BezierEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature: pathOptions?.curvature
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { getBezierPath } from '@xyflow/system';
-
-  import type { BezierEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = BezierEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getBezierPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    curvature: $$props.pathOptions?.curvature
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseBezierEdge from './BaseBezierEdge.svelte';
-  import type { BezierEdgeProps } from '$lib/types';
-
-  type $$Props = BezierEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseBezierEdge {...props} />

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseBezierEdge from './BaseBezierEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseBezierEdge {...props} internal />

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getBezierPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  // hopefully with Svelte5, we don't need this kind of workaround anymore
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { SmoothStepEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = SmoothStepEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: pathOptions?.borderRadius,
+    offset: pathOptions?.offset
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath } from '@xyflow/system';
-
-  import type { SmoothStepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = SmoothStepEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    borderRadius: $$props.pathOptions?.borderRadius,
-    offset: $$props.pathOptions?.offset
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
-  import type { SmoothStepEdgeProps } from '$lib/types';
-
-  type $$Props = SmoothStepEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseSmoothStepEdge {...props} />

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseSmoothStepEdge {...props} internal />

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { StepEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = StepEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 0,
+    offset: pathOptions?.offset
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath } from '@xyflow/system';
-
-  import type { StepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = StepEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    borderRadius: 0,
-    offset: $$props.pathOptions?.offset
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStepEdge from './BaseStepEdge.svelte';
-  import type { StepEdgeProps } from '$lib/types';
-
-  type $$Props = StepEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStepEdge {...props} />

packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStepEdge from './BaseStepEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStepEdge {...props} internal />

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 0
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { getStraightPath } from '@xyflow/system';
+
+  import type { StraightEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = StraightEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+
+  $: [path, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getStraightPath } from '@xyflow/system';
-
-  import type { SmoothStepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = SmoothStepEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getStraightPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStraighEdge from './BaseStraightEdge.svelte';
-  import type { StraightEdgeProps } from '$lib/types';
-
-  type $$Props = StraightEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStraighEdge {...props} />

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStraighEdge from './BaseStraightEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStraighEdge {...props} internal />

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getStraightPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourcePosition;
+  targetPosition;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>

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

@@ -2,14 +2,16 @@
 // The internal edges are used directly like custom edges and always get an id, source and target props
 // If you import an edge from the library, the id is optional and source and target are not used at all
 
-export { default as BezierEdge } from './BezierEdge/BezierEdge.svelte';
+// @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
-export { default as BezierEdgeInternal } from './BezierEdge/BezierEdgeInternal.svelte';
+// both are quite similar, it's just about 1-2 props that are different
+export { default as BezierEdge } from './BezierEdge.svelte';
+export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
 
-export { default as SmoothStepEdge } from './SmoothStepEdge/BaseSmoothStepEdge.svelte';
+export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
-export { default as SmoothStepEdgeInternal } from './SmoothStepEdge/SmoothStepEdgeInternal.svelte';
+export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
 
-export { default as StraightEdge } from './StraightEdge/StraightEdge.svelte';
+export { default as StraightEdge } from './StraightEdge.svelte';
-export { default as StraightEdgeInternal } from './StraightEdge/StraightEdgeInternal.svelte';
+export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
 
-export { default as StepEdge } from './StepEdge/StepEdge.svelte';
+export { default as StepEdge } from './StepEdge.svelte';
-export { default as StepEdgeInternal } from './StepEdge/StepEdgeInternal.svelte';
+export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';

packages/svelte/src/lib/index.ts

@@ -7,7 +7,7 @@ export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/BaseEdge';
-export * from '$lib/components/edges';
+export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';
 
 // plugins
@@ -29,7 +29,16 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 
 // types
-export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
+export type {
+  Edge,
+  EdgeProps,
+  BezierEdgeProps,
+  SmoothStepEdgeProps,
+  StepEdgeProps,
+  StraightEdgeProps,
+  EdgeTypes,
+  DefaultEdgeOptions
+} from '$lib/types/edges';
 export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
 export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
 export type { SvelteFlowStore } from '$lib/store/types';

packages/svelte/src/lib/types/edges.ts

@@ -40,7 +40,7 @@ export type Edge<T = any> =
   | BezierEdgeType<T>
   | StepEdgeType<T>;
 
-export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> &
+export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
   EdgePosition & {
     markerStart?: string;
     markerEnd?: string;
@@ -48,7 +48,13 @@ export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'>
     targetHandleId?: string | null;
   };
 
-export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+export type EdgeComponentProps<T = any> = Optional<
+  Omit<
+    EdgeProps<T>,
+    'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data'
+  >,
+  'id'
+>;
 
 export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: BezierPathOptions;
@@ -62,7 +68,10 @@ export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: StepPathOptions;
 };
 
-export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+export type StraightEdgeProps<T = any> = Omit<
+  EdgeComponentProps<T>,
+  'sourcePosition' | 'targetPosition'
+>;
 
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 

packages/svelte/tsconfig.json

@@ -8,7 +8,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "noErrorTruncation": true
   }
 
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias

tooling/tsconfig/react.json

@@ -6,6 +6,7 @@
     "lib": ["dom", "esnext"],
     "module": "esnext",
     "target": "esnext",
-    "outDir": "dist"
+    "outDir": "dist",
+    "noErrorTruncation": true
   }
 }