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

package/dist/compiler-runtime.cjs

@@ -1769,7 +1769,6 @@ function createConditionalBlockComponent(owner) {
     }
     componentWillUnmount() {
       this.unsubscribe?.();
-      owner.setRoot(this.props.id, null);
     }
     render() {
       const node = this.props.render();
@@ -1890,33 +1889,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 +3253,18 @@ 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.requestNestedFallback = () => {
         this.instance?.scope?.cleanup();
         this.activateFallback();
       };
+      this.refreshFallbackDescendant = (afterCommit) => {
+        this.prepareFallbackUpdate();
+        this.forceUpdate(afterCommit);
+      };
       this.captureRoot = (root) => {
         this.root = root;
       };
@@ -3237,25 +3273,32 @@ 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);
@@ -3294,6 +3337,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 +3347,7 @@ function createHostConditionalBlockComponent(owner) {
         return;
       }
       if (this.state.fallback) {
+        this.prepareFallbackUpdate();
         this.forceUpdate(afterCommit);
         return;
       }
@@ -3366,6 +3411,7 @@ function createHostConditionalBlockComponent(owner) {
     }
     shouldComponentUpdate(nextProps, nextState) {
       this.currentProps = nextProps;
+      if (this.state.fallback && nextState.fallback) this.prepareFallbackUpdate();
       if (nextState.fallback || this.state.fallback) return true;
       this.schedulePropSync();
       return false;
@@ -3373,15 +3419,20 @@ function createHostConditionalBlockComponent(owner) {
     componentDidMount() {
       this.mounted = true;
       this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
-      if (!this.adopt()) this.activateFallback();
+      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();
     }
     componentWillUnmount() {
       this.mounted = false;
       this.unsubscribe?.();
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
+      clearCompilerFallbackSubscriptions(this.fallbackUnsubscribers);
+      this.fallbackKeysWereUnsafe = false;
       this.instance?.scope?.cleanup();
-      this.root = null;
       this.activeBranch = null;
       this.instance = null;
     }
@@ -3412,7 +3463,8 @@ 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 = [];
@@ -3420,6 +3472,10 @@ function createConditionalRangesBlockComponent(owner) {
         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);
@@ -3429,23 +3485,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) {
@@ -3589,7 +3661,7 @@ function createConditionalRangesBlockComponent(owner) {
         return;
       }
       if (this.state.fallback) {
-        this.fallbackVersion += 1;
+        this.prepareFallbackUpdate();
         this.forceUpdate(afterCommit);
         return;
       }
@@ -3626,6 +3698,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() {
@@ -3638,6 +3711,7 @@ function createConditionalRangesBlockComponent(owner) {
     }
     shouldComponentUpdate(nextProps, nextState) {
       this.currentProps = nextProps;
+      if (this.state.fallback && nextState.fallback) this.prepareFallbackUpdate();
       if (nextState.fallback || this.state.fallback) return true;
       this.schedulePropFallback();
       return false;
@@ -3645,15 +3719,20 @@ function createConditionalRangesBlockComponent(owner) {
     componentDidMount() {
       this.mounted = true;
       this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
-      if (!this.adopt()) this.activateFallback();
+      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();
     }
     componentWillUnmount() {
       this.mounted = false;
       this.unsubscribe?.();
-      for (const unsubscribe of this.fallbackUnsubscribers) unsubscribe();
-      this.fallbackUnsubscribers = [];
+      clearCompilerFallbackSubscriptions(this.fallbackUnsubscribers);
+      this.fallbackKeysWereUnsafe = false;
       for (const instance of this.rangeInstances) instance?.host.scope?.cleanup();
-      this.root = null;
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues.length = 0;
@@ -4495,15 +4574,15 @@ function reconcileCompilerKeyedArrayBatchInsert(props, dirtyState, collectionTok
       return void 0;
     }
   }
-  const knownKeys = new Set(instances.keys());
+  const incomingKeys = /* @__PURE__ */ new Set();
   const incoming = [];
   try {
     for (let offset = 0; offset < insertCount; offset += 1) {
       const index = update.position + offset;
       const item = finalValue[index];
       const key = keyedRowIdentity(props.rowKey(item, index));
-      if (knownKeys.has(key)) return void 0;
-      knownKeys.add(key);
+      if (instances.has(key) || incomingKeys.has(key)) return void 0;
+      incomingKeys.add(key);
       const descriptor = props.create(item, index);
       incoming.push({
         key,
@@ -4656,9 +4735,9 @@ function reconcileCompilerKeyedArrayWindowReplace(props, dirtyState, collectionT
       const preparedIncomingKeys = /* @__PURE__ */ new Set();
       const preparedWindows = [];
       const nextInstances = [];
-      for (const window of windows) {
-        if (window[0] < sourceCursor) return void 0;
-        while (sourceCursor < window[0]) {
+      for (const window2 of windows) {
+        if (window2[0] < sourceCursor) return void 0;
+        while (sourceCursor < window2[0]) {
           const instance = previousInstances[sourceCursor];
           if (!instance || instance.index !== sourceCursor || !Object.is(instance.item, finalValue[resultCursor])) {
             return void 0;
@@ -4671,24 +4750,24 @@ function reconcileCompilerKeyedArrayWindowReplace(props, dirtyState, collectionT
           props,
           finalValue,
           resultCursor,
-          window[3]
+          window2[3]
         );
         if (!incoming2) return void 0;
-        window[1] = resultCursor;
+        window2[1] = resultCursor;
         const prepared3 = prepareCompilerKeyedArrayWindow(
           props,
           instances,
           previousInstances,
           root,
-          window,
+          window2,
           incoming2,
           preparedIncomingKeys
         );
         if (!prepared3) return void 0;
         preparedWindows.push(prepared3);
         nextInstances.push(...prepared3[4]);
-        sourceCursor += window[2];
-        resultCursor += window[3];
+        sourceCursor += window2[2];
+        resultCursor += window2[3];
       }
       while (sourceCursor < previousInstances.length) {
         const instance = previousInstances[sourceCursor];
@@ -4708,30 +4787,32 @@ function reconcileCompilerKeyedArrayWindowReplace(props, dirtyState, collectionT
       }
       return keyedRowInstancesByKey(nextInstances);
     }
-    const touchedIndices = /* @__PURE__ */ new Set();
-    for (const update2 of updates) {
-      for (let index = update2.position; index < update2.position + update2.removedCount; index += 1) {
-        touchedIndices.add(index);
-      }
-    }
+    updates.sort((left, right) => right.position - left.position);
+    let window = updates.pop();
+    const touchedInstances = [];
     for (let index = 0; index < previousInstances.length; index += 1) {
+      while (window && index >= window.position + window.removedCount) {
+        window = updates.pop();
+      }
       const instance = previousInstances[index];
-      const touched = touchedIndices.has(index);
-      if (!instance || instance.index !== index || (touched ? instance.element.parentNode !== root : !Object.is(instance.item, finalValue[index]))) {
+      if (!instance || instance.index !== index) return void 0;
+      if (window && index >= window.position) {
+        if (instance.element.parentNode !== root) return void 0;
+        touchedInstances.push(instance);
+      } else if (!Object.is(instance.item, finalValue[index])) {
         return void 0;
       }
     }
-    const knownKeys = new Set(instances.keys());
     const incomingKeys2 = /* @__PURE__ */ new Set();
     let replacesRows = false;
     const prepared2 = [];
     try {
-      for (const index of [...touchedIndices].sort((left, right) => left - right)) {
-        const instance = previousInstances[index];
+      for (const instance of touchedInstances) {
+        const index = instance.index;
         const item = finalValue[index];
         const key = keyedRowIdentity(props.rowKey(item, index));
         if (key !== instance.key) {
-          if (knownKeys.has(key) || incomingKeys2.has(key)) return void 0;
+          if (instances.has(key) || incomingKeys2.has(key)) return void 0;
           incomingKeys2.add(key);
           replacesRows = true;
           const descriptor = props.create(item, index);
@@ -5555,11 +5636,13 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
             this.hasReactOwnedRows()
           );
           if (positionedInstances) {
-            this.instances = new Map(positionedInstances);
-            this.rebuildElementIndex(this.instances);
-            const keys = [...this.instances.keys()];
-            this.pruneEventHandlers(keys);
-            this.pruneConditionalListeners(keys);
+            if (positionedInstances !== this.instances) {
+              this.instances = new Map(positionedInstances);
+              this.rebuildElementIndex(this.instances);
+              const keys = [...this.instances.keys()];
+              this.pruneEventHandlers(keys);
+              this.pruneConditionalListeners(keys);
+            }
             this.commitCurrentCollection(dirtyState);
             afterCommit?.();
             return;
@@ -5574,9 +5657,9 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
           );
           if (reorderedInstances) {
             const removedRows = reorderedInstances.size < this.instances.size;
-            this.instances = new Map(reorderedInstances);
-            this.rebuildElementIndex(this.instances);
+            this.instances = reorderedInstances;
             if (removedRows) {
+              this.rebuildElementIndex(this.instances);
               const keys = [...this.instances.keys()];
               this.pruneEventHandlers(keys);
               this.pruneConditionalListeners(keys);
@@ -6143,9 +6226,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;
@@ -6281,6 +6362,11 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
       const wasReactOwned = this.hasReactOwnedRows(this.currentProps);
       const willBeReactOwned = this.hasReactOwnedRows(nextProps);
       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) {
         this.eventHandlers.clear();
@@ -6303,7 +6389,6 @@ function createKeyedRowsBlockComponent(owner, options = {}) {
     componentWillUnmount() {
       this.mounted = false;
       this.unsubscribe?.();
-      this.root = null;
       this.cleanupHostScopes();
       this.instances.clear();
       this.identityTargets.clear();
@@ -6340,6 +6425,7 @@ function createKeyedRangesBlockComponent(owner) {
       this.mounted = false;
       this.fallbackRequested = false;
       this.fallbackVersion = 0;
+      this.fallbackKeysWereUnsafe = false;
       this.propFallbackQueued = false;
       this.currentProps = this.props;
       this.rangeInstances = [];
@@ -6368,6 +6454,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);
@@ -6480,7 +6573,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;
       }
@@ -6513,6 +6608,7 @@ function createKeyedRangesBlockComponent(owner) {
         return;
       }
       this.fallbackRequested = true;
+      this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
       this.setState({ fallback: true }, afterCommit);
     }
     schedulePropFallback() {
@@ -6525,6 +6621,11 @@ function createKeyedRangesBlockComponent(owner) {
     }
     shouldComponentUpdate(nextProps, nextState) {
       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;
       this.schedulePropFallback();
       return false;
@@ -6537,7 +6638,6 @@ function createKeyedRangesBlockComponent(owner) {
     componentWillUnmount() {
       this.mounted = false;
       this.unsubscribe?.();
-      this.root = null;
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues.length = 0;
@@ -6567,14 +6667,24 @@ 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.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 +6693,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 +6702,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;
@@ -6646,13 +6758,19 @@ function createMixedRangesBlockComponent(owner) {
     }
     shouldComponentUpdate(nextProps, nextState) {
       this.currentProps = nextProps;
+      if (this.state.fallback && nextState.fallback) {
+        this.prepareFallbackUpdate(this.currentProps.create());
+      }
       if (nextState.fallback || this.state.fallback) 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();
@@ -6662,7 +6780,7 @@ function createMixedRangesBlockComponent(owner) {
       this.controller?.cleanup();
       this.controller = null;
       this.clearFallbackSubscriptions();
-      this.root = null;
+      this.fallbackKeysWereUnsafe = false;
     }
     render() {
       const container = this.currentProps.render();
@@ -7776,13 +7894,9 @@ function createCompiledComponentWithFeatures(definition, runtimeFeatures) {
     }
     componentWillUnmount() {
       this.mounted = false;
-      this.root = null;
       this.dirtyState.clear();
       this.inputSelection = null;
       this.blockRefreshListeners.clear();
-      this.blockRoots.clear();
-      this.blockRootElements.clear();
-      this.bindingTargets.clear();
       this.bindingTargetRefs.clear();
       this.indexedDefinition = null;
       this.staticBindingsByDependency = [];