Children Utilities

/**
 * Children utilities for safe child manipulation
 */
const Children = {
  /**
   * Maps over children with proper context handling
   * @param {ComponentChildren} children - Component children to map
   * @param {function} fn - Mapping function (child, index) => newChild
   * @param {any} ctx - Optional context for the mapping function
   * @returns {Array} Array of mapped children
   */
  map(children, fn, ctx);
  
  /**
   * Iterates over children without returning values
   * @param {ComponentChildren} children - Component children to iterate
   * @param {function} fn - Iteration function (child, index) => void
   * @param {any} ctx - Optional context for the iteration function
   */
  forEach(children, fn, ctx);
  
  /**
   * Counts the number of children
   * @param {ComponentChildren} children - Children to count
   * @returns {number} Number of children
   */
  count(children);
  
  /**
   * Ensures exactly one child is present
   * @param {ComponentChildren} children - Children to validate
   * @returns {VNode} The single child
   * @throws {Error} If zero or multiple children
   */
  only(children);
  
  /**
   * Converts children to a flat array
   * @param {ComponentChildren} children - Children to convert
   * @returns {Array} Flat array of children
   */
  toArray(children);
};

import { Children } from 'preact-compat';

function ParentComponent({ children }) {
  // Map over children to add props
  const mappedChildren = Children.map(children, (child, index) => {
    return cloneElement(child, { key: index, parentIndex: index });
  });
  
  // Count children
  const childCount = Children.count(children);
  
  // Ensure single child
  const singleChild = Children.only(children); // Throws if not exactly one
  
  // Convert to array for manipulation
  const childArray = Children.toArray(children);
  
  return (
    <div>
      <p>Child count: {childCount}</p>
      {mappedChildren}
    </div>
  );
}

// Usage
function App() {
  return (
    <ParentComponent>
      <div>Child 1</div>
      <div>Child 2</div>
      <div>Child 3</div>
    </ParentComponent>
  );
}

import { Children, cloneElement } from 'preact-compat';

// Add common props to all children
function withCommonProps(children, commonProps) {
  return Children.map(children, child => {
    if (isValidElement(child)) {
      return cloneElement(child, commonProps);
    }
    return child;
  });
}

// Filter children by type
function filterChildrenByType(children, targetType) {
  return Children.toArray(children).filter(child => 
    isValidElement(child) && child.type === targetType
  );
}

// Recursive children processing
function processChildrenRecursively(children, processor) {
  return Children.map(children, child => {
    if (isValidElement(child) && child.props.children) {
      return cloneElement(child, {
        children: processChildrenRecursively(child.props.children, processor)
      });
    }
    return processor(child);
  });
}

type ComponentChildren = VNode<any> | object | string | number | boolean | null | undefined | Array<ComponentChildren>;

interface ChildrenAPI {
  map<T>(children: ComponentChildren, fn: (child: any, index: number) => T, ctx?: any): T[];
  forEach(children: ComponentChildren, fn: (child: any, index: number) => void, ctx?: any): void;
  count(children: ComponentChildren): number;
  only(children: ComponentChildren): VNode;
  toArray(children: ComponentChildren): Array<any>;
}