fix: rebind nested collection item properly (#5159)

Before parent collection item on nested collection was rebind with
nested collection item which lead to broken state

```
<Collection id="parent" data={[]} item="collectionItem">
  <Collection id="nested" data={collectionItem} item="collectionItem">
  </Collection
</Collection
```

```
collection.map(collectionItem =>
  // oops
  collectionItem2.map(collectionItem2 => {
  })
})
```

Author: TrySound

apps/builder/app/shared/data-variables.test.tsx

@@ -3,6 +3,7 @@ import {
   $,
   ActionValue,
   expression,
+  Parameter,
   renderData,
   ResourceValue,
   Variable,
@@ -574,6 +575,60 @@ test("prevent rebinding tree variables from slots", () => {
   ]);
 });
 
+test("prevent rebinding with nested collection item", () => {
+  const collectionItem = new Parameter("collectionITem");
+  const nestedCollectionItem = new Parameter("collectionITem");
+  const data = renderData(
+    <$.Body ws:id="bodyId">
+      <ws.collection ws:id="collectionId" data={[]} item={collectionItem}>
+        <ws.collection
+          ws:id="nestedCollectionId"
+          data={expression`${collectionItem}`}
+          item={nestedCollectionItem}
+        >
+          <ws.element ws:id="divId" ws:tag="div">
+            {expression`${nestedCollectionItem}`}
+          </ws.element>
+        </ws.collection>
+      </ws.collection>
+    </$.Body>
+  );
+  expect(Array.from(data.dataSources.values())).toEqual([
+    expect.objectContaining({ scopeInstanceId: "collectionId" }),
+    expect.objectContaining({ scopeInstanceId: "nestedCollectionId" }),
+  ]);
+  const [collectionItemId, nestedCollectionItemId] = data.dataSources.keys();
+  rebindTreeVariablesMutable({
+    startingInstanceId: "bodyId",
+    pages: createDefaultPages({ rootInstanceId: "bodyId" }),
+    ...data,
+  });
+  expect(Array.from(data.props.values())).toEqual([
+    expect.objectContaining({
+      instanceId: "collectionId",
+      name: "data",
+    }),
+    expect.objectContaining({
+      instanceId: "collectionId",
+      name: "item",
+      value: collectionItemId,
+    }),
+    expect.objectContaining({
+      instanceId: "nestedCollectionId",
+      name: "data",
+      value: encodeDataVariableId(collectionItemId),
+    }),
+    expect.objectContaining({
+      instanceId: "nestedCollectionId",
+      name: "item",
+      value: nestedCollectionItemId,
+    }),
+  ]);
+  expect(data.instances.get("divId")?.children).toEqual([
+    { type: "expression", value: encodeDataVariableId(nestedCollectionItemId) },
+  ]);
+});
+
 test("delete variable and unset it in expressions", () => {
   const bodyVariable = new Variable("bodyVariable", "one value of body");
   const data = renderData(

apps/builder/app/shared/data-variables.ts

@@ -10,6 +10,7 @@ import {
   Pages,
   ROOT_INSTANCE_ID,
   SYSTEM_VARIABLE_ID,
+  collectionComponent,
   decodeDataVariableId,
   encodeDataVariableId,
   findTreeInstanceIds,
@@ -208,10 +209,12 @@ const getParentInstanceById = (instances: Instances) => {
 const findMaskedVariablesByInstanceId = ({
   startingInstanceId,
   parentInstanceById,
+  instances,
   dataSources,
 }: {
   startingInstanceId: Instance["id"];
   parentInstanceById: Map<Instance["id"], Instance["id"]>;
+  instances: Instances;
   dataSources: DataSources;
 }) => {
   let currentId: undefined | string = startingInstanceId;
@@ -228,8 +231,19 @@ const findMaskedVariablesByInstanceId = ({
   // start from the root to descendant
   // so child variables override parent variables
   for (const instanceId of instanceIdsPath.reverse()) {
+    const instance = instances.get(instanceId);
     for (const dataSource of dataSources.values()) {
       if (dataSource.scopeInstanceId === instanceId) {
+        // when current instance is collection
+        // ignore its collection item parameter
+        // when rebind variables
+        if (
+          instanceId === startingInstanceId &&
+          instance?.component === collectionComponent &&
+          dataSource.type === "parameter"
+        ) {
+          continue;
+        }
         maskedVariables.set(dataSource.name, dataSource.id);
       }
     }
@@ -249,6 +263,7 @@ export const findAvailableVariables = ({
   const maskedVariables = findMaskedVariablesByInstanceId({
     startingInstanceId,
     parentInstanceById: getParentInstanceById(instances),
+    instances,
     dataSources,
   });
   const availableVariables: DataSource[] = [];
@@ -504,6 +519,7 @@ export const rebindTreeVariablesMutable = ({
       const maskedVariables = findMaskedVariablesByInstanceId({
         startingInstanceId: instanceId,
         parentInstanceById,
+        instances,
         dataSources,
       });
       let maskedIdByName = new Map(maskedVariables);
@@ -544,6 +560,7 @@ export const deleteVariableMutable = (
   const maskedIdByName = findMaskedVariablesByInstanceId({
     startingInstanceId,
     parentInstanceById: getParentInstanceById(data.instances),
+    instances: data.instances,
     dataSources: data.dataSources,
   });
   // unset deleted variable in expressions