const __refs__ = {};
const __reactives__ = [];
const __reactiveEl__ = document.querySelectorAll("[reactive]");
const reactive = (obj) => {
  /*Add logic*/
};
const __updateDOM__ = (ref) => {
  /*Add logic*/
};

<h1 reactive>The time is ${count}</h1>

const reactive = (obj) => {
  //Loop through the string
  Object.keys(obj).forEach((key) => {
    // defineProperty, anyone??
    // We want to maintain reactivity, so we are using custom
    // getters and setters
    Object.defineProperty(__refs__, key, {
      get() {
        return obj[key];
      },
      // This shows an interesting aspect of the logic.
      // This will update the target element everytime
      // something changes.
      set(val) {
        obj[key] = val;
        __updateDOM__(key);
      },
    });
    // Think of this as an initial render
    __updateDOM__(key);
  });
  // This is an important step otherwise
  // everything is useless
  return __refs__;
};

// Ref can be any key from the __refs__ store
const __updateDOM__ = (ref) => {
  // This is to check whether we want to update a specific ref value
  if (ref) {
    __reactives__
      // filter out the elements we need
      .filter((reactive) => reactive.dataset.ref === ref)
      .forEach((reactive) => {
        let ref = reactive.dataset.ref;
        // Interacting with the DOM
        // Nullish coalescing, anybody?
        reactive.textContent = __refs__[ref] ?? "";
      });
  }
  // UPDATE ALL!!
  else
    __reactives__.forEach((reactive) => {
      let ref = reactive.dataset.ref;
      // Interacting with the DOM
      // Nullish coalescing, anybody?
      reactive.textContent = __refs__[ref] ?? "";
    });
};

// Get live elements
const __reactiveEl__ = document.querySelectorAll("[reactive]");
__reactiveEl__.forEach((el) => {
  // Match the `count` between <h1 reactive>${count}</h1>
  const refs = el.innerHTML.match(/\${([^}]+)}/g);
  // If the refs exist
  if (refs) {
    refs.forEach((ref) => {
      // extract it
      const dataRef = ref.split("{")[1].split("}")[0].trim();
      // insert a special span element with the element
      // and store the key name in the `data-ref` attribute
      el.innerHTML = el.innerHTML.replace(
        ref,
        `<span class="reactivity-anywhere" data-ref="${dataRef}"></span>`
      );
    });
    // Push the span element in __reactives__
    __reactives__.push(...el.querySelectorAll("span.reactivity-anywhere"));
  }
});
// Initialize all the magic!!
__updateDOM__();

const parseDefaultRefValue = (el) => {
  let parsed = null;
  try {
    // If the passed key is a function, run it
    // and store the value
    // I'm sorry, but we need to use eval here
    parsed = eval(`(${el.getAttribute("ref-default")})()`);
  } catch (e) {
    parsed = el.getAttribute("ref-default");
  }
  return parsed;
};
const assignDefaultRefsToInputs = (el, ref) => {
  __refs__[ref] = parseDefaultRefValue(el);
};
// Select input and textarea elements containing the
// 'ref' attribute, where the attr. value refers to any
// key in the __refs__ store.
// The `ref-default` contains the default value for the `ref`
// eg.
// <textarea ref="name"></textarea>
document.querySelectorAll("input[ref], textarea[ref]").forEach((el) => {
  // Keep a ref to the ref!! Because we don't want to
  // lose it in event listeners
  const ref = el.getAttribute("ref");
  if (ref) {
    // lazily update default values
    window.addEventListener("load", () => assignDefaultRefsToInputs(el, ref));
    el.addEventListener("input", () => {
      // again, a dumb reference to the ref
      const elRef = ref;
      // preserve default value
      const defaultVal = parseDefaultRefValue(el);
      // Set whatever value is typed as the ref value
      // else, the default value
      __refs__[elRef] = el.value !== "" ? el.value : defaultVal;
      if (__refs__[elRef] !== defaultVal) {
        // Keep rest of the input/textarea elements in sync
        Array.from(document.querySelectorAll("input[ref], textarea[ref]"))
          // Find input/textareas with same refs
          .filter((el) => el.getAttribute("ref") === elRef)
          // Keep their value in sync
          .forEach((el) => (el.value = __refs__[elRef]));
      }
    });
  }
});