Add custom print function

Author: dolfbarr

src/index.test.tsx

@@ -344,4 +344,28 @@ describe('useLog', () => {
     // first call, first parameter (group label) should be modified
     expect(consoleGroup.mock.calls[0][0]).toBe('Mount TestComponent')
   })
+
+  it('renders log with custom print function', () => {
+    const render = jest.fn()
+    const anotherRender = jest.fn()
+    const printerSpy = jest.spyOn(utils, 'print')
+
+    renderHook(() => {
+      const { log } = useLog({ render })
+      log('Test', { render: anotherRender })
+    })
+
+    expect(render).not.toHaveBeenCalled()
+    expect(printerSpy).not.toHaveBeenCalled()
+    expect(anotherRender).toHaveBeenCalledWith({
+      componentName: 'TestComponent',
+      flags: {
+        isCollapsed: false,
+        isGrouped: true,
+      },
+      prevValue: undefined,
+      type: 'Mount',
+      value: 'Test',
+    })
+  })
 })

src/index.tsx

@@ -15,7 +15,7 @@ import {
   _PrintConfig,
   Printer,
 } from './types'
-import { getComponentName, print } from './utils'
+import { getComponentName, getRenderFunctionProps, print } from './utils'
 import {
   ALLOWED_NODE_ENVS,
   CSS_CHANGE,
@@ -49,6 +49,7 @@ export function useLog({
   printer = console as Printer,
   logLevel = DEFAULT_LOG_LEVEL,
   groupLabelRenderer,
+  render,
 }: UseLogConfig = {}): UseLogReturn {
   const componentName = getComponentName()
 
@@ -98,22 +99,30 @@ export function useLog({
       function logHooks(): void {
         const isUnmounting = useRef(false)
 
+        const printFunc = (printProps: _PrintConfig<T>): void =>
+          (props?.render ?? render ?? print)(
+            getRenderFunctionProps(
+              printProps,
+              Boolean(props?.render ?? render),
+            ),
+          )
+
         useEffect(function setIsUnmounting() {
           return function setIsUnmountingOnMount() {
             isUnmounting.current = true
           }
         }, [])
 
         useEffect(function onMount() {
-          print({
+          printFunc({
             type: ComponentLifecycleLabels.Mount,
             ...printProps,
           })
 
           prevValueRef.current = value
 
           return function onUnmount() {
-            print({
+            printFunc({
               type: ComponentLifecycleLabels.Unmount,
               prevValue: prevValueRef.current,
               ...printProps,
@@ -123,7 +132,7 @@ export function useLog({
 
         useEffect(
           function onChange() {
-            print({
+            printFunc({
               type: ComponentLifecycleLabels.Change,
               prevValue: prevValueRef.current,
               ...printProps,

src/types.ts

@@ -42,6 +42,8 @@ export type UseLogConfig = {
   /** Contains custom implementation of console  */
   printer?: Printer | Console
   logLevel?: LogLevels
+  /** Custom function which will be used for rendering the result, provided with useful data */
+  render?: <T>(props: RenderProps<T>) => void
 } & (
   | {
       /** Enable grouping for logs  */
@@ -71,6 +73,14 @@ export interface UseLogReturn {
   log: <T>(value: T, props?: LogConfig) => void
 }
 
+/** Describes input parameters for custom printer function */
+export type RenderProps<T> = Pick<
+  _PrintConfig<T>,
+  'value' | 'prevValue' | 'type' | 'componentName'
+> & {
+  flags?: Pick<_PrintFlags, 'isGrouped' | 'isCollapsed'>
+}
+
 /**
  * Describes configuration object of the inner print function
  * @internal

src/utils.test.ts

@@ -236,4 +236,25 @@ describe('utils', () => {
       )
     })
   })
+
+  describe('getRenderFunctionProps', () => {
+    const printProps: _PrintConfig<string> = {
+      value: 'Test Value',
+      componentName: 'SomeComponentName',
+      printer: console,
+      logLevel: 'warn',
+    }
+
+    it('returns print props', () => {
+      expect(utils.getRenderFunctionProps(printProps, false)).toHaveProperty(
+        'logLevel',
+      )
+    })
+
+    it('returns print props', () => {
+      expect(utils.getRenderFunctionProps(printProps, true)).not.toHaveProperty(
+        'logLevel',
+      )
+    })
+  })
 })

src/utils.ts

@@ -4,6 +4,7 @@ import {
   _PrintConfig,
   ComponentLifecycleLabels,
   _SupportedConsole,
+  RenderProps,
 } from './types'
 import {
   CURRENT_VALUE_LABEL,
@@ -81,6 +82,28 @@ export function getComponentName(): string {
   }
 }
 
+export function getRenderFunctionProps<T>(
+  props: _PrintConfig<T>,
+  isRender?: boolean,
+): _PrintConfig<T> | RenderProps<T> {
+  if (isRender) {
+    const renderProps: RenderProps<T> = {
+      value: props.value,
+      prevValue: props.prevValue,
+      type: props.type,
+      componentName: props.componentName,
+      flags: {
+        isGrouped: props.flags?.isGrouped,
+        isCollapsed: props.flags?.isCollapsed,
+      },
+    }
+
+    return renderProps
+  }
+
+  return props
+}
+
 export function getPrinter(
   printer: Printer | Console,
   method: keyof _SupportedConsole,