@t8/react-store 1.2.3 → 1.2.5

package/README.md

@@ -4,7 +4,7 @@
 
 [![npm](https://img.shields.io/npm/v/@t8/react-store?labelColor=345&color=46e)](https://www.npmjs.com/package/@t8/react-store) ![Lightweight](https://img.shields.io/bundlephobia/minzip/@t8/react-store?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)
 
-**Why?** To have an easy-to-use state management lib for React apps requiring least effort to migrate from local state and to quickly set up shared state from scratch, whether with SSR or without. Other approaches, including Redux Toolkit, Zustand, Jotai, MobX, invariably depart from this picture to varying degrees.
+**Why?** To have an easy-to-use state management lib for React apps requiring least effort to migrate from local state and to quickly set up shared state from scratch, whether with SSR or without. Other approaches, like Redux Toolkit, Zustand, Jotai, MobX, depart from this picture to varying degrees.
 
 This picture is achieved here by (1) having a simple API introducing as few new entities as possible, (2) closely following the React's `useState()` pattern of initializing and manipulating the state to avoid boilerplate and sizable rewrites in the common task of migration from local state to shared state, (3) working smoothly with SSR with regular React Contexts without requiring a specifically designed setup and without internally making use of global stores or other global variables by default.
 

package/dist/index.cjs

@@ -0,0 +1,60 @@
+let __t8_store = require("@t8/store");
+let react = require("react");
+
+//#region src/useStore.ts
+/**
+* Returns the state value of `store` passed as the parameter and
+* a function to update the store state value.
+*
+* @example
+* ```js
+* let [value, setValue] = useStore(store);
+* ```
+*
+* The optional second parameter `shouldUpdate` controls whether
+* the component using this hook should be updated in response to
+* the store updates, which is set to `true` by default.
+*
+* `shouldUpdate` can be set to `false` to prevent subscription
+* to the store updates. Use case: if the component only requires
+* the store state setter but not the store state value, the
+* component may not need to respond to the store updates at all:
+*
+* @example
+* ```js
+* let [, setValue] = useStore(store, false);
+* ```
+*
+* `shouldUpdate` can also be a function `(nextState, prevState) => boolean`
+* to make the component respond only to specific store state changes,
+* when this function returns `true`.
+*/
+function useStore(store, shouldUpdate = true) {
+	if (!(0, __t8_store.isStore)(store)) throw new Error("'store' is not an instance of Store");
+	let [, setRevision] = (0, react.useState)(-1);
+	let state = store.getState();
+	let setState = (0, react.useMemo)(() => store.setState.bind(store), [store]);
+	let initialStoreRevision = (0, react.useRef)(store.revision);
+	(0, react.useEffect)(() => {
+		if ((0, __t8_store.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];
+}
+
+//#endregion
+exports.useStore = useStore;
+Object.keys(__t8_store).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __t8_store[k]; }
+  });
+});

package/dist/index.d.ts

@@ -1,2 +1,36 @@
+import { Store } from "@t8/store";
 export * from "@t8/store";
-export * from "./src/useStore.ts";
+
+type SetStoreState<T> = Store<T>["setState"];
+type ShouldUpdateCallback<T> = (nextState: T, prevState: T) => boolean;
+type ShouldUpdate<T> = boolean | ShouldUpdateCallback<T>;
+/**
+ * Returns the state value of `store` passed as the parameter and
+ * a function to update the store state value.
+ *
+ * @example
+ * ```js
+ * let [value, setValue] = useStore(store);
+ * ```
+ *
+ * The optional second parameter `shouldUpdate` controls whether
+ * the component using this hook should be updated in response to
+ * the store updates, which is set to `true` by default.
+ *
+ * `shouldUpdate` can be set to `false` to prevent subscription
+ * to the store updates. Use case: if the component only requires
+ * the store state setter but not the store state value, the
+ * component may not need to respond to the store updates at all:
+ *
+ * @example
+ * ```js
+ * let [, setValue] = useStore(store, false);
+ * ```
+ *
+ * `shouldUpdate` can also be a function `(nextState, prevState) => boolean`
+ * to make the component respond only to specific store state changes,
+ * when this function returns `true`.
+ */
+declare function useStore<T>(store: Store<T>, shouldUpdate?: ShouldUpdate<T>): [T, SetStoreState<T>];
+
+export { SetStoreState, ShouldUpdate, ShouldUpdateCallback, useStore };

package/dist/index.mjs

@@ -0,0 +1,56 @@
+import { isPersistentStore, isStore } from "@t8/store";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export * from "@t8/store"
+
+//#region src/useStore.ts
+/**
+* Returns the state value of `store` passed as the parameter and
+* a function to update the store state value.
+*
+* @example
+* ```js
+* let [value, setValue] = useStore(store);
+* ```
+*
+* The optional second parameter `shouldUpdate` controls whether
+* the component using this hook should be updated in response to
+* the store updates, which is set to `true` by default.
+*
+* `shouldUpdate` can be set to `false` to prevent subscription
+* to the store updates. Use case: if the component only requires
+* the store state setter but not the store state value, the
+* component may not need to respond to the store updates at all:
+*
+* @example
+* ```js
+* let [, setValue] = useStore(store, false);
+* ```
+*
+* `shouldUpdate` can also be a function `(nextState, prevState) => boolean`
+* to make the component respond only to specific store state changes,
+* when this function returns `true`.
+*/
+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];
+}
+
+//#endregion
+export { useStore };

package/package.json

@@ -1,21 +1,17 @@
 {
   "name": "@t8/react-store",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Small React app state management lib aligned with React's state pattern, condensed to the essentials",
-  "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": {
-    "build": "npx npm-run-all clean compile types",
-    "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",
-    "prepublishOnly": "npm run build",
-    "preversion": "npx npm-run-all shape build test",
-    "shape": "npx codeshape --typecheck",
+    "preversion": "npx npm-run-all shape test",
+    "shape": "npx codeshape",
     "test": "npx playwright test --project=chromium",
-    "tic-tac-toe": "npx @t8/serve 3000 * tests/tic-tac-toe -b src/index.tsx",
-    "types": "tsc -p tsconfig.build.json"
+    "tic-tac-toe": "npx @t8/serve 3000 * tests/tic-tac-toe -b src/index.tsx"
   },
   "repository": {
     "type": "git",
@@ -36,15 +32,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.56.0",
-    "@t8/serve": "^0.1.36",
+    "@t8/serve": "^0.1.37",
     "@types/node": "^24.5.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "immer": "^11.0.1",
-    "react-dom": "^19.2.1",
-    "typescript": "^5.9.3"
+    "react-dom": "^19.2.1"
   },
   "dependencies": {
-    "@t8/store": "^1.3.3"
+    "@t8/store": "^1.3.7"
   }
 }

package/dist/index.js

@@ -1,152 +0,0 @@
-// 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/store/src/PersistentStore.ts
-function getStorage(session = false) {
-  if (typeof window === "undefined") return;
-  return session ? sessionStorage : localStorage;
-}
-var PersistentStore = class extends Store {
-  storageKey;
-  options;
-  synced = false;
-  /**
-   * Creates an instance of the container for data persistent across page
-   * reloads.
-   *
-   * The store data is saved to and restored from the given `storageKey`
-   * either of `localStorage` (by default) or `sessionStorage` (if `options.session`
-   * is set to `true`). Interaction with the browser storage is skipped in
-   * non-browser environments.
-   *
-   * @example
-   * ```js
-   * let counterStore = new PersistentStore(0, "counter");
-   * ```
-   *
-   * The way data gets saved to and restored from a browser storage entry
-   * (including filtering out certain data or otherwise rearranging the
-   * saved data) can be overridden by setting `options.serialize` and
-   * `options.deserialize`. By default, they are `JSON.stringify()` and
-   * `JSON.parse()`.
-   */
-  constructor(data, storageKey, options) {
-    super(data);
-    this.storageKey = storageKey;
-    this.options = {
-      session: false,
-      serialize: (data2) => JSON.stringify(data2),
-      deserialize: (content) => JSON.parse(content),
-      ...options
-    };
-    this.onUpdate(() => {
-      if (this.synced) this.save();
-    });
-  }
-  /**
-   * Saves the store state value to the browser storage.
-   */
-  save() {
-    let storage = getStorage(this.options?.session);
-    let serialize = this.options?.serialize;
-    if (this.synced && storage && typeof serialize === "function") {
-      try {
-        storage.setItem(this.storageKey, serialize(this.state));
-      } catch {
-      }
-    }
-  }
-  /**
-   * Signals the store to read the state value from the browser storage.
-   */
-  sync() {
-    let storage = getStorage(this.options?.session);
-    let deserialize = this.options?.deserialize;
-    let serializedState = null;
-    if (storage && typeof deserialize === "function") {
-      try {
-        serializedState = storage.getItem(this.storageKey);
-        if (serializedState !== null)
-          this.setState(deserialize(serializedState, this.state));
-      } catch {
-      }
-    }
-    if (!this.synced) {
-      this.synced = true;
-      if (serializedState === null) this.save();
-    }
-  }
-  /**
-   * Signals the store to read the state value from the browser storage once,
-   * disregarding subsequest `syncOnce()` calls.
-   */
-  syncOnce() {
-    if (!this.synced) this.sync();
-  }
-};
-
-// 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];
-}
-export {
-  PersistentStore,
-  Store,
-  isPersistentStore,
-  isStore,
-  useStore
-};

package/dist/src/useStore.d.ts

@@ -1,32 +0,0 @@
-import { type Store } from "@t8/store";
-export type SetStoreState<T> = Store<T>["setState"];
-export type ShouldUpdateCallback<T> = (nextState: T, prevState: T) => boolean;
-export type ShouldUpdate<T> = boolean | ShouldUpdateCallback<T>;
-/**
- * Returns the state value of `store` passed as the parameter and
- * a function to update the store state value.
- *
- * @example
- * ```js
- * let [value, setValue] = useStore(store);
- * ```
- *
- * The optional second parameter `shouldUpdate` controls whether
- * the component using this hook should be updated in response to
- * the store updates, which is set to `true` by default.
- *
- * `shouldUpdate` can be set to `false` to prevent subscription
- * to the store updates. Use case: if the component only requires
- * the store state setter but not the store state value, the
- * component may not need to respond to the store updates at all:
- *
- * @example
- * ```js
- * let [, setValue] = useStore(store, false);
- * ```
- *
- * `shouldUpdate` can also be a function `(nextState, prevState) => boolean`
- * to make the component respond only to specific store state changes,
- * when this function returns `true`.
- */
-export declare function useStore<T>(store: Store<T>, shouldUpdate?: ShouldUpdate<T>): [T, SetStoreState<T>];

package/tsconfig.build.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["./index.ts", "./src"]
-}