fix: error messages on development

example/src/App.tsx

@@ -1,9 +1,11 @@
 import React, { useMemo } from 'react';
 import { ShowcaseApp } from '@gorhom/showcase-template';
-import { PortalProvider } from '@gorhom/portal';
+import { PortalProvider, enableLogging } from '@gorhom/portal';
 import { screens } from './screens';
 import { version, description } from '../../package.json';
 
+enableLogging();
+
 const App = () => {
   // variables
   const author = useMemo(

package.json

@@ -30,9 +30,11 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "build": "bob build && yarn copy-dts",
+    "build": "yarn delete-build && bob build && yarn copy-dts && yarn delete-dts.js",
     "release": "release-it",
     "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" lib/typescript",
+    "delete-build": "rm -rf lib",
+    "delete-dts.js": "find ./lib/commonjs -name '*.d.js*' -delete && find ./lib/module -name '*.d.js*' -delete",
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && pod install"
   },

src/hooks/usePortal.ts

@@ -1,11 +1,5 @@
 import { ReactNode, useCallback, useContext } from 'react';
-import {
-  ADD_PORTAL_ACTION,
-  REGISTER_HOST_ACTION,
-  REMOVE_PORTAL_ACTION,
-  DEREGISTER_HOST_ACTION,
-  UPDATE_PORTAL_ACTION,
-} from '../state/constants';
+import { ACTIONS } from '../state/constants';
 import { PortalDispatchContext } from '../contexts';
 
 export const usePortal = (hostName: string = 'root') => {
@@ -20,23 +14,23 @@ export const usePortal = (hostName: string = 'root') => {
   //#region methods
   const registerHost = useCallback(() => {
     dispatch({
-      type: REGISTER_HOST_ACTION,
+      type: ACTIONS.REGISTER_HOST,
       hostName: hostName,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const deregisterHost = useCallback(() => {
     dispatch({
-      type: DEREGISTER_HOST_ACTION,
+      type: ACTIONS.DEREGISTER_HOST,
       hostName: hostName,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const addPortal = useCallback((name: string, node: ReactNode) => {
     dispatch({
-      type: ADD_PORTAL_ACTION,
+      type: ACTIONS.ADD_PORTAL,
       hostName,
       portalName: name,
       node,
@@ -46,7 +40,7 @@ export const usePortal = (hostName: string = 'root') => {
 
   const updatePortal = useCallback((name: string, node: ReactNode) => {
     dispatch({
-      type: UPDATE_PORTAL_ACTION,
+      type: ACTIONS.UPDATE_PORTAL,
       hostName,
       portalName: name,
       node,
@@ -56,7 +50,7 @@ export const usePortal = (hostName: string = 'root') => {
 
   const removePortal = useCallback((name: string) => {
     dispatch({
-      type: REMOVE_PORTAL_ACTION,
+      type: ACTIONS.REMOVE_PORTAL,
       hostName,
       portalName: name,
     });

src/index.ts

@@ -2,3 +2,4 @@ export { default as Portal } from './components/portal';
 export { default as PortalHost } from './components/portalHost';
 export { default as PortalProvider } from './components/portalProvider';
 export { usePortal } from './hooks/usePortal';
+export { enableLogging } from './utilities/logger';

src/state/constants.ts

@@ -1,17 +1,11 @@
-const REGISTER_HOST_ACTION = 'REGISTER_HOST_ACTION';
-const DEREGISTER_HOST_ACTION = 'DEREGISTER_HOST_ACTION';
-
-const ADD_PORTAL_ACTION = 'ADD_PORTAL_ACTION';
-const UPDATE_PORTAL_ACTION = 'UPDATE_PORTAL_ACTION';
-const REMOVE_PORTAL_ACTION = 'REMOVE_PORTAL_ACTION';
+enum ACTIONS {
+  REGISTER_HOST,
+  DEREGISTER_HOST,
+  ADD_PORTAL,
+  UPDATE_PORTAL,
+  REMOVE_PORTAL,
+}
 
 const INITIAL_STATE = {};
 
-export {
-  REGISTER_HOST_ACTION,
-  DEREGISTER_HOST_ACTION,
-  ADD_PORTAL_ACTION,
-  UPDATE_PORTAL_ACTION,
-  REMOVE_PORTAL_ACTION,
-  INITIAL_STATE,
-};
+export { ACTIONS, INITIAL_STATE };

src/state/index.ts

@@ -1,3 +1,3 @@
 export { reducer } from './reducer';
-export * from './constants';
+export { ACTIONS, INITIAL_STATE } from './constants';
 export type { ActionTypes } from './types';

src/state/reducer.ts

@@ -1,11 +1,6 @@
 import produce, { enableES5, setAutoFreeze } from 'immer';
-import {
-  REGISTER_HOST_ACTION,
-  DEREGISTER_HOST_ACTION,
-  ADD_PORTAL_ACTION,
-  REMOVE_PORTAL_ACTION,
-  UPDATE_PORTAL_ACTION,
-} from './constants';
+import { ACTIONS } from './constants';
+import { print } from '../utilities/logger';
 import type { PortalType } from '../types';
 import type { ActionTypes, AddPortalAction } from './types';
 
@@ -59,11 +54,11 @@ const updatePortal = (
   node: any
 ) => {
   if (!(hostName in draft)) {
-    if (__DEV__) {
-      console.error(
-        `Failed to update portal '${portalName}', '${hostName}' was not registered!`
-      );
-    }
+    print({
+      component: reducer.name,
+      method: updatePortal.name,
+      params: `Failed to update portal '${portalName}', '${hostName}' was not registered!`,
+    });
     return;
   }
 
@@ -79,11 +74,11 @@ const removePortal = (
   portalName: string
 ) => {
   if (!(hostName in draft)) {
-    if (__DEV__) {
-      console.error(
-        `Failed to remove portal '${portalName}', '${hostName}' was not registered!`
-      );
-    }
+    print({
+      component: reducer.name,
+      method: removePortal.name,
+      params: `Failed to remove portal '${portalName}', '${hostName}' was not registered!`,
+    });
     return;
   }
 
@@ -95,15 +90,15 @@ export const reducer = produce(
   (draft: Record<string, Array<PortalType>>, action: ActionTypes) => {
     const { type } = action;
     switch (type) {
-      case REGISTER_HOST_ACTION:
+      case ACTIONS.REGISTER_HOST:
         registerHost(draft, action.hostName);
         break;
 
-      case DEREGISTER_HOST_ACTION:
+      case ACTIONS.DEREGISTER_HOST:
         deregisterHost(draft, action.hostName);
         break;
 
-      case ADD_PORTAL_ACTION:
+      case ACTIONS.ADD_PORTAL:
         addPortal(
           draft,
           action.hostName,
@@ -112,7 +107,7 @@ export const reducer = produce(
         );
         break;
 
-      case UPDATE_PORTAL_ACTION:
+      case ACTIONS.UPDATE_PORTAL:
         updatePortal(
           draft,
           action.hostName,
@@ -121,7 +116,7 @@ export const reducer = produce(
         );
         break;
 
-      case REMOVE_PORTAL_ACTION:
+      case ACTIONS.REMOVE_PORTAL:
         removePortal(
           draft,
           action.hostName,

src/state/types.d.ts

@@ -1,39 +1,33 @@
 import type { ReactNode } from 'react';
-import type {
-  ADD_PORTAL_ACTION,
-  REGISTER_HOST_ACTION,
-  REMOVE_PORTAL_ACTION,
-  DEREGISTER_HOST_ACTION,
-  UPDATE_PORTAL_ACTION,
-} from './constants';
+import type { ACTIONS } from './constants';
 
 export interface AddPortalAction {
-  type: typeof ADD_PORTAL_ACTION;
+  type: ACTIONS;
   hostName: string;
   portalName: string;
   node: ReactNode;
 }
 
 export interface UpdatePortalAction {
-  type: typeof UPDATE_PORTAL_ACTION;
+  type: ACTIONS;
   hostName: string;
   portalName: string;
   node: ReactNode;
 }
 
 export interface RemovePortalAction {
-  type: typeof REMOVE_PORTAL_ACTION;
+  type: ACTIONS;
   hostName: string;
   portalName: string;
 }
 
 export interface RegisterHostAction {
-  type: typeof REGISTER_HOST_ACTION;
+  type: ACTIONS;
   hostName: string;
 }
 
 export interface UnregisterHostAction {
-  type: typeof DEREGISTER_HOST_ACTION;
+  type: ACTIONS;
   hostName: string;
 }
 

src/utilities/logger.ts

@@ -0,0 +1,45 @@
+interface PrintOptions {
+  component?: string;
+  method?: string;
+  params?: Record<string, any> | string | number | boolean;
+}
+
+type Print = (options: PrintOptions) => void;
+
+let isLoggingEnabled = false;
+
+const enableLogging = () => {
+  if (!__DEV__) {
+    console.warn('[Portal] could not enable logging on production!');
+    return;
+  }
+  isLoggingEnabled = true;
+};
+
+let print: Print = () => {};
+
+if (__DEV__) {
+  print = ({ component, method, params }) => {
+    if (!isLoggingEnabled) {
+      return;
+    }
+    let message = '';
+
+    if (typeof params === 'object') {
+      message = Object.keys(params)
+        .map(key => `${key}:${params[key]}`)
+        .join(' ');
+    } else {
+      message = `${params ?? ''}`;
+    }
+    // eslint-disable-next-line no-console
+    console.log(
+      `[Portal::${[component, method].filter(Boolean).join('::')}]`,
+      message
+    );
+  };
+}
+
+Object.freeze(print);
+
+export { print, enableLogging };