react-resource-ui 0.1.0 → 0.1.2

package/README.md

@@ -1,73 +1,110 @@
-# React + TypeScript + Vite
+# React Resource UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A data orchestration layer for React focused on pagination and list-based UI patterns.
 
-Currently, two official plugins are available:
+npm: https://www.npmjs.com/package/react-resource-ui
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+---
 
-## React Compiler
+## Overview
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+React Resource UI provides a unified abstraction for handling data fetching, pagination, and virtualization in React applications.
 
-## Expanding the ESLint configuration
+It simplifies common UI patterns such as tables and lists by removing the need to rewrite logic when switching between pagination strategies.
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+---
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## Installation
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+npm install react-resource-ui
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+---
+
+## Basic Usage
+
+import { useResource } from "react-resource-ui";
+
+function App() {
+  const { data, loading, error, page, setPage } = useResource({
+    source: async ({ page = 1, pageSize = 10 }) => {
+      const skip = (page - 1) * pageSize;
+      const res = await fetch(
+        `https://dummyjson.com/todos?limit=${pageSize}&skip=${skip}`
+      );
+      const json = await res.json();
+      return json.todos;
+    },
+
+    pagination: {
+      type: "page",
+      pageSize: 20,
     },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+
+    virtualization: {
+      enabled: true,
+      itemHeight: 40,
+      containerHeight: 400,
     },
-  },
-])
-```
+  });
+
+  return null;
+}
+
+---
+
+## Pagination Modes
+
+The same logic can be reused across different pagination strategies by updating configuration only.
+
+Page-based:
+pagination: { type: "page" }
+
+Load more:
+pagination: { type: "loadmore" }
+
+Infinite scroll:
+pagination: { type: "infinite" }
+
+---
+
+## Features
+
+- Unified API for multiple pagination strategies
+- Built-in virtualization support
+- Works with async functions, URLs, or static data sources
+- Request deduplication using request tracking
+- Lightweight page-based caching
+- Designed for table and list UIs
+
+---
+
+## Design Goals
+
+- Reduce UI-specific data handling complexity
+- Avoid rewriting logic when changing pagination behavior
+- Provide a higher-level abstraction over common data-fetching patterns
+- Keep configuration simple and predictable
+
+---
+
+## Status
+
+Version: 0.1.0
+
+This is an early release focused on core functionality.
+Additional testing and edge case handling are in progress.
+
+---
+
+## Roadmap
+
+- Sorting and filtering support
+- Form integration
+- Improved caching strategies
+- Developer tooling and debug utilities
+
+---
+
+## Author
+
+Kalyan Mantha

package/dist/index.cjs

@@ -74,56 +74,61 @@ function useResource(config) {
   const prevScrollTop = (0, import_react.useRef)(0);
   const scrollRef = (0, import_react.useRef)(null);
   const hasMore = (0, import_react.useRef)(true);
-  async function asyncNormalize() {
+  async function asyncNormalize(localPage) {
     const params = {
-      page,
+      page: localPage,
       pageSize
     };
-    setLoading(true);
-    requestTracker.current += 1;
-    const currentRequestId = requestTracker.current;
-    setError(null);
     try {
       const rawData = await getData(params);
-      if (currentRequestId !== requestTracker.current) {
-        setLoading(false);
-        return;
-      }
-      ;
-      setLoading(false);
-      return rawData;
+      return { data: rawData, error: null };
     } catch (err) {
-      if (currentRequestId === requestTracker.current) {
-        if (err instanceof Error) {
-          setError(err);
-        } else {
-          setError(new Error("unknown error"));
-        }
-        setLoading(false);
-      }
+      return {
+        data: null,
+        error: err instanceof Error ? err : new Error("unknown error")
+      };
     }
   }
   async function orchestrator() {
     const isPageMode = pagination?.type === "page";
     prevScrollTop.current = scrollTop;
     const cached = cache.current[page];
-    if (isPageMode) {
-      if (cached) {
-        setData(cached);
-        return;
-      }
+    if (isPageMode && cached) {
+      setData(cached);
+      return;
     }
-    const rawData = await asyncNormalize();
-    if (!rawData) return;
+    const localPage = page;
+    requestTracker.current += 1;
+    const currentRequestId = requestTracker.current;
+    setLoading(true);
+    setError(null);
+    const result = await asyncNormalize(localPage);
+    if (currentRequestId !== requestTracker.current) {
+      setLoading(false);
+      return;
+    }
+    ;
+    setLoading(false);
+    if (result.error) {
+      setError(result.error);
+      return;
+    }
+    const rawData = result.data;
+    if (!rawData || rawData.length < 1) return;
     if (rawData.length < pageSize) hasMore.current = false;
     setData((prev) => {
       if (isPageMode) return rawData;
-      return page === 1 ? rawData : [...prev, ...rawData];
+      const indexStart = (localPage - 1) * pageSize;
+      const newData = [...prev];
+      for (let i = 0; i < rawData.length; i++) {
+        newData[indexStart + i] = rawData[i];
+      }
+      return newData;
     });
     if (isPageMode) {
-      cache.current[page] = rawData;
+      cache.current[localPage] = rawData;
       Object.keys(cache.current).forEach((val) => {
-        if (Math.abs(page - +val) > 1) {
+        if (Math.abs(localPage - +val) > 1) {
           delete cache.current[+val];
         }
       });

package/dist/index.js

@@ -47,56 +47,61 @@ function useResource(config) {
   const prevScrollTop = useRef(0);
   const scrollRef = useRef(null);
   const hasMore = useRef(true);
-  async function asyncNormalize() {
+  async function asyncNormalize(localPage) {
     const params = {
-      page,
+      page: localPage,
       pageSize
     };
-    setLoading(true);
-    requestTracker.current += 1;
-    const currentRequestId = requestTracker.current;
-    setError(null);
     try {
       const rawData = await getData(params);
-      if (currentRequestId !== requestTracker.current) {
-        setLoading(false);
-        return;
-      }
-      ;
-      setLoading(false);
-      return rawData;
+      return { data: rawData, error: null };
     } catch (err) {
-      if (currentRequestId === requestTracker.current) {
-        if (err instanceof Error) {
-          setError(err);
-        } else {
-          setError(new Error("unknown error"));
-        }
-        setLoading(false);
-      }
+      return {
+        data: null,
+        error: err instanceof Error ? err : new Error("unknown error")
+      };
     }
   }
   async function orchestrator() {
     const isPageMode = pagination?.type === "page";
     prevScrollTop.current = scrollTop;
     const cached = cache.current[page];
-    if (isPageMode) {
-      if (cached) {
-        setData(cached);
-        return;
-      }
+    if (isPageMode && cached) {
+      setData(cached);
+      return;
     }
-    const rawData = await asyncNormalize();
-    if (!rawData) return;
+    const localPage = page;
+    requestTracker.current += 1;
+    const currentRequestId = requestTracker.current;
+    setLoading(true);
+    setError(null);
+    const result = await asyncNormalize(localPage);
+    if (currentRequestId !== requestTracker.current) {
+      setLoading(false);
+      return;
+    }
+    ;
+    setLoading(false);
+    if (result.error) {
+      setError(result.error);
+      return;
+    }
+    const rawData = result.data;
+    if (!rawData || rawData.length < 1) return;
     if (rawData.length < pageSize) hasMore.current = false;
     setData((prev) => {
       if (isPageMode) return rawData;
-      return page === 1 ? rawData : [...prev, ...rawData];
+      const indexStart = (localPage - 1) * pageSize;
+      const newData = [...prev];
+      for (let i = 0; i < rawData.length; i++) {
+        newData[indexStart + i] = rawData[i];
+      }
+      return newData;
     });
     if (isPageMode) {
-      cache.current[page] = rawData;
+      cache.current[localPage] = rawData;
       Object.keys(cache.current).forEach((val) => {
-        if (Math.abs(page - +val) > 1) {
+        if (Math.abs(localPage - +val) > 1) {
           delete cache.current[+val];
         }
       });

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "react-resource-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A high-level data orchestration hook for React with pagination, caching, and virtualization",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "license": "MIT",
-
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts"
   },
-
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
-
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3"
   }
-}
+}