From a7e0ace550c7c3b8d4c7d71db72b70facc48be4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20=C5=BBydek?= <przemyslawzydek@gmail.com>
Date: Mon, 22 Mar 2021 11:33:01 +0100
Subject: [PATCH] feat(components): Return if document is undefined

---
 src/components/Handle/handler.ts  | 15 ++++++++++-----
 src/container/ReactFlow/index.tsx |  3 ++-
 src/store/index.ts                |  3 ++-
 src/types/index.ts                |  2 +-
 src/utils/document.ts             |  1 +
 5 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/document.ts

diff --git a/src/components/Handle/handler.ts b/src/components/Handle/handler.ts
index 4ac4fb5b..b900369f 100644
--- a/src/components/Handle/handler.ts
+++ b/src/components/Handle/handler.ts
@@ -11,6 +11,7 @@ import {
   SetConnectionId,
   Connection,
 } from '../../types';
+import { getInitialDocument } from '../../utils/document';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 export type SetSourceIdFunc = (params: SetConnectionId) => void;
@@ -97,8 +98,12 @@ export function onMouseDown(
   onConnectStart?: OnConnectStartFunc,
   onConnectStop?: OnConnectStopFunc,
   onConnectEnd?: OnConnectEndFunc,
-  document: Document | ShadowRoot = window.document
+  document: Document | ShadowRoot | undefined = getInitialDocument()
 ): void {
+  if(!document) {
+    return;
+  }
+
   const reactFlowNode = (event.target as Element).closest('.react-flow');
   const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
   const elementBelowIsTarget = elementBelow?.classList.contains('target');
@@ -121,7 +126,7 @@ export function onMouseDown(
   setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
-  function onMouseMove(event: MouseEvent) {
+  const onMouseMove = (event: MouseEvent) => {
     setPosition({
       x: event.clientX - containerBounds.left,
       y: event.clientY - containerBounds.top,
@@ -148,9 +153,9 @@ export function onMouseDown(
       elementBelow.classList.add('react-flow__handle-connecting');
       elementBelow.classList.toggle('react-flow__handle-valid', isValid);
     }
-  }
+  };
 
-  function onMouseUp(event: MouseEvent) {
+  const onMouseUp = (event: MouseEvent) => {
     const { connection, isValid } = checkElementBelowIsValid(
       event,
       connectionMode,
@@ -174,7 +179,7 @@ export function onMouseDown(
 
     document.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
     document.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
-  }
+  };
 
   document.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
   document.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index f8b8aa71..92aca0fa 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -35,6 +35,7 @@ import {
 
 import '../../style.css';
 import '../../theme-default.css';
+import { getInitialDocument } from '../../utils/document';
 
 const defaultNodeTypes = {
   input: InputNode,
@@ -190,7 +191,7 @@ const ReactFlow = ({
   edgeUpdaterRadius = 10,
   nodeTypesId = '1',
   edgeTypesId = '1',
-  document = window.document,
+  document = getInitialDocument(),
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
diff --git a/src/store/index.ts b/src/store/index.ts
index 21ecc272..4f317ce1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,10 @@
 import configureStore from './configure-store';
 
 import { ReactFlowState, ConnectionMode } from '../types';
+import { getInitialDocument } from '../utils/document';
 
 export const initialState: ReactFlowState = {
-  document: window.document,
+  document: getInitialDocument(),
   width: 0,
   height: 0,
   transform: [0, 0, 1],
diff --git a/src/types/index.ts b/src/types/index.ts
index 2d752e26..0deb7992 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -431,7 +431,7 @@ export interface ReactFlowState {
   onConnectStop?: OnConnectStopFunc;
   onConnectEnd?: OnConnectEndFunc;
 
-  document: Document | ShadowRoot;
+  document?: Document | ShadowRoot;
 }
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void;
diff --git a/src/utils/document.ts b/src/utils/document.ts
new file mode 100644
index 00000000..a7f4c8b1
--- /dev/null
+++ b/src/utils/document.ts
@@ -0,0 +1 @@
+export const getInitialDocument = () => typeof window === 'undefined' ? undefined : window.document