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

package/dist/vite.mjs

@@ -258,6 +258,31 @@ function isTextExpression(expression, statesByValue, safeGlobals) {
 function jsxAttributeName(attribute) {
   return types.isJSXIdentifier(attribute.name) ? attribute.name.name : void 0;
 }
+function jsxAttribute(element, name) {
+  return element.openingElement.attributes.find(
+    (attribute) => types.isJSXAttribute(attribute) && jsxAttributeName(attribute) === name
+  );
+}
+function staticJsxAttributeString(attribute) {
+  if (!attribute?.value) return attribute ? "" : void 0;
+  if (types.isStringLiteral(attribute.value)) return attribute.value.value;
+  if (types.isJSXExpressionContainer(attribute.value) && types.isStringLiteral(attribute.value.expression)) {
+    return attribute.value.expression.value;
+  }
+  return void 0;
+}
+function controlledSelectHasDynamicOptions(element) {
+  let dynamic = false;
+  types.traverseFast(element, (node) => {
+    if (dynamic || !types.isJSXElement(node)) return;
+    const tag = node.openingElement.name;
+    if (!types.isJSXIdentifier(tag) || tag.name !== "option" && tag.name !== "optgroup") return;
+    dynamic = node.openingElement.attributes.some(
+      (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression)
+    );
+  });
+  return dynamic;
+}
 function isEmptyConditionalBranch(expression) {
   return types.isNullLiteral(expression) || types.isBooleanLiteral(expression, { value: false });
 }
@@ -483,7 +508,87 @@ function validateKeyedRowEventHandler(handler) {
   });
   return reason;
 }
-function analyzeKeyedRowTree(row, renderCallback, safeGlobals) {
+function stabilizeDeferredEventCurrentTarget(handler, compilerSetters) {
+  const cloned = types.cloneNode(handler, true);
+  const eventParameter = cloned.params[0];
+  if (!types.isIdentifier(eventParameter) || compilerSetters.size === 0) return cloned;
+  const file = expressionFile(cloned);
+  const expression = file.program.body[0].expression;
+  if (!types.isArrowFunctionExpression(expression) && !types.isFunctionExpression(expression)) {
+    return cloned;
+  }
+  const rootBindingIdentifier = expression.params[0];
+  const snapshots = [];
+  const snapshotsByProperty = /* @__PURE__ */ new Map();
+  const replaceCurrentTarget = (path) => {
+    const property = path.node.property;
+    const isCurrentTarget = path.node.computed ? types.isStringLiteral(property, { value: "currentTarget" }) : types.isIdentifier(property, { name: "currentTarget" });
+    if (!isCurrentTarget || !types.isIdentifier(path.node.object, { name: eventParameter.name }))
+      return;
+    const binding = path.scope.getBinding(eventParameter.name);
+    if (!binding || binding.identifier !== rootBindingIdentifier) return;
+    const setterCall = path.findParent(
+      (parent2) => parent2.isCallExpression() && types.isIdentifier(parent2.node.callee) && compilerSetters.has(parent2.node.callee.name)
+    );
+    if (!setterCall) return;
+    const deferredFunction = path.findParent(
+      (parent2) => parent2.isFunction() && parent2.node !== expression
+    );
+    if (!deferredFunction || !deferredFunction.findParent((parent2) => parent2 === setterCall))
+      return;
+    const parent = path.parentPath;
+    const propertyRead = (parent?.isMemberExpression() || parent?.isOptionalMemberExpression()) && parent.node.object === path.node ? parent : path;
+    const snapshotProperty = propertyRead === path ? "element" : propertyRead.node.computed ? types.isStringLiteral(propertyRead.node.property) ? propertyRead.node.property.value : `computed${snapshots.length}` : types.isIdentifier(propertyRead.node.property) ? propertyRead.node.property.name : `property${snapshots.length}`;
+    let snapshot = snapshotsByProperty.get(snapshotProperty);
+    if (!snapshot) {
+      const suffix = snapshotProperty.replace(/[^A-Za-z0-9_$]/g, " ").replace(
+        /(?:^|\s+)([A-Za-z0-9_$])/g,
+        (_match, character) => character.toUpperCase()
+      ).replace(/\s/g, "");
+      snapshot = uniqueLocalIdentifier(`_farmCurrentTarget${suffix}`, [
+        expression,
+        ...snapshots.map((entry) => entry.identifier)
+      ]);
+      snapshotsByProperty.set(snapshotProperty, snapshot);
+      snapshots.push({
+        identifier: snapshot,
+        value: types.cloneNode(propertyRead.node, true)
+      });
+    }
+    propertyRead.replaceWith(types.cloneNode(snapshot));
+    propertyRead.skip();
+  };
+  traverse(file, {
+    MemberExpression: replaceCurrentTarget,
+    OptionalMemberExpression: replaceCurrentTarget
+  });
+  if (snapshots.length === 0) return expression;
+  const declarations = snapshots.map(
+    ({ identifier, value }) => types.variableDeclaration("const", [types.variableDeclarator(types.cloneNode(identifier), value)])
+  );
+  if (types.isBlockStatement(expression.body)) {
+    expression.body.body.unshift(...declarations);
+  } else {
+    expression.body = types.blockStatement([...declarations, types.returnStatement(expression.body)]);
+  }
+  return expression;
+}
+function stabilizeDeferredEventCurrentTargets(root, compilerSetters) {
+  const file = expressionFile(types.cloneNode(root, true));
+  traverse(file, {
+    JSXAttribute(path) {
+      if (!types.isJSXIdentifier(path.node.name) || !/^on[A-Z]/.test(path.node.name.name)) return;
+      const value = path.node.value;
+      if (!types.isJSXExpressionContainer(value) || !types.isArrowFunctionExpression(value.expression) && !types.isFunctionExpression(value.expression)) {
+        return;
+      }
+      value.expression = stabilizeDeferredEventCurrentTarget(value.expression, compilerSetters);
+    }
+  });
+  const expression = file.program.body[0].expression;
+  return types.isJSXElement(expression) ? expression : types.cloneNode(root, true);
+}
+function analyzeKeyedRowTree(row, renderCallback, safeGlobals, compilerSetters) {
   if (renderCallback.async || renderCallback.generator || renderCallback.params.length < 1 || renderCallback.params.length > 2 || !types.isIdentifier(renderCallback.params[0]) || renderCallback.params[1] !== void 0 && !types.isIdentifier(renderCallback.params[1])) {
     return { reason: "compiled keyed rows require item and optional index identifiers" };
   }
@@ -499,8 +604,25 @@ function analyzeKeyedRowTree(row, renderCallback, safeGlobals) {
     const attributeNames = new Set(
       element.openingElement.attributes.filter((attribute) => types.isJSXAttribute(attribute)).map(jsxAttributeName).filter((name) => name !== void 0)
     );
-    if ((tag.name === "input" || tag.name === "textarea" || tag.name === "select") && (attributeNames.has("value") || attributeNames.has("checked")) && [...attributeNames].some((name) => /^on[A-Z]/.test(name))) {
-      return "controlled form elements in interactive compiled keyed rows require React ownership";
+    const controlled = attributeNames.has("value") || attributeNames.has("checked");
+    if (attributeNames.has("contentEditable")) {
+      return "content-editable keyed rows require React ownership";
+    }
+    if (tag.name === "input" && controlled) {
+      const type = jsxAttribute(element, "type");
+      const staticType = staticJsxAttributeString(type);
+      if (type && staticType === void 0) {
+        return "controlled keyed row inputs require a static type";
+      }
+      if (attributeNames.has("value") && staticType?.toLowerCase() === "file") {
+        return "file inputs require React ownership";
+      }
+    }
+    if (tag.name === "textarea" && controlled && meaningfulJsxChildren(element).length > 0) {
+      return "controlled keyed row textareas cannot also use children";
+    }
+    if (tag.name === "select" && controlled && controlledSelectHasDynamicOptions(element)) {
+      return "controlled keyed row selects require static options";
     }
     for (const attribute of element.openingElement.attributes) {
       if (types.isJSXSpreadAttribute(attribute)) {
@@ -531,7 +653,7 @@ function analyzeKeyedRowTree(row, renderCallback, safeGlobals) {
           id: events.length,
           path: [...path],
           name,
-          value: types.cloneNode(handler, true)
+          value: stabilizeDeferredEventCurrentTarget(handler, compilerSetters)
         });
         continue;
       }
@@ -645,26 +767,14 @@ function analyzeKeyedRowTree(row, renderCallback, safeGlobals) {
   const reason = visit(row, []);
   return reason ? { reason } : { bindings, events, conditionals };
 }
-function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNames) {
-  if (container.openingElement.attributes.some(
-    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
-  )) {
-    return void 0;
-  }
-  for (const attribute of container.openingElement.attributes) {
-    if (types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression) && !/^on[A-Z]/.test(attribute.name.name) && collectStateDependencies(attribute.value.expression, statesByValue).length > 0) {
-      return void 0;
-    }
-  }
-  const children = meaningfulJsxChildren(container);
-  if (children.length !== 1) return void 0;
+function analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames) {
   let collection;
   let keyCallback;
   let renderCallback;
   let row;
   let dependencies;
   let syntax;
-  const child = children[0];
+  let source;
   if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression) && isMapCall(child.expression)) {
     const result = analyzeMapList(child.expression, statesByValue, safeGlobals);
     if (result.reason) return void 0;
@@ -684,6 +794,7 @@ function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNa
     row = returned;
     dependencies = result.dependencies || [];
     syntax = "map";
+    source = child.expression;
   } else if (types.isJSXElement(child) && isPublicListElement(child, listNames)) {
     const result = analyzePublicList(child, statesByValue, safeGlobals);
     if (result.reason) return void 0;
@@ -701,12 +812,19 @@ function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNa
     row = returned;
     dependencies = result.dependencies || [];
     syntax = "list";
+    source = child;
   } else {
     return void 0;
   }
-  const rowAnalysis = analyzeKeyedRowTree(row, renderCallback, safeGlobals);
+  const rowAnalysis = analyzeKeyedRowTree(
+    row,
+    renderCallback,
+    safeGlobals,
+    new Set([...statesByValue.values()].map((state) => state.setterName))
+  );
   if (rowAnalysis.reason) return void 0;
   return {
+    source,
     collection,
     keyCallback,
     renderCallback,
@@ -718,6 +836,76 @@ function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNa
     syntax
   };
 }
+function analyzeKeyedRowsContainer(container, statesByValue, safeGlobals, listNames) {
+  if (container.openingElement.attributes.some(
+    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  for (const attribute of container.openingElement.attributes) {
+    if (types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && types.isJSXExpressionContainer(attribute.value) && !types.isJSXEmptyExpression(attribute.value.expression) && !/^on[A-Z]/.test(attribute.name.name) && collectStateDependencies(attribute.value.expression, statesByValue).length > 0) {
+      return void 0;
+    }
+  }
+  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 (types.isJSXFragment(child)) return false;
+    if (types.isJSXElement(child)) {
+      if (!isHostElement(child) || !isStaticRangeSibling(child, statesByValue, safeGlobals)) {
+        return false;
+      }
+      continue;
+    }
+    if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression) && !isTextExpression(child.expression, statesByValue, safeGlobals)) {
+      return false;
+    }
+  }
+  return true;
+}
+function analyzeKeyedRangesContainer(container, statesByValue, safeGlobals, listNames, allowSingleRange = false) {
+  if (container.openingElement.attributes.some(
+    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  const children = meaningfulJsxChildren(container);
+  if (children.length < (allowSingleRange ? 1 : 2)) return void 0;
+  const ranges = [];
+  const dependencies = /* @__PURE__ */ new Set();
+  let staticBefore = 0;
+  for (const child of children) {
+    const range = analyzeKeyedRowChild(child, statesByValue, safeGlobals, listNames);
+    if (range) {
+      if (range.events.length > 0 || range.conditionals.length > 0) return void 0;
+      ranges.push({
+        before: staticBefore,
+        source: range.source,
+        collection: range.collection,
+        keyCallback: range.keyCallback,
+        renderCallback: range.renderCallback,
+        row: range.row,
+        bindings: range.bindings,
+        syntax: range.syntax
+      });
+      for (const dependency of range.dependencies) dependencies.add(dependency);
+      staticBefore = 0;
+      continue;
+    }
+    if (!types.isJSXElement(child) || !isHostElement(child)) return void 0;
+    if (!isStaticRangeSibling(child, statesByValue, safeGlobals)) return void 0;
+    staticBefore += 1;
+  }
+  if (ranges.length === 0) return void 0;
+  return {
+    ranges,
+    trailing: staticBefore,
+    dependencies: [...dependencies].sort((left, right) => left - right)
+  };
+}
 function analyzeHostConditionalTree(branch, safeGlobals) {
   const bindings = [];
   const visit = (element, path) => {
@@ -860,6 +1048,60 @@ function analyzeHostConditionalContainer(container, statesByValue, safeGlobals)
     falsyBindings: falsyAnalysis.bindings || []
   };
 }
+function analyzeConditionalRangesContainer(container, statesByValue, safeGlobals, allowSingleRange = false) {
+  const containerName = container.openingElement.name;
+  if (!types.isJSXIdentifier(containerName) || !/^[a-z]/.test(containerName.name) || containerName.name === "svg" || container.openingElement.attributes.some(
+    (attribute) => types.isJSXSpreadAttribute(attribute) || types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && (attribute.name.name === "ref" || attribute.name.name === "dangerouslySetInnerHTML")
+  )) {
+    return void 0;
+  }
+  const children = meaningfulJsxChildren(container);
+  if (children.length < (allowSingleRange ? 1 : 2)) return void 0;
+  const ranges = [];
+  const dependencies = /* @__PURE__ */ new Set();
+  let staticBefore = 0;
+  for (const child of children) {
+    if (types.isJSXExpressionContainer(child) && !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: [] };
+        if (truthyAnalysis.reason || falsyAnalysis.reason) return void 0;
+        const rangeDependencies = new Set(collectStateDependencies(shape.test, statesByValue));
+        for (const binding of [
+          ...truthyAnalysis.bindings || [],
+          ...falsyAnalysis.bindings || []
+        ]) {
+          for (const dependency of collectStateDependencies(binding.value, statesByValue)) {
+            rangeDependencies.add(dependency);
+          }
+        }
+        for (const dependency of rangeDependencies) dependencies.add(dependency);
+        ranges.push({
+          before: staticBefore,
+          source: child.expression,
+          test: cloneExpression(shape.test),
+          logical: shape.logical,
+          truthy: shape.truthy,
+          falsy: shape.falsy,
+          truthyBindings: truthyAnalysis.bindings || [],
+          falsyBindings: falsyAnalysis.bindings || []
+        });
+        staticBefore = 0;
+        continue;
+      }
+    }
+    if (!types.isJSXElement(child) || !isHostElement(child)) return void 0;
+    if (!isStaticRangeSibling(child, statesByValue, safeGlobals)) return void 0;
+    staticBefore += 1;
+  }
+  if (ranges.length === 0) return void 0;
+  return {
+    ranges,
+    trailing: staticBefore,
+    dependencies: [...dependencies].sort((left, right) => left - right)
+  };
+}
 function keyedListBoundary(blockRuntime, plan, source) {
   const name = types.jsxMemberExpression(
     types.jsxIdentifier(blockRuntime.name),
@@ -1207,6 +1449,74 @@ function keyedRowsBoundary(blockRuntime, plan) {
     true
   );
 }
+function keyedRangeObject(range) {
+  const parameters = range.renderCallback.params.map(
+    (parameter) => types.cloneNode(parameter, true)
+  );
+  return types.objectExpression([
+    types.objectProperty(types.identifier("before"), types.numericLiteral(range.before)),
+    types.objectProperty(
+      types.identifier("items"),
+      types.arrowFunctionExpression([], cloneExpression(range.collection))
+    ),
+    types.objectProperty(types.identifier("rowKey"), types.cloneNode(range.keyCallback, true)),
+    types.objectProperty(
+      types.identifier("create"),
+      types.arrowFunctionExpression(
+        parameters.map((parameter) => types.cloneNode(parameter, true)),
+        hostElementDescriptor(range.row)
+      )
+    ),
+    types.objectProperty(
+      types.identifier("bindings"),
+      types.arrayExpression(
+        range.bindings.map((binding) => keyedRowBindingObject(binding, parameters))
+      )
+    )
+  ]);
+}
+function keyedRangesBoundary(blockRuntime, plan) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("KeyedRanges")
+  );
+  const source = types.cloneNode(plan.source, true);
+  let rootRef;
+  source.openingElement.attributes = source.openingElement.attributes.filter((attribute) => {
+    if (!types.isJSXAttribute(attribute) || jsxAttributeName(attribute) !== "ref" || !types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression)) {
+      return true;
+    }
+    rootRef = cloneExpression(attribute.value.expression);
+    return false;
+  });
+  return types.jsxElement(
+    types.jsxOpeningElement(
+      name,
+      [
+        types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+        types.jsxAttribute(
+          types.jsxIdentifier("render"),
+          types.jsxExpressionContainer(types.arrowFunctionExpression([], source))
+        ),
+        ...rootRef ? [types.jsxAttribute(types.jsxIdentifier("rootRef"), types.jsxExpressionContainer(rootRef))] : [],
+        types.jsxAttribute(
+          types.jsxIdentifier("ranges"),
+          types.jsxExpressionContainer(
+            types.arrayExpression(plan.ranges.map((range) => keyedRangeObject(range)))
+          )
+        ),
+        types.jsxAttribute(
+          types.jsxIdentifier("trailing"),
+          types.jsxExpressionContainer(types.numericLiteral(plan.trailing))
+        )
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  );
+}
 function hostConditionalBranchObject(branch, bindings) {
   return types.objectExpression([
     types.objectProperty(
@@ -1254,6 +1564,67 @@ function hostConditionalBoundary(blockRuntime, plan) {
   }
   return types.jsxElement(types.jsxOpeningElement(name, attributes, true), null, [], true);
 }
+function conditionalRangeObject(range) {
+  const properties = [
+    types.objectProperty(types.identifier("before"), types.numericLiteral(range.before)),
+    types.objectProperty(
+      types.identifier("test"),
+      types.arrowFunctionExpression([], cloneExpression(range.test))
+    )
+  ];
+  if (range.logical) {
+    properties.push(types.objectProperty(types.identifier("logical"), types.booleanLiteral(true)));
+  }
+  if (range.truthy) {
+    properties.push(
+      types.objectProperty(
+        types.identifier("truthy"),
+        hostConditionalBranchObject(range.truthy, range.truthyBindings)
+      )
+    );
+  }
+  if (range.falsy) {
+    properties.push(
+      types.objectProperty(
+        types.identifier("falsy"),
+        hostConditionalBranchObject(range.falsy, range.falsyBindings)
+      )
+    );
+  }
+  return types.objectExpression(properties);
+}
+function conditionalRangesBoundary(blockRuntime, plan) {
+  const name = types.jsxMemberExpression(
+    types.jsxIdentifier(blockRuntime.name),
+    types.jsxIdentifier("ConditionalRanges")
+  );
+  const source = types.cloneNode(plan.source, true);
+  const rootRefIndex = source.openingElement.attributes.findIndex(
+    (attribute) => types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && attribute.name.name === "ref"
+  );
+  const rootRef = rootRefIndex >= 0 ? source.openingElement.attributes.splice(rootRefIndex, 1)[0] : void 0;
+  const attributes = [
+    types.jsxAttribute(types.jsxIdentifier("id"), types.jsxExpressionContainer(types.numericLiteral(plan.id))),
+    types.jsxAttribute(
+      types.jsxIdentifier("render"),
+      types.jsxExpressionContainer(types.arrowFunctionExpression([], source))
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier("ranges"),
+      types.jsxExpressionContainer(
+        types.arrayExpression(plan.ranges.map((range) => conditionalRangeObject(range)))
+      )
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier("trailing"),
+      types.jsxExpressionContainer(types.numericLiteral(plan.trailing))
+    )
+  ];
+  if (rootRef?.value) {
+    attributes.push(types.jsxAttribute(types.jsxIdentifier("rootRef"), types.cloneNode(rootRef.value, true)));
+  }
+  return types.jsxElement(types.jsxOpeningElement(name, attributes, true), null, [], true);
+}
 function analyzeComponentIslandElement(element, statesByValue, safeGlobals, allowedComponentNames) {
   const name = element.openingElement.name;
   if (!types.isJSXIdentifier(name) || !isComponentName(name.name)) {
@@ -1419,6 +1790,39 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
       }
       if (types.isJSXElement(child)) {
         if (isHostElement(child)) {
+          const keyedRanges = insideConditional ? void 0 : analyzeKeyedRangesContainer(child, statesByValue, safeGlobals, listNames);
+          if (keyedRanges) {
+            plans.push({
+              kind: "keyed-ranges",
+              id: nextId++,
+              parent,
+              dependencies: keyedRanges.dependencies,
+              source: child,
+              ranges: keyedRanges.ranges,
+              trailing: keyedRanges.trailing
+            });
+            for (const range of keyedRanges.ranges) {
+              if (types.isJSXElement(range.source)) ownedElements.add(range.source);
+              else keyedExpressions.add(range.source);
+            }
+            continue;
+          }
+          const conditionalRanges = insideConditional ? void 0 : analyzeConditionalRangesContainer(child, statesByValue, safeGlobals);
+          if (conditionalRanges) {
+            plans.push({
+              kind: "conditional-ranges",
+              id: nextId++,
+              parent,
+              dependencies: conditionalRanges.dependencies,
+              source: child,
+              ranges: conditionalRanges.ranges,
+              trailing: conditionalRanges.trailing
+            });
+            for (const range of conditionalRanges.ranges) {
+              conditionalExpressions.add(range.source);
+            }
+            continue;
+          }
           const hostConditional = analyzeHostConditionalContainer(
             child,
             statesByValue,
@@ -1551,6 +1955,54 @@ function analyzeComposableBlocks(root, statesByValue, safeGlobals, listNames, al
     }
     return { dependencies };
   };
+  const rootRanges = analyzeKeyedRangesContainer(root, statesByValue, safeGlobals, listNames, true);
+  if (rootRanges) {
+    plans.push({
+      kind: "keyed-ranges",
+      id: nextId++,
+      dependencies: rootRanges.dependencies,
+      source: root,
+      ranges: rootRanges.ranges,
+      trailing: rootRanges.trailing
+    });
+    for (const range of rootRanges.ranges) {
+      if (types.isJSXElement(range.source)) ownedElements.add(range.source);
+      else keyedExpressions.add(range.source);
+    }
+    return {
+      plans,
+      componentElements,
+      conditionalExpressions,
+      ownedElements,
+      keyedExpressions
+    };
+  }
+  const rootConditionalRanges = analyzeConditionalRangesContainer(
+    root,
+    statesByValue,
+    safeGlobals,
+    true
+  );
+  if (rootConditionalRanges) {
+    plans.push({
+      kind: "conditional-ranges",
+      id: nextId++,
+      dependencies: rootConditionalRanges.dependencies,
+      source: root,
+      ranges: rootConditionalRanges.ranges,
+      trailing: rootConditionalRanges.trailing
+    });
+    for (const range of rootConditionalRanges.ranges) {
+      conditionalExpressions.add(range.source);
+    }
+    return {
+      plans,
+      componentElements,
+      conditionalExpressions,
+      ownedElements,
+      keyedExpressions
+    };
+  }
   const result = visitHost(root, void 0, false);
   if (result.reason) return { reason: result.reason };
   return {
@@ -1587,6 +2039,13 @@ function lowerComposableBlocks(root, plans, blockRuntime, listNames) {
   const planBySource = new Map(
     plans.map((plan) => [plan.source, plan])
   );
+  const rootPlan = planBySource.get(root);
+  if (rootPlan?.kind === "keyed-ranges") {
+    return keyedRangesBoundary(blockRuntime, rootPlan);
+  }
+  if (rootPlan?.kind === "conditional-ranges") {
+    return conditionalRangesBoundary(blockRuntime, rootPlan);
+  }
   const visit = (element) => {
     element.children = element.children.map((child) => {
       if (types.isJSXElement(child)) {
@@ -1597,6 +2056,12 @@ function lowerComposableBlocks(root, plans, blockRuntime, listNames) {
         if (plan2?.kind === "keyed-rows") {
           return keyedRowsBoundary(blockRuntime, plan2);
         }
+        if (plan2?.kind === "keyed-ranges") {
+          return keyedRangesBoundary(blockRuntime, plan2);
+        }
+        if (plan2?.kind === "conditional-ranges") {
+          return conditionalRangesBoundary(blockRuntime, plan2);
+        }
         if (plan2?.kind === "component") {
           return componentIslandBoundary(blockRuntime, plan2, child);
         }
@@ -2030,11 +2495,15 @@ function compileCandidate(candidate, createComponentIdentifier, useStateNames, r
   const handlerRewrite = rewriteHandlerAccess(rootWithDerived, handlersByName);
   if (handlerRewrite.reason) return handlerRewrite.reason;
   if (!handlerRewrite.root) return "event handlers could not be prepared safely";
-  const expandedRoot = rewriteDestructuredPropAccess(
+  const expandedRootWithDeferredEvents = rewriteDestructuredPropAccess(
     handlerRewrite.root,
     propsPlan.destructuredNames,
     propsPlan.definitionParameter
   );
+  const expandedRoot = stabilizeDeferredEventCurrentTargets(
+    expandedRootWithDeferredEvents,
+    new Set(states.map((state) => state.setterName))
+  );
   const setterReason = validateSetterUsage(expandedRoot, statesBySetter);
   if (setterReason) return setterReason;
   const referencedComponentNames = /* @__PURE__ */ new Set();