feature: SSR support

Before these changes, the Frame and Element components delayed rendering
user components until after the first render due to their reliance on
useEffect. This meant that (a) server-side rendering did not work (b)
pages with many deeply nested components took many render interations to
fully render a page which on slower devices would cause a visible layout
shift.

After this change, Element no longer relies on useEffect and Frame, no
longer relies on useEffect if initialData is provided.

.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

@@ -44,21 +44,21 @@ export const Frame: React.FC<React.PropsWithChildren<FrameProps>> = ({
     initialData: data || json,
   });
 
-  const isInitialChildrenLoadedRef = useRef(false);
+  const isInitialLoadedRef = useRef(false);
 
-  useEffect(() => {
-    const { initialChildren, initialData } = initialState.current;
+  if (!isInitialLoadedRef.current && initialState.current.initialData) {
+    actions.history.ignore().deserialize(initialState.current.initialData);
+    isInitialLoadedRef.current = true;
+  }
 
-    if (initialData) {
-      actions.history.ignore().deserialize(initialData);
-      return;
-    }
+  useEffect(() => {
+    const { initialChildren } = initialState.current;
 
     // 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 isInitialLoaded = isInitialLoadedRef.current;
 
-    if (!initialChildren || isInitialChildrenLoaded) {
+    if (!initialChildren || isInitialLoaded) {
       return;
     }
 
@@ -72,7 +72,7 @@ export const Frame: React.FC<React.PropsWithChildren<FrameProps>> = ({
     });
 
     actions.history.ignore().addNodeTree(node);
-    isInitialChildrenLoadedRef.current = true;
+    isInitialLoadedRef.current = true;
   }, [actions, query]);
 
   return <RenderRootNode />;