single-spa notes

README.md

Single SPA Notes

/**
 * Somehow, we have to handle a different route to listen request for route change events
 * based on the pathname.
 * The pathname may either be from root (i.e. production), but for testing, we want it
 * to run from another path.
 *
 * See also
 *
 * singleSpaNavigate(`${window.location.pathname.replace('/main')}/call`)
 *
 * window.dispatchEvent(new CustomEvent("single-spa:routing-event", { detail: {} })); originalEvent
 *
 * window.addEventListener('single-spa:routing-event', evt => {
 *   console.log('single-spa:routing-event', evt || null);
 *   if(evt && evt.type) {
 *     evt.preventDefault();
 *   }
 *   console.log(evt.detail.originalEvent); // PopStateEvent
 *   console.log(evt.detail.newAppStatuses); // { app1: MOUNTED, app2: NOT_MOUNTED }
 *   console.log(evt.detail.appsByNewStatus); // { MOUNTED: ['app1'], NOT_MOUNTED: ['app2'] }
 *   console.log(evt.detail.totalAppChanges); // 2
 * });
 *
 * Bookmarks:
 * - https://single-spa.js.org/docs/api/#configuration-object
 * - https://single-spa.js.org/docs/ecosystem-react
 */
export const createRouteSlug = (slug = '/'): string => {
  const out = slug.replace(/\/\//g, '/')
  console.log(`1  createRouteSlug(${slug})`, out)
  // window.location.pathname+
  return out
}