Home / Class/ Scopes Class — react Architecture

Scopes Class — react Architecture

Architecture documentation for the Scopes class in RenameVariables.ts from the react codebase.

Entity Profile

Dependency Diagram

graph TD
  a4975235_ac38_42fc_f847_271a62829ded["Scopes"]
  a67a8ce3_d9a8_a740_fb57_bc90354f75e7["RenameVariables.ts"]
  a4975235_ac38_42fc_f847_271a62829ded -->|defined in| a67a8ce3_d9a8_a740_fb57_bc90354f75e7
  ed9b1f49_2728_6ed0_d526_487f4594015c["constructor()"]
  a4975235_ac38_42fc_f847_271a62829ded -->|method| ed9b1f49_2728_6ed0_d526_487f4594015c
  9fff5f56_18e8_8886_6559_68fb29f122fb["visit()"]
  a4975235_ac38_42fc_f847_271a62829ded -->|method| 9fff5f56_18e8_8886_6559_68fb29f122fb
  b43d34c8_bdaa_dad7_e095_56e44076d5da["name()"]
  a4975235_ac38_42fc_f847_271a62829ded -->|method| b43d34c8_bdaa_dad7_e095_56e44076d5da
  80d66d1e_3ebc_6c58_3b0f_f08869cff8e0["enter()"]
  a4975235_ac38_42fc_f847_271a62829ded -->|method| 80d66d1e_3ebc_6c58_3b0f_f08869cff8e0

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts lines 125–192

class Scopes {
  #seen: Map<DeclarationId, IdentifierName> = new Map();
  #stack: Array<Map<string, DeclarationId>> = [new Map()];
  #globals: Set<string>;
  #programContext: ProgramContext;
  names: Set<ValidIdentifierName> = new Set();

  constructor(globals: Set<string>, programContext: ProgramContext) {
    this.#globals = globals;
    this.#programContext = programContext;
  }

  visit(identifier: Identifier): void {
    const originalName = identifier.name;
    if (originalName === null) {
      return;
    }
    const mappedName = this.#seen.get(identifier.declarationId);
    if (mappedName !== undefined) {
      identifier.name = mappedName;
      return;
    }
    let name: string = originalName.value;
    let id = 0;
    if (isPromotedTemporary(originalName.value)) {
      name = `t${id++}`;
    } else if (isPromotedJsxTemporary(originalName.value)) {
      name = `T${id++}`;
    }
    while (this.#lookup(name) !== null || this.#globals.has(name)) {
      if (isPromotedTemporary(originalName.value)) {
        name = `t${id++}`;
      } else if (isPromotedJsxTemporary(originalName.value)) {
        name = `T${id++}`;
      } else {
        name = `${originalName.value}$${id++}`;
      }
    }
    this.#programContext.addNewReference(name);
    const identifierName = makeIdentifierName(name);
    identifier.name = identifierName;
    this.#seen.set(identifier.declarationId, identifierName);
    this.#stack.at(-1)!.set(identifierName.value, identifier.declarationId);
    this.names.add(identifierName.value);
  }

  #lookup(name: string): DeclarationId | null {
    for (let i = this.#stack.length - 1; i >= 0; i--) {
      const scope = this.#stack[i]!;
      const entry = scope.get(name);
      if (entry !== undefined) {
        return entry;
      }
    }
    return null;
  }

  enter(fn: () => void): void {
    const next = new Map();
    this.#stack.push(next);
    fn();
    const last = this.#stack.pop();
    CompilerError.invariant(last === next, {
      reason: 'Mismatch push/pop calls',
      loc: GeneratedSource,
    });
  }
}

Domain

Frequently Asked Questions

What is the Scopes class?
Scopes is a class in the react codebase, defined in compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts.
Where is Scopes defined?
Scopes is defined in compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/RenameVariables.ts at line 125.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free