spa-nav: navigation without page reload

spa-nav.ts

// change document title to new app
document.title = newApp.title

// change the url without re-loading to the new app's url
if (ev.type !== `popstate`) {
  // if we push on a popstate event, we break browser back button navigation, don't do that
  window.history.pushState(``, ``, url);
}

// disable old css and add new css if not already loaded
// if new css is already there, just activate it
const appAssetsUrlMap = this.appAssetsUrlMap;
const $curAppCss: any = document.querySelector(`head > link[href='${appAssetsUrlMap.get(curApp.appName).css[0]}']`);
const $newAppCss: any = document.querySelector(`head > link[href='${appAssetsUrlMap.get(newApp.appName).css[0]}']`);
if ($curAppCss) {
  $curAppCss.disabled = true; // see https://guides.codechewing.com/js/disable-enable-stylesheet-javascript
}
if ($newAppCss) {
  $newAppCss.disabled = false;
} else {
  document.head.appendChild(
    createElem(`link`, {rel: `stylesheet`, href: `${appAssetsUrlMap.get(newApp.appName).css[0]}`}),
  );
}

// add new js script if not already loaded
// otherwise re-initialize existing app via it's initAppFunc
if (!this.initAppFuncsMap.has(newApp.appName)) {
  document.body.appendChild(
    createElem(`script`, {type: `text/javascript`, src: `${appAssetsUrlMap.get(newApp.appName).js[0]}`}),
  );
} else {
  const initAppFunc = this.initAppFuncsMap.get(newApp.appName);
  const appElem = await initAppFunc();
  $mixpanelApp.innerHTML = ``;
  $mixpanelApp.appendChild(appElem);
}