Add groups

Author: dolfbarr

.eslintrc

@@ -36,7 +36,8 @@
                 "objects": "always-multiline",
                 "imports": "always-multiline",
                 "exports": "always-multiline",
-                "functions": "always-multiline"
+                "functions": "always-multiline",
+                "enums": "always-multiline"
             }
         ],
         "space-before-function-paren": "off",

README.md

@@ -28,7 +28,7 @@ React hook for logging per component lifecycle
 - 🔧 **Customizable** — work in progress 😉
 - 🔬 **Tested** — up to 100% coverage
 - 🏎️ **Fast** — native react hooks & optimized
-- 📭 **No dependecies**
+- 📭 **Minimal dependecies** — only some lodash functions
 
 
 

package-lock.json

@@ -111,5 +111,8 @@
       "path": "dist/module.js",
       "limit": "1 kB"
     }
-  ]
+  ],
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
 }

package.json

@@ -1,11 +1,66 @@
+import cloneDeep from 'lodash/cloneDeep'
 import { useEffect, useRef } from 'react'
 
+const CSS_COMPONENT = 'color: DodgerBlue'
+const CSS_DATE = 'color: SlateGray;'
+
 export interface UseLogReturn {
   log: <T>(value: T) => void
 }
 
-export const useLog = (): UseLogReturn => {
+interface PrintProps<T> {
+  value: T
+  label: string
+  group?: string
+  type?: PrintTypes
+}
+
+export enum PrintTypes {
+  Mount = 'Mount',
+  Unmount = 'Unmount',
+  BeforeUnmount = 'Before unmount',
+  Change = 'Change',
+}
+
+export function useLog(): UseLogReturn {
+  const componentName = (function getComponentName() {
+    try {
+      throw new Error()
+    } catch (error) {
+      if (error instanceof Error) {
+        const re = /(\w+)@|at (\w+) \(/g
+
+        re.exec(error?.stack ?? '')
+        re.exec(error?.stack ?? '')
+        const m = re.exec(error?.stack ?? '') ?? []
+
+        return String(m[1] || m[2])
+      }
+
+      return ''
+    }
+  })()
+
+  const getGroupLabel = (type: PrintTypes): string => {
+    return `${String(type)} ${
+      componentName ? 'in %c<' + String(componentName) + ' /> ' : '%c'
+    }%c@ ${new Date().toLocaleTimeString()}`
+  }
+
+  function print<T>({
+    value,
+    label,
+    type = PrintTypes.Change,
+    group = getGroupLabel(type),
+  }: PrintProps<T>): void {
+    console.group(group, CSS_COMPONENT, CSS_DATE)
+    console.log(`${label}: ${String(value)}`)
+    console.groupEnd()
+  }
+
   function log<T>(value: T): void {
+    const clonedValue = cloneDeep(value)
+
     return (() => {
       const isUnmounting = useRef(false)
       useEffect(() => {
@@ -15,19 +70,35 @@ export const useLog = (): UseLogReturn => {
       }, [])
 
       useEffect(() => {
-        console.log(`On mount: ${String(value)}`)
+        print({
+          label: 'On mount',
+          value: clonedValue,
+          type: PrintTypes.Mount,
+        })
 
         return () => {
-          console.log(`On unmount: ${String(value)}`)
+          print({
+            label: 'On unmount',
+            value: clonedValue,
+            type: PrintTypes.Unmount,
+          })
         }
       }, [])
 
       useEffect(() => {
-        console.log(`On change: ${String(value)}`)
+        print({
+          label: 'On change',
+          value: clonedValue,
+          type: PrintTypes.Change,
+        })
 
         return () => {
           if (isUnmounting.current) {
-            console.log(`Before unmount: ${String(value)}`)
+            print({
+              label: 'Before unmount',
+              value: clonedValue,
+              type: PrintTypes.BeforeUnmount,
+            })
           }
         }
       }, [value])