Add customization for group rendering & collapsing of groups

Author: dolfbarr

package.json

@@ -10,7 +10,6 @@
   },
   "scripts": {
     "start:demo": "parcel demo/index.html --dist-dir ./build",
-    "start": "del-cli 'dist/*' && parcel src/index.tsx --dist-dir ./dist",
     "build": "del-cli 'dist/*' && parcel build src/index.tsx --dist-dir ./dist && npm run size",
     "test": "jest",
     "lint": "npx eslint \"./**/*.ts\" --cache --cache-strategy content",

src/index.test.tsx

@@ -8,6 +8,9 @@ describe('useLog', () => {
   const consoleGroup = jest
     .spyOn(console, 'group')
     .mockImplementation(() => null)
+  const consoleGroupCollapsed = jest
+    .spyOn(console, 'groupCollapsed')
+    .mockImplementation(() => null)
 
   beforeEach(() => {
     jest.useFakeTimers()
@@ -238,4 +241,27 @@ describe('useLog', () => {
 
     expect(consoleLog).not.toBeCalled()
   })
+
+  it('renders log with disabled groups', () => {
+    renderHook(() => {
+      const { log } = useLog({ isGroupingEnabled: true })
+      log('Test', { isGroupingEnabled: false })
+    })
+
+    expect(consoleGroup).not.toHaveBeenCalled()
+  })
+
+  it('renders log with disabled groups', () => {
+    renderHook(() => {
+      const { log } = useLog({ isGroupingEnabled: false })
+      log('Test', { isGroupingEnabled: true, isGroupCollapsed: true })
+    })
+
+    expect(consoleGroup).not.toHaveBeenCalled()
+    expect(consoleGroupCollapsed).toHaveBeenCalled()
+    // first call, first parameter for group name should exist
+    expect(consoleGroupCollapsed.mock.calls[0][0]).toBe(
+      `Mount in %c<TestComponent /> %c@ ${new Date().toLocaleTimeString()}`,
+    )
+  })
 })

src/index.tsx

@@ -7,12 +7,6 @@
  */
 
 import { useEffect, useRef } from 'react'
-import {
-  ALLOWED_NODE_ENVS,
-  CSS_CHANGE,
-  CSS_COMPONENT,
-  CSS_SUB_VALUE,
-} from './constants'
 import {
   UseLogConfig,
   UseLogReturn,
@@ -21,6 +15,12 @@ import {
   _PrintConfig,
 } from './types'
 import { getComponentName, print } from './utils'
+import {
+  ALLOWED_NODE_ENVS,
+  CSS_CHANGE,
+  CSS_COMPONENT,
+  CSS_SUB_VALUE,
+} from './constants'
 
 /**
  * Provides a function to log through react component lifecycle.
@@ -42,6 +42,8 @@ export function useLog({
     subValueCSS = CSS_SUB_VALUE,
   } = {},
   environments = ALLOWED_NODE_ENVS,
+  isGroupingEnabled = true,
+  isGroupCollapsed = false,
 }: UseLogConfig = {}): UseLogReturn {
   const componentName = getComponentName()
 
@@ -63,7 +65,7 @@ export function useLog({
     const prevValueRef = useRef<T>()
     const printProps: Pick<
       _PrintConfig<T>,
-      'value' | 'styles' | 'componentName'
+      'value' | 'styles' | 'componentName' | 'flags'
     > = {
       value: clonedValue,
       styles: {
@@ -72,6 +74,10 @@ export function useLog({
         changeCSS: props?.styles?.changeCSS ?? changeCSS,
       },
       componentName,
+      flags: {
+        isGrouped: props?.isGroupingEnabled ?? isGroupingEnabled,
+        isCollapsed: props?.isGroupCollapsed ?? isGroupCollapsed,
+      },
     }
 
     if (environments.includes(process.env.NODE_ENV ?? 'production')) {

src/types.ts

@@ -35,12 +35,25 @@ export interface Styles {
 }
 
 /** Describes configuration object at component level */
-export interface UseLogConfig {
+export type UseLogConfig = {
   /** Contains styles object with different CSS inline styles used in logging */
   styles?: Styles
   /** Contains array of environments of `process.env.NODE_ENV` in which logging will be allowed  */
   environments?: string[]
-}
+} & (
+  | {
+      /** Enable grouping for logs  */
+      isGroupingEnabled?: boolean
+      /** Render groups collapsed  */
+      isGroupCollapsed?: boolean
+    }
+  | {
+      /** Enable grouping for logs  */
+      isGroupingEnabled?: false
+      /** Render groups collapsed  */
+      isGroupCollapsed?: never
+    }
+)
 
 /** Describes configuration object at call level, can be used to override configuration */
 export type LogConfig = UseLogConfig
@@ -65,8 +78,23 @@ export interface _PrintConfig<T> {
   type?: _PrintTypes
   styles?: Styles
   componentName: string
+  flags?: _PrintFlags
 }
 
+/**
+ * Describes possible flags for internal print configuration
+ * @internal
+ */
+export type _PrintFlags =
+  | {
+      isGrouped?: boolean
+      isCollapsed?: boolean
+    }
+  | {
+      isGrouped?: false
+      isCollapsed?: never
+    }
+
 /**
  * Label types of print groups
  * @internal

src/utils.test.ts

@@ -27,6 +27,9 @@ describe('utils', () => {
     const consoleGroup = jest
       .spyOn(console, 'group')
       .mockImplementation(() => null)
+    const consoleGroupCollapsed = jest
+      .spyOn(console, 'groupCollapsed')
+      .mockImplementation(() => null)
     const consoleGroupEnd = jest
       .spyOn(console, 'groupEnd')
       .mockImplementation(() => null)
@@ -69,5 +72,37 @@ describe('utils', () => {
       expect(consoleLog).toHaveBeenCalledTimes(2)
       expect(consoleGroupEnd).toHaveBeenCalled()
     })
+
+    it('does not print group per config', () => {
+      print({
+        ...printProps,
+        flags: {
+          isGrouped: false,
+        },
+      })
+
+      expect(consoleGroup).not.toHaveBeenCalled()
+      expect(consoleLog).toHaveBeenCalledWith('       A Label: Test Value')
+      expect(consoleGroupEnd).not.toHaveBeenCalled()
+    })
+
+    it('prints collapsed group per config', () => {
+      print({
+        ...printProps,
+        flags: {
+          isGrouped: true,
+          isCollapsed: true,
+        },
+      })
+
+      expect(consoleGroup).not.toHaveBeenCalled()
+      expect(consoleGroupCollapsed).toHaveBeenCalledWith(
+        `Change in %c<SomeComponentName /> %c@ ${new Date().toLocaleTimeString()}`,
+        undefined,
+        undefined,
+      )
+      expect(consoleLog).toHaveBeenCalledWith('       A Label: Test Value')
+      expect(consoleGroupEnd).toHaveBeenCalled()
+    })
   })
 })

src/utils.ts

@@ -35,11 +35,20 @@ export function print<T>({
   label,
   prevValue,
   componentName,
+  flags = {
+    isCollapsed: false,
+    isGrouped: true,
+  },
   type = _PrintTypes.Change,
   group = getGroupLabel(type, componentName),
   styles: { componentCSS, subValueCSS, changeCSS } = {},
 }: _PrintConfig<T>): void {
-  console.group(group, componentCSS, subValueCSS)
+  flags.isGrouped &&
+    console[flags.isCollapsed ? 'groupCollapsed' : 'group'](
+      group,
+      componentCSS,
+      subValueCSS,
+    )
 
   if (!('prevValue' in arguments[0])) {
     console.log(`${label.padStart(14, ' ')}: ${String(value)}`)
@@ -51,5 +60,5 @@ export function print<T>({
     console.log(` Current value: %c${String(value)}`, changeCSS)
   }
 
-  console.groupEnd()
+  flags.isGrouped && console.groupEnd()
 }