Skip to content

Commit 9a4319c

Browse files
committed
Add an option to use dir for interactive rendering
1 parent a749d0e commit 9a4319c

File tree

4 files changed

+47
-15
lines changed

4 files changed

+47
-15
lines changed

src/index.test.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,4 +368,14 @@ describe('useLog', () => {
368368
value: 'Test',
369369
})
370370
})
371+
372+
it('renders log without inline rendering', () => {
373+
const consoleDir = jest.spyOn(console, 'dir').mockImplementation(() => null)
374+
renderHook(() => {
375+
const { log } = useLog({ inline: false })
376+
log({ test: 'value' }, { inline: false })
377+
})
378+
379+
expect(consoleDir).toHaveBeenCalled()
380+
})
371381
})

src/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export function useLog({
5050
logLevel = DEFAULT_LOG_LEVEL,
5151
groupLabelRenderer,
5252
render,
53+
inline = true,
5354
}: UseLogConfig = {}): UseLogReturn {
5455
const componentName = getComponentName()
5556

@@ -78,6 +79,7 @@ export function useLog({
7879
| 'printer'
7980
| 'logLevel'
8081
| 'groupLabelRenderer'
82+
| 'inline'
8183
> = {
8284
value: clonedValue,
8385
styles: {
@@ -93,6 +95,7 @@ export function useLog({
9395
printer: props?.printer ?? printer,
9496
logLevel: props?.logLevel ?? logLevel,
9597
groupLabelRenderer: props?.groupLabelRenderer ?? groupLabelRenderer,
98+
inline: props?.inline ?? inline,
9699
}
97100

98101
if (environments.includes(process.env.NODE_ENV ?? 'production')) {

src/types.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export type UseLogConfig = {
4444
logLevel?: LogLevels
4545
/** Custom function which will be used for rendering the result, provided with useful data */
4646
render?: <T>(props: RenderProps<T>) => void
47+
/** Render object or array inline or via interactive browser renderer */
48+
inline?: boolean
4749
} & (
4850
| {
4951
/** Enable grouping for logs */
@@ -96,6 +98,7 @@ export interface _PrintConfig<T> {
9698
flags?: _PrintFlags
9799
printer?: Printer | Console
98100
logLevel?: LogLevels
101+
inline?: boolean
99102
groupLabelRenderer?: (
100103
type: ComponentLifecycleLabels,
101104
componentName: string,
@@ -133,7 +136,7 @@ export type LogLevels = keyof Pick<
133136
*/
134137
export type _SupportedConsole = Pick<
135138
Console,
136-
'group' | 'groupCollapsed' | 'groupEnd' | LogLevels
139+
'group' | 'groupCollapsed' | 'groupEnd' | 'dir' | LogLevels
137140
>
138141

139142
/** Describes custom implementation of console object with only supported methods used to render logs */

src/utils.ts

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ import {
1212
PREVIOUS_VALUE_LABEL,
1313
} from './constants'
1414

15+
export function isObjectOrArray<T>(value: T): boolean {
16+
return Array.isArray(value) || (typeof value === 'object' && value !== null)
17+
}
18+
1519
/* istanbul ignore next */
1620
export function getCurrentTime(): string {
1721
// No need in testing Date module
@@ -30,17 +34,17 @@ export function getMessage<T>(
3034
value: T,
3135
label?: string,
3236
withCss?: boolean,
37+
inline = true,
3338
): string {
3439
const printLabel = label
3540
? `${label.padStart(DEFAULT_LABEL_SIZE, ' ')}: `
3641
: ''.padStart(DEFAULT_LABEL_SIZE + 2, ' ')
3742

38-
const printValue =
39-
typeof value === 'object' && value !== null
40-
? JSON.stringify(value)
41-
: String(value)
43+
const printValue = isObjectOrArray(value)
44+
? JSON.stringify(value)
45+
: String(value)
4246

43-
return `${printLabel}${stylePlaceholder(withCss)}${printValue}`
47+
return `${printLabel}${stylePlaceholder(withCss)}${inline ? printValue : ''}`
4448
}
4549

4650
export function getGroupLabel(
@@ -127,6 +131,7 @@ export function print<T>({
127131
printer = {},
128132
logLevel = 'log',
129133
groupLabelRenderer,
134+
inline = true,
130135
}: _PrintConfig<T>): void {
131136
const getCurrentPrinter = (
132137
method: keyof _SupportedConsole,
@@ -147,23 +152,34 @@ export function print<T>({
147152
)
148153
}
149154

150-
const printAtLevel = (
151-
label?: string,
152-
printValue: T = value,
153-
css?: string,
154-
): void => {
155+
const printAtLevel = (printValue: T, label?: string, css?: string): void => {
155156
const printer = getCurrentPrinter(logLevel)
156-
const message = getMessage(printValue, label, Boolean(css))
157+
const message = getMessage(printValue, label, Boolean(css), inline)
157158

158159
if (!css) printer(message)
159160
if (css) printer(message, css)
160161
}
161162

163+
const printArDirLevel = (printValue: T): void => {
164+
const printer = getCurrentPrinter('dir')
165+
printer(printValue)
166+
}
167+
162168
if ('prevValue' in arguments[0]) {
163-
printAtLevel(PREVIOUS_VALUE_LABEL, arguments[0].prevValue, subValueCSS)
164-
printAtLevel(CURRENT_VALUE_LABEL, value, changeCSS)
169+
printAtLevel(arguments[0].prevValue, PREVIOUS_VALUE_LABEL, subValueCSS)
170+
if (!inline) {
171+
printArDirLevel(arguments[0].prevValue)
172+
}
173+
174+
printAtLevel(value, CURRENT_VALUE_LABEL, changeCSS)
175+
if (!inline) {
176+
printArDirLevel(value)
177+
}
165178
} else {
166-
printAtLevel(getLabel(type))
179+
printAtLevel(value, getLabel(type))
180+
if (!inline) {
181+
printArDirLevel(value)
182+
}
167183
}
168184

169185
if (flags.isGrouped) getCurrentPrinter('groupEnd')()

0 commit comments

Comments
 (0)