feat(svelte): add onError prop closes #3423

packages/svelte/src/lib/store/edge-tree.ts

@@ -1,10 +1,10 @@
 import { derived } from 'svelte/store';
-import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition, type OnError } from '@xyflow/system';
+import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition } from '@xyflow/system';
 
 import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
-export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) {
+export function getEdgeTree(store: SvelteFlowStoreState) {
   const visibleEdges = derived(
     [
       store.edges,
@@ -40,8 +40,8 @@ export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) {
   );
 
   return derived(
-    [visibleEdges, store.nodes, store.connectionMode],
-    ([visibleEdges, nodes, connectionMode]) => {
+    [visibleEdges, store.nodes, store.connectionMode, store.onError],
+    ([visibleEdges, nodes, connectionMode, onError]) => {
       const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
         const sourceNode = nodes.find((node) => node.id === edge.source);
         const targetNode = nodes.find((node) => node.id === edge.target);

packages/svelte/src/lib/store/index.ts

@@ -286,16 +286,12 @@ export function createStore(): SvelteFlowStore {
     cancelConnection();
   }
 
-  function onError(id: string, msg: string) {
-    console.log(msg);
-  }
-
   return {
     // state
     ...store,
 
     // derived state
-    edgeTree: getEdgeTree(store, onError),
+    edgeTree: getEdgeTree(store),
     connectionPath: getConnectionPath(store),
     visibleNodes: getVisibleNodes(store),
     markers: derived(
@@ -323,8 +319,7 @@ export function createStore(): SvelteFlowStore {
     panBy,
     updateConnection,
     cancelConnection,
-    reset,
-    onError
+    reset
   };
 }
 

packages/svelte/src/lib/store/initial-store.ts

@@ -12,7 +12,9 @@ import {
   type CoordinateExtent,
   type IsValidConnection,
   type GroupedEdges,
-  type NodeOrigin
+  type NodeOrigin,
+  type OnError,
+  devWarn
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -79,8 +81,8 @@ export const getInitialStore = () => ({
   domNode: writable<HTMLDivElement | null>(null),
   connectionPath: readable<string | null>(null),
   connection: writable<ConnectionData>(initConnectionData),
-  connectionRadius: writable<number>(20),
   connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
+  connectionRadius: writable<number>(20),
   isValidConnection: writable<IsValidConnection>(() => true),
   nodesDraggable: writable<boolean>(true),
   nodesConnectable: writable<boolean>(true),
@@ -89,5 +91,6 @@ export const getInitialStore = () => ({
   markers: readable<MarkerProps[]>([]),
   defaultMarkerColor: writable<string>('#b1b1b7'),
   lib: readable<string>('svelte'),
-  onlyRenderVisibleElements: writable<boolean>(false)
+  onlyRenderVisibleElements: writable<boolean>(false),
+  onError: writable<OnError>(devWarn)
 });

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

@@ -6,8 +6,7 @@ import type {
   Connection,
   UpdateNodePositions,
   CoordinateExtent,
-  UpdateConnection,
-  OnError
+  UpdateConnection
 } from '@xyflow/system';
 
 import type { getInitialStore } from './initial-store';
@@ -34,7 +33,6 @@ export type SvelteFlowStoreActions = {
   updateConnection: UpdateConnection;
   cancelConnection: () => void;
   reset(): void;
-  onError: OnError;
 };
 
 export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;