@pdg/react-hook 2.0.17 → 2.0.19

package/dist/changed/useChanged.d.ts

@@ -1,2 +1,2 @@
 import { DependencyList } from 'react';
-export declare const useChanged: (deps: DependencyList, initial?: boolean) => boolean;
+export declare const useChanged: (callback: () => void, deps: DependencyList) => void;

package/dist/changed/useFirstSkipChanged.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useFirstSkipChanged: (callback: () => void, deps: DependencyList) => true | undefined;

package/dist/effect/index.d.ts

@@ -1,2 +1,4 @@
 export * from './useEventEffect';
+export * from './useEventLayoutEffect';
 export * from './useFirstSkipEffect';
+export * from './useFirstSkipLayoutEffect';

package/dist/effect/useEventLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from 'react';
+export declare const useEventLayoutEffect: (effectEventCallback: EffectCallback, deps?: DependencyList) => void;

package/dist/effect/useFirstSkipLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from 'react';
+export declare const useFirstSkipLayoutEffect: (effectEventCallback: EffectCallback, deps: DependencyList) => void;

package/dist/eslint-plugin.js

@@ -6,53 +6,67 @@ const pluginRules = {
                 const originalRule = reactHooksPlugin.rules['exhaustive-deps'].create(context);
                 return Object.assign(Object.assign({}, originalRule), { CallExpression(node) {
                         const callbackName = node.callee.name;
-                        /** useChanged */
-                        if (callbackName === 'useChanged') {
-                            const depsNode = node.arguments[0];
-                            if (!depsNode || depsNode.type !== 'ArrayExpression') {
+                        /** useChanged, useFirstSkipChanged */
+                        if (['useChanged', 'useFirstSkipChanged'].includes(callbackName)) {
+                            const callback = node.arguments[0];
+                            const deps = node.arguments[1];
+                            if (!deps || deps.type !== 'ArrayExpression') {
                                 context.report({
-                                    node: node.callee,
-                                    message: 'useChanged 훅의 첫 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.',
+                                    node: deps || node,
+                                    message: `${callbackName} 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.`,
                                 });
                                 return;
                             }
-                            const elements = depsNode.elements.filter((e) => e && e.type === 'Identifier');
-                            const fakeCallback = {
-                                type: 'ArrowFunctionExpression',
-                                expression: false,
-                                generator: false,
-                                async: false,
-                                params: [],
-                                body: {
-                                    type: 'BlockStatement',
-                                    body: elements.map((el) => ({
-                                        type: 'ExpressionStatement',
-                                        expression: el,
-                                    })),
-                                },
-                            };
-                            const fakeNode = Object.assign(Object.assign({}, node), { arguments: [fakeCallback, depsNode] });
-                            return originalRule.CallExpression(fakeNode);
+                            if (callback && (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression')) {
+                                const visited = new Set();
+                                const checkRefAccess = (targetNode) => {
+                                    if (!targetNode || typeof targetNode !== 'object' || visited.has(targetNode))
+                                        return;
+                                    visited.add(targetNode);
+                                    if (targetNode.type === 'MemberExpression' &&
+                                        targetNode.property &&
+                                        (targetNode.property.name === 'current' ||
+                                            (targetNode.property.type === 'Literal' && targetNode.property.value === 'current'))) {
+                                        context.report({
+                                            node: targetNode,
+                                            message: `${callbackName} 훅의 콜백에서는 ref를 참조할 수 없습니다. (Cannot access refs during render.)`,
+                                        });
+                                    }
+                                    for (const key in targetNode) {
+                                        if (key === 'parent')
+                                            continue;
+                                        const child = targetNode[key];
+                                        if (Array.isArray(child)) {
+                                            child.forEach((c) => checkRefAccess(c));
+                                        }
+                                        else if (child && typeof child === 'object') {
+                                            checkRefAccess(child);
+                                        }
+                                    }
+                                };
+                                checkRefAccess(callback.body);
+                            }
+                            return originalRule.CallExpression(node);
                         }
-                        /** useFirstSkipEffect */
-                        if (callbackName === 'useFirstSkipEffect') {
+                        /** useEventEffect, useEventLayoutEffect */
+                        if (['useEventEffect', 'useEventLayoutEffect'].includes(callbackName)) {
                             const deps = node.arguments[1];
-                            if (!deps || deps.type !== 'ArrayExpression') {
+                            if (deps && deps.type !== 'ArrayExpression') {
                                 context.report({
-                                    node: node.callee,
-                                    message: 'useFirstSkipEffect 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.',
+                                    node: deps || node,
+                                    message: `${callbackName} 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.`,
                                 });
                                 return;
                             }
                             return originalRule.CallExpression(node);
                         }
-                        /** useEventEffect */
-                        if (callbackName === 'useEventEffect') {
+                        /** useFirstSkipEffect, useFirstSkipLayoutEffect */
+                        if (['useFirstSkipEffect', 'useFirstSkipLayoutEffect'].includes(callbackName)) {
                             const deps = node.arguments[1];
-                            if (deps && deps.type !== 'ArrayExpression') {
+                            if (!deps || deps.type !== 'ArrayExpression') {
                                 context.report({
-                                    node: node.callee,
-                                    message: 'useEventEffect 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.',
+                                    node: deps || node,
+                                    message: `${callbackName} 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.`,
                                 });
                                 return;
                             }

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import {useState,useEffectEvent,useEffect,useRef,useLayoutEffect,useImperativeHandle}from'react';import {c}from'react/compiler-runtime';function _arrayLikeToArray(r, a) {
+import {useState,useEffectEvent,useEffect,useLayoutEffect,useRef,useImperativeHandle}from'react';import {c}from'react/compiler-runtime';function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
   return n;
@@ -42,32 +42,28 @@ function _unsupportedIterableToArray(r, a) {
     var t = {}.toString.call(r).slice(8, -1);
     return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-}var useChanged = function useChanged(deps, t0) {
-  var initial = t0 === undefined ? false : t0;
-  var _useState = useState(deps),
+}var useChanged = function useChanged(callback, deps) {
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     prevValues = _useState2[0],
     setPrevValues = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFirst = _useState4[0],
-    setIsFirst = _useState4[1];
-  if (initial) {
-    if (isFirst) {
-      setIsFirst(false);
-      return true;
-    }
-  }
   var changed = false;
-  if (deps !== prevValues) {
-    if (deps.length !== prevValues.length || deps.some(function (v, i) {
-      return v !== prevValues[i];
-    })) {
-      changed = true;
-    }
+  if (prevValues === undefined) {
+    changed = true;
     setPrevValues(deps);
+  } else {
+    if (deps !== prevValues) {
+      if (deps.length !== prevValues.length || deps.some(function (v, i) {
+        return v !== prevValues[i];
+      })) {
+        changed = true;
+      }
+      setPrevValues(deps);
+    }
+  }
+  if (changed) {
+    callback();
   }
-  return changed;
 };var useEventEffect = function useEventEffect(effectEventCallback, deps) {
   var $ = c(2);
   var effectEvent = useEffectEvent(effectEventCallback);
@@ -82,6 +78,20 @@ function _unsupportedIterableToArray(r, a) {
     t0 = $[1];
   }
   useEffect(t0, deps);
+};var useEventLayoutEffect = function useEventLayoutEffect(effectEventCallback, deps) {
+  var $ = c(2);
+  var effectEvent = useEffectEvent(effectEventCallback);
+  var t0;
+  if ($[0] !== effectEvent) {
+    t0 = function t0() {
+      return effectEvent();
+    };
+    $[0] = effectEvent;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  useLayoutEffect(t0, deps);
 };var useFirstSkipEffect = function useFirstSkipEffect(effectEventCallback, deps) {
   var $ = c(2);
   var effectEvent = useEffectEvent(effectEventCallback);
@@ -101,6 +111,25 @@ function _unsupportedIterableToArray(r, a) {
     t0 = $[1];
   }
   useEffect(t0, deps);
+};var useFirstSkipLayoutEffect = function useFirstSkipLayoutEffect(effectEventCallback, deps) {
+  var $ = c(2);
+  var effectEvent = useEffectEvent(effectEventCallback);
+  var firstSkipRef = useRef(true);
+  var t0;
+  if ($[0] !== effectEvent) {
+    t0 = function t0() {
+      if (firstSkipRef.current) {
+        firstSkipRef.current = false;
+      } else {
+        return effectEvent();
+      }
+    };
+    $[0] = effectEvent;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  useLayoutEffect(t0, deps);
 };function useMountedRef(t0) {
   var $ = c(2);
   var initialValue = t0 === undefined ? true : t0;
@@ -261,4 +290,4 @@ function _unsupportedIterableToArray(r, a) {
     t3 = $[7];
   }
   useEffect(t2, t3);
-}export{clearIntervalRef,clearTimeoutRef,useAutoUpdateRef,useChanged,useEventEffect,useFirstSkipEffect,useForwardRef,useIntervalRef,useMountedRef,useTimeoutRef};
+}export{clearIntervalRef,clearTimeoutRef,useAutoUpdateRef,useChanged,useEventEffect,useEventLayoutEffect,useFirstSkipEffect,useFirstSkipLayoutEffect,useForwardRef,useIntervalRef,useMountedRef,useTimeoutRef};

package/dist/index.js

@@ -42,32 +42,28 @@ function _unsupportedIterableToArray(r, a) {
     var t = {}.toString.call(r).slice(8, -1);
     return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-}var useChanged = function useChanged(deps, t0) {
-  var initial = t0 === undefined ? false : t0;
-  var _useState = react.useState(deps),
+}var useChanged = function useChanged(callback, deps) {
+  var _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     prevValues = _useState2[0],
     setPrevValues = _useState2[1];
-  var _useState3 = react.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFirst = _useState4[0],
-    setIsFirst = _useState4[1];
-  if (initial) {
-    if (isFirst) {
-      setIsFirst(false);
-      return true;
-    }
-  }
   var changed = false;
-  if (deps !== prevValues) {
-    if (deps.length !== prevValues.length || deps.some(function (v, i) {
-      return v !== prevValues[i];
-    })) {
-      changed = true;
-    }
+  if (prevValues === undefined) {
+    changed = true;
     setPrevValues(deps);
+  } else {
+    if (deps !== prevValues) {
+      if (deps.length !== prevValues.length || deps.some(function (v, i) {
+        return v !== prevValues[i];
+      })) {
+        changed = true;
+      }
+      setPrevValues(deps);
+    }
+  }
+  if (changed) {
+    callback();
   }
-  return changed;
 };var useEventEffect = function useEventEffect(effectEventCallback, deps) {
   var $ = compilerRuntime.c(2);
   var effectEvent = react.useEffectEvent(effectEventCallback);
@@ -82,6 +78,20 @@ function _unsupportedIterableToArray(r, a) {
     t0 = $[1];
   }
   react.useEffect(t0, deps);
+};var useEventLayoutEffect = function useEventLayoutEffect(effectEventCallback, deps) {
+  var $ = compilerRuntime.c(2);
+  var effectEvent = react.useEffectEvent(effectEventCallback);
+  var t0;
+  if ($[0] !== effectEvent) {
+    t0 = function t0() {
+      return effectEvent();
+    };
+    $[0] = effectEvent;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  react.useLayoutEffect(t0, deps);
 };var useFirstSkipEffect = function useFirstSkipEffect(effectEventCallback, deps) {
   var $ = compilerRuntime.c(2);
   var effectEvent = react.useEffectEvent(effectEventCallback);
@@ -101,6 +111,25 @@ function _unsupportedIterableToArray(r, a) {
     t0 = $[1];
   }
   react.useEffect(t0, deps);
+};var useFirstSkipLayoutEffect = function useFirstSkipLayoutEffect(effectEventCallback, deps) {
+  var $ = compilerRuntime.c(2);
+  var effectEvent = react.useEffectEvent(effectEventCallback);
+  var firstSkipRef = react.useRef(true);
+  var t0;
+  if ($[0] !== effectEvent) {
+    t0 = function t0() {
+      if (firstSkipRef.current) {
+        firstSkipRef.current = false;
+      } else {
+        return effectEvent();
+      }
+    };
+    $[0] = effectEvent;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  react.useLayoutEffect(t0, deps);
 };function useMountedRef(t0) {
   var $ = compilerRuntime.c(2);
   var initialValue = t0 === undefined ? true : t0;
@@ -261,4 +290,4 @@ function _unsupportedIterableToArray(r, a) {
     t3 = $[7];
   }
   react.useEffect(t2, t3);
-}exports.clearIntervalRef=clearIntervalRef;exports.clearTimeoutRef=clearTimeoutRef;exports.useAutoUpdateRef=useAutoUpdateRef;exports.useChanged=useChanged;exports.useEventEffect=useEventEffect;exports.useFirstSkipEffect=useFirstSkipEffect;exports.useForwardRef=useForwardRef;exports.useIntervalRef=useIntervalRef;exports.useMountedRef=useMountedRef;exports.useTimeoutRef=useTimeoutRef;
+}exports.clearIntervalRef=clearIntervalRef;exports.clearTimeoutRef=clearTimeoutRef;exports.useAutoUpdateRef=useAutoUpdateRef;exports.useChanged=useChanged;exports.useEventEffect=useEventEffect;exports.useEventLayoutEffect=useEventLayoutEffect;exports.useFirstSkipEffect=useFirstSkipEffect;exports.useFirstSkipLayoutEffect=useFirstSkipLayoutEffect;exports.useForwardRef=useForwardRef;exports.useIntervalRef=useIntervalRef;exports.useMountedRef=useMountedRef;exports.useTimeoutRef=useTimeoutRef;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pdg/react-hook",
   "title": "Typescript React Hook Module",
   "description": "Typescript React Hook Module",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",