@openmrs/esm-react-utils 5.0.3-pre.882 → 5.0.3-pre.894

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.0.3-pre.882",
+  "version": "5.0.3-pre.894",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -44,11 +44,11 @@
     "swr": "^2.0.1"
   },
   "peerDependencies": {
-    "@openmrs/esm-api": "4.x",
-    "@openmrs/esm-config": "4.x",
-    "@openmrs/esm-error-handling": "4.x",
-    "@openmrs/esm-extensions": "4.x",
-    "@openmrs/esm-globals": "4.x",
+    "@openmrs/esm-api": "5.x",
+    "@openmrs/esm-config": "5.x",
+    "@openmrs/esm-error-handling": "5.x",
+    "@openmrs/esm-extensions": "5.x",
+    "@openmrs/esm-globals": "5.x",
     "dayjs": "1.x",
     "i18next": "19.x",
     "react": "18.x",
@@ -56,11 +56,12 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^5.0.3-pre.882",
-    "@openmrs/esm-config": "^5.0.3-pre.882",
-    "@openmrs/esm-error-handling": "^5.0.3-pre.882",
-    "@openmrs/esm-extensions": "^5.0.3-pre.882",
-    "@openmrs/esm-globals": "^5.0.3-pre.882",
+    "@openmrs/esm-api": "^5.0.3-pre.894",
+    "@openmrs/esm-config": "^5.0.3-pre.894",
+    "@openmrs/esm-error-handling": "^5.0.3-pre.894",
+    "@openmrs/esm-extensions": "^5.0.3-pre.894",
+    "@openmrs/esm-feature-flags": "^5.0.3-pre.894",
+    "@openmrs/esm-globals": "^5.0.3-pre.894",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
     "react": "^18.1.0",
@@ -69,5 +70,5 @@
     "rxjs": "^6.5.3",
     "webpack": "^5.88.0"
   },
-  "gitHead": "ae49ca10f8b7954d5b4c6fec4b4c07880a83d649"
+  "gitHead": "f23d967551442c25ae03cd386fbaf217c1c5f0bc"
 }

package/src/Extension.tsx

@@ -41,7 +41,7 @@ export const Extension: React.FC<ExtensionProps> = ({
   const [domElement, setDomElement] = useState<HTMLDivElement>();
   const { extension } = useContext(ComponentContext);
   const parcel = useRef<Parcel | null>(null);
-  const updatePromise = useRef<Promise<void> | undefined>();
+  const updatePromise = useRef<Promise<void>>(Promise.resolve());
   const rendering = useRef<boolean>(false);
 
   useEffect(() => {
@@ -136,7 +136,19 @@ export const Extension: React.FC<ExtensionProps> = ({
             parcel?.current?.getStatus() === "MOUNTED" &&
             parcel.current.update
           ) {
-            updatePromise.current = parcel.current.update({ ...state });
+            updatePromise.current = parcel.current
+              .update({ ...state })
+              .catch((err) => {
+                // if we were trying to update but the component was unmounted
+                // while this was happening, ignore the error
+                if (
+                  !(err instanceof Error) ||
+                  !err.message.includes("minified message #32") ||
+                  parcel.current?.getStatus() === "MOUNTED"
+                ) {
+                  throw err;
+                }
+              });
           }
         }
       );

package/src/extensions.test.tsx

@@ -181,11 +181,14 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
       );
       const metas = useExtensionSlotMeta("Box");
       const wrapItem = useCallback(
-        (slot: React.ReactNode, extension: ExtensionData) => {
+        (slot: React.ReactNode, extension?: ExtensionData) => {
           return (
             <div>
               <h1>
-                {metas[getExtensionNameFromId(extension.extensionId)].code}
+                {
+                  metas[getExtensionNameFromId(extension?.extensionId ?? "")]
+                    .code
+                }
               </h1>
               {slot}
             </div>
@@ -196,7 +199,7 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
       return (
         <div>
           <ExtensionSlot name="Box">
-            <Extension wrap={wrapItem} state={{ suffix }} />
+            <Extension state={{ suffix }}>{wrapItem}</Extension>
           </ExtensionSlot>
           <button onClick={toggleSuffix}>Toggle suffix</button>
         </div>

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./useExtensionInternalStore";
 export * from "./useExtensionSlot";
 export * from "./useExtensionSlotMeta";
 export * from "./useExtensionStore";
+export * from "./useFeatureFlag";
 export * from "./useForceUpdate";
 export * from "./useLayoutType";
 export * from "./useLocations";

package/src/useFeatureFlag.ts

@@ -0,0 +1,31 @@
+/** @module @category Feature Flags */
+import { useEffect } from "react";
+import { useStore } from "./useStore";
+import { featureFlagsStore } from "@openmrs/esm-feature-flags";
+
+/** Use this function to tell whether a feature flag is toggled on or off.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import { useFeatureFlag } from "@openmrs/esm-react-utils";
+ *
+ * export function MyComponent() {
+ *  const isMyFeatureFlagOn = useFeatureFlag("my-feature-flag");
+ *  return <>{isMyFeatureFlagOn && <ExperimentalFeature />}</>;
+ * }
+ * ```
+ */
+export function useFeatureFlag(flagName: string) {
+  const { flags } = useStore(featureFlagsStore);
+
+  useEffect(() => {
+    if (!flags[flagName]) {
+      console.error(
+        `useFeatureFlag: Attempted to get value of non-existent flag "${flagName}". Did you forget to call registerFeatureFlag?`
+      );
+    }
+  }, [flags[flagName]]);
+
+  return flags[flagName]?.enabled;
+}