feat: SSR support (#637)

Author: tomas-c

.changeset/real-glasses-cross.md

@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+SSR support

packages/core/src/nodes/Element.tsx

@@ -1,4 +1,4 @@
-import { ERROR_TOP_LEVEL_ELEMENT_NO_ID, useEffectOnce } from '@craftjs/utils';
+import { ERROR_TOP_LEVEL_ELEMENT_NO_ID } from '@craftjs/utils';
 import React, { useState } from 'react';
 import invariant from 'tiny-invariant';
 
@@ -47,9 +47,7 @@ export function Element<T extends React.ElementType>({
     },
   }));
 
-  const [linkedNodeId, setLinkedNodeId] = useState<NodeId | null>(null);
-
-  useEffectOnce(() => {
+  const [linkedNodeId] = useState<NodeId | null>(() => {
     invariant(!!id, ERROR_TOP_LEVEL_ELEMENT_NO_ID);
     const { id: nodeId, data } = node;
 
@@ -77,9 +75,9 @@ export function Element<T extends React.ElementType>({
         linkedNodeId = tree.rootNodeId;
         actions.history.ignore().addLinkedNodeFromTree(tree, nodeId, id);
       }
-
-      setLinkedNodeId(linkedNodeId);
+      return linkedNodeId;
     }
+    return null;
   });
 
   return linkedNodeId ? <NodeElement id={linkedNodeId} /> : null;

packages/core/src/nodes/tests/Element.test.tsx

@@ -79,7 +79,9 @@ describe('<Element />', () => {
     });
 
     it('should call query.parseReactElement()', () => {
-      expect(parseReactElement).toHaveBeenCalledWith(
+      const arg0 = parseReactElement.mock.calls[0][0];
+      const arg0WithoutOwner = { ...arg0, _owner: null };
+      expect(arg0WithoutOwner).toEqual(
         <Element {...elementProps}>{children}</Element>
       );
     });

packages/core/src/render/Frame.tsx

@@ -1,5 +1,5 @@
 import { deprecationWarning, ROOT_NODE } from '@craftjs/utils';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import { useInternalEditor } from '../editor/useInternalEditor';
 import { SerializedNodes } from '../interfaces';
@@ -39,41 +39,28 @@ export const Frame: React.FC<React.PropsWithChildren<FrameProps>> = ({
     });
   }
 
-  const initialState = useRef({
-    initialChildren: children,
-    initialData: data || json,
-  });
+  const isLoaded = useRef(false);
 
-  const isInitialChildrenLoadedRef = useRef(false);
-
-  useEffect(() => {
-    const { initialChildren, initialData } = initialState.current;
+  if (!isLoaded.current) {
+    const initialData = data || json;
 
     if (initialData) {
       actions.history.ignore().deserialize(initialData);
-      return;
-    }
+    } else if (children) {
+      const rootNode = React.Children.only(children) as React.ReactElement;
 
-    // Prevent recreating Nodes from child elements if we already did it the first time
-    // Usually an issue in React Strict Mode where this hook is called twice which results in orphaned Nodes
-    const isInitialChildrenLoaded = isInitialChildrenLoadedRef.current;
+      const node = query.parseReactElement(rootNode).toNodeTree((node, jsx) => {
+        if (jsx === rootNode) {
+          node.id = ROOT_NODE;
+        }
+        return node;
+      });
 
-    if (!initialChildren || isInitialChildrenLoaded) {
-      return;
+      actions.history.ignore().addNodeTree(node);
     }
 
-    const rootNode = React.Children.only(initialChildren) as React.ReactElement;
-
-    const node = query.parseReactElement(rootNode).toNodeTree((node, jsx) => {
-      if (jsx === rootNode) {
-        node.id = ROOT_NODE;
-      }
-      return node;
-    });
-
-    actions.history.ignore().addNodeTree(node);
-    isInitialChildrenLoadedRef.current = true;
-  }, [actions, query]);
+    isLoaded.current = true;
+  }
 
   return <RenderRootNode />;
 };