@tommostools/use-context-selector/dist/index.cjs

Hook for simple context slicing in React

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  default: () => src_default,
  useContextSelector: () => useContextSelector
});
module.exports = __toCommonJS(src_exports);
var import_contexto = require("contexto");
var import_react = require("react");
function useContextSelector(context, rawSelector, deps) {
  const subscribe = (0, import_contexto.useSubscriber)();
  const selector = (0, import_react.useCallback)(
    rawSelector instanceof Function ? rawSelector : (value) => value[rawSelector],
    // Ignore changes to rawSelector if it's a function – caller has responsibility for supplying the dependencies
    rawSelector instanceof Function ? deps || [] : [rawSelector]
  );
  const subscribeWrapper = (0, import_react.useCallback)(
    () => {
      const [value, unsubscribe] = subscribe(
        context,
        (newValue) => setState((state2) => {
          const selection = selector(newValue);
          return selection !== state2.selection ? { value: newValue, selection, selector, context, unsubscribe } : state2;
        })
      );
      return { value, unsubscribe };
    },
    [context, selector, subscribe]
  );
  const [state, setState] = (0, import_react.useState)(() => {
    const { value, unsubscribe } = subscribeWrapper();
    return { value, selection: selector(value), selector, context, unsubscribe };
  });
  (0, import_react.useEffect)(
    () => {
      if (context !== state.context || selector !== state.selector) {
        let { value, unsubscribe, selection } = state;
        if (context !== state.context) {
          state.unsubscribe();
          ({ value, unsubscribe } = subscribeWrapper());
        }
        if (selector !== state.selector || value !== state.value)
          selection = selector(value);
        setState({ value, selection, selector, context, unsubscribe });
      }
    },
    [state, context, selector, subscribeWrapper]
  );
  return state.selection;
}
var src_default = useContextSelector;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useContextSelector
});