Add custom group renderer

Author: dolfbarr

src/index.stories.tsx

@@ -28,6 +28,10 @@ export function ExampleComponent(): React.ReactElement {
   log(state)
   log(anotherState, { styles: { componentCSS: 'color: darkRed;' } })
 
+  log(anotherState, {
+    groupLabelRenderer: (type, name) => `Such a group! ${type} & ${name}`,
+  })
+
   useEffect(function setStateMount() {
     setState('onMount')
     setAnotherState('onMount')

src/index.test.tsx

@@ -317,7 +317,7 @@ describe('useLog', () => {
     expect(consoleWarn).toHaveBeenCalled()
   })
 
-  it('renders hook with custom log level', () => {
+  it('renders log with custom log level', () => {
     const consoleWarn = jest
       .spyOn(console, 'warn')
       .mockImplementation(() => null)
@@ -334,4 +334,14 @@ describe('useLog', () => {
     expect(consoleError).not.toHaveBeenCalled()
     expect(consoleWarn).toHaveBeenCalled()
   })
+
+  it('renders log with custom group name', () => {
+    renderHook(() => {
+      const { log } = useLog()
+      log('Test', { groupLabelRenderer: (type, name) => `${type} ${name}` })
+    })
+
+    // first call, first parameter (group label) should be modified
+    expect(consoleGroup.mock.calls[0][0]).toBe('Mount TestComponent')
+  })
 })

src/index.tsx

@@ -48,6 +48,7 @@ export function useLog({
   isGroupCollapsed = false,
   printer = console as Printer,
   logLevel = DEFAULT_LOG_LEVEL,
+  groupLabelRenderer,
 }: UseLogConfig = {}): UseLogReturn {
   const componentName = getComponentName()
 
@@ -69,7 +70,13 @@ export function useLog({
     const prevValueRef = useRef<T>()
     const printProps: Pick<
       _PrintConfig<T>,
-      'value' | 'styles' | 'componentName' | 'flags' | 'printer' | 'logLevel'
+      | 'value'
+      | 'styles'
+      | 'componentName'
+      | 'flags'
+      | 'printer'
+      | 'logLevel'
+      | 'groupLabelRenderer'
     > = {
       value: clonedValue,
       styles: {
@@ -84,6 +91,7 @@ export function useLog({
       },
       printer: props?.printer ?? printer,
       logLevel: props?.logLevel ?? logLevel,
+      groupLabelRenderer: props?.groupLabelRenderer ?? groupLabelRenderer,
     }
 
     if (environments.includes(process.env.NODE_ENV ?? 'production')) {

src/types.ts

@@ -34,7 +34,6 @@ export interface Styles {
   subValueCSS?: string
 }
 
-/** Describes configuration object at component level */
 export type UseLogConfig = {
   /** Contains styles object with different CSS inline styles used in logging */
   styles?: Styles
@@ -49,19 +48,24 @@ export type UseLogConfig = {
       isGroupingEnabled?: boolean
       /** Render groups collapsed  */
       isGroupCollapsed?: boolean
+      /** A function which will be used to render labels for the group  */
+      groupLabelRenderer?: (
+        /** Current stage of component lifecycle  */
+        type: ComponentLifecycleLabels,
+        componentName: string,
+      ) => string
     }
   | {
-      /** Enable grouping for logs  */
+      /** Disable grouping for logs  */
       isGroupingEnabled?: false
-      /** Render groups collapsed  */
       isGroupCollapsed?: never
+      groupLabelRenderer?: never
     }
 )
 
 /** Describes configuration object at call level, can be used to override configuration */
 export type LogConfig = UseLogConfig
 
-/** Return value of `useLog` hook */
 export interface UseLogReturn {
   /** Used for logging per component lifecycle */
   log: <T>(value: T, props?: LogConfig) => void
@@ -82,6 +86,10 @@ export interface _PrintConfig<T> {
   flags?: _PrintFlags
   printer?: Printer | Console
   logLevel?: LogLevels
+  groupLabelRenderer?: (
+    type: ComponentLifecycleLabels,
+    componentName: string,
+  ) => string
 }
 
 /**
@@ -97,10 +105,6 @@ export type _PrintFlags =
       isGrouped?: false
       isCollapsed?: never
     }
-
-/**
- * Label types of component lifecycle stages
- */
 export enum ComponentLifecycleLabels {
   Mount = 'Mount',
   Unmount = 'Unmount',

src/utils.test.ts

@@ -178,6 +178,19 @@ describe('utils', () => {
 
       expect(consoleLog).toHaveBeenCalledWith('     On Change: Test Value')
     })
+
+    it('prints with custom group label', () => {
+      print({
+        ...printProps,
+        groupLabelRenderer: (type, name) => `${type} ${name}`,
+      })
+
+      expect(consoleGroup).toHaveBeenCalledWith(
+        'Change SomeComponentName',
+        undefined,
+        undefined,
+      )
+    })
   })
 
   describe('getMessage', () => {

src/utils.ts

@@ -103,19 +103,22 @@ export function print<T>({
   styles: { componentCSS, subValueCSS, changeCSS } = {},
   printer = {},
   logLevel = 'log',
+  groupLabelRenderer,
 }: _PrintConfig<T>): void {
   const getCurrentPrinter = (
     method: keyof _SupportedConsole,
   ): _SupportedConsole[keyof _SupportedConsole] => getPrinter(printer, method)
 
   if (flags.isGrouped) {
     getCurrentPrinter(flags.isCollapsed ? 'groupCollapsed' : 'group')(
-      getGroupLabel(
-        type,
-        componentName,
-        Boolean(componentCSS),
-        Boolean(subValueCSS),
-      ),
+      groupLabelRenderer
+        ? groupLabelRenderer(type, componentName)
+        : getGroupLabel(
+            type,
+            componentName,
+            Boolean(componentCSS),
+            Boolean(subValueCSS),
+          ),
       componentCSS,
       subValueCSS,
     )