@bemedev/app-reactjs 1.9.1 → 1.9.3
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/README.md +17 -0
- package/lib/useCan.cjs +3 -4
- package/lib/useCan.cjs.map +1 -1
- package/lib/useCan.d.ts +1 -1
- package/lib/useCan.d.ts.map +1 -1
- package/lib/useCan.js +3 -4
- package/lib/useCan.js.map +1 -1
- package/lib/useIsInside.cjs +4 -8
- package/lib/useIsInside.cjs.map +1 -1
- package/lib/useIsInside.d.ts.map +1 -1
- package/lib/useIsInside.js +3 -7
- package/lib/useIsInside.js.map +1 -1
- package/lib/useState.cjs +10 -17
- package/lib/useState.cjs.map +1 -1
- package/lib/useState.d.ts.map +1 -1
- package/lib/useState.js +10 -17
- package/lib/useState.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -58,6 +58,23 @@ function MyComponent() {
|
|
|
58
58
|
|
|
59
59
|
<br/>
|
|
60
60
|
|
|
61
|
+
## Available Hooks
|
|
62
|
+
|
|
63
|
+
The package also exports `useState`, `useCan`, and `useIsInside` for common
|
|
64
|
+
state selection patterns:
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
const count = useState(service, state => state.context.count);
|
|
68
|
+
const canIncrement = useCan(service, 'INCREMENT');
|
|
69
|
+
const isInside = useIsInside(service, 'some.state');
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
These helpers are designed to work with the same interpreter service and
|
|
73
|
+
provide a lightweight way to subscribe to state slices, transition
|
|
74
|
+
permissions, and nested state location checks.
|
|
75
|
+
|
|
76
|
+
<br/>
|
|
77
|
+
|
|
61
78
|
## API Reference
|
|
62
79
|
|
|
63
80
|
### `useService(service, options?)`
|
package/lib/useCan.cjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let _bemedev_app_utils = require("@bemedev/app/utils");
|
|
2
3
|
let react = require("react");
|
|
3
4
|
let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
|
|
4
5
|
//#region src/useCan.ts
|
|
@@ -8,10 +9,8 @@ function useCan(service) {
|
|
|
8
9
|
const selector = (_state) => {
|
|
9
10
|
return events[matcher]((event) => service.canEvent(event));
|
|
10
11
|
};
|
|
11
|
-
const [_state, setState] = (0, react.useState)(
|
|
12
|
-
const sub = service.subscribe(() => {
|
|
13
|
-
setState(selector(service.state));
|
|
14
|
-
});
|
|
12
|
+
const [_state, setState] = (0, react.useState)(selector(service.state));
|
|
13
|
+
const sub = service.subscribe(() => setState(selector(service.state)), { equals: (first, next) => (0, _bemedev_app_utils.deepEqual)(first.value, next.value) });
|
|
15
14
|
(0, react.useEffect)(() => sub.unsubscribe, []);
|
|
16
15
|
return _state;
|
|
17
16
|
};
|
package/lib/useCan.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCan.cjs","names":["useState","expandFn"],"sources":["../src/useCan.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"useCan.cjs","names":["useState","deepEqual","expandFn"],"sources":["../src/useCan.ts"],"sourcesContent":["import {\n type AddSubscriber_F,\n type EventObject,\n type PrimitiveObject,\n type State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useEffect, useState } from 'react';\n\nexport function useCan<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n>(service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n canEvent: (event: Eo['type']) => boolean;\n}) {\n const dispatch = (matcher: 'some' | 'every') => {\n return (...events: Eo['type'][]) => {\n const selector = (_state: State<Eo, Tc, Ta>) => {\n return events[matcher](event => service.canEvent(event));\n };\n\n const [_state, setState] = useState(selector(service.state));\n\n const sub = service.subscribe(\n () => setState(selector(service.state)),\n { equals: (first, next) => deepEqual(first.value, next.value) },\n );\n\n useEffect(() => sub.unsubscribe, []);\n return _state;\n };\n };\n\n const or = dispatch('some');\n const and = dispatch('every');\n const out = expandFn(and, { or, and });\n return out;\n}\n"],"mappings":";;;;;AAUA,SAAgB,OAId,SAIC;CACD,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAyB;GAClC,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,QAAQ,SAAS,KAAK,CAAC;GACzD;GAEA,MAAM,CAAC,QAAQ,aAAA,GAAYA,MAAAA,SAAAA,CAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,gBACZ,SAAS,SAAS,QAAQ,KAAK,CAAC,GACtC,EAAE,SAAS,OAAO,UAAA,GAASC,mBAAAA,UAAAA,CAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;GAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,QAAA,GADYC,qBAAAA,SAAAA,CAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}
|
package/lib/useCan.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type AddSubscriber_F, type EventObject, type PrimitiveObject, type State } from '@bemedev/app';
|
|
2
2
|
export declare function useCan<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject>(service: {
|
|
3
3
|
subscribe: AddSubscriber_F<Tc, Ta, Eo>;
|
|
4
4
|
state: State<Eo, Tc, Ta>;
|
package/lib/useCan.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCan.d.ts","sourceRoot":"","sources":["../src/useCan.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"useCan.d.ts","sourceRoot":"","sources":["../src/useCan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,KAAK,EACX,MAAM,cAAc,CAAC;AAKtB,wBAAgB,MAAM,CACpB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,OAAO,EAAE;IACT,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;CAC1C,sDAEsB,EAAE,CAAC,MAAM,CAAC,EAAE;6BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;8BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;GAqBlC"}
|
package/lib/useCan.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { deepEqual } from "@bemedev/app/utils";
|
|
1
2
|
import { useEffect, useState } from "react";
|
|
2
3
|
import { expandFn } from "@bemedev/app/bemedev";
|
|
3
4
|
//#region src/useCan.ts
|
|
@@ -7,10 +8,8 @@ function useCan(service) {
|
|
|
7
8
|
const selector = (_state) => {
|
|
8
9
|
return events[matcher]((event) => service.canEvent(event));
|
|
9
10
|
};
|
|
10
|
-
const [_state, setState] = useState(
|
|
11
|
-
const sub = service.subscribe(() => {
|
|
12
|
-
setState(selector(service.state));
|
|
13
|
-
});
|
|
11
|
+
const [_state, setState] = useState(selector(service.state));
|
|
12
|
+
const sub = service.subscribe(() => setState(selector(service.state)), { equals: (first, next) => deepEqual(first.value, next.value) });
|
|
14
13
|
useEffect(() => sub.unsubscribe, []);
|
|
15
14
|
return _state;
|
|
16
15
|
};
|
package/lib/useCan.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCan.js","names":[],"sources":["../src/useCan.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"useCan.js","names":[],"sources":["../src/useCan.ts"],"sourcesContent":["import {\n type AddSubscriber_F,\n type EventObject,\n type PrimitiveObject,\n type State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useEffect, useState } from 'react';\n\nexport function useCan<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n>(service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n canEvent: (event: Eo['type']) => boolean;\n}) {\n const dispatch = (matcher: 'some' | 'every') => {\n return (...events: Eo['type'][]) => {\n const selector = (_state: State<Eo, Tc, Ta>) => {\n return events[matcher](event => service.canEvent(event));\n };\n\n const [_state, setState] = useState(selector(service.state));\n\n const sub = service.subscribe(\n () => setState(selector(service.state)),\n { equals: (first, next) => deepEqual(first.value, next.value) },\n );\n\n useEffect(() => sub.unsubscribe, []);\n return _state;\n };\n };\n\n const or = dispatch('some');\n const and = dispatch('every');\n const out = expandFn(and, { or, and });\n return out;\n}\n"],"mappings":";;;;AAUA,SAAgB,OAId,SAIC;CACD,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAyB;GAClC,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,QAAQ,SAAS,KAAK,CAAC;GACzD;GAEA,MAAM,CAAC,QAAQ,YAAY,SAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,gBACZ,SAAS,SAAS,QAAQ,KAAK,CAAC,GACtC,EAAE,SAAS,OAAO,SAAS,UAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;GAEA,gBAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,OADY,SAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}
|
package/lib/useIsInside.cjs
CHANGED
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
let
|
|
2
|
+
let _bemedev_app_utils = require("@bemedev/app/utils");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
|
|
5
5
|
//#region src/useIsInside.ts
|
|
6
6
|
function useIsInside(service) {
|
|
7
7
|
const selector1 = (_state) => {
|
|
8
|
-
return (0,
|
|
8
|
+
return (0, _bemedev_app_utils.decomposeSV)(_state.value);
|
|
9
9
|
};
|
|
10
10
|
const dispatch = (matcher) => {
|
|
11
11
|
return (...states) => {
|
|
12
12
|
const selector = (_state) => {
|
|
13
13
|
return states[matcher]((state) => selector1(_state).includes(state));
|
|
14
14
|
};
|
|
15
|
-
const [_state, setState] = (0, react.useState)(
|
|
16
|
-
const sub = service.subscribe((nextState) => {
|
|
17
|
-
setState(selector(nextState));
|
|
18
|
-
}, { equals: (first, next) => {
|
|
19
|
-
return selector(first) === selector(next);
|
|
20
|
-
} });
|
|
15
|
+
const [_state, setState] = (0, react.useState)(selector(service.state));
|
|
16
|
+
const sub = service.subscribe((nextState) => setState(selector(nextState)), { equals: (first, next) => (0, _bemedev_app_utils.deepEqual)(first.value, next.value) });
|
|
21
17
|
(0, react.useEffect)(() => sub.unsubscribe, []);
|
|
22
18
|
return _state;
|
|
23
19
|
};
|
package/lib/useIsInside.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsInside.cjs","names":["decomposeSV","useState","expandFn"],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { decomposeSV } from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useIsInside<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n>(service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n}) {\n const selector1 = (_state: State<Eo, Tc, Ta>) => {\n return decomposeSV(_state.value);\n };\n\n const dispatch = (matcher: 'some' | 'every') => {\n return (...states: string[]) => {\n const selector = (_state: State<Eo, Tc, Ta>) => {\n return states[matcher](state => selector1(_state).includes(state));\n };\n\n const [_state, setState] = useState(
|
|
1
|
+
{"version":3,"file":"useIsInside.cjs","names":["decomposeSV","useState","deepEqual","expandFn"],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { decomposeSV, deepEqual } from '@bemedev/app/utils';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useIsInside<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n>(service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n}) {\n const selector1 = (_state: State<Eo, Tc, Ta>) => {\n return decomposeSV(_state.value);\n };\n\n const dispatch = (matcher: 'some' | 'every') => {\n return (...states: string[]) => {\n const selector = (_state: State<Eo, Tc, Ta>) => {\n return states[matcher](state => selector1(_state).includes(state));\n };\n\n const [_state, setState] = useState(selector(service.state));\n\n const sub = service.subscribe(\n nextState => setState(selector(nextState)),\n { equals: (first, next) => deepEqual(first.value, next.value) },\n );\n\n useEffect(() => sub.unsubscribe, []);\n return _state;\n };\n };\n\n const or = dispatch('some');\n const and = dispatch('every');\n const out = expandFn(and, { or, and });\n return out;\n}\n"],"mappings":";;;;;AAUA,SAAgB,YAId,SAGC;CACD,MAAM,aAAa,WAA8B;EAC/C,QAAA,GAAOA,mBAAAA,YAAAA,CAAY,OAAO,KAAK;CACjC;CAEA,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAqB;GAC9B,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,UAAU,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC;GACnE;GAEA,MAAM,CAAC,QAAQ,aAAA,GAAYC,MAAAA,SAAAA,CAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EAAE,SAAS,OAAO,UAAA,GAASC,mBAAAA,UAAAA,CAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;GAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,QAAA,GADYC,qBAAAA,SAAAA,CAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}
|
package/lib/useIsInside.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsInside.d.ts","sourceRoot":"","sources":["../src/useIsInside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAKtB,wBAAgB,WAAW,CACzB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,OAAO,EAAE;IACT,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,sDAMsB,MAAM,EAAE;6BAAR,MAAM,EAAE;8BAAR,MAAM,EAAE;
|
|
1
|
+
{"version":3,"file":"useIsInside.d.ts","sourceRoot":"","sources":["../src/useIsInside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAKtB,wBAAgB,WAAW,CACzB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,OAAO,EAAE;IACT,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,sDAMsB,MAAM,EAAE;6BAAR,MAAM,EAAE;8BAAR,MAAM,EAAE;GAqB9B"}
|
package/lib/useIsInside.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { decomposeSV } from "@bemedev/app";
|
|
1
|
+
import { decomposeSV, deepEqual } from "@bemedev/app/utils";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
3
|
import { expandFn } from "@bemedev/app/bemedev";
|
|
4
4
|
//#region src/useIsInside.ts
|
|
@@ -11,12 +11,8 @@ function useIsInside(service) {
|
|
|
11
11
|
const selector = (_state) => {
|
|
12
12
|
return states[matcher]((state) => selector1(_state).includes(state));
|
|
13
13
|
};
|
|
14
|
-
const [_state, setState] = useState(
|
|
15
|
-
const sub = service.subscribe((nextState) => {
|
|
16
|
-
setState(selector(nextState));
|
|
17
|
-
}, { equals: (first, next) => {
|
|
18
|
-
return selector(first) === selector(next);
|
|
19
|
-
} });
|
|
14
|
+
const [_state, setState] = useState(selector(service.state));
|
|
15
|
+
const sub = service.subscribe((nextState) => setState(selector(nextState)), { equals: (first, next) => deepEqual(first.value, next.value) });
|
|
20
16
|
useEffect(() => sub.unsubscribe, []);
|
|
21
17
|
return _state;
|
|
22
18
|
};
|
package/lib/useIsInside.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIsInside.js","names":[],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { decomposeSV } from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useIsInside<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n>(service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n}) {\n const selector1 = (_state: State<Eo, Tc, Ta>) => {\n return decomposeSV(_state.value);\n };\n\n const dispatch = (matcher: 'some' | 'every') => {\n return (...states: string[]) => {\n const selector = (_state: State<Eo, Tc, Ta>) => {\n return states[matcher](state => selector1(_state).includes(state));\n };\n\n const [_state, setState] = useState(
|
|
1
|
+
{"version":3,"file":"useIsInside.js","names":[],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { decomposeSV, deepEqual } from '@bemedev/app/utils';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useIsInside<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n>(service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n}) {\n const selector1 = (_state: State<Eo, Tc, Ta>) => {\n return decomposeSV(_state.value);\n };\n\n const dispatch = (matcher: 'some' | 'every') => {\n return (...states: string[]) => {\n const selector = (_state: State<Eo, Tc, Ta>) => {\n return states[matcher](state => selector1(_state).includes(state));\n };\n\n const [_state, setState] = useState(selector(service.state));\n\n const sub = service.subscribe(\n nextState => setState(selector(nextState)),\n { equals: (first, next) => deepEqual(first.value, next.value) },\n );\n\n useEffect(() => sub.unsubscribe, []);\n return _state;\n };\n };\n\n const or = dispatch('some');\n const and = dispatch('every');\n const out = expandFn(and, { or, and });\n return out;\n}\n"],"mappings":";;;;AAUA,SAAgB,YAId,SAGC;CACD,MAAM,aAAa,WAA8B;EAC/C,OAAO,YAAY,OAAO,KAAK;CACjC;CAEA,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAqB;GAC9B,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,UAAU,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC;GACnE;GAEA,MAAM,CAAC,QAAQ,YAAY,SAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EAAE,SAAS,OAAO,SAAS,UAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;GAEA,gBAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,OADY,SAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}
|
package/lib/useState.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
let
|
|
2
|
+
let _bemedev_app_utils = require("@bemedev/app/utils");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
//#region src/useState.ts
|
|
5
5
|
/**
|
|
@@ -10,23 +10,16 @@ let react = require("react");
|
|
|
10
10
|
* @returns The selected state.
|
|
11
11
|
*/
|
|
12
12
|
function useState(service, options) {
|
|
13
|
-
const { selector = (s) => s, equals =
|
|
13
|
+
const { selector = (s) => s, equals = _bemedev_app_utils.deepEqual } = options ?? {};
|
|
14
14
|
const [_state, setState] = (0, react.useState)(() => selector(service.state));
|
|
15
|
-
(0, react.
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}, [
|
|
24
|
-
_state,
|
|
25
|
-
setState,
|
|
26
|
-
selector,
|
|
27
|
-
equals,
|
|
28
|
-
service
|
|
29
|
-
]);
|
|
15
|
+
const _selector = (0, react.useCallback)(selector, [selector]);
|
|
16
|
+
const _equals = (0, react.useCallback)(equals, [equals]);
|
|
17
|
+
const sub = service.subscribe((nextState) => setState(_selector(nextState)), { equals: (prev, next) => {
|
|
18
|
+
const _prev = _selector(prev);
|
|
19
|
+
const _next = _selector(next);
|
|
20
|
+
return _equals(_prev, _next);
|
|
21
|
+
} });
|
|
22
|
+
(0, react.useEffect)(() => sub.unsubscribe, []);
|
|
30
23
|
return _state;
|
|
31
24
|
}
|
|
32
25
|
//#endregion
|
package/lib/useState.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useState.cjs","names":["deepEqual","useReactState"],"sources":["../src/useState.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { deepEqual } from '@bemedev/app';\nimport { useEffect, useState as useReactState } from 'react';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param options - Optional configuration options for selection and equality comparison.\n * @returns The selected state.\n */\nexport function useState<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n T = State<Eo, Tc, Ta>,\n>(\n service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n },\n options?: UseServiceOptions<Tc, Ta, Eo, T>,\n): T {\n const {\n selector = (s: State<Eo, Tc, Ta>) => s as T,\n equals = deepEqual<T>,\n } = options ?? {};\n\n const [_state, setState] = useReactState<T>(() =>\n selector(service.state),\n );\n\n
|
|
1
|
+
{"version":3,"file":"useState.cjs","names":["deepEqual","useReactState","useCallback"],"sources":["../src/useState.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useCallback, useEffect, useState as useReactState } from 'react';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param options - Optional configuration options for selection and equality comparison.\n * @returns The selected state.\n */\nexport function useState<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n T = State<Eo, Tc, Ta>,\n>(\n service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n },\n options?: UseServiceOptions<Tc, Ta, Eo, T>,\n): T {\n const {\n selector = (s: State<Eo, Tc, Ta>) => s as T,\n equals = deepEqual<T>,\n } = options ?? {};\n\n const [_state, setState] = useReactState<T>(() =>\n selector(service.state),\n );\n\n const _selector = useCallback(selector, [selector]);\n const _equals = useCallback(equals, [equals]);\n\n const sub = service.subscribe(\n nextState => setState(_selector(nextState)),\n {\n equals: (prev, next) => {\n const _prev = _selector(prev);\n const _next = _selector(next);\n return _equals(_prev, _next);\n },\n },\n );\n\n useEffect(() => sub.unsubscribe, []);\n return _state;\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,SAASA,mBAAAA,cACP,WAAW,CAAC;CAEhB,MAAM,CAAC,QAAQ,aAAA,GAAYC,MAAAA,SAAAA,OACzB,SAAS,QAAQ,KAAK,CACxB;CAEA,MAAM,aAAA,GAAYC,MAAAA,YAAAA,CAAY,UAAU,CAAC,QAAQ,CAAC;CAClD,MAAM,WAAA,GAAUA,MAAAA,YAAAA,CAAY,QAAQ,CAAC,MAAM,CAAC;CAE5C,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,UAAU,SAAS,CAAC,GAC1C,EACE,SAAS,MAAM,SAAS;EACtB,MAAM,QAAQ,UAAU,IAAI;EAC5B,MAAM,QAAQ,UAAU,IAAI;EAC5B,OAAO,QAAQ,OAAO,KAAK;CAC7B,EACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;CACnC,OAAO;AACT"}
|
package/lib/useState.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAErB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,EACD,OAAO,CAAC,EAAE,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GACzC,CAAC,
|
|
1
|
+
{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAErB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,EACD,OAAO,CAAC,EAAE,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GACzC,CAAC,CA0BH"}
|
package/lib/useState.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { deepEqual } from "@bemedev/app";
|
|
2
|
-
import { useEffect, useState as useState$1 } from "react";
|
|
1
|
+
import { deepEqual } from "@bemedev/app/utils";
|
|
2
|
+
import { useCallback, useEffect, useState as useState$1 } from "react";
|
|
3
3
|
//#region src/useState.ts
|
|
4
4
|
/**
|
|
5
5
|
* A hook that creates a React state from a service with a subscribe function.
|
|
@@ -11,21 +11,14 @@ import { useEffect, useState as useState$1 } from "react";
|
|
|
11
11
|
function useState(service, options) {
|
|
12
12
|
const { selector = (s) => s, equals = deepEqual } = options ?? {};
|
|
13
13
|
const [_state, setState] = useState$1(() => selector(service.state));
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}, [
|
|
23
|
-
_state,
|
|
24
|
-
setState,
|
|
25
|
-
selector,
|
|
26
|
-
equals,
|
|
27
|
-
service
|
|
28
|
-
]);
|
|
14
|
+
const _selector = useCallback(selector, [selector]);
|
|
15
|
+
const _equals = useCallback(equals, [equals]);
|
|
16
|
+
const sub = service.subscribe((nextState) => setState(_selector(nextState)), { equals: (prev, next) => {
|
|
17
|
+
const _prev = _selector(prev);
|
|
18
|
+
const _next = _selector(next);
|
|
19
|
+
return _equals(_prev, _next);
|
|
20
|
+
} });
|
|
21
|
+
useEffect(() => sub.unsubscribe, []);
|
|
29
22
|
return _state;
|
|
30
23
|
}
|
|
31
24
|
//#endregion
|
package/lib/useState.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useState.js","names":["useReactState"],"sources":["../src/useState.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { deepEqual } from '@bemedev/app';\nimport { useEffect, useState as useReactState } from 'react';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param options - Optional configuration options for selection and equality comparison.\n * @returns The selected state.\n */\nexport function useState<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n T = State<Eo, Tc, Ta>,\n>(\n service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n },\n options?: UseServiceOptions<Tc, Ta, Eo, T>,\n): T {\n const {\n selector = (s: State<Eo, Tc, Ta>) => s as T,\n equals = deepEqual<T>,\n } = options ?? {};\n\n const [_state, setState] = useReactState<T>(() =>\n selector(service.state),\n );\n\n
|
|
1
|
+
{"version":3,"file":"useState.js","names":["useReactState"],"sources":["../src/useState.ts"],"sourcesContent":["import type {\n AddSubscriber_F,\n EventObject,\n PrimitiveObject,\n State,\n} from '@bemedev/app';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useCallback, useEffect, useState as useReactState } from 'react';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param options - Optional configuration options for selection and equality comparison.\n * @returns The selected state.\n */\nexport function useState<\n Tc extends PrimitiveObject,\n Ta extends string,\n Eo extends EventObject,\n T = State<Eo, Tc, Ta>,\n>(\n service: {\n subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n state: State<Eo, Tc, Ta>;\n },\n options?: UseServiceOptions<Tc, Ta, Eo, T>,\n): T {\n const {\n selector = (s: State<Eo, Tc, Ta>) => s as T,\n equals = deepEqual<T>,\n } = options ?? {};\n\n const [_state, setState] = useReactState<T>(() =>\n selector(service.state),\n );\n\n const _selector = useCallback(selector, [selector]);\n const _equals = useCallback(equals, [equals]);\n\n const sub = service.subscribe(\n nextState => setState(_selector(nextState)),\n {\n equals: (prev, next) => {\n const _prev = _selector(prev);\n const _next = _selector(next);\n return _equals(_prev, _next);\n },\n },\n );\n\n useEffect(() => sub.unsubscribe, []);\n return _state;\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,SAAS,cACP,WAAW,CAAC;CAEhB,MAAM,CAAC,QAAQ,YAAYA,iBACzB,SAAS,QAAQ,KAAK,CACxB;CAEA,MAAM,YAAY,YAAY,UAAU,CAAC,QAAQ,CAAC;CAClD,MAAM,UAAU,YAAY,QAAQ,CAAC,MAAM,CAAC;CAE5C,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,UAAU,SAAS,CAAC,GAC1C,EACE,SAAS,MAAM,SAAS;EACtB,MAAM,QAAQ,UAAU,IAAI;EAC5B,MAAM,QAAQ,UAAU,IAAI;EAC5B,OAAO,QAAQ,OAAO,KAAK;CAC7B,EACF,CACF;CAEA,gBAAgB,IAAI,aAAa,CAAC,CAAC;CACnC,OAAO;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bemedev/app-reactjs",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.3",
|
|
4
4
|
"description": "Middleware between @bemedev/app and reactjs",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"app",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@vitest/coverage-v8": "^4.1.10",
|
|
58
58
|
"@vitest/ui": "4.1.10",
|
|
59
59
|
"glob": "^13.0.6",
|
|
60
|
-
"globals": "^17.
|
|
60
|
+
"globals": "^17.9.0",
|
|
61
61
|
"husky": "^9.1.7",
|
|
62
62
|
"jsdom": "^30.0.1",
|
|
63
63
|
"onchange": "^7.1.0",
|
|
@@ -71,15 +71,15 @@
|
|
|
71
71
|
"rolldown-plugin-dts": "^0.28.0",
|
|
72
72
|
"size-limit": "^13.0.3",
|
|
73
73
|
"tslib": "^2.8.1",
|
|
74
|
-
"tsx": "^4.23.
|
|
74
|
+
"tsx": "^4.23.4",
|
|
75
75
|
"typescript": "^6.0.3",
|
|
76
76
|
"vitest": "^4.1.10",
|
|
77
|
-
"@bemedev/app": "^1.9.
|
|
78
|
-
"@bemedev/app-vitest": "^1.9.
|
|
77
|
+
"@bemedev/app": "^1.9.3",
|
|
78
|
+
"@bemedev/app-vitest": "^1.9.3"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
81
81
|
"react": "^19.2.8",
|
|
82
|
-
"@bemedev/app": "^1.9.
|
|
82
|
+
"@bemedev/app": "^1.9.3"
|
|
83
83
|
},
|
|
84
84
|
"size-limit": [
|
|
85
85
|
{
|