@t8/react-store 1.2.4 → 1.2.5

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,8 +1,9 @@
-import type { Store } from "@t8/store";
+import { Store } from "@t8/store";
+export * 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>;
+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.
@@ -30,10 +31,6 @@ export type ShouldUpdate<T> = boolean | ShouldUpdateCallback<T>;
  * 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>
-];
-export * from "@t8/store";
+declare function useStore<T>(store: Store<T>, shouldUpdate?: ShouldUpdate<T>): [T, SetStoreState<T>];
 
-export {};
+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,16 +1,15 @@
 {
   "name": "@t8/react-store",
-  "version": "1.2.4",
+  "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": {
-    "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",
-    "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",
     "tic-tac-toe": "npx @t8/serve 3000 * tests/tic-tac-toe -b src/index.tsx"
   },
@@ -33,7 +32,7 @@
   },
   "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",
@@ -41,6 +40,6 @@
     "react-dom": "^19.2.1"
   },
   "dependencies": {
-    "@t8/store": "^1.3.5"
+    "@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/tsconfig.build.json

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