rxfy-react 0.2.0

package/README.md

@@ -0,0 +1,36 @@
+# rxfy-react
+
+`rxfy-react` — official bindings of `rxfy` for `react`
+
+# install
+
+`pnpm install rxfy-react`
+
+# api
+
+- useEdge — use edge state
+- <Edge /> — useEdge wrapped with render props pattern
+
+# example
+
+```tsx
+import PQueue from "p-queue";
+import { useMemo } from "react";
+import { of } from "rxjs";
+import { createAtom, createState, createStore } from "rxfy";
+import { Edge } from "rxfy-react";
+
+const queue = new PQueue({ concurrency: 5 });
+const state = createAtom(createState({}));
+const store = createStore(queue, state);
+const userStore = store.factory("users", (id) => of({ id }));
+
+export function User({ userId }: { userId: string }) {
+  const user = useMemo(() => userStore.get(userId), [userId]);
+  return (
+    <Edge edge={user} pending={<span>Loading..</span>} rejected={(err) => <span>{JSON.stringify(err)}</span>}>
+      {(user) => <div key={user.id}>{user.id}</div>}
+    </Edge>
+  );
+}
+```

package/dist/index.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Edge: () => Edge,
+  useEdge: () => useEdge
+});
+module.exports = __toCommonJS(src_exports);
+var import_rxfy = require("rxfy");
+var import_react = require("react");
+function useEdge(edge) {
+  const [state, setState] = (0, import_react.useState)(edge.subject$.get());
+  (0, import_react.useEffect)(() => {
+    const sub = edge.subject$.subscribe((x) => setState(x));
+    return () => sub.unsubscribe();
+  }, [edge]);
+  return state;
+}
+function Edge({ edge, children, rejected = null, pending = null }) {
+  const state = useEdge(edge);
+  switch (state.type) {
+    case import_rxfy.StatusEnum.REJECTED:
+      return renderWithParams(rejected, state.error);
+    case import_rxfy.StatusEnum.FULFILLED:
+      return renderWithParams(children, state.value);
+    default:
+      return pending;
+  }
+}
+function renderWithParams(fn, data) {
+  if (typeof fn === "function") {
+    return fn(data);
+  }
+  return fn;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Edge,
+  useEdge
+});

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { IEdge, StatusEnum } from 'rxfy';
+
+declare function useEdge<TData>(edge: IEdge<TData>): ({
+    type: StatusEnum.IDLE;
+} & {
+    type: StatusEnum;
+}) | ({
+    type: StatusEnum.PENDING;
+} & {
+    type: StatusEnum;
+}) | ({
+    type: StatusEnum.REJECTED;
+    error: unknown;
+} & {
+    type: StatusEnum;
+}) | ({
+    type: StatusEnum.FULFILLED;
+    value: TData;
+} & {
+    type: StatusEnum;
+});
+type IEdgeProps<TData> = {
+    edge: IEdge<TData>;
+    children: IRenderFn<TData>;
+    rejected?: IRenderFn<unknown>;
+    pending?: React.ReactNode;
+};
+declare function Edge<TData>({ edge, children, rejected, pending }: IEdgeProps<TData>): react.ReactNode;
+type IRenderFn<TData> = React.ReactNode | ((data: TData) => React.ReactNode);
+
+export { Edge, type IRenderFn, useEdge };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { IEdge, StatusEnum } from 'rxfy';
+
+declare function useEdge<TData>(edge: IEdge<TData>): ({
+    type: StatusEnum.IDLE;
+} & {
+    type: StatusEnum;
+}) | ({
+    type: StatusEnum.PENDING;
+} & {
+    type: StatusEnum;
+}) | ({
+    type: StatusEnum.REJECTED;
+    error: unknown;
+} & {
+    type: StatusEnum;
+}) | ({
+    type: StatusEnum.FULFILLED;
+    value: TData;
+} & {
+    type: StatusEnum;
+});
+type IEdgeProps<TData> = {
+    edge: IEdge<TData>;
+    children: IRenderFn<TData>;
+    rejected?: IRenderFn<unknown>;
+    pending?: React.ReactNode;
+};
+declare function Edge<TData>({ edge, children, rejected, pending }: IEdgeProps<TData>): react.ReactNode;
+type IRenderFn<TData> = React.ReactNode | ((data: TData) => React.ReactNode);
+
+export { Edge, type IRenderFn, useEdge };

package/dist/index.js

@@ -0,0 +1,32 @@
+// src/index.tsx
+import { StatusEnum } from "rxfy";
+import { useEffect, useState } from "react";
+function useEdge(edge) {
+  const [state, setState] = useState(edge.subject$.get());
+  useEffect(() => {
+    const sub = edge.subject$.subscribe((x) => setState(x));
+    return () => sub.unsubscribe();
+  }, [edge]);
+  return state;
+}
+function Edge({ edge, children, rejected = null, pending = null }) {
+  const state = useEdge(edge);
+  switch (state.type) {
+    case StatusEnum.REJECTED:
+      return renderWithParams(rejected, state.error);
+    case StatusEnum.FULFILLED:
+      return renderWithParams(children, state.value);
+    default:
+      return pending;
+  }
+}
+function renderWithParams(fn, data) {
+  if (typeof fn === "function") {
+    return fn(data);
+  }
+  return fn;
+}
+export {
+  Edge,
+  useEdge
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "rxfy-react",
+  "version": "0.2.0",
+  "description": "rxfy bindings for react",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "dependencies": {
+    "@vanya2h/utils": "0.1.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/lodash": "^4.17.16",
+    "@types/react": "^19.0.12",
+    "eslint": "^9.21.0",
+    "immutable": "^5.1.1",
+    "jiti": "^2.4.2",
+    "jsdom": "^26.0.0",
+    "lodash": "^4.17.21",
+    "p-queue": "^8.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rimraf": "^6.0.1",
+    "rxjs": "^7.8.2",
+    "tsup": "^8.3.6",
+    "tsx": "^4.19.2",
+    "vitest": "^3.0.5",
+    "zod": "^3.24.2",
+    "@vanya2h/typescript-config": "0.2.1",
+    "@vanya2h/eslint-config": "0.2.1",
+    "rxfy": "0.2.1"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "rxfy": "0.2.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsup",
+    "check-types": "tsc --noEmit",
+    "clean": "rimraf ./dist",
+    "dev": "tsup --watch --silent",
+    "lint": "eslint .",
+    "test": "vitest run --passWithNoTests"
+  }
+}