refactor(handle): naming things, cleanup

packages/core/src/components/Handle/index.tsx

@@ -4,11 +4,12 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { handleMouseDown, isHandleValid } from './handler';
-import { getHostForElement } from '../../utils';
+import { handleMouseDown } from './handler';
+import { devWarn, getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
 import type { HandleProps, Connection, ReactFlowState } from '../../types';
+import { isValidHandle } from './utils';
 
 const alwaysValid = () => true;
 
@@ -37,9 +38,13 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     ref
   ) => {
     const store = useStoreApi();
+    const nodeId = useNodeId();
+
+    if (!nodeId) {
+      devWarn('Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+      return null;
+    }
 
-    // @fixme: remove type assertion and handle nodeId === null
-    const nodeId = useNodeId() as string;
     const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
 
     const handleId = id || null;
@@ -86,7 +91,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       }
 
       const doc = getHostForElement(event.target as HTMLElement);
-      const { connection, isValid } = isHandleValid(
+      const { connection, isValid } = isValidHandle(
         {
           nodeId,
           id: handleId,