@yaasl/react 0.7.0-alpha.0

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

@@ -0,0 +1,3 @@
+export { useAtom, useSetAtom, useAtomValue, useAtomDidInit } from "./useAtom";
+export { useDerivedValue } from "./useDerivedValue";
+export * from "@yaasl/core";

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

@@ -0,0 +1,32 @@
+import { SetStateAction } from "react";
+import { Atom, Stateful } from "@yaasl/core";
+/** Use an atom's value in the react 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 react lifecycle.
+ *
+ * @param atom Atom to be used.
+ *
+ * @returns A setter function for the atom.
+ **/
+export declare const useSetAtom: <ValueType>(atom: Atom<ValueType>) => (next: SetStateAction<ValueType>) => void;
+/** Use an atom's initialization state in the react lifecycle.
+ *
+ *  @param atom Atom to be used.
+ *
+ *  @returns A boolean indicating if the atom has finished initializing yet.
+ **/
+export declare const useAtomDidInit: <ValueType>(atom: Atom<ValueType>) => boolean;
+/** Use an atom's value and setter in the react 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: Atom<ValueType>) => readonly [ValueType, (next: SetStateAction<ValueType>) => void, boolean];

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

@@ -0,0 +1,8 @@
+import { Derive } from "@yaasl/core";
+/** Use a derived value in the react lifecycle.
+ *
+ * @param derived Derived instance to be used.
+ *
+ * @returns A stateful value.
+ **/
+export declare const useDerivedValue: <ValueType>(derived: Derive<ValueType>) => ValueType;

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

@@ -0,0 +1,2 @@
+import { Stateful } from "@yaasl/core";
+export declare const useStatefulValue: <ValueType>(atom: Stateful<ValueType>) => ValueType;

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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.useDerivedValue = exports.useAtomDidInit = exports.useAtomValue = exports.useSetAtom = exports.useAtom = void 0;
+var useAtom_1 = require("./useAtom");
+Object.defineProperty(exports, "useAtom", { enumerable: true, get: function () { return useAtom_1.useAtom; } });
+Object.defineProperty(exports, "useSetAtom", { enumerable: true, get: function () { return useAtom_1.useSetAtom; } });
+Object.defineProperty(exports, "useAtomValue", { enumerable: true, get: function () { return useAtom_1.useAtomValue; } });
+Object.defineProperty(exports, "useAtomDidInit", { enumerable: true, get: function () { return useAtom_1.useAtomDidInit; } });
+var useDerivedValue_1 = require("./useDerivedValue");
+Object.defineProperty(exports, "useDerivedValue", { enumerable: true, get: function () { return useDerivedValue_1.useDerivedValue; } });
+__exportStar(require("@yaasl/core"), exports);

package/dist/cjs/useAtom.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAtom = exports.useAtomDidInit = exports.useSetAtom = exports.useAtomValue = void 0;
+const react_1 = require("react");
+const useStatefulValue_1 = require("./useStatefulValue");
+/** Use an atom's value in the react lifecycle.
+ *
+ * @param atom Atom to be used.
+ *
+ * @returns A stateful value.
+ **/
+const useAtomValue = (atom) => (0, useStatefulValue_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, react_1.useCallback)((next) => atom.set(next), [atom]);
+exports.useSetAtom = useSetAtom;
+/** Use an atom's initialization state in the react lifecycle.
+ *
+ *  @param atom Atom to be used.
+ *
+ *  @returns A boolean indicating if the atom has finished initializing yet.
+ **/
+const useAtomDidInit = (atom) => {
+    const [didInit, setDidInit] = (0, react_1.useState)(atom.didInit === true);
+    (0, react_1.useEffect)(() => {
+        if (typeof atom.didInit === "boolean")
+            return;
+        void atom.didInit.then(() => setDidInit(true));
+    }, [atom.didInit]);
+    return didInit;
+};
+exports.useAtomDidInit = useAtomDidInit;
+/** Use an atom's value and setter in the react 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/useDerivedValue.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDerivedValue = void 0;
+const useStatefulValue_1 = require("./useStatefulValue");
+/** Use a derived value in the react lifecycle.
+ *
+ * @param derived Derived instance to be used.
+ *
+ * @returns A stateful value.
+ **/
+const useDerivedValue = (derived) => (0, useStatefulValue_1.useStatefulValue)(derived);
+exports.useDerivedValue = useDerivedValue;

package/dist/cjs/useStatefulValue.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatefulValue = void 0;
+const react_1 = require("react");
+const useStatefulValue = (atom) => (0, react_1.useSyncExternalStore)(set => atom.subscribe(set), () => atom.get());
+exports.useStatefulValue = useStatefulValue;

package/dist/mjs/index.js

@@ -0,0 +1,3 @@
+export { useAtom, useSetAtom, useAtomValue, useAtomDidInit } from "./useAtom";
+export { useDerivedValue } from "./useDerivedValue";
+export * from "@yaasl/core";

package/dist/mjs/useAtom.js

@@ -0,0 +1,45 @@
+import { useCallback, useState, useEffect } from "react";
+import { useStatefulValue } from "./useStatefulValue";
+/** Use an atom's value in the react lifecycle.
+ *
+ * @param atom Atom to be used.
+ *
+ * @returns A stateful 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) => useCallback((next) => atom.set(next), [atom]);
+/** Use an atom's initialization state in the react lifecycle.
+ *
+ *  @param atom Atom to be used.
+ *
+ *  @returns A boolean indicating if the atom has finished initializing yet.
+ **/
+export const useAtomDidInit = (atom) => {
+    const [didInit, setDidInit] = useState(atom.didInit === true);
+    useEffect(() => {
+        if (typeof atom.didInit === "boolean")
+            return;
+        void atom.didInit.then(() => setDidInit(true));
+    }, [atom.didInit]);
+    return didInit;
+};
+/** Use an atom's value and setter in the react 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/mjs/useDerivedValue.js

@@ -0,0 +1,8 @@
+import { useStatefulValue } from "./useStatefulValue";
+/** Use a derived value in the react lifecycle.
+ *
+ * @param derived Derived instance to be used.
+ *
+ * @returns A stateful value.
+ **/
+export const useDerivedValue = (derived) => useStatefulValue(derived);

package/dist/mjs/useStatefulValue.js

@@ -0,0 +1,2 @@
+import { useSyncExternalStore } from "react";
+export const useStatefulValue = (atom) => useSyncExternalStore(set => atom.subscribe(set), () => atom.get());

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@yaasl/react",
+  "version": "0.7.0-alpha.0",
+  "description": "yet another atomic store library (react)",
+  "author": "PrettyCoffee",
+  "license": "MIT",
+  "homepage": "https://github.com/PrettyCoffee/yaasl#readme",
+  "keywords": [
+    "atom",
+    "store",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PrettyCoffee/yaasl.git"
+  },
+  "bugs": {
+    "url": "https://github.com/PrettyCoffee/yaasl/issues"
+  },
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/@types/index.d.ts",
+  "exports": {
+    "types": "./dist/@types/index.d.ts",
+    "import": "./dist/mjs/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "scripts": {
+    "build": "run-s clean compile",
+    "clean": "rimraf ./dist",
+    "compile": "run-p compile:mjs compile:cjs compile:types",
+    "compile:mjs": "tsc -p ./tsconfig.node.json --outDir ./dist/mjs -m es2020 -t es2020",
+    "compile:cjs": "tsc -p ./tsconfig.node.json --outDir ./dist/cjs -m commonjs -t es2015",
+    "compile:types": "tsc -p ./tsconfig.node.json --outDir ./dist/@types --declaration --emitDeclarationOnly",
+    "test": "jest --testMatch ./**/*.test.*",
+    "test:watch": "npm run test -- --watchAll",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix",
+    "validate": "run-s lint test build"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "dependencies": {
+    "@yaasl/core": "0.7.0-alpha.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.54",
+    "react": "^18.2.0"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../.eslintrc",
+      "@pretty-cozy/eslint-config/react"
+    ]
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "npm run lint:fix"
+    ]
+  }
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json",
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./src"],
+  "exclude": ["./**/*.test.ts"],
+  "compilerOptions": {
+    "declaration": false,
+    "noEmit": false,
+  }
+}