From 889a7f1603d2ff54ebc1bf6a4ba318be8f0a3610 Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Mon, 14 Mar 2022 10:23:26 -0700
Subject: [PATCH 1/3] App not hot updating with slot config changes

---
 .../configuration/configuration.component.tsx |  9 ++-
 .../src/ui-editor/ui-editor.tsx               | 13 +++-
 .../src/module-config/module-config.test.ts   |  8 +-
 .../src/module-config/module-config.ts        | 18 +++--
 .../esm-config/src/module-config/state.ts     | 39 ++++++----
 .../__mocks__/openmrs-esm-config.mock.tsx     |  2 +-
 .../esm-extensions/src/extensions.ts          | 56 +++++++++++---
 packages/framework/esm-framework/docs/API.md  | 16 ++--
 packages/framework/esm-framework/mock.tsx     | 12 ++-
 .../extension-config.test.tsx                 | 76 ++++++++++++++++++-
 .../esm-react-utils/src/createUseStore.ts     |  1 +
 .../framework/esm-react-utils/src/index.ts    |  2 -
 .../src/useAssignedExtensions.ts              |  2 +-
 .../src/useExtensionInternalStore.ts          |  4 +-
 .../src/useExtensionSlotConfig.ts             | 24 ------
 .../framework/esm-react-utils/src/useStore.ts | 57 ++++++++++++--
 .../esm-react-utils/src/useStoreState.ts      | 11 ---
 17 files changed, 256 insertions(+), 94 deletions(-)
 delete mode 100644 packages/framework/esm-react-utils/src/useExtensionSlotConfig.ts
 delete mode 100644 packages/framework/esm-react-utils/src/useStoreState.ts

diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx
index 319007b53..36f6e4e89 100644
--- a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx
@@ -7,10 +7,11 @@ import {
   Config,
   ConfigInternalStore,
   configInternalStore,
+  getExtensionInternalStore,
   implementerToolsConfigStore,
   temporaryConfigStore,
-  useExtensionInternalStore,
   useStore,
+  useStoreWithActions,
 } from "@openmrs/esm-framework";
 import {
   Button,
@@ -89,13 +90,13 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
     toggleIsJsonModeEnabled,
     isConfigToolbarOpen,
     toggleIsToolbarOpen,
-  } = useStore(implementerToolsStore, actions);
-  const { devDefaultsAreOn, toggleDevDefaults } = useStore(
+  } = useStoreWithActions(implementerToolsStore, actions);
+  const { devDefaultsAreOn, toggleDevDefaults } = useStoreWithActions(
     configInternalStore,
     configActions
   );
   const { config } = useStore(implementerToolsConfigStore);
-  const extensionStore = useExtensionInternalStore();
+  const extensionStore = useStore(getExtensionInternalStore());
   const tempConfigStore = useStore(temporaryConfigStore);
   const [filterText, setFilterText] = useState("");
   const tempConfig = tempConfigStore.config;
diff --git a/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx b/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx
index 516101cd4..50cabac89 100644
--- a/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx
@@ -1,14 +1,18 @@
 import React from "react";
 import styles from "./styles.css";
 import Close16 from "@carbon/icons-react/es/close/16";
-import { useExtensionInternalStore, useStore } from "@openmrs/esm-framework";
+import {
+  getExtensionInternalStore,
+  useStore,
+  useStoreWithActions,
+} from "@openmrs/esm-framework";
 import { Button } from "carbon-components-react";
 import { Portal } from "./portal";
 import { ExtensionOverlay } from "./extension-overlay.component";
 import { ImplementerToolsStore, implementerToolsStore } from "../store";
 
 export default function UiEditor() {
-  const { slots, extensions } = useExtensionInternalStore();
+  const { slots, extensions } = useStore(getExtensionInternalStore());
   const { isOpen: implementerToolsIsOpen } = useStore(implementerToolsStore);
 
   return (
@@ -66,7 +70,10 @@ const actions = {
 };
 
 export function ExitButton() {
-  const { toggleIsUIEditorEnabled } = useStore(implementerToolsStore, actions);
+  const { toggleIsUIEditorEnabled } = useStoreWithActions(
+    implementerToolsStore,
+    actions
+  );
   return (
     <Button
       className={styles.exitButton}
diff --git a/packages/framework/esm-config/src/module-config/module-config.test.ts b/packages/framework/esm-config/src/module-config/module-config.test.ts
index dc3691ee0..505002d41 100644
--- a/packages/framework/esm-config/src/module-config/module-config.test.ts
+++ b/packages/framework/esm-config/src/module-config/module-config.test.ts
@@ -17,7 +17,7 @@ import {
   temporaryConfigStore,
 } from "./state";
 import { Type } from "../types";
-import { getExtensionSlotConfigStore } from "..";
+import { getExtensionSlotsConfigStore } from "..";
 
 const mockConfigInternalStore =
   configInternalStore as MockedStore<ConfigInternalStore>;
@@ -854,7 +854,8 @@ describe("extension slot config", () => {
         },
       },
     });
-    const { config } = getExtensionSlotConfigStore("fooSlot").getState();
+    const { config } =
+      getExtensionSlotsConfigStore().getState().slots["fooSlot"];
     expect(config).toStrictEqual({
       add: ["bar", "baz"],
       remove: ["zap"],
@@ -892,7 +893,8 @@ describe("extension slot config", () => {
       },
     });
     await Config.getConfig("foo-module");
-    const { config } = getExtensionSlotConfigStore("fooSlot").getState();
+    const { config } =
+      getExtensionSlotsConfigStore().getState().slots["fooSlot"];
     expect(config).toStrictEqual({ remove: ["bar"] });
   });
 
diff --git a/packages/framework/esm-config/src/module-config/module-config.ts b/packages/framework/esm-config/src/module-config/module-config.ts
index b3dafe6d9..6af9a4f31 100644
--- a/packages/framework/esm-config/src/module-config/module-config.ts
+++ b/packages/framework/esm-config/src/module-config/module-config.ts
@@ -1,4 +1,4 @@
-import { clone, reduce, mergeDeepRight } from "ramda";
+import { clone, reduce, mergeDeepRight, equals } from "ramda";
 import {
   Config,
   ConfigObject,
@@ -23,9 +23,9 @@ import {
   configExtensionStore,
   getConfigStore,
   getExtensionConfigStore,
-  getExtensionSlotConfigStore,
   implementerToolsConfigStore,
   temporaryConfigStore,
+  getExtensionSlotsConfigStore,
 } from "./state";
 import type {} from "@openmrs/esm-globals";
 import { TemporaryConfigStore } from "..";
@@ -125,9 +125,17 @@ function computeExtensionSlotConfigs(
   tempState: TemporaryConfigStore
 ) {
   const slotConfigs = getExtensionSlotConfigs(state, tempState);
-  for (let [slotName, config] of Object.entries(slotConfigs)) {
-    const slotStore = getExtensionSlotConfigStore(slotName);
-    slotStore.setState({ loaded: true, config });
+  const newSlotStoreEntries = Object.fromEntries(
+    Object.entries(slotConfigs).map(([slotName, config]) => [
+      slotName,
+      { loaded: true, config },
+    ])
+  );
+  const slotStore = getExtensionSlotsConfigStore();
+  const oldState = slotStore.getState();
+  const newState = { slots: { ...oldState.slots, ...newSlotStoreEntries } };
+  if (!equals(oldState, newState)) {
+    slotStore.setState(newState);
   }
 }
 
diff --git a/packages/framework/esm-config/src/module-config/state.ts b/packages/framework/esm-config/src/module-config/state.ts
index 1df5805a4..e1fbe9352 100644
--- a/packages/framework/esm-config/src/module-config/state.ts
+++ b/packages/framework/esm-config/src/module-config/state.ts
@@ -141,29 +141,42 @@ export function getConfigStore(moduleName: string) {
 }
 
 /**
- * Configuration for a specific extension slot
+ * Configuration for all the specific extension slots
  * @internal
  */
-export interface ExtensionSlotConfigStore {
-  config: ExtensionSlotConfigObject;
-  loaded: boolean;
+export interface ExtensionSlotsConfigStore {
+  slots: {
+    [slotName: string]: {
+      config: ExtensionSlotConfigObject;
+      loaded: boolean;
+    };
+  };
 }
 
-function initializeExtensionSlotConfigStore() {
-  return {
-    config: {},
-    loaded: false,
-  };
+/** @internal */
+export function getExtensionSlotsConfigStore() {
+  return getGlobalStore<ExtensionSlotsConfigStore>(`config-extension-slots`, {
+    slots: {},
+  });
 }
 
 /** @internal */
-export function getExtensionSlotConfigStore(slotName: string) {
-  return getGlobalStore<ExtensionSlotConfigStore>(
-    `config-extension-slots-${slotName}`,
-    initializeExtensionSlotConfigStore()
+export function getExtensionSlotConfig(slotName: string) {
+  return getExtensionSlotConfigFromStore(
+    getExtensionSlotsConfigStore().getState(),
+    slotName
   );
 }
 
+/** @internal */
+export function getExtensionSlotConfigFromStore(
+  state: ExtensionSlotsConfigStore,
+  slotName: string
+) {
+  const slotConfig = state.slots[slotName];
+  return slotConfig ?? { loaded: false, config: {} };
+}
+
 /**
  * A store for each mounted extension's config
  * @internal
diff --git a/packages/framework/esm-extensions/__mocks__/openmrs-esm-config.mock.tsx b/packages/framework/esm-extensions/__mocks__/openmrs-esm-config.mock.tsx
index 571086ef2..4e231d620 100644
--- a/packages/framework/esm-extensions/__mocks__/openmrs-esm-config.mock.tsx
+++ b/packages/framework/esm-extensions/__mocks__/openmrs-esm-config.mock.tsx
@@ -1 +1 @@
-export const getExtensionSlotConfig = jest.fn().mockResolvedValue({});
+export const getExtensionSlotConfigs = jest.fn().mockResolvedValue({});
diff --git a/packages/framework/esm-extensions/src/extensions.ts b/packages/framework/esm-extensions/src/extensions.ts
index 1ffbcd5b4..fea463bb4 100644
--- a/packages/framework/esm-extensions/src/extensions.ts
+++ b/packages/framework/esm-extensions/src/extensions.ts
@@ -9,8 +9,12 @@
 
 import {
   ExtensionSlotConfigObject,
-  getExtensionSlotConfigStore,
+  ExtensionSlotsConfigStore,
+  getExtensionSlotConfig,
+  getExtensionSlotConfigFromStore,
+  getExtensionSlotsConfigStore,
 } from "@openmrs/esm-config";
+import isEqual from "lodash-es/isEqual";
 import {
   getExtensionInternalStore,
   ExtensionSlotState,
@@ -30,16 +34,40 @@ const extensionInternalStore = getExtensionInternalStore();
 const extensionStore = getExtensionStore();
 
 // Keep the output store updated
-extensionInternalStore.subscribe((internalStore) => {
+function updateExtensionOutputStore(
+  internalState: ExtensionInternalStore,
+  extensionSlotConfigs: ExtensionSlotsConfigStore
+) {
   const slots: Record<string, ExtensionSlotState> = {};
-  for (let [slotName, slot] of Object.entries(internalStore.slots)) {
+  for (let [slotName, slot] of Object.entries(internalState.slots)) {
+    // Only include registered slots
     if (slot.moduleName) {
-      // Only include registered slots
-      const assignedExtensions = getAssignedExtensions(slotName);
+      const { config } = getExtensionSlotConfigFromStore(
+        extensionSlotConfigs,
+        slot.name
+      );
+      const assignedExtensions = getAssignedExtensionsFromData(
+        slotName,
+        internalState,
+        config
+      );
       slots[slotName] = { moduleName: slot.moduleName, assignedExtensions };
     }
   }
-  extensionStore.setState({ slots: slots });
+  if (!isEqual(extensionStore.getState().slots, slots)) {
+    extensionStore.setState({ slots });
+  }
+}
+
+extensionInternalStore.subscribe((internalStore) => {
+  updateExtensionOutputStore(
+    internalStore,
+    getExtensionSlotsConfigStore().getState()
+  );
+});
+
+getExtensionSlotsConfigStore().subscribe((slotConfigs) => {
+  updateExtensionOutputStore(extensionInternalStore.getState(), slotConfigs);
 });
 
 function createNewExtensionSlotInfo(
@@ -246,11 +274,11 @@ export function getConnectedExtensions(
   );
 }
 
-export function getAssignedExtensions(
-  slotName: string
+function getAssignedExtensionsFromData(
+  slotName: string,
+  internalState: ExtensionInternalStore,
+  config: ExtensionSlotConfigObject
 ): Array<AssignedExtension> {
-  const internalState = extensionInternalStore.getState();
-  const config = getExtensionSlotConfigStore(slotName).getState().config;
   const attachedIds = internalState.slots[slotName].attachedIds;
   const assignedIds = calculateAssignedIds(config, attachedIds);
   const extensions: Array<AssignedExtension> = [];
@@ -269,6 +297,14 @@ export function getAssignedExtensions(
   return extensions;
 }
 
+export function getAssignedExtensions(
+  slotName: string
+): Array<AssignedExtension> {
+  const internalState = extensionInternalStore.getState();
+  const { config } = getExtensionSlotConfig(slotName);
+  return getAssignedExtensionsFromData(slotName, internalState, config);
+}
+
 function calculateAssignedIds(
   config: ExtensionSlotConfigObject,
   attachedIds: Array<string>
diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
index 812b635c9..e4c050da9 100644
--- a/packages/framework/esm-framework/docs/API.md
+++ b/packages/framework/esm-framework/docs/API.md
@@ -1801,7 +1801,7 @@ writing a module for a specific implementation.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:126](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L126)
+[packages/framework/esm-extensions/src/extensions.ts:131](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L131)
 
 ___
 
@@ -2093,7 +2093,7 @@ Avoid using this. Extension attachments should be considered declarative.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:157](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L157)
+[packages/framework/esm-extensions/src/extensions.ts:162](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L162)
 
 ___
 
@@ -2115,7 +2115,7 @@ Avoid using this. Extension attachments should be considered declarative.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:181](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L181)
+[packages/framework/esm-extensions/src/extensions.ts:186](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L186)
 
 ___
 
@@ -2247,7 +2247,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:249](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L249)
+[packages/framework/esm-extensions/src/extensions.ts:277](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L277)
 
 ___
 
@@ -2371,7 +2371,7 @@ A list of extensions that should be rendered
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:239](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L239)
+[packages/framework/esm-extensions/src/extensions.ts:244](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L244)
 
 ___
 
@@ -2438,7 +2438,7 @@ getExtensionNameFromId("baz")
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:70](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L70)
+[packages/framework/esm-extensions/src/extensions.ts:75](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L75)
 
 ___
 
@@ -2458,7 +2458,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:83](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L83)
+[packages/framework/esm-extensions/src/extensions.ts:88](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L88)
 
 ___
 
@@ -2479,7 +2479,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:75](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L75)
+[packages/framework/esm-extensions/src/extensions.ts:80](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L80)
 
 ___
 
diff --git a/packages/framework/esm-framework/mock.tsx b/packages/framework/esm-framework/mock.tsx
index 7dd999a04..3c1f5634a 100644
--- a/packages/framework/esm-framework/mock.tsx
+++ b/packages/framework/esm-framework/mock.tsx
@@ -258,7 +258,17 @@ export const useExtensionInternalStore = createUseStore(
 
 export const useExtensionStore = createUseStore(getExtensionStore());
 
-export const useStore = (store: Store<any>, actions) => {
+const defaultSelect = (x) => x;
+export const useStore = (
+  store: Store<any>,
+  select = defaultSelect,
+  actions = {}
+) => {
+  const state = select(store.getState());
+  return { ...state, ...actions };
+};
+
+export const useStoreWithActions = (store: Store<any>, actions) => {
   const state = store.getState();
   return { ...state, ...actions };
 };
diff --git a/packages/framework/esm-framework/src/integration-tests/extension-config.test.tsx b/packages/framework/esm-framework/src/integration-tests/extension-config.test.tsx
index e860261ca..0f5e94d38 100644
--- a/packages/framework/esm-framework/src/integration-tests/extension-config.test.tsx
+++ b/packages/framework/esm-framework/src/integration-tests/extension-config.test.tsx
@@ -3,6 +3,7 @@ import {
   attach,
   registerExtension,
   updateInternalExtensionStore,
+  getExtensionStore,
 } from "../../../esm-extensions";
 import {
   ExtensionSlot,
@@ -10,11 +11,22 @@ import {
   openmrsComponentDecorator,
   useConfig,
 } from "../../../esm-react-utils/src";
-import { defineConfigSchema, provide, Type } from "../../../esm-config/src";
-import { render, screen, waitFor } from "@testing-library/react";
+import {
+  defineConfigSchema,
+  provide,
+  Type,
+  temporaryConfigStore,
+  configInternalStore,
+  getExtensionSlotsConfigStore,
+} from "../../../esm-config/src";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { waitForElementToBeRemoved } from "@testing-library/dom";
 
 describe("Interaction between configuration and extension systems", () => {
   beforeEach(() => {
+    temporaryConfigStore.setState({ config: {} });
+    configInternalStore.setState({ providedConfigs: [], schemas: {} });
+    getExtensionSlotsConfigStore().setState({ slots: {} });
     updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
   });
 
@@ -138,6 +150,66 @@ describe("Interaction between configuration and extension systems", () => {
     expect(slot.firstChild).toHaveTextContent(/Dino/);
     expect(slot.lastChild).toHaveTextContent(/Baby Puss/);
   });
+
+  test("Slot config should update with temporary config", async () => {
+    registerSimpleExtension("Pearl", "esm-slaghoople");
+    attach("A slot", "Pearl");
+    defineConfigSchema("esm-slaghoople", {});
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-slaghoople",
+      featureName: "The Slaghooples",
+      disableTranslations: true,
+    })(() => <ExtensionSlot data-testid="slot" extensionSlotName="A slot" />);
+    render(<App />);
+    await waitFor(() => expect(screen.getByText("Pearl")).toBeInTheDocument());
+    act(() => {
+      temporaryConfigStore.setState({
+        config: {
+          "esm-slaghoople": {
+            extensionSlots: {
+              "A slot": {
+                remove: ["Pearl"],
+              },
+            },
+          },
+        },
+      });
+    });
+    expect(screen.queryByText("Pearl")).not.toBeInTheDocument();
+  });
+
+  test("Extension config should update with temporary config", async () => {
+    registerSimpleExtension("Mr. Slate", "esm-flintstone", true);
+    attach("A slot", "Mr. Slate");
+    defineConfigSchema("esm-flintstone", { tie: { _default: "green" } });
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-quarry",
+      featureName: "The Flintstones",
+      disableTranslations: true,
+    })(() => <ExtensionSlot data-testid="slot" extensionSlotName="A slot" />);
+    render(<App />);
+    await waitFor(() =>
+      expect(screen.getByText(/Mr. Slate/)).toBeInTheDocument()
+    );
+    expect(screen.getByTestId("slot")).toHaveTextContent(/green/);
+    act(() => {
+      temporaryConfigStore.setState({
+        config: {
+          "esm-quarry": {
+            extensionSlots: {
+              "A slot": {
+                configure: {
+                  "Mr. Slate": { tie: "black" },
+                },
+              },
+            },
+          },
+        },
+      });
+    });
+    expect(screen.queryByText("green")).not.toBeInTheDocument();
+    expect(screen.getByTestId("slot")).toHaveTextContent(/black/);
+  });
 });
 
 function registerSimpleExtension(
diff --git a/packages/framework/esm-react-utils/src/createUseStore.ts b/packages/framework/esm-react-utils/src/createUseStore.ts
index 9d1557f74..ee3eba8df 100644
--- a/packages/framework/esm-react-utils/src/createUseStore.ts
+++ b/packages/framework/esm-react-utils/src/createUseStore.ts
@@ -18,6 +18,7 @@ function bindActions<T>(store: Store<T>, actions: Actions) {
   return bound;
 }
 
+/** Avoid this; generally prefer to have clients use `useStore(yourStore)` */
 export function createUseStore<T>(store: Store<T>) {
   function useStore(): T;
   function useStore(actions: Actions): T & BoundActions;
diff --git a/packages/framework/esm-react-utils/src/index.ts b/packages/framework/esm-react-utils/src/index.ts
index 9600af61e..996d76d75 100644
--- a/packages/framework/esm-react-utils/src/index.ts
+++ b/packages/framework/esm-react-utils/src/index.ts
@@ -14,7 +14,6 @@ export * from "./useConnectivity";
 export * from "./usePatient";
 export * from "./useCurrentPatient";
 export * from "./useExtensionInternalStore";
-export * from "./useExtensionSlotConfig";
 export * from "./useExtensionSlot";
 export * from "./useExtensionSlotMeta";
 export * from "./useExtensionStore";
@@ -26,7 +25,6 @@ export * from "./useOnClickOutside";
 export * from "./UserHasAccess";
 export * from "./useSessionUser";
 export * from "./useStore";
-export * from "./useStoreState";
 export * from "./useVisit";
 export * from "./useVisitTypes";
 export * from "./usePagination";
diff --git a/packages/framework/esm-react-utils/src/useAssignedExtensions.ts b/packages/framework/esm-react-utils/src/useAssignedExtensions.ts
index 25ec33f8a..431cdbafb 100644
--- a/packages/framework/esm-react-utils/src/useAssignedExtensions.ts
+++ b/packages/framework/esm-react-utils/src/useAssignedExtensions.ts
@@ -23,7 +23,7 @@ export function useAssignedExtensions(slotName: string) {
     }
     update(getExtensionStore().getState());
     return getExtensionStore().subscribe(update);
-  }, [slotName]);
+  }, [slotName, extensions]);
 
   return extensions;
 }
diff --git a/packages/framework/esm-react-utils/src/useExtensionInternalStore.ts b/packages/framework/esm-react-utils/src/useExtensionInternalStore.ts
index fbc1a0d3c..c71d479cf 100644
--- a/packages/framework/esm-react-utils/src/useExtensionInternalStore.ts
+++ b/packages/framework/esm-react-utils/src/useExtensionInternalStore.ts
@@ -4,7 +4,9 @@ import {
 } from "@openmrs/esm-extensions";
 import { createUseStore } from "./createUseStore";
 
-/** @internal */
+/** @internal
+ * @deprecated Use `useStore(getExtensionInternalStore())`
+ */
 export const useExtensionInternalStore = createUseStore<ExtensionInternalStore>(
   getExtensionInternalStore()
 );
diff --git a/packages/framework/esm-react-utils/src/useExtensionSlotConfig.ts b/packages/framework/esm-react-utils/src/useExtensionSlotConfig.ts
deleted file mode 100644
index deec7154a..000000000
--- a/packages/framework/esm-react-utils/src/useExtensionSlotConfig.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useCallback } from "react";
-import {
-  ExtensionSlotConfigObject,
-  ExtensionSlotConfigStore,
-  getExtensionSlotConfigStore,
-} from "@openmrs/esm-config";
-import { useStoreState } from "./useStoreState";
-
-const defaultConfig: ExtensionSlotConfigObject = {
-  add: [],
-  order: [],
-  remove: [],
-};
-
-/** @internal */
-export function useExtensionSlotConfig(slotName: string) {
-  const store = getExtensionSlotConfigStore(slotName);
-  const select = useCallback(
-    (s: ExtensionSlotConfigStore) => s.config,
-    [slotName]
-  );
-  const config = useStoreState(store, select);
-  return config || defaultConfig;
-}
diff --git a/packages/framework/esm-react-utils/src/useStore.ts b/packages/framework/esm-react-utils/src/useStore.ts
index d5991a194..8253fad13 100644
--- a/packages/framework/esm-react-utils/src/useStore.ts
+++ b/packages/framework/esm-react-utils/src/useStore.ts
@@ -1,11 +1,58 @@
+import { subscribeTo } from "@openmrs/esm-state";
+import { useEffect, useMemo, useState } from "react";
 import { Store } from "unistore";
-import { Actions, BoundActions, createUseStore } from "./createUseStore";
+import { Actions, BoundActions } from "./createUseStore";
 
-export function useStore<T>(store: Store<T>): T;
-export function useStore<T>(
+function bindActions<T>(store: Store<T>, actions: Actions) {
+  if (typeof actions == "function") {
+    actions = actions(store);
+  }
+
+  const bound = {};
+
+  for (let i in actions) {
+    bound[i] = store.action(actions[i]);
+  }
+
+  return bound;
+}
+
+const defaultSelectFunction = (x) => x;
+
+function useStore<T, U>(store: Store<T>): T;
+function useStore<T, U>(store: Store<T>, select: (state: T) => U): U;
+function useStore<T, U>(
   store: Store<T>,
+  select: undefined,
   actions: Actions
 ): T & BoundActions;
-export function useStore<T>(store: Store<T>, actions?: Actions) {
-  return createUseStore<T>(store)(actions);
+function useStore<T, U>(
+  store: Store<T>,
+  select: (state: T) => U,
+  actions: Actions
+): U & BoundActions;
+function useStore<T, U>(
+  store: Store<T>,
+  select: (state: T) => U = defaultSelectFunction,
+  actions?: Actions
+) {
+  const [state, setState] = useState<U>(() => select(store.getState()));
+  useEffect(() => subscribeTo(store, select, setState), [store, select]);
+
+  let boundActions: BoundActions = {};
+
+  if (actions) {
+    boundActions = useMemo(() => bindActions(store, actions), [store, actions]);
+  }
+
+  return { ...state, ...boundActions };
+}
+
+function useStoreWithActions<T>(
+  store: Store<T>,
+  actions: Actions
+): T & BoundActions {
+  return useStore(store, defaultSelectFunction, actions);
 }
+
+export { useStore, useStoreWithActions };
diff --git a/packages/framework/esm-react-utils/src/useStoreState.ts b/packages/framework/esm-react-utils/src/useStoreState.ts
deleted file mode 100644
index eedcd5553..000000000
--- a/packages/framework/esm-react-utils/src/useStoreState.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { subscribeTo } from "@openmrs/esm-state";
-import { useEffect, useState } from "react";
-import { Store } from "unistore";
-
-export function useStoreState<T, U>(store: Store<T>, select: (state: T) => U) {
-  const [state, setState] = useState<U>(() => select(store.getState()));
-
-  useEffect(() => subscribeTo(store, select, setState), [store, select]);
-
-  return state;
-}

From 20a1e36531e550f716daeaba030029a6aae9164a Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Mon, 14 Mar 2022 10:30:32 -0700
Subject: [PATCH 2/3] Fix husky

---
 .husky/pre-commit | 4 ++--
 .husky/pre-push   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index b79f9a4b6..88d011794 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -4,5 +4,5 @@
 set -e  # die on error
 
 yarn run extract-translations
-npx pretty-quick --staged
-npx lerna run document --since master
+yarn pretty-quick --staged
+yarn lerna run document --since master
diff --git a/.husky/pre-push b/.husky/pre-push
index de5c5665b..67d27ec0d 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -3,6 +3,6 @@
 
 set -e  # die on error
 
-npx lerna run lint --since master
-npx lerna run test --since master
-npx lerna run typescript --since master
+yarn lerna run lint --since master
+yarn lerna run test --since master
+yarn lerna run typescript --since master

From d5ae83008504e33ab3fb558615a2dcbf38e69d29 Mon Sep 17 00:00:00 2001
From: Brandon Istenes <bistenes@gmail.com>
Date: Mon, 14 Mar 2022 10:24:30 -0700
Subject: [PATCH 3/3] Docs

---
 packages/framework/esm-framework/docs/API.md | 101 ++++++++++++++-----
 1 file changed, 77 insertions(+), 24 deletions(-)

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
index e4c050da9..af90dfcb1 100644
--- a/packages/framework/esm-framework/docs/API.md
+++ b/packages/framework/esm-framework/docs/API.md
@@ -160,7 +160,7 @@
 - [usePatient](API.md#usepatient)
 - [useSessionUser](API.md#usesessionuser)
 - [useStore](API.md#usestore)
-- [useStoreState](API.md#usestorestate)
+- [useStoreWithActions](API.md#usestorewithactions)
 - [useVisit](API.md#usevisit)
 - [useVisitTypes](API.md#usevisittypes)
 - [validator](API.md#validator)
@@ -1801,7 +1801,7 @@ writing a module for a specific implementation.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:131](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L131)
+[packages/framework/esm-extensions/src/extensions.ts:154](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L154)
 
 ___
 
@@ -1955,6 +1955,8 @@ ___
 
 ▸ **createUseStore**<`T`\>(`store`): () => `T`(`actions`: [`Actions`](API.md#actions)) => `T` & [`BoundActions`](API.md#boundactions)(`actions?`: [`Actions`](API.md#actions)) => `T` & [`BoundActions`](API.md#boundactions)
 
+Avoid this; generally prefer to have clients use `useStore(yourStore)`
+
 #### Type parameters
 
 | Name |
@@ -2003,7 +2005,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-react-utils/src/createUseStore.ts:21](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/createUseStore.ts#L21)
+[packages/framework/esm-react-utils/src/createUseStore.ts:22](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/createUseStore.ts#L22)
 
 ___
 
@@ -2048,7 +2050,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:170](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L170)
+[packages/framework/esm-config/src/module-config/module-config.ts:178](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L178)
 
 ___
 
@@ -2093,7 +2095,7 @@ Avoid using this. Extension attachments should be considered declarative.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:162](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L162)
+[packages/framework/esm-extensions/src/extensions.ts:185](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L185)
 
 ___
 
@@ -2115,7 +2117,7 @@ Avoid using this. Extension attachments should be considered declarative.
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:186](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L186)
+[packages/framework/esm-extensions/src/extensions.ts:209](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L209)
 
 ___
 
@@ -2247,7 +2249,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:277](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L277)
+[packages/framework/esm-extensions/src/extensions.ts:300](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L300)
 
 ___
 
@@ -2345,7 +2347,7 @@ of the execution of a function.
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:198](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L198)
+[packages/framework/esm-config/src/module-config/module-config.ts:206](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L206)
 
 ___
 
@@ -2371,7 +2373,7 @@ A list of extensions that should be rendered
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:244](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L244)
+[packages/framework/esm-extensions/src/extensions.ts:267](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L267)
 
 ___
 
@@ -2438,7 +2440,7 @@ getExtensionNameFromId("baz")
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:75](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L75)
+[packages/framework/esm-extensions/src/extensions.ts:98](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L98)
 
 ___
 
@@ -2458,7 +2460,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:88](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L88)
+[packages/framework/esm-extensions/src/extensions.ts:111](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L111)
 
 ___
 
@@ -2479,7 +2481,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-extensions/src/extensions.ts:80](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L80)
+[packages/framework/esm-extensions/src/extensions.ts:103](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-extensions/src/extensions.ts#L103)
 
 ___
 
@@ -2964,7 +2966,7 @@ Validate and interpolate defaults for `providedConfig` according to `schema`
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:220](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L220)
+[packages/framework/esm-config/src/module-config/module-config.ts:228](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L228)
 
 ___
 
@@ -2985,7 +2987,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:178](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L178)
+[packages/framework/esm-config/src/module-config/module-config.ts:186](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-config/src/module-config/module-config.ts#L186)
 
 ___
 
@@ -4190,13 +4192,14 @@ ___
 
 ### useStore
 
-▸ **useStore**<`T`\>(`store`): `T`
+▸ **useStore**<`T`, `U`\>(`store`): `T`
 
 #### Type parameters
 
 | Name |
 | :------ |
 | `T` |
+| `U` |
 
 #### Parameters
 
@@ -4210,21 +4213,47 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-react-utils/src/useStore.ts:4](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L4)
+[packages/framework/esm-react-utils/src/useStore.ts:22](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L22)
 
-▸ **useStore**<`T`\>(`store`, `actions`): `T` & [`BoundActions`](API.md#boundactions)
+▸ **useStore**<`T`, `U`\>(`store`, `select`): `U`
 
 #### Type parameters
 
 | Name |
 | :------ |
 | `T` |
+| `U` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `store` | `Store`<`T`\> |
+| `select` | (`state`: `T`) => `U` |
+
+#### Returns
+
+`U`
+
+#### Defined in
+
+[packages/framework/esm-react-utils/src/useStore.ts:23](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L23)
+
+▸ **useStore**<`T`, `U`\>(`store`, `select`, `actions`): `T` & [`BoundActions`](API.md#boundactions)
+
+#### Type parameters
+
+| Name |
+| :------ |
+| `T` |
+| `U` |
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
 | `store` | `Store`<`T`\> |
+| `select` | `undefined` |
 | `actions` | [`Actions`](API.md#actions) |
 
 #### Returns
@@ -4233,35 +4262,59 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-react-utils/src/useStore.ts:5](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L5)
+[packages/framework/esm-react-utils/src/useStore.ts:24](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L24)
+
+▸ **useStore**<`T`, `U`\>(`store`, `select`, `actions`): `U` & [`BoundActions`](API.md#boundactions)
+
+#### Type parameters
+
+| Name |
+| :------ |
+| `T` |
+| `U` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `store` | `Store`<`T`\> |
+| `select` | (`state`: `T`) => `U` |
+| `actions` | [`Actions`](API.md#actions) |
+
+#### Returns
+
+`U` & [`BoundActions`](API.md#boundactions)
+
+#### Defined in
+
+[packages/framework/esm-react-utils/src/useStore.ts:29](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L29)
 
 ___
 
-### useStoreState
+### useStoreWithActions
 
-▸ **useStoreState**<`T`, `U`\>(`store`, `select`): `U`
+▸ **useStoreWithActions**<`T`\>(`store`, `actions`): `T` & [`BoundActions`](API.md#boundactions)
 
 #### Type parameters
 
 | Name |
 | :------ |
 | `T` |
-| `U` |
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
 | `store` | `Store`<`T`\> |
-| `select` | (`state`: `T`) => `U` |
+| `actions` | [`Actions`](API.md#actions) |
 
 #### Returns
 
-`U`
+`T` & [`BoundActions`](API.md#boundactions)
 
 #### Defined in
 
-[packages/framework/esm-react-utils/src/useStoreState.ts:5](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStoreState.ts#L5)
+[packages/framework/esm-react-utils/src/useStore.ts:51](https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-react-utils/src/useStore.ts#L51)
 
 ___