@prairielearn/eslint-plugin 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@prairielearn/eslint-plugin",
-  "version": "4.0.0",
+  "version": "4.2.0",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/PrairieLearn/PrairieLearn.git",
@@ -19,17 +20,17 @@
     "eslint": "^10.0.0"
   },
   "dependencies": {
-    "@typescript-eslint/utils": "^8.56.1",
-    "typescript": "^5.9.3"
+    "@typescript-eslint/utils": "^8.59.2",
+    "typescript": "^6.0.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",
+    "@prairielearn/tsconfig": "^2.1.0",
+    "@types/node": "^24.12.2",
+    "@typescript-eslint/rule-tester": "^8.59.2",
+    "@typescript-eslint/types": "^8.59.2",
+    "@typescript/native-preview": "beta",
+    "@vitest/coverage-v8": "^4.1.5",
     "tsx": "^4.21.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.5"
   }
 }

package/src/index.ts

@@ -2,14 +2,20 @@ 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 requireTrpcPermissionMiddleware from './rules/require-trpc-permission-middleware.js';
 import safeDbTypes from './rules/safe-db-types.js';
 
-export const rules = {
+const rules = {
   'aws-client-mandatory-config': awsClientMandatoryConfig,
   '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,
+  'require-trpc-permission-middleware': requireTrpcPermissionMiddleware,
   'safe-db-types': safeDbTypes,
 };
+
+export default { rules };

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);
+      },
+    };
+  },
+});