Add custom log level

Author: dolfbarr

src/constants.ts

@@ -1,5 +1,9 @@
+import { LogLevels } from './types'
+
 export const CSS_COMPONENT = 'color: DodgerBlue'
 export const CSS_CHANGE = 'color: green; font-weight: bold;'
 export const CSS_SUB_VALUE = 'color: SlateGray; font-weight: thin;'
 
 export const ALLOWED_NODE_ENVS = ['dev', 'development']
+
+export const DEFAULT_LOG_LEVEL: LogLevels = 'log'

src/index.test.tsx

@@ -302,4 +302,36 @@ describe('useLog', () => {
 
     expect(anotherPrinterLog).toHaveBeenCalled()
   })
+
+  it('renders hook with custom log level', () => {
+    const consoleWarn = jest
+      .spyOn(console, 'warn')
+      .mockImplementation(() => null)
+
+    renderHook(() => {
+      const { log } = useLog({ logLevel: 'warn' })
+      log('Test')
+    })
+
+    expect(consoleLog).not.toHaveBeenCalled()
+    expect(consoleWarn).toHaveBeenCalled()
+  })
+
+  it('renders hook with custom log level', () => {
+    const consoleWarn = jest
+      .spyOn(console, 'warn')
+      .mockImplementation(() => null)
+    const consoleError = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => null)
+
+    renderHook(() => {
+      const { log } = useLog({ logLevel: 'error' })
+      log('Test', { logLevel: 'warn' })
+    })
+
+    expect(consoleLog).not.toHaveBeenCalled()
+    expect(consoleError).not.toHaveBeenCalled()
+    expect(consoleWarn).toHaveBeenCalled()
+  })
 })

src/index.tsx

@@ -21,6 +21,7 @@ import {
   CSS_CHANGE,
   CSS_COMPONENT,
   CSS_SUB_VALUE,
+  DEFAULT_LOG_LEVEL,
 } from './constants'
 
 /**
@@ -46,6 +47,7 @@ export function useLog({
   isGroupingEnabled = true,
   isGroupCollapsed = false,
   printer = console as Printer,
+  logLevel = DEFAULT_LOG_LEVEL,
 }: UseLogConfig = {}): UseLogReturn {
   const componentName = getComponentName()
 
@@ -67,7 +69,7 @@ export function useLog({
     const prevValueRef = useRef<T>()
     const printProps: Pick<
       _PrintConfig<T>,
-      'value' | 'styles' | 'componentName' | 'flags' | 'printer'
+      'value' | 'styles' | 'componentName' | 'flags' | 'printer' | 'logLevel'
     > = {
       value: clonedValue,
       styles: {
@@ -81,6 +83,7 @@ export function useLog({
         isCollapsed: props?.isGroupCollapsed ?? isGroupCollapsed,
       },
       printer: props?.printer ?? printer,
+      logLevel: props?.logLevel ?? logLevel,
     }
 
     if (environments.includes(process.env.NODE_ENV ?? 'production')) {

src/types.ts

@@ -42,6 +42,7 @@ export type UseLogConfig = {
   environments?: string[]
   /** Contains custom implementation of console  */
   printer?: Printer | Console
+  logLevel?: LogLevels
 } & (
   | {
       /** Enable grouping for logs  */
@@ -82,6 +83,7 @@ export interface _PrintConfig<T> {
   componentName: string
   flags?: _PrintFlags
   printer?: Printer | Console
+  logLevel?: LogLevels
 }
 
 /**
@@ -108,20 +110,19 @@ export enum _PrintTypes {
   Change = 'Change',
 }
 
+/** Supported log levels which can be used in the console or custom console implementation */
+export type LogLevels = keyof Pick<
+  Console,
+  'log' | 'info' | 'error' | 'warn' | 'debug'
+>
+
 /**
  * Supported console methods
  * @internal
  */
 export type _SupportedConsole = Pick<
   Console,
-  | 'group'
-  | 'groupCollapsed'
-  | 'groupEnd'
-  | 'log'
-  | 'info'
-  | 'error'
-  | 'warn'
-  | 'debug'
+  'group' | 'groupCollapsed' | 'groupEnd' | LogLevels
 >
 
 /** Describes custom implementation of console object with only supported methods used to render logs */

src/utils.test.ts

@@ -160,5 +160,20 @@ describe('utils', () => {
       expect(consoleLog).toHaveBeenCalled()
       expect(consoleGroupEnd).toHaveBeenCalled()
     })
+
+    it('prints with custom log level', () => {
+      const consoleWarn = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => null)
+      print({
+        ...printProps,
+        logLevel: 'warn',
+      })
+
+      expect(consoleGroup).toHaveBeenCalled()
+      expect(consoleLog).not.toHaveBeenCalled()
+      expect(consoleWarn).toHaveBeenCalled()
+      expect(consoleGroupEnd).toHaveBeenCalled()
+    })
   })
 })

src/utils.ts

@@ -64,6 +64,7 @@ export function print<T>({
   group = getGroupLabel(type, componentName),
   styles: { componentCSS, subValueCSS, changeCSS } = {},
   printer = {},
+  logLevel = 'log',
 }: _PrintConfig<T>): void {
   const getCurrentPrinter = (
     method: keyof _SupportedConsole,
@@ -76,13 +77,13 @@ export function print<T>({
   }
 
   if ('prevValue' in arguments[0]) {
-    getCurrentPrinter('log')(
+    getCurrentPrinter(logLevel)(
       `Previous value: %c${String(arguments[0].prevValue)}`,
       subValueCSS,
     )
-    getCurrentPrinter('log')(` Current value: %c${String(value)}`, changeCSS)
+    getCurrentPrinter(logLevel)(` Current value: %c${String(value)}`, changeCSS)
   } else {
-    getCurrentPrinter('log')(`${label.padStart(14, ' ')}: ${String(value)}`)
+    getCurrentPrinter(logLevel)(`${label.padStart(14, ' ')}: ${String(value)}`)
   }
 
   if (flags.isGrouped) {