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

package/dist/compiler-runtime.d.mts

@@ -95,6 +95,23 @@ interface CompilerHostConditionalBlockProps {
     truthy?: CompilerHostConditionalBranch;
     falsy?: CompilerHostConditionalBranch;
 }
+interface CompilerConditionalRange {
+    /** Number of static direct host siblings between this slot and the previous slot. */
+    before: number;
+    test(): unknown;
+    /** Logical && can produce a visible number instead of an empty branch. */
+    logical?: boolean;
+    truthy?: CompilerHostConditionalBranch;
+    falsy?: CompilerHostConditionalBranch;
+}
+interface CompilerConditionalRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerConditionalRange[];
+    /** Number of static direct host siblings after the final conditional slot. */
+    trailing: number;
+}
 interface CompilerKeyedRowBinding {
     kind: "text" | "attribute" | "style";
     path: readonly number[];
@@ -111,6 +128,22 @@ interface CompilerKeyedRowsBlockProps {
     events?: readonly CompilerKeyedRowEvent[];
     conditionals?: readonly CompilerKeyedRowConditional[];
 }
+interface CompilerKeyedRange {
+    /** Number of static direct host siblings between this range and the previous range. */
+    before: number;
+    items(): Iterable<unknown> | null | undefined;
+    rowKey(item: unknown, index: number): React.Key;
+    create(item: unknown, index: number): CompilerKeyedRowElement;
+    bindings: readonly CompilerKeyedRowBinding[];
+}
+interface CompilerKeyedRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerKeyedRange[];
+    /** Number of static direct host siblings after the final keyed range. */
+    trailing: number;
+}
 interface CompilerComponentBlockProps {
     id: number;
     render(): React.ReactNode;
@@ -118,8 +151,10 @@ interface CompilerComponentBlockProps {
 interface CompilerBlockRuntime {
     Conditional: React.ComponentType<CompilerConditionalBlockProps>;
     HostConditional: React.ComponentType<CompilerHostConditionalBlockProps>;
+    ConditionalRanges: React.ComponentType<CompilerConditionalRangesBlockProps>;
     KeyedList: React.ComponentType<CompilerKeyedListBlockProps>;
     KeyedRows: React.ComponentType<CompilerKeyedRowsBlockProps>;
+    KeyedRanges: React.ComponentType<CompilerKeyedRangesBlockProps>;
     Component: React.ComponentType<CompilerComponentBlockProps>;
     target(id: number): React.RefCallback<Element>;
 }
@@ -143,4 +178,4 @@ interface CompiledComponentDefinition<Props> {
  */
 declare function createCompiledComponent<Props>(definition: CompiledComponentDefinition<Props>): React.ComponentType<Props>;
 
-export { type CompiledComponentDefinition, type CompilerAttributeBinding, type CompilerBinding, type CompilerBlockRuntime, type CompilerCell, type CompilerComponentBlockProps, type CompilerConditionalBlockBinding, type CompilerConditionalBlockProps, type CompilerHostConditionalBinding, type CompilerHostConditionalBlockProps, type CompilerHostConditionalBranch, type CompilerHostElement, type CompilerKeyedListBlockProps, type CompilerKeyedRowBinding, type CompilerKeyedRowConditional, type CompilerKeyedRowConditionalBranch, type CompilerKeyedRowElement, type CompilerKeyedRowEvent, type CompilerKeyedRowsBlockProps, type CompilerStateUpdater, type CompilerStyleBinding, type CompilerTextBinding, createCompiledComponent };
+export { type CompiledComponentDefinition, type CompilerAttributeBinding, type CompilerBinding, type CompilerBlockRuntime, type CompilerCell, type CompilerComponentBlockProps, type CompilerConditionalBlockBinding, type CompilerConditionalBlockProps, type CompilerConditionalRange, type CompilerConditionalRangesBlockProps, type CompilerHostConditionalBinding, type CompilerHostConditionalBlockProps, type CompilerHostConditionalBranch, type CompilerHostElement, type CompilerKeyedListBlockProps, type CompilerKeyedRange, type CompilerKeyedRangesBlockProps, type CompilerKeyedRowBinding, type CompilerKeyedRowConditional, type CompilerKeyedRowConditionalBranch, type CompilerKeyedRowElement, type CompilerKeyedRowEvent, type CompilerKeyedRowsBlockProps, type CompilerStateUpdater, type CompilerStyleBinding, type CompilerTextBinding, createCompiledComponent };

package/dist/compiler-runtime.d.ts

@@ -95,6 +95,23 @@ interface CompilerHostConditionalBlockProps {
     truthy?: CompilerHostConditionalBranch;
     falsy?: CompilerHostConditionalBranch;
 }
+interface CompilerConditionalRange {
+    /** Number of static direct host siblings between this slot and the previous slot. */
+    before: number;
+    test(): unknown;
+    /** Logical && can produce a visible number instead of an empty branch. */
+    logical?: boolean;
+    truthy?: CompilerHostConditionalBranch;
+    falsy?: CompilerHostConditionalBranch;
+}
+interface CompilerConditionalRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerConditionalRange[];
+    /** Number of static direct host siblings after the final conditional slot. */
+    trailing: number;
+}
 interface CompilerKeyedRowBinding {
     kind: "text" | "attribute" | "style";
     path: readonly number[];
@@ -111,6 +128,22 @@ interface CompilerKeyedRowsBlockProps {
     events?: readonly CompilerKeyedRowEvent[];
     conditionals?: readonly CompilerKeyedRowConditional[];
 }
+interface CompilerKeyedRange {
+    /** Number of static direct host siblings between this range and the previous range. */
+    before: number;
+    items(): Iterable<unknown> | null | undefined;
+    rowKey(item: unknown, index: number): React.Key;
+    create(item: unknown, index: number): CompilerKeyedRowElement;
+    bindings: readonly CompilerKeyedRowBinding[];
+}
+interface CompilerKeyedRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerKeyedRange[];
+    /** Number of static direct host siblings after the final keyed range. */
+    trailing: number;
+}
 interface CompilerComponentBlockProps {
     id: number;
     render(): React.ReactNode;
@@ -118,8 +151,10 @@ interface CompilerComponentBlockProps {
 interface CompilerBlockRuntime {
     Conditional: React.ComponentType<CompilerConditionalBlockProps>;
     HostConditional: React.ComponentType<CompilerHostConditionalBlockProps>;
+    ConditionalRanges: React.ComponentType<CompilerConditionalRangesBlockProps>;
     KeyedList: React.ComponentType<CompilerKeyedListBlockProps>;
     KeyedRows: React.ComponentType<CompilerKeyedRowsBlockProps>;
+    KeyedRanges: React.ComponentType<CompilerKeyedRangesBlockProps>;
     Component: React.ComponentType<CompilerComponentBlockProps>;
     target(id: number): React.RefCallback<Element>;
 }
@@ -143,4 +178,4 @@ interface CompiledComponentDefinition<Props> {
  */
 declare function createCompiledComponent<Props>(definition: CompiledComponentDefinition<Props>): React.ComponentType<Props>;
 
-export { type CompiledComponentDefinition, type CompilerAttributeBinding, type CompilerBinding, type CompilerBlockRuntime, type CompilerCell, type CompilerComponentBlockProps, type CompilerConditionalBlockBinding, type CompilerConditionalBlockProps, type CompilerHostConditionalBinding, type CompilerHostConditionalBlockProps, type CompilerHostConditionalBranch, type CompilerHostElement, type CompilerKeyedListBlockProps, type CompilerKeyedRowBinding, type CompilerKeyedRowConditional, type CompilerKeyedRowConditionalBranch, type CompilerKeyedRowElement, type CompilerKeyedRowEvent, type CompilerKeyedRowsBlockProps, type CompilerStateUpdater, type CompilerStyleBinding, type CompilerTextBinding, createCompiledComponent };
+export { type CompiledComponentDefinition, type CompilerAttributeBinding, type CompilerBinding, type CompilerBlockRuntime, type CompilerCell, type CompilerComponentBlockProps, type CompilerConditionalBlockBinding, type CompilerConditionalBlockProps, type CompilerConditionalRange, type CompilerConditionalRangesBlockProps, type CompilerHostConditionalBinding, type CompilerHostConditionalBlockProps, type CompilerHostConditionalBranch, type CompilerHostElement, type CompilerKeyedListBlockProps, type CompilerKeyedRange, type CompilerKeyedRangesBlockProps, type CompilerKeyedRowBinding, type CompilerKeyedRowConditional, type CompilerKeyedRowConditionalBranch, type CompilerKeyedRowElement, type CompilerKeyedRowEvent, type CompilerKeyedRowsBlockProps, type CompilerStateUpdater, type CompilerStyleBinding, type CompilerTextBinding, createCompiledComponent };

package/dist/compiler-runtime.mjs

@@ -504,6 +504,181 @@ function createHostConditionalBlockComponent(owner) {
   FarmHostConditionalBlock.displayName = "FarmCompiledHostConditional";
   return FarmHostConditionalBlock;
 }
+function createConditionalRangesBlockComponent(owner) {
+  class FarmConditionalRangesBlock extends React.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.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled conditional ranges ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.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);
@@ -900,6 +1075,219 @@ function createKeyedRowsBlockComponent(owner) {
   FarmKeyedRowsBlock.displayName = "FarmCompiledKeyedRows";
   return FarmKeyedRowsBlock;
 }
+function createKeyedRangesBlockComponent(owner) {
+  class FarmKeyedRangesBlock extends React.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.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled keyed ranges ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.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.Component {
     constructor() {
@@ -990,12 +1378,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)
         }),
@@ -1153,7 +1547,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.isValidElement(element) || typeof element.type !== "string") {
+      if (!React.isValidElement(element)) {
+        throw new TypeError(
+          `Compiled component ${currentDefinition.displayName} must return one host element.`
+        );
+      }
+      if (element.type === this.blockRuntime.KeyedRanges) {
+        return React.cloneElement(element, {
+          rootRef: this.captureRoot
+        });
+      }
+      if (element.type === this.blockRuntime.ConditionalRanges) {
+        return React.cloneElement(
+          element,
+          { rootRef: this.captureRoot }
+        );
+      }
+      if (typeof element.type !== "string") {
         throw new TypeError(
           `Compiled component ${currentDefinition.displayName} must return one host element.`
         );