hotfix: migrate immer

packages/core/package.json

@@ -38,7 +38,6 @@
     "@craftjs/utils": "^0.2.0-alpha.17",
     "@types/react": "^16.9.11",
     "debounce": "^1.2.0",
-    "immer": "^3.1.3",
     "lodash": "^4.17.20",
     "shortid": "^2.2.15",
     "tiny-invariant": "^1.0.6"

packages/core/src/editor/tests/actions.test.ts

@@ -1,8 +1,7 @@
-import { EditorState } from '@craftjs/core';
-import { produce } from 'immer';
 import mapValues from 'lodash/mapValues';
 
 import { QueryMethods } from '../../editor/query';
+import { EditorState } from '../../interfaces';
 import { createNode } from '../../utils/createNode';
 import {
   createTestState,
@@ -11,10 +10,12 @@ import {
 } from '../../utils/testHelpers';
 import { ActionMethods } from '../actions';
 
-const Actions = (state) => (cb) =>
-  produce<EditorState>(state, (draft) =>
-    cb(ActionMethods(draft as any, QueryMethods(state) as any))
-  );
+// TODO: create a cleaner way to test Action methods
+const Actions = (state: EditorState) => (cb) => {
+  const methods = ActionMethods(state, QueryMethods(state) as any);
+  cb(methods);
+  return state;
+};
 
 describe('actions.add', () => {
   let state, rootNode;

packages/core/src/utils/createNode.ts

@@ -1,129 +1,143 @@
-import { produce } from 'immer';
 import React from 'react';
 
 import { getRandomNodeId } from './getRandomNodeId';
 
-import { NodeData, Node, FreshNode } from '../interfaces';
-import { Canvas, deprecateCanvasComponent } from '../nodes/Canvas';
+import { Node, FreshNode } from '../interfaces';
 import {
   defaultElementProps,
   Element,
+  Canvas,
   elementPropToNodeData,
-} from '../nodes/Element';
+  deprecateCanvasComponent,
+} from '../nodes';
 import { NodeProvider } from '../nodes/NodeContext';
 
+const getNodeTypeName = (type: string | { name: string }) =>
+  typeof type == 'string' ? type : type.name;
+
 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 = {
+  const node: Node = {
+    id,
+    _hydrationTimestamp: Date.now(),
+    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,
+      name: getNodeTypeName(actualType),
+      displayName: getNodeTypeName(actualType),
+      props: {},
       custom: {},
+      parent: null,
       isCanvas: false,
       hidden: false,
       nodes: [],
       linkedNodes: {},
       ...newNode.data,
-    } as NodeData;
-
-    node.related = {};
-
-    node.events = {
+    },
+    related: {},
+    events: {
       selected: false,
       dragged: false,
       hovered: false,
-    };
-
-    node.rules = {
+    },
+    rules: {
       canDrag: () => true,
       canDrop: () => true,
       canMoveIn: () => true,
       canMoveOut: () => true,
-      ...((actualType.craft && actualType.craft.rules) || {}),
+    },
+    dom: null,
+  };
+
+  // @ts-ignore
+  if (node.data.type === Element || node.data.type === Canvas) {
+    const mergedProps = {
+      ...defaultElementProps,
+      ...node.data.props,
     };
 
-    // @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.props = Object.keys(node.data.props).reduce((props, key) => {
+      if (Object.keys(defaultElementProps).includes(key)) {
+        // If a <Element /> specific props is found (ie: "is", "canvas")
+        // Replace the node.data with the value specified in the prop
         node.data[elementPropToNodeData[key] || key] = mergedProps[key];
-        delete node.data.props[key];
-      });
+      } else {
+        // Otherwise include the props in the node as usual
+        props[key] = node.data.props[key];
+      }
 
-      actualType = node.data.type;
+      return props;
+    }, {});
 
-      if (usingDeprecatedCanvas) {
-        node.data.isCanvas = true;
-        deprecateCanvasComponent();
-      }
-    }
+    actualType = node.data.type;
+    node.data.name = getNodeTypeName(actualType);
+    node.data.displayName = getNodeTypeName(actualType);
 
-    if (normalize) {
-      normalize(node);
+    const usingDeprecatedCanvas = node.data.type === Canvas;
+    if (usingDeprecatedCanvas) {
+      node.data.isCanvas = true;
+      deprecateCanvasComponent();
     }
+  }
 
-    if (actualType.craft) {
-      node.data.props = {
-        ...(actualType.craft.props || actualType.craft.defaultProps || {}),
-        ...node.data.props,
-      };
+  if (normalize) {
+    normalize(node);
+  }
 
-      const displayName = actualType.craft.displayName || actualType.craft.name;
-      if (displayName) {
-        node.data.displayName = displayName;
-      }
+  // TODO: use UserComponentConfig type
+  const userComponentConfig = actualType.craft as any;
 
-      if (actualType.craft.isCanvas) {
-        node.data.isCanvas = node.data.isCanvas || actualType.craft.isCanvas;
-      }
+  if (userComponentConfig) {
+    node.data.displayName =
+      userComponentConfig.displayName ||
+      userComponentConfig.name ||
+      node.data.displayName;
 
-      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];
-          }
-        });
-      }
+    node.data.props = {
+      ...(userComponentConfig.props || userComponentConfig.defaultProps || {}),
+      ...node.data.props,
+    };
 
-      if (actualType.craft.custom) {
-        node.data.custom = {
-          ...actualType.craft.custom,
-          ...node.data.custom,
-        };
-      }
+    node.data.custom = {
+      ...(userComponentConfig.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])
-            );
-        });
-      }
+    if (
+      userComponentConfig.isCanvas !== undefined &&
+      userComponentConfig.isCanvas !== null
+    ) {
+      node.data.isCanvas = userComponentConfig.isCanvas;
+    }
+
+    if (userComponentConfig.rules) {
+      Object.keys(userComponentConfig.rules).forEach((key) => {
+        if (['canDrag', 'canDrop', 'canMoveIn', 'canMoveOut'].includes(key)) {
+          node.rules[key] = userComponentConfig.rules[key];
+        }
+      });
     }
-  }) as Node;
+
+    if (userComponentConfig.related) {
+      const relatedNodeContext = {
+        id: node.id,
+        related: true,
+      };
+
+      Object.keys(userComponentConfig.related).forEach((comp) => {
+        node.related[comp] = () =>
+          React.createElement(
+            NodeProvider,
+            relatedNodeContext,
+            React.createElement(userComponentConfig.related[comp])
+          );
+      });
+    }
+  }
+
+  return node;
 }

packages/core/src/utils/tests/createNode.test.tsx

@@ -1,3 +1,4 @@
+import { Element } from '../../nodes';
 import { createNode } from '../createNode';
 import { createTestNode } from '../createTestNode';
 
@@ -8,7 +9,7 @@ const expectNode = (node, testData) => {
   const match = createTestNode(node.id, {
     ...testData,
     props: isUserComponent
-      ? { ...(type.craft.defaultProps || {}), ...testData.props }
+      ? { ...(type.craft.props || {}), ...testData.props }
       : testData.props || {},
     custom: isUserComponent ? type.craft.custom : {},
     name: typeof type === 'string' ? type : type.name,
@@ -38,9 +39,10 @@ describe('createNode', () => {
   const props = { href: 'href' };
 
   describe('Returns correct type and props', () => {
-    it('should transform a link correctly', () => {
+    it('should create a Node object correctly', () => {
       const data = {
         type: 'a',
+        parent: null,
         props,
       };
 
@@ -73,29 +75,61 @@ describe('createNode', () => {
         },
       });
     });
+    describe('When type=Element', () => {
+      it('should parse Element props as node config', () => {
+        const testNode = {
+          data: {
+            type: Element,
+            parent: 'ROOT',
+            props: {
+              is: 'a',
+              href: 'craft.js.org',
+              style: { color: '#fff' },
+            },
+          },
+        };
+        const node = createNode(testNode);
+
+        const { is: type, ...props } = testNode.data.props;
 
+        expectNode(node, {
+          type,
+          props,
+          parent: 'ROOT',
+        });
+      });
+    });
     describe('when a User Component is passed', () => {
-      const Component = () => {};
-      Component.craft = {
-        custom: {
-          css: {
-            background: '#fff',
+      let Component;
+
+      beforeEach(() => {
+        Component = () => {
+          return null;
+        };
+
+        Component.craft = {
+          custom: {
+            css: {
+              background: '#fff',
+            },
           },
-        },
-        rules: {
-          canMoveIn: () => false,
-        },
-        defaultProps: {
-          text: '#000',
-        },
-        related: {
-          settings: () => {},
-        },
-      };
+          rules: {
+            canMoveIn: () => false,
+          },
+          props: {
+            text: '#000',
+          },
+          related: {
+            settings: () => {},
+          },
+        };
+      });
 
       it('should return node with correct type and user component config', () => {
         const data = {
           type: Component,
+          parent: null,
+          props: {},
         };
 
         const node = createNode({

packages/layers/src/events/LayerHandlers.ts

@@ -70,17 +70,19 @@ export class LayerHandlers extends DerivedCoreEventHandlers<{
                   currentCanvasHovered.data.nodes[
                     currentCanvasHovered.data.nodes.length - 1
                   ];
-                if (!currNode) return;
-                indicator.placement.currentNode = editorStore.query
-                  .node(currNode)
-                  .get();
-                indicator.placement.index =
-                  currentCanvasHovered.data.nodes.length;
-                indicator.placement.where = 'after';
-                indicator.placement.parent = currentCanvasHovered;
+
+                if (!currNode) {
+                  return;
+                }
 
                 LayerHandlers.events.indicator = {
                   ...indicator,
+                  placement: {
+                    currentNode: editorStore.query.node(currNode).get(),
+                    index: currentCanvasHovered.data.nodes.length,
+                    where: 'after',
+                    parent: currentCanvasHovered,
+                  },
                   onCanvas: true,
                 };