Add an option to use dir for interactive rendering

Author: dolfbarr

src/index.test.tsx

@@ -368,4 +368,14 @@ describe('useLog', () => {
       value: 'Test',
     })
   })
+
+  it('renders log without inline rendering', () => {
+    const consoleDir = jest.spyOn(console, 'dir').mockImplementation(() => null)
+    renderHook(() => {
+      const { log } = useLog({ inline: false })
+      log({ test: 'value' }, { inline: false })
+    })
+
+    expect(consoleDir).toHaveBeenCalled()
+  })
 })

src/index.tsx

@@ -50,6 +50,7 @@ export function useLog({
   logLevel = DEFAULT_LOG_LEVEL,
   groupLabelRenderer,
   render,
+  inline = true,
 }: UseLogConfig = {}): UseLogReturn {
   const componentName = getComponentName()
 
@@ -78,6 +79,7 @@ export function useLog({
       | 'printer'
       | 'logLevel'
       | 'groupLabelRenderer'
+      | 'inline'
     > = {
       value: clonedValue,
       styles: {
@@ -93,6 +95,7 @@ export function useLog({
       printer: props?.printer ?? printer,
       logLevel: props?.logLevel ?? logLevel,
       groupLabelRenderer: props?.groupLabelRenderer ?? groupLabelRenderer,
+      inline: props?.inline ?? inline,
     }
 
     if (environments.includes(process.env.NODE_ENV ?? 'production')) {

src/types.ts

@@ -44,6 +44,8 @@ export type UseLogConfig = {
   logLevel?: LogLevels
   /** Custom function which will be used for rendering the result, provided with useful data */
   render?: <T>(props: RenderProps<T>) => void
+  /** Render object or array inline or via interactive browser renderer */
+  inline?: boolean
 } & (
   | {
       /** Enable grouping for logs  */
@@ -96,6 +98,7 @@ export interface _PrintConfig<T> {
   flags?: _PrintFlags
   printer?: Printer | Console
   logLevel?: LogLevels
+  inline?: boolean
   groupLabelRenderer?: (
     type: ComponentLifecycleLabels,
     componentName: string,
@@ -133,7 +136,7 @@ export type LogLevels = keyof Pick<
  */
 export type _SupportedConsole = Pick<
   Console,
-  'group' | 'groupCollapsed' | 'groupEnd' | LogLevels
+  'group' | 'groupCollapsed' | 'groupEnd' | 'dir' | LogLevels
 >
 
 /** Describes custom implementation of console object with only supported methods used to render logs */

src/utils.ts

@@ -12,6 +12,10 @@ import {
   PREVIOUS_VALUE_LABEL,
 } from './constants'
 
+export function isObjectOrArray<T>(value: T): boolean {
+  return Array.isArray(value) || (typeof value === 'object' && value !== null)
+}
+
 /* istanbul ignore next */
 export function getCurrentTime(): string {
   // No need in testing Date module
@@ -30,17 +34,17 @@ export function getMessage<T>(
   value: T,
   label?: string,
   withCss?: boolean,
+  inline = true,
 ): string {
   const printLabel = label
     ? `${label.padStart(DEFAULT_LABEL_SIZE, ' ')}: `
     : ''.padStart(DEFAULT_LABEL_SIZE + 2, ' ')
 
-  const printValue =
-    typeof value === 'object' && value !== null
-      ? JSON.stringify(value)
-      : String(value)
+  const printValue = isObjectOrArray(value)
+    ? JSON.stringify(value)
+    : String(value)
 
-  return `${printLabel}${stylePlaceholder(withCss)}${printValue}`
+  return `${printLabel}${stylePlaceholder(withCss)}${inline ? printValue : ''}`
 }
 
 export function getGroupLabel(
@@ -127,6 +131,7 @@ export function print<T>({
   printer = {},
   logLevel = 'log',
   groupLabelRenderer,
+  inline = true,
 }: _PrintConfig<T>): void {
   const getCurrentPrinter = (
     method: keyof _SupportedConsole,
@@ -147,23 +152,34 @@ export function print<T>({
     )
   }
 
-  const printAtLevel = (
-    label?: string,
-    printValue: T = value,
-    css?: string,
-  ): void => {
+  const printAtLevel = (printValue: T, label?: string, css?: string): void => {
     const printer = getCurrentPrinter(logLevel)
-    const message = getMessage(printValue, label, Boolean(css))
+    const message = getMessage(printValue, label, Boolean(css), inline)
 
     if (!css) printer(message)
     if (css) printer(message, css)
   }
 
+  const printArDirLevel = (printValue: T): void => {
+    const printer = getCurrentPrinter('dir')
+    printer(printValue)
+  }
+
   if ('prevValue' in arguments[0]) {
-    printAtLevel(PREVIOUS_VALUE_LABEL, arguments[0].prevValue, subValueCSS)
-    printAtLevel(CURRENT_VALUE_LABEL, value, changeCSS)
+    printAtLevel(arguments[0].prevValue, PREVIOUS_VALUE_LABEL, subValueCSS)
+    if (!inline) {
+      printArDirLevel(arguments[0].prevValue)
+    }
+
+    printAtLevel(value, CURRENT_VALUE_LABEL, changeCSS)
+    if (!inline) {
+      printArDirLevel(value)
+    }
   } else {
-    printAtLevel(getLabel(type))
+    printAtLevel(value, getLabel(type))
+    if (!inline) {
+      printArDirLevel(value)
+    }
   }
 
   if (flags.isGrouped) getCurrentPrinter('groupEnd')()