@t8/react-pending 1.0.30 → 1.0.32

package/README.md

@@ -1,6 +1,6 @@
 # T8 React Pending
 
-*Concise async action state tracking for React apps*
+A concise async action state management lib for React apps
 
 [![npm](https://img.shields.io/npm/v/@t8/react-pending?labelColor=345&color=46e)](https://www.npmjs.com/package/@t8/react-pending) ![Lightweight](https://img.shields.io/bundlephobia/minzip/@t8/react-pending?label=minzip&labelColor=345&color=46e) ![CSR ✓](https://img.shields.io/badge/CSR-✓-345?labelColor=345) ![SSR ✓](https://img.shields.io/badge/SSR-✓-345?labelColor=345)
 
@@ -60,19 +60,19 @@ In our setup, there are two components rendering their content with regard to th
   export let Status = () => {
 +   let [state] = usePendingState("fetch-items");
 
-    if (!state.initialized) return "";
-    if (!state.complete) return "Busy";
-    if (state.error) return "Error";
+    if (!state.initialized) return null;
+    if (!state.complete) return <>Busy</>;
+    if (state.error) return <>Error</>;
 
-    return "OK";
+    return <>OK</>;
   };
 ```
 
 [Live demo](https://codesandbox.io/p/sandbox/rrr9cl?file=%2Fsrc%2FItemList.tsx)
 
-🔹 To share the async action's pending state with multiple components we're using the string key parameter of `usePendingState(stateKey)`. This key can be used with `usePendingState(stateKey)` in other components to refer to the same pending state (as in the `Status` component above), so `stateKey` should be unique to the particular pending state.
+⬥ To share the async action's pending state with multiple components we're using the string key parameter of `usePendingState(stateKey)`. This key can be used with `usePendingState(stateKey)` in other components to refer to the same pending state (as in the `Status` component above), so `stateKey` should be unique to the particular pending state.
 
-🔹 In the example above, the data returned from the async action is stored in the component's local state, but it can be stored in any app state of the developer's choice without affecting how the `usePendingState()` hook is used.
+⬥ In the example above, the data returned from the async action is stored in the component's local state, but it can be stored in any app state of the developer's choice without affecting how the `usePendingState()` hook is used.
 
 ## Local pending state
 
@@ -90,7 +90,7 @@ Omit the custom string key parameter of `usePendingState()` to scope the pending
 + withState(fetchItems(), { silent: true })
 ```
 
-🔹 This option prevents `state.complete` from switching to `false` in the pending state.
+⬥ This option prevents `state.complete` from switching to `false` in the pending state.
 
 ## Delayed pending state
 
@@ -99,7 +99,7 @@ Omit the custom string key parameter of `usePendingState()` to scope the pending
 + withState(fetchItems(), { delay: 500 }) // in milliseconds
 ```
 
-🔹 Use case: avoiding flashing a process indicator when the action is likely to complete by the end of a short delay.
+⬥ Use case: avoiding flashing a process indicator when the action is likely to complete by the end of a short delay.
 
 ## Custom rejection handler
 
@@ -108,7 +108,7 @@ Omit the custom string key parameter of `usePendingState()` to scope the pending
 + withState(fetchItems(), { throws: true }).catch(handleError)
 ```
 
-🔹 This option allows the async action to reject explicitly, along with exposing `state.error` that goes by default.
+⬥ This option allows the async action to reject explicitly, along with exposing `state.error` that goes by default.
 
 ## Providing blank initial pending&nbsp;state
 
@@ -121,7 +121,7 @@ Omit the custom string key parameter of `usePendingState()` to scope the pending
 + </PendingStateProvider>
 ```
 
-🔹 `<PendingStateProvider>` creates an isolated instance of initial shared action state. Prime use cases are SSR and tests. It isn't required with client-side rendering, but it can be used to separate action states of larger self-contained portions of a web app.
+⬥ `<PendingStateProvider>` creates an isolated instance of initial shared action state. Its prime use cases are SSR and tests. It isn't required with client-side rendering, but it can be used to separate action states of larger self-contained portions of an app.
 
 ## Providing custom initial pending&nbsp;state
 
@@ -136,6 +136,6 @@ Omit the custom string key parameter of `usePendingState()` to scope the pending
   </PendingStateProvider>
 ```
 
-🔹 While fully optional, this setup allows to override the initial state received from `usePendingState(stateKey)`.
+⬥ While fully optional, this setup allows to redefine the initial state received from `usePendingState(stateKey)`.
 
-🔹 With an explicit value or without, the `<PendingStateProvider>`'s nested components will only respond to updates in the particular action states they subscribed to by means of `usePendingState(stateKey)`.
+⬥ With an explicit value or without, the `<PendingStateProvider>`'s nested components will only respond to updates in the particular action states they subscribed to by means of `usePendingState(stateKey)`.

package/dist/index.cjs

@@ -37,8 +37,8 @@ function createState(initialized = false, complete = false, error) {
 * - `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.
+* - `setState(update)` can be used to replace the current `state` value
+* directly with an another state value.
 */
 function usePendingState(store) {
   let storeMap = (0, react.useContext)(PendingStateContext);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react0 from "react";
 import { ReactNode } from "react";
-import { SetStoreState, Store } from "@t8/react-store";
+import { SetStoreValue, Store } from "@t8/react-store";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 type PendingState = {
@@ -55,9 +55,9 @@ type WithStateOptions = {
  * - `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.
+ * - `setState(update)` can be used to replace the current `state` value
+ * directly with an another state value.
  */
-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, SetStoreValue<PendingState>];
 
 export { PendingState, PendingStateContext, PendingStateProvider, PendingStateProviderProps, WithStateOptions, usePendingState };

package/dist/index.mjs

@@ -37,8 +37,8 @@ function createState(initialized = false, complete = false, error) {
 * - `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.
+* - `setState(update)` can be used to replace the current `state` value
+* directly with an another state value.
 */
 function usePendingState(store) {
   let storeMap = useContext(PendingStateContext);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@t8/react-pending",
-  "version": "1.0.30",
-  "description": "Concise async action state tracking for React apps",
+  "version": "1.0.32",
+  "description": "A concise async action state management lib for React apps",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "demo": "npx @t8/serve 3000 * tests/async_status -b src/index.tsx",
+    "demo": "npx @t8/serve tests/async_status --spa -b src/index.tsx",
     "preversion": "npx npm-run-all shape test",
     "shape": "npx codeshape",
     "test": "npx playwright test --project=chromium"
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.56.0",
-    "@t8/serve": "^0.1.38",
+    "@t8/serve": "^0.2.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "react-dom": "^19.2.1"
+    "react-dom": "^19.2.3"
   },
   "dependencies": {
-    "@t8/react-store": "^1.2.6"
+    "@t8/react-store": "^1.2.7"
   }
 }

package/src/usePendingState.ts

@@ -1,4 +1,4 @@
-import { isStore, type SetStoreState, Store, useStore } from "@t8/react-store";
+import { isStore, type SetStoreValue, Store, useStore } from "@t8/react-store";
 import { useCallback, useContext, useMemo, useRef, useState } from "react";
 import type { PendingState } from "./PendingState.ts";
 import { PendingStateContext } from "./PendingStateContext.ts";
@@ -51,12 +51,12 @@ export type WithStateOptions = {
  * - `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.
+ * - `setState(update)` can be used to replace the current `state` value
+ * directly with an another state value.
  */
 export function usePendingState(
   store?: string | Store<PendingState> | null,
-): [PendingState, <T>(value: T) => T, SetStoreState<PendingState>] {
+): [PendingState, <T>(value: T) => T, SetStoreValue<PendingState>] {
   let storeMap = useContext(PendingStateContext);
   let storeRef = useRef<Store<PendingState> | null>(null);
   let [storeItemInited, setStoreItemInited] = useState(false);