@openmrs/esm-react-utils 4.0.3-pre.367 → 4.0.3-pre.371

package/jest.config.js

@@ -4,7 +4,6 @@ module.exports = {
   },
   setupFilesAfterEnv: ["<rootDir>/src/setup-tests.js"],
   moduleNameMapper: {
-    "lodash-es": "lodash",
     "^lodash-es/(.*)$": "lodash/$1",
     "@openmrs/esm-error-handling":
       "<rootDir>/__mocks__/openmrs-esm-error-handling.mock.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "4.0.3-pre.367",
+  "version": "4.0.3-pre.371",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -55,18 +55,21 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^4.0.3-pre.367",
-    "@openmrs/esm-config": "^4.0.3-pre.367",
-    "@openmrs/esm-error-handling": "^4.0.3-pre.367",
-    "@openmrs/esm-extensions": "^4.0.3-pre.367",
-    "@openmrs/esm-globals": "^4.0.3-pre.367",
+    "@openmrs/esm-api": "^4.0.3-pre.371",
+    "@openmrs/esm-config": "^4.0.3-pre.371",
+    "@openmrs/esm-error-handling": "^4.0.3-pre.371",
+    "@openmrs/esm-extensions": "^4.0.3-pre.371",
+    "@openmrs/esm-globals": "^4.0.3-pre.371",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
+    "jest": "28.1.0",
+    "jest-cli": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.9",
     "rxjs": "^6.5.3",
     "unistore": "^3.5.2"
   },
-  "gitHead": "221f83fbf13c71ba941d4db5526369ea5e1e10ad"
+  "gitHead": "ad139e1b9853124a8328b443b309ad3a869fe9f3"
 }

package/src/Extension.tsx

@@ -1,15 +1,14 @@
 import { renderExtension } from "@openmrs/esm-extensions";
 import React, {
-  PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
   useRef,
   useState,
 } from "react";
-import { Parcel } from "single-spa";
+import type { Parcel } from "single-spa";
 import { ComponentContext } from ".";
-import { ExtensionData } from "./ComponentContext";
+import type { ExtensionData } from "./ComponentContext";
 
 export type ExtensionProps = {
   state?: Record<string, any>;
@@ -41,7 +40,8 @@ export const Extension: React.FC<ExtensionProps> = ({
 }) => {
   const [domElement, setDomElement] = useState<HTMLDivElement>();
   const { extension } = useContext(ComponentContext);
-  const parcel = useRef<Parcel | null>();
+  const parcel = useRef<Parcel | null>(null);
+  const updatePromise = useRef<Promise<null> | null>(null);
 
   useEffect(() => {
     if (wrap) {
@@ -58,7 +58,7 @@ export const Extension: React.FC<ExtensionProps> = ({
   }, []);
 
   const ref = useCallback(
-    (node) => {
+    (node: HTMLDivElement) => {
       setDomElement(node);
     },
     [setDomElement]
@@ -66,30 +66,69 @@ export const Extension: React.FC<ExtensionProps> = ({
 
   useEffect(() => {
     if (domElement != null && extension && !parcel.current) {
-      parcel.current = renderExtension(
+      renderExtension(
         domElement,
         extension.extensionSlotName,
         extension.extensionSlotModuleName,
         extension.extensionId,
         undefined,
         state
-      );
+      ).then((newParcel) => {
+        parcel.current = newParcel;
+      });
+
       return () => {
-        parcel.current && parcel.current.unmount();
+        if (parcel && parcel.current) {
+          const status = parcel.current.getStatus();
+          switch (status) {
+            case "MOUNTING":
+              parcel.current.mountPromise.then(parcel.current.unmount);
+              break;
+            case "MOUNTED":
+              parcel.current.unmount();
+              break;
+            case "UPDATING":
+              if (updatePromise.current) {
+                updatePromise.current.then(() => {
+                  if (
+                    parcel.current &&
+                    parcel.current.getStatus() === "MOUNTED"
+                  ) {
+                    parcel.current.unmount();
+                  }
+                });
+              }
+          }
+        }
       };
     }
+
+    // we intentionally do not re-run this hook if state gets updated
+    // state updates are handled in the next useEffect hook
+    // eslint-disable-next-line eslintreact-hooks/exhaustive-deps
   }, [
     extension?.extensionSlotName,
     extension?.extensionId,
     extension?.extensionSlotModuleName,
-    state,
     domElement,
   ]);
 
   useEffect(() => {
     if (parcel.current && parcel.current.update) {
-      parcel.current.update({ ...state });
+      if (parcel.current.getStatus() === "MOUNTED") {
+        parcel.current.update({ ...state });
+      } else if (parcel.current.getStatus() === "MOUNTING") {
+        parcel.current.mountPromise.then(() => {
+          if (parcel.current && parcel.current.update) {
+            updatePromise.current = parcel.current.update({ ...state });
+          }
+        });
+      }
     }
+
+    return () => {
+      updatePromise.current = null;
+    };
   }, [parcel.current, state]);
 
   // The extension is rendered into the `<div>`. The `<div>` has relative

package/src/setup-tests.js

@@ -1,12 +1,5 @@
 import "@testing-library/jest-dom/extend-expect";
 
-window.System = {
-  import: (name) => import(name),
-  resolve: jest.fn().mockImplementation(() => {
-    throw new Error("file not found");
-  }),
-};
-
 window.openmrsBase = "/openmrs";
 window.spaBase = "/spa";
 window.getOpenmrsSpaBase = () => "/openmrs/spa/";