@openmrs/esm-app-shell 5.3.3-pre.1231 → 5.3.3-pre.1247

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-app-shell",
-  "version": "5.3.3-pre.1231",
+  "version": "5.3.3-pre.1247",
   "license": "MPL-2.0",
   "main": "dist/openmrs.js",
   "scripts": {
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@carbon/react": "~1.37.0",
-    "@openmrs/esm-framework": "5.3.3-pre.1231",
-    "@openmrs/esm-styleguide": "5.3.3-pre.1231",
+    "@openmrs/esm-framework": "5.3.3-pre.1247",
+    "@openmrs/esm-styleguide": "5.3.3-pre.1247",
     "dayjs": "^1.10.4",
     "dexie": "^3.0.3",
     "html-webpack-plugin": "^5.5.0",

package/src/apps.ts

@@ -7,14 +7,9 @@ import {
   ExtensionDefinition,
   OpenmrsAppRoutes,
   RouteDefinition,
-} from "@openmrs/esm-framework";
-import {
-  ActivityFn,
-  LifeCycles,
-  pathToActiveWhen,
-  registerApplication,
-} from "single-spa";
-import { emptyLifecycle, routeRegex } from "./helpers";
+} from '@openmrs/esm-framework';
+import { ActivityFn, LifeCycles, pathToActiveWhen, registerApplication } from 'single-spa';
+import { emptyLifecycle, routeRegex } from './helpers';
 
 const pages: Array<RegisteredPageDefinition> = [];
 
@@ -28,13 +23,11 @@ const pages: Array<RegisteredPageDefinition> = [];
  * strings, regexps, and booleans
  * @returns An activityFn suitable to use for a single-spa application
  */
-function getActivityFn(
-  route: RouteDefinition | Array<RouteDefinition>
-): ActivityFn {
+function getActivityFn(route: RouteDefinition | Array<RouteDefinition>): ActivityFn {
   if (Array.isArray(route)) {
     const activators = route.map(getActivityFn);
     return (location) => activators.some((activator) => activator(location));
-  } else if (typeof route === "string") {
+  } else if (typeof route === 'string') {
     return pathToActiveWhen(window.getOpenmrsSpaBase() + route);
   } else if (route instanceof RegExp) {
     return (location) => routeRegex(route, location);
@@ -55,20 +48,12 @@ function getActivityFn(
  * @param pageDefinition The RegisteredPageDefinition object for this page
  * @returns An activityFn suitable to use for a single-spa application
  */
-function wrapPageActivityFn(
-  activityFn: ActivityFn,
-  { online, offline }: RegisteredPageDefinition
-) {
+function wrapPageActivityFn(activityFn: ActivityFn, { online, offline }: RegisteredPageDefinition) {
   return (location: Location) => {
     // basically, if the page should only work online and we're offline or if the
     // page should only work offline and we're online, defaulting to always rendering
     // the page
-    if (
-      !(
-        (navigator.onLine && (online ?? true)) ||
-        (!navigator.onLine && (offline ?? false))
-      )
-    ) {
+    if (!((navigator.onLine && (online ?? true)) || (!navigator.onLine && (offline ?? false)))) {
       return false;
     }
 
@@ -76,7 +61,7 @@ function wrapPageActivityFn(
   };
 }
 
-const STARTUP_FUNCTION = "startupApp";
+const STARTUP_FUNCTION = 'startupApp';
 /**
  * @internal
  *
@@ -98,28 +83,18 @@ const initializedApps = new Map<string, Promise<unknown>>();
  * React-based pages or extensions should generally use the framework's
  * `getAsyncLifecycle()` or `getSyncLifecycle()` functions.
  */
-function getLoader(
-  appName: string,
-  component: string
-): () => Promise<LifeCycles> {
+function getLoader(appName: string, component: string): () => Promise<LifeCycles> {
   return async () => {
     const module = await importDynamic<
-      Record<
-        Exclude<string, "startupApp">,
-        () => LifeCycles | Promise<LifeCycles>
-      > & { startupApp?: () => unknown }
+      Record<Exclude<string, 'startupApp'>, () => LifeCycles | Promise<LifeCycles>> & { startupApp?: () => unknown }
     >(appName);
 
-    if (
-      module &&
-      Object.hasOwn(module, component) &&
-      typeof module[component] === "function"
-    ) {
+    if (module && Object.hasOwn(module, component) && typeof module[component] === 'function') {
       if (!(appName in initializedApps)) {
         await (initializedApps[appName] = new Promise((resolve, reject) => {
           if (Object.hasOwn(module, STARTUP_FUNCTION)) {
             const startup = module[STARTUP_FUNCTION];
-            if (typeof startup === "function") {
+            if (typeof startup === 'function') {
               return Promise.resolve(startup()).then(resolve).catch(reject);
             }
           }
@@ -133,13 +108,9 @@ function getLoader(
       return Promise.resolve(module[component]());
     } else {
       if (module && Object.hasOwn(module, component)) {
-        console.warn(
-          `The export ${component} of the app ${appName} is not a function`
-        );
+        console.warn(`The export ${component} of the app ${appName} is not a function`);
       } else {
-        console.warn(
-          `The app ${appName} does not define a component called ${component}, this cannot be loaded`
-        );
+        console.warn(`The app ${appName} does not define a component called ${component}, this cannot be loaded`);
       }
     }
 
@@ -157,11 +128,10 @@ function getLoader(
  * definition.
  */
 export function registerApp(appName: string, routes: OpenmrsAppRoutes) {
-  if (appName && routes && typeof routes === "object") {
+  if (appName && routes && typeof routes === 'object') {
     defineConfigSchema(appName, {});
 
-    const availableExtensions: Array<ExtensionDefinition> =
-      routes.extensions ?? [];
+    const availableExtensions: Array<ExtensionDefinition> = routes.extensions ?? [];
 
     routes.pages?.forEach((p) => {
       pages.push({ ...p, order: p.order ?? Number.MAX_SAFE_INTEGER, appName });
@@ -187,7 +157,7 @@ export function finishRegisteringAllApps() {
     if (sort != 0) {
       return sort;
     }
-    return a.appName.localeCompare(b.appName, "en");
+    return a.appName.localeCompare(b.appName, 'en');
   });
 
   // Create a div for each page. This ensures their DOM order.
@@ -203,7 +173,7 @@ export function finishRegisteringAllApps() {
     const index = appIndices.get(page.appName);
 
     const name = `${page.appName}-page-${index}`;
-    const div = document.createElement("div");
+    const div = document.createElement('div');
     div.id = `single-spa-application:${name}`;
     document.body.appendChild(div);
     tryRegisterPage(name, page);
@@ -218,22 +188,19 @@ export function finishRegisteringAllApps() {
  * @param appName The name of the app containing this page
  * @param page A Javascript object that describes the page defintion, derived from `routes.json`
  */
-export function tryRegisterPage(
-  appName: string,
-  page: RegisteredPageDefinition
-) {
+export function tryRegisterPage(appName: string, page: RegisteredPageDefinition) {
   const route =
-    typeof page.route !== "undefined"
+    typeof page.route !== 'undefined'
       ? page.route
-      : typeof page.routeRegex !== "undefined"
-      ? new RegExp(page.routeRegex)
-      : false;
+      : typeof page.routeRegex !== 'undefined'
+        ? new RegExp(page.routeRegex)
+        : false;
 
   if (route === false) {
     console.warn(
       `A registered page definition is missing a route and thus cannot be registered.
 To fix this, ensure that you define the "route" (or alternatively the "routeRegex") field inside the extension definition.`,
-      appName
+      appName,
     );
     return;
   }
@@ -242,7 +209,7 @@ To fix this, ensure that you define the "route" (or alternatively the "routeRege
     console.warn(
       `A registered page definition is missing a component and thus cannot be registered.
 To fix this, ensure that you define the "component" field inside the page definition.`,
-      appName
+      appName,
     );
     return;
   }
@@ -259,17 +226,14 @@ To fix this, ensure that you define the "component" field inside the page defini
  * @param appName The name of the app containing this page
  * @param extension A Javascript object that describes the extension defintion, derived from `routes.json`
  */
-export function tryRegisterExtension(
-  appName: string,
-  extension: ExtensionDefinition
-) {
+export function tryRegisterExtension(appName: string, extension: ExtensionDefinition) {
   const name = extension.name;
   if (!name) {
     console.error(
       `An extension definition in ${appName} is missing an name and thus cannot be
 registered. To fix this, ensure that you define the "name" field inside the
 extension definition.`,
-      extension
+      extension,
     );
     return;
   }
@@ -277,20 +241,16 @@ extension definition.`,
   if (extension.slots && extension.slot) {
     console.warn(
       `The extension ${name} from ${appName} declares both a 'slots' property and 
-a 'slot' property. Only the 'slots' property will be honored.`
+a 'slot' property. Only the 'slots' property will be honored.`,
     );
   }
-  const slots = extension.slots
-    ? extension.slots
-    : extension.slot
-    ? [extension.slot]
-    : [];
+  const slots = extension.slots ? extension.slots : extension.slot ? [extension.slot] : [];
 
   if (!extension.component && !extension.load) {
     console.error(
       `The extension ${name} from ${appName} is missing a 'component' entry and thus cannot be registered.
 To fix this, ensure that you define a 'component' field inside the extension definition.`,
-      extension
+      extension,
     );
     return;
   }
@@ -299,10 +259,10 @@ To fix this, ensure that you define a 'component' field inside the extension def
   if (extension.component) {
     loader = getLoader(appName, extension.component);
   } else if (extension.load) {
-    if (typeof extension.load !== "function") {
+    if (typeof extension.load !== 'function') {
       console.error(
         `The extension ${name} from ${appName} declares a 'load' property that is not a function. This is not
-supported, so the extension will not be loaded.`
+supported, so the extension will not be loaded.`,
       );
       return;
     }

package/src/declarations.d.ts

@@ -1,9 +1,6 @@
-declare module "*.css";
-declare module "*.scss";
+declare module '*.css';
+declare module '*.scss';
 declare const __webpack_share_scopes__: Record<
   string,
-  Record<
-    string,
-    { loaded?: 1; get: () => Promise<unknown>; from: string; eager: boolean }
-  >
+  Record<string, { loaded?: 1; get: () => Promise<unknown>; from: string; eager: boolean }>
 >;

package/src/helpers.ts

@@ -1,4 +1,4 @@
-import { LifeCycles } from "single-spa";
+import { LifeCycles } from 'single-spa';
 
 export const emptyLifecycle: LifeCycles<never> = {
   bootstrap() {
@@ -13,8 +13,6 @@ export const emptyLifecycle: LifeCycles<never> = {
 };
 
 export function routeRegex(regex: RegExp, location: Location) {
-  const result = regex.test(
-    location.pathname.replace(window.getOpenmrsSpaBase(), "")
-  );
+  const result = regex.test(location.pathname.replace(window.getOpenmrsSpaBase(), ''));
   return result;
 }

package/src/index.ts

@@ -1,37 +1,35 @@
-import "@openmrs/esm-styleguide/dist/openmrs-esm-styleguide.css";
-import "import-map-overrides";
-import "@openmrs/esm-framework";
-import type { SpaConfig } from "@openmrs/esm-framework/src/internal";
+import '@openmrs/esm-styleguide/dist/openmrs-esm-styleguide.css';
+import 'import-map-overrides';
+import '@openmrs/esm-framework';
+import type { SpaConfig } from '@openmrs/esm-framework/src/internal';
 
 export function setupPaths(config: SpaConfig) {
   let error = false;
   if (!config.apiUrl) {
     console.error(
-      "initializeSpa() was called without supplying an apiUrl. This means that the application cannot communicate with the backend."
+      'initializeSpa() was called without supplying an apiUrl. This means that the application cannot communicate with the backend.',
     );
     error = true;
   }
 
   if (!config.spaPath) {
     console.error(
-      "initializeSpa() was called without supplying a spaPath. This means that the application cannot properly generate urls."
+      'initializeSpa() was called without supplying a spaPath. This means that the application cannot properly generate urls.',
     );
     error = true;
   }
 
   if (error) {
     throw new Error(
-      "One or more required properties in the basic configuration of the application was missing and the application cannot be rendered. Please see the browser console for details."
+      'One or more required properties in the basic configuration of the application was missing and the application cannot be rendered. Please see the browser console for details.',
     );
   }
 
   window.openmrsBase = config.apiUrl;
   window.spaBase = config.spaPath;
-  window.spaEnv = config.env || "production";
+  window.spaEnv = config.env || 'production';
   window.spaVersion = process.env.BUILD_VERSION;
-  const spaBaseWithSlash = window.spaBase.endsWith("/")
-    ? window.spaBase
-    : window.spaBase + "/";
+  const spaBaseWithSlash = window.spaBase.endsWith('/') ? window.spaBase : window.spaBase + '/';
   window.getOpenmrsSpaBase = () => spaBaseWithSlash;
 }
 
@@ -44,14 +42,14 @@ export function setupUtils() {
       r.selectNode(source);
       sel.removeAllRanges();
       sel.addRange(r);
-      document.execCommand("copy");
+      document.execCommand('copy');
       sel.removeAllRanges();
     }
   };
 }
 
 function wireSpaPaths() {
-  const baseElement = document.createElement("base");
+  const baseElement = document.createElement('base');
   const baseHref = window.getOpenmrsSpaBase();
   baseElement.href = baseHref;
   document.head.appendChild(baseElement);
@@ -66,9 +64,9 @@ function initializeSpa(config: SpaConfig) {
   setupUtils();
   setupPaths(config);
   wireSpaPaths();
-  return Promise.resolve(__webpack_init_sharing__("default")).then(async () => {
+  return Promise.resolve(__webpack_init_sharing__('default')).then(async () => {
     const { configUrls = [], offline = true } = config;
-    const { run } = await import("./run");
+    const { run } = await import('./run');
     return run(configUrls, offline);
   });
 }

package/src/locale.ts

@@ -1,48 +1,43 @@
-import * as i18next from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-import { initReactI18next } from "react-i18next";
-import merge from "lodash-es/merge";
-import {
-  getConfigInternal,
-  importDynamic,
-} from "@openmrs/esm-framework/src/internal";
+import * as i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import merge from 'lodash-es/merge';
+import { getConfigInternal, importDynamic } from '@openmrs/esm-framework/src/internal';
 
 export function setupI18n() {
   window.i18next = i18next.default || i18next;
 
   const languageChangeObserver = new MutationObserver(() => {
     const reDetect: any = undefined;
-    window.i18next
-      .changeLanguage(reDetect)
-      .catch((e) => console.error("i18next failed to re-detect language", e));
+    window.i18next.changeLanguage(reDetect).catch((e) => console.error('i18next failed to re-detect language', e));
   });
 
   languageChangeObserver.observe(document.documentElement, {
-    attributeFilter: ["lang"],
+    attributeFilter: ['lang'],
     attributes: true,
   });
 
-  window.i18next.on("languageChanged", () => {
-    document.documentElement.setAttribute("dir", window.i18next.dir());
+  window.i18next.on('languageChanged', () => {
+    document.documentElement.setAttribute('dir', window.i18next.dir());
   });
 
   return window.i18next
     .use(LanguageDetector)
     .use<i18next.BackendModule>({
-      type: "backend",
+      type: 'backend',
       init() {},
       read(language, namespace, callback) {
-        if (namespace === "translation") {
+        if (namespace === 'translation') {
           callback(Error("can't handle translation namespace"), null);
         } else if (namespace === undefined || language === undefined) {
           callback(Error(), null);
-        } else if (namespace === "@openmrs/esm-app-shell") {
+        } else if (namespace === '@openmrs/esm-app-shell') {
           // currently, we don't have translations in the app shell
           getConfigInternal(namespace)
             .then((config) => {
               let translations = {};
-              if (config && "Translation overrides" in config) {
-                const overrides = config["Translation overrides"];
+              if (config && 'Translation overrides' in config) {
+                const overrides = config['Translation overrides'];
                 if (language in overrides) {
                   translations = overrides[language];
                 }
@@ -56,16 +51,13 @@ export function setupI18n() {
         } else {
           importDynamic(namespace)
             .then((module) =>
-              Promise.all([
-                getImportPromise(module, namespace, language),
-                getConfigInternal(namespace),
-              ])
+              Promise.all([getImportPromise(module, namespace, language), getConfigInternal(namespace)]),
             )
             .then(([json, config]) => {
               let translations = json ?? {};
 
-              if (config && "Translation overrides" in config) {
-                const overrides = config["Translation overrides"];
+              if (config && 'Translation overrides' in config) {
+                const overrides = config['Translation overrides'];
                 if (language in overrides) {
                   translations = merge(translations, overrides[language]);
                 }
@@ -82,10 +74,10 @@ export function setupI18n() {
     .use(initReactI18next)
     .init({
       detection: {
-        order: ["querystring", "htmlTag", "localStorage", "navigator"],
-        lookupQuerystring: "lang",
+        order: ['querystring', 'htmlTag', 'localStorage', 'navigator'],
+        lookupQuerystring: 'lang',
       },
-      fallbackLng: "en",
+      fallbackLng: 'en',
     });
 }
 
@@ -94,19 +86,17 @@ function getImportPromise(
     importTranslation: (language: string) => Promise<Record<string, string>>;
   },
   namespace: string,
-  language: string
+  language: string,
 ) {
-  if (typeof module.importTranslation !== "function") {
-    throw Error(
-      `Module ${namespace} does not export an importTranslation function`
-    );
+  if (typeof module.importTranslation !== 'function') {
+    throw Error(`Module ${namespace} does not export an importTranslation function`);
   }
 
   const importPromise = module.importTranslation(`./${language}.json`);
 
   if (!(importPromise instanceof Promise)) {
     throw Error(
-      `Module ${namespace} exports an importTranslation function that does not return a promise. Did you forget to set require.context mode to 'lazy'?`
+      `Module ${namespace} exports an importTranslation function that does not return a promise. Did you forget to set require.context mode to 'lazy'?`,
     );
   }