simpleReactiveStore.ts

import { set, unset, get, PropertyPath } from 'lodash';
import { useSyncExternalStore } from 'react';

export type SimpleReactiveStore = ReturnType<typeof createSimpleReactiveStore>;
/**
 *
 * @returns a simple store you can use with your react components.
 */
export function createSimpleReactiveStore() {
  const data: object = {};
  const registry: ((data: object) => void)[] = [];

  function subscribe(listener: (data: object) => void) {
    registry.push(listener);
    return () => {
      registry.splice(registry.indexOf(listener), 1);
    };
  }

  /**
   *
   * @param path
   * @param value has to be an immutable value if you want it to trigger a re-render.
   */
  function setValue<T>(path: PropertyPath, value: T) {
    if (value === undefined) {
      unset(data, path);
    } else {
      set(data, path, value);
    }

    registry.forEach((li) => li(data));
  }

  function getValue<T>(path: PropertyPath) {
    return get(data, path) as T;
  }

  function useValue<T>(path: PropertyPath, defaultValue: T) {
    const value = useSyncExternalStore(subscribe, () => getValue<T>(path) || defaultValue);
    return value;
  }

  return {
    useValue,
    setValue,
    getValue,
  };
}