@codeyam/codeyam-cli 0.1.0-bleeding-edge.8afd3ee

package/analyzer-template/packages/ai/src/lib/isolateScopes.ts

@@ -0,0 +1,898 @@
+import * as ts from 'typescript';
+import { ScopeInfo } from './dataStructure/ScopeDataStructure';
+
+function getBindingNames(name: ts.BindingName): string[] {
+  if (ts.isIdentifier(name)) {
+    return [name.text];
+  }
+  if (ts.isObjectBindingPattern(name) || ts.isArrayBindingPattern(name)) {
+    const names: string[] = [];
+    name.elements.forEach((element) => {
+      if (ts.isBindingElement(element)) {
+        names.push(...getBindingNames(element.name));
+      }
+    });
+    return names;
+  }
+  return [];
+}
+
+function isFunctionScope(node: ts.Node): boolean {
+  return (
+    ts.isFunctionDeclaration(node) ||
+    ts.isFunctionExpression(node) ||
+    ts.isArrowFunction(node) ||
+    ts.isMethodDeclaration(node)
+  );
+}
+
+function isBlockScope(node: ts.Node): boolean {
+  if (ts.isBlock(node)) {
+    // block nodes are bare scopes iff they are not part of a function, control structure, etc.
+    const parent = node.parent;
+    return (
+      !parent ||
+      (!ts.isFunctionLike(parent) &&
+        !ts.isIfStatement(parent) &&
+        !ts.isForStatement(parent) &&
+        !ts.isForOfStatement(parent) &&
+        !ts.isForInStatement(parent) &&
+        !ts.isWhileStatement(parent) &&
+        !ts.isDoStatement(parent) &&
+        !ts.isTryStatement(parent))
+    );
+  }
+  return (
+    ts.isIfStatement(node) ||
+    ts.isForStatement(node) ||
+    ts.isForOfStatement(node) ||
+    ts.isForInStatement(node) ||
+    ts.isWhileStatement(node) ||
+    ts.isDoStatement(node)
+  );
+}
+
+function getScopeName(node: ts.Node): string | undefined {
+  if (
+    (ts.isFunctionDeclaration(node) ||
+      ts.isFunctionExpression(node) ||
+      ts.isMethodDeclaration(node)) &&
+    node.name &&
+    ts.isIdentifier(node.name)
+  ) {
+    return node.name.text;
+  }
+}
+
+interface ProcessScopeArgs {
+  node: ts.Node;
+  sourceFile: ts.SourceFile;
+  name?: string;
+  entityNames?: string[];
+  maxJSXLimit?: number;
+  parentNode?: ts.Node;
+  generateSyntheticName: () => string;
+}
+
+/**
+ * Process a node as a "scope."
+ *
+ * This function does three things:
+ * 1. It records the original text for the node.
+ * 2. It traverses the subtree (or portions of it) to collect variable declarations (including parameters).
+ * 3. It "extracts" any nested scopes (function-like, block scopes, or JSX).
+ */
+function processScope({
+  node,
+  sourceFile,
+  name = 'root',
+  entityNames = [],
+  maxJSXLimit = 0,
+  parentNode,
+  generateSyntheticName,
+}: ProcessScopeArgs): ScopeInfo {
+  const scopeStart = node.getStart(sourceFile);
+  const scopeEnd = node.getEnd();
+  const originalText = sourceFile.text.substring(scopeStart, scopeEnd);
+
+  const variables = new Set<string>();
+  const childScopes: { [name: string]: ScopeInfo } = {};
+
+  // For the root scope or when examining a stand-alone function,
+  // if we're looking at a function declaration, add its name to the root variables
+  if (
+    ts.isFunctionDeclaration(node) &&
+    node.name &&
+    (!parentNode || ts.isSourceFile(parentNode))
+  ) {
+    // Only add the function name to the root variables if this node is a source file
+    // For function scopes, we don't want the function name in its own variables
+    if (ts.isSourceFile(node) || (parentNode && ts.isSourceFile(parentNode))) {
+      variables.add(node.name.text);
+    }
+  }
+
+  interface ChildRange {
+    start: number;
+    end: number;
+    replacement: string;
+  }
+  const childScopesRanges: ChildRange[] = [];
+
+  const addChildScopesRange = ({
+    start,
+    end,
+    replacement,
+  }: {
+    start: number;
+    end: number;
+    replacement: string;
+  }) => {
+    childScopesRanges.push({ start, end, replacement });
+  };
+
+  const visit = (n: ts.Node, depth = 0) => {
+    const isNestedFunction = depth > 0;
+
+    if (ts.isStatement(n) && ts.isVariableStatement(n)) {
+      const declarations = n.declarationList.declarations;
+      for (const declaration of declarations) {
+        const declarationName = declaration.name.getText(sourceFile);
+        if (entityNames?.includes(declarationName) && declaration.initializer) {
+          addChildScopesRange({
+            start: n.getStart(sourceFile),
+            end: n.getEnd(),
+            replacement: declarationName + '()',
+          });
+
+          const childScopeInfo = processScope({
+            node: declaration.initializer,
+            sourceFile,
+            name: declarationName,
+            maxJSXLimit,
+            parentNode: node,
+            generateSyntheticName,
+          });
+          childScopes[declarationName] = childScopeInfo;
+          return;
+        }
+      }
+    }
+
+    if (
+      ts.isCallExpression(n) &&
+      entityNames?.includes(n.expression.getText(sourceFile))
+    ) {
+      const name = n.expression.getText(sourceFile);
+      addChildScopesRange({
+        start: n.getStart(sourceFile),
+        end: n.getEnd(),
+        replacement: name + '()',
+      });
+
+      const childScopeInfo = processScope({
+        node: n,
+        sourceFile,
+        name,
+        maxJSXLimit,
+        parentNode: node,
+        generateSyntheticName,
+      });
+      childScopes[name] = childScopeInfo;
+      return;
+    }
+
+    // ─────────────────────────────────────────────────────────────
+    // HANDLE JSX ATTRIBUTES
+    // ─────────────────────────────────────────────────────────────
+    // Look for JSX attributes with expressions as values
+    if (
+      ts.isJsxAttribute(n) &&
+      n.initializer &&
+      ts.isJsxExpression(n.initializer)
+    ) {
+      // If the attribute has an expression, check if that expression contains functions
+      if (n.initializer.expression) {
+        // If the expression is a function, extract it
+        if (isFunctionScope(n.initializer.expression)) {
+          const expr = n.initializer.expression;
+          const childStart = expr.getStart(sourceFile);
+          const childEnd = expr.getEnd();
+          const keyName = generateSyntheticName();
+
+          addChildScopesRange({
+            start: childStart,
+            end: childEnd,
+            replacement: `${keyName}()`,
+          });
+
+          const childScopeInfo = processScope({
+            node: expr,
+            sourceFile,
+            name: keyName,
+            maxJSXLimit,
+            parentNode: n,
+            generateSyntheticName,
+          });
+
+          childScopes[keyName] = childScopeInfo;
+          return;
+        }
+
+        // Otherwise, continue searching inside the expression
+        ts.forEachChild(n.initializer.expression, (child) =>
+          visit(child, depth),
+        );
+        return;
+      }
+    }
+
+    // ─────────────────────────────────────────────────────────────
+    // JSX SIZE CHECK:
+    // If the node is a JSX element/fragment/self–closing and it exceeds
+    // the size limit, we replace the entire node with a single placeholder.
+    // ─────────────────────────────────────────────────────────────
+    if (
+      ts.isJsxElement(n) ||
+      ts.isJsxFragment(n) ||
+      ts.isJsxSelfClosingElement(n)
+    ) {
+      const nodeTextLength = n.getEnd() - n.getStart(sourceFile);
+
+      if (nodeTextLength > maxJSXLimit) {
+        ts.forEachChild(n, (child) => {
+          if (ts.isJsxElement(child)) {
+            const jsxEl = child;
+            if (jsxEl.parent && ts.isJsxElement(jsxEl.parent)) {
+              // Nested JSX element: extract the entire element
+              const childStart = child.getStart(sourceFile);
+              const childEnd = child.getEnd();
+              const keyName = generateSyntheticName();
+              addChildScopesRange({
+                start: childStart,
+                end: childEnd,
+                replacement: '{' + keyName + '}',
+              });
+              const childScopeInfo = processScope({
+                node: child,
+                sourceFile,
+                name: keyName,
+                maxJSXLimit,
+                parentNode: n,
+                generateSyntheticName,
+              });
+              childScopes[keyName] = childScopeInfo;
+              return;
+            } else {
+              // Top-level in this scope: keep the tags, extract the children
+              const childrenStart = jsxEl.openingElement.getEnd();
+              const childrenEnd = jsxEl.closingElement.getStart(sourceFile);
+              const keyName = generateSyntheticName();
+              addChildScopesRange({
+                start: childrenStart,
+                end: childrenEnd,
+                replacement: '{' + keyName + '}',
+              });
+
+              // Build a 'synthetic node' representing just the children
+              const childrenNode: ts.Node = {
+                getStart: () => jsxEl.openingElement.getEnd(),
+                getEnd: () => jsxEl.closingElement.getStart(sourceFile),
+                forEachChild: (cb: (node: ts.Node) => void) => {
+                  jsxEl.children.forEach((child) => cb(child));
+                },
+              } as ts.Node;
+
+              const childScopeInfo = processScope({
+                node: childrenNode,
+                sourceFile,
+                name: keyName,
+                maxJSXLimit,
+                parentNode: n,
+                generateSyntheticName,
+              });
+              childScopes[keyName] = childScopeInfo;
+              return;
+            }
+          }
+          if (ts.isJsxFragment(child)) {
+            const jsxFrag = child;
+            if (jsxFrag.parent && ts.isJsxElement(jsxFrag.parent)) {
+              // Nested fragment => extract entire fragment
+              const childStart = child.getStart(sourceFile);
+              const childEnd = child.getEnd();
+              const keyName = generateSyntheticName();
+              addChildScopesRange({
+                start: childStart,
+                end: childEnd,
+                replacement: '{' + keyName + '}',
+              });
+              const childScopeInfo = processScope({
+                node: child,
+                sourceFile,
+                name: keyName,
+                maxJSXLimit,
+                parentNode: n,
+                generateSyntheticName,
+              });
+              childScopes[keyName] = childScopeInfo;
+              return;
+            } else {
+              // top-level => keep the <>...</> and extract children
+              const childrenStart = jsxFrag.openingFragment.getEnd();
+              const childrenEnd =
+                scopeStart + jsxFrag.closingFragment.getStart(sourceFile);
+              const keyName = generateSyntheticName();
+              addChildScopesRange({
+                start: childrenStart,
+                end: childrenEnd,
+                replacement: '{' + keyName + '}',
+              });
+              const childrenNode: ts.Node = {
+                getStart: () => jsxFrag.openingFragment.getEnd(),
+                getEnd: () => jsxFrag.closingFragment.getStart(sourceFile),
+                forEachChild: (cb: (node: ts.Node) => void) => {
+                  jsxFrag.children.forEach((child) => cb(child));
+                },
+              } as ts.Node;
+              const childScopeInfo = processScope({
+                node: childrenNode,
+                sourceFile,
+                name: keyName,
+                maxJSXLimit,
+                parentNode: n,
+                generateSyntheticName,
+              });
+              childScopes[keyName] = childScopeInfo;
+              return;
+            }
+          }
+          if (ts.isJsxSelfClosingElement(child)) {
+            // If it's a nested self-closing element, just extract it
+            if (child !== node) {
+              const childStart = child.getStart(sourceFile);
+              const childEnd = child.getEnd();
+              const keyName = generateSyntheticName();
+              addChildScopesRange({
+                start: childStart,
+                end: childEnd,
+                replacement: '{' + keyName + '}',
+              });
+              const childScopeInfo = processScope({
+                node: child,
+                sourceFile,
+                name: keyName,
+                maxJSXLimit,
+                parentNode: n,
+                generateSyntheticName,
+              });
+              childScopes[keyName] = childScopeInfo;
+              return;
+            }
+          }
+
+          // If we didn't return above, or if it's the top node, let's keep going:
+          if (ts.isJsxExpression(child)) {
+            // Directly visit the expression if it exists
+            if (child.expression) {
+              visit(child.expression, depth);
+            }
+            return;
+          }
+          ts.forEachChild(child, (n) => visit(n, depth));
+          return;
+        });
+      } else {
+        // Even if the JSX element is not over the size limit,
+        // we should still process its attributes and children for function scopes
+        if (ts.isJsxSelfClosingElement(n)) {
+          n.attributes.properties.forEach((prop) => visit(prop, depth));
+        } else if (ts.isJsxElement(n)) {
+          n.openingElement.attributes.properties.forEach((prop) =>
+            visit(prop, depth),
+          );
+          // Also visit children to find arrow functions inside JSX expressions
+          n.children.forEach((child) => {
+            if (ts.isJsxExpression(child) && child.expression) {
+              visit(child.expression, depth);
+            } else if (ts.isJsxElement(child) || ts.isJsxFragment(child)) {
+              visit(child, depth);
+            }
+          });
+        } else if (ts.isJsxFragment(n)) {
+          // Also handle JSX fragments - visit their children
+          n.children.forEach((child) => {
+            if (ts.isJsxExpression(child) && child.expression) {
+              visit(child.expression, depth);
+            } else if (ts.isJsxElement(child) || ts.isJsxFragment(child)) {
+              visit(child, depth);
+            }
+          });
+        }
+      }
+
+      return;
+    }
+    // ─────────────────────────────────────────────────────────────
+    // END JSX SIZE CHECK
+    // ─────────────────────────────────────────────────────────────
+
+    // If we hit a node that creates its own scope:
+    if (
+      n !== node &&
+      (isFunctionScope(n) || isBlockScope(n) || ts.isTryStatement(n))
+    ) {
+      if (ts.isTryStatement(n)) {
+        processTryStatement(n);
+        return;
+      }
+
+      // Handle function expressions or arrow functions assigned to variables
+      if (
+        (ts.isFunctionExpression(n) || ts.isArrowFunction(n)) &&
+        n.parent &&
+        ts.isVariableDeclaration(n.parent)
+      ) {
+        const varStmt = n.parent.parent && n.parent.parent.parent;
+        if (
+          node === sourceFile &&
+          varStmt &&
+          ts.isVariableStatement(varStmt) &&
+          varStmt.parent === sourceFile &&
+          sourceFile.statements.length === 1
+        ) {
+          // special edge case: the whole file is a single variable declaration
+          ts.forEachChild(n, (child) => visit(child, depth + 1));
+          return;
+        }
+        const childStart = n.getStart(sourceFile);
+        const childEnd = n.getEnd();
+
+        const grandParent = n.parent?.parent;
+
+        let keyName: string | undefined;
+        if (grandParent && ts.isVariableDeclarationList(grandParent)) {
+          keyName =
+            grandParent.declarations?.[0]?.name?.getText() +
+            '____' +
+            generateSyntheticName();
+        }
+
+        if (!keyName) {
+          keyName = generateSyntheticName();
+        }
+
+        addChildScopesRange({
+          start: childStart,
+          end: childEnd,
+          replacement: keyName + 'F',
+        });
+        const childScopeInfo = processScope({
+          node: n,
+          sourceFile,
+          name: keyName,
+          maxJSXLimit,
+          parentNode: n.parent,
+          generateSyntheticName,
+        });
+        childScopes[keyName] = childScopeInfo;
+        return;
+      }
+
+      // For function–like scopes with a name on the node itself.
+      if (
+        (ts.isFunctionDeclaration(n) ||
+          ts.isFunctionExpression(n) ||
+          ts.isMethodDeclaration(n)) &&
+        getScopeName(n)
+      ) {
+        const childStart = n.getStart(sourceFile);
+        const childEnd = n.getEnd();
+        const keyName = getScopeName(n)!;
+
+        // Add function name to parent scope variables but not its parameters or internal variables
+        variables.add(keyName);
+
+        addChildScopesRange({
+          start: childStart,
+          end: childEnd,
+          replacement: '',
+        });
+
+        // Process the function as its own scope, passing 0 as the depth for the new scope
+        const childScopeInfo = processScope({
+          node: n,
+          sourceFile,
+          name: keyName,
+          maxJSXLimit,
+          parentNode: node,
+          generateSyntheticName,
+        });
+
+        // Filter out the function name from its own variables
+        childScopeInfo.variables = childScopeInfo.variables.filter(
+          (v) => v !== keyName,
+        );
+
+        // Check if this is a static method
+        if (ts.isMethodDeclaration(n)) {
+          const hasStaticModifier = n.modifiers?.some(
+            (m) => m.kind === ts.SyntaxKind.StaticKeyword,
+          );
+          childScopeInfo.isStatic = hasStaticModifier ?? false;
+        }
+
+        childScopes[keyName] = childScopeInfo;
+        return;
+      }
+
+      // Handle constructors
+      if (ts.isConstructorDeclaration(n)) {
+        const childStart = n.getStart(sourceFile);
+        const childEnd = n.getEnd();
+        const keyName = 'constructor';
+
+        addChildScopesRange({
+          start: childStart,
+          end: childEnd,
+          replacement: '',
+        });
+
+        // Process the constructor as its own scope
+        const childScopeInfo = processScope({
+          node: n,
+          sourceFile,
+          name: keyName,
+          maxJSXLimit,
+          parentNode: node,
+          generateSyntheticName,
+        });
+
+        // Constructors are never static (by definition in JS/TS)
+        childScopeInfo.isStatic = false;
+
+        childScopes[keyName] = childScopeInfo;
+        return;
+      }
+
+      // Handle arrow functions regardless of parent
+      if (ts.isArrowFunction(n)) {
+        const childStart = n.getStart(sourceFile);
+        const childEnd = n.getEnd();
+        const keyName = generateSyntheticName();
+        addChildScopesRange({
+          start: childStart,
+          end: childEnd,
+          replacement: `${keyName}()`,
+        });
+        const childScopeInfo = processScope({
+          node: n,
+          sourceFile,
+          name: keyName,
+          maxJSXLimit,
+          parentNode: node,
+          generateSyntheticName,
+        });
+        childScopes[keyName] = childScopeInfo;
+        return;
+      }
+
+      // Otherwise, for any other nested scope, use a synthetic name.
+      {
+        const childStart = n.getStart(sourceFile);
+        const childEnd = n.getEnd();
+        const keyName = generateSyntheticName();
+        addChildScopesRange({
+          start: childStart,
+          end: childEnd,
+          replacement: keyName + '()',
+        });
+        const childScopeInfo = processScope({
+          node: n,
+          sourceFile,
+          name: keyName,
+          maxJSXLimit,
+          parentNode: node,
+          generateSyntheticName,
+        });
+        childScopes[keyName] = childScopeInfo;
+        return;
+      }
+    }
+
+    // Skip catch clauses so that catch-bound variables aren't added to the parent.
+    if (ts.isCatchClause(n)) {
+      return;
+    }
+
+    // If we are in a function scope directly (depth==0), collect its parameters and variables
+    // If it's a nested function, do not collect its variables in this scope
+    if (!isNestedFunction) {
+      // Collect variable declarations (excluding function expressions/arrow functions).
+      if (ts.isVariableDeclaration(n)) {
+        if (
+          n.initializer &&
+          (ts.isFunctionExpression(n.initializer) ||
+            ts.isArrowFunction(n.initializer))
+        ) {
+          // The initializer is extracted as its own scope above
+        } else {
+          const names = getBindingNames(n.name);
+          names.forEach((nm) => variables.add(nm));
+        }
+      }
+      // Also collect function parameters only when directly visiting the current function node
+      if (ts.isParameter(n)) {
+        const names = getBindingNames(n.name);
+        names.forEach((nm) => variables.add(nm));
+      }
+    }
+
+    // Use node.forEachChild if available (for synthetic nodes), otherwise use ts.forEachChild
+    const nodeIsSynthetic = n && !(n as any).kind;
+    if (nodeIsSynthetic && typeof (n as any).forEachChild === 'function') {
+      (n as any).forEachChild((child: ts.Node) => visit(child, depth));
+    } else {
+      ts.forEachChild(n, (child) => visit(child, depth));
+    }
+  };
+
+  const processTryStatement = (n: ts.TryStatement) => {
+    const childStart = n.getStart(sourceFile);
+    const childEnd = n.getEnd();
+    const tryKeyName = generateSyntheticName();
+    const catchKeyName = n.catchClause ? generateSyntheticName() : null;
+    const finallyKeyName = n.finallyBlock ? generateSyntheticName() : null;
+
+    // process try block
+    const tryBlockInfo = processScope({
+      node: n.tryBlock,
+      sourceFile,
+      name: tryKeyName,
+      maxJSXLimit,
+      parentNode: n,
+      generateSyntheticName,
+    });
+    childScopes[tryKeyName] = tryBlockInfo;
+
+    // build replacement text starting with try block
+    let replacement = `try ${tryKeyName}()`;
+
+    if (catchKeyName) {
+      const catchBlockInfo = processScope({
+        node: n.catchClause.block,
+        sourceFile,
+        name: catchKeyName,
+        maxJSXLimit,
+        parentNode: n,
+        generateSyntheticName,
+      });
+      childScopes[catchKeyName] = catchBlockInfo;
+
+      if (n.catchClause.variableDeclaration) {
+        const catchBindings = getBindingNames(
+          n.catchClause.variableDeclaration.name,
+        );
+        catchBlockInfo.variables.unshift(...catchBindings);
+      }
+
+      const catchBinding = n.catchClause.variableDeclaration
+        ? sourceFile.text.substring(
+            n.catchClause.variableDeclaration.getStart(sourceFile),
+            n.catchClause.variableDeclaration.getEnd(),
+          )
+        : '';
+      replacement += ` catch${catchBinding ? ` (${catchBinding})` : ''} ${catchKeyName}()`;
+    }
+
+    // Process finally block if it exists
+    if (finallyKeyName) {
+      const finallyBlockInfo = processScope({
+        node: n.finallyBlock,
+        sourceFile,
+        name: finallyKeyName,
+        maxJSXLimit,
+        parentNode: n,
+        generateSyntheticName,
+      });
+      childScopes[finallyKeyName] = finallyBlockInfo;
+      replacement += ` finally ${finallyKeyName}()`;
+    }
+
+    addChildScopesRange({
+      start: childStart,
+      end: childEnd,
+      replacement,
+    });
+  };
+
+  // Start the traversal
+  visit(node);
+
+  // Rebuild the modified text by applying all child scope replacements.
+  childScopesRanges.sort((a, b) => b.start - a.start);
+  let modifiedText = originalText;
+  for (const { start, end, replacement } of childScopesRanges) {
+    modifiedText =
+      modifiedText.slice(0, start - scopeStart) +
+      replacement +
+      modifiedText.slice(end - scopeStart);
+  }
+
+  return {
+    name,
+    start: scopeStart,
+    end: scopeEnd,
+    text: modifiedText,
+    variables: Array.from(variables),
+    childScopes,
+  };
+}
+
+/**
+ * Main entry point.
+ *
+ * The code is parsed into a SourceFile. Then, if there is exactly one top–level
+ * function declaration and the trimmed code starts with "function", that function
+ * is used as the root scope. Otherwise, the whole file is used.
+ */
+export default function isolateScopes(
+  code: string,
+  options?: {
+    jsxLimit?: number;
+    entityNames?: string[];
+  },
+): ScopeInfo {
+  const sourceFile = ts.createSourceFile(
+    'temp.tsx',
+    code,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  );
+
+  let syntheticCounter = 1;
+  const generateSyntheticName = (): string => {
+    return 'cyScope' + syntheticCounter++;
+  };
+
+  const isolatedScopes = processScope({
+    node: sourceFile,
+    sourceFile,
+    entityNames: options?.entityNames,
+    maxJSXLimit: options?.jsxLimit,
+    generateSyntheticName,
+  });
+
+  // const logChildIds = (scope: ScopeInfo) => {
+  //   console.info(scope.name, scope.text, Object.keys(scope.childScopes))
+  //   for (const childScope of Object.values(scope.childScopes)) {
+  //     logChildIds(childScope);
+  //   }
+  // }
+  // logChildIds(isolatedScopes);
+
+  processJSXForScope(isolatedScopes, generateSyntheticName);
+
+  // If the root scope text is empty and there's only one child scope,
+  // return that child scope as the root scope
+  if (isolatedScopes.text.trim().length === 0) {
+    const childScopeArray = Object.values(isolatedScopes.childScopes);
+    if (childScopeArray.length === 1) {
+      return childScopeArray[0];
+    }
+  }
+
+  return isolatedScopes;
+}
+
+/**
+ * Process JSX extractions for a single scope using AST without recursion.
+ *
+ * This function avoids recursion by processing the AST iteratively. Instead of
+ * relying on recursive function calls to traverse the AST, it uses a stack or
+ * queue-like structure to manage nodes that need to be processed. This approach
+ * ensures that the function can handle deeply nested JSX structures without
+ * risking a stack overflow or exceeding the call stack limit.
+ *
+ * The function first parses the scope's text into a TypeScript AST. It then
+ * iterates over the nodes in the AST to identify and process JSX elements.
+ * Any errors during parsing are caught and logged, ensuring robust handling
+ * of invalid or unexpected input.
+ */
+function processJSXForScope(
+  scope: ScopeInfo,
+  generateSyntheticName: () => string,
+) {
+  // Parse the scope text as a TypeScript AST to find JSX elements
+  const scopeText = scope.text;
+  const scopeStart = scope.start;
+
+  try {
+    // Create a temporary source file for this scope's text
+    const tempSourceFile = ts.createSourceFile(
+      'temp.tsx',
+      scopeText,
+      ts.ScriptTarget.Latest,
+      true,
+      ts.ScriptKind.TSX,
+    );
+
+    const nodeMap = new Map<ts.Node, string>();
+
+    // Find all JSX elements in this scope without recursing into child scopes
+    const findJSXNodes = (node: ts.Node): void => {
+      // Only process JSX elements and self-closing elements
+      if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+        nodeMap.set(node, generateSyntheticName());
+        return; // Don't recurse into JSX children - we want the whole element
+      }
+
+      // Continue traversal for other nodes
+      ts.forEachChild(node, findJSXNodes);
+    };
+
+    // Start traversal from the temporary source file
+    findJSXNodes(tempSourceFile);
+
+    // Process the identified JSX nodes
+    const replacements: Array<{
+      start: number;
+      end: number;
+      id: string;
+      code: string;
+    }> = [];
+
+    for (const [node, id] of nodeMap.entries()) {
+      const nodeStart = node.getStart(tempSourceFile);
+      const nodeEnd = node.getEnd();
+      const code = node.getText(tempSourceFile);
+
+      // Only process reasonably sized JSX elements
+      if (code.length > 10) {
+        replacements.push({
+          start: scopeStart + nodeStart,
+          end: scopeStart + nodeEnd,
+          id,
+          code,
+        });
+      }
+    }
+
+    // Sort replacements by position (descending) to replace from end to start
+    replacements.sort((a, b) => b.start - a.start);
+
+    // Apply replacements to scope text
+    let modifiedText = scopeText;
+    for (const replacement of replacements) {
+      const relativeStart = replacement.start - scopeStart;
+      const relativeEnd = replacement.end - scopeStart;
+
+      // Create new child scope
+      scope.childScopes[replacement.id] = {
+        name: replacement.id,
+        text: replacement.code,
+        start: replacement.start,
+        end: replacement.end,
+        variables: [],
+        childScopes: {},
+      };
+
+      // Replace in text
+      modifiedText =
+        modifiedText.slice(0, relativeStart) +
+        `{${replacement.id}}` +
+        modifiedText.slice(relativeEnd);
+    }
+
+    scope.text = modifiedText;
+  } catch (error) {
+    // If AST parsing fails, just skip JSX processing for this scope
+    // This ensures we don't break the core functionality
+    console.warn(
+      `JSX processing failed for scope starting at position ${scope.start}:`,
+      error,
+      `Scope snippet: "${scope.text.slice(0, 30)}..."`,
+    );
+  }
+}