@inglorious/react-store 8.0.0 → 9.0.1

package/README.md

@@ -14,10 +14,6 @@ Connect your React app to Inglorious Store with a familiar API. Built on `react-
 - **Drop-in Integration**: Works just like `react-redux` with enhanced features for Inglorious Store
 - **Custom `useNotify` Hook**: Dispatch events with a clean, ergonomic API
 - **Convenience `useEntity` Hook**: Select a single entity by its ID with a simple, optimized hook.
-- **Flexible Update Modes**:
-  - **Eager mode** - Updates process immediately (responsive UIs)
-  - **Batched mode** - Updates process on a timer (performance optimization)
-- **Redux DevTools Support**: Full integration with Redux DevTools for debugging
 - **Battle-tested**: Built on `react-redux` for proven performance and stability
 - **TypeScript Support**: Optional type safety for those who want it
 
@@ -64,15 +60,8 @@ export const store = createStore({ types, entities })
 import { createReactStore } from "@inglorious/react-store"
 import { store } from "./store"
 
-// Eager mode (default) - updates process immediately
 export const { Provider, useSelector, useNotify, useEntity } =
   createReactStore(store)
-
-// Or batched mode - updates process at 20 FPS
-// export const { Provider, useSelector, useNotify, useEntity } = createReactStore(store, {
-//   mode: "batched",
-//   fps: 20
-// })
 ```
 
 ### 3. Wrap Your App
@@ -114,17 +103,13 @@ function Counter() {
 
 ## API Reference
 
-### `createReactStore(store, config?)`
+### `createReactStore(store)`
 
 Creates React bindings for an Inglorious Store.
 
 **Parameters:**
 
 - `store` (required): An Inglorious Store instance
-- `config` (optional): Configuration object
-  - `mode`: `"eager"` (default) or `"batched"`
-  - `fps`: Frame rate for batched mode (default: 20)
-  - `skippedEvents`: Array of event types to exclude from DevTools logging
 
 **Returns:**
 
@@ -136,27 +121,7 @@ Creates React bindings for an Inglorious Store.
 **Examples:**
 
 ```javascript
-// Eager mode (immediate updates)
 const { Provider, useSelector, useNotify, useEntity } = createReactStore(store)
-
-// Batched mode for real-time apps
-const { Provider, useSelector, useNotify, useEntity } = createReactStore(
-  store,
-  {
-    mode: "batched",
-    fps: 30,
-  },
-)
-
-// Custom FPS for animations
-const { Provider, useSelector, useNotify, useEntity } = createReactStore(
-  store,
-  {
-    mode: "batched",
-    fps: 60,
-    skippedEvents: ["update", "mousemove"], // Don't log these in DevTools
-  },
-)
 ```
 
 ### `useNotify()`
@@ -219,69 +184,34 @@ function TodoList() {
 }
 ```
 
----
-
-## Update Modes
-
-### Eager Mode (Default)
+### `useEntity(id)`
 
-Best for most apps. Updates process immediately when you call `notify()`.
+A convenience hook to select a single entity by its ID. It is an optimized way to subscribe a component to updates for a specific entity.
 
-```javascript
-const { Provider, useSelector, useNotify } = createReactStore(store)
-```
-
-**When to use:**
+**Parameters:**
 
-- ✅ Standard apps (forms, CRUD, dashboards)
-- ✅ You want instant feedback on user actions
-- ✅ You're not processing many events per second
+- `id` (required): The ID of the entity to select.
 
-### Batched Mode
+**Usage:**
 
-Best for performance-critical apps. Updates process on a fixed timer (FPS).
+```jsx
+function UserProfile() {
+  const user = useEntity("user-123")
+  if (!user) {
+    return "User not found."
+  }
 
-```javascript
-const { Provider, useSelector, useNotify } = createReactStore(store, {
-  mode: "batched",
-  fps: 20, // Process events 20 times per second
-})
+  return user.name
+}
 ```
 
-**When to use:**
-
-- ✅ Games or animations
-- ✅ High-frequency events (mouse tracking, real-time data)
-- ✅ You want to batch multiple events into one React render
-- ✅ Performance optimization is critical
-
-**FPS Guidelines:**
-
-- **60 FPS** - Smooth animations, games
-- **30 FPS** - Good balance for most real-time apps
-- **20 FPS (default)** - Input handling, live dashboards, lower CPU usage
-- **5-10 FPS** - Background updates, status polling
-
 ---
 
 ## Redux DevTools Integration
 
-Redux DevTools work automatically! Install the [browser extension](https://github.com/reduxjs/redux-devtools) to inspect:
-
-- State snapshots
-- Event history
-- Time-travel debugging
-
-**In batched mode**, events are automatically grouped by frame for cleaner DevTools logs.
+Redux DevTools work automatically! Install the browser extension to inspect state snapshots, event history, and use time-travel debugging.
 
-```javascript
-// Skip noisy events from DevTools
-const { Provider, useSelector, useNotify } = createReactStore(store, {
-  mode: "batched",
-  fps: 20,
-  skippedEvents: ["mousemove", "update"], // Don't log these
-})
-```
+The underlying `@inglorious/store` allows for configuration, such as skipping certain events from being logged. See the store documentation for more details.
 
 ---
 
@@ -433,9 +363,6 @@ For complete TypeScript examples, see the [@inglorious/store TypeScript document
 **Q: Can I use this with existing react-redux code?**  
 A: Yes! The `Provider` and `useSelector` are compatible. You can gradually migrate to `useNotify`.
 
-**Q: Should I use eager or batched mode?**  
-A: Start with eager (default). Switch to batched if you notice performance issues or are building a game/real-time app.
-
 **Q: Does this work with React Native?**  
 A: Yes! It works anywhere `react-redux` works.
 
@@ -457,9 +384,8 @@ A: Not at all! The library works great with plain JavaScript. TypeScript support
 
 **What's different:**
 
-- ✅ Custom `useNotify` hook instead of `useDispatch`
-- ✅ Batched mode option for performance
-- ✅ Automatic `store.update()` handling
+- ✅ `useNotify` hook for dispatching events instead of `useDispatch`
+- ✅ `useEntity` hook for easily selecting an entity by ID
 - ✅ Cleaner API for event-based state management
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/react-store",
-  "version": "8.0.0",
+  "version": "9.0.1",
   "description": "Official React bindings for @inglorious/store. Provides hooks and a Provider to connect your React components to the store.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -42,12 +42,12 @@
   },
   "peerDependencies": {
     "react": "^19.2.0",
-    "@inglorious/store": "7.0.0"
+    "@inglorious/store": "7.1.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",
     "vite": "^7.1.3",
-    "@inglorious/eslint-config": "1.0.1"
+    "@inglorious/eslint-config": "1.1.0"
   },
   "engines": {
     "node": ">= 22"

package/src/index.jsx

@@ -1,14 +1,34 @@
 import { Provider, useSelector } from "react-redux"
 
+/**
+ * Creates a set of React hooks and a Provider component tailored to an Inglorious Store instance.
+ * @param {import('@inglorious/store/types/store').Store} store The Inglorious Store instance.
+ * @returns {{Provider: ({children}: {children: any}) => JSX.Element, useSelector: import('react-redux').useSelector, useEntity: (id: string | number) => object | undefined, useNotify: () => import('@inglorious/store/types/store').Notify}}
+ */
 export function createReactStore(store) {
+  /**
+   * A React context Provider that makes the Inglorious Store available to any nested components.
+   * @param {{children: React.ReactNode}} props
+   */
   function StoreProvider({ children }) {
     return <Provider store={store}>{children}</Provider>
   }
 
+  /**
+   * A convenience hook to select a single entity by its ID from the store.
+   * It subscribes the component to updates for that specific entity.
+   * @param {string | number} id The ID of the entity to select.
+   * @returns {object | undefined} The entity object if found, otherwise undefined.
+   */
   function useEntity(id) {
     return useSelector((entities) => entities[id])
   }
 
+  /**
+   * A hook that returns the `notify` function from the Inglorious Store.
+   * This is the primary way to dispatch events to the store from your components.
+   * @returns {import('@inglorious/store/types/store').Notify} The `notify` function.
+   */
   function useNotify() {
     return store._api.notify
   }