@bemedev/app-reactjs 1.7.0 → 1.9.0

package/README.md

@@ -32,10 +32,10 @@ service.start();
 
 function MyComponent() {
   // 1. Select a specific slice of context
-  const count = useService(service, s => s.context.count);
+  const count = useService(service, { selector: s => s.context.count });
 
   // 2. Or track the active state value
-  const stateValue = useService(service, s => s.value);
+  const stateValue = useService(service, { selector: s => s.value });
 
   // 3. Or track the whole state object
   const state = useService(service);
@@ -53,15 +53,15 @@ function MyComponent() {
 
 ## API Reference
 
-### `useService(service, selector?)`
+### `useService(service, options?)`
 
 Creates a React state hook that updates whenever the interpreter
 transitions, using deep comparison to prevent unnecessary renders.
 
-| Parameter  | Type                    | Description                                                            |
-| ---------- | ----------------------- | ---------------------------------------------------------------------- |
-| `service`  | `Interpreter`           | The `@bemedev/app` interpreter service instance.                       |
-| `selector` | `(state: State) => any` | Optional selector function to slice and track specific parts of state. |
+| Parameter | Type                | Description                                                                         |
+| --------- | ------------------- | ----------------------------------------------------------------------------------- |
+| `service` | `Interpreter`       | The `@bemedev/app` interpreter service instance.                                    |
+| `options` | `UseServiceOptions` | Optional object containing `selector` and/or custom `equality` comparison function. |
 
 Returns the selected state or slice.
 

package/lib/useService.cjs

@@ -1,20 +1,23 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let _bemedev_app_utils = require("@bemedev/app/utils");
+let _bemedev_app = require("@bemedev/app");
 let react = require("react");
 //#region src/useService.ts
 /**
 * A hook that creates a React state from a service with a subscribe function.
 *
 * @param service - The service containing the state and subscribe method.
-* @param selector - A function to select the desired slice of state.
+* @param options - Optional configuration options for selection and equality comparison.
 * @returns The selected state.
 */
-function useService(service, selector = (s) => s) {
+function useService(service, options) {
+	const { selector = (s) => s, equality = (first, next) => (0, _bemedev_app.deepEqual)(first, next) } = options ?? {};
 	const [state, setState] = (0, react.useState)(() => selector(service.state));
 	const sub = service.subscribe((nextState) => setState(selector(nextState)), { equals: (first, next) => {
-		return (0, _bemedev_app_utils.deepEqual)(selector(first), selector(next));
+		const _first = selector(first);
+		const _next = selector(next);
+		return equality(_first, _next);
 	} });
-	(0, react.useEffect)(() => sub.unsubscribe, [service, selector]);
+	(0, react.useEffect)(() => sub.unsubscribe, []);
 	return state;
 }
 //#endregion

package/lib/useService.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useService.cjs","names":[],"sources":["../src/useService.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app/types';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useEffect, useState } from 'react';\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 selector - A function to select the desired slice of state.\n * @returns The selected state.\n */\nexport function useService<\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  selector: (state: State<Eo, Tc, Ta>) => T = (s: State<Eo, Tc, Ta>) =>\n    s as unknown as T,\n): T {\n  const [state, setState] = useState<T>(() => selector(service.state));\n\n  const sub = service.subscribe(\n    nextState => setState(selector(nextState)),\n    {\n      equals: (first, next) => {\n        const _first = selector(first);\n        const _next = selector(next);\n        return deepEqual(_first, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, [service, selector]);\n  return state;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,WAMd,SAIA,YAA6C,MAC3C,GACC;CACH,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,SAAA,OAA8B,SAAS,QAAQ,KAAK,CAAC;CAEnE,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EACE,SAAS,OAAO,SAAS;EAGvB,QAAA,GAAA,mBAAA,UAAA,CAFe,SAAS,KAEF,GADR,SAAS,IACM,CAAC;CAChC,EACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,SAAS,QAAQ,CAAC;CACpD,OAAO;AACT"}
+{"version":3,"file":"useService.cjs","names":["deepEqual","useState"],"sources":["../src/useService.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 } from 'react';\n\nexport type UseServiceOptions<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n  T = State<Eo, Tc, Ta>,\n> = {\n  selector?: (state: State<Eo, Tc, Ta>) => T;\n  equality?: (first: T, next: T) => boolean;\n};\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 useService<\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    equality = (first: T, next: T) => deepEqual(first, next),\n  } = options ?? {};\n\n  const [state, setState] = useState<T>(() => selector(service.state));\n\n  const sub = service.subscribe(\n    nextState => setState(selector(nextState)),\n    {\n      equals: (first, next) => {\n        const _first = selector(first);\n        const _next = selector(next);\n        return equality(_first, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, []);\n  return state;\n}\n"],"mappings":";;;;;;;;;;;AA0BA,SAAgB,WAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,YAAY,OAAU,UAAA,GAAYA,aAAAA,UAAAA,CAAU,OAAO,IAAI,MACrD,WAAW,CAAC;CAEhB,MAAM,CAAC,OAAO,aAAA,GAAYC,MAAAA,SAAAA,OAAkB,SAAS,QAAQ,KAAK,CAAC;CAEnE,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EACE,SAAS,OAAO,SAAS;EACvB,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,QAAQ,SAAS,IAAI;EAC3B,OAAO,SAAS,QAAQ,KAAK;CAC/B,EACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;CACnC,OAAO;AACT"}

package/lib/useService.d.ts

@@ -1,13 +1,17 @@
-import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app/types';
+import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+export type UseServiceOptions<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject, T = State<Eo, Tc, Ta>> = {
+    selector?: (state: State<Eo, Tc, Ta>) => T;
+    equality?: (first: T, next: T) => boolean;
+};
 /**
  * A hook that creates a React state from a service with a subscribe function.
  *
  * @param service - The service containing the state and subscribe method.
- * @param selector - A function to select the desired slice of state.
+ * @param options - Optional configuration options for selection and equality comparison.
  * @returns The selected state.
  */
 export declare function useService<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject, T = State<Eo, Tc, Ta>>(service: {
     subscribe: AddSubscriber_F<Tc, Ta, Eo>;
     state: State<Eo, Tc, Ta>;
-}, selector?: (state: State<Eo, Tc, Ta>) => T): T;
+}, options?: UseServiceOptions<Tc, Ta, Eo, T>): T;
 //# sourceMappingURL=useService.d.ts.map

package/lib/useService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useService.d.ts","sourceRoot":"","sources":["../src/useService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,oBAAoB,CAAC;AAI5B;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,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,QAAQ,GAAE,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,KAAK,CACrB,GAClB,CAAC,CAgBH"}
+{"version":3,"file":"useService.d.ts","sourceRoot":"","sources":["../src/useService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,iBAAiB,CAC3B,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IACnB;IACF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CAC3C,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,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,CAqBH"}

package/lib/useService.js

@@ -1,19 +1,22 @@
-import { deepEqual } from "@bemedev/app/utils";
+import { deepEqual } from "@bemedev/app";
 import { useEffect, useState } from "react";
 //#region src/useService.ts
 /**
 * A hook that creates a React state from a service with a subscribe function.
 *
 * @param service - The service containing the state and subscribe method.
-* @param selector - A function to select the desired slice of state.
+* @param options - Optional configuration options for selection and equality comparison.
 * @returns The selected state.
 */
-function useService(service, selector = (s) => s) {
+function useService(service, options) {
+	const { selector = (s) => s, equality = (first, next) => deepEqual(first, next) } = options ?? {};
 	const [state, setState] = useState(() => selector(service.state));
 	const sub = service.subscribe((nextState) => setState(selector(nextState)), { equals: (first, next) => {
-		return deepEqual(selector(first), selector(next));
+		const _first = selector(first);
+		const _next = selector(next);
+		return equality(_first, _next);
 	} });
-	useEffect(() => sub.unsubscribe, [service, selector]);
+	useEffect(() => sub.unsubscribe, []);
 	return state;
 }
 //#endregion

package/lib/useService.js.map

@@ -1 +1 @@
-{"version":3,"file":"useService.js","names":[],"sources":["../src/useService.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app/types';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useEffect, useState } from 'react';\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 selector - A function to select the desired slice of state.\n * @returns The selected state.\n */\nexport function useService<\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  selector: (state: State<Eo, Tc, Ta>) => T = (s: State<Eo, Tc, Ta>) =>\n    s as unknown as T,\n): T {\n  const [state, setState] = useState<T>(() => selector(service.state));\n\n  const sub = service.subscribe(\n    nextState => setState(selector(nextState)),\n    {\n      equals: (first, next) => {\n        const _first = selector(first);\n        const _next = selector(next);\n        return deepEqual(_first, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, [service, selector]);\n  return state;\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,WAMd,SAIA,YAA6C,MAC3C,GACC;CACH,MAAM,CAAC,OAAO,YAAY,eAAkB,SAAS,QAAQ,KAAK,CAAC;CAEnE,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EACE,SAAS,OAAO,SAAS;EAGvB,OAAO,UAFQ,SAAS,KAEF,GADR,SAAS,IACM,CAAC;CAChC,EACF,CACF;CAEA,gBAAgB,IAAI,aAAa,CAAC,SAAS,QAAQ,CAAC;CACpD,OAAO;AACT"}
+{"version":3,"file":"useService.js","names":[],"sources":["../src/useService.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 } from 'react';\n\nexport type UseServiceOptions<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n  T = State<Eo, Tc, Ta>,\n> = {\n  selector?: (state: State<Eo, Tc, Ta>) => T;\n  equality?: (first: T, next: T) => boolean;\n};\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 useService<\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    equality = (first: T, next: T) => deepEqual(first, next),\n  } = options ?? {};\n\n  const [state, setState] = useState<T>(() => selector(service.state));\n\n  const sub = service.subscribe(\n    nextState => setState(selector(nextState)),\n    {\n      equals: (first, next) => {\n        const _first = selector(first);\n        const _next = selector(next);\n        return equality(_first, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, []);\n  return state;\n}\n"],"mappings":";;;;;;;;;;AA0BA,SAAgB,WAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,YAAY,OAAU,SAAY,UAAU,OAAO,IAAI,MACrD,WAAW,CAAC;CAEhB,MAAM,CAAC,OAAO,YAAY,eAAkB,SAAS,QAAQ,KAAK,CAAC;CAEnE,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EACE,SAAS,OAAO,SAAS;EACvB,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,QAAQ,SAAS,IAAI;EAC3B,OAAO,SAAS,QAAQ,KAAK;CAC/B,EACF,CACF;CAEA,gBAAgB,IAAI,aAAa,CAAC,CAAC;CACnC,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/app-reactjs",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Middleware between @bemedev/app and reactjs",
   "keywords": [
     "app",
@@ -44,43 +44,42 @@
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "devDependencies": {
-    "@bemedev/decompose": "2.2.0",
-    "@bemedev/dev-utils": "^0.8.3",
+    "@bemedev/decompose": "2.3.0",
+    "@bemedev/dev-utils": "^1.1.1",
     "@bemedev/sleep": "^0.2.2",
-    "@size-limit/file": "^12.1.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.2.0",
+    "@size-limit/file": "^13.0.2",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^26.1.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitest/coverage-v8": "^4.1.9",
-    "@vitest/ui": "4.1.9",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/ui": "4.1.10",
     "glob": "^13.0.6",
-    "globals": "^17.7.0",
+    "globals": "^17.8.0",
     "husky": "^9.1.7",
-    "jsdom": "^29.1.1",
+    "jsdom": "^30.0.1",
     "onchange": "^7.1.0",
-    "oxfmt": "^0.57.0",
-    "oxlint": "^1.72.0",
-    "prettier": "^3.9.4",
+    "oxfmt": "^0.61.0",
+    "oxlint": "^1.76.0",
+    "prettier": "^3.9.6",
     "pretty-quick": "^4.2.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "rolldown": "1.1.4",
-    "rolldown-plugin-dts": "^0.26.0",
-    "size-limit": "^12.1.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "rolldown": "1.2.1",
+    "rolldown-plugin-dts": "^0.27.14",
+    "size-limit": "^13.0.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.22.4",
+    "tsx": "^4.23.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9",
-    "@bemedev/app-vitest": "^1.7.0",
-    "@bemedev/app": "^1.7.0"
+    "vitest": "^4.1.10",
+    "@bemedev/app": "^1.9.0",
+    "@bemedev/app-vitest": "^1.9.0"
   },
   "peerDependencies": {
-    "@bemedev/decompose": "2.2.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "@bemedev/app": "^1.7.0"
+    "react": "^19.2.8",
+    "@bemedev/app": "^1.9.0"
   },
   "size-limit": [
     {