chore: merge improvements from next (#310)

* feat: throw error if component is missing from resolver (#293)

* feat: throw error if component is missing from resolver

* chore: feedback

* debug

* feat: improve dnd (#300)

* fix: drag shadow (#304)

* chore: comment

Co-authored-by: Andy Krings-Stern <[email protected]>

Co-authored-by: Andy Krings-Stern <[email protected]>

Author: prevwong

cypress/support/dnd.ts

@@ -199,14 +199,14 @@ Cypress.Commands.add(
         });
 
       if (position === 'inside') {
-        cy.get('@target').trigger('dragenter', {
+        cy.get('@target').trigger('dragover', {
           clientX: Math.floor(x),
           clientY: Math.floor(y),
           dataTransfer,
           force: true,
         });
       } else {
-        cy.get('@parent').trigger('dragenter', {
+        cy.get('@parent').trigger('dragover', {
           clientX: Math.floor(x),
           clientY: Math.floor(y),
           dataTransfer,

packages/core/src/editor/actions.ts

@@ -8,6 +8,7 @@ import {
   ERROR_DELETE_TOP_LEVEL_NODE,
   CallbacksFor,
   Delete,
+  ERROR_NOT_IN_RESOLVER,
 } from '@craftjs/utils';
 import invariant from 'tiny-invariant';
 
@@ -48,6 +49,16 @@ const Methods = (
     const iterateChildren = (id: NodeId, parentId?: NodeId) => {
       const node = tree.nodes[id];
 
+      if (typeof node.data.type !== 'string') {
+        invariant(
+          state.options.resolver[node.data.name],
+          ERROR_NOT_IN_RESOLVER.replace(
+            '%node_type%',
+            `${(node.data.type as any).name}`
+          )
+        );
+      }
+
       state.nodes[id] = {
         ...node,
         data: {

packages/core/src/editor/query.tsx

@@ -40,6 +40,8 @@ export function QueryMethods(state: EditorState) {
   return {
     /**
      * Determine the best possible location to drop the source Node relative to the target Node
+     *
+     * TODO: replace with Positioner.computeIndicator();
      */
     getDropPlaceholder: (
       source: NodeId | Node,
@@ -91,7 +93,7 @@ export function QueryMethods(state: EditorState) {
           ...dropAction,
           currentNode,
         },
-        error: false,
+        error: null,
       };
 
       // If source Node is already in the editor, check if it's draggable
@@ -116,6 +118,10 @@ export function QueryMethods(state: EditorState) {
       return options;
     },
 
+    getNodes() {
+      return state.nodes;
+    },
+
     /**
      * Helper methods to describe the specified Node
      * @param id
@@ -148,7 +154,7 @@ export function QueryMethods(state: EditorState) {
       ): NodeTree {
         let node = parseNodeFromJSX(reactElement, (node, jsx) => {
           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;
 

packages/core/src/editor/useInternalEditor.ts

@@ -3,10 +3,10 @@ import {
   useCollectorReturnType,
   QueryCallbacksFor,
   wrapConnectorHooks,
-  ChainableConnectors,
+  EventHandlerConnectors,
   ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT,
 } from '@craftjs/utils';
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import invariant from 'tiny-invariant';
 
 import { EditorContext } from './EditorContext';
@@ -28,24 +28,36 @@ export type useInternalEditorReturnType<C = null> = useCollectorReturnType<
 > & {
   inContext: boolean;
   store: EditorStore;
-  connectors: ChainableConnectors<
-    CoreEventHandlers['connectors'],
-    React.ReactElement
-  >;
+  connectors: EventHandlerConnectors<CoreEventHandlers, React.ReactElement>;
 };
 
 export function useInternalEditor<C>(
   collector?: EditorCollector<C>
 ): useInternalEditorReturnType<C> {
+  const handler = useEventHandler();
   const store = useContext(EditorContext);
   invariant(store, ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT);
 
-  const handlers = useEventHandler();
   const collected = useCollector(store, collector);
 
+  const connectorsUsage = useMemo(
+    () => handler && handler.createConnectorsUsage(),
+    [handler]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (!connectorsUsage) {
+        return;
+      }
+
+      connectorsUsage.cleanup();
+    };
+  }, [connectorsUsage]);
+
   const connectors = useMemo(
-    () => handlers && wrapConnectorHooks(handlers.connectors),
-    [handlers]
+    () => connectorsUsage && wrapConnectorHooks(connectorsUsage.connectors),
+    [connectorsUsage]
   );
 
   return {