@oimdb/react 1.0.0

package/README.md

@@ -0,0 +1,496 @@
+# @oimdb/react
+
+React integration for OIMDB - Hooks for selection and subscription with reactive collections and indexes.
+
+## Overview
+
+`@oimdb/react` provides React hooks that work with OIMDB reactive objects (`OIMReactiveCollection` and `OIMReactiveIndex`). The library includes both direct hooks for component-level usage and React Context utilities for application-wide data management.
+
+## Features
+
+- **Reactive Integration**: Hooks work with `OIMReactiveCollection` and `OIMReactiveIndex` from `@oimdb/core`
+- **Automatic Subscription**: Uses `useSyncExternalStore` for optimal React 18+ performance
+- **Event Coalescing**: Leverages OIMDB's built-in event coalescing for efficient updates
+- **Type Safety**: Full TypeScript support with advanced generic type inference
+- **Context Support**: Optional React Context for centralized collection management
+- **Flexible Usage**: Use hooks directly or through context provider pattern
+
+## Installation
+
+```bash
+npm install @oimdb/react @oimdb/core
+```
+
+## Usage
+
+### Basic Setup
+
+```typescript
+import { OIMEventQueue, OIMRICollection, OIMReactiveIndexManual } from '@oimdb/core';
+import { 
+  useSelectEntitiesByPks, 
+  selectEntitiesByIndexKey,
+  selectEntityByPk 
+} from '@oimdb/react';
+
+// Create event queue and reactive collections
+const queue = new OIMEventQueue();
+const userTeamIndex = new OIMReactiveIndexManual<string, string>(queue);
+const usersCollection = new OIMRICollection(queue, {
+  collectionOpts: { selectPk: (user: User) => user.id },
+  indexes: { byTeam: userTeamIndex },
+});
+```
+
+### Single Entity Selection
+
+```typescript
+function UserProfile({ userId }: { userId: string }) {
+  const user = selectEntityByPk(usersCollection, userId);
+
+  if (!user) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h2>{user.name}</h2>
+      <p>Email: {user.email}</p>
+    </div>
+  );
+}
+```
+
+### Multiple Entities Selection
+
+```typescript
+function UserList({ userIds }: { userIds: string[] }) {
+  const users = useSelectEntitiesByPks(usersCollection, userIds);
+
+  return (
+    <ul>
+      {users.map((user, index) => (
+        <li key={user?.id || index}>
+          {user ? user.name : 'Loading...'}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Index-based Selection
+
+```typescript
+function TeamMembers({ teamId }: { teamId: string }) {
+  const teamUsers = selectEntitiesByIndexKey(
+    usersCollection,
+    usersCollection.indexes.byTeam,
+    teamId
+  );
+
+  return (
+    <div>
+      {teamUsers.map((user, index) => (
+        <div key={user?.id || index}>
+          {user ? `${user.name} (${user.role})` : 'Loading...'}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## React Context Integration
+
+For applications with multiple collections, use the React Context pattern for centralized management:
+
+### Context Setup
+
+```typescript
+import { 
+  OIMRICollectionsProvider, 
+  useOIMCollectionsContext,
+  StrictCollectionsDictionary 
+} from '@oimdb/react';
+
+interface User {
+  id: string;
+  name: string;
+  teamId: string;
+}
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+function createCollections() {
+  const queue = new OIMEventQueue();
+  
+  const userTeamIndex = new OIMReactiveIndexManual<string, string>(queue);
+  const usersCollection = new OIMRICollection(queue, {
+    collectionOpts: { selectPk: (user: User) => user.id },
+    indexes: { byTeam: userTeamIndex },
+  });
+  
+  const teamsCollection = new OIMRICollection(queue, {
+    collectionOpts: { selectPk: (team: Team) => team.id },
+    indexes: {},
+  });
+  
+  return { users: usersCollection, teams: teamsCollection } as const;
+}
+
+type AppCollections = StrictCollectionsDictionary<ReturnType<typeof createCollections>>;
+```
+
+### Provider Setup
+
+```typescript
+function App() {
+  const collections = React.useMemo(() => createCollections(), []);
+  
+  return (
+    <OIMRICollectionsProvider collections={collections}>
+      <UserDashboard />
+    </OIMRICollectionsProvider>
+  );
+}
+```
+
+### Using Context in Components
+
+```typescript
+function UserDashboard() {
+  const { users, teams } = useOIMCollectionsContext<AppCollections>();
+  
+  // Use collections with hooks
+  const allUsers = useSelectEntitiesByPks(users, []);
+  const teamMembers = selectEntitiesByIndexKey(
+    users,
+    users.indexes.byTeam,
+    'team1'
+  );
+  
+  return (
+    <div>
+      <h2>All Users: {allUsers.length}</h2>
+      <h3>Team 1 Members: {teamMembers.length}</h3>
+    </div>
+  );
+}
+```
+
+### Custom Context
+
+For multiple independent contexts:
+
+```typescript
+const UserContext = createOIMCollectionsContext<{ users: typeof usersCollection }>();
+
+function UserProvider({ children }: { children: React.ReactNode }) {
+  const collections = React.useMemo(() => ({ users: usersCollection }), []);
+  
+  return (
+    <OIMRICollectionsProvider collections={collections} context={UserContext}>
+      {children}
+    </OIMRICollectionsProvider>
+  );
+}
+
+function UserComponent() {
+  const { users } = useOIMCollectionsContext(UserContext);
+  // Use users collection...
+}
+```
+
+## API Reference
+
+### `selectEntityByPk(reactiveCollection, pk)`
+
+Subscribes to a single entity from a reactive collection.
+
+**Parameters:**
+- `reactiveCollection: OIMReactiveCollection<TEntity, TPk>` - Reactive collection instance
+- `pk: TPk` - Primary key of the entity
+
+**Returns:**
+- `TEntity | undefined` - Entity data or undefined if not found
+
+### `useSelectEntitiesByPks(reactiveCollection, pks)`
+
+Subscribes to multiple entities from a reactive collection.
+
+**Parameters:**
+- `reactiveCollection: OIMReactiveCollection<TEntity, TPk>` - Reactive collection instance
+- `pks: readonly TPk[]` - Array of primary keys
+
+**Returns:**
+- `(TEntity | undefined)[]` - Array of entities (undefined for missing entities)
+
+### `selectEntitiesByIndexKey(reactiveCollection, reactiveIndex, key)`
+
+Subscribes to entities indexed by a specific key.
+
+**Parameters:**
+- `reactiveCollection: OIMReactiveCollection<TEntity, TPk>` - Reactive collection instance
+- `reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>` - Reactive index instance
+- `key: TKey` - Index key to query
+
+**Returns:**
+- `(TEntity | undefined)[]` - Array of entities for the given index key
+
+### `selectEntitiesByIndexKeys(reactiveCollection, reactiveIndex, keys)`
+
+Subscribes to entities indexed by multiple keys.
+
+**Parameters:**
+- `reactiveCollection: OIMReactiveCollection<TEntity, TPk>` - Reactive collection instance
+- `reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>` - Reactive index instance
+- `keys: readonly TKey[]` - Array of index keys to query
+
+**Returns:**
+- `(TEntity | undefined)[]` - Array of entities for the given index keys
+
+### `useSelectPksByIndexKey(reactiveIndex, key)`
+
+Subscribes to primary keys indexed by a specific key.
+
+**Parameters:**
+- `reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>` - Reactive index instance
+- `key: TKey` - Index key to query
+
+**Returns:**
+- `TPk[]` - Array of primary keys for the given index key
+
+### `useSelectPksByIndexKeys(reactiveIndex, keys)`
+
+Subscribes to primary keys indexed by multiple keys.
+
+**Parameters:**
+- `reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>` - Reactive index instance
+- `keys: readonly TKey[]` - Array of index keys to query
+
+**Returns:**
+- `Map<TKey, TPk[]>` - Map of index keys to their corresponding primary keys
+
+## Context API Reference
+
+### `OIMRICollectionsProvider<T>`
+
+Provider component for collections context.
+
+**Props:**
+- `collections: T` - Dictionary of reactive collections
+- `children: ReactNode` - React children
+- `context?: React.Context<OIMContextValue<T>>` - Optional custom context
+
+### `useOIMCollectionsContext<T>(context?)`
+
+Hook to access collections from context.
+
+**Parameters:**
+- `context?: React.Context<OIMContextValue<T>>` - Optional custom context
+
+**Returns:**
+- `T` - Collections dictionary with full type safety
+
+**Throws:**
+- Error if used outside of provider
+
+### `createOIMCollectionsContext<T>()`
+
+Creates a custom collections context with specific typing.
+
+**Returns:**
+- `React.Context<OIMContextValue<T>>` - Typed React context
+
+### Type Utilities
+
+#### `StrictCollectionsDictionary<T>`
+
+Ensures collections dictionary maintains exact types.
+
+#### `CollectionsDictionary`
+
+Base type for any collections dictionary.
+
+#### `ExtractEntityType<T>`, `ExtractPkType<T>`, etc.
+
+Type utilities for extracting specific types from collections.
+
+## Architecture
+
+### Reactive Collections Integration
+
+The hooks work directly with OIMDB reactive objects:
+
+```typescript
+// Use reactive collections and indexes directly
+const user = selectEntityByPk(reactiveCollection, 'user123');
+const posts = selectEntitiesByIndexKey(reactiveCollection, reactiveIndex, 'tech');
+```
+
+### Event Subscription
+
+Hooks automatically subscribe to OIMDB reactive events using `useSyncExternalStore`:
+
+- **Collection updates**: Subscribe to `reactiveCollection.updateEventEmitter`
+- **Index updates**: Subscribe to `reactiveIndex.updateEventEmitter`
+- **Optimized subscriptions**: Subscribe only to specific keys for efficient updates
+- **Automatic cleanup**: Unsubscribe when component unmounts
+
+### Performance
+
+- **React 18+ Integration**: Uses `useSyncExternalStore` for optimal performance
+- **Event Coalescing**: OIMDB's built-in event coalescing reduces unnecessary re-renders
+- **Key-specific subscriptions**: Only listen to changes for relevant data
+- **Memory Management**: Automatic cleanup prevents memory leaks
+- **Efficient batching**: Updates are batched through React's concurrent features
+
+## Examples
+
+### Complete Example
+
+```typescript
+import React from 'react';
+import { OIMEventQueue, OIMRICollection, OIMReactiveIndexManual } from '@oimdb/core';
+import { selectEntityByPk, useSelectEntitiesByPks, selectEntitiesByIndexKey } from '@oimdb/react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  teamId: string;
+}
+
+// Setup
+function createUserCollection() {
+  const queue = new OIMEventQueue();
+  const teamIndex = new OIMReactiveIndexManual<string, string>(queue);
+  
+  return new OIMRICollection(queue, {
+    collectionOpts: { selectPk: (user: User) => user.id },
+    indexes: { byTeam: teamIndex },
+  });
+}
+
+const usersCollection = createUserCollection();
+
+// Component
+function UserProfile({ userId }: { userId: string }) {
+  const user = selectEntityByPk(usersCollection, userId);
+  
+  if (!user) return <div>Loading...</div>;
+  
+  return <h2>{user.name}</h2>;
+}
+
+function TeamDashboard({ teamId }: { teamId: string }) {
+  const teamMembers = selectEntitiesByIndexKey(
+    usersCollection,
+    usersCollection.indexes.byTeam,
+    teamId
+  );
+  
+  return (
+    <div>
+      <h3>Team Members ({teamMembers.length})</h3>
+      {teamMembers.map(user => (
+        <div key={user.id}>{user.name}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+### With Context Provider
+
+```typescript
+import { 
+  OIMRICollectionsProvider, 
+  useOIMCollectionsContext 
+} from '@oimdb/react';
+
+function App() {
+  const collections = React.useMemo(() => ({
+    users: createUserCollection(),
+    // ... other collections
+  }), []);
+  
+  return (
+    <OIMRICollectionsProvider collections={collections}>
+      <Dashboard />
+    </OIMRICollectionsProvider>
+  );
+}
+
+function Dashboard() {
+  const { users } = useOIMCollectionsContext();
+  const allUsers = useSelectEntitiesByPks(users, []);
+  
+  return <div>Total Users: {allUsers.length}</div>;
+}
+```
+
+## Migration from v0.x
+
+The v1.x API has changed significantly to work with reactive collections:
+
+### Hook Name Changes
+
+```typescript
+// v0.x - Abstract storage interfaces
+const user = useEntity(userStorage, 'user123');
+const users = useEntities(userStorage, userIds);
+const posts = useIndex(postStorage, categoryIndex, 'tech');
+
+// v1.x - Reactive collections
+const user = selectEntityByPk(reactiveCollection, 'user123');
+const users = useSelectEntitiesByPks(reactiveCollection, userIds);
+const posts = selectEntitiesByIndexKey(reactiveCollection, reactiveIndex, 'tech');
+```
+
+### Collection Creation
+
+```typescript
+// v0.x - With DX layer
+const db = createDb({ scheduler: 'microtask' });
+const users = db.createCollection<User>();
+const user = useEntity(users.advanced.collection, userId);
+
+// v1.x - Direct reactive collections
+const queue = new OIMEventQueue();
+const usersCollection = new OIMRICollection(queue, {
+  collectionOpts: { selectPk: (user: User) => user.id },
+  indexes: {},
+});
+const user = selectEntityByPk(usersCollection, userId);
+```
+
+### Context API
+
+```typescript
+// v0.x - No context support
+
+// v1.x - Full context support
+const collections = { users: usersCollection };
+<OIMRICollectionsProvider collections={collections}>
+  <App />
+</OIMRICollectionsProvider>
+```
+
+### Key Changes
+
+- **Hook naming**: More explicit names like `selectEntityByPk` vs `useEntity`
+- **Parameters**: Direct reactive collection objects instead of storage abstractions
+- **Context**: New context API for centralized collection management
+- **Type safety**: Enhanced TypeScript support with better inference
+
+## Dependencies
+
+- `@oimdb/core` - Core OIMDB functionality
+- `react` - React hooks and components
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,145 @@
+"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.ts
+var index_exports = {};
+__export(index_exports, {
+  OIMRICollectionsContext: () => OIMRICollectionsContext,
+  OIMRICollectionsProvider: () => OIMRICollectionsProvider,
+  createOIMCollectionsContext: () => createOIMCollectionsContext,
+  selectEntitiesByIndexKey: () => selectEntitiesByIndexKey,
+  selectEntitiesByIndexKeys: () => selectEntitiesByIndexKeys,
+  selectEntityByPk: () => selectEntityByPk,
+  useOIMCollectionsContext: () => useOIMCollectionsContext,
+  useSelectEntitiesByPks: () => useSelectEntitiesByPks,
+  useSelectPksByIndexKey: () => useSelectPksByIndexKey,
+  useSelectPksByIndexKeys: () => useSelectPksByIndexKeys
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/index.ts
+var import_react = require("react");
+var import_react2 = require("react");
+var useSelectPksByIndexKeys = (reactiveIndex, keys) => {
+  const subscribe = (0, import_react.useMemo)(() => {
+    return (onStoreChange) => reactiveIndex.updateEventEmitter.subscribeOnKeys(
+      keys,
+      onStoreChange
+    );
+  }, [keys, reactiveIndex.updateEventEmitter]);
+  const getSnapshot = (0, import_react.useMemo)(
+    () => () => keys.map((key) => reactiveIndex.getPksByKey(key)),
+    [keys, reactiveIndex]
+  );
+  const snapshot = (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var useSelectPksByIndexKey = (reactiveIndex, key) => {
+  const subscribe = (0, import_react.useMemo)(() => {
+    return (onStoreChange) => reactiveIndex.updateEventEmitter.subscribeOnKey(key, onStoreChange);
+  }, [key, reactiveIndex.updateEventEmitter]);
+  const getSnapshot = (0, import_react.useMemo)(
+    () => () => reactiveIndex.getPksByKey(key),
+    [key, reactiveIndex]
+  );
+  const snapshot = (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var selectEntityByPk = (reactiveCollection, pk) => {
+  const subscribe = (0, import_react.useMemo)(() => {
+    return (onStoreChange) => reactiveCollection.updateEventEmitter.subscribeOnKey(
+      pk,
+      onStoreChange
+    );
+  }, [pk, reactiveCollection.updateEventEmitter]);
+  const getSnapshot = (0, import_react.useMemo)(
+    () => () => reactiveCollection.getOneByPk(pk),
+    [pk, reactiveCollection]
+  );
+  const snapshot = (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var useSelectEntitiesByPks = (reactiveCollection, pks) => {
+  const subscribe = (0, import_react.useMemo)(() => {
+    return (onStoreChange) => reactiveCollection.updateEventEmitter.subscribeOnKeys(
+      pks,
+      onStoreChange
+    );
+  }, [pks, reactiveCollection.updateEventEmitter]);
+  const getSnapshot = (0, import_react.useMemo)(
+    () => () => pks.map((pk) => reactiveCollection.getOneByPk(pk)),
+    [pks, reactiveCollection]
+  );
+  const snapshot = (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var selectEntitiesByIndexKey = (reactiveCollection, reactiveIndex, key) => {
+  const pks = useSelectPksByIndexKey(reactiveIndex, key);
+  return useSelectEntitiesByPks(reactiveCollection, pks);
+};
+var unique = (array) => {
+  return Array.from(new Set(array));
+};
+var selectEntitiesByIndexKeys = (reactiveCollection, reactiveIndex, keys) => {
+  const pks = useSelectPksByIndexKeys(reactiveIndex, keys);
+  const pksArray = (0, import_react.useMemo)(
+    () => unique(Array.from(pks.values()).flat()),
+    [pks]
+  );
+  return useSelectEntitiesByPks(reactiveCollection, pksArray);
+};
+
+// src/context/index.tsx
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var OIMRICollectionsContext = (0, import_react3.createContext)(null);
+function createOIMCollectionsContext() {
+  return (0, import_react3.createContext)(null);
+}
+function OIMRICollectionsProvider({
+  collections,
+  children,
+  context = OIMRICollectionsContext
+}) {
+  const Provider = context.Provider;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: collections, children });
+}
+function useOIMCollectionsContext(context) {
+  const contextToUse = context || OIMRICollectionsContext;
+  const collections = (0, import_react3.useContext)(contextToUse);
+  if (!collections) {
+    throw new Error(
+      "useOIMCollectionsContext must be used within an OIMRICollectionsProvider"
+    );
+  }
+  return collections;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OIMRICollectionsContext,
+  OIMRICollectionsProvider,
+  createOIMCollectionsContext,
+  selectEntitiesByIndexKey,
+  selectEntitiesByIndexKeys,
+  selectEntityByPk,
+  useOIMCollectionsContext,
+  useSelectEntitiesByPks,
+  useSelectPksByIndexKey,
+  useSelectPksByIndexKeys
+});

package/dist/index.d.cts

@@ -0,0 +1,45 @@
+import { TOIMPk, OIMIndex, OIMReactiveIndex, OIMReactiveCollection, OIMRICollection } from '@oimdb/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const useSelectPksByIndexKeys: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, keys: readonly TKey[]) => (readonly TPk[])[];
+declare const useSelectPksByIndexKey: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, key: TKey) => readonly TPk[];
+declare const selectEntityByPk: <TEntity extends object, TPk extends TOIMPk>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, pk: TPk) => TEntity | undefined;
+declare const useSelectEntitiesByPks: <TEntity extends object, TPk extends TOIMPk>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, pks: readonly TPk[]) => (TEntity | undefined)[];
+declare const selectEntitiesByIndexKey: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, key: TKey) => (TEntity | undefined)[];
+declare const selectEntitiesByIndexKeys: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, keys: readonly TKey[]) => (TEntity | undefined)[];
+
+type AnyOIMRICollection = OIMRICollection<object, TOIMPk, string, TOIMPk, any, any>;
+type CollectionsDictionary = Record<string, AnyOIMRICollection>;
+type TypedCollectionsDictionary<T extends CollectionsDictionary> = T;
+type OIMContextValue<T extends CollectionsDictionary = CollectionsDictionary> = T | null;
+declare const OIMRICollectionsContext: React.Context<OIMContextValue<CollectionsDictionary>>;
+declare function createOIMCollectionsContext<T extends CollectionsDictionary>(): React.Context<OIMContextValue<T>>;
+interface OIMRICollectionsProviderProps<T extends CollectionsDictionary> {
+    collections: T;
+    children: ReactNode;
+    context?: React.Context<OIMContextValue<T>>;
+}
+declare function OIMRICollectionsProvider<T extends CollectionsDictionary>({ collections, children, context, }: OIMRICollectionsProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function useOIMCollectionsContext<T extends CollectionsDictionary = CollectionsDictionary>(context?: React.Context<OIMContextValue<T>>): T;
+type ExtractEntityType<T> = T extends OIMRICollection<infer E, TOIMPk, string, TOIMPk, any, any> ? E : never;
+type ExtractPkType<T> = T extends OIMRICollection<object, infer P, string, TOIMPk, any, any> ? P : never;
+type ExtractIndexNameType<T> = T extends OIMRICollection<object, TOIMPk, infer IN, TOIMPk, any, any> ? IN : never;
+type ExtractIndexKeyType<T> = T extends OIMRICollection<object, TOIMPk, string, infer IK, any, any> ? IK : never;
+type CreateCollectionsDictionary<T extends Record<string, AnyOIMRICollection>> = {
+    [K in keyof T]: T[K];
+};
+type ExtractCollectionSignature<T> = T extends OIMRICollection<infer E, infer P, infer IN, infer IK, infer I, infer RI> ? {
+    entity: E;
+    pk: P;
+    indexName: IN;
+    indexKey: IK;
+    index: I;
+    reactiveIndex: RI;
+} : never;
+type StrictCollectionsDictionary<T> = {
+    [K in keyof T]: T[K] extends OIMRICollection<infer E, infer P, infer IN, infer IK, infer I, infer RI> ? OIMRICollection<E, P, IN, IK, I, RI> : never;
+};
+
+export { type AnyOIMRICollection, type CollectionsDictionary, type CreateCollectionsDictionary, type ExtractCollectionSignature, type ExtractEntityType, type ExtractIndexKeyType, type ExtractIndexNameType, type ExtractPkType, type OIMContextValue, OIMRICollectionsContext, OIMRICollectionsProvider, type OIMRICollectionsProviderProps, type StrictCollectionsDictionary, type TypedCollectionsDictionary, createOIMCollectionsContext, selectEntitiesByIndexKey, selectEntitiesByIndexKeys, selectEntityByPk, useOIMCollectionsContext, useSelectEntitiesByPks, useSelectPksByIndexKey, useSelectPksByIndexKeys };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import { TOIMPk, OIMIndex, OIMReactiveIndex, OIMReactiveCollection, OIMRICollection } from '@oimdb/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const useSelectPksByIndexKeys: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, keys: readonly TKey[]) => (readonly TPk[])[];
+declare const useSelectPksByIndexKey: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, key: TKey) => readonly TPk[];
+declare const selectEntityByPk: <TEntity extends object, TPk extends TOIMPk>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, pk: TPk) => TEntity | undefined;
+declare const useSelectEntitiesByPks: <TEntity extends object, TPk extends TOIMPk>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, pks: readonly TPk[]) => (TEntity | undefined)[];
+declare const selectEntitiesByIndexKey: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, key: TKey) => (TEntity | undefined)[];
+declare const selectEntitiesByIndexKeys: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndex<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndex<TKey, TPk, TIndex>, keys: readonly TKey[]) => (TEntity | undefined)[];
+
+type AnyOIMRICollection = OIMRICollection<object, TOIMPk, string, TOIMPk, any, any>;
+type CollectionsDictionary = Record<string, AnyOIMRICollection>;
+type TypedCollectionsDictionary<T extends CollectionsDictionary> = T;
+type OIMContextValue<T extends CollectionsDictionary = CollectionsDictionary> = T | null;
+declare const OIMRICollectionsContext: React.Context<OIMContextValue<CollectionsDictionary>>;
+declare function createOIMCollectionsContext<T extends CollectionsDictionary>(): React.Context<OIMContextValue<T>>;
+interface OIMRICollectionsProviderProps<T extends CollectionsDictionary> {
+    collections: T;
+    children: ReactNode;
+    context?: React.Context<OIMContextValue<T>>;
+}
+declare function OIMRICollectionsProvider<T extends CollectionsDictionary>({ collections, children, context, }: OIMRICollectionsProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function useOIMCollectionsContext<T extends CollectionsDictionary = CollectionsDictionary>(context?: React.Context<OIMContextValue<T>>): T;
+type ExtractEntityType<T> = T extends OIMRICollection<infer E, TOIMPk, string, TOIMPk, any, any> ? E : never;
+type ExtractPkType<T> = T extends OIMRICollection<object, infer P, string, TOIMPk, any, any> ? P : never;
+type ExtractIndexNameType<T> = T extends OIMRICollection<object, TOIMPk, infer IN, TOIMPk, any, any> ? IN : never;
+type ExtractIndexKeyType<T> = T extends OIMRICollection<object, TOIMPk, string, infer IK, any, any> ? IK : never;
+type CreateCollectionsDictionary<T extends Record<string, AnyOIMRICollection>> = {
+    [K in keyof T]: T[K];
+};
+type ExtractCollectionSignature<T> = T extends OIMRICollection<infer E, infer P, infer IN, infer IK, infer I, infer RI> ? {
+    entity: E;
+    pk: P;
+    indexName: IN;
+    indexKey: IK;
+    index: I;
+    reactiveIndex: RI;
+} : never;
+type StrictCollectionsDictionary<T> = {
+    [K in keyof T]: T[K] extends OIMRICollection<infer E, infer P, infer IN, infer IK, infer I, infer RI> ? OIMRICollection<E, P, IN, IK, I, RI> : never;
+};
+
+export { type AnyOIMRICollection, type CollectionsDictionary, type CreateCollectionsDictionary, type ExtractCollectionSignature, type ExtractEntityType, type ExtractIndexKeyType, type ExtractIndexNameType, type ExtractPkType, type OIMContextValue, OIMRICollectionsContext, OIMRICollectionsProvider, type OIMRICollectionsProviderProps, type StrictCollectionsDictionary, type TypedCollectionsDictionary, createOIMCollectionsContext, selectEntitiesByIndexKey, selectEntitiesByIndexKeys, selectEntityByPk, useOIMCollectionsContext, useSelectEntitiesByPks, useSelectPksByIndexKey, useSelectPksByIndexKeys };

package/dist/index.js

@@ -0,0 +1,109 @@
+// src/hooks/index.ts
+import { useMemo } from "react";
+import { useSyncExternalStore } from "react";
+var useSelectPksByIndexKeys = (reactiveIndex, keys) => {
+  const subscribe = useMemo(() => {
+    return (onStoreChange) => reactiveIndex.updateEventEmitter.subscribeOnKeys(
+      keys,
+      onStoreChange
+    );
+  }, [keys, reactiveIndex.updateEventEmitter]);
+  const getSnapshot = useMemo(
+    () => () => keys.map((key) => reactiveIndex.getPksByKey(key)),
+    [keys, reactiveIndex]
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var useSelectPksByIndexKey = (reactiveIndex, key) => {
+  const subscribe = useMemo(() => {
+    return (onStoreChange) => reactiveIndex.updateEventEmitter.subscribeOnKey(key, onStoreChange);
+  }, [key, reactiveIndex.updateEventEmitter]);
+  const getSnapshot = useMemo(
+    () => () => reactiveIndex.getPksByKey(key),
+    [key, reactiveIndex]
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var selectEntityByPk = (reactiveCollection, pk) => {
+  const subscribe = useMemo(() => {
+    return (onStoreChange) => reactiveCollection.updateEventEmitter.subscribeOnKey(
+      pk,
+      onStoreChange
+    );
+  }, [pk, reactiveCollection.updateEventEmitter]);
+  const getSnapshot = useMemo(
+    () => () => reactiveCollection.getOneByPk(pk),
+    [pk, reactiveCollection]
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var useSelectEntitiesByPks = (reactiveCollection, pks) => {
+  const subscribe = useMemo(() => {
+    return (onStoreChange) => reactiveCollection.updateEventEmitter.subscribeOnKeys(
+      pks,
+      onStoreChange
+    );
+  }, [pks, reactiveCollection.updateEventEmitter]);
+  const getSnapshot = useMemo(
+    () => () => pks.map((pk) => reactiveCollection.getOneByPk(pk)),
+    [pks, reactiveCollection]
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return snapshot;
+};
+var selectEntitiesByIndexKey = (reactiveCollection, reactiveIndex, key) => {
+  const pks = useSelectPksByIndexKey(reactiveIndex, key);
+  return useSelectEntitiesByPks(reactiveCollection, pks);
+};
+var unique = (array) => {
+  return Array.from(new Set(array));
+};
+var selectEntitiesByIndexKeys = (reactiveCollection, reactiveIndex, keys) => {
+  const pks = useSelectPksByIndexKeys(reactiveIndex, keys);
+  const pksArray = useMemo(
+    () => unique(Array.from(pks.values()).flat()),
+    [pks]
+  );
+  return useSelectEntitiesByPks(reactiveCollection, pksArray);
+};
+
+// src/context/index.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var OIMRICollectionsContext = createContext(null);
+function createOIMCollectionsContext() {
+  return createContext(null);
+}
+function OIMRICollectionsProvider({
+  collections,
+  children,
+  context = OIMRICollectionsContext
+}) {
+  const Provider = context.Provider;
+  return /* @__PURE__ */ jsx(Provider, { value: collections, children });
+}
+function useOIMCollectionsContext(context) {
+  const contextToUse = context || OIMRICollectionsContext;
+  const collections = useContext(contextToUse);
+  if (!collections) {
+    throw new Error(
+      "useOIMCollectionsContext must be used within an OIMRICollectionsProvider"
+    );
+  }
+  return collections;
+}
+export {
+  OIMRICollectionsContext,
+  OIMRICollectionsProvider,
+  createOIMCollectionsContext,
+  selectEntitiesByIndexKey,
+  selectEntitiesByIndexKeys,
+  selectEntityByPk,
+  useOIMCollectionsContext,
+  useSelectEntitiesByPks,
+  useSelectPksByIndexKey,
+  useSelectPksByIndexKeys
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@oimdb/react",
+  "version": "1.0.0",
+  "description": "React integration for OIMDB - Hooks for selection and subscription with external storage",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abaikov/oimdb.git"
+  },
+  "bugs": {
+    "url": "https://github.com/abaikov/oimdb/issues"
+  },
+  "homepage": "https://github.com/abaikov/oimdb#readme",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format esm,cjs",
+    "clean": "rimraf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@oimdb/core": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@oimdb/core": "^1.0.0",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.2.2",
+    "rimraf": "^5.0.5",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0"
+  },
+  "author": "Andrei Baikov",
+  "license": "MIT"
+}