chore(useNodesData): cleanup return type

examples/react/src/examples/UseNodesData/ResultNode.tsx

@@ -1,15 +1,13 @@
 import { memo } from 'react';
 import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
-import { TextNode, isTextNode, type MyNode } from '.';
+import { isTextNode, type MyNode } from '.';
 
 function ResultNode() {
   const connections = useHandleConnections({
     type: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));
-  const textNodes = nodesData.filter(isTextNode) as TextNode[];
+  const textNodes = nodesData.filter(isTextNode);
-
-  textNodes[0].data;
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>

examples/react/src/examples/UseNodesData/index.tsx

@@ -20,8 +20,8 @@ export type ResultNode = Node<{}, 'result'>;
 export type UppercaseNode = Node<{ text: string }, 'uppercase'>;
 export type MyNode = TextNode | ResultNode | UppercaseNode;
 
-export function isTextNode(node: any): node is TextNode | UppercaseNode {
+export function isTextNode(node: any): node is TextNode {
-  return node.type === 'text' || node.type === 'uppercase';
+  return node.type === 'text';
 }
 
 const nodeTypes = {

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

@@ -1,13 +1,15 @@
 <script context="module" lang="ts">
-	import TextNode from './TextNode.svelte';
+	import type { Node } from '@xyflow/svelte';
-	import UppercaseNode from './UppercaseNode.svelte';
-	import ResultNode from './ResultNode.svelte';
 
-	export function isTextNode(node: any): node is TextNode | UppercaseNode {
+	type TextNodeType = Node<{ text: string }, 'text'>;
-		return node.type === 'text' || node.type === 'uppercase';
+	type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
+	type ResultNodeType = Node<{}, 'result'>;
+
+	export function isTextNode(node: any): node is TextNodeType {
+		return node.type === 'text';
 	}
 
-	export type MyNode = TextNode | UppercaseNode | ResultNode;
+	export type MyNode = TextNodeType | UppercaseNodeType | ResultNodeType;
 </script>
 
 <script lang="ts">
@@ -18,19 +20,22 @@
 		Background,
 		BackgroundVariant,
 		MiniMap,
-		type Node,
 		type NodeTypes,
 		type Edge
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
 
+	import TextNode from './TextNode.svelte';
+	import UppercaseNode from './UppercaseNode.svelte';
+	import ResultNode from './ResultNode.svelte';
+
 	const nodeTypes: NodeTypes = {
 		text: TextNode,
 		uppercase: UppercaseNode,
 		result: ResultNode
 	};
 
-	const nodes = writable<Node[]>([
+	const nodes = writable<MyNode[]>([
 		{
 			id: '1',
 			type: 'text',

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -6,7 +6,7 @@
 		useNodesData,
 		type NodeProps
 	} from '@xyflow/svelte';
-	import { isTextNode } from './+page.svelte';
+	import { isTextNode, type MyNode } from './+page.svelte';
 
 	type $$Props = NodeProps;
 
@@ -17,7 +17,7 @@
 		type: 'target'
 	});
 
-	$: nodeData = useNodesData($connections.map((connection) => connection.source));
+	$: nodeData = useNodesData<MyNode>($connections.map((connection) => connection.source));
 	$: textNodes = $nodeData.filter(isTextNode);
 </script>
 

packages/react/src/hooks/useNodesData.ts

@@ -20,18 +20,8 @@ export interface NodeDataReturn<NodeType extends Node> {
  */
 export function useNodesData<NodeType extends Node = Node>(
   nodeId: string
-): {
+): Pick<NodeType, 'id' | 'type' | 'data'> | null;
-  id: string;
+export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
-  type: NodeType['type'];
-  data: NodeType['data'];
-} | null;
-export function useNodesData<NodeType extends Node = Node>(
-  nodeIds: string[]
-): {
-  id: string;
-  type: NodeType['type'];
-  data: NodeType['data'];
-}[];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const nodesData = useStore(

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

@@ -22,33 +22,21 @@ function areNodesDataEqual(a: any[], b: any[]) {
  *
  * @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<{
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'> | null>;
-  id: string;
-  type: NodeType['type'];
-  data: NodeType['data'];
-} | null>;
 export function useNodesData<NodeType extends Node = Node>(
   nodeIds: string[]
-): Readable<
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'>[]>;
-  {
-    id: string;
-    type: NodeType['type'];
-    data: NodeType['data'];
-  }[]
->;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const { nodes, nodeLookup } = useStore();
   let prevNodesData: any = [];
 
   return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
-    let nextNodesData = [];
+    const nextNodesData = [];
-
     const isArrayOfIds = Array.isArray(nodeIds);
     const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];