@apogeelabs/beacon-react-utils 0.3.2 → 1.1.0

package/dist/index.cjs

@@ -0,0 +1,96 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let lodash = require("lodash");
+lodash = __toESM(lodash);
+let mobx = require("mobx");
+let react = require("react");
+
+//#region src/useStoreWatcher.ts
+/**
+* A custom React hook to watch for state changes in a beacon store.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.
+* @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.
+* @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.
+*/
+function useStoreWatcher(store, selector, onChange, fireImmediately = false) {
+	const stableSelector = (0, react.useEffectEvent)(selector);
+	const stableOnChange = (0, react.useEffectEvent)(onChange);
+	(0, react.useEffect)(() => {
+		const disposer = (0, mobx.reaction)(() => {
+			return (0, mobx.toJS)(stableSelector(store));
+		}, (value, previousValue) => {
+			if (!previousValue || !lodash.default.isEqual(value, previousValue)) stableOnChange(value);
+		}, { fireImmediately });
+		store.registerCleanup(() => {
+			disposer();
+		});
+		return () => {
+			disposer();
+		};
+	}, [store, fireImmediately]);
+}
+
+//#endregion
+//#region src/useStoreState.ts
+/**
+* A React hook that subscribes to a Beacon store and returns a selected value as React state.
+*
+* Use this hook when you need a store value to participate in React's state lifecycle —
+* for example, to drive React Query parameters, to pass into hooks that don't understand
+* MobX observables, or to feed non-observer child components.
+*
+* For normal component rendering, prefer wrapping your component with `observer` from
+* `mobx-react-lite` and reading store values directly. That's simpler and more performant.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the value to track.
+* @returns {T} The current value of the selected store slice, kept in sync via MobX reaction.
+*/
+function useStoreState(store, selector) {
+	const [value, setValue] = (0, react.useState)(() => (0, mobx.toJS)(selector(store)));
+	useStoreWatcher(store, selector, setValue);
+	return value;
+}
+
+//#endregion
+exports.useStoreState = useStoreState;
+exports.useStoreWatcher = useStoreWatcher;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["_"],"sources":["../src/useStoreWatcher.ts","../src/useStoreState.ts"],"sourcesContent":["import type { BeaconActions, BeaconDerived, BeaconState, Store } from \"@apogeelabs/beacon\";\nimport _ from \"lodash\";\nimport { reaction, toJS } from \"mobx\";\nimport { useEffect, useEffectEvent } from \"react\";\n\n/**\n * A custom React hook to watch for state changes in a beacon store.\n *\n * @template TState - The type of the store's state, extending BeaconState.\n * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.\n * @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.\n * @template T - The type returned by the selector function, inferred from the selector.\n *\n * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.\n * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.\n * @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.\n * @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.\n */\nexport function useStoreWatcher<\n    TState extends BeaconState,\n    TDerived extends BeaconDerived<TState>,\n    TActions extends BeaconActions<TState>,\n    T,\n>(\n    store: Store<TState, TDerived, TActions>,\n    selector: (store: Store<TState, TDerived, TActions>) => T,\n    onChange: (value: T) => void,\n    fireImmediately: boolean = false\n): void {\n    // Use useEffectEvent to wrap callbacks so they don't need to be in the dependency array\n    // This prevents unnecessary re-runs when consumers pass inline functions\n    const stableSelector = useEffectEvent(selector);\n    const stableOnChange = useEffectEvent(onChange);\n\n    useEffect(() => {\n        const disposer = reaction(\n            () => {\n                // toJS strips MobX observable wrappers so React sees plain values\n                return toJS(stableSelector(store));\n            },\n            (value, previousValue) => {\n                // MobX selectors can return new object references even when the underlying\n                // data hasn't changed. Deep comparison prevents spurious re-renders.\n                if (!previousValue || !_.isEqual(value, previousValue)) {\n                    stableOnChange(value);\n                }\n            },\n            { fireImmediately }\n        );\n\n        // If the store is disposed externally, clean up the reaction too\n        store.registerCleanup(() => {\n            disposer();\n        });\n\n        return () => {\n            disposer();\n        };\n        // stableSelector and stableOnChange are omitted from deps intentionally —\n        // useEffectEvent keeps them stable across renders without needing to re-run the effect\n    }, [store, fireImmediately]);\n}\n\nexport default useStoreWatcher;\n","import type { BeaconActions, BeaconDerived, BeaconState, Store } from \"@apogeelabs/beacon\";\nimport { toJS } from \"mobx\";\nimport { useState } from \"react\";\nimport { useStoreWatcher } from \"./useStoreWatcher\";\n\n/**\n * A React hook that subscribes to a Beacon store and returns a selected value as React state.\n *\n * Use this hook when you need a store value to participate in React's state lifecycle —\n * for example, to drive React Query parameters, to pass into hooks that don't understand\n * MobX observables, or to feed non-observer child components.\n *\n * For normal component rendering, prefer wrapping your component with `observer` from\n * `mobx-react-lite` and reading store values directly. That's simpler and more performant.\n *\n * @template TState - The type of the store's state, extending BeaconState.\n * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>.\n * @template TActions - The type of the store's actions, extending BeaconActions<TState>.\n * @template T - The type returned by the selector function, inferred from the selector.\n *\n * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.\n * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the value to track.\n * @returns {T} The current value of the selected store slice, kept in sync via MobX reaction.\n */\nexport function useStoreState<\n    TState extends BeaconState,\n    TDerived extends BeaconDerived<TState>,\n    TActions extends BeaconActions<TState>,\n    T,\n>(\n    store: Store<TState, TDerived, TActions>,\n    selector: (store: Store<TState, TDerived, TActions>) => T,\n): T {\n    // Initializer function so the selector only runs once on mount, not on every render\n    const [value, setValue] = useState<T>(() => toJS(selector(store)));\n\n    // Wires MobX reactivity to React state — store changes call setValue, triggering a re-render\n    useStoreWatcher(store, selector, setValue);\n\n    return value;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,gBAMZ,OACA,UACA,UACA,kBAA2B,OACvB;CAGJ,MAAM,2CAAgC,SAAS;CAC/C,MAAM,2CAAgC,SAAS;AAE/C,4BAAgB;EACZ,MAAM,oCACI;AAEF,yBAAY,eAAe,MAAM,CAAC;MAErC,OAAO,kBAAkB;AAGtB,OAAI,CAAC,iBAAiB,CAACA,eAAE,QAAQ,OAAO,cAAc,CAClD,gBAAe,MAAM;KAG7B,EAAE,iBAAiB,CACtB;AAGD,QAAM,sBAAsB;AACxB,aAAU;IACZ;AAEF,eAAa;AACT,aAAU;;IAIf,CAAC,OAAO,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACpChC,SAAgB,cAMZ,OACA,UACC;CAED,MAAM,CAAC,OAAO,qDAAmC,SAAS,MAAM,CAAC,CAAC;AAGlE,iBAAgB,OAAO,UAAU,SAAS;AAE1C,QAAO"}

package/dist/index.d.cts

@@ -0,0 +1,42 @@
+import { BeaconActions, BeaconDerived, BeaconState, Store } from "@apogeelabs/beacon";
+
+//#region src/useStoreWatcher.d.ts
+/**
+* A custom React hook to watch for state changes in a beacon store.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.
+* @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.
+* @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.
+*/
+declare function useStoreWatcher<TState extends BeaconState, TDerived extends BeaconDerived<TState>, TActions extends BeaconActions<TState>, T>(store: Store<TState, TDerived, TActions>, selector: (store: Store<TState, TDerived, TActions>) => T, onChange: (value: T) => void, fireImmediately?: boolean): void;
+//#endregion
+//#region src/useStoreState.d.ts
+/**
+* A React hook that subscribes to a Beacon store and returns a selected value as React state.
+*
+* Use this hook when you need a store value to participate in React's state lifecycle —
+* for example, to drive React Query parameters, to pass into hooks that don't understand
+* MobX observables, or to feed non-observer child components.
+*
+* For normal component rendering, prefer wrapping your component with `observer` from
+* `mobx-react-lite` and reading store values directly. That's simpler and more performant.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the value to track.
+* @returns {T} The current value of the selected store slice, kept in sync via MobX reaction.
+*/
+declare function useStoreState<TState extends BeaconState, TDerived extends BeaconDerived<TState>, TActions extends BeaconActions<TState>, T>(store: Store<TState, TDerived, TActions>, selector: (store: Store<TState, TDerived, TActions>) => T): T;
+//#endregion
+export { useStoreState, useStoreWatcher };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/useStoreWatcher.ts","../src/useStoreState.ts"],"mappings":";;;;;AAkBA;;;;;;;;;;;iBAAgB,eAAA,gBACG,WAAA,mBACE,aAAA,CAAc,MAAA,oBACd,aAAA,CAAc,MAAA,KAAA,CAG/B,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,GAC/B,QAAA,GAAW,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,MAAc,CAAA,EACxD,QAAA,GAAW,KAAA,EAAO,CAAA,WAClB,eAAA;;;;;AATJ;;;;;;;;;;;;;;;;;iBCMgB,aAAA,gBACG,WAAA,mBACE,aAAA,CAAc,MAAA,oBACd,aAAA,CAAc,MAAA,KAAA,CAG/B,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,GAC/B,QAAA,GAAW,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,MAAc,CAAA,GACzD,CAAA"}

package/dist/index.d.mts

@@ -1,18 +1,42 @@
-import { BeaconState, BeaconDerived, BeaconActions, Store } from '@apogeelabs/beacon';
+import { BeaconActions, BeaconDerived, BeaconState, Store } from "@apogeelabs/beacon";
 
+//#region src/useStoreWatcher.d.ts
 /**
- * A custom React hook to watch for state changes in a beacon store.
- *
- * @template TState - The type of the store's state, extending BeaconState.
- * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.
- * @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.
- * @template T - The type returned by the selector function, inferred from the selector.
- *
- * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
- * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.
- * @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.
- * @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.
- */
+* A custom React hook to watch for state changes in a beacon store.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.
+* @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.
+* @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.
+*/
 declare function useStoreWatcher<TState extends BeaconState, TDerived extends BeaconDerived<TState>, TActions extends BeaconActions<TState>, T>(store: Store<TState, TDerived, TActions>, selector: (store: Store<TState, TDerived, TActions>) => T, onChange: (value: T) => void, fireImmediately?: boolean): void;
-
-export { useStoreWatcher };
+//#endregion
+//#region src/useStoreState.d.ts
+/**
+* A React hook that subscribes to a Beacon store and returns a selected value as React state.
+*
+* Use this hook when you need a store value to participate in React's state lifecycle —
+* for example, to drive React Query parameters, to pass into hooks that don't understand
+* MobX observables, or to feed non-observer child components.
+*
+* For normal component rendering, prefer wrapping your component with `observer` from
+* `mobx-react-lite` and reading store values directly. That's simpler and more performant.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the value to track.
+* @returns {T} The current value of the selected store slice, kept in sync via MobX reaction.
+*/
+declare function useStoreState<TState extends BeaconState, TDerived extends BeaconDerived<TState>, TActions extends BeaconActions<TState>, T>(store: Store<TState, TDerived, TActions>, selector: (store: Store<TState, TDerived, TActions>) => T): T;
+//#endregion
+export { useStoreState, useStoreWatcher };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/useStoreWatcher.ts","../src/useStoreState.ts"],"mappings":";;;;;AAkBA;;;;;;;;;;;iBAAgB,eAAA,gBACG,WAAA,mBACE,aAAA,CAAc,MAAA,oBACd,aAAA,CAAc,MAAA,KAAA,CAG/B,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,GAC/B,QAAA,GAAW,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,MAAc,CAAA,EACxD,QAAA,GAAW,KAAA,EAAO,CAAA,WAClB,eAAA;;;;;AATJ;;;;;;;;;;;;;;;;;iBCMgB,aAAA,gBACG,WAAA,mBACE,aAAA,CAAc,MAAA,oBACd,aAAA,CAAc,MAAA,KAAA,CAG/B,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,GAC/B,QAAA,GAAW,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,QAAA,EAAU,QAAA,MAAc,CAAA,GACzD,CAAA"}

package/dist/index.mjs

@@ -1,30 +1,66 @@
-import _ from 'lodash';
-import { reaction, toJS } from 'mobx';
-import { useEffect } from 'react';
+import _ from "lodash";
+import { reaction, toJS } from "mobx";
+import { useEffect, useEffectEvent, useState } from "react";
 
-// src/useStoreWatcher.ts
+//#region src/useStoreWatcher.ts
+/**
+* A custom React hook to watch for state changes in a beacon store.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.
+* @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.
+* @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.
+*/
 function useStoreWatcher(store, selector, onChange, fireImmediately = false) {
-  useEffect(() => {
-    const disposer = reaction(
-      () => {
-        return toJS(selector(store));
-      },
-      (value, previousValue) => {
-        if (!previousValue || !_.isEqual(value, previousValue)) {
-          onChange(value);
-        }
-      },
-      { fireImmediately }
-    );
-    store.registerCleanup(() => {
-      disposer();
-    });
-    return () => {
-      disposer();
-    };
-  }, [store, selector, onChange, fireImmediately]);
+	const stableSelector = useEffectEvent(selector);
+	const stableOnChange = useEffectEvent(onChange);
+	useEffect(() => {
+		const disposer = reaction(() => {
+			return toJS(stableSelector(store));
+		}, (value, previousValue) => {
+			if (!previousValue || !_.isEqual(value, previousValue)) stableOnChange(value);
+		}, { fireImmediately });
+		store.registerCleanup(() => {
+			disposer();
+		});
+		return () => {
+			disposer();
+		};
+	}, [store, fireImmediately]);
 }
 
-export { useStoreWatcher };
-//# sourceMappingURL=out.js.map
+//#endregion
+//#region src/useStoreState.ts
+/**
+* A React hook that subscribes to a Beacon store and returns a selected value as React state.
+*
+* Use this hook when you need a store value to participate in React's state lifecycle —
+* for example, to drive React Query parameters, to pass into hooks that don't understand
+* MobX observables, or to feed non-observer child components.
+*
+* For normal component rendering, prefer wrapping your component with `observer` from
+* `mobx-react-lite` and reading store values directly. That's simpler and more performant.
+*
+* @template TState - The type of the store's state, extending BeaconState.
+* @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>.
+* @template TActions - The type of the store's actions, extending BeaconActions<TState>.
+* @template T - The type returned by the selector function, inferred from the selector.
+*
+* @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
+* @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the value to track.
+* @returns {T} The current value of the selected store slice, kept in sync via MobX reaction.
+*/
+function useStoreState(store, selector) {
+	const [value, setValue] = useState(() => toJS(selector(store)));
+	useStoreWatcher(store, selector, setValue);
+	return value;
+}
+
+//#endregion
+export { useStoreState, useStoreWatcher };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useStoreWatcher.ts"],"names":[],"mappings":";AACA,OAAO,OAAO;AACd,SAAS,UAAU,YAAY;AAC/B,SAAS,iBAAiB;AAenB,SAAS,gBAMZ,OACA,UACA,UACA,kBAA2B,OACvB;AACJ,YAAU,MAAM;AAEZ,UAAM,WAAW;AAAA,MACb,MAAM;AAEF,eAAO,KAAK,SAAS,KAAK,CAAC;AAAA,MAC/B;AAAA,MACA,CAAC,OAAO,kBAAkB;AAEtB,YAAI,CAAC,iBAAiB,CAAC,EAAE,QAAQ,OAAO,aAAa,GAAG;AACpD,mBAAS,KAAK;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,EAAE,gBAAgB;AAAA,IACtB;AAGA,UAAM,gBAAgB,MAAM;AACxB,eAAS;AAAA,IACb,CAAC;AAGD,WAAO,MAAM;AACT,eAAS;AAAA,IACb;AAAA,EACJ,GAAG,CAAC,OAAO,UAAU,UAAU,eAAe,CAAC;AACnD","sourcesContent":["import type { BeaconActions, BeaconDerived, BeaconState, Store } from \"@apogeelabs/beacon\";\nimport _ from \"lodash\";\nimport { reaction, toJS } from \"mobx\";\nimport { useEffect } from \"react\";\n\n/**\n * A custom React hook to watch for state changes in a beacon store.\n *\n * @template TState - The type of the store's state, extending BeaconState.\n * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.\n * @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.\n * @template T - The type returned by the selector function, inferred from the selector.\n *\n * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.\n * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.\n * @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.\n * @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.\n */\nexport function useStoreWatcher<\n    TState extends BeaconState,\n    TDerived extends BeaconDerived<TState>,\n    TActions extends BeaconActions<TState>,\n    T,\n>(\n    store: Store<TState, TDerived, TActions>,\n    selector: (store: Store<TState, TDerived, TActions>) => T,\n    onChange: (value: T) => void,\n    fireImmediately: boolean = false\n): void {\n    useEffect(() => {\n        // Set up a MobX reaction to watch the selected state\n        const disposer = reaction(\n            () => {\n                // Convert to plain JS to strip MobX observable properties\n                return toJS(selector(store));\n            },\n            (value, previousValue) => {\n                // Only trigger if the value actually changed using deep comparison\n                if (!previousValue || !_.isEqual(value, previousValue)) {\n                    onChange(value);\n                }\n            },\n            { fireImmediately }\n        );\n\n        // Register the disposer with the store for cleanup\n        store.registerCleanup(() => {\n            disposer();\n        });\n\n        // Cleanup when the component unmounts or dependencies change\n        return () => {\n            disposer();\n        };\n    }, [store, selector, onChange, fireImmediately]);\n}\n\nexport default useStoreWatcher;\n"]}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/useStoreWatcher.ts","../src/useStoreState.ts"],"sourcesContent":["import type { BeaconActions, BeaconDerived, BeaconState, Store } from \"@apogeelabs/beacon\";\nimport _ from \"lodash\";\nimport { reaction, toJS } from \"mobx\";\nimport { useEffect, useEffectEvent } from \"react\";\n\n/**\n * A custom React hook to watch for state changes in a beacon store.\n *\n * @template TState - The type of the store's state, extending BeaconState.\n * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.\n * @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.\n * @template T - The type returned by the selector function, inferred from the selector.\n *\n * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.\n * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.\n * @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.\n * @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.\n */\nexport function useStoreWatcher<\n    TState extends BeaconState,\n    TDerived extends BeaconDerived<TState>,\n    TActions extends BeaconActions<TState>,\n    T,\n>(\n    store: Store<TState, TDerived, TActions>,\n    selector: (store: Store<TState, TDerived, TActions>) => T,\n    onChange: (value: T) => void,\n    fireImmediately: boolean = false\n): void {\n    // Use useEffectEvent to wrap callbacks so they don't need to be in the dependency array\n    // This prevents unnecessary re-runs when consumers pass inline functions\n    const stableSelector = useEffectEvent(selector);\n    const stableOnChange = useEffectEvent(onChange);\n\n    useEffect(() => {\n        const disposer = reaction(\n            () => {\n                // toJS strips MobX observable wrappers so React sees plain values\n                return toJS(stableSelector(store));\n            },\n            (value, previousValue) => {\n                // MobX selectors can return new object references even when the underlying\n                // data hasn't changed. Deep comparison prevents spurious re-renders.\n                if (!previousValue || !_.isEqual(value, previousValue)) {\n                    stableOnChange(value);\n                }\n            },\n            { fireImmediately }\n        );\n\n        // If the store is disposed externally, clean up the reaction too\n        store.registerCleanup(() => {\n            disposer();\n        });\n\n        return () => {\n            disposer();\n        };\n        // stableSelector and stableOnChange are omitted from deps intentionally —\n        // useEffectEvent keeps them stable across renders without needing to re-run the effect\n    }, [store, fireImmediately]);\n}\n\nexport default useStoreWatcher;\n","import type { BeaconActions, BeaconDerived, BeaconState, Store } from \"@apogeelabs/beacon\";\nimport { toJS } from \"mobx\";\nimport { useState } from \"react\";\nimport { useStoreWatcher } from \"./useStoreWatcher\";\n\n/**\n * A React hook that subscribes to a Beacon store and returns a selected value as React state.\n *\n * Use this hook when you need a store value to participate in React's state lifecycle —\n * for example, to drive React Query parameters, to pass into hooks that don't understand\n * MobX observables, or to feed non-observer child components.\n *\n * For normal component rendering, prefer wrapping your component with `observer` from\n * `mobx-react-lite` and reading store values directly. That's simpler and more performant.\n *\n * @template TState - The type of the store's state, extending BeaconState.\n * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>.\n * @template TActions - The type of the store's actions, extending BeaconActions<TState>.\n * @template T - The type returned by the selector function, inferred from the selector.\n *\n * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.\n * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the value to track.\n * @returns {T} The current value of the selected store slice, kept in sync via MobX reaction.\n */\nexport function useStoreState<\n    TState extends BeaconState,\n    TDerived extends BeaconDerived<TState>,\n    TActions extends BeaconActions<TState>,\n    T,\n>(\n    store: Store<TState, TDerived, TActions>,\n    selector: (store: Store<TState, TDerived, TActions>) => T,\n): T {\n    // Initializer function so the selector only runs once on mount, not on every render\n    const [value, setValue] = useState<T>(() => toJS(selector(store)));\n\n    // Wires MobX reactivity to React state — store changes call setValue, triggering a re-render\n    useStoreWatcher(store, selector, setValue);\n\n    return value;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAAgB,gBAMZ,OACA,UACA,UACA,kBAA2B,OACvB;CAGJ,MAAM,iBAAiB,eAAe,SAAS;CAC/C,MAAM,iBAAiB,eAAe,SAAS;AAE/C,iBAAgB;EACZ,MAAM,WAAW,eACP;AAEF,UAAO,KAAK,eAAe,MAAM,CAAC;MAErC,OAAO,kBAAkB;AAGtB,OAAI,CAAC,iBAAiB,CAAC,EAAE,QAAQ,OAAO,cAAc,CAClD,gBAAe,MAAM;KAG7B,EAAE,iBAAiB,CACtB;AAGD,QAAM,sBAAsB;AACxB,aAAU;IACZ;AAEF,eAAa;AACT,aAAU;;IAIf,CAAC,OAAO,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACpChC,SAAgB,cAMZ,OACA,UACC;CAED,MAAM,CAAC,OAAO,YAAY,eAAkB,KAAK,SAAS,MAAM,CAAC,CAAC;AAGlE,iBAAgB,OAAO,UAAU,SAAS;AAE1C,QAAO"}

package/package.json

@@ -6,20 +6,20 @@
       "name": "Jim Cowart"
     }
   ],
-  "version": "0.3.2",
+  "version": "1.1.0",
   "license": "ISC",
-  "description": "beacon middleware for react-query integration with beacon stores",
+  "description": "React hooks and utilities for Beacon stores",
   "engines": {
     "node": ">=18"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d.cts",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
+      "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
@@ -39,13 +39,13 @@
   "dependencies": {
     "lodash": "4.17.16",
     "mobx": "^6.13.7",
-    "react": "19.1.0",
-    "@apogeelabs/beacon": "0.4.1"
+    "react": "^19.2.3",
+    "@apogeelabs/beacon": "1.1.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.5",
     "@types/lodash": "4.17.16",
-    "@types/react": "19.1.9",
+    "@types/react": "^19.2.3",
     "eslint": "^8.0.1",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.25.2",
@@ -53,12 +53,12 @@
     "eslint-plugin-promise": "^6.0.0",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.1",
-    "tsup": "^7.2.0",
+    "tsdown": "^0.20.3",
     "typescript": "^5.2.2"
   },
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
+    "dev": "tsdown --watch",
+    "build": "tsdown",
     "test": "jest",
     "test:watch": "jest --watch --collect-coverage",
     "lint": "eslint --config ../../.eslintrc.js 'src/**/*.{ts,tsx}'"

package/dist/index.d.ts

@@ -1,18 +0,0 @@
-import { BeaconState, BeaconDerived, BeaconActions, Store } from '@apogeelabs/beacon';
-
-/**
- * A custom React hook to watch for state changes in a beacon store.
- *
- * @template TState - The type of the store's state, extending BeaconState.
- * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.
- * @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.
- * @template T - The type returned by the selector function, inferred from the selector.
- *
- * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.
- * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.
- * @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.
- * @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.
- */
-declare function useStoreWatcher<TState extends BeaconState, TDerived extends BeaconDerived<TState>, TActions extends BeaconActions<TState>, T>(store: Store<TState, TDerived, TActions>, selector: (store: Store<TState, TDerived, TActions>) => T, onChange: (value: T) => void, fireImmediately?: boolean): void;
-
-export { useStoreWatcher };

package/dist/index.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var _ = require('lodash');
-var mobx = require('mobx');
-var react = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var ___default = /*#__PURE__*/_interopDefault(_);
-
-// src/useStoreWatcher.ts
-function useStoreWatcher(store, selector, onChange, fireImmediately = false) {
-  react.useEffect(() => {
-    const disposer = mobx.reaction(
-      () => {
-        return mobx.toJS(selector(store));
-      },
-      (value, previousValue) => {
-        if (!previousValue || !___default.default.isEqual(value, previousValue)) {
-          onChange(value);
-        }
-      },
-      { fireImmediately }
-    );
-    store.registerCleanup(() => {
-      disposer();
-    });
-    return () => {
-      disposer();
-    };
-  }, [store, selector, onChange, fireImmediately]);
-}
-
-exports.useStoreWatcher = useStoreWatcher;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/useStoreWatcher.ts"],"names":[],"mappings":";AACA,OAAO,OAAO;AACd,SAAS,UAAU,YAAY;AAC/B,SAAS,iBAAiB;AAenB,SAAS,gBAMZ,OACA,UACA,UACA,kBAA2B,OACvB;AACJ,YAAU,MAAM;AAEZ,UAAM,WAAW;AAAA,MACb,MAAM;AAEF,eAAO,KAAK,SAAS,KAAK,CAAC;AAAA,MAC/B;AAAA,MACA,CAAC,OAAO,kBAAkB;AAEtB,YAAI,CAAC,iBAAiB,CAAC,EAAE,QAAQ,OAAO,aAAa,GAAG;AACpD,mBAAS,KAAK;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,EAAE,gBAAgB;AAAA,IACtB;AAGA,UAAM,gBAAgB,MAAM;AACxB,eAAS;AAAA,IACb,CAAC;AAGD,WAAO,MAAM;AACT,eAAS;AAAA,IACb;AAAA,EACJ,GAAG,CAAC,OAAO,UAAU,UAAU,eAAe,CAAC;AACnD","sourcesContent":["import type { BeaconActions, BeaconDerived, BeaconState, Store } from \"@apogeelabs/beacon\";\nimport _ from \"lodash\";\nimport { reaction, toJS } from \"mobx\";\nimport { useEffect } from \"react\";\n\n/**\n * A custom React hook to watch for state changes in a beacon store.\n *\n * @template TState - The type of the store's state, extending BeaconState.\n * @template TDerived - The type of the store's derived values, extending BeaconDerived<TState>. If you don't have derived values, use EmptyDerived<TState>.\n * @template TActions - The type of the store's actions, extending BeaconActions<TState>. If you don't have actions, use EmptyActions.\n * @template T - The type returned by the selector function, inferred from the selector.\n *\n * @param {Store<TState, TDerived, TActions>} store - The Beacon store instance.\n * @param {(store: Store<TState, TDerived, TActions>) => T} selector - A function that extracts the part of the store to watch.\n * @param {(value: T) => void} onChange - A callback invoked with the new value when the selected state changes.\n * @param {boolean} [fireImmediately=false] - Whether to invoke onChange with the initial value.\n */\nexport function useStoreWatcher<\n    TState extends BeaconState,\n    TDerived extends BeaconDerived<TState>,\n    TActions extends BeaconActions<TState>,\n    T,\n>(\n    store: Store<TState, TDerived, TActions>,\n    selector: (store: Store<TState, TDerived, TActions>) => T,\n    onChange: (value: T) => void,\n    fireImmediately: boolean = false\n): void {\n    useEffect(() => {\n        // Set up a MobX reaction to watch the selected state\n        const disposer = reaction(\n            () => {\n                // Convert to plain JS to strip MobX observable properties\n                return toJS(selector(store));\n            },\n            (value, previousValue) => {\n                // Only trigger if the value actually changed using deep comparison\n                if (!previousValue || !_.isEqual(value, previousValue)) {\n                    onChange(value);\n                }\n            },\n            { fireImmediately }\n        );\n\n        // Register the disposer with the store for cleanup\n        store.registerCleanup(() => {\n            disposer();\n        });\n\n        // Cleanup when the component unmounts or dependencies change\n        return () => {\n            disposer();\n        };\n    }, [store, selector, onChange, fireImmediately]);\n}\n\nexport default useStoreWatcher;\n"]}