@farm.js/react 0.1.0-beta.1 → 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
@@ -188,11 +209,68 @@ and unproven calls use the original React fallback.
 `toSorted` and `toReversed` are emitted as standard runtime calls rather than polyfilled. Configure
 the TypeScript `lib` with ES2023 and target a runtime that supports them when using those methods.
 
-React remains the fallback and compatibility boundary. A map beside static children, a row with a
-non-inline or async handler, a controlled interactive form field, a fragment, a ref, a custom
-component, or a conditional mixed directly beside other children in the same host slot uses the
-existing React-owned keyed boundary. The outer compiled component can still be skipped, but React
-reconciles that list's rows and owns their events, lifecycle, and state.
+React remains the fallback and compatibility boundary. An interactive map beside static children,
+a non-host sibling between ranges, a row with a non-inline or async handler, a file input or dynamic
+form control shape, a fragment, a ref, a custom component, or a conditional mixed directly beside
+other children in the same host slot uses the existing React-owned keyed boundary. The outer
+compiled component can still be skipped, but React reconciles that list's rows and owns their
+events, lifecycle, and state.
+
+Non-interactive host maps can share a nested or component-root container with static host siblings:
+
+```tsx
+<ul>
+  <li>Primary</li>
+  {primary.map((item) => (
+    <li key={item.id}>{item.label}</li>
+  ))}
+  <li>Secondary</li>
+  {secondary.map((item) => (
+    <li key={item.id}>{item.label}</li>
+  ))}
+  <li>{primary.length + secondary.length} total</li>
+</ul>
+```
+
+The compiler emits one range block for that host container. React renders and hydrates the original
+markup. After mount, Farm records the static element segments and reconciles each keyed range with
+its own row table and LIS pass. It does not add wrappers or hydration markers. When the container is
+the component root, the block forwards that exact host element to the outer binding runtime, so
+root attributes and styles keep updating normally. A root with one eligible map or `List` also
+works without static siblings. Direct children must be host elements or eligible ranges; events,
+controlled rows, row conditionals, components, fragments, and nested dynamic structures keep the
+React boundary. Duplicate keys, an adoption shape mismatch, or a parent-driven static markup change
+remounts the complete container through React.
+
+Controlled host fields can use the hybrid keyed-row path:
+
+```tsx
+<ul>
+  {items.map((item) => (
+    <li key={item.id}>
+      <input
+        value={item.label}
+        onChange={(event) =>
+          setItems((current) =>
+            current.map((row) =>
+              row.id === item.id ? { ...row, label: event.currentTarget.value } : row,
+            ),
+          )
+        }
+      />
+      <input type="checkbox" checked={item.done} onChange={/* keyed update */} />
+    </li>
+  ))}
+</ul>
+```
+
+React owns the controls, events, hydration, and every structural commit. Farm patches `value`,
+`checked`, selected options, and dependent row bindings by stable key. It preserves focused text
+selection and leaves composition events on React. When `event.currentTarget` is referenced inside
+a queued functional compiler-state updater, generated code snapshots the referenced property while
+the handler is active. Static input types and static option attributes are required. File inputs,
+dynamic types or options, `contentEditable`, refs, custom controls, textarea children beside
+`value`, and async or non-inline handlers keep the React fallback.
 
 For custom rows or an explicit key selector, use the public component:
 
@@ -233,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
@@ -276,8 +356,9 @@ assertion; it is not presented as a cross-machine timing benchmark.
 Application and prototype calls, dynamic style objects, handlers outside JSX events, nested,
 computed, and rest props patterns, async handlers, unkeyed or index-keyed lists, chained maps,
 unsupported conditional roots, effects, and more advanced hook support intentionally stay on React
-in this release. Compiler-owned keyed rows are limited to a dedicated container with one host-only
-map or `List`. Inline synchronous events and dedicated row-local host conditional slots can use the
-hybrid keyed-row path, but branch events, nested dynamic blocks, conditionals mixed with siblings in
-one slot, non-inline or async row handlers, controlled interactive row forms, custom components,
+in this release. Compiler-owned keyed rows support either one dedicated host-only map/`List` or
+one or more non-interactive ranges in a nested or component-root host container. Inline synchronous
+events and dedicated row-local host conditional slots can use the single-list hybrid path, but
+branch events, interactive ranges beside siblings, nested dynamic blocks, conditionals mixed with
+siblings in one slot, non-inline or async row handlers, unsupported form shapes, custom components,
 fragments, refs, SVG, and duplicate runtime keys keep or switch to React ownership.

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);
@@ -906,6 +1081,219 @@ function createKeyedRowsBlockComponent(owner) {
   FarmKeyedRowsBlock.displayName = "FarmCompiledKeyedRows";
   return FarmKeyedRowsBlock;
 }
+function createKeyedRangesBlockComponent(owner) {
+  class FarmKeyedRangesBlock 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);
+      };
+    }
+    readRange(range) {
+      const source = range.items();
+      const items = source ? Array.from(source) : [];
+      const keys = items.map((item, index) => keyedRowIdentity(range.rowKey(item, index)));
+      if (new Set(keys).size !== keys.length) return null;
+      return { items, keys };
+    }
+    readRanges(props) {
+      const ranges = [];
+      for (const range of props.ranges) {
+        const rows = this.readRange(range);
+        if (!rows) return null;
+        ranges.push(rows);
+      }
+      return ranges;
+    }
+    adopt(props = this.currentProps) {
+      if (!this.root || !Number.isSafeInteger(props.trailing) || props.trailing < 0) return false;
+      const rowsByRange = this.readRanges(props);
+      if (!rowsByRange) return false;
+      const elements = [...this.root.children];
+      const staticSegments = [];
+      const instancesByRange = [];
+      let cursor = 0;
+      for (let rangeIndex = 0; rangeIndex < props.ranges.length; rangeIndex += 1) {
+        const range = props.ranges[rangeIndex];
+        const rows = rowsByRange[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 rowEnd = cursor + rows.items.length;
+        if (rowEnd > elements.length) return false;
+        const instances = /* @__PURE__ */ new Map();
+        for (let index = 0; index < rows.items.length; index += 1) {
+          const element = elements[cursor + index];
+          if (!matchesCompilerHostElement(element, range.create(rows.items[index], index))) {
+            return false;
+          }
+          instances.set(rows.keys[index], {
+            key: rows.keys[index],
+            element,
+            values: readKeyedRowBindingValues(range, rows.items[index], index),
+            item: rows.items[index],
+            index,
+            conditionalValues: /* @__PURE__ */ new Map()
+          });
+        }
+        instancesByRange.push(instances);
+        cursor = rowEnd;
+      }
+      if (cursor + props.trailing !== elements.length) return false;
+      staticSegments.push(elements.slice(cursor));
+      this.staticSegments = staticSegments;
+      this.rangeInstances = instancesByRange;
+      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 rowAnchor = this.rangeInstances[next].values().next().value?.element;
+        if (rowAnchor) return rowAnchor;
+      }
+      return this.staticSegments[this.rangeInstances.length]?.[0] || null;
+    }
+    reconcileRange(rangeIndex, rows) {
+      if (!this.root) return;
+      const range = this.currentProps.ranges[rangeIndex];
+      const previous = this.rangeInstances[rangeIndex];
+      const oldIndices = /* @__PURE__ */ new Map();
+      [...previous.keys()].forEach((key, index) => oldIndices.set(key, index));
+      const nextKeys = new Set(rows.keys);
+      for (const [key, instance] of previous) {
+        if (!nextKeys.has(key)) instance.element.remove();
+      }
+      const sequence = rows.keys.map((key) => oldIndices.get(key) ?? -1);
+      const stablePositions = longestIncreasingSubsequencePositions(sequence);
+      const nextInstances = [];
+      for (let index = 0; index < rows.items.length; index += 1) {
+        const key = rows.keys[index];
+        const existing = previous.get(key);
+        if (existing) {
+          applyKeyedRowBindings(range, existing, rows.items[index], index);
+          existing.item = rows.items[index];
+          existing.index = index;
+          nextInstances.push(existing);
+          continue;
+        }
+        const element = createCompilerHostElement(
+          this.root.ownerDocument,
+          range.create(rows.items[index], index)
+        );
+        nextInstances.push({
+          key,
+          element,
+          values: readKeyedRowBindingValues(range, rows.items[index], index),
+          item: rows.items[index],
+          index,
+          conditionalValues: /* @__PURE__ */ new Map()
+        });
+      }
+      let anchor = this.anchorAfter(rangeIndex);
+      for (let index = nextInstances.length - 1; index >= 0; index -= 1) {
+        const instance = nextInstances[index];
+        if (sequence[index] < 0) {
+          this.root.insertBefore(instance.element, anchor);
+        } else if (!stablePositions.has(index) && instance.element.nextSibling !== anchor) {
+          this.root.insertBefore(instance.element, anchor);
+        }
+        anchor = instance.element;
+      }
+      this.rangeInstances[rangeIndex] = new Map(
+        nextInstances.map((instance) => [instance.key, instance])
+      );
+    }
+    reconcile(afterCommit) {
+      if (!this.mounted || !this.root) {
+        afterCommit?.();
+        return;
+      }
+      if (this.state.fallback) {
+        this.fallbackVersion += 1;
+        this.forceUpdate(afterCommit);
+        return;
+      }
+      const rowsByRange = this.readRanges(this.currentProps);
+      if (!rowsByRange || rowsByRange.length !== this.rangeInstances.length) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      const activeElement = this.root.ownerDocument.activeElement;
+      const restoreFocus = Boolean(activeElement && this.root.contains(activeElement));
+      for (let rangeIndex = rowsByRange.length - 1; rangeIndex >= 0; rangeIndex -= 1) {
+        this.reconcileRange(rangeIndex, rowsByRange[rangeIndex]);
+      }
+      if (restoreFocus && activeElement?.isConnected && activeElement.ownerDocument.activeElement !== activeElement && "focus" in activeElement) {
+        activeElement.focus({ preventScroll: true });
+      }
+      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 keyed 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
+      });
+    }
+  }
+  FarmKeyedRangesBlock.displayName = "FarmCompiledKeyedRanges";
+  return FarmKeyedRangesBlock;
+}
 function createComponentBlockComponent(owner) {
   class FarmComponentBlock extends React__default.default.Component {
     constructor() {
@@ -996,12 +1384,18 @@ 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)
         }),
         KeyedRows: createKeyedRowsBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
+        KeyedRanges: createKeyedRangesBlockComponent({
+          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        }),
         Component: createComponentBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
@@ -1159,7 +1553,23 @@ function createCompiledComponent(definition) {
       if (this.hasBindingError) throw this.bindingError;
       const currentDefinition = definitionReference.current;
       const element = currentDefinition.render(this.props, this.cells, this.blockRuntime);
-      if (!React__default.default.isValidElement(element) || typeof element.type !== "string") {
+      if (!React__default.default.isValidElement(element)) {
+        throw new TypeError(
+          `Compiled component ${currentDefinition.displayName} must return one host element.`
+        );
+      }
+      if (element.type === this.blockRuntime.KeyedRanges) {
+        return React__default.default.cloneElement(element, {
+          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.`
         );