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

package/dist/compiler-runtime.d.mts

@@ -95,6 +95,23 @@ interface CompilerHostConditionalBlockProps {
     truthy?: CompilerHostConditionalBranch;
     falsy?: CompilerHostConditionalBranch;
 }
+interface CompilerConditionalRange {
+    /** Number of static direct host siblings between this slot and the previous slot. */
+    before: number;
+    test(): unknown;
+    /** Logical && can produce a visible number instead of an empty branch. */
+    logical?: boolean;
+    truthy?: CompilerHostConditionalBranch;
+    falsy?: CompilerHostConditionalBranch;
+}
+interface CompilerConditionalRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerConditionalRange[];
+    /** Number of static direct host siblings after the final conditional slot. */
+    trailing: number;
+}
 interface CompilerKeyedRowBinding {
     kind: "text" | "attribute" | "style";
     path: readonly number[];
@@ -134,6 +151,7 @@ interface CompilerComponentBlockProps {
 interface CompilerBlockRuntime {
     Conditional: React.ComponentType<CompilerConditionalBlockProps>;
     HostConditional: React.ComponentType<CompilerHostConditionalBlockProps>;
+    ConditionalRanges: React.ComponentType<CompilerConditionalRangesBlockProps>;
     KeyedList: React.ComponentType<CompilerKeyedListBlockProps>;
     KeyedRows: React.ComponentType<CompilerKeyedRowsBlockProps>;
     KeyedRanges: React.ComponentType<CompilerKeyedRangesBlockProps>;
@@ -160,4 +178,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 CompilerKeyedRange, type CompilerKeyedRangesBlockProps, 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 CompilerConditionalRange, type CompilerConditionalRangesBlockProps, 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.d.ts

@@ -95,6 +95,23 @@ interface CompilerHostConditionalBlockProps {
     truthy?: CompilerHostConditionalBranch;
     falsy?: CompilerHostConditionalBranch;
 }
+interface CompilerConditionalRange {
+    /** Number of static direct host siblings between this slot and the previous slot. */
+    before: number;
+    test(): unknown;
+    /** Logical && can produce a visible number instead of an empty branch. */
+    logical?: boolean;
+    truthy?: CompilerHostConditionalBranch;
+    falsy?: CompilerHostConditionalBranch;
+}
+interface CompilerConditionalRangesBlockProps {
+    id: number;
+    render(): React.ReactElement;
+    rootRef?: React.RefCallback<Element>;
+    ranges: readonly CompilerConditionalRange[];
+    /** Number of static direct host siblings after the final conditional slot. */
+    trailing: number;
+}
 interface CompilerKeyedRowBinding {
     kind: "text" | "attribute" | "style";
     path: readonly number[];
@@ -134,6 +151,7 @@ interface CompilerComponentBlockProps {
 interface CompilerBlockRuntime {
     Conditional: React.ComponentType<CompilerConditionalBlockProps>;
     HostConditional: React.ComponentType<CompilerHostConditionalBlockProps>;
+    ConditionalRanges: React.ComponentType<CompilerConditionalRangesBlockProps>;
     KeyedList: React.ComponentType<CompilerKeyedListBlockProps>;
     KeyedRows: React.ComponentType<CompilerKeyedRowsBlockProps>;
     KeyedRanges: React.ComponentType<CompilerKeyedRangesBlockProps>;
@@ -160,4 +178,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 CompilerKeyedRange, type CompilerKeyedRangesBlockProps, 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 CompilerConditionalRange, type CompilerConditionalRangesBlockProps, 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

@@ -504,6 +504,181 @@ function createHostConditionalBlockComponent(owner) {
   FarmHostConditionalBlock.displayName = "FarmCompiledHostConditional";
   return FarmHostConditionalBlock;
 }
+function createConditionalRangesBlockComponent(owner) {
+  class FarmConditionalRangesBlock 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);
+      };
+    }
+    readSelections(props) {
+      const selections = [];
+      for (const range of props.ranges) {
+        const selection = hostConditionalSelection(range);
+        if (selection.kind === "fallback") return null;
+        selections.push(selection);
+      }
+      return selections;
+    }
+    adopt(props = this.currentProps) {
+      if (!this.root || !Number.isSafeInteger(props.trailing) || props.trailing < 0) return false;
+      const selections = this.readSelections(props);
+      if (!selections) return false;
+      const elements = [...this.root.children];
+      const staticSegments = [];
+      const instances = [];
+      let cursor = 0;
+      for (let rangeIndex = 0; rangeIndex < props.ranges.length; rangeIndex += 1) {
+        const range = props.ranges[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 selection = selections[rangeIndex];
+        if (selection.kind === "empty") {
+          instances.push(null);
+          continue;
+        }
+        const element = elements[cursor];
+        if (!element) return false;
+        const descriptor = selection.branch.create();
+        if (!matchesCompilerHostElement(element, descriptor)) return false;
+        instances.push({
+          key: selection.key,
+          host: {
+            element,
+            values: readHostConditionalBindingValues(selection.branch)
+          }
+        });
+        cursor += 1;
+      }
+      if (cursor + props.trailing !== elements.length) return false;
+      staticSegments.push(elements.slice(cursor));
+      this.staticSegments = staticSegments;
+      this.rangeInstances = instances;
+      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 rangeAnchor = this.rangeInstances[next]?.host.element;
+        if (rangeAnchor) return rangeAnchor;
+      }
+      return this.staticSegments[this.rangeInstances.length]?.[0] || null;
+    }
+    reconcileRange(rangeIndex, selection) {
+      if (!this.root) return;
+      const previous = this.rangeInstances[rangeIndex];
+      if (selection.kind === "empty") {
+        previous?.host.element.remove();
+        this.rangeInstances[rangeIndex] = null;
+        return;
+      }
+      if (previous?.key === selection.key) {
+        applyHostConditionalBindings(selection.branch, previous.host);
+        return;
+      }
+      const element = createCompilerHostElement(this.root.ownerDocument, selection.branch.create());
+      if (previous) previous.host.element.replaceWith(element);
+      else this.root.insertBefore(element, this.anchorAfter(rangeIndex));
+      this.rangeInstances[rangeIndex] = {
+        key: selection.key,
+        host: {
+          element,
+          values: readHostConditionalBindingValues(selection.branch)
+        }
+      };
+    }
+    reconcile(afterCommit) {
+      if (!this.mounted || !this.root) {
+        afterCommit?.();
+        return;
+      }
+      if (this.state.fallback) {
+        this.fallbackVersion += 1;
+        this.forceUpdate(afterCommit);
+        return;
+      }
+      if (this.currentProps.ranges.length !== this.rangeInstances.length) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      const selections = this.readSelections(this.currentProps);
+      if (!selections) {
+        this.activateFallback(afterCommit);
+        return;
+      }
+      for (let rangeIndex = this.rangeInstances.length - 1; rangeIndex >= 0; rangeIndex -= 1) {
+        this.reconcileRange(rangeIndex, selections[rangeIndex]);
+      }
+      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 conditional ranges ${this.currentProps.id} must own one host container.`
+        );
+      }
+      return React.cloneElement(container, {
+        key: this.state.fallback ? `react-${this.fallbackVersion}` : "compiled",
+        ref: this.captureRoot
+      });
+    }
+  }
+  FarmConditionalRangesBlock.displayName = "FarmCompiledConditionalRanges";
+  return FarmConditionalRangesBlock;
+}
 function longestIncreasingSubsequencePositions(sequence) {
   const tails = [];
   const previous = Array.from({ length: sequence.length }, () => -1);
@@ -1203,6 +1378,9 @@ function createCompiledComponent(definition) {
         HostConditional: createHostConditionalBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
+        ConditionalRanges: createConditionalRangesBlockComponent({
+          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+        }),
         KeyedList: createKeyedListBlockComponent({
           subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
         }),
@@ -1379,6 +1557,12 @@ function createCompiledComponent(definition) {
           rootRef: this.captureRoot
         });
       }
+      if (element.type === this.blockRuntime.ConditionalRanges) {
+        return React.cloneElement(
+          element,
+          { rootRef: this.captureRoot }
+        );
+      }
       if (typeof element.type !== "string") {
         throw new TypeError(
           `Compiled component ${currentDefinition.displayName} must return one host element.`