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

package/dist/compiler-runtime.mjs

@@ -1,30 +1,156 @@
 import React from 'react';
+import { flushSync } from 'react-dom';
 
 // src/compiler-runtime.tsx
+var COMPILER_HMR_REGISTRY = /* @__PURE__ */ Symbol.for("@farm.js/react/compiler-hmr-registry");
+function getCompilerHmrRegistry() {
+  const globalTarget = globalThis;
+  const existing = globalTarget[COMPILER_HMR_REGISTRY];
+  if (existing instanceof Map) return existing;
+  const registry = /* @__PURE__ */ new Map();
+  globalTarget[COMPILER_HMR_REGISTRY] = registry;
+  return registry;
+}
 function renderTextValue(value) {
   if (Array.isArray(value)) return value.map(renderTextValue).join("");
   if (value === null || value === void 0 || typeof value === "boolean") return "";
   return String(value);
 }
-function findBindingTarget(root, path) {
+function findBindingTarget(root, path, blockRoots) {
   let current = root;
   for (const index of path) {
-    current = current?.children.item(index) || null;
+    if (!current) return null;
+    current = [...current.children].filter((child) => !blockRoots.has(child))[index] || null;
   }
   return current;
 }
+var UNITLESS_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexNegative",
+  "flexOrder",
+  "flexPositive",
+  "flexShrink",
+  "fontWeight",
+  "gridArea",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth"
+]);
+function unprefixedStyleName(name) {
+  const unprefixed = name.replace(/^(?:Webkit|Moz|ms|O)(?=[A-Z])/, "");
+  return unprefixed ? unprefixed[0].toLowerCase() + unprefixed.slice(1) : name;
+}
+function isHtmlOrSvgElement(element) {
+  const view = element.ownerDocument.defaultView;
+  return Boolean(
+    view && (element instanceof view.HTMLElement || element instanceof view.SVGElement)
+  );
+}
+function isInputElement(element) {
+  const view = element.ownerDocument.defaultView;
+  return Boolean(view && element instanceof view.HTMLInputElement);
+}
+function isTextAreaElement(element) {
+  const view = element.ownerDocument.defaultView;
+  return Boolean(view && element instanceof view.HTMLTextAreaElement);
+}
+function isSelectElement(element) {
+  const view = element.ownerDocument.defaultView;
+  return Boolean(view && element instanceof view.HTMLSelectElement);
+}
+function isOptionElement(element) {
+  const view = element.ownerDocument.defaultView;
+  return Boolean(view && element instanceof view.HTMLOptionElement);
+}
+function isSelectableTextControl(element) {
+  return Boolean(element && (isInputElement(element) || isTextAreaElement(element)));
+}
+function updateStyle(element, name, value) {
+  if (!isHtmlOrSvgElement(element)) return;
+  const customProperty = name.startsWith("--");
+  let nextValue = "";
+  if (value !== null && value !== void 0 && typeof value !== "boolean" && value !== "") {
+    nextValue = typeof value === "number" && value !== 0 && !customProperty && !UNITLESS_STYLE_PROPERTIES.has(unprefixedStyleName(name)) ? `${value}px` : String(value).trim();
+  }
+  if (customProperty || name.includes("-")) {
+    element.style.setProperty(name, nextValue);
+  } else {
+    element.style[name] = nextValue;
+  }
+}
+function updateSelectValue(element, value) {
+  const options = [...element.options];
+  if (element.multiple) {
+    const selected = new Set(
+      (Array.isArray(value) ? value : value === null || value === void 0 ? [] : [value]).map(
+        String
+      )
+    );
+    for (const option of options) option.selected = selected.has(option.value);
+    return;
+  }
+  const selectedValue = value === null || value === void 0 ? "" : String(value);
+  let fallback;
+  for (const option of options) {
+    if (!option.disabled && !fallback) fallback = option;
+    if (option.value === selectedValue) {
+      option.selected = true;
+      return;
+    }
+  }
+  if (fallback) fallback.selected = true;
+}
 function updateAttribute(element, name, value) {
   const attributeName = name === "className" ? "class" : name === "htmlFor" ? "for" : name;
   const stringifiesBoolean = attributeName.startsWith("data-") || attributeName.startsWith("aria-");
-  if (name === "value" && element instanceof HTMLInputElement) {
-    element.value = value === null || value === void 0 ? "" : String(value);
+  if (name === "value" && (isInputElement(element) || isTextAreaElement(element))) {
+    const nextValue = value === null || value === void 0 ? "" : String(value);
+    if (element.value !== nextValue) element.value = nextValue;
     return;
   }
-  if (name === "checked" && element instanceof HTMLInputElement) {
+  if (name === "value" && isSelectElement(element)) {
+    updateSelectValue(element, value);
+    return;
+  }
+  if (name === "checked" && isInputElement(element)) {
     element.checked = Boolean(value);
     return;
   }
-  if (name === "selected" && element instanceof HTMLOptionElement) {
+  if (name === "selected" && isOptionElement(element)) {
     element.selected = Boolean(value);
     return;
   }
@@ -40,18 +166,1017 @@ function updateAttribute(element, name, value) {
     element.setAttribute(attributeName, String(value));
   }
 }
+function createConditionalBlockComponent(owner) {
+  class FarmConditionalBlock extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.captureRoot = (root) => {
+        owner.setRoot(this.props.id, root);
+      };
+      this.refresh = (afterCommit) => {
+        this.forceUpdate(afterCommit);
+      };
+    }
+    subscribe() {
+      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+    }
+    componentDidMount() {
+      this.subscribe();
+    }
+    componentDidUpdate(previous) {
+      if (previous.id === this.props.id) return;
+      this.unsubscribe?.();
+      owner.setRoot(previous.id, null);
+      this.subscribe();
+    }
+    componentWillUnmount() {
+      this.unsubscribe?.();
+      owner.setRoot(this.props.id, null);
+    }
+    render() {
+      const node = this.props.render();
+      if (!React.isValidElement(node)) {
+        if (node === null || node === void 0 || typeof node === "boolean" || typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
+          return node;
+        }
+        throw new TypeError(
+          `Compiled conditional block ${this.props.id} must return one host element or an empty value.`
+        );
+      }
+      if (typeof node.type !== "string") {
+        throw new TypeError(
+          `Compiled conditional block ${this.props.id} must return one host element.`
+        );
+      }
+      return React.cloneElement(node, {
+        ref: this.captureRoot
+      });
+    }
+  }
+  FarmConditionalBlock.displayName = "FarmCompiledConditionalBlock";
+  return FarmConditionalBlock;
+}
+function createKeyedListBlockComponent(owner) {
+  class FarmKeyedListBlock extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.refresh = (afterCommit) => {
+        this.forceUpdate(afterCommit);
+      };
+    }
+    subscribe() {
+      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+    }
+    componentDidMount() {
+      this.subscribe();
+    }
+    componentDidUpdate(previous) {
+      if (previous.id === this.props.id) return;
+      this.unsubscribe?.();
+      this.subscribe();
+    }
+    componentWillUnmount() {
+      this.unsubscribe?.();
+    }
+    render() {
+      return this.props.render();
+    }
+  }
+  FarmKeyedListBlock.displayName = "FarmCompiledKeyedListBlock";
+  return FarmKeyedListBlock;
+}
+function isCompilerHostElement(value) {
+  return typeof value === "object" && value !== null && value.kind === "element";
+}
+function createCompilerHostElement(document, descriptor) {
+  const element = document.createElement(descriptor.tag);
+  for (const attribute of descriptor.attributes) {
+    updateAttribute(element, attribute.name, attribute.value);
+  }
+  for (const style of descriptor.styles) updateStyle(element, style.name, style.value);
+  for (const child of descriptor.children) {
+    if (isCompilerHostElement(child)) {
+      element.append(createCompilerHostElement(document, child));
+      continue;
+    }
+    const text = renderTextValue(child);
+    if (text) element.append(document.createTextNode(text));
+  }
+  for (const attribute of descriptor.attributes) {
+    if (attribute.name === "value" && (isSelectElement(element) || isTextAreaElement(element))) {
+      updateAttribute(element, attribute.name, attribute.value);
+    }
+  }
+  return element;
+}
+function matchesCompilerHostElement(element, descriptor, opaquePaths = /* @__PURE__ */ new Set(), path = []) {
+  if (element.tagName.toLowerCase() !== descriptor.tag.toLowerCase()) return false;
+  if (opaquePaths.has(path.join("."))) return true;
+  const expectedChildren = descriptor.children.filter(isCompilerHostElement);
+  if (element.children.length !== expectedChildren.length) return false;
+  return expectedChildren.every(
+    (child, index) => matchesCompilerHostElement(element.children[index], child, opaquePaths, [...path, index])
+  );
+}
+function findCompilerHostTarget(root, path) {
+  let current = root;
+  for (const index of path) current = current?.children[index] || null;
+  return current;
+}
+var UNSET_KEYED_ROW_BINDING = /* @__PURE__ */ Symbol("unset interactive keyed-row binding");
+function keyedRowIdentity(key) {
+  return String(key);
+}
+function normalizedKeyedRowBindingValue(binding, value) {
+  return binding.kind === "text" ? renderTextValue(value) : value;
+}
+function readKeyedRowBindingValues(props, item, index) {
+  return props.bindings.map(
+    (binding) => normalizedKeyedRowBindingValue(binding, binding.read(item, index))
+  );
+}
+function applyKeyedRowBindings(props, instance, item, index) {
+  for (let bindingIndex = 0; bindingIndex < props.bindings.length; bindingIndex += 1) {
+    const binding = props.bindings[bindingIndex];
+    const rawValue = binding.read(item, index);
+    const value = normalizedKeyedRowBindingValue(binding, rawValue);
+    if (Object.is(instance.values[bindingIndex], value)) continue;
+    instance.values[bindingIndex] = value;
+    const target = findCompilerHostTarget(instance.element, binding.path);
+    if (!target) continue;
+    if (binding.kind === "text") {
+      target.textContent = value;
+    } else if (binding.kind === "style" && binding.name) {
+      updateStyle(target, binding.name, rawValue);
+    } else if (binding.kind === "attribute" && binding.name) {
+      updateAttribute(target, binding.name, rawValue);
+    }
+  }
+}
+function keyedRowConditionalSnapshot(conditional, item, index) {
+  const test = conditional.test(item, index);
+  if (conditional.logical && !test) {
+    return typeof test === "number" || typeof test === "bigint" ? ["primitive", test] : ["empty"];
+  }
+  const key = test ? "truthy" : "falsy";
+  const branch = key === "truthy" ? conditional.truthy : conditional.falsy;
+  if (!branch) return ["empty"];
+  return [
+    key,
+    ...branch.bindings.map(
+      (binding) => normalizedKeyedRowBindingValue(binding, binding.read(item, index))
+    )
+  ];
+}
+function readKeyedRowConditionalValues(props, item, index) {
+  return new Map(
+    (props.conditionals || []).map((conditional) => [
+      conditional.id,
+      keyedRowConditionalSnapshot(conditional, item, index)
+    ])
+  );
+}
+function keyedRowConditionalChanged(previous, next) {
+  return !previous || previous.length !== next.length || next.some((value, index) => !Object.is(value, previous[index]));
+}
+function hostConditionalSelection(props) {
+  const test = props.test();
+  if (props.logical && !test) {
+    if (typeof test === "number" || typeof test === "bigint") return { kind: "fallback" };
+    return { kind: "empty" };
+  }
+  const key = test ? "truthy" : "falsy";
+  const branch = key === "truthy" ? props.truthy : props.falsy;
+  return branch ? { kind: "branch", key, branch } : { kind: "empty" };
+}
+function normalizedHostConditionalBindingValue(binding, value) {
+  return binding.kind === "text" ? renderTextValue(value) : value;
+}
+function readHostConditionalBindingValues(branch) {
+  return branch.bindings.map(
+    (binding) => normalizedHostConditionalBindingValue(binding, binding.read())
+  );
+}
+function applyHostConditionalBindings(branch, instance) {
+  for (let bindingIndex = 0; bindingIndex < branch.bindings.length; bindingIndex += 1) {
+    const binding = branch.bindings[bindingIndex];
+    const rawValue = binding.read();
+    const value = normalizedHostConditionalBindingValue(binding, rawValue);
+    if (Object.is(instance.values[bindingIndex], value)) continue;
+    instance.values[bindingIndex] = value;
+    const target = findCompilerHostTarget(instance.element, binding.path);
+    if (!target) continue;
+    if (binding.kind === "text") {
+      target.textContent = value;
+    } else if (binding.kind === "style" && binding.name) {
+      updateStyle(target, binding.name, rawValue);
+    } else if (binding.kind === "attribute" && binding.name) {
+      updateAttribute(target, binding.name, rawValue);
+    }
+  }
+}
+function createHostConditionalBlockComponent(owner) {
+  class FarmHostConditionalBlock extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.state = { fallback: false };
+      this.root = null;
+      this.mounted = false;
+      this.fallbackRequested = false;
+      this.fallbackVersion = 0;
+      this.propSyncQueued = false;
+      this.currentProps = this.props;
+      this.activeBranch = null;
+      this.instance = null;
+      this.captureRoot = (root) => {
+        this.root = root;
+      };
+      this.refresh = (afterCommit) => {
+        this.reconcile(afterCommit);
+      };
+    }
+    adopt() {
+      if (!this.root) return false;
+      const selection = hostConditionalSelection(this.currentProps);
+      if (selection.kind === "fallback") return false;
+      if (selection.kind === "empty") {
+        if (this.root.childNodes.length !== 0) return false;
+        this.activeBranch = null;
+        this.instance = null;
+        return true;
+      }
+      if (this.root.childNodes.length !== 1 || this.root.firstElementChild === null || this.root.firstElementChild !== this.root.firstChild) {
+        return false;
+      }
+      const descriptor = selection.branch.create();
+      const element = this.root.firstElementChild;
+      if (!matchesCompilerHostElement(element, descriptor)) return false;
+      this.activeBranch = selection.key;
+      this.instance = {
+        element,
+        values: readHostConditionalBindingValues(selection.branch)
+      };
+      return true;
+    }
+    activateFallback(afterCommit) {
+      if (!this.mounted || this.state.fallback || this.fallbackRequested) {
+        afterCommit?.();
+        return;
+      }
+      this.fallbackRequested = true;
+      this.fallbackVersion += 1;
+      this.setState({ fallback: true }, afterCommit);
+    }
+    reconcile(afterCommit) {
+      if (!this.mounted || !this.root) {
+        afterCommit?.();
+        return;
+      }
+      if (this.state.fallback) {
+        this.forceUpdate(afterCommit);
+        return;
+      }
+      const selection = hostConditionalSelection(this.currentProps);
+      if (selection.kind === "fallback") {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      if (selection.kind === "empty") {
+        if (this.instance) this.instance.element.remove();
+        this.activeBranch = null;
+        this.instance = null;
+        afterCommit?.();
+        return;
+      }
+      if (this.activeBranch === selection.key && this.instance) {
+        applyHostConditionalBindings(selection.branch, this.instance);
+        afterCommit?.();
+        return;
+      }
+      const element = createCompilerHostElement(this.root.ownerDocument, selection.branch.create());
+      this.root.replaceChildren(element);
+      this.activeBranch = selection.key;
+      this.instance = {
+        element,
+        values: readHostConditionalBindingValues(selection.branch)
+      };
+      afterCommit?.();
+    }
+    schedulePropSync() {
+      if (this.propSyncQueued) return;
+      this.propSyncQueued = true;
+      queueMicrotask(() => {
+        this.propSyncQueued = false;
+        if (this.mounted && !this.state.fallback) this.reconcile();
+      });
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+      this.currentProps = nextProps;
+      if (nextState.fallback || this.state.fallback) return true;
+      this.schedulePropSync();
+      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.activeBranch = null;
+      this.instance = null;
+    }
+    render() {
+      const container = this.currentProps.render();
+      if (!React.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled host conditional ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.cloneElement(container, {
+        key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
+        ref: this.captureRoot
+      });
+    }
+  }
+  FarmHostConditionalBlock.displayName = "FarmCompiledHostConditional";
+  return FarmHostConditionalBlock;
+}
+function longestIncreasingSubsequencePositions(sequence) {
+  const tails = [];
+  const previous = Array.from({ length: sequence.length }, () => -1);
+  for (let index = 0; index < sequence.length; index += 1) {
+    if (sequence[index] < 0) continue;
+    let low = 0;
+    let high = tails.length;
+    while (low < high) {
+      const middle = low + high >> 1;
+      if (sequence[tails[middle]] < sequence[index]) low = middle + 1;
+      else high = middle;
+    }
+    if (low > 0) previous[index] = tails[low - 1];
+    tails[low] = index;
+  }
+  const positions = /* @__PURE__ */ new Set();
+  let cursor = tails.at(-1) ?? -1;
+  while (cursor >= 0) {
+    positions.add(cursor);
+    cursor = previous[cursor];
+  }
+  return positions;
+}
+function createKeyedRowsBlockComponent(owner) {
+  class FarmKeyedRowConditional extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.state = {
+        renderVersion: this.props.renderVersion,
+        item: this.props.item,
+        index: this.props.index
+      };
+      this.refresh = (item, index, afterCommit) => {
+        this.setState({ item, index }, afterCommit);
+      };
+    }
+    static getDerivedStateFromProps(props, state) {
+      if (props.renderVersion === state.renderVersion) return null;
+      return {
+        renderVersion: props.renderVersion,
+        item: props.item,
+        index: props.index
+      };
+    }
+    subscribe() {
+      this.unsubscribe = this.props.owner.subscribe(this.props.rowKey, this.props.id, this.refresh);
+    }
+    componentDidMount() {
+      this.subscribe();
+    }
+    componentDidUpdate(previous) {
+      if (previous.owner === this.props.owner && previous.rowKey === this.props.rowKey && previous.id === this.props.id) {
+        return;
+      }
+      this.unsubscribe?.();
+      this.subscribe();
+    }
+    componentWillUnmount() {
+      this.unsubscribe?.();
+    }
+    render() {
+      return this.props.render(this.state.item, this.state.index);
+    }
+  }
+  FarmKeyedRowConditional.displayName = "FarmCompiledKeyedRowConditional";
+  class FarmKeyedRowsBlock extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.state = { fallback: false };
+      this.root = null;
+      this.mounted = false;
+      this.fallbackRequested = false;
+      this.fallbackVersion = 0;
+      this.fallbackKeysWereUnsafe = false;
+      this.propSyncQueued = false;
+      this.currentProps = this.props;
+      this.instances = /* @__PURE__ */ new Map();
+      this.renderVersion = 0;
+      this.eventHandlers = /* @__PURE__ */ new Map();
+      this.conditionalListeners = /* @__PURE__ */ new Map();
+      this.conditionalOwner = {
+        subscribe: (key, id, refresh) => this.subscribeToRowConditional(key, id, refresh)
+      };
+      this.captureRoot = (root) => {
+        this.root = root;
+      };
+      this.rowEvent = (item, index, eventId) => {
+        if (this.state.fallback) {
+          return (event) => this.currentProps.events?.[eventId]?.invoke(item, index, event);
+        }
+        const key = keyedRowIdentity(this.currentProps.rowKey(item, index));
+        let handlers = this.eventHandlers.get(key);
+        if (!handlers) {
+          handlers = /* @__PURE__ */ new Map();
+          this.eventHandlers.set(key, handlers);
+        }
+        const existing = handlers.get(eventId);
+        if (existing) return existing;
+        const handler = (event) => {
+          const instance = this.instances.get(key);
+          const descriptor = this.currentProps.events?.[eventId];
+          if (!instance || !descriptor) return;
+          return descriptor.invoke(instance.item, instance.index, event);
+        };
+        handlers.set(eventId, handler);
+        return handler;
+      };
+      this.rowConditional = (item, index, conditionalId, render) => {
+        if (this.state.fallback) return render(item, index);
+        const key = keyedRowIdentity(this.currentProps.rowKey(item, index));
+        return React.createElement(FarmKeyedRowConditional, {
+          key: `${key}:${conditionalId}`,
+          owner: this.conditionalOwner,
+          rowKey: key,
+          id: conditionalId,
+          renderVersion: this.renderVersion,
+          item,
+          index,
+          render
+        });
+      };
+      this.refresh = (afterCommit) => {
+        this.reconcile(afterCommit);
+      };
+    }
+    readRows(props) {
+      const source = props.items();
+      const items = source ? Array.from(source) : [];
+      const keys = items.map((item, index) => keyedRowIdentity(props.rowKey(item, index)));
+      if (new Set(keys).size !== keys.length) return null;
+      return { items, keys };
+    }
+    subscribeToRowConditional(key, id, refresh) {
+      let listeners = this.conditionalListeners.get(key);
+      if (!listeners) {
+        listeners = /* @__PURE__ */ new Map();
+        this.conditionalListeners.set(key, listeners);
+      }
+      listeners.set(id, refresh);
+      return () => {
+        const current = this.conditionalListeners.get(key);
+        if (current?.get(id) !== refresh) return;
+        current.delete(id);
+        if (current.size === 0) this.conditionalListeners.delete(key);
+      };
+    }
+    hasReactOwnedRows(props = this.currentProps) {
+      return Boolean(props.events?.length || props.conditionals?.length);
+    }
+    pruneEventHandlers(keys) {
+      const active = new Set(keys);
+      for (const key of this.eventHandlers.keys()) {
+        if (!active.has(key)) this.eventHandlers.delete(key);
+      }
+    }
+    pruneConditionalListeners(keys) {
+      const active = new Set(keys);
+      for (const key of this.conditionalListeners.keys()) {
+        if (!active.has(key)) this.conditionalListeners.delete(key);
+      }
+    }
+    adopt() {
+      if (!this.root) return false;
+      const rows = this.readRows(this.currentProps);
+      const elements = [...this.root.children];
+      if (!rows || rows.items.length !== elements.length) return false;
+      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) {
+        if (this.hasReactOwnedRows() && !matchesCompilerHostElement(
+          elements[index],
+          this.currentProps.create(rows.items[index], index),
+          opaqueConditionalPaths
+        )) {
+          return false;
+        }
+        const instance = {
+          key: rows.keys[index],
+          element: elements[index],
+          values: this.hasReactOwnedRows() ? this.currentProps.bindings.map(() => UNSET_KEYED_ROW_BINDING) : readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
+          item: rows.items[index],
+          index,
+          conditionalValues: readKeyedRowConditionalValues(
+            this.currentProps,
+            rows.items[index],
+            index
+          )
+        };
+        if (this.hasReactOwnedRows()) {
+          applyKeyedRowBindings(this.currentProps, instance, rows.items[index], index);
+        }
+        instances.set(rows.keys[index], instance);
+      }
+      this.instances = instances;
+      this.pruneEventHandlers(rows.keys);
+      this.pruneConditionalListeners(rows.keys);
+      return true;
+    }
+    hasUnsafeFallbackKeys() {
+      try {
+        return this.readRows(this.currentProps) === null;
+      } catch {
+        return true;
+      }
+    }
+    activateFallback(afterCommit) {
+      if (!this.mounted || this.state.fallback || this.fallbackRequested) {
+        afterCommit?.();
+        return;
+      }
+      this.fallbackRequested = true;
+      this.fallbackKeysWereUnsafe = this.hasUnsafeFallbackKeys();
+      this.fallbackVersion += 1;
+      this.setState({ fallback: true }, afterCommit);
+    }
+    synchronizeReactOwnedRows(afterCommit) {
+      this.forceUpdate(() => {
+        if (!this.mounted) {
+          afterCommit?.();
+          return;
+        }
+        if (!this.adopt()) {
+          this.activateFallback(afterCommit);
+          return;
+        }
+        afterCommit?.();
+      });
+    }
+    notifyConditionalChanges(changes, afterCommit) {
+      if (changes.length === 0) {
+        afterCommit?.();
+        return;
+      }
+      let pending = changes.length;
+      const committed = () => {
+        pending -= 1;
+        if (pending === 0) afterCommit?.();
+      };
+      flushSync(() => {
+        for (const change of changes) {
+          const refresh = this.conditionalListeners.get(change.key)?.get(change.id);
+          if (refresh) refresh(change.item, change.index, committed);
+          else committed();
+        }
+      });
+    }
+    reconcile(afterCommit) {
+      if (!this.mounted || !this.root) {
+        afterCommit?.();
+        return;
+      }
+      if (this.state.fallback) {
+        const unsafeKeys = this.hasUnsafeFallbackKeys();
+        if (unsafeKeys || this.fallbackKeysWereUnsafe) {
+          this.fallbackVersion += 1;
+        }
+        this.fallbackKeysWereUnsafe = unsafeKeys;
+        this.forceUpdate(afterCommit);
+        return;
+      }
+      const rows = this.readRows(this.currentProps);
+      if (!rows) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      const previousKeys = [...this.instances.keys()];
+      if (this.hasReactOwnedRows() && (rows.keys.length !== previousKeys.length || rows.keys.some((key, index) => key !== previousKeys[index]))) {
+        this.synchronizeReactOwnedRows(afterCommit);
+        return;
+      }
+      const oldIndices = /* @__PURE__ */ new Map();
+      const activeElement = this.root.ownerDocument.activeElement;
+      const restoreFocus = Boolean(activeElement && this.root.contains(activeElement));
+      [...this.instances].forEach(([key], index) => oldIndices.set(key, index));
+      const nextKeys = new Set(rows.keys);
+      for (const [key, instance] of this.instances) {
+        if (!nextKeys.has(key)) instance.element.remove();
+      }
+      const sequence = rows.keys.map((key) => oldIndices.get(key) ?? -1);
+      const stablePositions = longestIncreasingSubsequencePositions(sequence);
+      const nextInstances = [];
+      const conditionalChanges = [];
+      for (let index = 0; index < rows.items.length; index += 1) {
+        const key = rows.keys[index];
+        const existing = this.instances.get(key);
+        if (existing) {
+          applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
+          const conditionalValues = readKeyedRowConditionalValues(
+            this.currentProps,
+            rows.items[index],
+            index
+          );
+          for (const [id, values] of conditionalValues) {
+            if (keyedRowConditionalChanged(existing.conditionalValues.get(id), values)) {
+              conditionalChanges.push({ key, id, item: rows.items[index], index });
+            }
+          }
+          existing.conditionalValues = conditionalValues;
+          existing.item = rows.items[index];
+          existing.index = index;
+          nextInstances.push(existing);
+          continue;
+        }
+        const element = createCompilerHostElement(
+          this.root.ownerDocument,
+          this.currentProps.create(rows.items[index], index)
+        );
+        nextInstances.push({
+          key,
+          element,
+          values: readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
+          item: rows.items[index],
+          index,
+          conditionalValues: readKeyedRowConditionalValues(
+            this.currentProps,
+            rows.items[index],
+            index
+          )
+        });
+      }
+      let anchor = null;
+      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.instances = new Map(nextInstances.map((instance) => [instance.key, instance]));
+      this.pruneEventHandlers(rows.keys);
+      this.pruneConditionalListeners(rows.keys);
+      if (restoreFocus && activeElement?.isConnected && activeElement.ownerDocument.activeElement !== activeElement && "focus" in activeElement) {
+        activeElement.focus({ preventScroll: true });
+      }
+      this.notifyConditionalChanges(conditionalChanges, afterCommit);
+    }
+    schedulePropSync() {
+      if (this.propSyncQueued) return;
+      this.propSyncQueued = true;
+      queueMicrotask(() => {
+        this.propSyncQueued = false;
+        if (this.mounted && !this.state.fallback) this.reconcile();
+      });
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+      const wasReactOwned = this.hasReactOwnedRows(this.currentProps);
+      const willBeReactOwned = this.hasReactOwnedRows(nextProps);
+      this.currentProps = nextProps;
+      if (nextState.fallback || this.state.fallback) return true;
+      if (wasReactOwned || willBeReactOwned) {
+        this.eventHandlers.clear();
+        return true;
+      }
+      this.schedulePropSync();
+      return false;
+    }
+    componentDidUpdate(previousProps) {
+      if (this.state.fallback || previousProps === this.props || !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);
+      if (!this.adopt()) this.activateFallback();
+    }
+    componentWillUnmount() {
+      this.mounted = false;
+      this.unsubscribe?.();
+      this.root = null;
+      this.instances.clear();
+      this.eventHandlers.clear();
+      this.conditionalListeners.clear();
+    }
+    render() {
+      this.renderVersion += 1;
+      const container = this.currentProps.render(this.rowEvent, this.rowConditional);
+      if (!React.isValidElement(container) || typeof container.type !== "string") {
+        throw new TypeError(
+          `Compiled keyed rows ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.cloneElement(container, {
+        key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
+        ref: this.captureRoot
+      });
+    }
+  }
+  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() {
+      super(...arguments);
+      this.refresh = (afterCommit) => {
+        this.forceUpdate(afterCommit);
+      };
+    }
+    subscribe() {
+      this.unsubscribe = owner.subscribe(this.props.id, this.refresh);
+    }
+    componentDidMount() {
+      this.subscribe();
+    }
+    componentDidUpdate(previous) {
+      if (previous.id === this.props.id) return;
+      this.unsubscribe?.();
+      this.subscribe();
+    }
+    componentWillUnmount() {
+      this.unsubscribe?.();
+    }
+    render() {
+      return this.props.render();
+    }
+  }
+  FarmComponentBlock.displayName = "FarmCompiledComponentIsland";
+  return FarmComponentBlock;
+}
 function createCompiledComponent(definition) {
+  const stateSignature = definition.stateSignature || String(definition.initialize.length);
+  if (definition.hmrId) {
+    const registry = getCompilerHmrRegistry();
+    const existing = registry.get(definition.hmrId);
+    if (existing?.stateSignature === stateSignature) {
+      existing.definition.current = definition;
+      existing.component.displayName = `FarmCompiled(${definition.displayName})`;
+      for (const refresh of existing.refreshListeners) refresh();
+      return existing.component;
+    }
+  }
+  const definitionReference = { current: definition };
+  const refreshListeners = /* @__PURE__ */ new Set();
   class FarmCompiledComponent extends React.Component {
     constructor(props) {
       super(props);
       this.root = null;
       this.mounted = false;
       this.flushQueued = false;
+      this.hasBindingError = false;
+      this.inputSelection = null;
       this.dirtyState = /* @__PURE__ */ new Set();
+      this.blockRefreshListeners = /* @__PURE__ */ new Map();
+      this.blockRoots = /* @__PURE__ */ new Map();
+      this.blockRootElements = /* @__PURE__ */ new Set();
+      this.bindingTargets = /* @__PURE__ */ new Map();
+      this.bindingTargetRefs = /* @__PURE__ */ new Map();
       this.captureRoot = (root) => {
         this.root = root;
       };
-      this.cells = definition.initialize(props).map((initialValue, index) => {
+      this.refreshDefinition = () => {
+        if (this.mounted) this.forceUpdate();
+      };
+      this.cells = definitionReference.current.initialize(props).map((initialValue, index) => {
         let value = initialValue;
         const pending = [];
         return {
@@ -70,13 +1195,87 @@ function createCompiledComponent(definition) {
           }
         };
       });
+      this.blockRuntime = {
+        Conditional: createConditionalBlockComponent({
+          setRoot: (id, root) => this.setBlockRoot(id, root),
+          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        }),
+        HostConditional: createHostConditionalBlockComponent({
+          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)
+        }),
+        target: (id) => this.bindingTarget(id)
+      };
+    }
+    bindingTarget(id) {
+      const existing = this.bindingTargetRefs.get(id);
+      if (existing) return existing;
+      const capture = (element) => {
+        if (element) {
+          this.bindingTargets.set(id, element);
+        } else {
+          this.bindingTargets.delete(id);
+        }
+      };
+      this.bindingTargetRefs.set(id, capture);
+      return capture;
+    }
+    captureInputSelection() {
+      const active = this.root?.ownerDocument.activeElement;
+      if (!isSelectableTextControl(active) || !this.root?.contains(active) || active.selectionStart === null || active.selectionEnd === null) {
+        return;
+      }
+      this.inputSelection = {
+        element: active,
+        start: active.selectionStart,
+        end: active.selectionEnd,
+        direction: active.selectionDirection || "none"
+      };
+    }
+    restoreInputSelection(snapshot) {
+      if (!snapshot || !snapshot.element.isConnected || snapshot.element.ownerDocument.activeElement !== snapshot.element) {
+        return;
+      }
+      snapshot.element.setSelectionRange(snapshot.start, snapshot.end, snapshot.direction);
+    }
+    setBlockRoot(id, root) {
+      const previous = this.blockRoots.get(id);
+      if (previous) this.blockRootElements.delete(previous);
+      if (root) {
+        this.blockRoots.set(id, root);
+        this.blockRootElements.add(root);
+      } else {
+        this.blockRoots.delete(id);
+      }
+    }
+    subscribeToBlock(id, refresh) {
+      this.blockRefreshListeners.set(id, refresh);
+      return () => {
+        if (this.blockRefreshListeners.get(id) === refresh) {
+          this.blockRefreshListeners.delete(id);
+        }
+      };
     }
     scheduleBindingFlush(index) {
       this.dirtyState.add(index);
+      this.captureInputSelection();
       if (!this.mounted || this.flushQueued) return;
       this.flushQueued = true;
       queueMicrotask(() => {
         this.flushQueued = false;
+        const inputSelection = this.inputSelection;
+        this.inputSelection = null;
         if (!this.mounted) return;
         const dirty = /* @__PURE__ */ new Set();
         for (const index2 of this.dirtyState) {
@@ -84,40 +1283,105 @@ function createCompiledComponent(definition) {
         }
         this.dirtyState.clear();
         if (dirty.size === 0) return;
-        for (const binding of definition.bindings) {
-          if (binding.dependencies.some((dependency) => dirty.has(dependency))) {
-            this.applyBinding(binding);
+        try {
+          const bindings = definitionReference.current.bindings;
+          const blockBindings = /* @__PURE__ */ new Map();
+          const affectedBlockIds = /* @__PURE__ */ new Set();
+          for (const binding of bindings) {
+            if (binding.kind !== "block") continue;
+            blockBindings.set(binding.id, binding);
+            if (binding.dependencies.some((dependency) => dirty.has(dependency))) {
+              affectedBlockIds.add(binding.id);
+            }
           }
+          const hasAffectedMountedAncestor = (binding) => {
+            let parent = binding.parent;
+            while (parent !== void 0) {
+              if (affectedBlockIds.has(parent) && this.blockRefreshListeners.has(parent)) {
+                return true;
+              }
+              parent = blockBindings.get(parent)?.parent;
+            }
+            return false;
+          };
+          const blockRefreshes = [...affectedBlockIds].map((id) => {
+            const binding = blockBindings.get(id);
+            const refresh = this.blockRefreshListeners.get(id);
+            return binding && refresh && !hasAffectedMountedAncestor(binding) ? refresh : void 0;
+          }).filter(
+            (refresh) => refresh !== void 0
+          );
+          for (const binding of bindings) {
+            if (binding.kind !== "block" && binding.dependencies.some((dependency) => dirty.has(dependency))) {
+              this.applyBinding(binding);
+            }
+          }
+          let pendingBlockCommits = blockRefreshes.length;
+          for (const refresh of blockRefreshes) {
+            refresh(() => {
+              pendingBlockCommits -= 1;
+              if (pendingBlockCommits === 0) this.restoreInputSelection(inputSelection);
+            });
+          }
+          if (blockRefreshes.length === 0) this.restoreInputSelection(inputSelection);
+        } catch (error) {
+          this.bindingError = error;
+          this.hasBindingError = true;
+          this.forceUpdate();
         }
       });
     }
     applyBinding(binding) {
-      if (!this.root) return;
-      const target = findBindingTarget(this.root, binding.path);
+      if (!this.root || binding.kind === "block") return;
+      const target = binding.target === void 0 ? findBindingTarget(this.root, binding.path, this.blockRootElements) : binding.path.length === 0 ? this.root : this.bindingTargets.get(binding.target) || null;
       if (!target) return;
       const value = binding.read(this.props, this.cells);
       if (binding.kind === "text") {
         target.textContent = renderTextValue(value);
+      } else if (binding.kind === "style") {
+        updateStyle(target, binding.name, value);
       } else {
         updateAttribute(target, binding.name, value);
       }
     }
     componentDidMount() {
       this.mounted = true;
+      refreshListeners.add(this.refreshDefinition);
     }
     componentDidUpdate() {
-      for (const binding of definition.bindings) this.applyBinding(binding);
+      for (const binding of definitionReference.current.bindings) {
+        if (binding.kind !== "block") this.applyBinding(binding);
+      }
     }
     componentWillUnmount() {
       this.mounted = false;
       this.root = null;
       this.dirtyState.clear();
+      this.inputSelection = null;
+      this.blockRefreshListeners.clear();
+      this.blockRoots.clear();
+      this.blockRootElements.clear();
+      this.bindingTargets.clear();
+      this.bindingTargetRefs.clear();
+      refreshListeners.delete(this.refreshDefinition);
     }
     render() {
-      const element = definition.render(this.props, this.cells);
-      if (!React.isValidElement(element) || typeof element.type !== "string") {
+      if (this.hasBindingError) throw this.bindingError;
+      const currentDefinition = definitionReference.current;
+      const element = currentDefinition.render(this.props, this.cells, this.blockRuntime);
+      if (!React.isValidElement(element)) {
         throw new TypeError(
-          `Compiled component ${definition.displayName} must return one host element.`
+          `Compiled component ${currentDefinition.displayName} must return one host element.`
+        );
+      }
+      if (element.type === this.blockRuntime.KeyedRanges) {
+        return React.cloneElement(element, {
+          rootRef: this.captureRoot
+        });
+      }
+      if (typeof element.type !== "string") {
+        throw new TypeError(
+          `Compiled component ${currentDefinition.displayName} must return one host element.`
         );
       }
       return React.cloneElement(element, {
@@ -126,7 +1390,16 @@ function createCompiledComponent(definition) {
     }
   }
   FarmCompiledComponent.displayName = `FarmCompiled(${definition.displayName})`;
-  return FarmCompiledComponent;
+  const component = FarmCompiledComponent;
+  if (definition.hmrId) {
+    getCompilerHmrRegistry().set(definition.hmrId, {
+      component,
+      definition: definitionReference,
+      refreshListeners,
+      stateSignature
+    });
+  }
+  return component;
 }
 
 export { createCompiledComponent };