@farm.js/react 0.1.0-beta.13 → 0.1.0-beta.15

package/dist/compiler-runtime.mjs

@@ -1969,10 +1969,7 @@ function normalizedStaticRangeBindingValue(binding, value) {
 }
 function applyStaticRangeBindings(bindings, segments, values) {
   const activeBindings = bindings || [];
-  if (values.length === 0 && activeBindings.length > 0) {
-    values.push(...activeBindings.map(() => UNSET_STATIC_RANGE_BINDING));
-  }
-  if (values.length !== activeBindings.length) return false;
+  const targets = [];
   for (let index = 0; index < activeBindings.length; index += 1) {
     const binding = activeBindings[index];
     if (!Number.isSafeInteger(binding.segment) || binding.segment < 0 || !Number.isSafeInteger(binding.sibling) || binding.sibling < 0) {
@@ -1980,19 +1977,31 @@ function applyStaticRangeBindings(bindings, segments, values) {
     }
     const sibling = segments[binding.segment]?.[binding.sibling];
     const target = sibling && findCompilerHostTarget(sibling, binding.path);
-    if (!target) return false;
-    const rawValue = binding.read();
-    const value = normalizedStaticRangeBindingValue(binding, rawValue);
-    if (Object.is(values[index], value)) continue;
+    if (!target || binding.kind !== "text" && (binding.kind !== "style" && binding.kind !== "attribute" || !binding.name)) {
+      return false;
+    }
+    targets[index] = target;
+  }
+  const initializesValues = values.length === 0 && activeBindings.length > 0;
+  if (!initializesValues && values.length !== activeBindings.length) return false;
+  const nextValues = [];
+  for (let index = 0; index < activeBindings.length; index += 1) {
+    const binding = activeBindings[index];
+    nextValues[index] = normalizedStaticRangeBindingValue(binding, binding.read());
+  }
+  for (let index = 0; index < activeBindings.length; index += 1) {
+    const binding = activeBindings[index];
+    const value = nextValues[index];
+    const previous = initializesValues ? UNSET_STATIC_RANGE_BINDING : values[index];
+    if (Object.is(previous, value)) continue;
     values[index] = value;
+    const target = targets[index];
     if (binding.kind === "text") {
       target.textContent = value;
-    } else if (binding.kind === "style" && binding.name) {
-      updateStyle(target, binding.name, rawValue);
-    } else if (binding.kind === "attribute" && binding.name) {
-      updateAttribute(target, binding.name, rawValue);
+    } else if (binding.kind === "style") {
+      updateStyle(target, binding.name, value);
     } else {
-      return false;
+      updateAttribute(target, binding.name, value);
     }
   }
   return true;
@@ -2248,52 +2257,87 @@ function readKeyedRowBindingValues(props, item, index) {
   );
 }
 function applyKeyedRowBindings(props, instance, item, index) {
+  if (props.bindings.length < 2) {
+    if (props.bindings.length === 1) applyKeyedRowBinding(props, instance, item, index, 0);
+    return;
+  }
+  const nextValues = readKeyedRowBindingValues(props, item, index);
+  let targets;
   for (let bindingIndex = 0; bindingIndex < props.bindings.length; bindingIndex += 1) {
-    applyKeyedRowBinding(props, instance, item, index, bindingIndex);
+    if (Object.is(instance.values[bindingIndex], nextValues[bindingIndex])) continue;
+    targets || (targets = []);
+    targets[bindingIndex] = findCompilerHostTarget(
+      instance.element,
+      props.bindings[bindingIndex].path
+    );
+  }
+  if (!targets) return;
+  for (let bindingIndex = 0; bindingIndex < props.bindings.length; bindingIndex += 1) {
+    const value = nextValues[bindingIndex];
+    if (Object.is(instance.values[bindingIndex], value)) continue;
+    commitKeyedRowBinding(
+      props.bindings[bindingIndex],
+      instance,
+      bindingIndex,
+      value,
+      targets[bindingIndex]
+    );
   }
 }
 function applyKeyedRowBinding(props, instance, item, index, bindingIndex) {
   const binding = props.bindings[bindingIndex];
-  const rawValue = binding.read(item, index);
-  const value = normalizedKeyedRowBindingValue(binding, rawValue);
+  const value = normalizedKeyedRowBindingValue(binding, binding.read(item, index));
   if (Object.is(instance.values[bindingIndex], value)) return;
-  instance.values[bindingIndex] = value;
   const target = findCompilerHostTarget(instance.element, binding.path);
+  commitKeyedRowBinding(binding, instance, bindingIndex, value, target);
+}
+function commitKeyedRowBinding(binding, instance, bindingIndex, value, target) {
+  instance.values[bindingIndex] = value;
   if (!target) return;
   if (binding.kind === "text") {
     target.textContent = value;
   } else if (binding.kind === "style" && binding.name) {
-    updateStyle(target, binding.name, rawValue);
+    updateStyle(target, binding.name, value);
   } else if (binding.kind === "attribute" && binding.name) {
-    updateAttribute(target, binding.name, rawValue);
+    updateAttribute(target, binding.name, value);
   }
 }
+function prepareKeyedRowBindingUpdate(props, instance, item, index, bindingIndex) {
+  const binding = props.bindings[bindingIndex];
+  const rawValue = binding.read(item, index);
+  const value = normalizedKeyedRowBindingValue(binding, rawValue);
+  if (Object.is(instance.values[bindingIndex], value)) return null;
+  const target = findCompilerHostTarget(instance.element, binding.path);
+  if (!target || binding.kind !== "text" && !binding.name) return void 0;
+  return [bindingIndex, target, value];
+}
 function prepareKeyedRowBindingUpdates(props, instance, item, index) {
   const updates = [];
   for (let bindingIndex = 0; bindingIndex < props.bindings.length; bindingIndex += 1) {
-    const binding = props.bindings[bindingIndex];
-    const rawValue = binding.read(item, index);
-    const value = normalizedKeyedRowBindingValue(binding, rawValue);
-    if (Object.is(instance.values[bindingIndex], value)) continue;
-    const target = findCompilerHostTarget(instance.element, binding.path);
-    if (!target || binding.kind !== "text" && !binding.name) return void 0;
-    updates.push([bindingIndex, rawValue, target, value]);
+    const update = prepareKeyedRowBindingUpdate(props, instance, item, index, bindingIndex);
+    if (update === void 0) return void 0;
+    if (update) updates.push(update);
   }
   return updates;
 }
 function applyPreparedKeyedRowBindingUpdates(props, instance, updates) {
-  for (const [bindingIndex, rawValue, target, value] of updates) {
-    const binding = props.bindings[bindingIndex];
-    instance.values[bindingIndex] = value;
-    if (binding.kind === "text") {
-      target.textContent = value;
-    } else if (binding.kind === "style") {
-      updateStyle(target, binding.name, rawValue);
-    } else {
-      updateAttribute(target, binding.name, rawValue);
-    }
+  for (const [bindingIndex, target, value] of updates) {
+    commitKeyedRowBinding(props.bindings[bindingIndex], instance, bindingIndex, value, target);
   }
 }
+function prepareKeyedRowBindingSetUpdates(props, instances, rows) {
+  const preparedInstances = [];
+  const preparedUpdates = [];
+  for (let index = 0; index < rows.items.length; index += 1) {
+    const instance = instances.get(rows.keys[index]);
+    if (!instance) return void 0;
+    const updates = prepareKeyedRowBindingUpdates(props, instance, rows.items[index], index);
+    if (!updates) return void 0;
+    preparedInstances.push(instance);
+    preparedUpdates.push(updates);
+  }
+  return [preparedInstances, preparedUpdates];
+}
 function keyedRowConditionalSnapshot(conditional, item, index) {
   const test = conditional.test(item, index);
   if (conditional.logical && !test) {
@@ -2353,6 +2397,35 @@ function applyHostConditionalBindings(branch, instance) {
     }
   }
 }
+function prepareHostConditionalBindings(branch, instance) {
+  for (let bindingIndex = 0; bindingIndex < branch.bindings.length; bindingIndex += 1) {
+    const binding = branch.bindings[bindingIndex];
+    const rawValue = binding.read();
+    const target = findCompilerHostTarget(instance.element, binding.path);
+    if (!target || binding.kind !== "text" && (binding.kind !== "style" && binding.kind !== "attribute" || !binding.name)) {
+      return false;
+    }
+    instance.values[bindingIndex] = [
+      target,
+      normalizedHostConditionalBindingValue(binding, rawValue)
+    ];
+  }
+  return true;
+}
+function applyPreparedHostConditionalBindings(branch, instance) {
+  for (let bindingIndex = 0; bindingIndex < branch.bindings.length; bindingIndex += 1) {
+    const binding = branch.bindings[bindingIndex];
+    const [target, value] = instance.values[bindingIndex];
+    instance.values[bindingIndex] = value;
+    if (binding.kind === "text") {
+      target.textContent = value;
+    } else if (binding.kind === "style") {
+      updateStyle(target, binding.name, value);
+    } else {
+      updateAttribute(target, binding.name, value);
+    }
+  }
+}
 var UNSET_HOST_CONDITIONAL_BINDING = /* @__PURE__ */ Symbol("unset host conditional binding");
 function mountCompilerHostTree(owner, element, descriptor, onFallback) {
   if (!matchesCompilerHostElement(element, descriptor)) return null;
@@ -2440,7 +2513,7 @@ function mountCompilerHostTree(owner, element, descriptor, onFallback) {
     }
   };
 }
-function mountCompilerHostInstance(owner, element, descriptor, branch, onFallback) {
+function mountCompilerHostInstance(owner, element, descriptor, branch, onFallback, applyBindingsImmediately = true) {
   const scope = mountCompilerHostTree(owner, element, descriptor, onFallback);
   if (!scope) return null;
   const instance = {
@@ -2448,6 +2521,7 @@ function mountCompilerHostInstance(owner, element, descriptor, branch, onFallbac
     scope,
     values: branch.bindings.map(() => UNSET_HOST_CONDITIONAL_BINDING)
   };
+  if (!applyBindingsImmediately) return instance;
   try {
     applyHostConditionalBindings(branch, instance);
   } catch (error) {
@@ -2554,13 +2628,19 @@ var CompilerNestedConditionalRanges = class {
         element,
         descriptor,
         selection.branch,
-        this.onFallback
+        this.onFallback,
+        false
+        // Commit only after every sibling range validates.
       );
       if (!host) {
         this.cleanup();
         return false;
       }
       this.instances.push({ key: selection.key, host });
+      if (!prepareHostConditionalBindings(selection.branch, host)) {
+        this.cleanup();
+        return false;
+      }
       cursor += 1;
     }
     const trailingEnd = cursor + this.block.trailing;
@@ -2573,6 +2653,13 @@ var CompilerNestedConditionalRanges = class {
       this.cleanup();
       return false;
     }
+    for (let index = 0; index < selections.length; index += 1) {
+      const selection = selections[index];
+      const instance = this.instances[index];
+      if (selection.kind === "branch" && instance) {
+        applyPreparedHostConditionalBindings(selection.branch, instance.host);
+      }
+    }
     this.unsubscribe = this.owner.subscribe(this.block.id, this.refresh);
     return true;
   }
@@ -2741,6 +2828,7 @@ var CompilerNestedKeyedRanges = class {
     const elements = [...this.root.children];
     const descriptors = flattenCompilerHostElements(materializeCompilerHostChildren(this.host));
     if (elements.length !== descriptors.length) return false;
+    const preparedBindings = [];
     let cursor = 0;
     for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
       const range = this.block.ranges[rangeIndex];
@@ -2757,6 +2845,8 @@ var CompilerNestedKeyedRanges = class {
       this.staticSegments.push(elements.slice(cursor, staticEnd));
       cursor = staticEnd;
       const instances = /* @__PURE__ */ new Map();
+      this.instances.push(instances);
+      const rangeBindingUpdates = [];
       for (let index = 0; index < rows.items.length; index += 1) {
         const element = elements[cursor + index];
         if (!element) {
@@ -2769,7 +2859,7 @@ var CompilerNestedKeyedRanges = class {
           this.cleanup();
           return false;
         }
-        instances.set(rows.keys[index], {
+        const instance = {
           key: rows.keys[index],
           element,
           scope,
@@ -2777,10 +2867,23 @@ var CompilerNestedKeyedRanges = class {
           item: rows.items[index],
           index,
           conditionalValues: /* @__PURE__ */ new Map()
-        });
-        applyKeyedRowBindings(range, instances.get(rows.keys[index]), rows.items[index], index);
+        };
+        let bindingUpdates;
+        try {
+          bindingUpdates = prepareKeyedRowBindingUpdates(range, instance, rows.items[index], index);
+        } catch (error) {
+          scope.cleanup();
+          throw error;
+        }
+        if (!bindingUpdates) {
+          scope.cleanup();
+          this.cleanup();
+          return false;
+        }
+        instances.set(rows.keys[index], instance);
+        rangeBindingUpdates.push(bindingUpdates);
       }
-      this.instances.push(instances);
+      preparedBindings.push(rangeBindingUpdates);
       cursor += rows.items.length;
     }
     const trailingEnd = cursor + this.block.trailing;
@@ -2793,6 +2896,18 @@ var CompilerNestedKeyedRanges = class {
       this.cleanup();
       return false;
     }
+    for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
+      const range = this.block.ranges[rangeIndex];
+      let rowIndex = 0;
+      for (const instance of this.instances[rangeIndex].values()) {
+        applyPreparedKeyedRowBindingUpdates(
+          range,
+          instance,
+          preparedBindings[rangeIndex][rowIndex]
+        );
+        rowIndex += 1;
+      }
+    }
     this.unsubscribe = this.owner.subscribe(this.block.id, this.refresh);
     return true;
   }
@@ -2986,6 +3101,7 @@ var CompilerNestedMixedRanges = class {
     const elements = [...this.root.children];
     const descriptors = flattenCompilerHostElements(this.host.children);
     if (elements.length !== descriptors.length) return false;
+    const preparedKeyedBindings = [];
     let cursor = 0;
     for (let rangeIndex = 0; rangeIndex < this.block.ranges.length; rangeIndex += 1) {
       const range = this.block.ranges[rangeIndex];
@@ -3017,7 +3133,9 @@ var CompilerNestedMixedRanges = class {
           element,
           descriptor,
           snapshot.selection.branch,
-          this.onFallback
+          this.onFallback,
+          false
+          // Commit only after every sibling range validates.
         );
         if (!host) {
           this.cleanup();
@@ -3027,6 +3145,10 @@ var CompilerNestedMixedRanges = class {
           kind: "conditional",
           value: { key: snapshot.selection.key, host }
         });
+        if (!prepareHostConditionalBindings(snapshot.selection.branch, host)) {
+          this.cleanup();
+          return false;
+        }
         cursor += 1;
         continue;
       }
@@ -3035,6 +3157,8 @@ var CompilerNestedMixedRanges = class {
         return false;
       }
       const keyedInstances = /* @__PURE__ */ new Map();
+      this.instances.push({ kind: "keyed", value: keyedInstances });
+      const keyedBindingUpdates = [];
       for (let index = 0; index < snapshot.rows.items.length; index += 1) {
         const element = elements[cursor + index];
         if (!element) {
@@ -3056,15 +3180,27 @@ var CompilerNestedMixedRanges = class {
           index,
           conditionalValues: /* @__PURE__ */ new Map()
         };
+        let bindingUpdates;
         try {
-          applyKeyedRowBindings(range, instance, snapshot.rows.items[index], index);
+          bindingUpdates = prepareKeyedRowBindingUpdates(
+            range,
+            instance,
+            snapshot.rows.items[index],
+            index
+          );
         } catch (error) {
           scope.cleanup();
           throw error;
         }
+        if (!bindingUpdates) {
+          scope.cleanup();
+          this.cleanup();
+          return false;
+        }
         keyedInstances.set(snapshot.rows.keys[index], instance);
+        keyedBindingUpdates.push(bindingUpdates);
       }
-      this.instances.push({ kind: "keyed", value: keyedInstances });
+      preparedKeyedBindings[rangeIndex] = keyedBindingUpdates;
       cursor += snapshot.rows.items.length;
     }
     const trailingEnd = cursor + this.block.trailing;
@@ -3077,6 +3213,22 @@ var CompilerNestedMixedRanges = class {
       this.cleanup();
       return false;
     }
+    for (let index = 0; index < snapshots.length; index += 1) {
+      const snapshot = snapshots[index];
+      const instance = this.instances[index];
+      if (snapshot.kind === "conditional" && snapshot.selection.kind === "branch" && instance?.kind === "conditional" && instance.value) {
+        applyPreparedHostConditionalBindings(snapshot.selection.branch, instance.value.host);
+      } else if (snapshot.kind === "keyed" && instance?.kind === "keyed") {
+        const range = this.block.ranges[index];
+        const bindingUpdates = preparedKeyedBindings[index];
+        if (range.kind !== "keyed") continue;
+        let rowIndex = 0;
+        for (const row of instance.value.values()) {
+          applyPreparedKeyedRowBindingUpdates(range, row, bindingUpdates[rowIndex]);
+          rowIndex += 1;
+        }
+      }
+    }
     this.unsubscribe = this.owner.subscribe(this.block.id, this.refresh);
     return true;
   }
@@ -3607,7 +3759,9 @@ function createConditionalRangesBlockComponent(owner) {
           element,
           descriptor,
           selection.branch,
-          this.requestNestedFallback
+          this.requestNestedFallback,
+          false
+          // Commit only after every sibling range validates.
         );
         if (!host) {
           cleanupInstances();
@@ -3617,6 +3771,15 @@ function createConditionalRangesBlockComponent(owner) {
           key: selection.key,
           host
         });
+        try {
+          if (!prepareHostConditionalBindings(selection.branch, host)) {
+            cleanupInstances();
+            return false;
+          }
+        } catch (error) {
+          cleanupInstances();
+          throw error;
+        }
         cursor += 1;
       }
       if (cursor + props.trailing !== elements.length) {
@@ -3624,9 +3787,21 @@ function createConditionalRangesBlockComponent(owner) {
         return false;
       }
       staticSegments.push(elements.slice(cursor));
-      if (!applyStaticRangeBindings(props.bindings, staticSegments, staticValues)) {
+      try {
+        if (!applyStaticRangeBindings(props.bindings, staticSegments, staticValues)) {
+          cleanupInstances();
+          return false;
+        }
+        for (let index = 0; index < selections.length; index += 1) {
+          const selection = selections[index];
+          const instance = instances[index];
+          if (selection.kind === "branch" && instance) {
+            applyPreparedHostConditionalBindings(selection.branch, instance.host);
+          }
+        }
+      } catch (error) {
         cleanupInstances();
-        return false;
+        throw error;
       }
       for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
       this.staticSegments = staticSegments;
@@ -6095,6 +6270,7 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
           nextMapLookupTargets.set(bindingIndex, snapshot);
         }
       }
+      let preparedBindingUpdates;
       for (const bindingIndex of affectedBindingIndices) {
         const binding = this.currentProps.bindings[bindingIndex];
         const identityTarget = binding.identityTarget;
@@ -6115,52 +6291,32 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
         const canTargetMapLookup = Boolean(
           mapLookupTarget && binding.dependencies?.length === 1 && binding.dependencies[0] === mapLookupTarget.dependency && dirtyState.has(mapLookupTarget.dependency) && previousMapLookupTarget?.eligible && nextMapLookupTarget?.eligible
         );
+        let selectedKeys;
+        let selectedCount;
         if (canTargetMapLookup && previousMapLookupTarget && nextMapLookupTarget) {
           const keys = keyedMapLookupChangedKeys(previousMapLookupTarget, nextMapLookupTarget);
-          for (const key of keys) {
-            const instance = this.instances.get(key);
-            if (instance) {
-              applyKeyedRowBinding(
-                this.currentProps,
-                instance,
-                instance.item,
-                instance.index,
-                bindingIndex
-              );
-            }
-          }
+          selectedKeys = keys;
+          selectedCount = keys.size;
         } else if (canTargetMembership && previousMembershipTarget && nextMembershipTarget) {
           const keys = keyedMembershipChangedKeys(previousMembershipTarget, nextMembershipTarget);
-          for (const key of keys) {
-            const instance = this.instances.get(key);
-            if (instance) {
-              applyKeyedRowBinding(
-                this.currentProps,
-                instance,
-                instance.item,
-                instance.index,
-                bindingIndex
-              );
-            }
-          }
+          selectedKeys = keys;
+          selectedCount = keys.size;
         } else if (canTargetIdentity && previousIdentityTarget && nextIdentityTarget) {
           const keys = /* @__PURE__ */ new Set();
           if (previousIdentityTarget.key !== void 0) keys.add(previousIdentityTarget.key);
           if (nextIdentityTarget.key !== void 0) keys.add(nextIdentityTarget.key);
-          for (const key of keys) {
-            const instance = this.instances.get(key);
-            if (instance) {
-              applyKeyedRowBinding(
-                this.currentProps,
-                instance,
-                instance.item,
-                instance.index,
-                bindingIndex
-              );
-            }
-          }
+          selectedKeys = keys;
+          selectedCount = keys.size;
         } else {
-          for (const instance of this.instances.values()) {
+          selectedKeys = this.instances.keys();
+          selectedCount = this.instances.size;
+        }
+        const prepare = affectedBindingIndices.length > 1 || selectedCount > 1;
+        if (prepare) preparedBindingUpdates || (preparedBindingUpdates = []);
+        for (const key of selectedKeys) {
+          const instance = this.instances.get(key);
+          if (!instance) continue;
+          if (!prepare) {
             applyKeyedRowBinding(
               this.currentProps,
               instance,
@@ -6168,8 +6324,37 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
               instance.index,
               bindingIndex
             );
+            continue;
           }
+          const update = prepareKeyedRowBindingUpdate(
+            this.currentProps,
+            instance,
+            instance.item,
+            instance.index,
+            bindingIndex
+          );
+          if (update === void 0) {
+            this.activateFallback(afterCommit);
+            return true;
+          }
+          if (update) preparedBindingUpdates.push([instance, update]);
+        }
+      }
+      if (preparedBindingUpdates) {
+        for (const [instance, [bindingIndex, target, value]] of preparedBindingUpdates) {
+          commitKeyedRowBinding(
+            this.currentProps.bindings[bindingIndex],
+            instance,
+            bindingIndex,
+            value,
+            target
+          );
         }
+      }
+      for (const bindingIndex of affectedBindingIndices) {
+        const nextIdentityTarget = nextIdentityTargets.get(bindingIndex);
+        const nextMembershipTarget = nextMembershipTargets.get(bindingIndex);
+        const nextMapLookupTarget = nextMapLookupTargets.get(bindingIndex);
         if (nextIdentityTarget) this.identityTargets.set(bindingIndex, nextIdentityTarget);
         else this.identityTargets.delete(bindingIndex);
         if (nextMembershipTarget) {
@@ -6193,10 +6378,16 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
         if (rows.keys[index] !== key) return false;
         index += 1;
       }
+      const shouldPrepareBindings = rows.items.length > 1 && this.currentProps.bindings.length > 0 && !this.currentProps.hostBlocks;
+      const preparedBindings = shouldPrepareBindings ? prepareKeyedRowBindingSetUpdates(this.currentProps, this.instances, rows) : void 0;
+      if (shouldPrepareBindings && !preparedBindings) {
+        this.activateFallback(afterCommit);
+        return true;
+      }
       const conditionalChanges = [];
       for (index = 0; index < rows.items.length; index += 1) {
         const key = rows.keys[index];
-        const existing = this.instances.get(key);
+        const existing = preparedBindings?.[0][index] || this.instances.get(key);
         if (!existing) return false;
         if (this.currentProps.hostBlocks) {
           const descriptor = this.currentProps.create(rows.items[index], index);
@@ -6205,7 +6396,12 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
             return true;
           }
         }
-        applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+        const bindingUpdates = preparedBindings?.[1][index];
+        if (bindingUpdates) {
+          applyPreparedKeyedRowBindingUpdates(this.currentProps, existing, bindingUpdates);
+        } else {
+          applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+        }
         const conditionalValues = this.readConditionalValues(
           this.currentProps,
           rows.items[index],
@@ -6242,10 +6438,16 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       const removedKey = previousKeys[removedIndex];
       const removed = this.instances.get(removedKey);
       if (!removed) return false;
+      const shouldPrepareBindings = rows.items.length > 1 && this.currentProps.bindings.length > 0 && !this.currentProps.hostBlocks;
+      const preparedBindings = shouldPrepareBindings ? prepareKeyedRowBindingSetUpdates(this.currentProps, this.instances, rows) : void 0;
+      if (shouldPrepareBindings && !preparedBindings) {
+        this.activateFallback(afterCommit);
+        return true;
+      }
       const conditionalChanges = [];
       for (let index = 0; index < rows.items.length; index += 1) {
         const key = rows.keys[index];
-        const existing = this.instances.get(key);
+        const existing = preparedBindings?.[0][index] || this.instances.get(key);
         if (!existing) return false;
         if (this.currentProps.hostBlocks) {
           const descriptor = this.currentProps.create(rows.items[index], index);
@@ -6254,7 +6456,12 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
             return true;
           }
         }
-        applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+        const bindingUpdates = preparedBindings?.[1][index];
+        if (bindingUpdates) {
+          applyPreparedKeyedRowBindingUpdates(this.currentProps, existing, bindingUpdates);
+        } else {
+          applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+        }
         const conditionalValues = this.readConditionalValues(
           this.currentProps,
           rows.items[index],