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

package/dist/compiler-runtime.d.mts

@@ -335,8 +335,10 @@ interface CompiledComponentDefinition<Props> {
 }
 type CompilerBlockRefresh = (afterCommit?: () => void, dirtyState?: ReadonlySet<number>) => void;
 interface CompilerRuntimeFeatureOwner {
-    setRoot(id: number, root: Element | null): void;
+    setRoot(id: number, root: Element | null, expectedRoot?: Element | null): void;
     subscribe(id: number, refresh: CompilerBlockRefresh): () => void;
+    /** Opaque identity used to detect compatible definition replacement. */
+    getDefinitionVersion?(): unknown;
 }
 interface CompilerRuntimeFeature {
     /** Stable identity used by Fast Refresh compatibility checks. */

package/dist/compiler-runtime.d.ts

@@ -335,8 +335,10 @@ interface CompiledComponentDefinition<Props> {
 }
 type CompilerBlockRefresh = (afterCommit?: () => void, dirtyState?: ReadonlySet<number>) => void;
 interface CompilerRuntimeFeatureOwner {
-    setRoot(id: number, root: Element | null): void;
+    setRoot(id: number, root: Element | null, expectedRoot?: Element | null): void;
     subscribe(id: number, refresh: CompilerBlockRefresh): () => void;
+    /** Opaque identity used to detect compatible definition replacement. */
+    getDefinitionVersion?(): unknown;
 }
 interface CompilerRuntimeFeature {
     /** Stable identity used by Fast Refresh compatibility checks. */

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() {
@@ -3251,6 +3265,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 +3314,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 +3333,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 +3412,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 +3502,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 +3569,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();
       };
@@ -3582,14 +3624,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) {
@@ -3684,6 +3727,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 +3751,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 +5578,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 +5957,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 +5977,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 +5986,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 +6414,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 +6444,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 +6452,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 +6513,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 +6551,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 +6583,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 +6684,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 +6706,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 +6721,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 +6776,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 +6850,9 @@ function createMixedRangesBlockComponent(owner) {
         controller.cleanup();
         throw error;
       }
+      const previous = this.controller;
       this.controller = controller;
+      previous?.cleanup();
       return true;
     }
     schedulePropFallback() {
@@ -6751,11 +6864,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 +6882,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 +7729,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 +7870,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);