@apogeelabs/beacon-react-utils 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _ = require('lodash');
|
|
4
4
|
var mobx = require('mobx');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var ___default = /*#__PURE__*/_interopDefault(_);
|
|
10
10
|
|
|
11
11
|
// src/useStoreWatcher.ts
|
|
12
12
|
function useStoreWatcher(store, selector, onChange, fireImmediately = false) {
|
|
@@ -16,7 +16,7 @@ function useStoreWatcher(store, selector, onChange, fireImmediately = false) {
|
|
|
16
16
|
return mobx.toJS(selector(store));
|
|
17
17
|
},
|
|
18
18
|
(value, previousValue) => {
|
|
19
|
-
if (!previousValue || !
|
|
19
|
+
if (!previousValue || !___default.default.isEqual(value, previousValue)) {
|
|
20
20
|
onChange(value);
|
|
21
21
|
}
|
|
22
22
|
},
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useStoreWatcher.ts"],"names":[],"mappings":";AACA,OAAO,
|
|
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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _ from 'lodash';
|
|
2
2
|
import { reaction, toJS } from 'mobx';
|
|
3
3
|
import { useEffect } from 'react';
|
|
4
4
|
|
|
@@ -10,7 +10,7 @@ function useStoreWatcher(store, selector, onChange, fireImmediately = false) {
|
|
|
10
10
|
return toJS(selector(store));
|
|
11
11
|
},
|
|
12
12
|
(value, previousValue) => {
|
|
13
|
-
if (!previousValue || !isEqual(value, previousValue)) {
|
|
13
|
+
if (!previousValue || !_.isEqual(value, previousValue)) {
|
|
14
14
|
onChange(value);
|
|
15
15
|
}
|
|
16
16
|
},
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useStoreWatcher.ts"],"names":[],"mappings":";AACA,OAAO,
|
|
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"]}
|