feat: add parseFreshNode

packages/core/src/editor/query.tsx

@@ -9,6 +9,7 @@ import {
   NodeTree,
   SerializedNodes,
   SerializedNode,
+  FreshNode,
 } from '../interfaces';
 import invariant from 'tiny-invariant';
 import {
@@ -20,6 +21,7 @@ import {
   ROOT_NODE,
 } from '@craftjs/utils';
 import findPosition from '../events/findPosition';
+import { createNode } from '../utils/createNode';
 import { parseNodeFromJSX } from '../utils/parseNodeFromJSX';
 import { fromEntries } from '../utils/fromEntries';
 import { mergeTrees } from '../utils/mergeTrees';
@@ -173,22 +175,32 @@ export function QueryMethods(state: EditorState) {
     parseSerializedNode: (serializedNode: SerializedNode) => ({
       toNode(id?: NodeId): Node {
         const data = deserializeNode(serializedNode, state.options.resolver);
-
         invariant(data.type, ERROR_NOT_IN_RESOLVER);
+        return _()
+          .parseFreshNode({
+            ...(id ? { id } : {}),
+            data,
+          })
+          .toNode();
+      },
+    }),
 
-        return parseNodeFromJSX(
-          React.createElement(data.type, data.props),
-          (node) => {
-            if (id) {
-              node.id = id;
-            }
-            node.data = data;
+    parseFreshNode: (node: FreshNode) => ({
+      toNode(normalize?: (node: Node) => void): Node {
+        return createNode(node, (node) => {
+          if (node.data.parent === DEPRECATED_ROOT_NODE) {
+            node.data.parent = ROOT_NODE;
+          }
 
-            if (node.data.parent === DEPRECATED_ROOT_NODE) {
-              node.data.parent = ROOT_NODE;
-            }
+          const name = resolveComponent(state.options.resolver, node.data.type);
+          invariant(name !== null, ERROR_NOT_IN_RESOLVER);
+          node.data.displayName = node.data.displayName || name;
+          node.data.name = name;
+
+          if (normalize) {
+            normalize(node);
           }
-        );
+        });
       },
     }),
 

packages/core/src/editor/tests/query.test.tsx

@@ -8,13 +8,16 @@ import {
   secondaryButton,
   documentWithCardState,
 } from '../../tests/fixtures';
+import { createNode } from '../../utils/createNode';
 import { parseNodeFromJSX } from '../../utils/parseNodeFromJSX';
 import { deserializeNode } from '../../utils/deserializeNode';
-import { SerializedNode } from '@craftjs/core';
 
 jest.mock('../../utils/resolveComponent', () => ({
   resolveComponent: () => null,
 }));
+jest.mock('../../utils/createNode', () => ({
+  createNode: () => null,
+}));
 jest.mock('../../utils/parseNodeFromJSX', () => ({
   parseNodeFromJSX: () => null,
 }));
@@ -35,47 +38,68 @@ describe('query', () => {
   describe('parseSerializedNode', () => {
     describe('toNode', () => {
       let data = {
+        type: 'h2',
         props: { className: 'hello' },
         nodes: [],
         custom: {},
         isCanvas: false,
         parent: null,
+
         displayName: 'h2',
         hidden: false,
       };
-      let serializedNode: SerializedNode = {
-        type: 'h2',
-        ...data,
-      };
 
       beforeEach(() => {
-        deserializeNode = jest.fn().mockImplementation(() => serializedNode);
-        parseNodeFromJSX = jest.fn();
+        deserializeNode = jest.fn().mockImplementation(() => data);
+        createNode = jest.fn().mockImplementation(() => null);
 
-        query.parseSerializedNode(serializedNode).toNode();
+        query.parseSerializedNode(data).toNode();
       });
 
       it('should call deserializeNode', () => {
-        expect(deserializeNode).toBeCalledWith(
-          serializedNode,
-          state.options.resolver
-        );
+        expect(deserializeNode).toBeCalledWith(data, state.options.resolver);
       });
 
       it('should call parseNodeFromJSX', () => {
-        expect(parseNodeFromJSX).toBeCalledWith(
-          React.createElement('h2', data.props),
+        expect(createNode).toHaveBeenCalledWith(
+          {
+            data,
+          },
           expect.any(Function)
         );
       });
     });
   });
 
-  describe('parseReactElement', () => {
-    describe('toNodeTree', () => {});
+  describe('parseFreshNode', () => {
+    describe('toNode', () => {
+      let data = {
+        type: 'h1',
+      };
+
+      beforeEach(() => {
+        createNode = jest.fn().mockImplementation(() => null);
+        query
+          .parseFreshNode({
+            data: {
+              type: 'h1',
+            },
+          })
+          .toNode();
+      });
+
+      it('should call createNode', () => {
+        expect(createNode).toHaveBeenCalledWith(
+          {
+            data,
+          },
+          expect.any(Function)
+        );
+      });
+    });
   });
 
-  describe('parseNodeFromReactNode', () => {
+  describe('parseReactElement', () => {
     let tree;
     const node = <h1>Hello</h1>;
     const name = 'Document';

packages/core/src/interfaces/nodes.ts

@@ -55,6 +55,11 @@ export type NodeData = {
   _childCanvas?: Record<string, NodeId>; // TODO: Deprecate in favour of linkedNodes
 };
 
+export type FreshNode = {
+  id?: NodeId;
+  data: Partial<NodeData> & Required<Pick<NodeData, 'type'>>;
+};
+
 export type ReduceCompType =
   | string
   | {

packages/core/src/utils/createNode.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+import { NodeData, Node, FreshNode } from '../interfaces';
+import { produce } from 'immer';
+import { Canvas, deprecateCanvasComponent } from '../nodes/Canvas';
+import {
+  defaultElementProps,
+  Element,
+  elementPropToNodeData,
+} from '../nodes/Element';
+import { NodeProvider } from '../nodes/NodeContext';
+import { getRandomNodeId } from './getRandomNodeId';
+
+export function createNode(
+  newNode: FreshNode,
+  normalize?: (node: Node) => void
+) {
+  let actualType = newNode.data.type as any;
+  let id = newNode.id || getRandomNodeId();
+
+  return produce({}, (node: Node) => {
+    node.id = id;
+    node._hydrationTimestamp = Date.now();
+
+    node.data = {
+      type: actualType,
+      props: { ...newNode.data.props },
+      name:
+        typeof actualType == 'string' ? actualType : (actualType as any).name,
+      displayName:
+        typeof actualType == 'string' ? actualType : (actualType as any).name,
+      custom: {},
+      isCanvas: false,
+      hidden: false,
+      ...newNode.data,
+    } as NodeData;
+
+    node.related = {};
+
+    node.events = {
+      selected: false,
+      dragged: false,
+      hovered: false,
+    };
+
+    node.rules = {
+      canDrag: () => true,
+      canDrop: () => true,
+      canMoveIn: () => true,
+      canMoveOut: () => true,
+      ...((actualType.craft && actualType.craft.rules) || {}),
+    };
+
+    // @ts-ignore
+    if (node.data.type === Element || node.data.type === Canvas) {
+      let usingDeprecatedCanvas = node.data.type === Canvas;
+      const mergedProps = {
+        ...defaultElementProps,
+        ...node.data.props,
+      };
+
+      Object.keys(defaultElementProps).forEach((key) => {
+        node.data[elementPropToNodeData[key] || key] = mergedProps[key];
+        delete node.data.props[key];
+      });
+
+      actualType = node.data.type;
+
+      if (usingDeprecatedCanvas) {
+        node.data.isCanvas = true;
+        deprecateCanvasComponent();
+      }
+    }
+
+    if (normalize) {
+      normalize(node);
+    }
+
+    if (actualType.craft) {
+      node.data.props = {
+        ...(actualType.craft.props || actualType.craft.defaultProps || {}),
+        ...node.data.props,
+      };
+
+      const displayName = actualType.craft.displayName || actualType.craft.name;
+      if (displayName) {
+        node.data.displayName = displayName;
+      }
+
+      if (actualType.craft.isCanvas) {
+        node.data.isCanvas = node.data.isCanvas || actualType.craft.isCanvas;
+      }
+
+      if (actualType.craft.rules) {
+        Object.keys(actualType.craft.rules).forEach((key) => {
+          if (['canDrag', 'canDrop', 'canMoveIn', 'canMoveOut'].includes(key)) {
+            node.rules[key] = actualType.craft.rules[key];
+          }
+        });
+      }
+
+      if (actualType.craft.custom) {
+        node.data.custom = {
+          ...actualType.craft.custom,
+          ...node.data.custom,
+        };
+      }
+
+      if (actualType.craft.related) {
+        node.related = {};
+        const relatedNodeContext = {
+          id: node.id,
+          related: true,
+        };
+        Object.keys(actualType.craft.related).forEach((comp) => {
+          node.related[comp] = () =>
+            React.createElement(
+              NodeProvider,
+              relatedNodeContext,
+              React.createElement(actualType.craft.related[comp])
+            );
+        });
+      }
+    }
+  }) as Node;
+}