Revert "Revert "(fix) Fix issues with single-spa caused by naming ext…

…ensions (openmrs#720)"" This reverts commit ba4190d.
RandilaP · Jul 6, 2023 · 77f0a46 · 77f0a46
1 parent d9933a2
commit 77f0a46
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/packages/framework/esm-extensions/src/render.ts b/packages/framework/esm-extensions/src/render.ts
@@ -8,6 +8,8 @@ export interface CancelLoading {
   (): void;
 }
 
+let parcelCount = 0;
+
 /**
  * Mounts into a DOM node (representing an extension slot)
  * a lazy-loaded component from *any* frontend module
@@ -58,10 +60,11 @@ export async function renderExtension(
       });
 
       const { default: result, ...lifecycle } = await load();
+      const id = parcelCount++;
       parcel = mountRootParcel(
         renderFunction({
           ...(result ?? lifecycle),
-          name: `${extensionName} in ${extensionSlotName}`,
+          name: `${extensionSlotName}/${extensionName}-${id}`,
         }),
         {
           ...additionalProps,

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -2386,7 +2386,7 @@ that registered an extension component for this slot.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/render.ts:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-extensions/src/render.ts#L16)
+[packages/framework/esm-extensions/src/render.ts:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-extensions/src/render.ts#L18)
 
 ___
 

diff --git a/packages/framework/esm-react-utils/src/Extension.tsx b/packages/framework/esm-react-utils/src/Extension.tsx
@@ -92,18 +92,19 @@ export const Extension: React.FC<ExtensionProps> = ({
           const status = parcel.current.getStatus();
           switch (status) {
             case "MOUNTING":
-              parcel.current.mountPromise.then(parcel.current.unmount);
+              parcel.current.mountPromise.then(() => {
+                if (parcel.current?.getStatus() === "MOUNTED") {
+                  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"
-                  ) {
+                  if (parcel.current?.getStatus() === "MOUNTED") {
                     parcel.current.unmount();
                   }
                 });
@@ -124,21 +125,22 @@ export const Extension: React.FC<ExtensionProps> = ({
   ]);
 
   useEffect(() => {
-    if (parcel.current && parcel.current.update) {
+    if (
+      parcel.current &&
+      parcel.current.update &&
+      parcel.current.getStatus() !== "UNMOUNTING"
+    ) {
       Promise.all([parcel.current.mountPromise, updatePromise.current]).then(
         () => {
-          if (parcel?.current?.update) {
+          if (
+            parcel?.current?.getStatus() === "MOUNTED" &&
+            parcel.current.update
+          ) {
             updatePromise.current = parcel.current.update({ ...state });
           }
         }
       );
     }
-
-    return () => {
-      Promise.resolve(updatePromise.current).then(() => {
-        updatePromise.current = undefined;
-      });
-    };
   }, [state]);
 
   // The extension is rendered into the `<div>`. The `<div>` has relative