@ic-reactor/react 1.7.4 → 1.7.6

package/dist/helpers/actorHooks.js

@@ -70,15 +70,20 @@ const DEFAULT_STATE = {
  */
 const actorHooks = (actorManager) => {
     const { actorStore, canisterId, visitFunction, methodAttributes, updateMethodState, extractMethodAttributes, extractInterface, callMethodWithOptions, initialize, } = actorManager;
-    const useActorState = () => (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)((state) => ({
-        name: state.name,
-        error: state.error,
-        initialized: state.initialized,
-        initializing: state.initializing,
-        canisterId,
-    })));
+    const useActorStore = (selector = (s) => s) => {
+        return (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)(selector));
+    };
+    const useActorState = () => {
+        return useActorStore((state) => ({
+            name: state.name,
+            error: state.error,
+            initialized: state.initialized,
+            initializing: state.initializing,
+            canisterId,
+        }));
+    };
     const useMethodState = (functionName, requestKey) => {
-        const state = (0, zustand_1.useStore)(actorStore, (0, shallow_1.useShallow)((state) => { var _a; return (_a = state.methodState[functionName]) === null || _a === void 0 ? void 0 : _a[requestKey]; })) || DEFAULT_STATE;
+        const state = useActorStore((state) => { var _a; return (_a = state.methodState[functionName]) === null || _a === void 0 ? void 0 : _a[requestKey]; });
         const setSharedState = React.useCallback((newState) => {
             updateMethodState(functionName, requestKey, newState);
         }, [functionName, requestKey]);
@@ -207,6 +212,7 @@ const actorHooks = (actorManager) => {
     };
     return {
         initialize,
+        useActorStore,
         useMethodAttributes,
         useMethodNames,
         useMethod,

package/dist/helpers/extractActorContext.js

@@ -16,6 +16,9 @@ function extractActorContext(actorContext) {
     const initialize = () => useActorContext().initialize();
     const useMethodNames = () => useActorContext().useMethodNames();
     const useMethodAttributes = () => useActorContext().useMethodAttributes();
+    const useActorStore = (selector = (s) => s) => {
+        return useActorContext().useActorStore(selector);
+    };
     const useActorState = () => useActorContext().useActorState();
     const useMethod = (args) => useActorContext().useMethod(args);
     const useQueryCall = (args) => useActorContext().useQueryCall(args);
@@ -24,6 +27,7 @@ function extractActorContext(actorContext) {
     const useVisitService = () => useActorContext().useVisitService();
     const useActorInterface = () => useActorContext().useActorInterface();
     return {
+        useActorStore,
         useActorState,
         useMethod,
         useMethodNames,

package/dist/helpers/types.d.ts

@@ -38,7 +38,8 @@ export type LoginParameters = AuthClientLoginOptions;
 export type LogoutParameters = {
     returnTo?: string;
 };
-export interface UseActorState extends Omit<ActorState, "methodState"> {
+export type UseActorStore<A> = <T>(callback?: (state: ActorState<A>) => T) => T;
+export interface UseActorStateReturnType extends Omit<ActorState, "methodState"> {
     canisterId: string;
 }
 export interface UseSharedCallParameters<A, M extends FunctionName<A>> extends CallConfig {
@@ -90,7 +91,8 @@ export type UseVisitMethod<A> = <M extends FunctionName<A>>(functionName: M) =>
 export type UseVisitService<A> = () => VisitService<A>;
 export interface ActorHooksReturnType<A = BaseActor> {
     initialize: () => Promise<void>;
-    useActorState: () => UseActorState;
+    useActorStore: UseActorStore<A>;
+    useActorState: () => UseActorStateReturnType;
     useActorInterface: () => IDL.ServiceClass;
     useMethodNames: <Actor = A>() => FunctionName<Actor>[];
     useMethodAttributes: <Actor = A>() => MethodAttributes<Actor>;

package/dist/hooks/actor/index.d.ts

@@ -2,6 +2,7 @@ export * from "./useMethodNames";
 export * from "./useQueryCall";
 export * from "./useUpdateCall";
 export * from "./useMethodAttributes";
+export * from "./useActorStore";
 export * from "./useActorState";
 export * from "./useVisitMethod";
 export * from "./useVisitService";

package/dist/hooks/actor/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./useMethodNames"), exports);
 __exportStar(require("./useQueryCall"), exports);
 __exportStar(require("./useUpdateCall"), exports);
 __exportStar(require("./useMethodAttributes"), exports);
+__exportStar(require("./useActorStore"), exports);
 __exportStar(require("./useActorState"), exports);
 __exportStar(require("./useVisitMethod"), exports);
 __exportStar(require("./useVisitService"), exports);

package/dist/hooks/actor/useActorState.d.ts

@@ -18,4 +18,4 @@
  * }
  *```
  */
-export declare const useActorState: () => import("../../types").UseActorState;
+export declare const useActorState: () => import("../../types").UseActorStateReturnType;

package/dist/hooks/actor/useActorStore.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Provides a hook for accessing the state of an actor from the actor's store.
+ * This hook is part of a set of utilities that facilitate interactions with
+ * Internet Computer (IC) canisters by abstracting the complexities associated
+ * with actor management and state retrieval.
+ *
+ * The `useActorStore` hook allows components to subscribe to and retrieve state
+ * from the actor store in a reactive way. This enables components to re-render
+ * when specific parts of the actor state change, which is managed by a selector function.
+ *
+ * @template A The type of the actor, extending from a base actor structure.
+ * @template T The type of the data selected from the actor's state.
+ * @param {Function} [selector=(s: ActorState<A>) => s as T] A function that
+ *        selects a part of the actor state. This function should accept the actor state
+ *        and return a portion of the state. If no selector is provided, the entire
+ *        state is returned.
+ *
+ * @returns {T} The selected state from the actor store. The nature of the returned
+ *         state depends on the selector function provided.
+ *
+ * @example
+ * ```tsx
+ * // Assuming a 'LedgerActor' has been setup and used to manage the actor store
+ * const name = useActorStore(state => state.name);
+ *
+ * return <div>Canister Name: {name}</div>;
+ * ```
+ *
+ * @see ActorManager for more details about the architecture and management of actor stores.
+ * @see ActorState for the structure and possible states an actor can hold.
+ */
+export declare const useActorStore: import("../../types").UseActorStore<import("@ic-reactor/core/dist/types").BaseActor>;

package/dist/hooks/actor/useActorStore.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActorStore = void 0;
+const hooks_1 = __importDefault(require("./hooks"));
+/**
+ * Provides a hook for accessing the state of an actor from the actor's store.
+ * This hook is part of a set of utilities that facilitate interactions with
+ * Internet Computer (IC) canisters by abstracting the complexities associated
+ * with actor management and state retrieval.
+ *
+ * The `useActorStore` hook allows components to subscribe to and retrieve state
+ * from the actor store in a reactive way. This enables components to re-render
+ * when specific parts of the actor state change, which is managed by a selector function.
+ *
+ * @template A The type of the actor, extending from a base actor structure.
+ * @template T The type of the data selected from the actor's state.
+ * @param {Function} [selector=(s: ActorState<A>) => s as T] A function that
+ *        selects a part of the actor state. This function should accept the actor state
+ *        and return a portion of the state. If no selector is provided, the entire
+ *        state is returned.
+ *
+ * @returns {T} The selected state from the actor store. The nature of the returned
+ *         state depends on the selector function provided.
+ *
+ * @example
+ * ```tsx
+ * // Assuming a 'LedgerActor' has been setup and used to manage the actor store
+ * const name = useActorStore(state => state.name);
+ *
+ * return <div>Canister Name: {name}</div>;
+ * ```
+ *
+ * @see ActorManager for more details about the architecture and management of actor stores.
+ * @see ActorState for the structure and possible states an actor can hold.
+ */
+exports.useActorStore = hooks_1.default.useActorStore;

package/dist/provider/actor.d.ts

@@ -26,3 +26,25 @@
  * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor through the context provided by `ActorProvider`.
  */
 export declare const ActorProvider: import("react").FC<import("../context/types").ActorProviderProps>;
+/**
+ * `ActorHookProvider` is a React functional component that serves as a context provider for IC actor hooks within a React application.
+ * It wraps child components, providing them access to actor-specific hooks and functionalities based on the provided actor hooks and configuration.
+ *
+ * Props:
+ * - `hooks`: ActorHooksReturnType - The actor hooks object containing the various actor interaction hooks.
+ * - `children`: React Node - The child components that will have access to the actor hooks context.
+ *
+ * Behavior:
+ * - Validates the presence of the `hooks` object. Throws an error if it is missing, ensuring that the actor hooks are always available for actor operations.
+ * - Utilizes `useMemo` to memoize the `hooks` object, optimizing for performance by avoiding unnecessary recalculations.
+ * - Renders the child components once the `hooks` object is available, effectively providing them access to the actor hooks context.
+ *
+ * @example
+ * ```jsx
+ * <ActorHookProvider hooks={yourActorHooks}>
+ *   <YourComponent />
+ * </ActorHookProvider>
+ * ```
+ * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor hooks through the context provided by `ActorHookProvider`.
+ */
+export declare const ActorHookProvider: import("react").FC<import("../context/types").ActorHookProviderProps<import("@ic-reactor/core/dist/types").BaseActor>>;

package/dist/provider/actor.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActorProvider = void 0;
+exports.ActorHookProvider = exports.ActorProvider = void 0;
 const hooks_1 = __importDefault(require("../hooks/actor/hooks"));
 /**
  * `ActorProvider` is a React functional component that serves as a context provider for IC actor interactions within a React application.
@@ -32,3 +32,25 @@ const hooks_1 = __importDefault(require("../hooks/actor/hooks"));
  * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor through the context provided by `ActorProvider`.
  */
 exports.ActorProvider = hooks_1.default.ActorProvider;
+/**
+ * `ActorHookProvider` is a React functional component that serves as a context provider for IC actor hooks within a React application.
+ * It wraps child components, providing them access to actor-specific hooks and functionalities based on the provided actor hooks and configuration.
+ *
+ * Props:
+ * - `hooks`: ActorHooksReturnType - The actor hooks object containing the various actor interaction hooks.
+ * - `children`: React Node - The child components that will have access to the actor hooks context.
+ *
+ * Behavior:
+ * - Validates the presence of the `hooks` object. Throws an error if it is missing, ensuring that the actor hooks are always available for actor operations.
+ * - Utilizes `useMemo` to memoize the `hooks` object, optimizing for performance by avoiding unnecessary recalculations.
+ * - Renders the child components once the `hooks` object is available, effectively providing them access to the actor hooks context.
+ *
+ * @example
+ * ```jsx
+ * <ActorHookProvider hooks={yourActorHooks}>
+ *   <YourComponent />
+ * </ActorHookProvider>
+ * ```
+ * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor hooks through the context provided by `ActorHookProvider`.
+ */
+exports.ActorHookProvider = hooks_1.default.ActorHookProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "A React library for interacting with Internet Computer canisters",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,5 +47,5 @@
     "react": ">=16.8",
     "zustand": "4.5"
   },
-  "gitHead": "324a59d9cf60331289cb164d4eb8589faf6e0aa2"
+  "gitHead": "21ff3717f422184cc9b71f4ce10a49e1ec59be8f"
 }