checkTopLevelNode() — react Function Reference

Architecture documentation for the checkTopLevelNode() function in RunReactCompiler.ts from the react codebase.

Function typescript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ checkTopLevelNode() — react Function Reference

Dependency Diagram

graph TD
  59d4558f_2d12_c52c_4ce6_25edc7c3540e["checkTopLevelNode()"]
  0e801e17_9dc9_7a83_ce0f_d28b56e090f5["RunReactCompiler.ts"]
  59d4558f_2d12_c52c_4ce6_25edc7c3540e -->|defined in| 0e801e17_9dc9_7a83_ce0f_d28b56e090f5
  09651b5c_6fe0_bfb1_3cb6_67768201b6de["mayContainReactCode()"]
  09651b5c_6fe0_bfb1_3cb6_67768201b6de -->|calls| 59d4558f_2d12_c52c_4ce6_25edc7c3540e
  style 59d4558f_2d12_c52c_4ce6_25edc7c3540e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts lines 49–119

function checkTopLevelNode(node: ESTree.Node): boolean {
  // Handle Flow component/hook declarations (hermes-eslint produces these node types)
  // @ts-expect-error not part of ESTree spec
  if (node.type === 'ComponentDeclaration' || node.type === 'HookDeclaration') {
    return true;
  }

  // Handle: export function MyComponent() {} or export const useHook = () => {}
  if (node.type === 'ExportNamedDeclaration') {
    const decl = (node as ESTree.ExportNamedDeclaration).declaration;
    if (decl != null) {
      return checkTopLevelNode(decl);
    }
    return false;
  }

  // Handle: export default function MyComponent() {} or export default () => {}
  if (node.type === 'ExportDefaultDeclaration') {
    const decl = (node as ESTree.ExportDefaultDeclaration).declaration;
    // Anonymous default function export - compile conservatively
    if (
      decl.type === 'FunctionExpression' ||
      decl.type === 'ArrowFunctionExpression' ||
      (decl.type === 'FunctionDeclaration' &&
        (decl as ESTree.FunctionDeclaration).id == null)
    ) {
      return true;
    }
    return checkTopLevelNode(decl as ESTree.Node);
  }

  // Handle: function MyComponent() {}
  // Also handles Flow component/hook syntax transformed to FunctionDeclaration with flags
  if (node.type === 'FunctionDeclaration') {
    // Check for Hermes-added flags indicating Flow component/hook syntax
    if (
      '__componentDeclaration' in node ||
      '__hookDeclaration' in node
    ) {
      return true;
    }
    const id = (node as ESTree.FunctionDeclaration).id;
    if (id != null) {
      const name = id.name;
      if (COMPONENT_NAME_PATTERN.test(name) || HOOK_NAME_PATTERN.test(name)) {
        return true;
      }
    }
  }

  // Handle: const MyComponent = () => {} or const useHook = function() {}
  if (node.type === 'VariableDeclaration') {
    for (const decl of (node as ESTree.VariableDeclaration).declarations) {
      if (decl.id.type === 'Identifier') {
        const init = decl.init;
        if (
          init != null &&
          (init.type === 'ArrowFunctionExpression' ||
            init.type === 'FunctionExpression')
        ) {
          const name = decl.id.name;
          if (COMPONENT_NAME_PATTERN.test(name) || HOOK_NAME_PATTERN.test(name)) {
            return true;
          }
        }
      }
    }
  }

  return false;
}