From 3fc3b7e6038a19e6b8010161d2bffd322c13a928 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 26 Feb 2024 14:13:12 +0100
Subject: [PATCH] chore(useNodesData): cleanup return type

---
 .../src/examples/UseNodesData/ResultNode.tsx  |  6 ++----
 .../react/src/examples/UseNodesData/index.tsx |  4 ++--
 .../routes/examples/usenodesdata/+page.svelte | 21 ++++++++++++-------
 .../examples/usenodesdata/ResultNode.svelte   |  4 ++--
 packages/react/src/hooks/useNodesData.ts      | 14 ++-----------
 packages/svelte/src/lib/hooks/useNodesData.ts | 18 +++-------------
 6 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx
index 006af8b7..bf8f7a35 100644
--- a/examples/react/src/examples/UseNodesData/ResultNode.tsx
+++ b/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[];
-
-  textNodes[0].data;
+  const textNodes = nodesData.filter(isTextNode);
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
diff --git a/examples/react/src/examples/UseNodesData/index.tsx b/examples/react/src/examples/UseNodesData/index.tsx
index dc0b43dd..91cc1f94 100644
--- a/examples/react/src/examples/UseNodesData/index.tsx
+++ b/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 {
-  return node.type === 'text' || node.type === 'uppercase';
+export function isTextNode(node: any): node is TextNode {
+  return node.type === 'text';
 }
 
 const nodeTypes = {
diff --git a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
index a92acbe4..fc85ee26 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
@@ -1,13 +1,15 @@
 <script context="module" lang="ts">
-	import TextNode from './TextNode.svelte';
-	import UppercaseNode from './UppercaseNode.svelte';
-	import ResultNode from './ResultNode.svelte';
+	import type { Node } from '@xyflow/svelte';
 
-	export function isTextNode(node: any): node is TextNode | UppercaseNode {
-		return node.type === 'text' || node.type === 'uppercase';
+	type TextNodeType = Node<{ text: string }, 'text'>;
+	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',
diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index b79cef12..d5955501 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/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>
 
diff --git a/packages/react/src/hooks/useNodesData.ts b/packages/react/src/hooks/useNodesData.ts
index 6d9586ed..c43a60cc 100644
--- a/packages/react/src/hooks/useNodesData.ts
+++ b/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
-): {
-  id: string;
-  type: NodeType['type'];
-  data: NodeType['data'];
-} | null;
-export function useNodesData<NodeType extends Node = Node>(
-  nodeIds: string[]
-): {
-  id: string;
-  type: NodeType['type'];
-  data: NodeType['data'];
-}[];
+): Pick<NodeType, 'id' | 'type' | 'data'> | null;
+export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const nodesData = useStore(
diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts
index 1ec53f87..c11ef308 100644
--- a/packages/svelte/src/lib/hooks/useNodesData.ts
+++ b/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<{
-  id: string;
-  type: NodeType['type'];
-  data: NodeType['data'];
-} | null>;
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'> | null>;
 export function useNodesData<NodeType extends Node = Node>(
   nodeIds: string[]
-): Readable<
-  {
-    id: string;
-    type: NodeType['type'];
-    data: NodeType['data'];
-  }[]
->;
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'>[]>;
 // 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];