@openmrs/esm-react-utils 3.1.15-pre.754 → 3.1.15-pre.767

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "3.1.15-pre.754",
+  "version": "3.1.15-pre.767",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -53,11 +53,11 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^3.1.15-pre.754",
-    "@openmrs/esm-config": "^3.1.15-pre.754",
-    "@openmrs/esm-error-handling": "^3.1.15-pre.754",
-    "@openmrs/esm-extensions": "^3.1.15-pre.754",
-    "@openmrs/esm-globals": "^3.1.15-pre.754",
+    "@openmrs/esm-api": "^3.1.15-pre.767",
+    "@openmrs/esm-config": "^3.1.15-pre.767",
+    "@openmrs/esm-error-handling": "^3.1.15-pre.767",
+    "@openmrs/esm-extensions": "^3.1.15-pre.767",
+    "@openmrs/esm-globals": "^3.1.15-pre.767",
     "i18next": "^19.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -65,5 +65,5 @@
     "rxjs": "^6.5.3",
     "unistore": "^3.5.2"
   },
-  "gitHead": "527e5cfe5c9478a382f03db49bd75f9be2c4b15d"
+  "gitHead": "c7b2c24b8fb56043e8165d95cdccd2c6ab34670b"
 }

package/src/Extension.tsx

@@ -1,7 +1,6 @@
-import { renderExtension } from "@openmrs/esm-extensions";
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import { ComponentContext } from ".";
+import React from "react";
 import { ExtensionData } from "./ComponentContext";
+import { useExtension } from "./useExtension";
 
 export interface ExtensionProps {
   state?: Record<string, any>;
@@ -21,31 +20,7 @@ export interface ExtensionProps {
  * and *must* only be used once within that `<ExtensionSlot>`.
  */
 export const Extension: React.FC<ExtensionProps> = ({ state, wrap }) => {
-  const [domElement, setDomElement] = useState<HTMLDivElement>();
-  const { extension } = useContext(ComponentContext);
-
-  const ref = useCallback((node) => {
-    setDomElement(node);
-  }, []);
-
-  useEffect(() => {
-    if (domElement != null && extension) {
-      return renderExtension(
-        domElement,
-        extension.extensionSlotName,
-        extension.extensionSlotModuleName,
-        extension.extensionId,
-        undefined,
-        state
-      );
-    }
-  }, [
-    extension?.extensionSlotName,
-    extension?.extensionId,
-    extension?.extensionSlotModuleName,
-    state,
-    domElement,
-  ]);
+  const [ref, extension] = useExtension<HTMLDivElement>(state);
 
   // The extension is rendered into the `<slot>`. It is surrounded by a
   // `<div>` with relative positioning in order to allow the UI Editor

package/src/ExtensionSlot.tsx

@@ -1,5 +1,5 @@
-import { ConnectedExtension } from "@openmrs/esm-extensions";
-import React, { useRef, useMemo, useContext } from "react";
+import React, { useRef, useMemo } from "react";
+import { ConnectedExtension } from "./useConnectedExtensions";
 import { ComponentContext } from "./ComponentContext";
 import { Extension } from "./Extension";
 import { useExtensionSlot } from "./useExtensionSlot";
@@ -72,7 +72,7 @@ export const ExtensionSlot: React.FC<ExtensionSlotProps> = ({
         <ComponentContext.Provider
           key={extension.id}
           value={{
-            moduleName: extensionSlotModuleName, // moduleName is not used by the receiving Extension
+            moduleName: extension.moduleName,
             extension: {
               extensionId: extension.id,
               extensionSlotName,

package/src/index.ts

@@ -5,14 +5,14 @@ export * from "./Extension";
 export * from "./ExtensionSlot";
 export * from "./getLifecycle";
 export * from "./openmrsComponentDecorator";
-export * from "./useAssignedExtensions";
 export * from "./useAssignedExtensionIds";
+export * from "./useAttachedExtensionIds";
 export * from "./useBodyScrollLock";
 export * from "./useConfig";
 export * from "./useConnectedExtensions";
 export * from "./useConnectivity";
 export * from "./useCurrentPatient";
-export * from "./useExtensionInternalStore";
+export * from "./useExtension";
 export * from "./useExtensionSlotConfig";
 export * from "./useExtensionSlot";
 export * from "./useExtensionSlotMeta";

package/src/useAssignedExtensionIds.ts

@@ -1,26 +1,29 @@
 import { useEffect, useState } from "react";
-import { getExtensionStore } from "@openmrs/esm-extensions";
-import { isEqual } from "lodash";
+import { getAssignedIds } from "@openmrs/esm-extensions";
+import { useExtensionSlotConfig } from "./useExtensionSlotConfig";
+import { useAttachedExtensionIds } from "./useAttachedExtensionIds";
 
 /**
  * Gets the assigned extension ids for a given extension slot name.
  * Does not consider if offline or online.
- * @param slotName The name of the slot to get the assigned IDs for.
- *
- * @deprecated Use `useAssignedExtensions`
+ * @param extensionSlotName The name of the slot to get the assigned IDs for.
  */
-export function useAssignedExtensionIds(slotName: string) {
-  const [ids, setIds] = useState<Array<string>>([]);
+export function useAssignedExtensionIds(extensionSlotName: string) {
+  const config = useExtensionSlotConfig(extensionSlotName);
+  const attachedIds = useAttachedExtensionIds(extensionSlotName);
+  const [assignedIds, setAssignedIds] = useState<Array<string>>([]);
 
   useEffect(() => {
-    return getExtensionStore().subscribe((state) => {
-      const newIds =
-        state.slots[slotName]?.assignedExtensions.map((e) => e.id) ?? [];
-      if (!isEqual(newIds, ids)) {
-        setIds(newIds);
-      }
-    });
-  }, []);
+    const newAssignedIds = getAssignedIds(
+      extensionSlotName,
+      config,
+      attachedIds
+    );
 
-  return ids;
+    if (newAssignedIds.join(",") !== assignedIds.join(",")) {
+      setAssignedIds(newAssignedIds);
+    }
+  }, [attachedIds, config]);
+
+  return assignedIds;
 }

package/src/useAttachedExtensionIds.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { extensionStore, ExtensionStore } from "@openmrs/esm-extensions";
+import { useStoreState } from "./useStoreState";
+
+const defaultArray: Array<string> = [];
+
+/**
+ * Gets the assigned extension ids for the given slot.
+ * @param extensionSlotName
+ */
+export function useAttachedExtensionIds(extensionSlotName: string) {
+  const select = useCallback(
+    (s: ExtensionStore) => s.slots[extensionSlotName]?.attachedIds,
+    [extensionSlotName]
+  );
+  const extensions = useStoreState(extensionStore, select);
+  return extensions || defaultArray;
+}

package/src/useConfig.ts

@@ -120,5 +120,8 @@ export function useConfig() {
     [normalConfig, extensionConfig]
   );
 
+  const configNameForDebugMessage = extension
+    ? `${extension?.extensionSlotModuleName}-${extension?.extensionSlotName}-${extension?.extensionId}`
+    : moduleName;
   return config;
 }

package/src/useConnectedExtensions.ts

@@ -1,25 +1,51 @@
 import { useMemo } from "react";
 import {
-  ConnectedExtension,
-  getConnectedExtensions,
+  checkStatusFor,
+  ExtensionMeta,
+  ExtensionRegistration,
+  extensionStore,
+  getExtensionRegistrationFrom,
 } from "@openmrs/esm-extensions";
+import { useAssignedExtensionIds } from "./useAssignedExtensionIds";
 import { useConnectivity } from "./useConnectivity";
-import { useAssignedExtensions } from "./useAssignedExtensions";
+
+function isValidExtension(
+  extension: ConnectedExtension | { id: string }
+): extension is ConnectedExtension {
+  return extension.hasOwnProperty("name");
+}
+
+/**
+ * We have the following extension modes:
+ *
+ * - attached (set via code in form of: attach, detach, ...)
+ * - configured (set via configuration in form of: added, removed, ...)
+ * - assigned (computed from attached and configured)
+ * - connected (computed from assigned using connectivity and online / offline)
+ */
+
+export interface ConnectedExtension extends ExtensionRegistration {
+  id: string;
+}
 
 /**
  * Gets the assigned extension for a given extension slot name.
  * Considers if offline or online.
- * @param slotName The name of the slot to get the assigned extensions for.
+ * @param extensionSlotName The name of the slot to get the assigned extensions for.
  */
 export function useConnectedExtensions(
-  slotName: string
+  extensionSlotName: string
 ): Array<ConnectedExtension> {
   const online = useConnectivity();
-  const assignedExtensions = useAssignedExtensions(slotName);
+  const extensionIdsToRender = useAssignedExtensionIds(extensionSlotName);
 
-  const connectedExtensions = useMemo(() => {
-    return getConnectedExtensions(assignedExtensions, online);
-  }, [assignedExtensions, online]);
+  const extensions = useMemo(() => {
+    const state = extensionStore.getState();
+    return extensionIdsToRender
+      .map((id) => ({ id, ...getExtensionRegistrationFrom(state, id) }))
+      .filter(isValidExtension)
+      .filter((m) => checkStatusFor(online, m.online, m.offline));
+  }, [extensionIdsToRender, online]);
 
-  return connectedExtensions;
+  return extensions;
 }

package/src/useExtension.ts

@@ -0,0 +1,31 @@
+import { RefObject, useContext, useRef, useEffect } from "react";
+import { renderExtension } from "@openmrs/esm-extensions";
+import { ComponentContext, ExtensionData } from "./ComponentContext";
+
+export function useExtension<TRef extends HTMLElement>(
+  state?: Record<string, any>
+): [RefObject<TRef>, ExtensionData | undefined] {
+  const ref = useRef<TRef>(null);
+  const { extension } = useContext(ComponentContext);
+
+  useEffect(() => {
+    if (ref.current && extension) {
+      return renderExtension(
+        ref.current,
+        extension.extensionSlotName,
+        extension.extensionSlotModuleName,
+        extension.extensionId,
+        undefined,
+        state
+      );
+    }
+  }, [
+    extension?.extensionSlotName,
+    extension?.extensionId,
+    extension?.extensionSlotModuleName,
+    ref.current,
+    state,
+  ]);
+
+  return [ref, extension];
+}

package/src/useExtensionSlot.ts

@@ -1,10 +1,12 @@
 import { useContext, useEffect } from "react";
-import { registerExtensionSlot } from "@openmrs/esm-extensions";
+import {
+  registerExtensionSlot,
+  unregisterExtensionSlot,
+} from "@openmrs/esm-extensions";
 import { ComponentContext } from "./ComponentContext";
 import { useConnectedExtensions } from "./useConnectedExtensions";
 
-/** @internal */
-export function useExtensionSlot(slotName: string) {
+export function useExtensionSlot(extensionSlotName: string) {
   const { moduleName } = useContext(ComponentContext);
 
   if (!moduleName) {
@@ -14,14 +16,15 @@ export function useExtensionSlot(slotName: string) {
   }
 
   useEffect(() => {
-    registerExtensionSlot(moduleName, slotName);
+    registerExtensionSlot(moduleName, extensionSlotName);
+    return () => unregisterExtensionSlot(moduleName, extensionSlotName);
   }, []);
 
-  const extensions = useConnectedExtensions(slotName);
+  const extensions = useConnectedExtensions(extensionSlotName);
 
   return {
     extensions,
-    extensionSlotName: slotName,
+    extensionSlotName,
     extensionSlotModuleName: moduleName,
   };
 }

package/src/useExtensionSlotConfig.ts

@@ -1,9 +1,10 @@
-import { useCallback } from "react";
+import { useContext, useCallback } from "react";
 import {
   ExtensionSlotConfigObject,
-  ExtensionSlotConfigStore,
-  getExtensionSlotConfigStore,
+  ExtensionSlotConfigsStore,
+  getExtensionSlotsConfigStore,
 } from "@openmrs/esm-config";
+import { ComponentContext } from "./ComponentContext";
 import { useStoreState } from "./useStoreState";
 
 const defaultConfig: ExtensionSlotConfigObject = {
@@ -12,12 +13,12 @@ const defaultConfig: ExtensionSlotConfigObject = {
   remove: [],
 };
 
-/** @internal */
-export function useExtensionSlotConfig(slotName: string) {
-  const store = getExtensionSlotConfigStore(slotName);
+export function useExtensionSlotConfig(extensionSlotName: string) {
+  const { moduleName } = useContext(ComponentContext);
+  const store = getExtensionSlotsConfigStore(moduleName);
   const select = useCallback(
-    (s: ExtensionSlotConfigStore) => s.config,
-    [slotName]
+    (s: ExtensionSlotConfigsStore) => s.extensionSlotConfigs[extensionSlotName],
+    [extensionSlotName]
   );
   const config = useStoreState(store, select);
   return config || defaultConfig;

package/src/useExtensionStore.ts

@@ -1,13 +1,4 @@
-import {
-  ExtensionInternalStore,
-  getExtensionInternalStore,
-} from "@openmrs/esm-extensions";
+import { ExtensionStore, extensionStore } from "@openmrs/esm-extensions";
 import { createUseStore } from "./createUseStore";
 
-/**
- * The implementation of this will soon undergo a breaking change.
- * This will return an `ExtensionStore` rather than `ExtensionInternalStore`.
- */
-export const useExtensionStore = createUseStore<ExtensionInternalStore>(
-  getExtensionInternalStore()
-);
+export const useExtensionStore = createUseStore<ExtensionStore>(extensionStore);

package/dist/openmrs-esm-react-utils.js.LICENSE.txt

@@ -1,8 +0,0 @@
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */

package/src/useAssignedExtensions.ts

@@ -1,23 +0,0 @@
-import { useEffect, useState } from "react";
-import { AssignedExtension, getExtensionStore } from "@openmrs/esm-extensions";
-import { isEqual } from "lodash";
-
-/**
- * Gets the assigned extensions for a given extension slot name.
- * Does not consider if offline or online.
- * @param slotName The name of the slot to get the assigned extensions for.
- */
-export function useAssignedExtensions(slotName: string) {
-  const [extensions, setExtensions] = useState<Array<AssignedExtension>>([]);
-
-  useEffect(() => {
-    return getExtensionStore().subscribe((state) => {
-      const newExtensions = state.slots[slotName]?.assignedExtensions ?? [];
-      if (!isEqual(newExtensions, extensions)) {
-        setExtensions(newExtensions);
-      }
-    });
-  }, []);
-
-  return extensions;
-}

package/src/useExtensionInternalStore.ts

@@ -1,10 +0,0 @@
-import {
-  ExtensionInternalStore,
-  getExtensionInternalStore,
-} from "@openmrs/esm-extensions";
-import { createUseStore } from "./createUseStore";
-
-/** @internal */
-export const useExtensionInternalStore = createUseStore<ExtensionInternalStore>(
-  getExtensionInternalStore()
-);