Add customization for console implementation

Author: dolfbarr

src/index.test.tsx

@@ -264,4 +264,39 @@ describe('useLog', () => {
       `Mount in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
     )
   })
+
+  it('renders hook with custom printer', () => {
+    const printer = { log: jest.fn() }
+
+    const printerLog = jest.spyOn(printer, 'log').mockImplementation(() => null)
+
+    renderHook(() => {
+      const { log } = useLog({ printer })
+      log('Test')
+    })
+
+    expect(consoleLog).not.toHaveBeenCalled()
+
+    expect(printerLog).toHaveBeenCalled()
+  })
+
+  it('renders log with custom printer', () => {
+    const printer = { log: jest.fn() }
+    const anotherPrinter = { log: jest.fn() }
+
+    const printerLog = jest.spyOn(printer, 'log').mockImplementation(() => null)
+    const anotherPrinterLog = jest
+      .spyOn(anotherPrinter, 'log')
+      .mockImplementation(() => null)
+
+    renderHook(() => {
+      const { log } = useLog({ printer })
+      log('Test', { printer: anotherPrinter })
+    })
+
+    expect(consoleLog).not.toHaveBeenCalled()
+    expect(printerLog).not.toHaveBeenCalled()
+
+    expect(anotherPrinterLog).toHaveBeenCalled()
+  })
 })

src/index.tsx

@@ -13,6 +13,7 @@ import {
   LogConfig,
   _PrintTypes,
   _PrintConfig,
+  Printer,
 } from './types'
 import { getComponentName, print } from './utils'
 import {
@@ -44,6 +45,7 @@ export function useLog({
   environments = ALLOWED_NODE_ENVS,
   isGroupingEnabled = true,
   isGroupCollapsed = false,
+  printer = console as Printer,
 }: UseLogConfig = {}): UseLogReturn {
   const componentName = getComponentName()
 
@@ -65,7 +67,7 @@ export function useLog({
     const prevValueRef = useRef<T>()
     const printProps: Pick<
       _PrintConfig<T>,
-      'value' | 'styles' | 'componentName' | 'flags'
+      'value' | 'styles' | 'componentName' | 'flags' | 'printer'
     > = {
       value: clonedValue,
       styles: {
@@ -78,6 +80,7 @@ export function useLog({
         isGrouped: props?.isGroupingEnabled ?? isGroupingEnabled,
         isCollapsed: props?.isGroupCollapsed ?? isGroupCollapsed,
       },
+      printer: props?.printer ?? printer,
     }
 
     if (environments.includes(process.env.NODE_ENV ?? 'production')) {

src/types.ts

@@ -40,6 +40,8 @@ export type UseLogConfig = {
   styles?: Styles
   /** Contains array of environments of `process.env.NODE_ENV` in which logging will be allowed  */
   environments?: string[]
+  /** Contains custom implementation of console  */
+  printer?: Printer | Console
 } & (
   | {
       /** Enable grouping for logs  */
@@ -79,6 +81,7 @@ export interface _PrintConfig<T> {
   styles?: Styles
   componentName: string
   flags?: _PrintFlags
+  printer?: Printer | Console
 }
 
 /**
@@ -104,3 +107,22 @@ export enum _PrintTypes {
   Unmount = 'Unmount',
   Change = 'Change',
 }
+
+/**
+ * Supported console methods
+ * @internal
+ */
+export type _SupportedConsole = Pick<
+  Console,
+  | 'group'
+  | 'groupCollapsed'
+  | 'groupEnd'
+  | 'log'
+  | 'info'
+  | 'error'
+  | 'warn'
+  | 'debug'
+>
+
+/** Describes custom implementation of console object with only supported methods used to render logs */
+export type Printer = Partial<_SupportedConsole>

src/utils.test.ts

@@ -1,5 +1,5 @@
-import { getGroupLabel, getComponentName, print } from './utils'
-import { _PrintConfig, _PrintTypes } from './types'
+import { getGroupLabel, getComponentName, print, getPrinter } from './utils'
+import { _PrintConfig, _PrintTypes, Printer } from './types'
 
 describe('utils', () => {
   describe('getGroupLabel', () => {
@@ -22,6 +22,28 @@ describe('utils', () => {
     })
   })
 
+  describe('getPrinter', () => {
+    it('returns printer for existing printer method', () => {
+      const printer: Printer = { log: jest.fn() }
+      expect(getPrinter(printer, 'log')).toBe(printer.log)
+    })
+
+    it('returns console for non-existing printer method', () => {
+      const printer: Printer = { log: jest.fn() }
+      expect(getPrinter(printer, 'warn')).toBe(console.warn)
+    })
+
+    it('returns console for empty printer', () => {
+      const printer: Printer = {}
+      expect(getPrinter(printer, 'log')).toBe(console.log)
+    })
+
+    it('returns console for empty printer method', () => {
+      const printer: Printer = { log: undefined }
+      expect(getPrinter(printer, 'log')).toBe(console.log)
+    })
+  })
+
   describe('print', () => {
     const consoleLog = jest.spyOn(console, 'log').mockImplementation(() => null)
     const consoleGroup = jest
@@ -104,5 +126,38 @@ describe('utils', () => {
       expect(consoleLog).toHaveBeenCalledWith('       A Label: Test Value')
       expect(consoleGroupEnd).toHaveBeenCalled()
     })
+
+    it('prints with custom printer', () => {
+      const printer: Printer = { log: jest.fn() }
+      const printPropsWithPrinter: _PrintConfig<string> = {
+        ...printProps,
+        printer,
+      }
+      const printerLog = jest
+        .spyOn(printer, 'log')
+        .mockImplementation(() => 'Some logs')
+
+      print(printPropsWithPrinter)
+
+      expect(consoleLog).not.toHaveBeenCalled()
+
+      expect(consoleGroup).toHaveBeenCalled()
+      expect(printerLog).toHaveBeenCalled()
+      expect(consoleGroupEnd).toHaveBeenCalled()
+    })
+
+    it('prints with custom empty printer', () => {
+      const printer: Printer = {}
+      const printPropsWithPrinter: _PrintConfig<string> = {
+        ...printProps,
+        printer,
+      }
+
+      print(printPropsWithPrinter)
+
+      expect(consoleGroup).toHaveBeenCalled()
+      expect(consoleLog).toHaveBeenCalled()
+      expect(consoleGroupEnd).toHaveBeenCalled()
+    })
   })
 })

src/utils.ts

@@ -1,4 +1,4 @@
-import { _PrintConfig, _PrintTypes } from './types'
+import { Printer, _PrintConfig, _PrintTypes, _SupportedConsole } from './types'
 
 export function getGroupLabel(
   type: _PrintTypes,
@@ -30,6 +30,16 @@ export function getComponentName(): string {
   }
 }
 
+export function getPrinter(
+  printer: Printer | Console,
+  method: keyof _SupportedConsole,
+): _SupportedConsole[keyof _SupportedConsole] {
+  return (
+    (printer && method in printer ? printer[method] : console[method]) ??
+    console[method]
+  )
+}
+
 export function print<T>({
   value,
   label,
@@ -42,23 +52,28 @@ export function print<T>({
   type = _PrintTypes.Change,
   group = getGroupLabel(type, componentName),
   styles: { componentCSS, subValueCSS, changeCSS } = {},
+  printer = {},
 }: _PrintConfig<T>): void {
-  flags.isGrouped &&
-    console[flags.isCollapsed ? 'groupCollapsed' : 'group'](
-      group,
-      componentCSS,
-      subValueCSS,
-    )
+  const getCurrentPrinter = (
+    method: keyof _SupportedConsole,
+  ): _SupportedConsole[keyof _SupportedConsole] => getPrinter(printer, method)
+  const groupMethod = flags.isCollapsed ? 'groupCollapsed' : 'group'
+
+  if (flags.isGrouped) {
+    getCurrentPrinter(groupMethod)(group, componentCSS, subValueCSS)
+  }
 
   if (!('prevValue' in arguments[0])) {
-    console.log(`${label.padStart(14, ' ')}: ${String(value)}`)
+    getCurrentPrinter('log')(`${label.padStart(14, ' ')}: ${String(value)}`)
   } else {
-    console.log(
+    getCurrentPrinter('log')(
       `Previous value: %c${String(arguments[0].prevValue)}`,
       subValueCSS,
     )
-    console.log(` Current value: %c${String(value)}`, changeCSS)
+    getCurrentPrinter('log')(` Current value: %c${String(value)}`, changeCSS)
   }
 
-  flags.isGrouped && console.groupEnd()
+  if (flags.isGrouped) {
+    getCurrentPrinter('groupEnd')()
+  }
 }