chore(svelte/hooks): add docs

packages/react/src/hooks/useHandleConnections.ts

@@ -17,8 +17,8 @@ type useHandleConnectionsParams = {
  *
  * @public
  * @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)
  * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
+ * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections

packages/react/src/hooks/useNodesData.ts

@@ -10,7 +10,7 @@ import type { Node } from '../types';
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
  * @param guard - Optional guard function to narrow down the node type
- * @returns An array data objects
+ * @returns An array od data objects
  */
 export function useNodesData<NodeType extends Node = Node>(nodeId: string): NodeType['data'] | null;
 export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): NodeType['data'][];

packages/react/src/hooks/useReactFlow.ts

@@ -18,7 +18,12 @@ import type {
 } from '../types';
 import { isNode } from '../utils';
 
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
 export default function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): ReactFlowInstance<
   NodeType,
   EdgeType

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

@@ -9,6 +9,12 @@ function getMediaQuery() {
   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') {

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

@@ -3,6 +3,12 @@ import type { Readable } from 'svelte/store';
 import { useStore } from '$lib/store';
 import type { ConnectionProps } from '$lib/store/derived-connection-props';
 
+/**
+ * Hook for receiving the current connection.
+ *
+ * @public
+ * @returns current connection as a readable store
+ */
 export function useConnection(): Readable<ConnectionProps> {
   const { connection } = useStore();
 

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

@@ -11,6 +11,15 @@ export type useHandleConnectionsParams = {
 
 const initialConnections: Connection[] = [];
 
+/**
+ *  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({ nodeId, type, id = null }: useHandleConnectionsParams) {
   const { edges, connectionLookup } = useStore();
   let prevConnections: Map<string, Connection> | undefined = undefined;

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

@@ -21,6 +21,14 @@ function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
   return true;
 }
 
+/**
+ * Hook for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param nodeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns A readable store with an array of data objects
+ */
 export function useNodesData<NodeType extends Node = Node>(
   nodeId: string
 ): Readable<NodeType['data'] | null>;

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

@@ -1,10 +1,22 @@
 import { useStore } from '$lib/store';
 
+/**
+ * Hook for getting the current nodes from the store.
+ *
+ * @public
+ * @returns store with an array of nodes
+ */
 export function useNodes() {
   const { nodes } = useStore();
   return nodes;
 }
 
+/**
+ * Hook for getting the current edges from the store.
+ *
+ * @public
+ * @returns store with an array of edges
+ */
 export function useEdges() {
   const { edges } = useStore();
   return edges;

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

@@ -20,6 +20,12 @@ import { useStore } from '$lib/store';
 import type { Edge, FitViewOptions, Node } from '$lib/types';
 import { isNode } from '$lib/utils';
 
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns helper functions
+ */
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
   zoomOut: ZoomInOut;

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

@@ -3,6 +3,12 @@ import type { UpdateNodeInternals } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 
+/**
+ * Hook for updating node internals.
+ *
+ * @public
+ * @returns function for updating node internals
+ */
 export function useUpdateNodeInternals(): UpdateNodeInternals {
   const { domNode, updateNodeDimensions } = useStore();