wana/dist/shared/79278540.mjs

Easy observable state for React

import * as React from 'react';
import { useLayoutEffect } from 'react-layout-effect';
import { useMemoOne } from 'use-memo-one';
import { $O, emptyArray } from './815e560c.mjs';
import { no } from './6ab9b088.mjs';

const depth = React.createContext(0);
const AutoDepth = depth.Provider;
const useAutoDepth = () => React.useContext(depth);

function useChanges(target, onChange, deps) {
  const observable = target[$O];
  if (!observable) {
    throw Error("Expected an observable object");
  }
  const observer = useMemoOne(() => ({onChange}), emptyArray);
  useLayoutEffect(() => {
    observer.onChange = no(onChange);
  }, deps);
  useLayoutEffect(() => {
    const observers = observable.get($O);
    observers.add(observer);
    return () => {
      observers.delete(observer);
    };
  }, [observable]);
}

export { AutoDepth, useAutoDepth, useChanges };
//# sourceMappingURL=79278540.mjs.map