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

package/dist/vite.cjs

@@ -6,6 +6,96 @@ var promises = require('fs/promises');
 var path = require('path');
 
 // src/vite.ts
+var DELEGATABLE_KEYED_ROW_EVENTS = /* @__PURE__ */ new Set([
+  "onBeforeInput",
+  "onBlur",
+  "onChange",
+  "onClick",
+  "onCompositionEnd",
+  "onCompositionStart",
+  "onCompositionUpdate",
+  "onContextMenu",
+  "onCopy",
+  "onCut",
+  "onDoubleClick",
+  "onDrag",
+  "onDragEnd",
+  "onDragEnter",
+  "onDragExit",
+  "onDragLeave",
+  "onDragOver",
+  "onDragStart",
+  "onDrop",
+  "onFocus",
+  "onInput",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onMouseDown",
+  "onMouseMove",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "onPaste",
+  "onPointerCancel",
+  "onPointerDown",
+  "onPointerMove",
+  "onPointerOut",
+  "onPointerOver",
+  "onPointerUp",
+  "onReset",
+  "onSubmit",
+  "onTouchCancel",
+  "onTouchEnd",
+  "onTouchMove",
+  "onTouchStart",
+  "onWheel"
+]);
+function canDelegateKeyedRowEvents(plan) {
+  if (plan.events.length === 0 || plan.conditionals.length > 0) return false;
+  if (plan.source.openingElement.attributes.some(
+    (attribute) => core.types.isJSXAttribute(attribute) && core.types.isJSXIdentifier(attribute.name) && /^on[A-Z]/.test(attribute.name.name)
+  )) {
+    return false;
+  }
+  return plan.events.every(
+    (event) => DELEGATABLE_KEYED_ROW_EVENTS.has(event.name.replace(/Capture$/, ""))
+  );
+}
+var COMPILER_RUNTIME_FEATURE_EXPORTS = {
+  conditional: "conditionalRuntimeFeature",
+  "host-conditional": "hostConditionalRuntimeFeature",
+  "conditional-ranges": "conditionalRangesRuntimeFeature",
+  "keyed-list": "keyedListRuntimeFeature",
+  "keyed-rows": "keyedRowsRuntimeFeature",
+  "keyed-rows-conditional": "keyedRowsConditionalRuntimeFeature",
+  "keyed-rows-host": "keyedRowsHostRuntimeFeature",
+  "keyed-rows-complete": "keyedRowsCompleteRuntimeFeature",
+  "keyed-ranges": "keyedRangesRuntimeFeature",
+  "mixed-ranges": "mixedRangesRuntimeFeature",
+  component: "componentRuntimeFeature"
+};
+function runtimeFeaturesForPlans(plans) {
+  const features = /* @__PURE__ */ new Set();
+  let keyedRowsHaveConditionals = false;
+  let keyedRowsHaveHostBlocks = false;
+  for (const plan of plans) {
+    if (plan.kind === "keyed-rows") {
+      keyedRowsHaveConditionals || (keyedRowsHaveConditionals = plan.conditionals.length > 0);
+      keyedRowsHaveHostBlocks || (keyedRowsHaveHostBlocks = Boolean(plan.descriptorBlocks?.size));
+      continue;
+    }
+    if (plan.kind in COMPILER_RUNTIME_FEATURE_EXPORTS) {
+      features.add(plan.kind);
+    }
+  }
+  if (plans.some((plan) => plan.kind === "keyed-rows")) {
+    features.add(
+      keyedRowsHaveConditionals && keyedRowsHaveHostBlocks ? "keyed-rows-complete" : keyedRowsHaveConditionals ? "keyed-rows-conditional" : keyedRowsHaveHostBlocks ? "keyed-rows-host" : "keyed-rows"
+    );
+  }
+  return [...features].sort();
+}
 var SAFE_GLOBAL_CALLS = /* @__PURE__ */ new Set(["Boolean", "Number", "String"]);
 var SAFE_MATH_CALLS = /* @__PURE__ */ new Set(["abs", "ceil", "floor", "max", "min", "round", "sign", "trunc"]);
 function isComponentName(name) {
@@ -90,6 +180,37 @@ function rewriteDestructuredPropAccess(expression, names, propsParameter) {
   });
   return file.program.body[0].expression;
 }
+function collectDestructuredPropNames(expression, names, propsParameter) {
+  const referenced = /* @__PURE__ */ new Set();
+  if (names.size === 0) return referenced;
+  core.traverse(expressionFile(cloneExpression(expression)), {
+    MemberExpression(path) {
+      const { object, property, computed } = path.node;
+      if (computed || !core.types.isIdentifier(object, { name: propsParameter.name }) || !core.types.isIdentifier(property) || !names.has(property.name)) {
+        return;
+      }
+      referenced.add(property.name);
+    }
+  });
+  return referenced;
+}
+function rewriteTrackedPropAccess(expression, propsParameter, bindingsByName) {
+  if (bindingsByName.size === 0) return cloneExpression(expression);
+  const file = expressionFile(cloneExpression(expression));
+  core.traverse(file, {
+    MemberExpression(path) {
+      const { object, property, computed } = path.node;
+      if (computed || !core.types.isIdentifier(object, { name: propsParameter.name }) || !core.types.isIdentifier(property)) {
+        return;
+      }
+      const binding = bindingsByName.get(property.name);
+      if (!binding) return;
+      path.replaceWith(core.types.identifier(binding.valueName));
+      path.skip();
+    }
+  });
+  return file.program.body[0].expression;
+}
 function rewriteHandlerAccess(root, handlersByName) {
   if (handlersByName.size === 0) return { root: core.types.cloneNode(root, true) };
   const file = expressionFile(core.types.cloneNode(root, true));
@@ -769,7 +890,7 @@ function analyzeKeyedRowTree(row, renderCallback, safeGlobals, compilerSetters)
   const reason = visit(row, []);
   return reason ? { reason } : { bindings, events, conditionals };
 }
-function analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames) {
+function analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames, acceptUnsupportedRow = false) {
   let collection;
   let keyCallback;
   let renderCallback;
@@ -824,17 +945,29 @@ function analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames) {
     safeGlobals,
     new Set([...statesByValue.values()].map((state) => state.setterName))
   );
-  if (rowAnalysis.reason) return void 0;
+  if (rowAnalysis.reason && !acceptUnsupportedRow) return void 0;
+  const keyExpression = returnedExpression(keyCallback);
+  const structureDependencies = new Set(collectStateDependencies(collection, statesByValue));
+  if (keyExpression) {
+    for (const dependency of collectStateDependencies(keyExpression, statesByValue)) {
+      structureDependencies.add(dependency);
+    }
+  }
   return {
     source,
     collection,
+    structureDependencies: [...structureDependencies].sort((left, right) => left - right),
     keyCallback,
     renderCallback,
     row,
     dependencies,
-    bindings: rowAnalysis.bindings || [],
+    bindings: (rowAnalysis.bindings || []).map((binding) => ({
+      ...binding,
+      dependencies: collectStateDependencies(binding.value, statesByValue)
+    })),
     events: rowAnalysis.events || [],
     conditionals: rowAnalysis.conditionals || [],
+    rowReason: rowAnalysis.reason,
     syntax
   };
 }
@@ -851,22 +984,7 @@ function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNa
   }
   const children = meaningfulJsxChildren(container);
   if (children.length !== 1) return void 0;
-  return analyzeKeyedRowChild(children[0], statesByValue, safeGlobals, listNames);
-}
-function isStaticRangeSibling(element, statesByValue, safeGlobals) {
-  for (const child of meaningfulJsxChildren(element)) {
-    if (core.types.isJSXFragment(child)) return false;
-    if (core.types.isJSXElement(child)) {
-      if (!isHostElement(child) || !isStaticRangeSibling(child, statesByValue, safeGlobals)) {
-        return false;
-      }
-      continue;
-    }
-    if (core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression) && !isTextExpression(child.expression, statesByValue, safeGlobals)) {
-      return false;
-    }
-  }
-  return true;
+  return analyzeKeyedRowChild(children[0], statesByValue, safeGlobals, listNames, true);
 }
 function analyzeKeyedRangesContainer(container, statesByValue, safeGlobals, listNames, allowSingleRange = false) {
   if (container.openingElement.attributes.some(
@@ -878,6 +996,7 @@ function analyzeKeyedRangesContainer(container, statesByValue, safeGlobals, list
   if (children.length < (allowSingleRange ? 1 : 2)) return void 0;
   const ranges = [];
   const dependencies = /* @__PURE__ */ new Set();
+  const staticBindings = [];
   let staticBefore = 0;
   for (const child of children) {
     const range = analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames);
@@ -898,18 +1017,31 @@ function analyzeKeyedRangesContainer(container, statesByValue, safeGlobals, list
       continue;
     }
     if (!core.types.isJSXElement(child) || !isHostElement(child)) return void 0;
-    if (!isStaticRangeSibling(child, statesByValue, safeGlobals)) return void 0;
+    const analysis = analyzeHostConditionalTree(child, safeGlobals, true, statesByValue);
+    if (analysis.reason) return void 0;
+    for (const binding of analysis.bindings || []) {
+      staticBindings.push({
+        ...binding,
+        segment: ranges.length,
+        sibling: staticBefore
+      });
+      for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+        dependencies.add(dependency);
+      }
+    }
     staticBefore += 1;
   }
   if (ranges.length === 0) return void 0;
   return {
     ranges,
     trailing: staticBefore,
-    dependencies: [...dependencies].sort((left, right) => left - right)
+    dependencies: [...dependencies].sort((left, right) => left - right),
+    staticBindings
   };
 }
-function analyzeHostConditionalTree(branch, safeGlobals) {
+function analyzeHostConditionalTree(branch, safeGlobals, allowStaticEvents = false, statefulOnly) {
   const bindings = [];
+  const needsStaticBinding = (expression) => !statefulOnly || collectStateDependencies(expression, statefulOnly).length > 0;
   const visit = (element, path) => {
     const tag = element.openingElement.name;
     if (!core.types.isJSXIdentifier(tag) || !/^[a-z]/.test(tag.name)) {
@@ -918,20 +1050,26 @@ function analyzeHostConditionalTree(branch, safeGlobals) {
     if (tag.name === "svg") return "compiler-owned conditionals do not support SVG yet";
     for (const attribute of element.openingElement.attributes) {
       if (core.types.isJSXSpreadAttribute(attribute)) {
+        if (statefulOnly && !needsStaticBinding(attribute.argument)) continue;
         return "compiler-owned conditionals do not support JSX attribute spreads";
       }
       const name = jsxAttributeName(attribute);
       if (!name) return "compiler-owned conditionals do not support namespaced JSX attributes";
       if (name === "ref" || name === "dangerouslySetInnerHTML" || name === "key") {
+        if (statefulOnly && (!core.types.isJSXExpressionContainer(attribute.value) || core.types.isJSXEmptyExpression(attribute.value.expression) || !needsStaticBinding(attribute.value.expression))) {
+          continue;
+        }
         return `compiler-owned conditional ${name} requires React ownership`;
       }
       if (/^on[A-Z]/.test(name)) {
+        if (allowStaticEvents) continue;
         return "compiler-owned conditional events require React ownership";
       }
       if (!core.types.isJSXExpressionContainer(attribute.value) || core.types.isJSXEmptyExpression(attribute.value.expression)) {
         continue;
       }
       const expression = attribute.value.expression;
+      if (!needsStaticBinding(expression)) continue;
       if (name === "style") {
         if (!core.types.isObjectExpression(expression)) {
           return "compiler-owned conditional styles must use one inline object literal";
@@ -944,6 +1082,7 @@ function analyzeHostConditionalTree(branch, safeGlobals) {
           if (!propertyName || propertyName.includes("-") && !propertyName.startsWith("--")) {
             return "compiler-owned conditional style names must use camelCase or a CSS custom property";
           }
+          if (!needsStaticBinding(property.value)) continue;
           const unsupported2 = validateDerivedExpression(property.value, safeGlobals);
           if (unsupported2) {
             return `compiler-owned conditional style ${propertyName} cannot use ${unsupported2}`;
@@ -978,14 +1117,20 @@ function analyzeHostConditionalTree(branch, safeGlobals) {
     const expressions = element.children.filter(
       (child) => core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)
     );
-    for (const child of expressions) {
-      const unsupported = validateDerivedExpression(child.expression, safeGlobals);
-      if (unsupported) return `compiler-owned conditional text cannot use ${unsupported}`;
+    const boundExpressions = statefulOnly ? expressions.filter((child) => needsStaticBinding(child.expression)) : expressions;
+    if (boundExpressions.length > 0) {
+      for (const child of expressions) {
+        const unsupported = validateDerivedExpression(
+          child.expression,
+          safeGlobals
+        );
+        if (unsupported) return `compiler-owned conditional text cannot use ${unsupported}`;
+      }
     }
-    if (nestedElements.length > 0 && expressions.length > 0) {
+    if (nestedElements.length > 0 && boundExpressions.length > 0) {
       return "compiler-owned conditionals do not support dynamic text beside nested elements yet";
     }
-    if (nestedElements.length === 0 && expressions.length > 0) {
+    if (nestedElements.length === 0 && boundExpressions.length > 0) {
       const parts = [];
       for (const child of element.children) {
         if (core.types.isJSXText(child)) {
@@ -1009,7 +1154,369 @@ function analyzeHostConditionalTree(branch, safeGlobals) {
   const reason = visit(branch, []);
   return reason ? { reason } : { bindings };
 }
-function analyzeHostConditionalContainer(container, statesByValue, safeGlobals) {
+function analyzeRecursiveHostTree(branch, statesByValue, safeGlobals, listNames, parent, allocateId) {
+  const bindings = [];
+  const plans = [];
+  const blocks = /* @__PURE__ */ new Map();
+  const visit = (element, path, owner) => {
+    const tag = element.openingElement.name;
+    if (!core.types.isJSXIdentifier(tag) || !/^[a-z]/.test(tag.name)) {
+      return "recursive compiler-owned blocks support host elements only";
+    }
+    if (tag.name === "svg") return "recursive compiler-owned blocks do not support SVG yet";
+    for (const attribute of element.openingElement.attributes) {
+      if (core.types.isJSXSpreadAttribute(attribute)) {
+        return "recursive compiler-owned blocks do not support JSX attribute spreads";
+      }
+      const name = jsxAttributeName(attribute);
+      if (!name) return "recursive compiler-owned blocks do not support namespaced attributes";
+      if (name === "ref" || name === "dangerouslySetInnerHTML" || name === "key") {
+        return `recursive compiler-owned block ${name} requires React ownership`;
+      }
+      if (/^on[A-Z]/.test(name)) {
+        return "recursive compiler-owned block events require React ownership";
+      }
+      if (!core.types.isJSXExpressionContainer(attribute.value) || core.types.isJSXEmptyExpression(attribute.value.expression)) {
+        continue;
+      }
+      const expression = attribute.value.expression;
+      if (name === "style") {
+        if (!core.types.isObjectExpression(expression)) {
+          return "recursive compiler-owned styles must use one inline object literal";
+        }
+        for (const property of expression.properties) {
+          if (!core.types.isObjectProperty(property) || property.computed || !core.types.isExpression(property.value)) {
+            return "recursive compiler-owned styles do not support spreads, methods, or computed properties";
+          }
+          const propertyName = core.types.isIdentifier(property.key) ? property.key.name : core.types.isStringLiteral(property.key) ? property.key.value : void 0;
+          if (!propertyName || propertyName.includes("-") && !propertyName.startsWith("--")) {
+            return "recursive compiler-owned style names must use camelCase or a CSS custom property";
+          }
+          const unsupported2 = validateDerivedExpression(property.value, safeGlobals);
+          if (unsupported2) {
+            return `recursive compiler-owned style ${propertyName} cannot use ${unsupported2}`;
+          }
+          bindings.push({
+            kind: "style",
+            path: [...path],
+            name: propertyName,
+            value: cloneExpression(property.value)
+          });
+        }
+        continue;
+      }
+      if (name === "children") {
+        return "recursive compiler-owned children props are not supported yet";
+      }
+      const unsupported = validateDerivedExpression(expression, safeGlobals);
+      if (unsupported) return `recursive compiler-owned ${name} cannot use ${unsupported}`;
+      bindings.push({
+        kind: "attribute",
+        path: [...path],
+        name,
+        value: cloneExpression(expression)
+      });
+    }
+    const children = meaningfulJsxChildren(element);
+    const hasConditionalRange = children.some(
+      (child) => core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression) && conditionalBlockShape(child.expression) !== null
+    );
+    const hasKeyedRange = children.some(
+      (child) => analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames, true) !== void 0
+    );
+    if (hasConditionalRange && hasKeyedRange) {
+      const id = allocateId();
+      const mixed = analyzeMixedRangesContainer(
+        element,
+        statesByValue,
+        safeGlobals,
+        listNames,
+        id,
+        allocateId
+      );
+      if (mixed) {
+        plans.push(...mixed.nestedPlans);
+        for (const [nestedElement, plan2] of mixed.descriptorBlocks) {
+          blocks.set(nestedElement, plan2);
+        }
+        const plan = {
+          kind: "nested-host-mixed-ranges",
+          id,
+          parent: owner,
+          dependencies: mixed.dependencies,
+          source: element,
+          ranges: mixed.ranges,
+          trailing: mixed.trailing,
+          staticBindings: mixed.staticBindings
+        };
+        plans.push(plan);
+        blocks.set(element, plan);
+        return void 0;
+      }
+    }
+    const conditionalChildren = /* @__PURE__ */ new Map();
+    let conditionalContainer = children.length > 0;
+    for (const child of children) {
+      if (core.types.isJSXElement(child) && isHostElement(child)) continue;
+      if (core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)) {
+        const shape = conditionalBlockShape(child.expression);
+        if (shape && !validateDerivedExpression(shape.test, safeGlobals)) {
+          conditionalChildren.set(child.expression, shape);
+          continue;
+        }
+      }
+      conditionalContainer = false;
+      break;
+    }
+    if (conditionalContainer && conditionalChildren.size > 0) {
+      const id = allocateId();
+      const ranges = [];
+      const staticBindings = [];
+      const dependencies = /* @__PURE__ */ new Set();
+      let staticBefore2 = 0;
+      for (const child of children) {
+        if (core.types.isJSXElement(child)) {
+          const nested = analyzeRecursiveHostTree(
+            child,
+            statesByValue,
+            safeGlobals,
+            listNames,
+            owner,
+            allocateId
+          );
+          if (nested.reason) return nested.reason;
+          plans.push(...nested.plans);
+          for (const [nestedElement, plan2] of nested.blocks) blocks.set(nestedElement, plan2);
+          for (const binding of nested.bindings) {
+            staticBindings.push({
+              ...binding,
+              segment: ranges.length,
+              sibling: staticBefore2
+            });
+            for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+              dependencies.add(dependency);
+            }
+          }
+          staticBefore2 += 1;
+          continue;
+        }
+        if (!core.types.isJSXExpressionContainer(child) || core.types.isJSXEmptyExpression(child.expression)) {
+          return "recursive conditional ranges contain an unsupported child";
+        }
+        const expression = child.expression;
+        const shape = conditionalChildren.get(expression);
+        const truthy = shape.truthy ? analyzeRecursiveHostTree(
+          shape.truthy,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          id,
+          allocateId
+        ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
+        const falsy = shape.falsy ? analyzeRecursiveHostTree(
+          shape.falsy,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          id,
+          allocateId
+        ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
+        if (truthy.reason) return truthy.reason;
+        if (falsy.reason) return falsy.reason;
+        plans.push(...truthy.plans, ...falsy.plans);
+        for (const [nestedElement, plan2] of truthy.blocks) blocks.set(nestedElement, plan2);
+        for (const [nestedElement, plan2] of falsy.blocks) blocks.set(nestedElement, plan2);
+        for (const dependency of collectStateDependencies(shape.test, statesByValue)) {
+          dependencies.add(dependency);
+        }
+        for (const binding of [...truthy.bindings, ...falsy.bindings]) {
+          for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+            dependencies.add(dependency);
+          }
+        }
+        ranges.push({
+          before: staticBefore2,
+          source: expression,
+          test: cloneExpression(shape.test),
+          logical: shape.logical,
+          truthy: shape.truthy,
+          falsy: shape.falsy,
+          truthyBindings: truthy.bindings,
+          falsyBindings: falsy.bindings
+        });
+        staticBefore2 = 0;
+      }
+      const plan = {
+        kind: "nested-host-conditional-ranges",
+        id,
+        parent: owner,
+        dependencies: [...dependencies].sort((left, right) => left - right),
+        source: element,
+        ranges,
+        trailing: staticBefore2,
+        staticBindings
+      };
+      plans.push(plan);
+      blocks.set(element, plan);
+      return void 0;
+    }
+    const keyedRows = [];
+    let keyedContainer = children.length > 0;
+    let staticBefore = 0;
+    const staticChildren = [];
+    for (const child of children) {
+      const range = analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames, true);
+      if (range) {
+        keyedRows.push({ before: staticBefore, range });
+        staticBefore = 0;
+      } else if (core.types.isJSXElement(child) && isHostElement(child)) {
+        staticChildren.push({
+          element: child,
+          segment: keyedRows.length,
+          sibling: staticBefore
+        });
+        staticBefore += 1;
+      } else {
+        keyedContainer = false;
+        break;
+      }
+    }
+    if (keyedContainer && keyedRows.length > 0) {
+      const id = allocateId();
+      const keyedRanges = [];
+      const staticBindings = [];
+      const keyedDependencies = /* @__PURE__ */ new Set();
+      for (const { before, range } of keyedRows) {
+        if (range.events.length > 0) {
+          return "recursive compiler-owned keyed rows cannot contain events";
+        }
+        const row = core.types.cloneNode(range.row, true);
+        row.openingElement.attributes = row.openingElement.attributes.filter(
+          (attribute) => !core.types.isJSXAttribute(attribute) || jsxAttributeName(attribute) !== "key"
+        );
+        const rowAnalysis = analyzeRecursiveHostTree(
+          row,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          id,
+          allocateId
+        );
+        if (rowAnalysis.reason) return rowAnalysis.reason;
+        plans.push(...rowAnalysis.plans);
+        for (const [nestedElement, nestedPlan] of rowAnalysis.blocks) {
+          blocks.set(nestedElement, nestedPlan);
+        }
+        keyedRanges.push({
+          before,
+          source: range.source,
+          collection: range.collection,
+          keyCallback: range.keyCallback,
+          renderCallback: range.renderCallback,
+          row,
+          bindings: rowAnalysis.bindings,
+          syntax: range.syntax
+        });
+        for (const dependency of range.dependencies) keyedDependencies.add(dependency);
+      }
+      for (const { element: child, segment, sibling } of staticChildren) {
+        const nested = analyzeRecursiveHostTree(
+          child,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          owner,
+          allocateId
+        );
+        if (nested.reason) return nested.reason;
+        plans.push(...nested.plans);
+        for (const [nestedElement, plan2] of nested.blocks) blocks.set(nestedElement, plan2);
+        for (const binding of nested.bindings) {
+          staticBindings.push({ ...binding, segment, sibling });
+          for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+            keyedDependencies.add(dependency);
+          }
+        }
+      }
+      const plan = {
+        kind: "nested-host-keyed-ranges",
+        id,
+        parent: owner,
+        dependencies: [...keyedDependencies].sort((left, right) => left - right),
+        source: element,
+        ranges: keyedRanges,
+        trailing: staticBefore,
+        staticBindings
+      };
+      plans.push(plan);
+      blocks.set(element, plan);
+      return void 0;
+    }
+    if (element.children.some((child) => core.types.isJSXFragment(child))) {
+      return "recursive compiler-owned blocks do not support fragments yet";
+    }
+    const nestedElements = element.children.filter(
+      (child) => core.types.isJSXElement(child)
+    );
+    const expressions = element.children.filter(
+      (child) => core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)
+    );
+    for (const child of expressions) {
+      const unsupported = validateDerivedExpression(child.expression, safeGlobals);
+      if (unsupported) return `recursive compiler-owned text cannot use ${unsupported}`;
+    }
+    if (nestedElements.length > 0 && expressions.length > 0) {
+      return "recursive compiler-owned blocks do not support dynamic text beside nested elements";
+    }
+    if (nestedElements.length === 0 && expressions.length > 0) {
+      const parts = [];
+      for (const child of element.children) {
+        if (core.types.isJSXText(child)) {
+          const text = cleanJsxText(child.value);
+          if (text) parts.push(core.types.stringLiteral(text));
+        } else if (core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)) {
+          parts.push(cloneExpression(child.expression));
+        }
+      }
+      bindings.push({ kind: "text", path: [...path], value: core.types.arrayExpression(parts) });
+    }
+    let elementIndex = 0;
+    for (const child of element.children) {
+      if (!core.types.isJSXElement(child)) continue;
+      const reason2 = visit(child, [...path, elementIndex], owner);
+      if (reason2) return reason2;
+      elementIndex += 1;
+    }
+    return void 0;
+  };
+  const reason = visit(branch, [], parent);
+  return { bindings, plans, blocks, reason };
+}
+function analyzeCompilerOwnedKeyedRowHostBlocks(shape, statesByValue, safeGlobals, listNames, parent, allocateId) {
+  if (shape.events.length > 0) return void 0;
+  const row = core.types.cloneNode(shape.row, true);
+  row.openingElement.attributes = row.openingElement.attributes.filter(
+    (attribute) => !core.types.isJSXAttribute(attribute) || jsxAttributeName(attribute) !== "key"
+  );
+  const analysis = analyzeRecursiveHostTree(
+    row,
+    statesByValue,
+    safeGlobals,
+    listNames,
+    parent,
+    allocateId
+  );
+  if (analysis.reason || analysis.plans.length === 0) {
+    return void 0;
+  }
+  return {
+    row,
+    bindings: analysis.bindings,
+    descriptorBlocks: analysis.blocks,
+    nestedPlans: analysis.plans
+  };
+}
+function analyzeHostConditionalContainer(container, statesByValue, safeGlobals, listNames, parent, allocateId) {
   const containerName = container.openingElement.name;
   if (!core.types.isJSXIdentifier(containerName) || !/^[a-z]/.test(containerName.name) || containerName.name === "svg") {
     return void 0;
@@ -1031,8 +1538,22 @@ function analyzeHostConditionalContainer(container, statesByValue, safeGlobals)
   }
   const shape = conditionalBlockShape(children[0].expression);
   if (!shape || validateDerivedExpression(shape.test, safeGlobals)) return void 0;
-  const truthyAnalysis = shape.truthy ? analyzeHostConditionalTree(shape.truthy, safeGlobals) : { bindings: [] };
-  const falsyAnalysis = shape.falsy ? analyzeHostConditionalTree(shape.falsy, safeGlobals) : { bindings: [] };
+  const truthyAnalysis = shape.truthy ? analyzeRecursiveHostTree(
+    shape.truthy,
+    statesByValue,
+    safeGlobals,
+    listNames,
+    parent,
+    allocateId
+  ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
+  const falsyAnalysis = shape.falsy ? analyzeRecursiveHostTree(
+    shape.falsy,
+    statesByValue,
+    safeGlobals,
+    listNames,
+    parent,
+    allocateId
+  ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
   if (truthyAnalysis.reason || falsyAnalysis.reason) return void 0;
   const dependencies = new Set(collectStateDependencies(shape.test, statesByValue));
   for (const binding of [...truthyAnalysis.bindings || [], ...falsyAnalysis.bindings || []]) {
@@ -1047,10 +1568,12 @@ function analyzeHostConditionalContainer(container, statesByValue, safeGlobals)
     truthy: shape.truthy,
     falsy: shape.falsy,
     truthyBindings: truthyAnalysis.bindings || [],
-    falsyBindings: falsyAnalysis.bindings || []
+    falsyBindings: falsyAnalysis.bindings || [],
+    descriptorBlocks: new Map([...truthyAnalysis.blocks, ...falsyAnalysis.blocks]),
+    nestedPlans: [...truthyAnalysis.plans, ...falsyAnalysis.plans]
   };
 }
-function analyzeConditionalRangesContainer(container, statesByValue, safeGlobals, allowSingleRange = false) {
+function analyzeConditionalRangesContainer(container, statesByValue, safeGlobals, allowSingleRange, listNames, parent, allocateId) {
   const containerName = container.openingElement.name;
   if (!core.types.isJSXIdentifier(containerName) || !/^[a-z]/.test(containerName.name) || containerName.name === "svg" || container.openingElement.attributes.some(
     (attribute) => core.types.isJSXSpreadAttribute(attribute) || core.types.isJSXAttribute(attribute) && core.types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
@@ -1061,14 +1584,34 @@ function analyzeConditionalRangesContainer(container, statesByValue, safeGlobals
   if (children.length < (allowSingleRange ? 1 : 2)) return void 0;
   const ranges = [];
   const dependencies = /* @__PURE__ */ new Set();
+  const descriptorBlocks = /* @__PURE__ */ new Map();
+  const nestedPlans = [];
+  const staticBindings = [];
   let staticBefore = 0;
   for (const child of children) {
     if (core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)) {
       const shape = conditionalBlockShape(child.expression);
       if (shape && !validateDerivedExpression(shape.test, safeGlobals)) {
-        const truthyAnalysis = shape.truthy ? analyzeHostConditionalTree(shape.truthy, safeGlobals) : { bindings: [] };
-        const falsyAnalysis = shape.falsy ? analyzeHostConditionalTree(shape.falsy, safeGlobals) : { bindings: [] };
+        const truthyAnalysis = shape.truthy ? analyzeRecursiveHostTree(
+          shape.truthy,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          parent,
+          allocateId
+        ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
+        const falsyAnalysis = shape.falsy ? analyzeRecursiveHostTree(
+          shape.falsy,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          parent,
+          allocateId
+        ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
         if (truthyAnalysis.reason || falsyAnalysis.reason) return void 0;
+        nestedPlans.push(...truthyAnalysis.plans, ...falsyAnalysis.plans);
+        for (const [element, plan] of truthyAnalysis.blocks) descriptorBlocks.set(element, plan);
+        for (const [element, plan] of falsyAnalysis.blocks) descriptorBlocks.set(element, plan);
         const rangeDependencies = new Set(collectStateDependencies(shape.test, statesByValue));
         for (const binding of [
           ...truthyAnalysis.bindings || [],
@@ -1094,14 +1637,158 @@ function analyzeConditionalRangesContainer(container, statesByValue, safeGlobals
       }
     }
     if (!core.types.isJSXElement(child) || !isHostElement(child)) return void 0;
-    if (!isStaticRangeSibling(child, statesByValue, safeGlobals)) return void 0;
+    const staticAnalysis = analyzeHostConditionalTree(child, safeGlobals, true, statesByValue);
+    if (staticAnalysis.reason) return void 0;
+    for (const binding of staticAnalysis.bindings || []) {
+      staticBindings.push({
+        ...binding,
+        segment: ranges.length,
+        sibling: staticBefore
+      });
+      for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+        dependencies.add(dependency);
+      }
+    }
     staticBefore += 1;
   }
   if (ranges.length === 0) return void 0;
   return {
     ranges,
     trailing: staticBefore,
-    dependencies: [...dependencies].sort((left, right) => left - right)
+    dependencies: [...dependencies].sort((left, right) => left - right),
+    staticBindings,
+    descriptorBlocks,
+    nestedPlans
+  };
+}
+function analyzeMixedRangesContainer(container, statesByValue, safeGlobals, listNames, parent, allocateId) {
+  const containerName = container.openingElement.name;
+  if (!core.types.isJSXIdentifier(containerName) || !/^[a-z]/.test(containerName.name) || containerName.name === "svg" || container.openingElement.attributes.some(
+    (attribute) => core.types.isJSXSpreadAttribute(attribute) || core.types.isJSXAttribute(attribute) && core.types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  const children = meaningfulJsxChildren(container);
+  if (children.length < 2) return void 0;
+  const ranges = [];
+  const dependencies = /* @__PURE__ */ new Set();
+  const descriptorBlocks = /* @__PURE__ */ new Map();
+  const nestedPlans = [];
+  const staticBindings = [];
+  let conditionalCount = 0;
+  let keyedCount = 0;
+  let staticBefore = 0;
+  const mergeAnalysis = (analysis) => {
+    if (analysis.reason) return false;
+    nestedPlans.push(...analysis.plans);
+    for (const [element, plan] of analysis.blocks) descriptorBlocks.set(element, plan);
+    for (const binding of analysis.bindings) {
+      for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+        dependencies.add(dependency);
+      }
+    }
+    return true;
+  };
+  for (const child of children) {
+    if (core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)) {
+      const shape = conditionalBlockShape(child.expression);
+      if (shape && !validateDerivedExpression(shape.test, safeGlobals)) {
+        const truthyAnalysis = shape.truthy ? analyzeRecursiveHostTree(
+          shape.truthy,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          parent,
+          allocateId
+        ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
+        const falsyAnalysis = shape.falsy ? analyzeRecursiveHostTree(
+          shape.falsy,
+          statesByValue,
+          safeGlobals,
+          listNames,
+          parent,
+          allocateId
+        ) : { bindings: [], plans: [], blocks: /* @__PURE__ */ new Map() };
+        if (!mergeAnalysis(truthyAnalysis) || !mergeAnalysis(falsyAnalysis)) return void 0;
+        for (const dependency of collectStateDependencies(shape.test, statesByValue)) {
+          dependencies.add(dependency);
+        }
+        ranges.push({
+          rangeKind: "conditional",
+          before: staticBefore,
+          source: child.expression,
+          test: cloneExpression(shape.test),
+          logical: shape.logical,
+          truthy: shape.truthy,
+          falsy: shape.falsy,
+          truthyBindings: truthyAnalysis.bindings,
+          falsyBindings: falsyAnalysis.bindings
+        });
+        conditionalCount += 1;
+        staticBefore = 0;
+        continue;
+      }
+    }
+    const keyed = analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames, true);
+    if (keyed) {
+      if (keyed.events.length > 0) return void 0;
+      const row = core.types.cloneNode(keyed.row, true);
+      row.openingElement.attributes = row.openingElement.attributes.filter(
+        (attribute) => !core.types.isJSXAttribute(attribute) || jsxAttributeName(attribute) !== "key"
+      );
+      const rowAnalysis = analyzeRecursiveHostTree(
+        row,
+        statesByValue,
+        safeGlobals,
+        listNames,
+        parent,
+        allocateId
+      );
+      if (!mergeAnalysis(rowAnalysis)) return void 0;
+      for (const dependency of keyed.dependencies) dependencies.add(dependency);
+      ranges.push({
+        rangeKind: "keyed",
+        before: staticBefore,
+        source: keyed.source,
+        collection: keyed.collection,
+        keyCallback: keyed.keyCallback,
+        renderCallback: keyed.renderCallback,
+        row,
+        bindings: rowAnalysis.bindings,
+        syntax: keyed.syntax
+      });
+      keyedCount += 1;
+      staticBefore = 0;
+      continue;
+    }
+    if (!core.types.isJSXElement(child) || !isHostElement(child)) return void 0;
+    const staticAnalysis = analyzeRecursiveHostTree(
+      child,
+      statesByValue,
+      safeGlobals,
+      listNames,
+      parent,
+      allocateId
+    );
+    if (staticAnalysis.reason) return void 0;
+    for (const binding of staticAnalysis.bindings) {
+      staticBindings.push({
+        ...binding,
+        segment: ranges.length,
+        sibling: staticBefore
+      });
+    }
+    if (!mergeAnalysis(staticAnalysis)) return void 0;
+    staticBefore += 1;
+  }
+  if (conditionalCount === 0 || keyedCount === 0) return void 0;
+  return {
+    ranges,
+    trailing: staticBefore,
+    dependencies: [...dependencies].sort((left, right) => left - right),
+    staticBindings,
+    descriptorBlocks,
+    nestedPlans
   };
 }
 function keyedListBoundary(blockRuntime, plan, source) {
@@ -1126,14 +1813,14 @@ function keyedListBoundary(blockRuntime, plan, source) {
     true
   );
 }
-function hostElementDescriptor(element) {
+function hostElementDescriptor(element, descriptorBlocks = /* @__PURE__ */ new Map()) {
   const tag = element.openingElement.name;
   const attributes = [];
   const styles = [];
   for (const attribute of element.openingElement.attributes) {
     if (!core.types.isJSXAttribute(attribute)) continue;
     const name = jsxAttributeName(attribute);
-    if (!name || name === "key" || /^on[A-Z]/.test(name)) continue;
+    if (!name || name === "key" || name === "ref" || /^on[A-Z]/.test(name)) continue;
     if (name === "style") {
       if (core.types.isJSXExpressionContainer(attribute.value) && core.types.isObjectExpression(attribute.value.expression)) {
         for (const property of attribute.value.expression.properties) {
@@ -1157,24 +1844,93 @@ function hostElementDescriptor(element) {
       ])
     );
   }
+  const block = descriptorBlocks.get(element);
+  const conditionalBySource = /* @__PURE__ */ new Map();
+  const keyedBySource = /* @__PURE__ */ new Map();
+  if (block?.kind === "nested-host-conditional-ranges") {
+    for (const range of block.ranges) conditionalBySource.set(range.source, range);
+  } else if (block?.kind === "nested-host-keyed-ranges") {
+    for (const range of block.ranges) keyedBySource.set(range.source, range);
+  } else if (block?.kind === "nested-host-mixed-ranges") {
+    for (const range of block.ranges) {
+      if (range.rangeKind === "conditional") conditionalBySource.set(range.source, range);
+      else keyedBySource.set(range.source, range);
+    }
+  }
   const children = [];
   for (const child of element.children) {
     if (core.types.isJSXText(child)) {
       const text = cleanJsxText(child.value);
       if (text) children.push(core.types.stringLiteral(text));
     } else if (core.types.isJSXElement(child)) {
-      children.push(hostElementDescriptor(child));
+      const keyedRange = keyedBySource.get(child);
+      if (keyedRange) {
+        if (block?.kind !== "nested-host-keyed-ranges") {
+          children.push(keyedRangeDescriptorChildren(keyedRange, descriptorBlocks));
+        }
+      } else {
+        children.push(hostElementDescriptor(child, descriptorBlocks));
+      }
     } else if (core.types.isJSXExpressionContainer(child) && !core.types.isJSXEmptyExpression(child.expression)) {
-      children.push(cloneExpression(child.expression));
+      const conditionalRange = conditionalBySource.get(child.expression);
+      const keyedRange = keyedBySource.get(child.expression);
+      if (conditionalRange) {
+        children.push(conditionalRangeDescriptorChild(conditionalRange, descriptorBlocks));
+      } else if (keyedRange) {
+        if (block?.kind !== "nested-host-keyed-ranges") {
+          children.push(keyedRangeDescriptorChildren(keyedRange, descriptorBlocks));
+        }
+      } else {
+        children.push(cloneExpression(child.expression));
+      }
     }
   }
-  return core.types.objectExpression([
+  const properties = [
     core.types.objectProperty(core.types.identifier("kind"), core.types.stringLiteral("element")),
     core.types.objectProperty(core.types.identifier("tag"), core.types.stringLiteral(tag.name)),
     core.types.objectProperty(core.types.identifier("attributes"), core.types.arrayExpression(attributes)),
     core.types.objectProperty(core.types.identifier("styles"), core.types.arrayExpression(styles)),
     core.types.objectProperty(core.types.identifier("children"), core.types.arrayExpression(children))
-  ]);
+  ];
+  if (block) {
+    properties.push(
+      core.types.objectProperty(core.types.identifier("block"), nestedHostBlockObject(block, descriptorBlocks))
+    );
+  }
+  return core.types.objectExpression(properties);
+}
+function conditionalRangeDescriptorChild(range, descriptorBlocks) {
+  const truthy = range.truthy ? hostElementDescriptor(range.truthy, descriptorBlocks) : core.types.nullLiteral();
+  if (range.logical) {
+    return core.types.logicalExpression("&&", cloneExpression(range.test), truthy);
+  }
+  return core.types.conditionalExpression(
+    cloneExpression(range.test),
+    truthy,
+    range.falsy ? hostElementDescriptor(range.falsy, descriptorBlocks) : core.types.nullLiteral()
+  );
+}
+function keyedRangeDescriptorChildren(range, descriptorBlocks) {
+  const parameters = range.renderCallback.params.map(
+    (parameter) => core.types.cloneNode(parameter, true)
+  );
+  const callback = core.types.arrowFunctionExpression(
+    parameters,
+    hostElementDescriptor(range.row, descriptorBlocks)
+  );
+  const collection = cloneExpression(range.collection);
+  if (range.syntax === "map") {
+    return core.types.callExpression(core.types.memberExpression(collection, core.types.identifier("map")), [callback]);
+  }
+  return core.types.callExpression(
+    core.types.memberExpression(
+      core.types.callExpression(core.types.memberExpression(core.types.identifier("Array"), core.types.identifier("from")), [
+        core.types.logicalExpression("||", collection, core.types.arrayExpression([]))
+      ]),
+      core.types.identifier("map")
+    ),
+    [callback]
+  );
 }
 function keyedRowBindingObject(binding, parameters) {
   const properties = [
@@ -1182,6 +1938,12 @@ function keyedRowBindingObject(binding, parameters) {
     core.types.objectProperty(
       core.types.identifier("path"),
       core.types.arrayExpression(binding.path.map((part) => core.types.numericLiteral(part)))
+    ),
+    core.types.objectProperty(
+      core.types.identifier("dependencies"),
+      core.types.arrayExpression(
+        (binding.dependencies || []).map((dependency) => core.types.numericLiteral(dependency))
+      )
     )
   ];
   if (binding.name) {
@@ -1198,6 +1960,16 @@ function keyedRowBindingObject(binding, parameters) {
   );
   return core.types.objectExpression(properties);
 }
+function staticRangeBindingObject(binding) {
+  const value = keyedRowBindingObject(binding, []);
+  value.properties.splice(
+    1,
+    0,
+    core.types.objectProperty(core.types.identifier("segment"), core.types.numericLiteral(binding.segment)),
+    core.types.objectProperty(core.types.identifier("sibling"), core.types.numericLiteral(binding.sibling))
+  );
+  return value;
+}
 function uniqueLocalIdentifier(base, nodes) {
   const names = /* @__PURE__ */ new Set();
   for (const node of nodes) {
@@ -1314,6 +2086,10 @@ function keyedRowEventObject(event, renderParameters) {
   const parameters = [core.types.cloneNode(renderParameters[0], true), index, syntheticEvent];
   return core.types.objectExpression([
     core.types.objectProperty(core.types.identifier("name"), core.types.stringLiteral(event.name)),
+    core.types.objectProperty(
+      core.types.identifier("path"),
+      core.types.arrayExpression(event.path.map((part) => core.types.numericLiteral(part)))
+    ),
     core.types.objectProperty(
       core.types.identifier("invoke"),
       core.types.arrowFunctionExpression(
@@ -1383,6 +2159,7 @@ function keyedRowsBoundary(blockRuntime, plan) {
     plan.source,
     ...plan.conditionals.map((conditional) => conditional.test)
   ]);
+  const delegatedEvents = canDelegateKeyedRowEvents(plan);
   const renderSource = keyedRowsRenderSource(plan, eventFactory, conditionalFactory);
   const renderFactoryParameters = plan.conditionals.length > 0 ? [core.types.cloneNode(eventFactory), core.types.cloneNode(conditionalFactory)] : plan.events.length > 0 ? [core.types.cloneNode(eventFactory)] : [];
   return core.types.jsxElement(
@@ -1400,6 +2177,14 @@ function keyedRowsBoundary(blockRuntime, plan) {
           core.types.jsxIdentifier("items"),
           core.types.jsxExpressionContainer(core.types.arrowFunctionExpression([], cloneExpression(plan.collection)))
         ),
+        core.types.jsxAttribute(
+          core.types.jsxIdentifier("structureDependencies"),
+          core.types.jsxExpressionContainer(
+            core.types.arrayExpression(
+              plan.structureDependencies.map((dependency) => core.types.numericLiteral(dependency))
+            )
+          )
+        ),
         core.types.jsxAttribute(
           core.types.jsxIdentifier("rowKey"),
           core.types.jsxExpressionContainer(core.types.cloneNode(plan.keyCallback, true))
@@ -1409,7 +2194,7 @@ function keyedRowsBoundary(blockRuntime, plan) {
           core.types.jsxExpressionContainer(
             core.types.arrowFunctionExpression(
               parameters.map((parameter) => core.types.cloneNode(parameter, true)),
-              hostElementDescriptor(plan.row)
+              hostElementDescriptor(plan.row, plan.descriptorBlocks)
             )
           )
         ),
@@ -1429,7 +2214,13 @@ function keyedRowsBoundary(blockRuntime, plan) {
                 plan.events.map((event) => keyedRowEventObject(event, parameters))
               )
             )
-          )
+          ),
+          ...delegatedEvents ? [
+            core.types.jsxAttribute(
+              core.types.jsxIdentifier("delegateEvents"),
+              core.types.jsxExpressionContainer(core.types.booleanLiteral(true))
+            )
+          ] : []
         ] : [],
         ...plan.conditionals.length > 0 ? [
           core.types.jsxAttribute(
@@ -1442,6 +2233,12 @@ function keyedRowsBoundary(blockRuntime, plan) {
               )
             )
           )
+        ] : [],
+        ...plan.descriptorBlocks?.size ? [
+          core.types.jsxAttribute(
+            core.types.jsxIdentifier("hostBlocks"),
+            core.types.jsxExpressionContainer(core.types.booleanLiteral(true))
+          )
         ] : []
       ],
       true
@@ -1451,7 +2248,7 @@ function keyedRowsBoundary(blockRuntime, plan) {
     true
   );
 }
-function keyedRangeObject(range) {
+function keyedRangeObject(range, descriptorBlocks = /* @__PURE__ */ new Map()) {
   const parameters = range.renderCallback.params.map(
     (parameter) => core.types.cloneNode(parameter, true)
   );
@@ -1466,7 +2263,7 @@ function keyedRangeObject(range) {
       core.types.identifier("create"),
       core.types.arrowFunctionExpression(
         parameters.map((parameter) => core.types.cloneNode(parameter, true)),
-        hostElementDescriptor(range.row)
+        hostElementDescriptor(range.row, descriptorBlocks)
       )
     ),
     core.types.objectProperty(
@@ -1510,6 +2307,12 @@ function keyedRangesBoundary(blockRuntime, plan) {
         core.types.jsxAttribute(
           core.types.jsxIdentifier("trailing"),
           core.types.jsxExpressionContainer(core.types.numericLiteral(plan.trailing))
+        ),
+        core.types.jsxAttribute(
+          core.types.jsxIdentifier("bindings"),
+          core.types.jsxExpressionContainer(
+            core.types.arrayExpression(plan.staticBindings.map(staticRangeBindingObject))
+          )
         )
       ],
       true
@@ -1519,11 +2322,11 @@ function keyedRangesBoundary(blockRuntime, plan) {
     true
   );
 }
-function hostConditionalBranchObject(branch, bindings) {
+function hostConditionalBranchObject(branch, bindings, descriptorBlocks = /* @__PURE__ */ new Map()) {
   return core.types.objectExpression([
     core.types.objectProperty(
       core.types.identifier("create"),
-      core.types.arrowFunctionExpression([], hostElementDescriptor(branch))
+      core.types.arrowFunctionExpression([], hostElementDescriptor(branch, descriptorBlocks))
     ),
     core.types.objectProperty(
       core.types.identifier("bindings"),
@@ -1552,7 +2355,9 @@ function hostConditionalBoundary(blockRuntime, plan) {
     attributes.push(
       core.types.jsxAttribute(
         core.types.jsxIdentifier("truthy"),
-        core.types.jsxExpressionContainer(hostConditionalBranchObject(plan.truthy, plan.truthyBindings))
+        core.types.jsxExpressionContainer(
+          hostConditionalBranchObject(plan.truthy, plan.truthyBindings, plan.descriptorBlocks)
+        )
       )
     );
   }
@@ -1560,13 +2365,15 @@ function hostConditionalBoundary(blockRuntime, plan) {
     attributes.push(
       core.types.jsxAttribute(
         core.types.jsxIdentifier("falsy"),
-        core.types.jsxExpressionContainer(hostConditionalBranchObject(plan.falsy, plan.falsyBindings))
+        core.types.jsxExpressionContainer(
+          hostConditionalBranchObject(plan.falsy, plan.falsyBindings, plan.descriptorBlocks)
+        )
       )
     );
   }
   return core.types.jsxElement(core.types.jsxOpeningElement(name, attributes, true), null, [], true);
 }
-function conditionalRangeObject(range) {
+function conditionalRangeObject(range, descriptorBlocks = /* @__PURE__ */ new Map()) {
   const properties = [
     core.types.objectProperty(core.types.identifier("before"), core.types.numericLiteral(range.before)),
     core.types.objectProperty(
@@ -1581,7 +2388,7 @@ function conditionalRangeObject(range) {
     properties.push(
       core.types.objectProperty(
         core.types.identifier("truthy"),
-        hostConditionalBranchObject(range.truthy, range.truthyBindings)
+        hostConditionalBranchObject(range.truthy, range.truthyBindings, descriptorBlocks)
       )
     );
   }
@@ -1589,12 +2396,78 @@ function conditionalRangeObject(range) {
     properties.push(
       core.types.objectProperty(
         core.types.identifier("falsy"),
-        hostConditionalBranchObject(range.falsy, range.falsyBindings)
+        hostConditionalBranchObject(range.falsy, range.falsyBindings, descriptorBlocks)
       )
     );
   }
   return core.types.objectExpression(properties);
 }
+function nestedHostBlockObject(plan, descriptorBlocks) {
+  const kind = plan.kind === "nested-host-conditional-ranges" ? "conditional-ranges" : plan.kind === "nested-host-keyed-ranges" ? "keyed-ranges" : "mixed-ranges";
+  return core.types.objectExpression([
+    core.types.objectProperty(core.types.identifier("kind"), core.types.stringLiteral(kind)),
+    core.types.objectProperty(core.types.identifier("id"), core.types.numericLiteral(plan.id)),
+    core.types.objectProperty(
+      core.types.identifier("ranges"),
+      core.types.arrayExpression(
+        plan.kind === "nested-host-conditional-ranges" ? plan.ranges.map((range) => conditionalRangeObject(range, descriptorBlocks)) : plan.kind === "nested-host-keyed-ranges" ? plan.ranges.map((range) => keyedRangeObject(range, descriptorBlocks)) : plan.ranges.map((range) => mixedRangeObject(range, descriptorBlocks))
+      )
+    ),
+    core.types.objectProperty(core.types.identifier("trailing"), core.types.numericLiteral(plan.trailing)),
+    core.types.objectProperty(
+      core.types.identifier("bindings"),
+      core.types.arrayExpression(plan.staticBindings.map(staticRangeBindingObject))
+    ),
+    ...plan.kind === "nested-host-keyed-ranges" ? [core.types.objectProperty(core.types.identifier("staticChildrenOnly"), core.types.booleanLiteral(true))] : []
+  ]);
+}
+function mixedRangeObject(range, descriptorBlocks) {
+  const value = range.rangeKind === "conditional" ? conditionalRangeObject(range, descriptorBlocks) : keyedRangeObject(range, descriptorBlocks);
+  value.properties.unshift(
+    core.types.objectProperty(core.types.identifier("kind"), core.types.stringLiteral(range.rangeKind))
+  );
+  return value;
+}
+function mixedRangesBoundary(blockRuntime, plan) {
+  const name = core.types.jsxMemberExpression(
+    core.types.jsxIdentifier(blockRuntime.name),
+    core.types.jsxIdentifier("MixedRanges")
+  );
+  const source = core.types.cloneNode(plan.source, true);
+  const rootRefIndex = source.openingElement.attributes.findIndex(
+    (attribute) => core.types.isJSXAttribute(attribute) && jsxAttributeName(attribute) === "ref"
+  );
+  const rootRef = rootRefIndex >= 0 ? source.openingElement.attributes.splice(rootRefIndex, 1)[0] : void 0;
+  const nestedPlan = {
+    kind: "nested-host-mixed-ranges",
+    id: plan.id,
+    parent: plan.parent,
+    dependencies: plan.dependencies,
+    source: plan.source,
+    ranges: plan.ranges,
+    trailing: plan.trailing,
+    staticBindings: plan.staticBindings
+  };
+  const descriptorBlocks = new Map(plan.descriptorBlocks);
+  descriptorBlocks.set(plan.source, nestedPlan);
+  const attributes = [
+    core.types.jsxAttribute(core.types.jsxIdentifier("id"), core.types.jsxExpressionContainer(core.types.numericLiteral(plan.id))),
+    core.types.jsxAttribute(
+      core.types.jsxIdentifier("render"),
+      core.types.jsxExpressionContainer(core.types.arrowFunctionExpression([], source))
+    ),
+    core.types.jsxAttribute(
+      core.types.jsxIdentifier("create"),
+      core.types.jsxExpressionContainer(
+        core.types.arrowFunctionExpression([], hostElementDescriptor(plan.source, descriptorBlocks))
+      )
+    )
+  ];
+  if (rootRef?.value) {
+    attributes.push(core.types.jsxAttribute(core.types.jsxIdentifier("rootRef"), core.types.cloneNode(rootRef.value, true)));
+  }
+  return core.types.jsxElement(core.types.jsxOpeningElement(name, attributes, true), null, [], true);
+}
 function conditionalRangesBoundary(blockRuntime, plan) {
   const name = core.types.jsxMemberExpression(
     core.types.jsxIdentifier(blockRuntime.name),
@@ -1614,12 +2487,20 @@ function conditionalRangesBoundary(blockRuntime, plan) {
     core.types.jsxAttribute(
       core.types.jsxIdentifier("ranges"),
       core.types.jsxExpressionContainer(
-        core.types.arrayExpression(plan.ranges.map((range) => conditionalRangeObject(range)))
+        core.types.arrayExpression(
+          plan.ranges.map((range) => conditionalRangeObject(range, plan.descriptorBlocks))
+        )
       )
     ),
     core.types.jsxAttribute(
       core.types.jsxIdentifier("trailing"),
       core.types.jsxExpressionContainer(core.types.numericLiteral(plan.trailing))
+    ),
+    core.types.jsxAttribute(
+      core.types.jsxIdentifier("bindings"),
+      core.types.jsxExpressionContainer(
+        core.types.arrayExpression(plan.staticBindings.map(staticRangeBindingObject))
+      )
     )
   ];
   if (rootRef?.value) {
@@ -1792,6 +2673,41 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
       }
       if (core.types.isJSXElement(child)) {
         if (isHostElement(child)) {
+          const mixedRangeStart = nextId;
+          const mixedRangeId = nextId++;
+          const mixedRanges = insideConditional ? void 0 : analyzeMixedRangesContainer(
+            child,
+            statesByValue,
+            safeGlobals,
+            listNames,
+            mixedRangeId,
+            () => nextId++
+          );
+          if (mixedRanges) {
+            plans.push({
+              kind: "mixed-ranges",
+              id: mixedRangeId,
+              parent,
+              dependencies: mixedRanges.dependencies,
+              source: child,
+              ranges: mixedRanges.ranges,
+              trailing: mixedRanges.trailing,
+              staticBindings: mixedRanges.staticBindings,
+              descriptorBlocks: mixedRanges.descriptorBlocks
+            });
+            plans.push(...mixedRanges.nestedPlans);
+            for (const range of mixedRanges.ranges) {
+              if (range.rangeKind === "conditional") {
+                conditionalExpressions.add(range.source);
+              } else if (core.types.isJSXElement(range.source)) {
+                ownedElements.add(range.source);
+              } else {
+                keyedExpressions.add(range.source);
+              }
+            }
+            continue;
+          }
+          nextId = mixedRangeStart;
           const keyedRanges = insideConditional ? void 0 : analyzeKeyedRangesContainer(child, statesByValue, safeGlobals, listNames);
           if (keyedRanges) {
             plans.push({
@@ -1801,7 +2717,8 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
               dependencies: keyedRanges.dependencies,
               source: child,
               ranges: keyedRanges.ranges,
-              trailing: keyedRanges.trailing
+              trailing: keyedRanges.trailing,
+              staticBindings: keyedRanges.staticBindings
             });
             for (const range of keyedRanges.ranges) {
               if (core.types.isJSXElement(range.source)) ownedElements.add(range.source);
@@ -1809,58 +2726,102 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
             }
             continue;
           }
-          const conditionalRanges = insideConditional ? void 0 : analyzeConditionalRangesContainer(child, statesByValue, safeGlobals);
+          const conditionalRangeStart = nextId;
+          const conditionalRangeId = nextId++;
+          const conditionalRanges = insideConditional ? void 0 : analyzeConditionalRangesContainer(
+            child,
+            statesByValue,
+            safeGlobals,
+            false,
+            listNames,
+            conditionalRangeId,
+            () => nextId++
+          );
           if (conditionalRanges) {
             plans.push({
               kind: "conditional-ranges",
-              id: nextId++,
+              id: conditionalRangeId,
               parent,
               dependencies: conditionalRanges.dependencies,
               source: child,
               ranges: conditionalRanges.ranges,
-              trailing: conditionalRanges.trailing
+              trailing: conditionalRanges.trailing,
+              staticBindings: conditionalRanges.staticBindings,
+              descriptorBlocks: conditionalRanges.descriptorBlocks
             });
+            plans.push(...conditionalRanges.nestedPlans || []);
             for (const range of conditionalRanges.ranges) {
               conditionalExpressions.add(range.source);
             }
             continue;
           }
+          nextId = conditionalRangeStart;
+          const hostConditionalStart = nextId;
+          const hostConditionalId = nextId++;
           const hostConditional = analyzeHostConditionalContainer(
             child,
             statesByValue,
-            safeGlobals
+            safeGlobals,
+            listNames,
+            hostConditionalId,
+            () => nextId++
           );
           if (hostConditional) {
             plans.push({
               kind: "host-conditional",
-              id: nextId++,
+              id: hostConditionalId,
               parent,
               source: child,
               ...hostConditional
             });
+            plans.push(...hostConditional.nestedPlans || []);
             ownedElements.add(child);
             continue;
           }
+          nextId = hostConditionalStart;
+          const keyedRowsStart = nextId;
+          const keyedRowsId = nextId++;
           const keyedRows = analyzeKeyedRowsContainer(child, statesByValue, safeGlobals, listNames);
           if (keyedRows) {
+            const nestedStart = nextId;
+            const hostBlocks = analyzeCompilerOwnedKeyedRowHostBlocks(
+              keyedRows,
+              statesByValue,
+              safeGlobals,
+              listNames,
+              keyedRowsId,
+              () => nextId++
+            );
+            if (!hostBlocks) nextId = nestedStart;
+            if (keyedRows.rowReason && !hostBlocks) {
+              nextId = keyedRowsStart;
+              const nested2 = visitHost(child, parent, insideConditional);
+              if (nested2.reason) return { dependencies, reason: nested2.reason };
+              mergeDependencies(dependencies, nested2.dependencies);
+              continue;
+            }
             plans.push({
               kind: "keyed-rows",
-              id: nextId++,
+              id: keyedRowsId,
               parent,
               dependencies: keyedRows.dependencies,
               source: child,
               collection: keyedRows.collection,
+              structureDependencies: keyedRows.structureDependencies,
               keyCallback: keyedRows.keyCallback,
               renderCallback: keyedRows.renderCallback,
-              row: keyedRows.row,
-              bindings: keyedRows.bindings,
+              row: hostBlocks?.row || keyedRows.row,
+              bindings: hostBlocks?.bindings || keyedRows.bindings,
               events: keyedRows.events,
-              conditionals: keyedRows.conditionals,
+              conditionals: hostBlocks ? [] : keyedRows.conditionals,
+              descriptorBlocks: hostBlocks?.descriptorBlocks,
               syntax: keyedRows.syntax
             });
+            plans.push(...hostBlocks?.nestedPlans || []);
             ownedElements.add(child);
             continue;
           }
+          nextId = keyedRowsStart;
           const nested = visitHost(child, parent, insideConditional);
           if (nested.reason) return { dependencies, reason: nested.reason };
           mergeDependencies(dependencies, nested.dependencies);
@@ -1957,6 +2918,46 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
     }
     return { dependencies };
   };
+  const rootMixedRangeStart = nextId;
+  const rootMixedRangeId = nextId++;
+  const rootMixedRanges = analyzeMixedRangesContainer(
+    root,
+    statesByValue,
+    safeGlobals,
+    listNames,
+    rootMixedRangeId,
+    () => nextId++
+  );
+  if (rootMixedRanges) {
+    plans.push({
+      kind: "mixed-ranges",
+      id: rootMixedRangeId,
+      dependencies: rootMixedRanges.dependencies,
+      source: root,
+      ranges: rootMixedRanges.ranges,
+      trailing: rootMixedRanges.trailing,
+      staticBindings: rootMixedRanges.staticBindings,
+      descriptorBlocks: rootMixedRanges.descriptorBlocks
+    });
+    plans.push(...rootMixedRanges.nestedPlans);
+    for (const range of rootMixedRanges.ranges) {
+      if (range.rangeKind === "conditional") {
+        conditionalExpressions.add(range.source);
+      } else if (core.types.isJSXElement(range.source)) {
+        ownedElements.add(range.source);
+      } else {
+        keyedExpressions.add(range.source);
+      }
+    }
+    return {
+      plans,
+      componentElements,
+      conditionalExpressions,
+      ownedElements,
+      keyedExpressions
+    };
+  }
+  nextId = rootMixedRangeStart;
   const rootRanges = analyzeKeyedRangesContainer(root, statesByValue, safeGlobals, listNames, true);
   if (rootRanges) {
     plans.push({
@@ -1965,7 +2966,8 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
       dependencies: rootRanges.dependencies,
       source: root,
       ranges: rootRanges.ranges,
-      trailing: rootRanges.trailing
+      trailing: rootRanges.trailing,
+      staticBindings: rootRanges.staticBindings
     });
     for (const range of rootRanges.ranges) {
       if (core.types.isJSXElement(range.source)) ownedElements.add(range.source);
@@ -1979,21 +2981,29 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
       keyedExpressions
     };
   }
+  const rootConditionalRangeStart = nextId;
+  const rootConditionalRangeId = nextId++;
   const rootConditionalRanges = analyzeConditionalRangesContainer(
     root,
     statesByValue,
     safeGlobals,
-    true
+    true,
+    listNames,
+    rootConditionalRangeId,
+    () => nextId++
   );
   if (rootConditionalRanges) {
     plans.push({
       kind: "conditional-ranges",
-      id: nextId++,
+      id: rootConditionalRangeId,
       dependencies: rootConditionalRanges.dependencies,
       source: root,
       ranges: rootConditionalRanges.ranges,
-      trailing: rootConditionalRanges.trailing
+      trailing: rootConditionalRanges.trailing,
+      staticBindings: rootConditionalRanges.staticBindings,
+      descriptorBlocks: rootConditionalRanges.descriptorBlocks
     });
+    plans.push(...rootConditionalRanges.nestedPlans || []);
     for (const range of rootConditionalRanges.ranges) {
       conditionalExpressions.add(range.source);
     }
@@ -2005,6 +3015,7 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
       keyedExpressions
     };
   }
+  nextId = rootConditionalRangeStart;
   const result = visitHost(root, void 0, false);
   if (result.reason) return { reason: result.reason };
   return {
@@ -2042,6 +3053,9 @@ function lowerComposableBlocks(root, plans, blockRuntime, listNames) {
     plans.map((plan) => [plan.source, plan])
   );
   const rootPlan = planBySource.get(root);
+  if (rootPlan?.kind === "mixed-ranges") {
+    return mixedRangesBoundary(blockRuntime, rootPlan);
+  }
   if (rootPlan?.kind === "keyed-ranges") {
     return keyedRangesBoundary(blockRuntime, rootPlan);
   }
@@ -2055,6 +3069,9 @@ function lowerComposableBlocks(root, plans, blockRuntime, listNames) {
         if (plan2?.kind === "host-conditional") {
           return hostConditionalBoundary(blockRuntime, plan2);
         }
+        if (plan2?.kind === "mixed-ranges") {
+          return mixedRangesBoundary(blockRuntime, plan2);
+        }
         if (plan2?.kind === "keyed-rows") {
           return keyedRowsBoundary(blockRuntime, plan2);
         }
@@ -2104,6 +3121,31 @@ function assignStableBindingTargets(bindings) {
     binding.target = target;
   }
 }
+function markShortCircuitBindings(bindings) {
+  for (const binding of bindings) {
+    if (binding.kind === "block" || binding.dependencies.length < 2) continue;
+    let shortCircuits = false;
+    core.traverse(expressionFile(core.types.cloneNode(binding.value, true)), {
+      ConditionalExpression(path) {
+        shortCircuits = true;
+        path.stop();
+      },
+      LogicalExpression(path) {
+        shortCircuits = true;
+        path.stop();
+      },
+      OptionalCallExpression(path) {
+        shortCircuits = true;
+        path.stop();
+      },
+      OptionalMemberExpression(path) {
+        shortCircuits = true;
+        path.stop();
+      }
+    });
+    if (shortCircuits) binding.tracking = "dynamic";
+  }
+}
 function lowerStableBindingTargets(root, bindings, blockRuntime, ownedElements) {
   const targetByPath = /* @__PURE__ */ new Map();
   for (const binding of bindings) {
@@ -2373,6 +3415,9 @@ function bindingObject(binding, propsParameter, stateParameter, statesByValue, s
       core.types.objectProperty(core.types.identifier("target"), core.types.numericLiteral(binding.target))
     );
   }
+  if (binding.tracking) {
+    properties.push(core.types.objectProperty(core.types.identifier("tracking"), core.types.stringLiteral(binding.tracking)));
+  }
   if (binding.name)
     properties.push(core.types.objectProperty(core.types.identifier("name"), core.types.stringLiteral(binding.name)));
   properties.push(
@@ -2391,7 +3436,7 @@ function wrapperElement(definitionIdentifier, props) {
   const attributes = props ? [core.types.jsxSpreadAttribute(core.types.cloneNode(props))] : [];
   return core.types.jsxElement(core.types.jsxOpeningElement(name, attributes, true), null, [], true);
 }
-function compileCandidate(candidate, createComponentIdentifier, useStateNames, reactNames, listNames, moduleId) {
+function compileCandidate(candidate, createComponentIdentifier, runtimeFeatureIdentifiers, usedRuntimeFeatures, useStateNames, reactNames, listNames, moduleId, reactivity) {
   const { path, name, statementPath } = candidate;
   if (path.node.async || path.node.generator)
     return "async and generator components are not supported";
@@ -2508,8 +3553,34 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
   );
   const setterReason = validateSetterUsage(expandedRoot, statesBySetter);
   if (setterReason) return setterReason;
+  const referencedPropNames = collectDestructuredPropNames(
+    expandedRoot,
+    propsPlan.destructuredNames,
+    propsPlan.definitionParameter
+  );
+  let propBindings = referencedPropNames.has("children") ? [] : [...propsPlan.destructuredNames].filter((propName) => referencedPropNames.has(propName)).map(
+    (localName, propIndex) => ({
+      localName,
+      valueName: path.scope.generateUidIdentifier(`farmProp${propIndex}`).name,
+      index: states.length + propIndex
+    })
+  );
+  const propBindingsByName = new Map(propBindings.map((binding) => [binding.localName, binding]));
+  let reactiveByValue = new Map(statesByValue);
+  for (const binding of propBindings) {
+    reactiveByValue.set(binding.valueName, {
+      valueName: binding.valueName,
+      setterName: "",
+      index: binding.index
+    });
+  }
+  let expandedReactiveRoot = rewriteTrackedPropAccess(
+    expandedRoot,
+    propsPlan.definitionParameter,
+    propBindingsByName
+  );
   const referencedComponentNames = /* @__PURE__ */ new Set();
-  core.traverse(expressionFile(core.types.cloneNode(expandedRoot, true)), {
+  core.traverse(expressionFile(core.types.cloneNode(expandedReactiveRoot, true)), {
     JSXOpeningElement(componentPath) {
       const componentName = componentPath.node.name;
       if (core.types.isJSXIdentifier(componentName) && isComponentName(componentName.name)) {
@@ -2526,32 +3597,55 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
       );
     })
   );
-  const blockAnalysis = analyzeComposableBlocks(
-    expandedRoot,
-    statesByValue,
+  let blockAnalysis = analyzeComposableBlocks(
+    expandedReactiveRoot,
+    reactiveByValue,
     safeGlobals,
     listNames,
     allowedComponentNames
   );
-  if (blockAnalysis.reason) return blockAnalysis.reason;
-  const blockPlans = blockAnalysis.plans || [];
-  const analysis = analyzeHostTree(
-    expandedRoot,
-    statesByValue,
+  let analysis = analyzeHostTree(
+    expandedReactiveRoot,
+    reactiveByValue,
     safeGlobals,
     blockAnalysis.conditionalExpressions || /* @__PURE__ */ new Set(),
     blockAnalysis.keyedExpressions || /* @__PURE__ */ new Set(),
     blockAnalysis.ownedElements || /* @__PURE__ */ new Set(),
     blockAnalysis.componentElements || /* @__PURE__ */ new Set()
   );
+  if (propBindings.length > 0 && (blockAnalysis.reason || analysis.reason)) {
+    propBindings = [];
+    reactiveByValue = new Map(statesByValue);
+    expandedReactiveRoot = core.types.cloneNode(expandedRoot, true);
+    blockAnalysis = analyzeComposableBlocks(
+      expandedReactiveRoot,
+      reactiveByValue,
+      safeGlobals,
+      listNames,
+      allowedComponentNames
+    );
+    analysis = analyzeHostTree(
+      expandedReactiveRoot,
+      reactiveByValue,
+      safeGlobals,
+      blockAnalysis.conditionalExpressions || /* @__PURE__ */ new Set(),
+      blockAnalysis.keyedExpressions || /* @__PURE__ */ new Set(),
+      blockAnalysis.ownedElements || /* @__PURE__ */ new Set(),
+      blockAnalysis.componentElements || /* @__PURE__ */ new Set()
+    );
+  }
+  if (blockAnalysis.reason) return blockAnalysis.reason;
   if (analysis.reason) return analysis.reason;
+  const blockPlans = blockAnalysis.plans || [];
+  const runtimeFeatures = runtimeFeaturesForPlans(blockPlans);
+  markShortCircuitBindings(analysis.bindings || []);
   assignStableBindingTargets(analysis.bindings || []);
   const stateParameter = path.scope.generateUidIdentifier("farmState");
   const blockParameter = path.scope.generateUidIdentifier("farmBlocks");
   const definitionIdentifier = path.scope.generateUidIdentifier(`${name}Compiled`);
   const propsParameter = propsPlan.definitionParameter;
   const rootWithTargets = lowerStableBindingTargets(
-    expandedRoot,
+    expandedReactiveRoot,
     analysis.bindings || [],
     blockParameter,
     blockAnalysis.ownedElements || /* @__PURE__ */ new Set()
@@ -2565,12 +3659,13 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
   const rewrittenRoot = rewriteStateAccess(
     rootWithBlocks,
     stateParameter,
-    statesByValue,
+    reactiveByValue,
     statesBySetter
   );
   const definition = core.types.callExpression(core.types.cloneNode(createComponentIdentifier), [
     core.types.objectExpression([
       core.types.objectProperty(core.types.identifier("displayName"), core.types.stringLiteral(name)),
+      core.types.objectProperty(core.types.identifier("reactivity"), core.types.stringLiteral(reactivity)),
       core.types.spreadElement(
         core.types.conditionalExpression(
           core.types.memberExpression(
@@ -2581,7 +3676,9 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
             core.types.objectProperty(core.types.identifier("hmrId"), core.types.stringLiteral(`${moduleId}#${name}`)),
             core.types.objectProperty(
               core.types.identifier("stateSignature"),
-              core.types.stringLiteral(String(states.length))
+              core.types.stringLiteral(
+                propBindings.length === 0 ? String(states.length) : `${states.length}:${propBindings.map((binding) => binding.localName).join(",")}`
+              )
             )
           ]),
           core.types.objectExpression([])
@@ -2604,6 +3701,22 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
           )
         )
       ),
+      ...propBindings.length > 0 ? [
+        core.types.objectProperty(
+          core.types.identifier("readProps"),
+          core.types.arrowFunctionExpression(
+            [core.types.cloneNode(propsParameter)],
+            core.types.arrayExpression(
+              propBindings.map(
+                (binding) => core.types.memberExpression(
+                  core.types.cloneNode(propsParameter),
+                  core.types.identifier(binding.localName)
+                )
+              )
+            )
+          )
+        )
+      ] : [],
       core.types.objectProperty(
         core.types.identifier("render"),
         core.types.arrowFunctionExpression(
@@ -2623,11 +3736,14 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
               dependencies: block.dependencies
             }))
           ].map(
-            (binding) => bindingObject(binding, propsParameter, stateParameter, statesByValue, statesBySetter)
+            (binding) => bindingObject(binding, propsParameter, stateParameter, reactiveByValue, statesBySetter)
           )
         )
       )
-    ])
+    ]),
+    core.types.arrayExpression(
+      runtimeFeatures.map((feature) => core.types.cloneNode(runtimeFeatureIdentifiers.get(feature)))
+    )
   ]);
   path.get("body").replaceWith(
     core.types.blockStatement([
@@ -2637,6 +3753,7 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
   statementPath.insertAfter(
     core.types.variableDeclaration("const", [core.types.variableDeclarator(definitionIdentifier, definition)])
   );
+  for (const feature of runtimeFeatures) usedRuntimeFeatures.add(feature);
   return void 0;
 }
 function collectCandidates(programPath) {
@@ -2704,6 +3821,13 @@ async function compileReactModule(code, id, options) {
         }
         const candidates = collectCandidates(programPath);
         const createComponentIdentifier = programPath.scope.generateUidIdentifier("createCompiledComponent");
+        const runtimeFeatureIdentifiers = new Map(
+          Object.entries(COMPILER_RUNTIME_FEATURE_EXPORTS).map(([feature, exportName]) => [
+            feature,
+            programPath.scope.generateUidIdentifier(exportName)
+          ])
+        );
+        const usedRuntimeFeatures = /* @__PURE__ */ new Set();
         for (const candidate of candidates) {
           const functionDirectives = new Set(
             core.types.isBlockStatement(candidate.path.node.body) ? directiveValues(candidate.path.node.body) : []
@@ -2714,10 +3838,13 @@ async function compileReactModule(code, id, options) {
           const reason = compileCandidate(
             candidate,
             createComponentIdentifier,
+            runtimeFeatureIdentifiers,
+            usedRuntimeFeatures,
             useStateNames,
             reactNames,
             listNames,
-            id
+            id,
+            options.reactivity
           );
           if (reason) {
             diagnostics.push({
@@ -2736,7 +3863,13 @@ async function compileReactModule(code, id, options) {
               [
                 core.types.importSpecifier(
                   createComponentIdentifier,
-                  core.types.identifier("createCompiledComponent")
+                  core.types.identifier("createCompiledComponentWithFeatures")
+                ),
+                ...[...usedRuntimeFeatures].sort().map(
+                  (feature) => core.types.importSpecifier(
+                    core.types.cloneNode(runtimeFeatureIdentifiers.get(feature)),
+                    core.types.identifier(COMPILER_RUNTIME_FEATURE_EXPORTS[feature])
+                  )
                 )
               ],
               core.types.stringLiteral("@farm.js/react/compiler-runtime")
@@ -2844,6 +3977,10 @@ function normalizeReactCompilerOptions(value) {
   if (!["fallback", "warn", "error"].includes(onUnsupported)) {
     throw new TypeError(`Unknown unsupported-component behavior: ${String(onUnsupported)}`);
   }
+  const reactivity = options.reactivity || "hybrid";
+  if (reactivity !== "static" && reactivity !== "hybrid") {
+    throw new TypeError(`Unknown React compiler reactivity mode: ${String(reactivity)}`);
+  }
   if (options.report !== void 0 && typeof options.report !== "boolean") {
     throw new TypeError("The React compiler report option must be a boolean.");
   }
@@ -2854,7 +3991,7 @@ function normalizeReactCompilerOptions(value) {
   }
   const reportFile = normalizeCompilerReportFile(options.reportFile);
   const report = options.report === true || options.reportFile !== void 0;
-  return { mode, directive, onUnsupported, report, reportFile };
+  return { mode, directive, onUnsupported, reactivity, report, reportFile };
 }
 
 // src/vite.ts
@@ -2870,7 +4007,7 @@ function readCompilerOptions(rendererOptions) {
     );
   }
   const normalized = compiler;
-  if ((normalized.mode === "infer" || normalized.mode === "annotation") && typeof normalized.directive === "string" && (normalized.onUnsupported === "fallback" || normalized.onUnsupported === "warn" || normalized.onUnsupported === "error")) {
+  if ((normalized.mode === "infer" || normalized.mode === "annotation") && typeof normalized.directive === "string" && (normalized.reactivity === "static" || normalized.reactivity === "hybrid") && (normalized.onUnsupported === "fallback" || normalized.onUnsupported === "warn" || normalized.onUnsupported === "error")) {
     return normalized;
   }
   return normalizeReactCompilerOptions(compiler);