@farm.js/react 0.1.0-beta.12 → 0.1.0-beta.14

package/dist/compiler-runtime.mjs

@@ -1742,8 +1742,18 @@ function createConditionalBlockComponent(owner) {
   class FarmConditionalBlock extends React.Component {
     constructor() {
       super(...arguments);
+      this.root = null;
       this.captureRoot = (root) => {
+        const previousRoot = this.root;
+        const previousId = this.rootId;
+        this.root = root;
+        if (!root) {
+          if (previousId !== void 0) owner.setRoot(previousId, null, previousRoot);
+          this.rootId = void 0;
+          return;
+        }
         owner.setRoot(this.props.id, root);
+        this.rootId = this.props.id;
       };
       this.refresh = (afterCommit) => {
         this.forceUpdate(afterCommit);
@@ -1758,7 +1768,11 @@ function createConditionalBlockComponent(owner) {
     componentDidUpdate(previous) {
       if (previous.id === this.props.id) return;
       this.unsubscribe?.();
-      owner.setRoot(previous.id, null);
+      if (this.root && this.rootId !== this.props.id) {
+        if (this.rootId !== void 0) owner.setRoot(this.rootId, null, this.root);
+        owner.setRoot(this.props.id, this.root);
+        this.rootId = this.props.id;
+      }
       this.subscribe();
     }
     componentWillUnmount() {
@@ -1955,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) {
@@ -1966,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;
@@ -2234,24 +2257,49 @@ 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 prepareKeyedRowBindingUpdates(props, instance, item, index) {
@@ -2263,21 +2311,13 @@ function prepareKeyedRowBindingUpdates(props, instance, item, index) {
     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]);
+    updates.push([bindingIndex, target, value]);
   }
   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 keyedRowConditionalSnapshot(conditional, item, index) {
@@ -2339,6 +2379,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;
@@ -2426,7 +2495,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 = {
@@ -2434,6 +2503,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) {
@@ -2540,13 +2610,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;
@@ -2559,6 +2635,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;
   }
@@ -2727,6 +2810,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];
@@ -2743,6 +2827,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) {
@@ -2755,7 +2841,7 @@ var CompilerNestedKeyedRanges = class {
           this.cleanup();
           return false;
         }
-        instances.set(rows.keys[index], {
+        const instance = {
           key: rows.keys[index],
           element,
           scope,
@@ -2763,10 +2849,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;
@@ -2779,6 +2878,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;
   }
@@ -2972,6 +3083,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];
@@ -3003,7 +3115,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();
@@ -3013,6 +3127,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;
       }
@@ -3021,6 +3139,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) {
@@ -3042,15 +3162,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;
@@ -3063,6 +3195,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;
   }
@@ -3251,6 +3399,7 @@ function createHostConditionalBlockComponent(owner) {
       this.fallbackKeysWereUnsafe = false;
       this.activeBranch = null;
       this.instance = null;
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.requestNestedFallback = () => {
         this.instance?.scope?.cleanup();
         this.activateFallback();
@@ -3299,6 +3448,7 @@ function createHostConditionalBlockComponent(owner) {
       if (selection.kind === "fallback") return false;
       if (selection.kind === "empty") {
         if (this.root.childNodes.length !== 0) return false;
+        this.instance?.scope?.cleanup();
         this.activeBranch = null;
         this.instance = null;
         return true;
@@ -3317,6 +3467,7 @@ function createHostConditionalBlockComponent(owner) {
         this.requestNestedFallback
       );
       if (!instance) return false;
+      this.instance?.scope?.cleanup();
       this.activeBranch = selection.key;
       this.instance = instance;
       return true;
@@ -3395,35 +3546,58 @@ function createHostConditionalBlockComponent(owner) {
       this.instance = instance;
       afterCommit?.();
     }
+    listen() {
+      const id = this.currentProps.id;
+      const stop = this.stop;
+      if (this.id === id) return;
+      stop?.();
+      this.stop = owner.subscribe(id, this.refresh);
+      this.id = id;
+    }
     schedulePropSync() {
       if (this.propSyncQueued) return;
       this.propSyncQueued = true;
       queueMicrotask(() => {
         this.propSyncQueued = false;
-        if (this.mounted && !this.state.fallback) this.reconcile();
+        if (this.mounted && !this.state.fallback) {
+          this.listen();
+          this.reconcile();
+        }
       });
     }
     shouldComponentUpdate(nextProps, nextState) {
+      const definitionChanged = this.definitionVersion !== owner.getDefinitionVersion?.();
       this.currentProps = nextProps;
       if (this.state.fallback && nextState.fallback) this.prepareFallbackUpdate();
       if (nextState.fallback || this.state.fallback) return true;
+      if (definitionChanged) return true;
       this.schedulePropSync();
       return false;
     }
     componentDidMount() {
       this.mounted = true;
-      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+      this.listen();
       if (this.state.fallback || this.fallbackRequested) {
         this.subscribeFallbackDescendants();
         this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
       } else if (!this.adopt()) this.activateFallback();
     }
     componentDidUpdate() {
-      if (this.state.fallback) this.subscribeFallbackDescendants();
+      this.listen();
+      const nextDefinitionVersion = owner.getDefinitionVersion?.();
+      const definitionChanged = this.definitionVersion !== nextDefinitionVersion;
+      this.definitionVersion = nextDefinitionVersion;
+      if (this.state.fallback) {
+        this.subscribeFallbackDescendants();
+      } else if (definitionChanged && !this.adopt()) {
+        this.activateFallback();
+      }
     }
     componentWillUnmount() {
       this.mounted = false;
-      this.unsubscribe?.();
+      const stop = this.stop;
+      stop?.();
+      this.id = void 0;
       clearCompilerFallbackSubscriptions(this.fallbackUnsubscribers);
       this.fallbackKeysWereUnsafe = false;
       this.instance?.scope?.cleanup();
@@ -3462,6 +3636,7 @@ function createConditionalRangesBlockComponent(owner) {
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues = [];
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.requestNestedFallback = () => {
         for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
         this.activateFallback();
@@ -3528,6 +3703,7 @@ function createConditionalRangesBlockComponent(owner) {
       const elements = [...this.root.children];
       const staticSegments = [];
       const instances = [];
+      const staticValues = this.staticValues.slice();
       const cleanupInstances = () => {
         for (const instance of instances) instance?.host.scope?.cleanup();
       };
@@ -3565,7 +3741,9 @@ function createConditionalRangesBlockComponent(owner) {
           element,
           descriptor,
           selection.branch,
-          this.requestNestedFallback
+          this.requestNestedFallback,
+          false
+          // Commit only after every sibling range validates.
         );
         if (!host) {
           cleanupInstances();
@@ -3575,6 +3753,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) {
@@ -3582,14 +3769,27 @@ function createConditionalRangesBlockComponent(owner) {
         return false;
       }
       staticSegments.push(elements.slice(cursor));
-      this.staticSegments = staticSegments;
-      this.rangeInstances = instances;
-      if (!applyStaticRangeBindings(props.bindings, this.staticSegments, this.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();
-        this.rangeInstances = [];
-        this.staticSegments = [];
-        return false;
+        throw error;
       }
+      for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
+      this.staticSegments = staticSegments;
+      this.rangeInstances = instances;
+      this.staticValues.length = 0;
+      this.staticValues.push(...staticValues);
       return true;
     }
     anchorAfter(rangeIndex) {
@@ -3684,6 +3884,14 @@ function createConditionalRangesBlockComponent(owner) {
       }
       afterCommit?.();
     }
+    listen() {
+      const id = this.currentProps.id;
+      const stop = this.stop;
+      if (this.id === id) return;
+      stop?.();
+      this.stop = owner.subscribe(id, this.refresh);
+      this.id = id;
+    }
     activateFallback(afterCommit) {
       if (!this.mounted || this.state.fallback || this.fallbackRequested) {
         afterCommit?.();
@@ -3700,30 +3908,45 @@ function createConditionalRangesBlockComponent(owner) {
       this.propFallbackQueued = true;
       queueMicrotask(() => {
         this.propFallbackQueued = false;
-        if (this.mounted && !this.state.fallback) this.activateFallback();
+        if (this.mounted && !this.state.fallback) {
+          this.listen();
+          this.activateFallback();
+        }
       });
     }
     shouldComponentUpdate(nextProps, nextState) {
+      const definitionChanged = this.definitionVersion !== owner.getDefinitionVersion?.();
       this.currentProps = nextProps;
       if (this.state.fallback && nextState.fallback) this.prepareFallbackUpdate();
       if (nextState.fallback || this.state.fallback) return true;
+      if (definitionChanged) return true;
       this.schedulePropFallback();
       return false;
     }
     componentDidMount() {
       this.mounted = true;
-      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+      this.listen();
       if (this.state.fallback || this.fallbackRequested) {
         this.subscribeFallbackDescendants();
         this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
       } else if (!this.adopt()) this.activateFallback();
     }
     componentDidUpdate() {
-      if (this.state.fallback) this.subscribeFallbackDescendants();
+      this.listen();
+      const nextDefinitionVersion = owner.getDefinitionVersion?.();
+      const definitionChanged = this.definitionVersion !== nextDefinitionVersion;
+      this.definitionVersion = nextDefinitionVersion;
+      if (this.state.fallback) {
+        this.subscribeFallbackDescendants();
+      } else if (definitionChanged && !this.adopt()) {
+        this.activateFallback();
+      }
     }
     componentWillUnmount() {
       this.mounted = false;
-      this.unsubscribe?.();
+      const stop = this.stop;
+      stop?.();
+      this.id = void 0;
       clearCompilerFallbackSubscriptions(this.fallbackUnsubscribers);
       this.fallbackKeysWereUnsafe = false;
       for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
@@ -5512,6 +5735,7 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       this.fallbackKeysWereUnsafe = false;
       this.propSyncQueued = false;
       this.currentProps = this.props;
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.instances = /* @__PURE__ */ new Map();
       this.identityTargets = /* @__PURE__ */ new Map();
       this.membershipTargets = /* @__PURE__ */ new Map();
@@ -5890,13 +6114,14 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       const rows = this.readRows(this.currentProps);
       const elements = [...this.root.children];
       if (!rows || rows.items.length !== elements.length) return false;
+      const reactOwnedRows = this.hasReactOwnedRows();
       const opaqueConditionalPaths = new Set(
         (this.currentProps.conditionals || []).map((conditional) => conditional.path.join("."))
       );
       const instances = /* @__PURE__ */ new Map();
       for (let index = 0; index < rows.items.length; index += 1) {
         const descriptor = this.currentProps.create(rows.items[index], index);
-        if (this.hasReactOwnedRows() && !matchesCompilerHostElement(elements[index], descriptor, opaqueConditionalPaths)) {
+        if (reactOwnedRows && !matchesCompilerHostElement(elements[index], descriptor, opaqueConditionalPaths)) {
           this.cleanupHostScopes(instances);
           return false;
         }
@@ -5909,7 +6134,7 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
           key: rows.keys[index],
           element: elements[index],
           scope: scope || void 0,
-          values: this.hasReactOwnedRows() ? this.currentProps.bindings.map(() => UNSET_KEYED_ROW_BINDING) : readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
+          values: reactOwnedRows ? this.currentProps.bindings.map(() => UNSET_KEYED_ROW_BINDING) : readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
           item: rows.items[index],
           index,
           conditionalValues: this.readConditionalValues(
@@ -5918,11 +6143,13 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
             index
           )
         };
-        if (this.hasReactOwnedRows()) {
-          applyKeyedRowBindings(this.currentProps, instance, rows.items[index], index);
-        }
         instances.set(rows.keys[index], instance);
       }
+      if (reactOwnedRows) {
+        for (const instance of instances.values()) {
+          applyKeyedRowBindings(this.currentProps, instance, instance.item, instance.index);
+        }
+      }
       this.cleanupHostScopes();
       this.instances = instances;
       this.rebuildElementIndex(instances);
@@ -6344,17 +6571,29 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       this.commitCurrentCollection(dirtyState);
       this.notifyConditionalChanges(conditionalChanges, afterCommit);
     }
+    listen() {
+      const id = this.currentProps.id;
+      const stop = this.stop;
+      if (this.id === id) return;
+      stop?.();
+      this.stop = owner.subscribe(id, this.refresh);
+      this.id = id;
+    }
     schedulePropSync() {
       if (this.propSyncQueued) return;
       this.propSyncQueued = true;
       queueMicrotask(() => {
         this.propSyncQueued = false;
-        if (this.mounted && !this.state.fallback) this.reconcile();
+        if (this.mounted && !this.state.fallback) {
+          this.listen();
+          this.reconcile();
+        }
       });
     }
     shouldComponentUpdate(nextProps, nextState) {
       const wasReactOwned = this.hasReactOwnedRows(this.currentProps);
       const willBeReactOwned = this.hasReactOwnedRows(nextProps);
+      const definitionChanged = this.definitionVersion !== owner.getDefinitionVersion?.();
       this.currentProps = nextProps;
       if (this.state.fallback && nextState.fallback) {
         const unsafeKeys = this.hasUnsafeFallbackKeys();
@@ -6362,7 +6601,7 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
         this.fallbackKeysWereUnsafe = unsafeKeys;
       }
       if (nextState.fallback || this.state.fallback) return true;
-      if (wasReactOwned || willBeReactOwned) {
+      if (definitionChanged || wasReactOwned || willBeReactOwned) {
         this.eventHandlers.clear();
         return true;
       }
@@ -6370,19 +6609,25 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       return false;
     }
     componentDidUpdate(previousProps) {
-      if (this.state.fallback || previousProps === this.props || !this.hasReactOwnedRows(previousProps) && !this.hasReactOwnedRows(this.props) || this.adopt()) {
+      this.listen();
+      const nextDefinitionVersion = owner.getDefinitionVersion?.();
+      const definitionChanged = this.definitionVersion !== nextDefinitionVersion;
+      this.definitionVersion = nextDefinitionVersion;
+      if (this.state.fallback || previousProps === this.props || !definitionChanged && !this.hasReactOwnedRows(previousProps) && !this.hasReactOwnedRows(this.props) || this.adopt()) {
         return;
       }
       this.activateFallback();
     }
     componentDidMount() {
       this.mounted = true;
-      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+      this.listen();
       if (!this.adopt()) this.activateFallback();
     }
     componentWillUnmount() {
       this.mounted = false;
-      this.unsubscribe?.();
+      const stop = this.stop;
+      stop?.();
+      this.id = void 0;
       this.cleanupHostScopes();
       this.instances.clear();
       this.identityTargets.clear();
@@ -6425,6 +6670,7 @@ function createKeyedRangesBlockComponent(owner) {
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues = [];
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
@@ -6462,6 +6708,7 @@ function createKeyedRangesBlockComponent(owner) {
       const elements = [...this.root.children];
       const staticSegments = [];
       const instancesByRange = [];
+      const staticValues = this.staticValues.slice();
       let cursor = 0;
       for (let rangeIndex = 0; rangeIndex < props.ranges.length; rangeIndex += 1) {
         const range = props.ranges[rangeIndex];
@@ -6493,13 +6740,11 @@ function createKeyedRangesBlockComponent(owner) {
       }
       if (cursor + props.trailing !== elements.length) return false;
       staticSegments.push(elements.slice(cursor));
+      if (!applyStaticRangeBindings(props.bindings, staticSegments, staticValues)) return false;
       this.staticSegments = staticSegments;
       this.rangeInstances = instancesByRange;
-      if (!applyStaticRangeBindings(props.bindings, this.staticSegments, this.staticValues)) {
-        this.rangeInstances = [];
-        this.staticSegments = [];
-        return false;
-      }
+      this.staticValues.length = 0;
+      this.staticValues.push(...staticValues);
       return true;
     }
     anchorAfter(rangeIndex) {
@@ -6596,6 +6841,14 @@ function createKeyedRangesBlockComponent(owner) {
       }
       afterCommit?.();
     }
+    listen() {
+      const id = this.currentProps.id;
+      const stop = this.stop;
+      if (this.id === id) return;
+      stop?.();
+      this.stop = owner.subscribe(id, this.refresh);
+      this.id = id;
+    }
     activateFallback(afterCommit) {
       if (!this.mounted || this.state.fallback || this.fallbackRequested) {
         afterCommit?.();
@@ -6610,10 +6863,14 @@ function createKeyedRangesBlockComponent(owner) {
       this.propFallbackQueued = true;
       queueMicrotask(() => {
         this.propFallbackQueued = false;
-        if (this.mounted && !this.state.fallback) this.activateFallback();
+        if (this.mounted && !this.state.fallback) {
+          this.listen();
+          this.activateFallback();
+        }
       });
     }
     shouldComponentUpdate(nextProps, nextState) {
+      const definitionChanged = this.definitionVersion !== owner.getDefinitionVersion?.();
       this.currentProps = nextProps;
       if (this.state.fallback && nextState.fallback) {
         const unsafeKeys = this.hasUnsafeFallbackKeys();
@@ -6621,17 +6878,27 @@ function createKeyedRangesBlockComponent(owner) {
         this.fallbackKeysWereUnsafe = unsafeKeys;
       }
       if (nextState.fallback || this.state.fallback) return true;
+      if (definitionChanged) return true;
       this.schedulePropFallback();
       return false;
     }
     componentDidMount() {
       this.mounted = true;
-      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+      this.listen();
       if (!this.adopt()) this.activateFallback();
     }
+    componentDidUpdate() {
+      this.listen();
+      const nextDefinitionVersion = owner.getDefinitionVersion?.();
+      const definitionChanged = this.definitionVersion !== nextDefinitionVersion;
+      this.definitionVersion = nextDefinitionVersion;
+      if (!this.state.fallback && definitionChanged && !this.adopt()) this.activateFallback();
+    }
     componentWillUnmount() {
       this.mounted = false;
-      this.unsubscribe?.();
+      const stop = this.stop;
+      stop?.();
+      this.id = void 0;
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues.length = 0;
@@ -6666,6 +6933,7 @@ function createMixedRangesBlockComponent(owner) {
       this.currentProps = this.props;
       this.controller = null;
       this.fallbackUnsubscribers = /* @__PURE__ */ new Map();
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
@@ -6739,7 +7007,9 @@ function createMixedRangesBlockComponent(owner) {
         controller.cleanup();
         throw error;
       }
+      const previous = this.controller;
       this.controller = controller;
+      previous?.cleanup();
       return true;
     }
     schedulePropFallback() {
@@ -6751,11 +7021,13 @@ function createMixedRangesBlockComponent(owner) {
       });
     }
     shouldComponentUpdate(nextProps, nextState) {
+      const definitionChanged = this.definitionVersion !== owner.getDefinitionVersion?.();
       this.currentProps = nextProps;
       if (this.state.fallback && nextState.fallback) {
         this.prepareFallbackUpdate(this.currentProps.create());
       }
       if (nextState.fallback || this.state.fallback) return true;
+      if (definitionChanged) return true;
       this.schedulePropFallback();
       return false;
     }
@@ -6767,7 +7039,14 @@ function createMixedRangesBlockComponent(owner) {
       } else if (!this.adopt()) this.activateFallback();
     }
     componentDidUpdate() {
-      if (this.state.fallback) this.subscribeFallbackBlocks();
+      const nextDefinitionVersion = owner.getDefinitionVersion?.();
+      const definitionChanged = this.definitionVersion !== nextDefinitionVersion;
+      this.definitionVersion = nextDefinitionVersion;
+      if (this.state.fallback) {
+        this.subscribeFallbackBlocks();
+      } else if (definitionChanged && !this.adopt()) {
+        this.activateFallback();
+      }
     }
     componentWillUnmount() {
       this.mounted = false;
@@ -7607,8 +7886,9 @@ function createCompiledComponentWithFeatures(definition, runtimeFeatures) {
         };
       });
       const featureOwner = {
-        setRoot: (id, root) => this.setBlockRoot(id, root),
-        subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        setRoot: (id, root, expectedRoot) => this.setBlockRoot(id, root, expectedRoot),
+        subscribe: (id, refresh) => this.subscribeToBlock(id, refresh),
+        getDefinitionVersion: () => definitionReference.current
       };
       const blockRuntime = {
         target: (id) => this.bindingTarget(id)
@@ -7747,8 +8027,9 @@ function createCompiledComponentWithFeatures(definition, runtimeFeatures) {
       }
       snapshot.element.setSelectionRange(snapshot.start, snapshot.end, snapshot.direction);
     }
-    setBlockRoot(id, root) {
+    setBlockRoot(id, root, expectedRoot) {
       const previous = this.blockRoots.get(id);
+      if (!root && expectedRoot !== void 0 && previous !== expectedRoot) return;
       if (previous) this.blockRootElements.delete(previous);
       if (root) {
         this.blockRoots.set(id, root);