@t8/react-store 1.0.12 → 1.0.14

package/README.md

@@ -16,34 +16,34 @@ Installation: `npm i @t8/react-store`
 Moving the local state to the full-fledged shared state:
 
 ```diff
-  import {createContext, useContext} from 'react';
-+ import {Store, useStore} from '@t8/react-store';
+  import { createContext, useContext } from "react";
++ import { Store, useStore } from "@t8/react-store";
 +
 + let AppContext = createContext(new Store(0));
 
   let Counter = () => {
--     let [counter, setCounter] = useState(0);
-+     let [counter, setCounter] = useStore(useContext(AppContext));
+-   let [counter, setCounter] = useState(0);
++   let [counter, setCounter] = useStore(useContext(AppContext));
 
-      let handleClick = () => {
-          setCounter(value => value + 1);
-      };
+    let handleClick = () => {
+      setCounter(value => value + 1);
+    };
 
-      return <button onClick={handleClick}>{counter}</button>;
+    return <button onClick={handleClick}>{counter}</button>;
   };
 
   let ResetButton = () => {
--     let [, setCounter] = useState(0);
-+     let [, setCounter] = useStore(useContext(AppContext), false);
+-   let [, setCounter] = useState(0);
++   let [, setCounter] = useStore(useContext(AppContext), false);
 
-      let handleClick = () => {
-          setCounter(0);
-      };
+    let handleClick = () => {
+      setCounter(0);
+    };
 
-      return <button onClick={handleClick}>×</button>;
+    return <button onClick={handleClick}>×</button>;
   };
 
-  let App = () => <><Counter/>{' '}<ResetButton/></>;
+  let App = () => <><Counter/>{" "}<ResetButton/></>;
 ```
 
 [Live demo](https://codesandbox.io/p/sandbox/rtng37?file=%2Fsrc%2FPlusButton.jsx)
@@ -56,27 +56,27 @@ Moving the local state to the full-fledged shared state:
 
 ```js
 let AppContext = createContext({
-    users: new Store(/* ... */),
-    items: new Store(/* ... */),
+  users: new Store(/* ... */),
+  items: new Store(/* ... */),
 });
 ```
 
 🔹 Apart from a boolean, `useStore(store, shouldUpdate)` can take a function of `(nextState, prevState) => boolean` as the second parameter to filter store updates to respond to:
 
 ```jsx
-let ItemCard = ({id}) => {
-    let hasRelevantUpdates = useCallback((nextItems, prevItems) => {
-        return nextItems[id].revision !== prevItems[id].revision;
-    }, [id]);
-
-    let [items, setItems] = useStore(
-        useContext(AppContext).items,
-        hasRelevantUpdates,
-    );
-
-    return (
-        // content
-    );
+let ItemCard = ({ id }) => {
+  let hasRelevantUpdates = useCallback((nextItems, prevItems) => {
+    return nextItems[id].revision !== prevItems[id].revision;
+  }, [id]);
+
+  let [items, setItems] = useStore(
+    useContext(AppContext).items,
+    hasRelevantUpdates,
+  );
+
+  return (
+    // content
+  );
 };
 ```
 
@@ -84,10 +84,10 @@ let ItemCard = ({id}) => {
 
 ```diff
   let App = () => (
--     <AppContext.Provider value={42}>
-+     <AppContext.Provider value={new Store(42)}>
-          <PlusButton/>{' '}<Display/>
-      </AppContext.Provider>
+-   <AppContext.Provider value={42}>
++   <AppContext.Provider value={new Store(42)}>
+      <PlusButton/>{" "}<Display/>
+    </AppContext.Provider>
   );
 ```
 

package/index.ts

@@ -1,2 +1,2 @@
-export * from '@t8/store';
-export * from './src/useStore';
+export * from "@t8/store";
+export * from "./src/useStore";

package/package.json

@@ -1,39 +1,49 @@
-{
-  "name": "@t8/react-store",
-  "version": "1.0.12",
-  "description": "Straightforward and minimalist shared state management for React apps",
-  "main": "dist/index.js",
-  "type": "module",
-  "scripts": {
-    "build": "npx npm-run-all clean compile",
-    "clean": "node -e \"require('node:fs').rmSync('dist', {force: true, recursive: true});\"",
-    "compile": "npx esbuild index.ts --bundle --outdir=dist --platform=neutral --external:react",
-    "gh-pages": "npx ghstage --theme=t8 --ymid=103784239 --nav=https://raw.githubusercontent.com/t8js/t8js.github.io/refs/heads/main/assets/nav.html",
-    "prepublishOnly": "npx npm-run-all build gh-pages",
-    "preversion": "npx npm-run-all typecheck shape build",
-    "shape": "npx codeshape",
-    "typecheck": "tsc --noEmit"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/t8js/react-store.git"
-  },
-  "homepage": "https://t8.js.org/react-store",
-  "keywords": [
-    "react",
-    "shared state",
-    "store"
-  ],
-  "author": "axtk",
-  "license": "ISC",
-  "peerDependencies": {
-    "react": ">=16.8"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.10",
-    "typescript": "^5.9.2"
-  },
-  "dependencies": {
-    "@t8/store": "^1.1.2"
-  }
-}
+{
+  "name": "@t8/react-store",
+  "version": "1.0.14",
+  "description": "Straightforward and minimalist shared state management for React apps",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "npx npm-run-all clean compile",
+    "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/counter -b src/index.tsx",
+    "gh-pages": "npx ghstage --theme=t8 --ymid=103784239 --nav=https://raw.githubusercontent.com/t8js/t8js.github.io/refs/heads/main/assets/nav.html",
+    "prepublishOnly": "npx npm-run-all build gh-pages",
+    "preversion": "npx npm-run-all typecheck shape build test",
+    "shape": "npx codeshape",
+    "test": "npx playwright test --project=chromium",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t8js/react-store.git"
+  },
+  "homepage": "https://t8.js.org/react-store",
+  "keywords": [
+    "react",
+    "state management",
+    "shared state",
+    "global state",
+    "store"
+  ],
+  "author": "axtk",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.55.1",
+    "@t8/serve": "^0.1.19",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.9",
+    "immer": "^10.1.3",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "@t8/store": "^1.1.3"
+  }
+}

package/src/useStore.ts

@@ -1,66 +1,66 @@
-import {isStore, type Store} from '@t8/store';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import { isStore, type Store } from "@t8/store";
+import { useEffect, useMemo, useRef, useState } from "react";
 
-export type SetStoreState<T> = Store<T>['setState'];
+export type SetStoreState<T> = Store<T>["setState"];
 export type ShouldUpdateCallback<T> = (nextState: T, prevState: T) => boolean;
 export type ShouldUpdate<T> = boolean | ShouldUpdateCallback<T>;
 
 export function useStore<T>(
-    store: Store<T>,
-    /**
-     * Controls whether the component should be updated in response
-     * to the store updates.
-     *
-     * @defaultValue `true`
-     *
-     * Can be set to `false` when the component only requires the
-     * store state setter but not the state value itself, and so the
-     * component doesn't need to respond to updates in the store state.
-     *
-     * ```ts
-     * let [, setValue] = useStore(store, false);
-     * ```
-     *
-     * Can be set to a function `(nextState, prevState) => boolean` to
-     * make the component respond only to specific store state changes.
-     */
-    shouldUpdate: ShouldUpdate<T> = true,
+  store: Store<T>,
+  /**
+   * Controls whether the component should be updated in response
+   * to the store updates.
+   *
+   * @defaultValue `true`
+   *
+   * Can be set to `false` when the component only requires the
+   * store state setter but not the state value itself, and so the
+   * component doesn't need to respond to updates in the store state.
+   *
+   * ```ts
+   * let [, setValue] = useStore(store, false);
+   * ```
+   *
+   * Can be set to a function `(nextState, prevState) => boolean` to
+   * make the component respond only to specific store state changes.
+   */
+  shouldUpdate: ShouldUpdate<T> = true,
 ): [T, SetStoreState<T>] {
-    if (!isStore(store)) throw new Error("'store' is not an instance of Store");
+  if (!isStore(store)) throw new Error("'store' is not an instance of Store");
 
-    let [, setRevision] = useState(-1);
-    let initedRef = useRef(false);
+  let [, setRevision] = useState(-1);
+  let initedRef = useRef(false);
 
-    let state = store.getState();
-    let setState = useMemo(() => store.setState.bind(store), [store]);
-    let initialStoreRevision = useRef(store.revision);
+  let state = store.getState();
+  let setState = useMemo(() => store.setState.bind(store), [store]);
+  let initialStoreRevision = useRef(store.revision);
 
-    useEffect(() => {
-        if (!shouldUpdate) return;
+  useEffect(() => {
+    if (!shouldUpdate) return;
 
-        let unsubscribe = store.onUpdate((nextState, prevState) => {
-            if (
-                typeof shouldUpdate !== 'function' ||
-                shouldUpdate(nextState, prevState)
-            )
-                setRevision(Math.random());
-        });
+    let unsubscribe = store.onUpdate((nextState, prevState) => {
+      if (
+        typeof shouldUpdate !== "function" ||
+        shouldUpdate(nextState, prevState)
+      )
+        setRevision(Math.random());
+    });
 
-        // Trigger a rerender if the store state changed after the component
-        // last read it and before the component subscribed to its changes.
-        if (!initedRef.current) {
-            initedRef.current = true;
+    // Trigger a rerender if the store state changed after the component
+    // last read it and before the component subscribed to its changes.
+    if (!initedRef.current) {
+      initedRef.current = true;
 
-            if (store.revision !== initialStoreRevision.current)
-                setRevision(Math.random());
-        }
+      if (store.revision !== initialStoreRevision.current)
+        setRevision(Math.random());
+    }
 
-        return () => {
-            unsubscribe();
-            initedRef.current = false;
-            initialStoreRevision.current = store.revision;
-        };
-    }, [store, shouldUpdate]);
+    return () => {
+      unsubscribe();
+      initedRef.current = false;
+      initialStoreRevision.current = store.revision;
+    };
+  }, [store, shouldUpdate]);
 
-    return [state, setState];
+  return [state, setState];
 }

package/tsconfig.json

@@ -1,12 +1,13 @@
-{
-    "include": ["index.ts", "src/**/*"],
-    "compilerOptions": {
-        "lib": ["ESNext", "DOM"],
-        "target": "ESNext",
-        "outDir": "dist",
-        "moduleResolution": "node",
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true
-    }
-}
+{
+  "include": ["index.ts", "playwright.config.ts", "src", "tests"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
+}