How to use the hyperview/src/services.shallowCloneToRoot function in hyperview

if (action === 'replace') {
          const parentElement = targetElement.parentNode;
          parentElement.replaceChild(newElement, targetElement);
          newRoot = shallowCloneToRoot(parentElement);
        }

        if (action === 'replace-inner') {
          let child = targetElement.firstChild;
          // Remove the target's children
          while (child !== null) {
            const nextChild = child.nextSibling;
            targetElement.removeChild(child);
            child = nextChild;
          }
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'append') {
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'prepend') {
          targetElement.insertBefore(newElement, targetElement.firstChild);
          newRoot = shallowCloneToRoot(targetElement);
        }

        // Update the DOM to hide the indicators shown during the request.
        if (showIndicatorIds) {
          showIndicatorIds.split(' ').forEach((id) => {
            const el = newRoot.getElementById(id);

if (action === 'replace-inner') {
          let child = targetElement.firstChild;
          // Remove the target's children
          while (child !== null) {
            const nextChild = child.nextSibling;
            targetElement.removeChild(child);
            child = nextChild;
          }
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'append') {
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'prepend') {
          targetElement.insertBefore(newElement, targetElement.firstChild);
          newRoot = shallowCloneToRoot(targetElement);
        }

        // Update the DOM to hide the indicators shown during the request.
        if (showIndicatorIds) {
          showIndicatorIds.split(' ').forEach((id) => {
            const el = newRoot.getElementById(id);
            if (el) {
              el.setAttribute('hide', 'true');
              newRoot = shallowCloneToRoot(el.parentNode);
              changedIndicator = true;
            }

const showElement = () => {
      const doc: Document = getRoot();
      const targetElement: ?Element = doc.getElementById(targetId);
      if (!targetElement) {
        return;
      }

      // Show the target
      targetElement.setAttribute('hide', 'false');
      let newRoot: Document = shallowCloneToRoot(targetElement);

      // If using delay, we need to undo the indicators shown earlier.
      if (delay > 0) {
        newRoot = Behaviors.setIndicatorsAfterLoad(
          showIndicatorIds,
          hideIndicatorIds,
          newRoot,
        );
      }
      // Update the DOM with the new shown state and finished indicators.
      updateRoot(newRoot);
    };

if (once) {
          currentElement.setAttribute('ran-once', 'true');
          newRoot = shallowCloneToRoot(currentElement.parentNode);
        }

        // If a target is specified and exists, use it. Otherwise, the action target defaults
        // to the element triggering the action.
        let targetElement = targetId ? newRoot.getElementById(targetId) : currentElement;
        if (!targetElement) {
          targetElement = currentElement;
        }

        if (action === 'replace') {
          const parentElement = targetElement.parentNode;
          parentElement.replaceChild(newElement, targetElement);
          newRoot = shallowCloneToRoot(parentElement);
        }

        if (action === 'replace-inner') {
          let child = targetElement.firstChild;
          // Remove the target's children
          while (child !== null) {
            const nextChild = child.nextSibling;
            targetElement.removeChild(child);
            child = nextChild;
          }
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'append') {
          targetElement.appendChild(newElement);

const hideElement = () => {
      const doc: Document = getRoot();
      const targetElement: ?Element = doc.getElementById(targetId);
      if (!targetElement) {
        return;
      }

      // Hide the target
      targetElement.setAttribute('hide', 'true');
      let newRoot: Document = shallowCloneToRoot(targetElement);

      // If using delay, we need to undo the indicators shown earlier.
      if (delay > 0) {
        newRoot = Behaviors.setIndicatorsAfterLoad(
          showIndicatorIds,
          hideIndicatorIds,
          newRoot,
        );
      }
      // Update the DOM with the new hidden state and finished indicators.
      updateRoot(newRoot);
    };

showIndicatorIds.split(' ').forEach((id) => {
            const el = newRoot.getElementById(id);
            if (el) {
              el.setAttribute('hide', 'true');
              newRoot = shallowCloneToRoot(el.parentNode);
              changedIndicator = true;
            }
          });
        }

callback: (
    element: Element,
    onUpdate: HvComponentOnUpdate,
    doc: Document,
  ): ?Node => {
    const targetId: ?DOMString = element.getAttribute('target');
    if (targetId) {
      const targetElement: ?Element = doc.getElementById(targetId);
      if (targetElement) {
        targetElement.setAttribute('selected', 'false');
        return shallowCloneToRoot(targetElement);
      }
    }
    return null;
  },
};

ids.reduce((newRoot, id) => {
    const indicatorElement: ?Element = root.getElementById(id);
    if (!indicatorElement) {
      return newRoot;
    }
    indicatorElement.setAttribute('hide', showIndicators ? 'false' : 'true');
    return shallowCloneToRoot(indicatorElement);
  }, root);

callback: (
    element: Element,
    onUpdate: HvComponentOnUpdate,
    doc: Document,
  ): ?Node => {
    const targetId: ?DOMString = element.getAttribute('target');
    if (targetId) {
      const targetElement: ?Element = doc.getElementById(targetId);
      if (targetElement) {
        targetElement.setAttribute('selected', 'true');
        return shallowCloneToRoot(targetElement);
      }
    }
    return null;
  },
};