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
Source
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