diff --git a/example/src/App.tsx b/example/src/App.tsx index 0e099fb..319e828 100644 --- a/example/src/App.tsx +++ b/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( diff --git a/package.json b/package.json index 18866aa..1b9a478 100644 --- a/package.json +++ b/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" }, diff --git a/src/hooks/usePortal.ts b/src/hooks/usePortal.ts index d86550b..3ce1db8 100644 --- a/src/hooks/usePortal.ts +++ b/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,7 +14,7 @@ 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 @@ -28,7 +22,7 @@ export const usePortal = (hostName: string = 'root') => { const deregisterHost = useCallback(() => { dispatch({ - type: DEREGISTER_HOST_ACTION, + type: ACTIONS.DEREGISTER_HOST, hostName: hostName, }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -36,7 +30,7 @@ export const usePortal = (hostName: string = 'root') => { 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, }); diff --git a/src/index.ts b/src/index.ts index 5f16be8..134c2de 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/state/constants.ts b/src/state/constants.ts index e4bcef9..0accd8a 100644 --- a/src/state/constants.ts +++ b/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 }; diff --git a/src/state/index.ts b/src/state/index.ts index 888aa74..0237085 100644 --- a/src/state/index.ts +++ b/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'; diff --git a/src/state/reducer.ts b/src/state/reducer.ts index eb19264..eb838fa 100644 --- a/src/state/reducer.ts +++ b/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>, 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, diff --git a/src/state/types.d.ts b/src/state/types.d.ts index af20c05..821a779 100644 --- a/src/state/types.d.ts +++ b/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; } diff --git a/src/utilities/logger.ts b/src/utilities/logger.ts new file mode 100644 index 0000000..2f373c7 --- /dev/null +++ b/src/utilities/logger.ts @@ -0,0 +1,45 @@ +interface PrintOptions { + component?: string; + method?: string; + params?: Record | 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 };