diff --git a/package.json b/package.json
index cfb42e9..154910c 100644
--- a/package.json
+++ b/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",
diff --git a/src/index.test.tsx b/src/index.test.tsx
index f99f487..ad4a9bc 100644
--- a/src/index.test.tsx
+++ b/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 %c@ ${new Date().toLocaleTimeString()}`,
+ )
+ })
})
diff --git a/src/index.tsx b/src/index.tsx
index d92b681..e2704a9 100644
--- a/src/index.tsx
+++ b/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()
const printProps: Pick<
_PrintConfig,
- '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')) {
diff --git a/src/types.ts b/src/types.ts
index 32ddab5..f131773 100644
--- a/src/types.ts
+++ b/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 {
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
diff --git a/src/utils.test.ts b/src/utils.test.ts
index b730598..d56b409 100644
--- a/src/utils.test.ts
+++ b/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 %c@ ${new Date().toLocaleTimeString()}`,
+ undefined,
+ undefined,
+ )
+ expect(consoleLog).toHaveBeenCalledWith(' A Label: Test Value')
+ expect(consoleGroupEnd).toHaveBeenCalled()
+ })
})
})
diff --git a/src/utils.ts b/src/utils.ts
index 4d381ad..2bd6419 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -35,11 +35,20 @@ export function print({
label,
prevValue,
componentName,
+ flags = {
+ isCollapsed: false,
+ isGrouped: true,
+ },
type = _PrintTypes.Change,
group = getGroupLabel(type, componentName),
styles: { componentCSS, subValueCSS, changeCSS } = {},
}: _PrintConfig): 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({
console.log(` Current value: %c${String(value)}`, changeCSS)
}
- console.groupEnd()
+ flags.isGrouped && console.groupEnd()
}