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

package/README.md

@@ -41,9 +41,9 @@ automatic and does not add a configuration option or asynchronous runtime loadin
 definitions, while generated code uses the tree-shakable feature entry.
 
 The persisted production-size fixtures and regression gate live in
-[`RUNTIME_SIZE_RESULTS.md`](./RUNTIME_SIZE_RESULTS.md). The recorded direct-only runtime premium is
-82.6% smaller than the complete compatibility runtime premium; the feature-heavy keyed benchmark
-application removes 6,185 gzip bytes from its previous compiler-on build.
+[`RUNTIME_SIZE_RESULTS.md`](./RUNTIME_SIZE_RESULTS.md). The recorded compiler-selected core runtime
+premium is 85.4% smaller than the complete compatibility runtime premium; the feature-heavy keyed
+benchmark application removes 6,185 gzip bytes from its previous compiler-on build.
 
 For selective adoption, use annotation mode:
 

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,7 +1774,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() {
@@ -3257,6 +3271,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();
@@ -3305,6 +3320,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;
@@ -3323,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;
@@ -3401,35 +3418,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();
@@ -3468,6 +3508,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();
@@ -3534,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();
       };
@@ -3588,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) {
@@ -3690,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?.();
@@ -3706,30 +3757,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();
@@ -5518,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();
@@ -5896,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;
         }
@@ -5915,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(
@@ -5924,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);
@@ -6350,17 +6420,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();
@@ -6368,7 +6450,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;
       }
@@ -6376,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();
@@ -6431,6 +6519,7 @@ function createKeyedRangesBlockComponent(owner) {
       this.rangeInstances = [];
       this.staticSegments = [];
       this.staticValues = [];
+      this.definitionVersion = owner.getDefinitionVersion?.();
       this.captureRoot = (root) => {
         this.root = root;
         this.currentProps.rootRef?.(root);
@@ -6468,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];
@@ -6499,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) {
@@ -6602,6 +6690,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?.();
@@ -6616,10 +6712,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();
@@ -6627,17 +6727,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;
@@ -6672,6 +6782,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);
@@ -6745,7 +6856,9 @@ function createMixedRangesBlockComponent(owner) {
         controller.cleanup();
         throw error;
       }
+      const previous = this.controller;
       this.controller = controller;
+      previous?.cleanup();
       return true;
     }
     schedulePropFallback() {
@@ -6757,11 +6870,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;
     }
@@ -6773,7 +6888,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;
@@ -7613,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)
@@ -7753,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);