@farm.js/react 0.1.0-beta.2 → 0.1.0-beta.3

package/README.md

@@ -62,7 +62,8 @@ The current compiler handles components that it can prove have:
 - optional synchronous `const` or function-declaration handlers used by JSX events;
 - state-driven text, attributes, per-property inline styles, and controlled form properties;
 - host-rooted `condition && <element>` and `condition ? <element> : <element>` child blocks at
-  statically known locations, including supported nested boundaries;
+  statically known locations, including direct ranges among static siblings and at the component
+  root;
 - item-keyed `collection.map(...)` children and explicit `List` boundaries at statically known
   container locations, including supported non-mutating collection pipelines;
 - inline synchronous events inside otherwise eligible host-only keyed rows;
@@ -73,8 +74,8 @@ The current compiler handles components that it can prove have:
 
 The generated component preserves React ownership of initial placement, props, events, SSR, and
 hydration. Local state cells batch updates into a microtask and patch only compiler-known DOM
-targets. Proven, dedicated host containers can transfer child ownership after mount for host-only
-conditional branches and non-interactive host-only keyed rows. An interactive row or a row with
+targets. Proven host containers can transfer child ownership after mount for host-only conditional
+branches and ranges, plus non-interactive host-only keyed rows. An interactive row or a row with
 local conditional slots uses a hybrid boundary instead: React retains its events, conditional
 Fibers, and structural reconciliation, while Farm patches same-key bindings and refreshes only
 changed row-local branches. React still creates or hydrates all initial DOM. Anything outside those
@@ -96,6 +97,26 @@ or hydration, a same-branch update patches those bindings without replacing the
 change creates, removes, or replaces only the selected branch. No marker node is added to SSR output.
 More complex conditional shapes keep the existing React-owned conditional boundary.
 
+Eligible direct conditionals can also share a host container with static host siblings:
+
+```tsx
+<article data-update={updates}>
+  <header>Status</header>
+  {loading && <p>Loading {updates}</p>}
+  <section>Stable content</section>
+  {enabled ? <strong>Enabled</strong> : <span>Disabled</span>}
+  <footer>Actions</footer>
+</article>
+```
+
+That `article` may be the component's exact returned root. Farm adopts the original container and
+counts its direct static elements as anchors for the conditional ranges. Same-branch bindings patch
+in place; branch changes insert, remove, or replace only their range. Multiple changed ranges use
+one state snapshot and reconcile from right to left, including when adjacent ranges are empty. The
+root and every unchanged static sibling keep their DOM identity, and no wrapper or marker is added.
+Branch events, components, fragments, refs, SVG, spreads, nested dynamic blocks, or another
+unsupported direct child keep the container on the React-owned path.
+
 For a common keyed map, no new API is required:
 
 ```tsx
@@ -290,14 +311,16 @@ Generated callback refs give directly patched host elements stable private targe
 React-owned component may therefore return `null`, a fragment, or multiple host nodes without
 shifting an unrelated compiler binding. These refs do not add attributes to SSR output.
 
-Conditional blocks have two safe ownership levels. A dedicated container with exactly one proven
-host-only conditional child can use compiler-owned branch instances. Events, keys, custom
-components, fragments, refs, SVG, attribute spreads, `dangerouslySetInnerHTML`, nested dynamic
-blocks, and static siblings in that container keep React ownership. The more general React-owned
-conditional path still accepts supported nested conditionals, keyed lists, and component islands.
-An empty ternary branch may be `null` or `false`. The inactive branch is described at build time but
-is never pre-mounted or cached. If a logical `&&` evaluates to a number such as `0`, the runtime also
-falls back to React so JavaScript and React rendering semantics remain exact.
+Conditional blocks have three safe ownership levels. One or more proven host-only direct branches
+may become compiler-owned ranges among static host siblings, including at the exact component root.
+A dedicated container with exactly one conditional child uses the smaller compiler-owned branch
+boundary. The more general React-owned conditional path accepts supported events, nested host
+conditionals, keyed lists, and component islands. Keys, custom components, fragments, refs, SVG,
+attribute spreads, `dangerouslySetInnerHTML`, nested dynamic blocks, and branch events keep React
+ownership. An empty ternary branch may be `null` or `false`. The inactive branch is described at
+build time but is never pre-mounted or cached. If a logical `&&` evaluates to a number such as `0`,
+or adopted DOM no longer matches its descriptor, the affected container remounts through React so
+JavaScript, hydration, and React rendering semantics remain exact.
 
 All component-level boundary types share one block graph and one ID sequence. A nested
 binding records its nearest conditional parent. If one state flush affects both an outer

package/dist/compiler-runtime.cjs

@@ -510,6 +510,181 @@ function createHostConditionalBlockComponent(owner) {
   FarmHostConditionalBlock.displayName = "FarmCompiledHostConditional";
   return FarmHostConditionalBlock;
 }
+function createConditionalRangesBlockComponent(owner) {
+  class FarmConditionalRangesBlock extends React__default.default.Component {
+    constructor() {
+      super(...arguments);
+      this.state = { fallback: false };
+      this.root = null;
+      this.mounted = false;
+      this.fallbackRequested = false;
+      this.fallbackVersion = 0;
+      this.propFallbackQueued = false;
+      this.currentProps = this.props;
+      this.rangeInstances = [];
+      this.staticSegments = [];
+      this.captureRoot = (root) => {
+        this.root = root;
+        this.currentProps.rootRef?.(root);
+      };
+      this.refresh = (afterCommit) => {
+        this.reconcile(afterCommit);
+      };
+    }
+    readSelections(props) {
+      const selections = [];
+      for (const range of props.ranges) {
+        const selection = hostConditionalSelection(range);
+        if (selection.kind === "fallback") return null;
+        selections.push(selection);
+      }
+      return selections;
+    }
+    adopt(props = this.currentProps) {
+      if (!this.root || !Number.isSafeInteger(props.trailing) || props.trailing < 0) return false;
+      const selections = this.readSelections(props);
+      if (!selections) return false;
+      const elements = [...this.root.children];
+      const staticSegments = [];
+      const instances = [];
+      let cursor = 0;
+      for (let rangeIndex = 0; rangeIndex < props.ranges.length; rangeIndex += 1) {
+        const range = props.ranges[rangeIndex];
+        if (!Number.isSafeInteger(range.before) || range.before < 0) return false;
+        const staticEnd = cursor + range.before;
+        if (staticEnd > elements.length) return false;
+        staticSegments.push(elements.slice(cursor, staticEnd));
+        cursor = staticEnd;
+        const selection = selections[rangeIndex];
+        if (selection.kind === "empty") {
+          instances.push(null);
+          continue;
+        }
+        const element = elements[cursor];
+        if (!element) return false;
+        const descriptor = selection.branch.create();
+        if (!matchesCompilerHostElement(element, descriptor)) return false;
+        instances.push({
+          key: selection.key,
+          host: {
+            element,
+            values: readHostConditionalBindingValues(selection.branch)
+          }
+        });
+        cursor += 1;
+      }
+      if (cursor + props.trailing !== elements.length) return false;
+      staticSegments.push(elements.slice(cursor));
+      this.staticSegments = staticSegments;
+      this.rangeInstances = instances;
+      return true;
+    }
+    anchorAfter(rangeIndex) {
+      for (let next = rangeIndex + 1; next < this.rangeInstances.length; next += 1) {
+        const staticAnchor = this.staticSegments[next]?.[0];
+        if (staticAnchor) return staticAnchor;
+        const rangeAnchor = this.rangeInstances[next]?.host.element;
+        if (rangeAnchor) return rangeAnchor;
+      }
+      return this.staticSegments[this.rangeInstances.length]?.[0] || null;
+    }
+    reconcileRange(rangeIndex, selection) {
+      if (!this.root) return;
+      const previous = this.rangeInstances[rangeIndex];
+      if (selection.kind === "empty") {
+        previous?.host.element.remove();
+        this.rangeInstances[rangeIndex] = null;
+        return;
+      }
+      if (previous?.key === selection.key) {
+        applyHostConditionalBindings(selection.branch, previous.host);
+        return;
+      }
+      const element = createCompilerHostElement(this.root.ownerDocument, selection.branch.create());
+      if (previous) previous.host.element.replaceWith(element);
+      else this.root.insertBefore(element, this.anchorAfter(rangeIndex));
+      this.rangeInstances[rangeIndex] = {
+        key: selection.key,
+        host: {
+          element,
+          values: readHostConditionalBindingValues(selection.branch)
+        }
+      };
+    }
+    reconcile(afterCommit) {
+      if (!this.mounted || !this.root) {
+        afterCommit?.();
+        return;
+      }
+      if (this.state.fallback) {
+        this.fallbackVersion += 1;
+        this.forceUpdate(afterCommit);
+        return;
+      }
+      if (this.currentProps.ranges.length !== this.rangeInstances.length) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      const selections = this.readSelections(this.currentProps);
+      if (!selections) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      for (let rangeIndex = this.rangeInstances.length - 1; rangeIndex >= 0; rangeIndex -= 1) {
+        this.reconcileRange(rangeIndex, selections[rangeIndex]);
+      }
+      afterCommit?.();
+    }
+    activateFallback(afterCommit) {
+      if (!this.mounted || this.state.fallback || this.fallbackRequested) {
+        afterCommit?.();
+        return;
+      }
+      this.fallbackRequested = true;
+      this.setState({ fallback: true }, afterCommit);
+    }
+    schedulePropFallback() {
+      if (this.propFallbackQueued) return;
+      this.propFallbackQueued = true;
+      queueMicrotask(() => {
+        this.propFallbackQueued = false;
+        if (this.mounted && !this.state.fallback) this.activateFallback();
+      });
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+      this.currentProps = nextProps;
+      if (nextState.fallback || this.state.fallback) return true;
+      this.schedulePropFallback();
+      return false;
+    }
+    componentDidMount() {
+      this.mounted = true;
+      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+      if (!this.adopt()) this.activateFallback();
+    }
+    componentWillUnmount() {
+      this.mounted = false;
+      this.unsubscribe?.();
+      this.root = null;
+      this.rangeInstances = [];
+      this.staticSegments = [];
+    }
+    render() {
+      const container = this.currentProps.render();
+      if (!React__default.default.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled conditional ranges ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React__default.default.cloneElement(container, {
+        key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
+        ref: this.captureRoot
+      });
+    }
+  }
+  FarmConditionalRangesBlock.displayName = "FarmCompiledConditionalRanges";
+  return FarmConditionalRangesBlock;
+}
 function longestIncreasingSubsequencePositions(sequence) {
   const tails = [];
   const previous = Array.from({ length: sequence.length }, () => -1);
@@ -1209,6 +1384,9 @@ function createCompiledComponent(definition) {
         HostConditional: createHostConditionalBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
+        ConditionalRanges: createConditionalRangesBlockComponent({
+          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        }),
         KeyedList: createKeyedListBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
@@ -1385,6 +1563,12 @@ function createCompiledComponent(definition) {
           rootRef: this.captureRoot
         });
       }
+      if (element.type === this.blockRuntime.ConditionalRanges) {
+        return React__default.default.cloneElement(
+          element,
+          { rootRef: this.captureRoot }
+        );
+      }
       if (typeof element.type !== "string") {
         throw new TypeError(
           `Compiled component ${currentDefinition.displayName} must return one host element.`