@yaasl/preact 0.14.0 → 0.15.0-alpha.0

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,19 +1,11 @@
 import type { Stateful } from "@yaasl/core";
-import type { Updater } from "@yaasl/utils";
 /** Use an atom's value in the preact lifecycle.
  *
  * @param atom Atom to be used.
  *
  * @returns A stateful value.
  **/
-export declare const useAtomValue: <ValueType>(atom: Stateful<ValueType>) => ValueType;
-/** Set an atom's value in the preact lifecycle.
- *
- * @param atom Atom to be used.
- *
- * @returns A setter function for the atom.
- **/
-export declare const useSetAtom: <ValueType>(atom: Stateful<ValueType>) => ((next: Updater<ValueType>) => void);
+export declare const useAtom: <ValueType>(atom: Stateful<ValueType>) => ValueType;
 /** Use an atom's initialization state in the preact lifecycle.
  *
  *  @param atom Atom to be used.
@@ -21,12 +13,3 @@ export declare const useSetAtom: <ValueType>(atom: Stateful<ValueType>) => ((nex
  *  @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 preact lifecycle.
- *
- * **Note:** Use `useAtomValue` or `useSetAtom` to use value or setter separately.
- *
- * @param atom Atom to be used.
- *
- * @returns [value, setValue, didInit]
- **/
-export declare const useAtom: <ValueType>(atom: Stateful<ValueType>) => readonly [ValueType, (next: Updater<ValueType>) => void, boolean];

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

@@ -0,0 +1,12 @@
+import { Stateful } from "@yaasl/core";
+type InferValuesFromAtoms<TAtoms, TValues extends unknown[] = []> = TAtoms extends Stateful<infer TValue> ? [...TValues, TValue] : TAtoms extends [Stateful<infer Value>, ...infer Rest] ? InferValuesFromAtoms<Rest, [...TValues, Value]> : TValues;
+/** Compute a new value based on the state of an atom.
+ *
+ * @param atom Atom to be used.
+ * @param selector 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 Stateful | [Stateful, ...Stateful[]], TResult>(atoms: TAtoms, selector: (...states: InferValuesFromAtoms<TAtoms>) => TResult, compare?: (before: TResult, after: TResult) => boolean) => TResult;
+export {};

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,16 @@
 "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 compat_1 = require("preact/compat");
 const hooks_1 = require("preact/hooks");
-const use_stateful_1 = require("./use-stateful");
 /** Use an atom's value in the preact lifecycle.
  *
  * @param atom Atom to be used.
  *
  * @returns A stateful value.
  **/
-const useAtomValue = (atom) => (0, use_stateful_1.useStatefulValue)(atom);
-exports.useAtomValue = useAtomValue;
-/** Set an atom's value in the preact 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, compat_1.useSyncExternalStore)(set => atom.subscribe(set), () => atom.get());
+exports.useAtom = useAtom;
 /** Use an atom's initialization state in the preact lifecycle.
  *
  *  @param atom Atom to be used.
@@ -35,18 +27,3 @@ const useAtomDidInit = (atom) => {
     return didInit;
 };
 exports.useAtomDidInit = useAtomDidInit;
-/** Use an atom's value and setter in the preact lifecycle.
- *
- * **Note:** Use `useAtomValue` or `useSetAtom` to use value or setter separately.
- *
- * @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,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelector = void 0;
+const compat_1 = require("preact/compat");
+const hooks_1 = require("preact/hooks");
+const utils_1 = require("@yaasl/utils");
+/** Compute a new value based on the state of an atom.
+ *
+ * @param atom Atom to be used.
+ * @param selector 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, selector, compare) => {
+    const memoizedSelector = (0, hooks_1.useRef)((0, utils_1.memoizeFunction)(selector, compare));
+    (0, hooks_1.useEffect)(() => {
+        // eslint-disable-next-line react-compiler/react-compiler
+        memoizedSelector.current.resultFn = selector;
+        memoizedSelector.current.compareResult = compare;
+    });
+    const subscribe = (onStoreChange) => {
+        const atomArray = [atoms].flat();
+        const unsubscribers = atomArray.map(atom => atom.subscribe(onStoreChange));
+        return () => unsubscribers.forEach(fn => fn());
+    };
+    const getSnapshot = () => {
+        const atomArray = [atoms].flat();
+        const args = atomArray.map(atom => atom.get());
+        return memoizedSelector.current(...args);
+    };
+    return (0, compat_1.useSyncExternalStore)(subscribe, 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,12 @@
+import { useSyncExternalStore } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
-import { useStatefulValue, useSetStateful } from "./use-stateful";
 /** Use an atom's value in the preact lifecycle.
  *
  * @param atom Atom to be used.
  *
  * @returns A stateful value.
  **/
-export const useAtomValue = (atom) => useStatefulValue(atom);
-/** Set an atom's value in the preact 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());
 /** Use an atom's initialization state in the preact lifecycle.
  *
  *  @param atom Atom to be used.
@@ -29,17 +22,3 @@ export const useAtomDidInit = (atom) => {
     }, [atom.didInit]);
     return didInit;
 };
-/** Use an atom's value and setter in the preact lifecycle.
- *
- * **Note:** Use `useAtomValue` or `useSetAtom` to use value or setter separately.
- *
- * @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,30 @@
+import { useSyncExternalStore } from "preact/compat";
+import { useRef, useEffect } from "preact/hooks";
+import { memoizeFunction } from "@yaasl/utils";
+/** Compute a new value based on the state of an atom.
+ *
+ * @param atom Atom to be used.
+ * @param selector 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, selector, compare) => {
+    const memoizedSelector = useRef(memoizeFunction(selector, compare));
+    useEffect(() => {
+        // eslint-disable-next-line react-compiler/react-compiler
+        memoizedSelector.current.resultFn = selector;
+        memoizedSelector.current.compareResult = compare;
+    });
+    const subscribe = (onStoreChange) => {
+        const atomArray = [atoms].flat();
+        const unsubscribers = atomArray.map(atom => atom.subscribe(onStoreChange));
+        return () => unsubscribers.forEach(fn => fn());
+    };
+    const getSnapshot = () => {
+        const atomArray = [atoms].flat();
+        const args = atomArray.map(atom => atom.get());
+        return memoizedSelector.current(...args);
+    };
+    return useSyncExternalStore(subscribe, getSnapshot);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaasl/preact",
-  "version": "0.14.0",
+  "version": "0.15.0-alpha.0",
   "description": "yet another atomic store library (preact)",
   "author": "PrettyCoffee",
   "license": "MIT",
@@ -40,13 +40,13 @@
     "validate": "run-s lint test build"
   },
   "peerDependencies": {
-    "@yaasl/core": "^0.14.0",
-    "@yaasl/utils": "^0.14.0",
+    "@yaasl/core": "^0.15.0-alpha.0",
+    "@yaasl/utils": "^0.15.0-alpha.0",
     "preact": ">=10"
   },
   "devDependencies": {
-    "@yaasl/core": "^0.14.0",
-    "@yaasl/utils": "^0.14.0",
+    "@yaasl/core": "^0.15.0-alpha.0",
+    "@yaasl/utils": "^0.15.0-alpha.0",
     "preact": "^10.28.0"
   },
   "lint-staged": {

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

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

package/dist/cjs/use-stateful.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetStateful = exports.useStatefulValue = void 0;
-const compat_1 = require("preact/compat");
-const hooks_1 = require("preact/hooks");
-const utils_1 = require("@yaasl/utils");
-const useStatefulValue = (stateful) => (0, compat_1.useSyncExternalStore)(set => stateful.subscribe(set), () => stateful.get());
-exports.useStatefulValue = useStatefulValue;
-const useSetStateful = (stateful) => (0, hooks_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,11 +0,0 @@
-import { useSyncExternalStore } from "preact/compat";
-import { useCallback } from "preact/hooks";
-import { consoleMessage } from "@yaasl/utils";
-export const useStatefulValue = (stateful) => useSyncExternalStore(set => stateful.subscribe(set), () => 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]);