RFC on my sample (or writable computed) implemention

[voladelta]

Hey guys,

I used valtio with svelte. And while developing my app, i ran into a pattern where local state needs to sync data with global state. User can change local state freely, but when global state changes, local state will auto sync.

//-- in setting store
const appSettings = {
  selectedTheme: "Ayu",
  themeList: [...]
  ...
};

//-- in Theme Editor

// get latest theme object from themeList by selectedTheme
const theme = sample(
  // proxyObject to subscribe and get data from
  appSettings, 
  // it = snapshot of appSettings, so we can't change it by mistake
  it => it.themeList.find(theme => theme.name === it.selectedTheme)
)

// now user can change the theme freely, if they cancel, the local state isn't commit to global
// if they select new theme name, the theme object is updated
// we dont need to select the theme name, then find the theme object, set it to local state
// this way, we can write code in declarative way

So here is the implementation:

function sample(proxyObject, computeFn) {
  // compute initial value for the internal proxy from snapshot of proxy object(s)
  const sam = proxy({
    value: computeFn(getSnapshot(proxyObject)),
  });

  // we need to find *direct* parents of proxy object(s)
  // to prevent too many runs
  // for example: we have the flow: a <- b, b <- c
  // if d samples from b & c, then we only need to subscribe to c's changes
  // because b's changes will make c to change. instead of 2 runs, we only need 1 run.
  const parent = getParent(proxyObject);
  setupLinks(sam, parent);

  // subcribe to parents' changes, and collect unsubscribe to for unmount operation
  let unsub = []
  parent.forEach((it) => {
    const un = subscribe(it, () => {
      sam.value = fn(getSnapshot(proxyObject));
    });
    unsub.push(un)
  });

  // i prefer getter function calling pattern than direct `value` access
  // i can guard the value with getSnapshot later
  // sample() is better then sample.value (also i don't like `ref.value` like vue3)
  const getter = () => sam.value;

  // expose raw so we can subscribe to changes
  Object.defineProperty(getter, "raw", {
    value: sam,
  });
  
  // stop the computation, usually on unMount
  Object.defineProperty(getter, "stop", {
    value: () => unsub.forEach(it => it())
  })

  return getter;
}

// check if a value is a sample for other sample related operation
const isSampled = (sus) =>
  typeof sus === "function" && !!sus.raw;

// helper to get the snapshot from an object, sample or get value from string/number,...
function getSnapshot(proxyObject: any) {
  if (!proxyObject) return proxyObject;
  if (Array.isArray(proxyObject)) return proxyObject.map(getSnapshot);
  if (isSampled(proxyObject)) return snapshot(proxyObject.raw).value;
  if (typeof proxyObject === "object") return snapshot(proxyObject);
  return proxyObject;
}

// we save parent and children links here
// to help finding direct parent and debugging
const _sampleParentLinks = new WeakMap();
const _sampleChildLinks = new WeakMap();

function getParent(src) {
  src = Array.isArray(src) ? src : [src];
  src = src.map((it) => isSampled(it) ? it.raw : it);

  // so we just pass all the parent proxy objects at first
  // then we remove it later
  const parent = [...src];
  src.forEach((it) => {
    if (_sampleParentLinks.has(it)) {
      _sampleParentLinks.get(it).forEach((pa) => {
        const idx = parent.indexOf(pa);
        if (idx < 0) return;
        // because other `src` already depended on current parent 
        // so we remove it from the parent list
        parent.splice(idx, 1);
      });
    }
  });

  return parent;
}

// we add parent to node, so we can pull it out and check if parent exist in the `parent` array above
function setupLinks(node, parentNodes) {
  _sampleParentLinks.set(node, parentNodes);

  // setup the child links for debugging purpose only
 // when parent is `stop`, but children need updates, we can subscribe to grandparent 
  parentNodes.forEach((it) => {
    if (_sampleChildLinks.has(it)) {
      _sampleChildLinks.get(it).push(node);
    } else {
      _sampleChildLinks.set(it, [node]);
    }
  });
}

// dev helper
function getLinks(node) {
  return {
    parent: _sampleParentLinks.get(node.raw ?? node),
    children: _sampleChildLinks.get(node.raw ?? node),
  };
}

export const _DEV = {
  getLinks,
  _sampleChildLinks,
  _sampleParentLinks,
};

Actually i have set and subscribe for getter above, to use with svelte, but i remove to keep it as vanilla.
What could i improve? What alternative pattern do you use?

Thank you for taking time reading this 👍🤟