migrating hooks, fixed colorMode

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

@@ -0,0 +1,14 @@
+import type { ColorModeClass } from '@xyflow/system';
+import { useStore } from './useStore';
+
+/**
+ * Hook for receiving the current color mode class 'dark' or 'light'.
+ *
+ */
+export function useColorMode(): { current: ColorModeClass } {
+  const { colorMode } = $derived(useStore());
+
+  return {
+    current: colorMode
+  };
+}

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

@@ -1,38 +0,0 @@
-import type { ColorMode, ColorModeClass } from '@xyflow/system';
-import { readable, type Readable } from 'svelte/store';
-
-function getMediaQuery() {
-  if (typeof window === 'undefined' || !window.matchMedia) {
-    return null;
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)');
-}
-
-/**
- * Hook for receiving the current color mode class 'dark' or 'light'.
- *
- * @internal
- * @param colorMode - The color mode to use ('dark', 'light' or 'system')
- */
-export function useColorModeClass(colorMode: ColorMode = 'light'): Readable<ColorModeClass> {
-  const colorModeClass = readable<ColorModeClass>('light', (set) => {
-    if (colorMode !== 'system') {
-      set(colorMode);
-
-      return;
-    }
-
-    const mediaQuery = getMediaQuery();
-    const updateColorModeClass = () => set(mediaQuery?.matches ? 'dark' : 'light');
-
-    set(mediaQuery?.matches ? 'dark' : 'light');
-    mediaQuery?.addEventListener('change', updateColorModeClass);
-
-    return () => {
-      mediaQuery?.removeEventListener('change', updateColorModeClass);
-    };
-  });
-
-  return colorModeClass;
-}

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

@@ -0,0 +1,19 @@
+import { useStore } from '$lib/store';
+
+import type { ConnectionState } from '@xyflow/system';
+
+/**
+ * Hook for receiving the current connection.
+ *
+ * @public
+ * @returns current connection as a readable store
+ */
+export function useConnection(): { current: ConnectionState } {
+  const { connection } = $derived(useStore());
+
+  return {
+    get current() {
+      return connection;
+    }
+  };
+}

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

@@ -1,18 +0,0 @@
-import { useStore } from '$lib/store';
-
-import type { ConnectionState } from '@xyflow/system';
-import { derivedWarning } from './derivedWarning.svelte';
-
-/**
- * Hook for receiving the current connection.
- *
- * @public
- * @returns current connection as a readable store
- */
-export function useConnection(): ConnectionState {
-  if (process.env.NODE_ENV === 'development') {
-    derivedWarning('useConnection', true);
-  }
-
-  return useStore().connection;
-}

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

@@ -0,0 +1,52 @@
+import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
+
+import { useStore } from '$lib/store';
+import { getContext } from 'svelte';
+
+export type useHandleConnectionsParams = {
+  type: HandleType;
+  nodeId?: string;
+  id?: string | null;
+};
+
+const initialConnections: HandleConnection[] = [];
+
+/**
+ *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ *
+ * @public
+ * @param param.nodeId
+ * @param param.type - handle type 'source' or 'target'
+ * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
+ * @returns an array with connections
+ */
+export function useHandleConnections({
+  type,
+  nodeId: _nodeId,
+  id = null
+}: useHandleConnectionsParams) {
+  const { edges, connectionLookup } = $derived(useStore());
+
+  const contextNodeId = getContext<string>('svelteflow__node_id');
+  const nodeId = _nodeId ?? contextNodeId;
+
+  let prevConnections: Map<string, HandleConnection> | undefined = new Map();
+  let connectionsArray: HandleConnection[] = initialConnections;
+
+  const connections = $derived.by(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    edges;
+    const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+    if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
+      prevConnections = nextConnections;
+      connectionsArray = Array.from(nextConnections?.values() || initialConnections);
+    }
+    return connectionsArray;
+  });
+
+  return {
+    get current() {
+      return connections;
+    }
+  };
+}

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

@@ -1,44 +0,0 @@
-import { derived } from 'svelte/store';
-import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
-
-import { useStore } from '$lib/store';
-import { getContext } from 'svelte';
-
-export type useHandleConnectionsParams = {
-  type: HandleType;
-  nodeId?: string;
-  id?: string | null;
-};
-
-const initialConnections: HandleConnection[] = [];
-
-/**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
- *
- * @public
- * @param param.nodeId
- * @param param.type - handle type 'source' or 'target'
- * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
- * @returns an array with connections
- */
-export function useHandleConnections({ type, nodeId, id = null }: useHandleConnectionsParams) {
-  const { edges, connectionLookup } = useStore();
-
-  const _nodeId = getContext<string>('svelteflow__node_id');
-  const currentNodeId = nodeId ?? _nodeId;
-
-  let prevConnections: Map<string, HandleConnection> | undefined = undefined;
-
-  return derived(
-    [edges, connectionLookup],
-    ([, connectionLookup], set) => {
-      const nextConnections = connectionLookup.get(`${currentNodeId}-${type}-${id || null}`);
-
-      if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
-        prevConnections = nextConnections;
-        set(Array.from(prevConnections?.values() || []));
-      }
-    },
-    initialConnections
-  );
-}