feat: ✨ add useLogger

Author: mannix-lei

config/hooks.ts

@@ -116,6 +116,6 @@ export const menus = [
   },
   {
     title: 'Dev',
-    children: ['useTrackedEffect', 'useWhyDidYouUpdate'],
+    children: ['useTrackedEffect', 'useWhyDidYouUpdate', 'useLogger'],
   },
 ];

packages/hooks/src/index.ts

@@ -75,6 +75,7 @@ import useVirtualList from './useVirtualList';
 import useWebSocket from './useWebSocket';
 import useWhyDidYouUpdate from './useWhyDidYouUpdate';
 import useMutationObserver from './useMutationObserver';
+import useLogger from './useLogger';
 
 export {
   useRequest,
@@ -156,4 +157,5 @@ export {
   useRafTimeout,
   useResetState,
   useMutationObserver,
+  useLogger,
 };

packages/hooks/src/useLogger/__tests__/index.test.ts

@@ -0,0 +1,35 @@
+import { renderHook, act } from '@testing-library/react';
+import useLogger from '../index';
+
+describe('useLogger', () => {
+  // test ueslogger in every lifecycle of component
+  // mounted unmounted updated rerendered
+  it('should be defined', () => {
+    expect(useLogger).toBeDefined();
+  });
+  it('should log mounted', () => {
+    const spy = jest.spyOn(console, 'log');
+    const { unmount } = renderHook(() => useLogger('Demo', { title: 'Hello World', size: 24 }, 0));
+    expect(spy).toBeCalledWith('Demo mounted', { size: 24, title: 'Hello World' }, 0);
+    act(() => {
+      unmount();
+    });
+  });
+  it('should log updated', () => {
+    const spy = jest.spyOn(console, 'log');
+    const { rerender } = renderHook(() => useLogger('Demo', { title: 'Hello World', size: 24 }, 0));
+    act(() => {
+      rerender();
+    });
+    expect(spy).toBeCalledWith('Demo updated', { size: 24, title: 'Hello World' }, 0);
+  });
+  it('should log unmounted', () => {
+    const spy = jest.spyOn(console, 'log');
+    const { unmount } = renderHook(() => useLogger('Demo', { title: 'Hello World', size: 24 }, 0));
+    act(() => {
+      unmount();
+    });
+    expect(spy).toBeCalledWith('Demo mounted', { size: 24, title: 'Hello World' }, 0);
+    expect(spy).toBeCalledWith('Demo unmounted');
+  });
+});

packages/hooks/src/useLogger/demo/demo1.tsx

@@ -0,0 +1,34 @@
+/**
+ * title: Basic usage
+ * desc: A hook that console logs parameters as component transitions through lifecycles.
+ *
+ * title.zh-CN: 基础用法
+ * desc.zh-CN: 一个在控制台中输出组件生命周期内日志的Hook。
+ */
+
+import React, { useState } from 'react';
+import { useLogger, useCounter } from 'ahooks';
+
+const Demo = (props) => {
+  const [state, { inc }] = useCounter(0);
+
+  useLogger('Demo', props, state);
+
+  return (
+    <>
+      <p style={{ fontSize: props.size }}>{props.title}</p>
+      <button onClick={() => inc()}>Update state ({state})</button>
+    </>
+  );
+};
+
+export default () => {
+  const [outerCount, setOutCounter] = useState(24); // default font size
+
+  return (
+    <>
+      <Demo title="Hello World" size={outerCount} />
+      <button onClick={() => setOutCounter((c) => c + 1)}>Increase font size ({outerCount})</button>
+    </>
+  );
+};

packages/hooks/src/useLogger/index.en-US.md

@@ -0,0 +1,27 @@
+---
+nav:
+  path: /hooks
+---
+
+# useLogger
+
+A hook that console logs parameters as component transitions through lifecycles.
+
+## Examples
+
+### Default usage
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```typescript
+useLogger(componentName: string, ...rest);
+```
+
+### Params
+
+| Property      | Description        | Type     | Default |
+| ------------- | ------------------ | -------- | ------- |
+| componentName | component name.    | `string` | -       |
+| ...rest       | parameters to log. | `string` | -       |

packages/hooks/src/useLogger/index.ts

@@ -0,0 +1,40 @@
+import type { EffectCallback } from 'react';
+import { useEffect, useRef } from 'react';
+
+const useEffectOnce = (effect: EffectCallback) => {
+  useEffect(effect, []);
+};
+export function useFirstMountState(): boolean {
+  const isFirst = useRef(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+
+    return true;
+  }
+
+  return isFirst.current;
+}
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isFirstMount = useFirstMountState();
+
+  useEffect(() => {
+    if (!isFirstMount) {
+      return effect();
+    }
+  }, deps);
+};
+
+const useLogger = (componentName: string, ...rest) => {
+  useEffectOnce(() => {
+    console.log(`${componentName} mounted`, ...rest);
+    return () => console.log(`${componentName} unmounted`);
+  });
+
+  useUpdateEffect(() => {
+    console.log(`${componentName} updated`, ...rest);
+  });
+};
+
+export default useLogger;

packages/hooks/src/useLogger/index.zh-CN.md

@@ -0,0 +1,27 @@
+---
+nav:
+  path: /hooks
+---
+
+# useLogger
+
+一个在控制台中输出组件生命周期内日志的Hook。
+
+## 代码演示
+
+### 基础用法
+
+<code src="./demo/demo1.tsx" />
+
+## API
+
+```typescript
+useLogger(componentName: string, ...rest);
+```
+
+### Params
+
+| 参数          | 说         | 类型     | 默认值 |
+| ------------- | ---------- | -------- | ------ |
+| componentName | 组件名称   | `string` | -      |
+| ...rest       | 输出的日志 | `string` | -      |