Minimal teaful-like store using useSyncExternalStore()

teaful-sync.js

import {useSyncExternalStore} from 'use-sync-external-store/shim';

const DOT = '.';

export default function createStore(defaultStore = {}) {
  let allStore = defaultStore;

  const listeners = new Set();
  function subscribe(listener) {
    listeners.add(listener);
    return () => listeners.delete(listener);
  }

  function buildSetter(path = '') {
    let fieldPath = Array.isArray(path) ? path : path.split(DOT);

    return (newValue) => {
      let prevStore = allStore;
      let value = newValue;

      if (typeof newValue === 'function') {
        value = newValue(getField(path));
      }

      allStore = path ?
       // Update a field
       setField(allStore, fieldPath, value) :
       // Update all the store
       value;
    };
  }

  function getField(path, fn = (a, c) => a?.[c]) {
    if (!path) return allStore;
    return (Array.isArray(path) ? path : path.split(DOT)).reduce(fn, allStore);
  }

  function setField(store, [prop, ...rest], value) {
    let newObj = Array.isArray(store) ? [...store] : {...store};
    newObj[prop] = rest.length ? setField(store[prop], rest, value) : value;
    return newObj;
  }

  const usePath = (path = "") => {
    const internalSetter = buildSetter(path);
    const setter = newVal => {
      internalSetter(newVal);
      listeners.forEach((l) => l());
    };
    const current = useSyncExternalStore(
      subscribe,
      () => getField(path),
    );
    return [current, setter];
  };

  return {usePath};
}