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

package/dist/compiler-runtime.cjs

@@ -1748,8 +1748,18 @@ function createConditionalBlockComponent(owner) {
   class FarmConditionalBlock extends React__default.default.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);
@@ -1764,12 +1774,15 @@ 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() {
       this.unsubscribe?.();
-      owner.setRoot(this.props.id, null);
     }
     render() {
       const node = this.props.render();
@@ -1890,33 +1903,65 @@ function materializeCompilerHostChildren(descriptor) {
   children.push(...staticChildren.slice(cursor, cursor + block.trailing));
   return children;
 }
-function collectCompilerHostBlockIds(descriptor, ids) {
-  for (const child of flattenCompilerHostElements(descriptor.children)) {
-    collectCompilerHostBlockIds(child, ids);
+function collectActiveCompilerHostBlockIds(descriptor, ids) {
+  for (const child of flattenCompilerHostElements(materializeCompilerHostChildren(descriptor))) {
+    collectActiveCompilerHostBlockIds(child, ids);
   }
   const block = descriptor.block;
-  if (!block || ids.has(block.id)) return;
+  if (!block) return;
   ids.add(block.id);
-  if (block.kind === "conditional-ranges") {
-    for (const range of block.ranges) {
-      if (range.truthy) collectCompilerHostBlockIds(range.truthy.create(), ids);
-      if (range.falsy) collectCompilerHostBlockIds(range.falsy.create(), ids);
+}
+function reconcileCompilerFallbackSubscriptions(owner, subscriptions, ids, refresh) {
+  for (const [id, unsubscribe] of subscriptions) {
+    if (ids.has(id)) continue;
+    unsubscribe();
+    subscriptions.delete(id);
+  }
+  for (const id of ids) {
+    if (!subscriptions.has(id)) subscriptions.set(id, owner.subscribe(id, refresh));
+  }
+}
+function clearCompilerFallbackSubscriptions(subscriptions) {
+  for (const unsubscribe of subscriptions.values()) unsubscribe();
+  subscriptions.clear();
+}
+function hasUnsafeCompilerFallbackKeys(descriptor) {
+  const visitKeyedRange = (range) => {
+    const items = materializeIterable(range.items());
+    const keys = items.map((item, index) => keyedRowIdentity(range.rowKey(item, index)));
+    if (new Set(keys).size !== keys.length) return true;
+    return items.some((item, index) => visit(range.create(item, index)));
+  };
+  const visit = (current) => {
+    for (const child of flattenCompilerHostElements(current.children)) {
+      if (visit(child)) return true;
+    }
+    const block = current.block;
+    if (!block) return false;
+    if (block.kind === "conditional-ranges") {
+      for (const range of block.ranges) {
+        const selection = hostConditionalSelection(range);
+        if (selection.kind === "branch" && visit(selection.branch.create())) return true;
+      }
+      return false;
     }
-  } else if (block.kind === "keyed-ranges") {
-    for (const range of block.ranges) {
-      const first = materializeIterable(range.items())[0];
-      if (first !== void 0) collectCompilerHostBlockIds(range.create(first, 0), ids);
+    if (block.kind === "keyed-ranges") {
+      return block.ranges.some(visitKeyedRange);
     }
-  } else {
     for (const range of block.ranges) {
-      if (range.kind === "conditional") {
-        if (range.truthy) collectCompilerHostBlockIds(range.truthy.create(), ids);
-        if (range.falsy) collectCompilerHostBlockIds(range.falsy.create(), ids);
-      } else {
-        const first = materializeIterable(range.items())[0];
-        if (first !== void 0) collectCompilerHostBlockIds(range.create(first, 0), ids);
+      if (range.kind === "keyed") {
+        if (visitKeyedRange(range)) return true;
+        continue;
       }
+      const selection = hostConditionalSelection(range);
+      if (selection.kind === "branch" && visit(selection.branch.create())) return true;
     }
+    return false;
+  };
+  try {
+    return visit(descriptor);
+  } catch {
+    return true;
   }
 }
 function findCompilerHostTarget(root, path) {
@@ -3222,13 +3267,19 @@ function createHostConditionalBlockComponent(owner) {
       this.fallbackVersion = 0;
       this.propSyncQueued = false;
       this.currentProps = this.props;
-      this.fallbackUnsubscribers = [];
+      this.fallbackUnsubscribers = /* @__PURE__ */ new Map();
+      this.fallbackKeysWereUnsafe = false;
       this.activeBranch = null;
       this.instance = null;
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.requestNestedFallback = () => {
         this.instance?.scope?.cleanup();
         this.activateFallback();
       };
+      this.refreshFallbackDescendant = (afterCommit) => {
+        this.prepareFallbackUpdate();
+        this.forceUpdate(afterCommit);
+      };
       this.captureRoot = (root) => {
         this.root = root;
       };
@@ -3237,31 +3288,39 @@ function createHostConditionalBlockComponent(owner) {
       };
     }
     subscribeFallbackDescendants() {
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
       const ids = /* @__PURE__ */ new Set();
-      if (this.currentProps.truthy) {
-        collectCompilerHostBlockIds(this.currentProps.truthy.create(), ids);
-      }
-      if (this.currentProps.falsy) {
-        collectCompilerHostBlockIds(this.currentProps.falsy.create(), ids);
+      const selection = hostConditionalSelection(this.currentProps);
+      if (selection.kind === "branch") {
+        collectActiveCompilerHostBlockIds(selection.branch.create(), ids);
       }
       ids.delete(this.currentProps.id);
-      for (const id of ids) {
-        this.fallbackUnsubscribers.push(
-          owner.subscribe(id, (afterCommit) => {
-            this.fallbackVersion += 1;
-            this.forceUpdate(afterCommit);
-          })
-        );
+      reconcileCompilerFallbackSubscriptions(
+        owner,
+        this.fallbackUnsubscribers,
+        ids,
+        this.refreshFallbackDescendant
+      );
+    }
+    hasUnsafeFallbackKeys() {
+      try {
+        const selection = hostConditionalSelection(this.currentProps);
+        return selection.kind === "branch" && hasUnsafeCompilerFallbackKeys(selection.branch.create());
+      } catch {
+        return true;
       }
     }
+    prepareFallbackUpdate() {
+      const unsafeKeys = this.hasUnsafeFallbackKeys();
+      if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
+      this.fallbackKeysWereUnsafe = unsafeKeys;
+    }
     adopt() {
       if (!this.root) return false;
       const selection = hostConditionalSelection(this.currentProps);
       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;
@@ -3280,6 +3339,7 @@ function createHostConditionalBlockComponent(owner) {
         this.requestNestedFallback
       );
       if (!instance) return false;
+      this.instance?.scope?.cleanup();
       this.activeBranch = selection.key;
       this.instance = instance;
       return true;
@@ -3294,6 +3354,7 @@ function createHostConditionalBlockComponent(owner) {
       this.instance = null;
       this.activeBranch = null;
       this.subscribeFallbackDescendants();
+      this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
       this.fallbackVersion += 1;
       this.setState({ fallback: true }, afterCommit);
     }
@@ -3303,6 +3364,7 @@ function createHostConditionalBlockComponent(owner) {
         return;
       }
       if (this.state.fallback) {
+        this.prepareFallbackUpdate();
         this.forceUpdate(afterCommit);
         return;
       }
@@ -3356,30 +3418,60 @@ 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);
-      if (!this.adopt()) this.activateFallback();
+      this.listen();
+      if (this.state.fallback || this.fallbackRequested) {
+        this.subscribeFallbackDescendants();
+        this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
+      } else if (!this.adopt()) this.activateFallback();
+    }
+    componentDidUpdate() {
+      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?.();
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
+      const stop = this.stop;
+      stop?.();
+      this.id = void 0;
+      clearCompilerFallbackSubscriptions(this.fallbackUnsubscribers);
+      this.fallbackKeysWereUnsafe = false;
       this.instance?.scope?.cleanup();
       this.activeBranch = null;
       this.instance = null;
@@ -3411,14 +3503,20 @@ function createConditionalRangesBlockComponent(owner) {
       this.fallbackVersion = 0;
       this.propFallbackQueued = false;
       this.currentProps = this.props;
-      this.fallbackUnsubscribers = [];
+      this.fallbackUnsubscribers = /* @__PURE__ */ new Map();
+      this.fallbackKeysWereUnsafe = false;
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues = [];
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.requestNestedFallback = () => {
         for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
         this.activateFallback();
       };
+      this.refreshFallbackDescendant = (afterCommit) => {
+        this.prepareFallbackUpdate();
+        this.forceUpdate(afterCommit);
+      };
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
@@ -3428,23 +3526,39 @@ function createConditionalRangesBlockComponent(owner) {
       };
     }
     subscribeFallbackDescendants() {
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
       const ids = /* @__PURE__ */ new Set();
       for (const range of this.currentProps.ranges) {
-        if (range.truthy) collectCompilerHostBlockIds(range.truthy.create(), ids);
-        if (range.falsy) collectCompilerHostBlockIds(range.falsy.create(), ids);
+        const selection = hostConditionalSelection(range);
+        if (selection.kind === "branch") {
+          collectActiveCompilerHostBlockIds(selection.branch.create(), ids);
+        }
       }
       ids.delete(this.currentProps.id);
-      for (const id of ids) {
-        this.fallbackUnsubscribers.push(
-          owner.subscribe(id, (afterCommit) => {
-            this.fallbackVersion += 1;
-            this.forceUpdate(afterCommit);
-          })
-        );
+      reconcileCompilerFallbackSubscriptions(
+        owner,
+        this.fallbackUnsubscribers,
+        ids,
+        this.refreshFallbackDescendant
+      );
+    }
+    hasUnsafeFallbackKeys() {
+      try {
+        for (const range of this.currentProps.ranges) {
+          const selection = hostConditionalSelection(range);
+          if (selection.kind === "branch" && hasUnsafeCompilerFallbackKeys(selection.branch.create())) {
+            return true;
+          }
+        }
+        return false;
+      } catch {
+        return true;
       }
     }
+    prepareFallbackUpdate() {
+      const unsafeKeys = this.hasUnsafeFallbackKeys();
+      if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
+      this.fallbackKeysWereUnsafe = unsafeKeys;
+    }
     readSelections(props) {
       const selections = [];
       for (const range of props.ranges) {
@@ -3461,6 +3575,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();
       };
@@ -3515,14 +3630,15 @@ function createConditionalRangesBlockComponent(owner) {
         return false;
       }
       staticSegments.push(elements.slice(cursor));
-      this.staticSegments = staticSegments;
-      this.rangeInstances = instances;
-      if (!applyStaticRangeBindings(props.bindings, this.staticSegments, this.staticValues)) {
+      if (!applyStaticRangeBindings(props.bindings, staticSegments, staticValues)) {
         cleanupInstances();
-        this.rangeInstances = [];
-        this.staticSegments = [];
         return false;
       }
+      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) {
@@ -3588,7 +3704,7 @@ function createConditionalRangesBlockComponent(owner) {
         return;
       }
       if (this.state.fallback) {
-        this.fallbackVersion += 1;
+        this.prepareFallbackUpdate();
         this.forceUpdate(afterCommit);
         return;
       }
@@ -3617,6 +3733,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?.();
@@ -3625,6 +3749,7 @@ function createConditionalRangesBlockComponent(owner) {
       this.fallbackRequested = true;
       for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
       this.subscribeFallbackDescendants();
+      this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
       this.setState({ fallback: true }, afterCommit);
     }
     schedulePropFallback() {
@@ -3632,25 +3757,47 @@ 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);
-      if (!this.adopt()) this.activateFallback();
+      this.listen();
+      if (this.state.fallback || this.fallbackRequested) {
+        this.subscribeFallbackDescendants();
+        this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
+      } else if (!this.adopt()) this.activateFallback();
+    }
+    componentDidUpdate() {
+      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?.();
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
+      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();
       this.rangeInstances = [];
       this.staticSegments = [];
@@ -5437,6 +5584,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();
@@ -5815,13 +5963,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;
         }
@@ -5834,7 +5983,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(
@@ -5843,11 +5992,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);
@@ -6145,9 +6296,7 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       }
       if (this.state.fallback) {
         const unsafeKeys = this.hasUnsafeFallbackKeys();
-        if (unsafeKeys || this.fallbackKeysWereUnsafe) {
-          this.fallbackVersion += 1;
-        }
+        if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
         this.fallbackKeysWereUnsafe = unsafeKeys;
         this.forceUpdate(afterCommit);
         return;
@@ -6271,20 +6420,37 @@ 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();
+        if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
+        this.fallbackKeysWereUnsafe = unsafeKeys;
+      }
       if (nextState.fallback || this.state.fallback) return true;
-      if (wasReactOwned || willBeReactOwned) {
+      if (definitionChanged || wasReactOwned || willBeReactOwned) {
         this.eventHandlers.clear();
         return true;
       }
@@ -6292,19 +6458,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();
@@ -6341,11 +6513,13 @@ function createKeyedRangesBlockComponent(owner) {
       this.mounted = false;
       this.fallbackRequested = false;
       this.fallbackVersion = 0;
+      this.fallbackKeysWereUnsafe = false;
       this.propFallbackQueued = false;
       this.currentProps = this.props;
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues = [];
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
@@ -6369,6 +6543,13 @@ function createKeyedRangesBlockComponent(owner) {
       }
       return ranges;
     }
+    hasUnsafeFallbackKeys() {
+      try {
+        return this.readRanges(this.currentProps) === null;
+      } catch {
+        return true;
+      }
+    }
     adopt(props = this.currentProps) {
       if (!this.root || !Number.isSafeInteger(props.trailing) || props.trailing < 0) return false;
       const rowsByRange = this.readRanges(props);
@@ -6376,6 +6557,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];
@@ -6407,13 +6589,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) {
@@ -6481,7 +6661,9 @@ function createKeyedRangesBlockComponent(owner) {
         return;
       }
       if (this.state.fallback) {
-        this.fallbackVersion += 1;
+        const unsafeKeys = this.hasUnsafeFallbackKeys();
+        if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
+        this.fallbackKeysWereUnsafe = unsafeKeys;
         this.forceUpdate(afterCommit);
         return;
       }
@@ -6508,12 +6690,21 @@ 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?.();
         return;
       }
       this.fallbackRequested = true;
+      this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
       this.setState({ fallback: true }, afterCommit);
     }
     schedulePropFallback() {
@@ -6521,23 +6712,42 @@ 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();
+        if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
+        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;
@@ -6567,14 +6777,25 @@ function createMixedRangesBlockComponent(owner) {
       this.mounted = false;
       this.fallbackRequested = false;
       this.fallbackVersion = 0;
+      this.fallbackKeysWereUnsafe = false;
       this.propFallbackQueued = false;
       this.currentProps = this.props;
       this.controller = null;
-      this.fallbackUnsubscribers = [];
+      this.fallbackUnsubscribers = /* @__PURE__ */ new Map();
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
       };
+      this.refreshFallbackBlock = (afterCommit) => {
+        if (!this.mounted || !this.state.fallback) {
+          afterCommit?.();
+          return;
+        }
+        const nextDescriptor = this.currentProps.create();
+        this.prepareFallbackUpdate(nextDescriptor);
+        this.forceUpdate(afterCommit);
+      };
       this.activateFallback = (afterCommit) => {
         if (!this.mounted || this.state.fallback || this.fallbackRequested) {
           afterCommit?.();
@@ -6583,6 +6804,7 @@ function createMixedRangesBlockComponent(owner) {
         this.fallbackRequested = true;
         this.controller?.cleanup();
         this.controller = null;
+        this.fallbackKeysWereUnsafe = hasUnsafeCompilerFallbackKeys(this.currentProps.create());
         this.fallbackVersion += 1;
         this.setState({ fallback: true }, () => {
           this.subscribeFallbackBlocks();
@@ -6591,26 +6813,27 @@ function createMixedRangesBlockComponent(owner) {
       };
     }
     clearFallbackSubscriptions() {
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
+      clearCompilerFallbackSubscriptions(this.fallbackUnsubscribers);
+    }
+    readFallbackBlockIds(descriptor) {
+      const ids = /* @__PURE__ */ new Set();
+      collectActiveCompilerHostBlockIds(descriptor, ids);
+      return ids;
+    }
+    prepareFallbackUpdate(descriptor) {
+      const unsafeKeys = hasUnsafeCompilerFallbackKeys(descriptor);
+      if (unsafeKeys || this.fallbackKeysWereUnsafe) this.fallbackVersion += 1;
+      this.fallbackKeysWereUnsafe = unsafeKeys;
     }
     subscribeFallbackBlocks() {
-      this.clearFallbackSubscriptions();
       const descriptor = this.currentProps.create();
-      const ids = /* @__PURE__ */ new Set();
-      collectCompilerHostBlockIds(descriptor, ids);
-      for (const id of ids) {
-        this.fallbackUnsubscribers.push(
-          owner.subscribe(id, (afterCommit) => {
-            if (!this.mounted || !this.state.fallback) {
-              afterCommit?.();
-              return;
-            }
-            this.fallbackVersion += 1;
-            this.forceUpdate(afterCommit);
-          })
-        );
-      }
+      const ids = this.readFallbackBlockIds(descriptor);
+      reconcileCompilerFallbackSubscriptions(
+        owner,
+        this.fallbackUnsubscribers,
+        ids,
+        this.refreshFallbackBlock
+      );
     }
     adopt() {
       if (!this.root) return false;
@@ -6633,7 +6856,9 @@ function createMixedRangesBlockComponent(owner) {
         controller.cleanup();
         throw error;
       }
+      const previous = this.controller;
       this.controller = controller;
+      previous?.cleanup();
       return true;
     }
     schedulePropFallback() {
@@ -6645,23 +6870,39 @@ 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;
     }
     componentDidMount() {
       this.mounted = true;
-      if (!this.adopt()) this.activateFallback();
+      if (this.state.fallback || this.fallbackRequested) {
+        this.fallbackKeysWereUnsafe = hasUnsafeCompilerFallbackKeys(this.currentProps.create());
+        this.subscribeFallbackBlocks();
+      } 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;
       this.controller?.cleanup();
       this.controller = null;
       this.clearFallbackSubscriptions();
+      this.fallbackKeysWereUnsafe = false;
     }
     render() {
       const container = this.currentProps.render();
@@ -7494,8 +7735,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)
@@ -7634,8 +7876,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);
@@ -7778,8 +8021,6 @@ function createCompiledComponentWithFeatures(definition, runtimeFeatures) {
       this.dirtyState.clear();
       this.inputSelection = null;
       this.blockRefreshListeners.clear();
-      this.blockRoots.clear();
-      this.blockRootElements.clear();
       this.bindingTargetRefs.clear();
       this.indexedDefinition = null;
       this.staticBindingsByDependency = [];