lupine.web/src/core/replace-innerhtml.ts

lupine.web is a extremely fast, small size and lightweight frontend framework, using React TSX syntax.

export const replaceInnerhtml = async (el: Element, newHtml: string) => {
  // keep <style id="sty-${newProps._id}">...</style>
  const firstDom = el.firstChild as Element;
  if (firstDom && firstDom.tagName === 'STYLE') {
    firstDom.parentNode?.removeChild(firstDom);
  }

  await callUnload(el);
  el.innerHTML = newHtml;

  if (firstDom && firstDom.tagName === 'STYLE') {
    el.insertBefore(firstDom, el.firstChild);
  }
};
export const callUnload = async (el: Element) => {
  const promises: Promise<void>[] = [];
  el.querySelectorAll('[data-ref]').forEach((child: any) => {
    if (child._lj && child._lj.onUnload) {
      promises.push(child._lj.onUnload());
    }
  });
  await Promise.all(promises);
};