chore: add error when hooks is used outside of EditorContext (#286)

Author: ankri

packages/core/src/editor/EditorContext.tsx

@@ -3,4 +3,4 @@ import { createContext } from 'react';
 import { EditorStore } from './store';
 
 export type EditorContext = EditorStore;
-export const EditorContext = createContext<EditorContext>({} as EditorContext);
+export const EditorContext = createContext<EditorContext>(null);

packages/core/src/editor/useInternalEditor.ts

@@ -4,8 +4,10 @@ import {
   QueryCallbacksFor,
   wrapConnectorHooks,
   EventHandlerConnectors,
+  ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT,
 } from '@craftjs/utils';
 import { useContext, useEffect, useMemo } from 'react';
+import invariant from 'tiny-invariant';
 
 import { EditorContext } from './EditorContext';
 import { QueryMethods } from './query';
@@ -34,6 +36,8 @@ export function useInternalEditor<C>(
 ): useInternalEditorReturnType<C> {
   const handler = useEventHandler();
   const store = useContext(EditorContext);
+  invariant(store, ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT);
+
   const collected = useCollector(store, collector);
 
   const connectorsUsage = useMemo(

packages/core/src/hooks/tests/EditorContext.test.tsx

@@ -0,0 +1,38 @@
+import {
+  ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT,
+  ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT,
+} from '@craftjs/utils';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { useEditor } from '../useEditor';
+import { useNode } from '../useNode';
+
+/**
+ * since we are mocking useInternalEditor in useEditor.test.tsx we are using a dedicated test suite here
+ */
+describe('Using useEditor outside of EditorContext', () => {
+  it('should throw an error when we use useEditor outside of <Editor />', () => {
+    const TestComponent = () => {
+      useEditor();
+      return null;
+    };
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrowError(ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT);
+  });
+});
+
+describe('Using useNode outside of EditorContext', () => {
+  it('should throw an error when we use useNode outside of <Editor />', () => {
+    const TestComponent = () => {
+      useNode();
+      return null;
+    };
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrowError(ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT);
+  });
+});

packages/core/src/nodes/useInternalNode.ts

@@ -1,5 +1,9 @@
-import { wrapConnectorHooks } from '@craftjs/utils';
+import {
+  wrapConnectorHooks,
+  ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT,
+} from '@craftjs/utils';
 import { useMemo, useContext } from 'react';
+import invariant from 'tiny-invariant';
 
 import { NodeContext } from './NodeContext';
 
@@ -8,6 +12,8 @@ import { Node } from '../interfaces';
 
 export function useInternalNode<S = null>(collect?: (node: Node) => S) {
   const context = useContext(NodeContext);
+  invariant(context, ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT);
+
   const { id, related } = context;
 
   const {

packages/utils/src/constants.ts

@@ -43,3 +43,11 @@ export const ERROR_DESERIALIZE_COMPONENT_NOT_IN_RESOLVER = `An Error occurred wh
 Available components in resolver: %availableComponents%
 
 More info: https://craft.js.org/r/docs/api/editor#props`;
+
+export const ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT = `You can only use useEditor in the context of <Editor />. 
+
+Please only use useEditor in components that are children of the <Editor /> component.`;
+
+export const ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT = `You can only use useNode in the context of <Editor />. 
+
+Please only use useNode in components that are children of the <Editor /> component.`;