@openmrs/esm-react-utils 3.2.1-pre.967 → 3.2.1-pre.970

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "3.2.1-pre.967",
+  "version": "3.2.1-pre.970",
   "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.2.1-pre.967",
-    "@openmrs/esm-config": "^3.2.1-pre.967",
-    "@openmrs/esm-error-handling": "^3.2.1-pre.967",
-    "@openmrs/esm-extensions": "^3.2.1-pre.967",
-    "@openmrs/esm-globals": "^3.2.1-pre.967",
+    "@openmrs/esm-api": "^3.2.1-pre.970",
+    "@openmrs/esm-config": "^3.2.1-pre.970",
+    "@openmrs/esm-error-handling": "^3.2.1-pre.970",
+    "@openmrs/esm-extensions": "^3.2.1-pre.970",
+    "@openmrs/esm-globals": "^3.2.1-pre.970",
     "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": "5433fe8ad70b47ae8c9c6976d2f5bbf33e39d5ad"
+  "gitHead": "57dc1a5a7b655a60a431d88cd7991f2b9ab23ed9"
 }

package/src/Extension.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import { renderExtension } from "@openmrs/esm-extensions";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { ComponentContext } from ".";
 import { ExtensionData } from "./ComponentContext";
-import { useExtension } from "./useExtension";
 
 export interface ExtensionProps {
   state?: Record<string, any>;
@@ -20,7 +21,31 @@ export interface ExtensionProps {
  * and *must* only be used once within that `<ExtensionSlot>`.
  */
 export const Extension: React.FC<ExtensionProps> = ({ state, wrap }) => {
-  const [ref, extension] = useExtension<HTMLDivElement>(state);
+  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,
+  ]);
 
   // 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 React, { useRef, useMemo } from "react";
-import { ConnectedExtension } from "./useConnectedExtensions";
+import { ConnectedExtension } from "@openmrs/esm-extensions";
 import { ComponentContext } from "./ComponentContext";
 import { Extension } from "./Extension";
 import { useExtensionSlot } from "./useExtensionSlot";
@@ -76,7 +76,7 @@ export const ExtensionSlot: React.FC<ExtensionSlotProps> = ({
         <ComponentContext.Provider
           key={extension.id}
           value={{
-            moduleName: extension.moduleName,
+            moduleName: extensionSlotModuleName, // moduleName is not used by the receiving Extension
             extension: {
               extensionId: extension.id,
               extensionSlotName,

package/src/index.ts

@@ -5,15 +5,15 @@ 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 "./usePatient";
 export * from "./useCurrentPatient";
-export * from "./useExtension";
+export * from "./useExtensionInternalStore";
 export * from "./useExtensionSlotConfig";
 export * from "./useExtensionSlot";
 export * from "./useExtensionSlotMeta";

package/src/useAssignedExtensionIds.ts

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

package/src/useAssignedExtensions.ts

@@ -0,0 +1,23 @@
+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/useConfig.ts

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

package/src/useConnectedExtensions.ts

@@ -1,51 +1,25 @@
 import { useMemo } from "react";
 import {
-  checkStatusFor,
-  ExtensionMeta,
-  ExtensionRegistration,
-  extensionStore,
-  getExtensionRegistrationFrom,
+  ConnectedExtension,
+  getConnectedExtensions,
 } from "@openmrs/esm-extensions";
-import { useAssignedExtensionIds } from "./useAssignedExtensionIds";
 import { useConnectivity } from "./useConnectivity";
-
-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;
-}
+import { useAssignedExtensions } from "./useAssignedExtensions";
 
 /**
  * Gets the assigned extension for a given extension slot name.
  * Considers if offline or online.
- * @param extensionSlotName The name of the slot to get the assigned extensions for.
+ * @param slotName The name of the slot to get the assigned extensions for.
  */
 export function useConnectedExtensions(
-  extensionSlotName: string
+  slotName: string
 ): Array<ConnectedExtension> {
   const online = useConnectivity();
-  const extensionIdsToRender = useAssignedExtensionIds(extensionSlotName);
+  const assignedExtensions = useAssignedExtensions(slotName);
 
-  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]);
+  const connectedExtensions = useMemo(() => {
+    return getConnectedExtensions(assignedExtensions, online);
+  }, [assignedExtensions, online]);
 
-  return extensions;
+  return connectedExtensions;
 }

package/src/useExtensionInternalStore.ts

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

package/src/useExtensionSlot.ts

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

package/src/useExtensionSlotConfig.ts

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

package/src/useExtensionStore.ts

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

package/src/useAttachedExtensionIds.ts

@@ -1,18 +0,0 @@
-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/useExtension.ts

@@ -1,31 +0,0 @@
-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];
-}