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

package/README.md

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

package/dist/compiler-runtime.cjs

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