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() }