@yaasl/react 0.14.0 → 0.15.0-alpha.1

package/dist/@types/index.d.ts

@@ -1,2 +1,3 @@
-export { useAtom, useSetAtom, useAtomValue, useAtomDidInit } from "./use-atom";
+export { useAtom, useAtomDidInit } from "./use-atom";
+export { useSelector } from "./use-selector";
 export * from "@yaasl/core";

package/dist/@types/use-atom.d.ts

@@ -1,18 +1,12 @@
 import type { Stateful } from "@yaasl/core";
+import type { Subscribable } from "@yaasl/utils";
 /** Use an atom's value in the React lifecycle.
  *
  * @param atom Atom to be used.
  *
  * @returns The atom's value.
  **/
-export declare const useAtomValue: <ValueType>(atom: Stateful<ValueType>) => ValueType;
-/** Set an atom's value in the React lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns A setter function for the atom.
- **/
-export declare const useSetAtom: <ValueType>(atom: Stateful<ValueType>) => (next: import("react").SetStateAction<ValueType>) => void;
+export declare const useAtom: <ValueType>(atom: Subscribable<ValueType>) => ValueType;
 /** Use an atom's initialization state in the React lifecycle.
  *
  *  @param atom Atom to be used.
@@ -20,10 +14,3 @@ export declare const useSetAtom: <ValueType>(atom: Stateful<ValueType>) => (next
  *  @returns A boolean indicating if the atom has finished initializing yet.
  **/
 export declare const useAtomDidInit: <ValueType>(atom: Stateful<ValueType>) => boolean;
-/** Use an atom's value and setter in the React lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns [value, setValue, didInit]
- **/
-export declare const useAtom: <ValueType>(atom: Stateful<ValueType>) => readonly [ValueType, (next: import("react").SetStateAction<ValueType>) => void, boolean];

package/dist/@types/use-selector.d.ts

@@ -0,0 +1,10 @@
+import { type Subscribable, type InferValues } from "@yaasl/utils";
+/** Compute a new value based on the state of an atom.
+ *
+ * @param atom Atom to be used.
+ * @param combiner Function to retrieve the new value.
+ * @param compare Function to compare the previous with a newer result. Defaults to a custom equality function.
+ *
+ * @returns The computed value.
+ **/
+export declare const useSelector: <TAtoms extends Subscribable | [Subscribable, ...Subscribable[]], TResult>(atoms: TAtoms, combiner: (...states: InferValues<TAtoms>) => TResult, compare?: (before: TResult, after: TResult) => boolean) => TResult;

package/dist/cjs/index.js

@@ -14,10 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAtomDidInit = exports.useAtomValue = exports.useSetAtom = exports.useAtom = void 0;
+exports.useSelector = exports.useAtomDidInit = exports.useAtom = void 0;
 var use_atom_1 = require("./use-atom");
 Object.defineProperty(exports, "useAtom", { enumerable: true, get: function () { return use_atom_1.useAtom; } });
-Object.defineProperty(exports, "useSetAtom", { enumerable: true, get: function () { return use_atom_1.useSetAtom; } });
-Object.defineProperty(exports, "useAtomValue", { enumerable: true, get: function () { return use_atom_1.useAtomValue; } });
 Object.defineProperty(exports, "useAtomDidInit", { enumerable: true, get: function () { return use_atom_1.useAtomDidInit; } });
+var use_selector_1 = require("./use-selector");
+Object.defineProperty(exports, "useSelector", { enumerable: true, get: function () { return use_selector_1.useSelector; } });
 __exportStar(require("@yaasl/core"), exports);

package/dist/cjs/use-atom.js

@@ -1,24 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAtom = exports.useAtomDidInit = exports.useSetAtom = exports.useAtomValue = void 0;
+exports.useAtomDidInit = exports.useAtom = void 0;
 const react_1 = require("react");
-const use_stateful_1 = require("./use-stateful");
 /** Use an atom's value in the React lifecycle.
  *
  * @param atom Atom to be used.
  *
  * @returns The atom's value.
  **/
-const useAtomValue = (atom) => (0, use_stateful_1.useStatefulValue)(atom);
-exports.useAtomValue = useAtomValue;
-/** Set an atom's value in the React lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns A setter function for the atom.
- **/
-const useSetAtom = (atom) => (0, use_stateful_1.useSetStateful)(atom);
-exports.useSetAtom = useSetAtom;
+const useAtom = (atom) => (0, react_1.useSyncExternalStore)(set => atom.subscribe(set), () => atom.get(), () => atom.get());
+exports.useAtom = useAtom;
 /** Use an atom's initialization state in the React lifecycle.
  *
  *  @param atom Atom to be used.
@@ -35,16 +26,3 @@ const useAtomDidInit = (atom) => {
     return didInit;
 };
 exports.useAtomDidInit = useAtomDidInit;
-/** Use an atom's value and setter in the React lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns [value, setValue, didInit]
- **/
-const useAtom = (atom) => {
-    const state = (0, exports.useAtomValue)(atom);
-    const setState = (0, exports.useSetAtom)(atom);
-    const didInit = (0, exports.useAtomDidInit)(atom);
-    return [state, setState, didInit];
-};
-exports.useAtom = useAtom;

package/dist/cjs/use-selector.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelector = void 0;
+const react_1 = require("react");
+const utils_1 = require("@yaasl/utils");
+/** Compute a new value based on the state of an atom.
+ *
+ * @param atom Atom to be used.
+ * @param combiner Function to retrieve the new value.
+ * @param compare Function to compare the previous with a newer result. Defaults to a custom equality function.
+ *
+ * @returns The computed value.
+ **/
+const useSelector = (atoms, combiner, compare) => {
+    const memoizedCombiner = (0, react_1.useRef)((0, utils_1.memoizeFunction)(combiner, compare));
+    (0, react_1.useEffect)(() => {
+        memoizedCombiner.current.resultFn = combiner;
+        memoizedCombiner.current.compareResult = compare;
+    });
+    const subscribe = (onStoreChange) => {
+        const unsubscribers = (0, utils_1.toArray)(atoms).map(atom => atom.subscribe(onStoreChange));
+        return () => unsubscribers.forEach(fn => fn());
+    };
+    const getSnapshot = () => {
+        const args = (0, utils_1.toArray)(atoms).map(atom => atom.get());
+        return memoizedCombiner.current(...args);
+    };
+    return (0, react_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+};
+exports.useSelector = useSelector;

package/dist/esm/index.js

@@ -1,2 +1,3 @@
-export { useAtom, useSetAtom, useAtomValue, useAtomDidInit } from "./use-atom";
+export { useAtom, useAtomDidInit } from "./use-atom";
+export { useSelector } from "./use-selector";
 export * from "@yaasl/core";

package/dist/esm/use-atom.js

@@ -1,19 +1,11 @@
-import { useState, useEffect } from "react";
-import { useSetStateful, useStatefulValue } from "./use-stateful";
+import { useState, useEffect, useSyncExternalStore } from "react";
 /** Use an atom's value in the React lifecycle.
  *
  * @param atom Atom to be used.
  *
  * @returns The atom's value.
  **/
-export const useAtomValue = (atom) => useStatefulValue(atom);
-/** Set an atom's value in the React lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns A setter function for the atom.
- **/
-export const useSetAtom = (atom) => useSetStateful(atom);
+export const useAtom = (atom) => useSyncExternalStore(set => atom.subscribe(set), () => atom.get(), () => atom.get());
 /** Use an atom's initialization state in the React lifecycle.
  *
  *  @param atom Atom to be used.
@@ -29,15 +21,3 @@ export const useAtomDidInit = (atom) => {
     }, [atom.didInit]);
     return didInit;
 };
-/** Use an atom's value and setter in the React lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns [value, setValue, didInit]
- **/
-export const useAtom = (atom) => {
-    const state = useAtomValue(atom);
-    const setState = useSetAtom(atom);
-    const didInit = useAtomDidInit(atom);
-    return [state, setState, didInit];
-};

package/dist/esm/use-selector.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { memoizeFunction, toArray, } from "@yaasl/utils";
+/** Compute a new value based on the state of an atom.
+ *
+ * @param atom Atom to be used.
+ * @param combiner Function to retrieve the new value.
+ * @param compare Function to compare the previous with a newer result. Defaults to a custom equality function.
+ *
+ * @returns The computed value.
+ **/
+export const useSelector = (atoms, combiner, compare) => {
+    const memoizedCombiner = useRef(memoizeFunction(combiner, compare));
+    useEffect(() => {
+        memoizedCombiner.current.resultFn = combiner;
+        memoizedCombiner.current.compareResult = compare;
+    });
+    const subscribe = (onStoreChange) => {
+        const unsubscribers = toArray(atoms).map(atom => atom.subscribe(onStoreChange));
+        return () => unsubscribers.forEach(fn => fn());
+    };
+    const getSnapshot = () => {
+        const args = toArray(atoms).map(atom => atom.get());
+        return memoizedCombiner.current(...args);
+    };
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaasl/react",
-  "version": "0.14.0",
+  "version": "0.15.0-alpha.1",
   "description": "yet another atomic store library (react)",
   "author": "PrettyCoffee",
   "license": "MIT",
@@ -40,15 +40,15 @@
     "validate": "run-s lint test build"
   },
   "peerDependencies": {
-    "@yaasl/core": "^0.14.0",
-    "@yaasl/utils": "^0.14.0",
+    "@yaasl/core": "^0.15.0-alpha.1",
+    "@yaasl/utils": "^0.15.0-alpha.1",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",
-    "@types/react": "^19.2.7",
-    "@yaasl/core": "^0.14.0",
-    "@yaasl/utils": "^0.14.0",
+    "@types/react": "^19.2.8",
+    "@yaasl/core": "^0.15.0-alpha.1",
+    "@yaasl/utils": "^0.15.0-alpha.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },

package/dist/@types/use-stateful.d.ts

@@ -1,4 +0,0 @@
-import { SetStateAction } from "react";
-import type { Stateful } from "@yaasl/core";
-export declare const useStatefulValue: <ValueType>(stateful: Stateful<ValueType>) => ValueType;
-export declare const useSetStateful: <ValueType>(stateful: Stateful<ValueType>) => (next: SetStateAction<ValueType>) => void;

package/dist/cjs/use-stateful.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetStateful = exports.useStatefulValue = void 0;
-const react_1 = require("react");
-const utils_1 = require("@yaasl/utils");
-const useStatefulValue = (stateful) => (0, react_1.useSyncExternalStore)(set => stateful.subscribe(set), () => stateful.get(), () => stateful.get());
-exports.useStatefulValue = useStatefulValue;
-const useSetStateful = (stateful) => (0, react_1.useCallback)((next) => {
-    if (!("set" in stateful) || !(stateful.set instanceof Function)) {
-        throw new Error((0, utils_1.consoleMessage)("Atom does not have a set method"));
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    stateful.set(next);
-}, [stateful]);
-exports.useSetStateful = useSetStateful;

package/dist/esm/use-stateful.js

@@ -1,10 +0,0 @@
-import { useCallback, useSyncExternalStore } from "react";
-import { consoleMessage } from "@yaasl/utils";
-export const useStatefulValue = (stateful) => useSyncExternalStore(set => stateful.subscribe(set), () => stateful.get(), () => stateful.get());
-export const useSetStateful = (stateful) => useCallback((next) => {
-    if (!("set" in stateful) || !(stateful.set instanceof Function)) {
-        throw new Error(consoleMessage("Atom does not have a set method"));
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    stateful.set(next);
-}, [stateful]);