@prairielearn/eslint-plugin 4.0.0 → 4.1.0

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,SAAS,kBAAkB,CAAC,cAAsB,EAAE,WAAmB,EAAW;IAChF,+DAA+D;IAC/D,IAAI,cAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8EAA8E;IAC9E,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IACvE,IAAI,cAAc,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAE,CAAC;QACvD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AAAA,CACd;AAED;;;;;;;;;;GAUG;AACH,gDAAuD,IAAS,EAAE;IAChE,MAAM,WAAW,GAAG,IAAI,GAAG,EAAU,CAAC;IAEtC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,YAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;QAChD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAc,EAAE,EAAE,CAAC;YAC1C,IAAI,SAAS,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;gBACzC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAC9C,IAAI,kBAAkB,CAAC,aAAa,EAAE,YAAY,CAAC,EAAE,CAAC;oBACpD,WAAW,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC;QAAA,CACF,CAAC,CAAC;IACL,CAAC;IAED,OAAO,WAAW,CAAC;AAAA,CACpB","sourcesContent":["/**\n * Determines if the given identifier name corresponds to a client from the\n * given package.\n */\nfunction isIdentifierClient(identifierName: string, packageName: string): boolean {\n  // If the identifier ends with \"Client\", include it in the set.\n  if (identifierName.endsWith('Client')) {\n    return true;\n  }\n\n  // If the identifier matches the package name directly, include it in the set.\n  const clientName = packageName.replace('@aws-sdk/client-', '');\n  const packageIdentifier = clientName.replaceAll('-', '').toLowerCase();\n  if (identifierName.toLowerCase() === packageIdentifier) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Retrieves the names of AWS clients specified by the given import declaration.\n *\n * For instance, if the import declaration is:\n *\n * ```ts\n * import { S3, S3Client } from '@aws-sdk/client-s3';\n * ```\n *\n * then this function will return a set containing the strings \"S3\" and \"S3Client\".\n */\nexport function getAwsClientNamesFromImportDeclaration(node: any) {\n  const clientNames = new Set<string>();\n\n  const importSource = node.source.value;\n  if (importSource.startsWith('@aws-sdk/client-')) {\n    node.specifiers.forEach((specifier: any) => {\n      if (specifier.type === 'ImportSpecifier') {\n        const specifierName = specifier.imported.name;\n        if (isIdentifierClient(specifierName, importSource)) {\n          clientNames.add(specifierName);\n        }\n      }\n    });\n  }\n\n  return clientNames;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,SAAS,kBAAkB,CAAC,cAAsB,EAAE,WAAmB;IACrE,+DAA+D;IAC/D,IAAI,cAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8EAA8E;IAC9E,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IACvE,IAAI,cAAc,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAE,CAAC;QACvD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;GAUG;AACH,gDAAuD,IAAS;IAC9D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAU,CAAC;IAEtC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,YAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;QAChD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAc,EAAE,EAAE;YACzC,IAAI,SAAS,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;gBACzC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAC9C,IAAI,kBAAkB,CAAC,aAAa,EAAE,YAAY,CAAC,EAAE,CAAC;oBACpD,WAAW,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["/**\n * Determines if the given identifier name corresponds to a client from the\n * given package.\n */\nfunction isIdentifierClient(identifierName: string, packageName: string): boolean {\n  // If the identifier ends with \"Client\", include it in the set.\n  if (identifierName.endsWith('Client')) {\n    return true;\n  }\n\n  // If the identifier matches the package name directly, include it in the set.\n  const clientName = packageName.replace('@aws-sdk/client-', '');\n  const packageIdentifier = clientName.replaceAll('-', '').toLowerCase();\n  if (identifierName.toLowerCase() === packageIdentifier) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Retrieves the names of AWS clients specified by the given import declaration.\n *\n * For instance, if the import declaration is:\n *\n * ```ts\n * import { S3, S3Client } from '@aws-sdk/client-s3';\n * ```\n *\n * then this function will return a set containing the strings \"S3\" and \"S3Client\".\n */\nexport function getAwsClientNamesFromImportDeclaration(node: any) {\n  const clientNames = new Set<string>();\n\n  const importSource = node.source.value;\n  if (importSource.startsWith('@aws-sdk/client-')) {\n    node.specifiers.forEach((specifier: any) => {\n      if (specifier.type === 'ImportSpecifier') {\n        const specifierName = specifier.imported.name;\n        if (isIdentifierClient(specifierName, importSource)) {\n          clientNames.add(specifierName);\n        }\n      }\n    });\n  }\n\n  return clientNames;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/eslint-plugin",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PrairieLearn/PrairieLearn.git",
@@ -19,17 +19,17 @@
     "eslint": "^10.0.0"
   },
   "dependencies": {
-    "@typescript-eslint/utils": "^8.56.1",
+    "@typescript-eslint/utils": "^8.58.0",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
     "@prairielearn/tsconfig": "^2.0.0",
-    "@types/node": "^24.11.0",
-    "@typescript-eslint/rule-tester": "^8.56.1",
-    "@typescript-eslint/types": "^8.56.1",
-    "@typescript/native-preview": "^7.0.0-dev.20260302.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@types/node": "^24.12.2",
+    "@typescript-eslint/rule-tester": "^8.58.0",
+    "@typescript-eslint/types": "^8.58.0",
+    "@typescript/native-preview": "^7.0.0-dev.20260305.1",
+    "@vitest/coverage-v8": "^4.1.2",
     "tsx": "^4.21.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.2"
   }
 }

package/src/index.ts

@@ -2,6 +2,7 @@ import awsClientMandatoryConfig from './rules/aws-client-mandatory-config.js';
 import awsClientSharedConfig from './rules/aws-client-shared-config.js';
 import jsxNoDollarInterpolation from './rules/jsx-no-dollar-interpolation.js';
 import noCurrentTargetInCallback from './rules/no-current-target-in-callback.js';
+import noHydrateResLocals from './rules/no-hydrate-reslocals.js';
 import noUnusedSqlBlocks from './rules/no-unused-sql-blocks.js';
 import safeDbTypes from './rules/safe-db-types.js';
 
@@ -10,6 +11,7 @@ export const rules = {
   'aws-client-shared-config': awsClientSharedConfig,
   'jsx-no-dollar-interpolation': jsxNoDollarInterpolation,
   'no-current-target-in-callback': noCurrentTargetInCallback,
+  'no-hydrate-reslocals': noHydrateResLocals,
   'no-unused-sql-blocks': noUnusedSqlBlocks,
   'safe-db-types': safeDbTypes,
 };

package/src/rules/no-current-target-in-callback.ts

@@ -1,10 +1,10 @@
 import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils';
 
 /**
- * This rule detects when `event.currentTarget` is accessed inside a nested
- * callback function within a React event handler. This is problematic because
- * React may execute callbacks (like those passed to setState) asynchronously,
- * at which point `currentTarget` may already be nullified.
+ * This rule detects when `event.currentTarget` is accessed after an `await` or
+ * inside a callback passed to a likely deferred API within a React event
+ * handler. Those callbacks may run after the handler returns, at which point
+ * `currentTarget` may already be nullified.
  *
  * Bad:
  * ```tsx
@@ -21,46 +21,197 @@ export default ESLintUtils.RuleCreator.withoutDocs({
     type: 'problem',
     messages: {
       noCurrentTargetInCallback:
-        'Accessing event.currentTarget inside a callback may fail because currentTarget can be nullified before the callback runs. Destructure currentTarget at the start of the event handler instead.',
+        'Accessing event.currentTarget after an async boundary may fail because currentTarget can be nullified before the access runs. Destructure currentTarget at the start of the event handler instead.',
     },
     schema: [],
   },
   defaultOptions: [],
 
   create(context) {
-    // Track event handler parameters and their scopes
-    const eventHandlerParams = new Map<TSESTree.Node, TSESTree.Identifier>();
+    const trackedEventFunctions = new Map<TSESTree.Node, TSESTree.Identifier>();
+    const visitorKeys = context.sourceCode.visitorKeys;
 
-    /** Check if a node is inside a nested function relative to the event handler */
-    function isInsideNestedFunction(
+    function isFunctionLike(
       node: TSESTree.Node,
-      eventHandlerFunction: TSESTree.Node,
+    ): node is
+      | TSESTree.ArrowFunctionExpression
+      | TSESTree.FunctionExpression
+      | TSESTree.FunctionDeclaration {
+      return (
+        node.type === 'ArrowFunctionExpression' ||
+        node.type === 'FunctionExpression' ||
+        node.type === 'FunctionDeclaration'
+      );
+    }
+
+    function isNode(value: unknown): value is TSESTree.Node {
+      return typeof value === 'object' && value !== null && 'type' in value;
+    }
+
+    function getChildNodes(node: TSESTree.Node): TSESTree.Node[] {
+      const children: TSESTree.Node[] = [];
+
+      for (const key of visitorKeys[node.type] ?? []) {
+        const value: unknown = node[key as keyof TSESTree.Node];
+
+        if (Array.isArray(value)) {
+          for (const child of value) {
+            if (isNode(child)) {
+              children.push(child);
+            }
+          }
+        } else if (isNode(value)) {
+          children.push(value);
+        }
+      }
+
+      return children;
+    }
+
+    function isKnownDeferredCallee(callee: TSESTree.Expression | TSESTree.Super): boolean {
+      if (callee.type === 'Super') {
+        return false;
+      }
+
+      if (callee.type === 'Identifier') {
+        return (
+          // e.g. setTimeout, setInterval, setImmediate, etc.
+          /^set[A-Z0-9_]/.test(callee.name) ||
+          callee.name === 'queueMicrotask' ||
+          callee.name === 'requestAnimationFrame' ||
+          callee.name === 'requestIdleCallback'
+        );
+      }
+
+      if (callee.type === 'MemberExpression' && callee.property.type === 'Identifier') {
+        return (
+          callee.property.name === 'then' ||
+          callee.property.name === 'catch' ||
+          callee.property.name === 'finally'
+        );
+      }
+
+      return false;
+    }
+
+    function isKnownEventBoundaryCallback(
+      callExpression: TSESTree.CallExpression,
+      callbackIndex: number,
     ): boolean {
-      let current: TSESTree.Node | undefined = node.parent;
-      let foundNestedFunction = false;
+      if (callbackIndex !== 0) {
+        return false;
+      }
 
-      while (current && current !== eventHandlerFunction) {
+      if (
+        callExpression.callee.type === 'Identifier' &&
+        callExpression.callee.name === 'handleSubmit'
+      ) {
+        // react-hook-form invokes this callback after its own submit handling,
+        // so treat it as an event boundary like other deferred callbacks.
+        return true;
+      }
+
+      return false;
+    }
+
+    /**
+     * Check if a node is inside a nested function that is passed to a callback
+     * API that may invoke it after the event handler returns.
+     */
+    function isInsideDeferredCallback(
+      node: TSESTree.Node,
+      eventHandlerFunction: TSESTree.Node,
+    ): boolean {
+      // Check if the event handler itself is in a deferred/boundary context
+      const handlerParent = eventHandlerFunction.parent;
+      if (handlerParent?.type === 'CallExpression') {
+        const callbackIndex = handlerParent.arguments.indexOf(
+          eventHandlerFunction as TSESTree.CallExpressionArgument,
+        );
         if (
-          current.type === 'ArrowFunctionExpression' ||
-          current.type === 'FunctionExpression' ||
-          current.type === 'FunctionDeclaration'
+          callbackIndex !== -1 &&
+          (isKnownDeferredCallee(handlerParent.callee) ||
+            isKnownEventBoundaryCallback(handlerParent, callbackIndex))
         ) {
-          foundNestedFunction = true;
+          return true;
+        }
+      }
+
+      let current: TSESTree.Node | undefined = node;
+
+      while (current && current !== eventHandlerFunction) {
+        if (isFunctionLike(current)) {
+          const parent = current.parent;
+          if (current.type !== 'FunctionDeclaration' && parent?.type === 'CallExpression') {
+            const callbackIndex = parent.arguments.indexOf(current);
+            if (
+              callbackIndex !== -1 &&
+              (isKnownDeferredCallee(parent.callee) ||
+                isKnownEventBoundaryCallback(parent, callbackIndex))
+            ) {
+              return true;
+            }
+          }
         }
         current = current.parent;
       }
 
-      return foundNestedFunction && current === eventHandlerFunction;
+      return false;
+    }
+
+    /** Check if the function contains an await before this access, ignoring nested functions */
+    function hasPriorAwaitInSameFunction(
+      node: TSESTree.Node,
+      eventHandlerFunction: TSESTree.Node,
+    ): boolean {
+      if (
+        !('body' in eventHandlerFunction) ||
+        !eventHandlerFunction.body ||
+        Array.isArray(eventHandlerFunction.body)
+      ) {
+        return false;
+      }
+
+      let foundPriorAwait = false;
+
+      const visit = (current: TSESTree.Node) => {
+        if (foundPriorAwait || current.range[0] >= node.range[0]) {
+          return;
+        }
+
+        if (current !== eventHandlerFunction && isFunctionLike(current)) {
+          return;
+        }
+
+        if (current.type === 'AwaitExpression') {
+          foundPriorAwait = true;
+          return;
+        }
+
+        for (const child of getChildNodes(current)) {
+          visit(child);
+          if (foundPriorAwait) {
+            return;
+          }
+        }
+      };
+
+      visit(eventHandlerFunction.body);
+      return foundPriorAwait;
     }
 
     /** Find the function that contains this node */
     function findContainingFunction(
       node: TSESTree.Node,
-    ): TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression | null {
+    ):
+      | TSESTree.ArrowFunctionExpression
+      | TSESTree.FunctionExpression
+      | TSESTree.FunctionDeclaration
+      | null {
       let current: TSESTree.Node | undefined = node.parent;
 
       while (current) {
-        if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {
+        if (isFunctionLike(current)) {
           return current;
         }
         current = current.parent;
@@ -71,7 +222,10 @@ export default ESLintUtils.RuleCreator.withoutDocs({
 
     /** Check if a function is a JSX event handler */
     function isJSXEventHandler(
-      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,
+      func:
+        | TSESTree.ArrowFunctionExpression
+        | TSESTree.FunctionExpression
+        | TSESTree.FunctionDeclaration,
     ): boolean {
       const parent = func.parent;
 
@@ -90,7 +244,10 @@ export default ESLintUtils.RuleCreator.withoutDocs({
 
     /** Get the first parameter of an event handler if it looks like an event */
     function getEventParameter(
-      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,
+      func:
+        | TSESTree.ArrowFunctionExpression
+        | TSESTree.FunctionExpression
+        | TSESTree.FunctionDeclaration,
     ): TSESTree.Identifier | null {
       const firstParam = func.params[0];
 
@@ -104,27 +261,93 @@ export default ESLintUtils.RuleCreator.withoutDocs({
       return null;
     }
 
+    function isReactEventType(typeAnnotation: TSESTree.TypeNode): boolean {
+      if (typeAnnotation.type === 'TSTypeReference') {
+        if (
+          typeAnnotation.typeName.type === 'TSQualifiedName' &&
+          typeAnnotation.typeName.left.type === 'Identifier' &&
+          typeAnnotation.typeName.left.name === 'React' &&
+          typeAnnotation.typeName.right.type === 'Identifier' &&
+          typeAnnotation.typeName.right.name.endsWith('Event')
+        ) {
+          return true;
+        }
+
+        if (
+          typeAnnotation.typeName.type === 'Identifier' &&
+          (typeAnnotation.typeName.name === 'SyntheticEvent' ||
+            typeAnnotation.typeName.name.endsWith('Event'))
+        ) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    function isTypedReactEventHandler(
+      func:
+        | TSESTree.ArrowFunctionExpression
+        | TSESTree.FunctionExpression
+        | TSESTree.FunctionDeclaration,
+    ): boolean {
+      const firstParam = func.params[0];
+      if (!firstParam || firstParam.type !== 'Identifier' || !firstParam.typeAnnotation) {
+        return false;
+      }
+
+      return isReactEventType(firstParam.typeAnnotation.typeAnnotation);
+    }
+
+    function trackIfEventHandler(
+      node:
+        | TSESTree.ArrowFunctionExpression
+        | TSESTree.FunctionExpression
+        | TSESTree.FunctionDeclaration,
+    ) {
+      if (isJSXEventHandler(node) || isTypedReactEventHandler(node)) {
+        const eventParam = getEventParameter(node);
+        if (eventParam) {
+          trackedEventFunctions.set(node, eventParam);
+        }
+        return;
+      }
+
+      // react-hook-form: handleSubmit((_data, e) => { ... })
+      // The event is the second parameter, and the entire callback is deferred.
+      const parent = node.parent;
+      if (
+        parent?.type === 'CallExpression' &&
+        parent.arguments[0] === node &&
+        isKnownEventBoundaryCallback(parent, 0)
+      ) {
+        const secondParam = node.params[1];
+        if (secondParam?.type === 'Identifier') {
+          trackedEventFunctions.set(node, secondParam);
+        }
+      }
+    }
+
     return {
       // When we enter a JSX event handler, track its event parameter
       'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression': (
         node: TSESTree.ArrowFunctionExpression,
       ) => {
-        if (isJSXEventHandler(node)) {
-          const eventParam = getEventParameter(node);
-          if (eventParam) {
-            eventHandlerParams.set(node, eventParam);
-          }
-        }
+        trackIfEventHandler(node);
       },
       'JSXAttribute > JSXExpressionContainer > FunctionExpression': (
         node: TSESTree.FunctionExpression,
       ) => {
-        if (isJSXEventHandler(node)) {
-          const eventParam = getEventParameter(node);
-          if (eventParam) {
-            eventHandlerParams.set(node, eventParam);
-          }
-        }
+        trackIfEventHandler(node);
+      },
+      ArrowFunctionExpression(node: TSESTree.ArrowFunctionExpression) {
+        trackIfEventHandler(node);
+      },
+      FunctionExpression(node: TSESTree.FunctionExpression) {
+        trackIfEventHandler(node);
+      },
+      FunctionDeclaration(node: TSESTree.FunctionDeclaration) {
+        trackIfEventHandler(node);
       },
 
       // Check for .currentTarget access
@@ -146,12 +369,14 @@ export default ESLintUtils.RuleCreator.withoutDocs({
         if (!containingFunction) return;
 
         // Check each tracked event handler to see if this access is problematic
-        for (const [eventHandler, eventParam] of eventHandlerParams) {
+        for (const [eventHandler, eventParam] of trackedEventFunctions) {
           // Check if this is accessing the event parameter
           if (objectName !== eventParam.name) continue;
 
-          // Check if the access is inside a nested function within the event handler
-          if (isInsideNestedFunction(node, eventHandler)) {
+          if (
+            isInsideDeferredCallback(node, eventHandler) ||
+            hasPriorAwaitInSameFunction(node, eventHandler)
+          ) {
             context.report({
               node,
               messageId: 'noCurrentTargetInCallback',
@@ -165,12 +390,21 @@ export default ESLintUtils.RuleCreator.withoutDocs({
       'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression:exit': (
         node: TSESTree.ArrowFunctionExpression,
       ) => {
-        eventHandlerParams.delete(node);
+        trackedEventFunctions.delete(node);
       },
       'JSXAttribute > JSXExpressionContainer > FunctionExpression:exit': (
         node: TSESTree.FunctionExpression,
       ) => {
-        eventHandlerParams.delete(node);
+        trackedEventFunctions.delete(node);
+      },
+      'ArrowFunctionExpression:exit'(node: TSESTree.ArrowFunctionExpression) {
+        trackedEventFunctions.delete(node);
+      },
+      'FunctionExpression:exit'(node: TSESTree.FunctionExpression) {
+        trackedEventFunctions.delete(node);
+      },
+      'FunctionDeclaration:exit'(node: TSESTree.FunctionDeclaration) {
+        trackedEventFunctions.delete(node);
       },
     };
   },

package/src/rules/no-hydrate-reslocals.ts

@@ -0,0 +1,102 @@
+import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils';
+
+/**
+ * All props on a hydrated component are serialized with superjson and shipped
+ * to the browser. Passing `resLocals` or `locals` (or spreading them) would
+ * leak the entire server-side `res.locals` object — CSRF tokens, auth data,
+ * authz objects, full DB rows, etc.
+ *
+ * This rule forbids those prop names (and `{...res.locals}` / `{...resLocals}`
+ * / `{...locals}` spreads) on the child of `<Hydrate>` and on the JSX argument
+ * to `hydrateHtml(...)`. Extract the specific fields you need (e.g. via
+ * `extractPageContext`) and pass them as individual props instead.
+ */
+
+const HYDRATE_COMPONENT_NAME = 'Hydrate';
+const HYDRATE_FUNCTION_NAME = 'hydrateHtml';
+const FORBIDDEN_NAMES = new Set(['resLocals', 'locals']);
+
+function extractSingleJsxChild(children: TSESTree.JSXChild[]): TSESTree.JSXElement | null {
+  const nonWhitespace = children.filter((child) => {
+    if (child.type === 'JSXText') return child.value.trim().length > 0;
+    return true;
+  });
+  if (nonWhitespace.length !== 1 || nonWhitespace[0].type !== 'JSXElement') {
+    return null;
+  }
+  return nonWhitespace[0];
+}
+
+function spreadArgumentDescribesResLocals(argument: TSESTree.Expression): boolean {
+  if (argument.type === 'Identifier') {
+    return FORBIDDEN_NAMES.has(argument.name);
+  }
+  if (
+    argument.type === 'MemberExpression' &&
+    !argument.computed &&
+    argument.property.type === 'Identifier' &&
+    argument.property.name === 'locals'
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export default ESLintUtils.RuleCreator.withoutDocs({
+  meta: {
+    type: 'problem',
+    messages: {
+      forbiddenProp:
+        'Do not pass "{{name}}" to a hydrated component; props are serialized and sent to the client, so this would leak the full server-side res.locals. Pass the specific fields the component needs instead.',
+      forbiddenSpread:
+        'Do not spread res.locals onto a hydrated component; props are serialized and sent to the client. Pass the specific fields the component needs instead.',
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create(context) {
+    function checkHydratedElement(element: TSESTree.JSXElement) {
+      for (const attribute of element.openingElement.attributes) {
+        if (attribute.type === 'JSXAttribute') {
+          if (attribute.name.type === 'JSXIdentifier' && FORBIDDEN_NAMES.has(attribute.name.name)) {
+            context.report({
+              node: attribute,
+              messageId: 'forbiddenProp',
+              data: { name: attribute.name.name },
+            });
+          }
+        } else if (attribute.type === 'JSXSpreadAttribute') {
+          if (spreadArgumentDescribesResLocals(attribute.argument)) {
+            context.report({
+              node: attribute,
+              messageId: 'forbiddenSpread',
+            });
+          }
+        }
+      }
+    }
+
+    return {
+      JSXElement(node) {
+        const opening = node.openingElement.name;
+        if (opening.type !== 'JSXIdentifier' || opening.name !== HYDRATE_COMPONENT_NAME) return;
+
+        const child = extractSingleJsxChild(node.children);
+        if (!child) return;
+
+        checkHydratedElement(child);
+      },
+
+      CallExpression(node) {
+        if (node.callee.type !== 'Identifier' || node.callee.name !== HYDRATE_FUNCTION_NAME) return;
+        if (node.arguments.length === 0) return;
+
+        const arg = node.arguments[0];
+        if (arg.type !== 'JSXElement') return;
+
+        checkHydratedElement(arg);
+      },
+    };
+  },
+});

package/src/tests/no-current-target-in-callback.test.ts

@@ -38,10 +38,40 @@ ruleTester.run('no-current-target-in-callback', rule, {
     {
       code: '<Component render={(e) => setFoo(() => e.currentTarget)} />',
     },
+    // Synchronous nested callbacks are safe
+    {
+      code: '<input onChange={(e) => items.map(() => e.currentTarget.value)} />',
+    },
+    {
+      code: `const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+        fields.find((field) => field.name === e.currentTarget.name);
+      };`,
+    },
+    {
+      code: `const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+        const cursorPosition = run(() => e.currentTarget.selectionStart ?? 0);
+        return cursorPosition;
+      };`,
+    },
     // Direct setState without callback
     {
       code: '<input onChange={(e) => setChecks({ value: e.currentTarget.checked })} />',
     },
+    // Capturing currentTarget before await is safe
+    {
+      code: `const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        const form = e.currentTarget;
+        await trigger();
+        form.submit();
+      };`,
+    },
+    // Destructuring currentTarget before await is safe
+    {
+      code: `const handleSubmit = async ({ currentTarget }: React.SubmitEvent<HTMLFormElement>) => {
+        await trigger();
+        currentTarget.submit();
+      };`,
+    },
     // Event target (not currentTarget) - different issue, not covered by this rule
     {
       code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.target.checked }))} />',
@@ -79,21 +109,11 @@ ruleTester.run('no-current-target-in-callback', rule, {
       code: '<button onClick={(e) => setFoo((prev) => ({ ...prev, clicked: e.currentTarget.id }))} />',
       errors: [{ messageId: 'noCurrentTargetInCallback' }],
     },
-    // Nested arrow function in array method
-    {
-      code: '<input onChange={(e) => items.map(() => e.currentTarget.value)} />',
-      errors: [{ messageId: 'noCurrentTargetInCallback' }],
-    },
     // Function expression callback
     {
       code: '<input onChange={(e) => setChecks(function(c) { return { ...c, value: e.currentTarget.checked }; })} />',
       errors: [{ messageId: 'noCurrentTargetInCallback' }],
     },
-    // Deeply nested
-    {
-      code: '<input onChange={(e) => outer(() => inner(() => e.currentTarget.value))} />',
-      errors: [{ messageId: 'noCurrentTargetInCallback' }],
-    },
     // With block body
     {
       code: `<input onChange={(e) => {
@@ -103,5 +123,42 @@ ruleTester.run('no-current-target-in-callback', rule, {
       }} />`,
       errors: [{ messageId: 'noCurrentTargetInCallback' }],
     },
+    // Promise callbacks are deferred
+    {
+      code: `<input onChange={(e) => {
+        Promise.resolve().then(() => e.currentTarget.value);
+      }} />`,
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Timer callbacks are deferred
+    {
+      code: `<input onChange={(e) => {
+        setTimeout(() => e.currentTarget.value, 0);
+      }} />`,
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Access after await in a typed event handler
+    {
+      code: `const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        await trigger();
+        e.currentTarget.submit();
+      };`,
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Access after await in an inline JSX handler
+    {
+      code: `<form onSubmit={async (e) => {
+        await trigger();
+        e.currentTarget.submit();
+      }} />`,
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // react-hook-form handleSubmit callbacks are also after the original event boundary
+    {
+      code: `const onSubmit = handleSubmit((_data, e) => {
+        e.currentTarget.submit();
+      });`,
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
   ],
 });