@t8/react-store 0.1.0

package/dist/index.js

@@ -0,0 +1,62 @@
+// 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/Store.ts
+var Store = class {
+  state;
+  callbacks;
+  constructor(data) {
+    this.state = data;
+    this.callbacks = [];
+  }
+  onUpdate(callback) {
+    this.callbacks.push(callback);
+    return () => {
+      for (let i = this.callbacks.length - 1; i >= 0; i--) {
+        if (this.callbacks[i] === callback) this.callbacks.splice(i, 1);
+      }
+    };
+  }
+  getState() {
+    return this.state;
+  }
+  setState(update) {
+    let prevState = this.state;
+    let nextState = update instanceof Function ? update(this.state) : update;
+    this.state = nextState;
+    for (let callback of this.callbacks) callback(nextState, prevState);
+  }
+};
+
+// 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 initedRef = useRef(false);
+  let state = store.getState();
+  let setState = useMemo(() => store.setState.bind(store), [store]);
+  useEffect(() => {
+    if (!shouldUpdate) return;
+    let unsubscribe = store.onUpdate((nextState, prevState) => {
+      if (typeof shouldUpdate !== "function" || shouldUpdate(nextState, prevState))
+        setRevision(Math.random());
+    });
+    if (!initedRef.current) {
+      initedRef.current = true;
+      setRevision(Math.random());
+    }
+    return () => {
+      unsubscribe();
+      initedRef.current = false;
+    };
+  }, [store, shouldUpdate]);
+  return [state, setState];
+}
+export {
+  Store,
+  isStore,
+  useStore
+};

package/index.ts

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

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@t8/react-store",
+  "version": "0.1.0",
+  "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",
+    "prepublishOnly": "npm run build",
+    "preversion": "npx npm-run-all shape build",
+    "shape": "npx codeshape"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t8dev/react-store.git"
+  },
+  "keywords": [
+    "react",
+    "shared state",
+    "store"
+  ],
+  "author": "axtk",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "dependencies": {
+    "@t8/store": "^0.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.10"
+  }
+}

package/src/useStore.ts

@@ -0,0 +1,60 @@
+import {isStore, type Store} from '@t8/store';
+import {useEffect, useMemo, useRef, useState} from 'react';
+
+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,
+): [T, SetStoreState<T>] {
+    if (!isStore(store)) throw new Error("'store' is not an instance of Store");
+
+    let [, setRevision] = useState(-1);
+    let initedRef = useRef(false);
+
+    let state = store.getState();
+    let setState = useMemo(() => store.setState.bind(store), [store]);
+
+    useEffect(() => {
+        if (!shouldUpdate) return;
+
+        let unsubscribe = store.onUpdate((nextState, prevState) => {
+            if (
+                typeof shouldUpdate !== 'function' ||
+                shouldUpdate(nextState, prevState)
+            )
+                setRevision(Math.random());
+        });
+
+        if (!initedRef.current) {
+            initedRef.current = true;
+            setRevision(Math.random());
+        }
+
+        return () => {
+            unsubscribe();
+            initedRef.current = false;
+        };
+    }, [store, shouldUpdate]);
+
+    return [state, setState];
+}

package/tsconfig.json

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