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

package/dist/compiler-runtime.d.ts

@@ -111,6 +111,22 @@ interface CompilerKeyedRowsBlockProps {
     events?: readonly CompilerKeyedRowEvent[];
     conditionals?: readonly CompilerKeyedRowConditional[];
 }
+interface CompilerKeyedRange {
+    /** Number of static direct host siblings between this range and the previous range. */
+    before: number;
+    items(): Iterable<unknown> | null | undefined;
+    rowKey(item: unknown, index: number): React.Key;
+    create(item: unknown, index: number): CompilerKeyedRowElement;
+    bindings: readonly CompilerKeyedRowBinding[];
+}
+interface CompilerKeyedRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerKeyedRange[];
+    /** Number of static direct host siblings after the final keyed range. */
+    trailing: number;
+}
 interface CompilerComponentBlockProps {
     id: number;
     render(): React.ReactNode;
@@ -120,6 +136,7 @@ interface CompilerBlockRuntime {
     HostConditional: React.ComponentType<CompilerHostConditionalBlockProps>;
     KeyedList: React.ComponentType<CompilerKeyedListBlockProps>;
     KeyedRows: React.ComponentType<CompilerKeyedRowsBlockProps>;
+    KeyedRanges: React.ComponentType<CompilerKeyedRangesBlockProps>;
     Component: React.ComponentType<CompilerComponentBlockProps>;
     target(id: number): React.RefCallback<Element>;
 }
@@ -143,4 +160,4 @@ interface CompiledComponentDefinition<Props> {
  */
 declare function createCompiledComponent<Props>(definition: CompiledComponentDefinition<Props>): React.ComponentType<Props>;
 
-export { type CompiledComponentDefinition, type CompilerAttributeBinding, type CompilerBinding, type CompilerBlockRuntime, type CompilerCell, type CompilerComponentBlockProps, type CompilerConditionalBlockBinding, type CompilerConditionalBlockProps, type CompilerHostConditionalBinding, type CompilerHostConditionalBlockProps, type CompilerHostConditionalBranch, type CompilerHostElement, type CompilerKeyedListBlockProps, type CompilerKeyedRowBinding, type CompilerKeyedRowConditional, type CompilerKeyedRowConditionalBranch, type CompilerKeyedRowElement, type CompilerKeyedRowEvent, type CompilerKeyedRowsBlockProps, type CompilerStateUpdater, type CompilerStyleBinding, type CompilerTextBinding, createCompiledComponent };
+export { type CompiledComponentDefinition, type CompilerAttributeBinding, type CompilerBinding, type CompilerBlockRuntime, type CompilerCell, type CompilerComponentBlockProps, type CompilerConditionalBlockBinding, type CompilerConditionalBlockProps, type CompilerHostConditionalBinding, type CompilerHostConditionalBlockProps, type CompilerHostConditionalBranch, type CompilerHostElement, type CompilerKeyedListBlockProps, type CompilerKeyedRange, type CompilerKeyedRangesBlockProps, type CompilerKeyedRowBinding, type CompilerKeyedRowConditional, type CompilerKeyedRowConditionalBranch, type CompilerKeyedRowElement, type CompilerKeyedRowEvent, type CompilerKeyedRowsBlockProps, type CompilerStateUpdater, type CompilerStyleBinding, type CompilerTextBinding, createCompiledComponent };

package/dist/compiler-runtime.mjs

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