decorator-with-autotracking-apis.js

import { createTag, dirtyTag, consumeTag } from '@glimmer/tracking/tags';

export function inLocalStorage(
  target,
  propertyKey,
  descriptor
) {
  const targetName = target.constructor.name;
  const key = `${targetName}-${propertyKey}`;

  const { initializer } = descriptor;

  let tags = new WeakMap();

  return {
    configurable: true,
    enumerable: true,
    get() {
      const lsValue = localStorage.getItem(key);
      const json = (lsValue && JSON.parse(lsValue)) || { value: initializer() };

      let tag = tags.get(this);

      if (!tag) {
        tag = createTag();
        tags.set(this, tag);
      }

      consumeTag(tag);

      return json.value;
    },
    set(value) {
      const lsValue = JSON.stringify({ value });

      localStorage.setItem(key, lsValue);

      if (tags.has(this)) {
        dirtyTag(tags.get(this));
      }
    },
  };
}