fix: All fixes to build cypress' real world app

packages/babel-plugin/src/models/segment/ComponentSegment.ts

@@ -1,29 +1,28 @@
 import type * as babel from "@babel/core";
 import type { Binding } from "@babel/traverse";
 import * as t from "@babel/types";
+import { makeCacheEnqueueCallStatement } from "~/utils/ast-factories/make-cache-enqueue-call-statement";
+import { makeDependencyCondition } from "~/utils/ast-factories/make-dependency-condition";
 import type { AccessorNode } from "~/utils/ast-tools/is-accessor-node";
 import { isAccessorNode } from "~/utils/ast-tools/is-accessor-node";
 import {
   RUNTIME_MODULE_CACHE_IS_NOT_SET_PROP_NAME,
   RUNTIME_MODULE_CACHE_VALUE_PROP_NAME,
 } from "~/utils/constants";
 import { unwrapJsxElements } from "~/utils/micro-transformers/unwrap-jsx-elements";
-import { unwrapJsxExpressions } from "~/utils/micro-transformers/unwrap-jsx-expressions";
 import { unwrapSegmentDeclarationPattern } from "~/utils/model-tools/unwrap-segment-declaration-pattern";
 import {
   getArgumentOfControlFlowStatement,
   getControlFlowBodies,
   isControlFlowStatement,
 } from "~/utils/path-tools/control-flow-utils";
+import { findAliases } from "~/utils/path-tools/find-aliases";
 import { findMutatingExpressions } from "~/utils/path-tools/find-mutating-expressions";
 import { getReferencedVariablesInside } from "~/utils/path-tools/get-referenced-variables-inside";
 import { hasHookCall } from "~/utils/path-tools/has-hook-call";
-import { makeDependencyCondition } from "~/utils/ast-factories/make-dependency-condition";
-import { makeCacheEnqueueCallStatement } from "~/utils/ast-factories/make-cache-enqueue-call-statement";
+import { isInTheSameFunctionScope } from "~/utils/path-tools/is-in-the-same-function-scope";
 import { reorderByTopology } from "~/utils/path-tools/reorder-by-topology";
 import { splitVariableDeclaration } from "~/utils/path-tools/split-variable-declaration";
-import { findAliases } from "~/utils/path-tools/find-aliases";
-import { isInTheSameFunctionScope } from "~/utils/path-tools/is-in-the-same-function-scope";
 import type { Component } from "../Component";
 import { SegmentDependency } from "./SegmentDependency";
 
@@ -260,11 +259,13 @@ export class ComponentSegment {
 
   getDependenciesForTransformation({
     filterByScope = true,
+    visitedAliases = new Set(),
     visited = new Set(),
     traverseUpwardsUntil = null,
   }: {
     filterByScope?: boolean;
     visited?: Set<ComponentSegment>;
+    visitedAliases?: Set<ComponentSegment>;
     traverseUpwardsUntil?: ComponentSegment | null;
   } = {}) {
     const directDependencies = this.getDirectDependencies();
@@ -303,13 +304,12 @@ export class ComponentSegment {
     const mutationDependencies = new Set<SegmentDependency>();
 
     const segmentsToFollowForMutation = new Set<ComponentSegment>();
-    const visitedForMutation = new Set<ComponentSegment>();
 
     const visitAlias = (segment: ComponentSegment) => {
-      if (visitedForMutation.has(segment)) {
+      if (visitedAliases.has(segment)) {
         return;
       }
-      visitedForMutation.add(segment);
+      visitedAliases.add(segment);
 
       segmentsToFollowForMutation.add(segment);
 
@@ -321,14 +321,22 @@ export class ComponentSegment {
     visitAlias(this);
 
     segmentsToFollowForMutation.forEach((aliasSegment) => {
-      aliasSegment.getMutationDependencies().forEach((mutationSegment) => {
+      const mutationDependenciesForAlias =
+        aliasSegment.getMutationDependencies();
+
+      mutationDependenciesForAlias.forEach((mutationSegment) => {
         mutationSegment
           .getDependenciesForTransformation({
             visited,
             traverseUpwardsUntil: this,
             filterByScope: false,
+            visitedAliases,
           })
           .forEach((dependency) => {
+            if (visitedAliases.has(dependency.segment)) {
+              return;
+            }
+
             mutationDependencies.add(dependency);
           });
       });
@@ -414,10 +422,6 @@ export class ComponentSegment {
         const jsxUnwrapMicroTransformations: ((() => void) | null)[] = [];
 
         for (const child of statementsPath) {
-          jsxUnwrapMicroTransformations.push(
-            unwrapJsxExpressions(child, this.component, path)
-          );
-
           jsxUnwrapMicroTransformations.push(
             unwrapJsxElements(child, this.component, path)
           );
@@ -524,8 +528,10 @@ export class ComponentSegment {
 
         const segment = this.component.getDeclarationSegmentByBinding(binding);
         if (!segment) {
+          console.log(this.component.path.toString());
           throw new Error(
-            "The segment could not be found for the given binding"
+            "The segment could not be found for the given binding " +
+              binding.identifier.name
           );
         }
 
@@ -613,10 +619,14 @@ export class ComponentSegment {
 
         if (segment) {
           visited.add(segment);
-          return segment?.applyTransformation() ?? [];
+
+          const transformStatementNode = segment?.applyTransformation() ?? [
+            statement.node,
+          ];
+          return transformStatementNode;
         }
 
-        return [];
+        return [statement.node];
       });
 
       thisPath.replaceWith(t.blockStatement(newNodes));
@@ -660,6 +670,7 @@ export class ComponentSegment {
 
     const splitDeclaration = splitVariableDeclaration(
       this.getPathAsStatement(),
+      this.component.path,
       {
         initialValue: isTransformableVariable
           ? this.getCacheValueAccessExpression()
@@ -720,7 +731,9 @@ export class ComponentSegment {
     );
 
     if (!properSegment) {
-      throw new Error("The proper segment could not be found");
+      throw new Error(
+        "The proper segment could not be found " + binding.identifier.name
+      );
     }
 
     properSegment.binding = newBinding ?? null;
@@ -774,9 +787,16 @@ export class ComponentSegment {
     if (thisPath.isVariableDeclaration()) {
       return thisPath.get("declarations").some((declarator) => {
         const decId = declarator.get("id");
-        return (
-          decId.isIdentifier() && decId.node.name === binding.identifier.name
-        );
+        let found =
+          decId.isIdentifier() && decId.node.name === binding.identifier.name;
+        decId.traverse({
+          Identifier(path) {
+            if (path.node.name === binding.identifier.name) {
+              found = true;
+            }
+          },
+        });
+        return found;
       });
     }
     if (binding.kind === "param") {

packages/babel-plugin/src/models/segment/SegmentDependency.ts

@@ -12,7 +12,7 @@ export class AccessChainItem {
 
   constructor(
     public id: string,
-    public idExpression: t.Expression
+    public idExpression: t.Expression | t.JSXIdentifier
   ) {}
 
   toString() {
@@ -88,7 +88,10 @@ export class SegmentDependency {
         } else {
           currentAccessorNode = null;
         }
-      } else if (t.isIdentifier(currentAccessorNode)) {
+      } else if (
+        t.isIdentifier(currentAccessorNode) ||
+        t.isJSXIdentifier(currentAccessorNode)
+      ) {
         newAccessChainItem = new AccessChainItem(
           currentAccessorNode.name,
           currentAccessorNode