@openmrs/esm-react-utils 4.3.2-pre.680 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "4.3.2-pre.680",
+  "version": "4.4.0",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -55,18 +55,17 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^4.3.2-pre.680",
-    "@openmrs/esm-config": "^4.3.2-pre.680",
-    "@openmrs/esm-error-handling": "^4.3.2-pre.680",
-    "@openmrs/esm-extensions": "^4.3.2-pre.680",
-    "@openmrs/esm-globals": "^4.3.2-pre.680",
+    "@openmrs/esm-api": "^4.4.0",
+    "@openmrs/esm-config": "^4.4.0",
+    "@openmrs/esm-error-handling": "^4.4.0",
+    "@openmrs/esm-extensions": "^4.4.0",
+    "@openmrs/esm-globals": "^4.4.0",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.9",
-    "rxjs": "^6.5.3",
-    "unistore": "^3.5.2"
+    "rxjs": "^6.5.3"
   },
-  "gitHead": "924a6261edaf89142bee78049ff388ef36b097ff"
+  "gitHead": "fdaefeded76bee4ec6503ca6590737e89ebe4b26"
 }

package/src/ExtensionSlot.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useMemo } from "react";
-import { ConnectedExtension } from "@openmrs/esm-extensions";
+import type { ConnectedExtension } from "@openmrs/esm-extensions";
 import { ComponentContext } from "./ComponentContext";
 import { Extension } from "./Extension";
 import { useExtensionSlot } from "./useExtensionSlot";

package/src/createUseStore.ts

@@ -1,11 +1,11 @@
 /** @module @category Store */
 import { useEffect, useMemo, useState } from "react";
-import { Store, BoundAction } from "unistore";
+import type { StoreApi } from "zustand";
 
 export type Actions = Function | { [key: string]: Function };
-export type BoundActions = { [key: string]: BoundAction };
+export type BoundActions = { [key: string]: (...args: any[]) => void };
 
-function bindActions<T>(store: Store<T>, actions: Actions) {
+function bindActions<T>(store: StoreApi<T>, actions: Actions): BoundActions {
   if (typeof actions == "function") {
     actions = actions(store);
   }
@@ -13,28 +13,34 @@ function bindActions<T>(store: Store<T>, actions: Actions) {
   const bound = {};
 
   for (let i in actions) {
-    bound[i] = store.action(actions[i]);
+    bound[i] = () => {
+      const args = arguments;
+      store.setState((state) => {
+        let _args = [state];
+        for (let i = 0; i < args.length; i++) {
+          _args.push(args[i]);
+        }
+
+        return actions[i](_args);
+      });
+    };
   }
 
   return bound;
 }
 
 /** Avoid this; generally prefer to have clients use `useStore(yourStore)` */
-export function createUseStore<T>(store: Store<T>) {
+export function createUseStore<T>(store: StoreApi<T>) {
   function useStore(): T;
   function useStore(actions: Actions): T & BoundActions;
   function useStore(actions?: Actions): T & BoundActions;
   function useStore(actions?: Actions) {
     const [state, set] = useState(store.getState());
     useEffect(() => store.subscribe((state) => set(state)), []);
-    let boundActions: BoundActions = {};
-
-    if (actions) {
-      boundActions = useMemo(
-        () => bindActions(store, actions),
-        [store, actions]
-      );
-    }
+    let boundActions: BoundActions = useMemo(
+      () => (actions ? bindActions(store, actions) : {}),
+      [actions]
+    );
 
     return { ...state, ...boundActions };
   }

package/src/useConfig.ts

@@ -8,15 +8,15 @@ import {
   ExtensionsConfigStore,
   getExtensionConfigFromStore,
 } from "@openmrs/esm-config";
-import { ComponentContext, ExtensionData } from "./ComponentContext";
-import { Store } from "unistore";
+import type { StoreApi } from "zustand";
 import isEqual from "lodash-es/isEqual";
+import { ComponentContext, ExtensionData } from "./ComponentContext";
 
 const promises: Record<string, Promise<ConfigObject>> = {};
 const errorMessage = `No ComponentContext has been provided. This should come from "openmrsComponentDecorator".
 Usually this is already applied when using "getAsyncLifecycle" or "getSyncLifecycle".`;
 
-function readInitialConfig(store: Store<ConfigStore>) {
+function readInitialConfig(store: StoreApi<ConfigStore>) {
   return () => {
     const state = store.getState();
 
@@ -29,7 +29,7 @@ function readInitialConfig(store: Store<ConfigStore>) {
 }
 
 function readInitialExtensionConfig(
-  store: Store<ExtensionsConfigStore>,
+  store: StoreApi<ExtensionsConfigStore>,
   extension: ExtensionData | undefined
 ) {
   if (extension) {
@@ -48,7 +48,7 @@ function readInitialExtensionConfig(
   return null;
 }
 
-function createConfigPromise(store: Store<ConfigStore>) {
+function createConfigPromise(store: StoreApi<ConfigStore>) {
   return new Promise<ConfigObject>((resolve) => {
     const unsubscribe = store.subscribe((state) => {
       if (state.loaded && state.config) {
@@ -60,7 +60,7 @@ function createConfigPromise(store: Store<ConfigStore>) {
 }
 
 function createExtensionConfigPromise(
-  store: Store<ExtensionsConfigStore>,
+  store: StoreApi<ExtensionsConfigStore>,
   extension: ExtensionData
 ) {
   return new Promise<ConfigObject>((resolve) => {
@@ -78,7 +78,7 @@ function createExtensionConfigPromise(
   });
 }
 
-function useConfigStore(store: Store<ConfigStore>) {
+function useConfigStore(store: StoreApi<ConfigStore>) {
   const [state, setState] = useState(readInitialConfig(store));
 
   useEffect(() => {
@@ -93,7 +93,7 @@ function useConfigStore(store: Store<ConfigStore>) {
 }
 
 function useExtensionConfigStore(
-  store: Store<ExtensionsConfigStore>,
+  store: StoreApi<ExtensionsConfigStore>,
   extension: ExtensionData | undefined
 ) {
   const [config, setConfig] = useState<ConfigObject | null>(

package/src/useStore.ts

@@ -1,10 +1,10 @@
 /** @module @category Store */
 import { subscribeTo } from "@openmrs/esm-state";
 import { useEffect, useMemo, useState } from "react";
-import { Store } from "unistore";
-import { Actions, BoundActions } from "./createUseStore";
+import type { StoreApi } from "zustand";
+import type { Actions, BoundActions } from "./createUseStore";
 
-function bindActions<T>(store: Store<T>, actions: Actions) {
+function bindActions<T>(store: StoreApi<T>, actions: Actions): BoundActions {
   if (typeof actions == "function") {
     actions = actions(store);
   }
@@ -12,7 +12,17 @@ function bindActions<T>(store: Store<T>, actions: Actions) {
   const bound = {};
 
   for (let i in actions) {
-    bound[i] = store.action(actions[i]);
+    bound[i] = () => {
+      const args = arguments;
+      store.setState((state) => {
+        let _args = [state];
+        for (let i = 0; i < args.length; i++) {
+          _args.push(args[i]);
+        }
+
+        return actions[i](_args);
+      });
+    };
   }
 
   return bound;
@@ -20,37 +30,36 @@ function bindActions<T>(store: Store<T>, actions: Actions) {
 
 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: StoreApi<T>): T;
+function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U): U;
 function useStore<T, U>(
-  store: Store<T>,
+  store: StoreApi<T>,
   select: undefined,
   actions: Actions
 ): T & BoundActions;
 function useStore<T, U>(
-  store: Store<T>,
+  store: StoreApi<T>,
   select: (state: T) => U,
   actions: Actions
 ): U & BoundActions;
 function useStore<T, U>(
-  store: Store<T>,
+  store: StoreApi<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]);
-  }
+  let boundActions: BoundActions = useMemo(
+    () => (actions ? bindActions(store, actions) : {}),
+    [store, actions]
+  );
 
   return { ...state, ...boundActions };
 }
 
 function useStoreWithActions<T>(
-  store: Store<T>,
+  store: StoreApi<T>,
   actions: Actions
 ): T & BoundActions {
   return useStore(store, defaultSelectFunction, actions);