dreamstate/esm/development/core/provision/combined/createCombinedProvider.js

Store management library based on react context and observers

import { provideSubTreeRecursive } from './provideSubTreeRecursive.js';
import { useSourceObserving } from './useSourceObserving.js';

/**
 * Creates a provider that unifies multiple data sources and attempts to re-render all providers on every update.
 *
 * This function generates a React provider component that observes changes across all specified context
 * managers. This combined provider triggers a re-render for all related provider components whenever any single
 * manager's state is updated.
 *
 * For example, if you have 10 sources, all 10 context provider components will re-render when any one of them
 * updates, and the difference between the current and previous state is matched using React's reference checks.
 *
 * @param {Array<TAnyContextManagerConstructor>} sources - An array of context manager class references
 *   that should be combined into a single provider.
 * @returns {FunctionComponent} A React function component that acts as a combined provider for the specified
 *   context manager classes, ensuring synchronized re-renders across all providers.
 */
function createCombinedProvider(sources) {
  function Provider(props) {
    var registry = useSourceObserving(sources, props.initialState);
    return provideSubTreeRecursive(props.children, sources, registry);
  }
  /*
   * One observer for all provider sources and many context providers.
   */
  {
    Provider.displayName = "Dreamstate.CombinedProvider[".concat(sources.map(function (it) {
      return it.name;
    }), "]");
  }
  return Provider;
}

export { createCombinedProvider };