@pdg/react-hook 2.0.18 → 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/eslint-plugin.js

@@ -6,40 +6,54 @@ 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: `${callbackName} 훅의 첫 번째 인자는 반드시 배열 리터럴(예: [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);
                         }
                         /** useEventEffect, useEventLayoutEffect */
                         if (['useEventEffect', 'useEventLayoutEffect'].includes(callbackName)) {
                             const deps = node.arguments[1];
                             if (deps && deps.type !== 'ArrayExpression') {
                                 context.report({
-                                    node: node.callee,
+                                    node: deps || node,
                                     message: `${callbackName} 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.`,
                                 });
                                 return;
@@ -51,7 +65,7 @@ const pluginRules = {
                             const deps = node.arguments[1];
                             if (!deps || deps.type !== 'ArrayExpression') {
                                 context.report({
-                                    node: node.callee,
+                                    node: deps || node,
                                     message: `${callbackName} 훅의 두 번째 인자는 반드시 배열 리터럴(예: [a, b]) 형태여야 합니다.`,
                                 });
                                 return;

package/dist/index.esm.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 = 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);

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);

package/package.json

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