@t8/react-pending 1.0.27 → 1.0.29

package/dist/index.cjs

@@ -0,0 +1,118 @@
+let react = require("react");
+let __t8_react_store = require("@t8/react-store");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/PendingStateContext.ts
+const PendingStateContext = (0, react.createContext)(/* @__PURE__ */ new Map());
+
+//#endregion
+//#region src/PendingStateProvider.tsx
+const PendingStateProvider = ({ value, children }) => {
+	let defaultValueRef = (0, react.useRef)(null);
+	let resolvedValue = (0, react.useMemo)(() => {
+		if (value instanceof Map) return value;
+		if (typeof value === "object" && value !== null) return new Map(Object.entries(value).map(([key, state]) => [key, new __t8_react_store.Store(state)]));
+		if (defaultValueRef.current === null) defaultValueRef.current = /* @__PURE__ */ new Map();
+		return defaultValueRef.current;
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PendingStateContext.Provider, {
+		value: resolvedValue,
+		children
+	});
+};
+
+//#endregion
+//#region src/usePendingState.ts
+function createState(initialized = false, complete = false, error) {
+	return {
+		initialized,
+		complete,
+		error,
+		time: Date.now()
+	};
+}
+/**
+* Returns an instance of an action's state and the functions to update it.
+*
+* @param store - A unique store key or a store. Providing a store
+* key or a shared store allows to share the state across multiple
+* components.
+*
+* @returns `[state, withState, setState]`, where
+* - `state` is the current value of the action's state;
+* - `withState(action, options?)` reads and tracks the `actions`'s state
+* which is exposed as `state` listed above;
+* - `setState(update)` can replace the current `state` value directly with
+* an another state value.
+*/
+function usePendingState(store) {
+	let storeMap = (0, react.useContext)(PendingStateContext);
+	let storeRef = (0, react.useRef)(null);
+	let [storeItemInited, setStoreItemInited] = (0, react.useState)(false);
+	let [state, setState] = (0, __t8_react_store.useStore)((0, react.useMemo)(() => {
+		if ((0, __t8_react_store.isStore)(store)) return store;
+		if (typeof store === "string") {
+			let storeItem = storeMap.get(store);
+			if (!storeItem) {
+				storeItem = new __t8_react_store.Store(createState());
+				storeMap.set(store, storeItem);
+				if (!storeItemInited) setStoreItemInited(true);
+			}
+			return storeItem;
+		}
+		if (!storeRef.current) storeRef.current = new __t8_react_store.Store(createState());
+		return storeRef.current;
+	}, [
+		store,
+		storeMap,
+		storeItemInited
+	]));
+	return [
+		state,
+		(0, react.useCallback)((value, options) => {
+			if (value instanceof Promise) {
+				let delayedPending = null;
+				if (!options?.silent) {
+					let delay = options?.delay;
+					if (delay === void 0) setState((prevState) => ({
+						...prevState,
+						...createState(true, false)
+					}));
+					else delayedPending = setTimeout(() => {
+						setState((prevState) => ({
+							...prevState,
+							...createState(true, false)
+						}));
+						delayedPending = null;
+					}, delay);
+				}
+				return value.then((resolvedValue) => {
+					if (delayedPending !== null) clearTimeout(delayedPending);
+					setState((prevState) => ({
+						...prevState,
+						...createState(true, true)
+					}));
+					return resolvedValue;
+				}).catch((error) => {
+					if (delayedPending !== null) clearTimeout(delayedPending);
+					setState((prevState) => ({
+						...prevState,
+						...createState(true, true, error)
+					}));
+					if (options?.throws) throw error;
+				});
+			}
+			setState((prevState) => ({
+				...prevState,
+				...createState(true, true)
+			}));
+			return value;
+		}, [setState]),
+		setState
+	];
+}
+
+//#endregion
+exports.PendingStateContext = PendingStateContext;
+exports.PendingStateProvider = PendingStateProvider;
+exports.usePendingState = usePendingState;

package/dist/index.d.ts

@@ -1,19 +1,27 @@
-import type { SetStoreState, Store } from "@t8/react-store";
-import type { ReactNode } from "react";
+import * as react0 from "react";
+import { ReactNode } from "react";
+import { SetStoreState, Store } from "@t8/react-store";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-export type PendingState = {
+type PendingState = {
   initialized?: boolean | undefined;
   complete?: boolean | undefined;
   time?: number | undefined;
   error?: unknown;
 };
-export declare const PendingStateContext: import("react").Context<Map<string, Store<PendingState>>>;
-export type PendingStateProviderProps = {
+
+declare const PendingStateContext: react0.Context<Map<string, Store<PendingState>>>;
+
+type PendingStateProviderProps = {
   value?: Record<string, PendingState> | Map<string, Store<PendingState>> | null | undefined;
   children?: ReactNode;
 };
-export declare const PendingStateProvider: ({ value, children, }: PendingStateProviderProps) => import("react/jsx-runtime").JSX.Element;
-export type WithStateOptions = {
+declare const PendingStateProvider: ({
+  value,
+  children
+}: PendingStateProviderProps) => react_jsx_runtime0.JSX.Element;
+
+type WithStateOptions = {
   /**
    * Whether to track the action state silently (e.g. with a background
    * action or an optimistic update).
@@ -37,22 +45,19 @@ export type WithStateOptions = {
   throws?: boolean;
 };
 /**
- * Returns an instance of pending state and the functions to update it.
+ * Returns an instance of an action's state and the functions to update it.
  *
  * @param store - A unique store key or a store. Providing a store
  * key or a shared store allows to share the state across multiple
  * components.
  *
  * @returns `[state, withState, setState]`, where
- * - `state` is the current value of the pending state;
- * - `withState(action, options?)` reads and tracks the pending state
- * of `action`;
- * - `setState(update)` can update the pending state value directly.
+ * - `state` is the current value of the action's state;
+ * - `withState(action, options?)` reads and tracks the `actions`'s state
+ * which is exposed as `state` listed above;
+ * - `setState(update)` can replace the current `state` value directly with
+ * an another state value.
  */
-export declare function usePendingState(store?: string | Store<PendingState> | null): [
-  PendingState,
-  <T>(value: T) => T,
-  SetStoreState<PendingState>
-];
+declare function usePendingState(store?: string | Store<PendingState> | null): [PendingState, <T>(value: T) => T, SetStoreState<PendingState>];
 
-export {};
+export { PendingState, PendingStateContext, PendingStateProvider, PendingStateProviderProps, WithStateOptions, usePendingState };

package/dist/index.mjs

@@ -0,0 +1,116 @@
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { Store, isStore, useStore } from "@t8/react-store";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/PendingStateContext.ts
+const PendingStateContext = createContext(/* @__PURE__ */ new Map());
+
+//#endregion
+//#region src/PendingStateProvider.tsx
+const PendingStateProvider = ({ value, children }) => {
+	let defaultValueRef = useRef(null);
+	let resolvedValue = useMemo(() => {
+		if (value instanceof Map) return value;
+		if (typeof value === "object" && value !== null) return new Map(Object.entries(value).map(([key, state]) => [key, new Store(state)]));
+		if (defaultValueRef.current === null) defaultValueRef.current = /* @__PURE__ */ new Map();
+		return defaultValueRef.current;
+	}, [value]);
+	return /* @__PURE__ */ jsx(PendingStateContext.Provider, {
+		value: resolvedValue,
+		children
+	});
+};
+
+//#endregion
+//#region src/usePendingState.ts
+function createState(initialized = false, complete = false, error) {
+	return {
+		initialized,
+		complete,
+		error,
+		time: Date.now()
+	};
+}
+/**
+* Returns an instance of an action's state and the functions to update it.
+*
+* @param store - A unique store key or a store. Providing a store
+* key or a shared store allows to share the state across multiple
+* components.
+*
+* @returns `[state, withState, setState]`, where
+* - `state` is the current value of the action's state;
+* - `withState(action, options?)` reads and tracks the `actions`'s state
+* which is exposed as `state` listed above;
+* - `setState(update)` can replace the current `state` value directly with
+* an another state value.
+*/
+function usePendingState(store) {
+	let storeMap = useContext(PendingStateContext);
+	let storeRef = useRef(null);
+	let [storeItemInited, setStoreItemInited] = useState(false);
+	let [state, setState] = useStore(useMemo(() => {
+		if (isStore(store)) return store;
+		if (typeof store === "string") {
+			let storeItem = storeMap.get(store);
+			if (!storeItem) {
+				storeItem = new Store(createState());
+				storeMap.set(store, storeItem);
+				if (!storeItemInited) setStoreItemInited(true);
+			}
+			return storeItem;
+		}
+		if (!storeRef.current) storeRef.current = new Store(createState());
+		return storeRef.current;
+	}, [
+		store,
+		storeMap,
+		storeItemInited
+	]));
+	return [
+		state,
+		useCallback((value, options) => {
+			if (value instanceof Promise) {
+				let delayedPending = null;
+				if (!options?.silent) {
+					let delay = options?.delay;
+					if (delay === void 0) setState((prevState) => ({
+						...prevState,
+						...createState(true, false)
+					}));
+					else delayedPending = setTimeout(() => {
+						setState((prevState) => ({
+							...prevState,
+							...createState(true, false)
+						}));
+						delayedPending = null;
+					}, delay);
+				}
+				return value.then((resolvedValue) => {
+					if (delayedPending !== null) clearTimeout(delayedPending);
+					setState((prevState) => ({
+						...prevState,
+						...createState(true, true)
+					}));
+					return resolvedValue;
+				}).catch((error) => {
+					if (delayedPending !== null) clearTimeout(delayedPending);
+					setState((prevState) => ({
+						...prevState,
+						...createState(true, true, error)
+					}));
+					if (options?.throws) throw error;
+				});
+			}
+			setState((prevState) => ({
+				...prevState,
+				...createState(true, true)
+			}));
+			return value;
+		}, [setState]),
+		setState
+	];
+}
+
+//#endregion
+export { PendingStateContext, PendingStateProvider, usePendingState };

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@t8/react-pending",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Concise async action state tracking for React apps",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true });\"",
-    "compile": "npx esbuild index.ts --bundle --outdir=dist --platform=neutral --external:react",
     "demo": "npx @t8/serve 3000 * tests/async_status -b src/index.tsx",
-    "preversion": "npx npm-run-all clean shape compile test",
-    "shape": "npx codeshape --typecheck --emit-types",
+    "preversion": "npx npm-run-all shape test",
+    "shape": "npx codeshape",
     "test": "npx playwright test --project=chromium"
   },
   "author": "axtk",
@@ -30,13 +29,13 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.56.0",
-    "@t8/serve": "^0.1.36",
+    "@t8/serve": "^0.1.37",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react-dom": "^19.2.1"
   },
   "dependencies": {
-    "@t8/react-store": "^1.2.4"
+    "@t8/react-store": "^1.2.5"
   }
 }

package/src/usePendingState.ts

@@ -41,17 +41,18 @@ export type WithStateOptions = {
 };
 
 /**
- * Returns an instance of pending state and the functions to update it.
+ * Returns an instance of an action's state and the functions to update it.
  *
  * @param store - A unique store key or a store. Providing a store
  * key or a shared store allows to share the state across multiple
  * components.
  *
  * @returns `[state, withState, setState]`, where
- * - `state` is the current value of the pending state;
- * - `withState(action, options?)` reads and tracks the pending state
- * of `action`;
- * - `setState(update)` can update the pending state value directly.
+ * - `state` is the current value of the action's state;
+ * - `withState(action, options?)` reads and tracks the `actions`'s state
+ * which is exposed as `state` listed above;
+ * - `setState(update)` can replace the current `state` value directly with
+ * an another state value.
  */
 export function usePendingState(
   store?: string | Store<PendingState> | null,

package/dist/index.js

@@ -1,169 +0,0 @@
-// src/PendingStateContext.ts
-import { createContext } from "react";
-var PendingStateContext = createContext(
-  /* @__PURE__ */ new Map()
-);
-
-// node_modules/@t8/store/src/isStore.ts
-function isStore(x) {
-  return x !== null && typeof x === "object" && "onUpdate" in x && typeof x.onUpdate === "function" && "getState" in x && typeof x.getState === "function" && "setState" in x && typeof x.setState === "function";
-}
-
-// node_modules/@t8/store/src/isPersistentStore.ts
-function isPersistentStore(x) {
-  return isStore(x) && "sync" in x;
-}
-
-// node_modules/@t8/store/src/Store.ts
-var Store = class {
-  state;
-  callbacks = /* @__PURE__ */ new Set();
-  revision = -1;
-  constructor(data) {
-    this.state = data;
-  }
-  onUpdate(callback) {
-    this.callbacks.add(callback);
-    return () => {
-      this.callbacks.delete(callback);
-    };
-  }
-  getState() {
-    return this.state;
-  }
-  setState(update) {
-    let prevState = this.state;
-    let nextState = update instanceof Function ? update(this.state) : update;
-    this.state = nextState;
-    this.revision = Math.random();
-    for (let callback of this.callbacks) callback(nextState, prevState);
-  }
-};
-
-// node_modules/@t8/react-store/src/useStore.ts
-import { useEffect, useMemo, useRef, useState } from "react";
-function useStore(store, shouldUpdate = true) {
-  if (!isStore(store))
-    throw new Error("'store' is not an instance of Store");
-  let [, setRevision] = useState(-1);
-  let state = store.getState();
-  let setState = useMemo(() => store.setState.bind(store), [store]);
-  let initialStoreRevision = useRef(store.revision);
-  useEffect(() => {
-    if (isPersistentStore(store)) store.syncOnce();
-    if (!shouldUpdate) return;
-    let unsubscribe = store.onUpdate((nextState, prevState) => {
-      if (typeof shouldUpdate !== "function" || shouldUpdate(nextState, prevState))
-        setRevision(Math.random());
-    });
-    if (store.revision !== initialStoreRevision.current)
-      setRevision(Math.random());
-    return () => {
-      unsubscribe();
-      initialStoreRevision.current = store.revision;
-    };
-  }, [store, shouldUpdate]);
-  return [state, setState];
-}
-
-// src/PendingStateProvider.tsx
-import { useMemo as useMemo2, useRef as useRef2 } from "react";
-import { jsx } from "react/jsx-runtime";
-var PendingStateProvider = ({
-  value,
-  children
-}) => {
-  let defaultValueRef = useRef2(null);
-  let resolvedValue = useMemo2(() => {
-    if (value instanceof Map) return value;
-    if (typeof value === "object" && value !== null)
-      return new Map(
-        Object.entries(value).map(([key, state]) => [key, new Store(state)])
-      );
-    if (defaultValueRef.current === null)
-      defaultValueRef.current = /* @__PURE__ */ new Map();
-    return defaultValueRef.current;
-  }, [value]);
-  return /* @__PURE__ */ jsx(PendingStateContext.Provider, { value: resolvedValue, children });
-};
-
-// src/usePendingState.ts
-import { useCallback, useContext, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "react";
-function createState(initialized = false, complete = false, error) {
-  return {
-    initialized,
-    complete,
-    error,
-    time: Date.now()
-  };
-}
-function usePendingState(store) {
-  let storeMap = useContext(PendingStateContext);
-  let storeRef = useRef3(null);
-  let [storeItemInited, setStoreItemInited] = useState2(false);
-  let resolvedStore = useMemo3(() => {
-    if (isStore(store)) return store;
-    if (typeof store === "string") {
-      let storeItem = storeMap.get(store);
-      if (!storeItem) {
-        storeItem = new Store(createState());
-        storeMap.set(store, storeItem);
-        if (!storeItemInited) setStoreItemInited(true);
-      }
-      return storeItem;
-    }
-    if (!storeRef.current) storeRef.current = new Store(createState());
-    return storeRef.current;
-  }, [store, storeMap, storeItemInited]);
-  let [state, setState] = useStore(resolvedStore);
-  let withState = useCallback(
-    (value, options) => {
-      if (value instanceof Promise) {
-        let delayedPending = null;
-        if (!options?.silent) {
-          let delay = options?.delay;
-          if (delay === void 0)
-            setState((prevState) => ({
-              ...prevState,
-              ...createState(true, false)
-            }));
-          else
-            delayedPending = setTimeout(() => {
-              setState((prevState) => ({
-                ...prevState,
-                ...createState(true, false)
-              }));
-              delayedPending = null;
-            }, delay);
-        }
-        return value.then((resolvedValue) => {
-          if (delayedPending !== null) clearTimeout(delayedPending);
-          setState((prevState) => ({
-            ...prevState,
-            ...createState(true, true)
-          }));
-          return resolvedValue;
-        }).catch((error) => {
-          if (delayedPending !== null) clearTimeout(delayedPending);
-          setState((prevState) => ({
-            ...prevState,
-            ...createState(true, true, error)
-          }));
-          if (options?.throws) throw error;
-        });
-      }
-      setState((prevState) => ({
-        ...prevState,
-        ...createState(true, true)
-      }));
-      return value;
-    },
-    [setState]
-  );
-  return [state, withState, setState];
-}
-export {
-  PendingStateContext,
-  PendingStateProvider,
-  usePendingState
-};