react-shared-states 1.0.8 → 1.0.12

package/README.md

@@ -1,4 +1,3 @@
-
 # React Shared States
 
 **_Global state made as simple as useState, with zero config, built-in async caching, and automatic scoping._**
@@ -24,7 +23,7 @@ Tiny, ergonomic, convention‑over‑configuration state, async function, and re
 * Predictable: key + scope ⇒ value. That’s it.
 
 
-## 🚀 Install
+## Install
 
 ```sh
 npm install react-shared-states
@@ -34,7 +33,7 @@ or
 pnpm add react-shared-states
 ```
 
-## ☕ 60‑Second TL;DR
+## 60‑Second TL;DR
 ```tsx
 import { useSharedState } from 'react-shared-states';
 
@@ -197,66 +196,105 @@ export default function App(){
 ```
 
 
-## 🧠 Core Concepts
-| Concept                | Summary                                                                                                                         |
-|------------------------|---------------------------------------------------------------------------------------------------------------------------------|
-| Global by default      | No provider necessary. Same key => shared state.                                                                                |
-| Scoping                | Wrap with `SharedStatesProvider` to isolate. Nearest provider wins.                                                             |
-| Named scopes           | `scopeName` prop lets distant providers sync (same name ⇒ same bucket). Unnamed providers auto‑generate a random isolated name. |
-| Manual override        | Third param in `useSharedState` / `useSharedFunction` / `useSharedSubscription` enforces a specific scope ignoring tree search. |
-| Shared functions       | Encapsulate async logic: single flight + cached result + `error` + `isLoading` + opt‑in refresh.                                |
-| Shared subscriptions   | Real-time data streams: automatic cleanup + shared connections + `error` + `isLoading` + subscription state.                    |
-| Static APIs            | Access state/functions/subscriptions outside components (`sharedStatesApi`, `sharedFunctionsApi`, `sharedSubscriptionsApi`).    |
-| Static/shared creation | Use `createSharedState`, `createSharedFunction`, `createSharedSubscription` to export reusable, type-safe shared resources.     |
-
-
-## 🏗️ Sharing State (`useSharedState`)
-Signature: 
-- `const [value, setValue] = useSharedState(key, initialValue, scopeName?)`
-- `const [value, setValue] = useSharedState(sharedStateCreated)`
-
-Behavior:
-* First hook call (per key + scope) seeds with `initialValue`.
-* Subsequent mounts with same key+scope ignore their `initialValue` (consistent source of truth).
-* Setter accepts either value or updater `(prev)=>next`.
-* React batching + equality check: listeners fire only when the value reference actually changes.
-
-### Examples
-1. Global theme (recommended for large apps)
-    ```tsx
-    // themeState.ts
-    export const themeState = createSharedState('light');
-    // In components
-    const [theme, setTheme] = useSharedState(themeState);
-    ```
-2. Isolated wizard progress
-    ```tsx
-    const wizardProgress = createSharedState(0);
-    <SharedStatesProvider>
-      <Wizard/>
-    </SharedStatesProvider>
-    // In Wizard
-    const [step, setStep] = useSharedState(wizardProgress);
-    ```
-3. Forcing cross‑portal sync
-    ```tsx
-    const navState = createSharedState('closed', 'nav');
-    <SharedStatesProvider scopeName="nav" children={<PrimaryNav/>} />
-    <Portal>
-      <SharedStatesProvider scopeName="nav" children={<MobileNav/>} />
-    </Portal>
-    // In both navs
-    const [navOpen, setNavOpen] = useSharedState(navState);
-    ```
-4. Overriding nearest provider
-    ```tsx
-    // Even if inside a provider, this explicitly binds to global
-    const globalFlag = createSharedState(false, '_global');
-    const [flag, setFlag] = useSharedState(globalFlag);
-    ```
-
-
-## ⚡ Shared Async Functions (`useSharedFunction`)
+## Core Concepts
+| Concept                | Summary                                                                                                                                                            |
+|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Global by default      | No provider necessary. Same key => shared state.                                                                                                                   |
+| Scoping                | Wrap with `SharedStatesProvider` to isolate. Nearest provider wins.                                                                                                |
+| Named scopes           | `scopeName` prop lets distant providers sync (same name ⇒ same bucket). Unnamed providers auto‑generate a random isolated name.                                    |
+| Manual override        | Third param in `useSharedState` / `useSharedFunction` / `useSharedSubscription` enforces a specific scope ignoring tree search.                                    |
+| Shared functions       | Encapsulate async logic: single flight + cached result + `error` + `isLoading` + opt‑in refresh.                                                                   |
+| Shared subscriptions   | Real-time data streams: automatic cleanup + shared connections + `error` + `isLoading` + subscription state.                                                       |
+| Static APIs            | Access state/functions/subscriptions outside components (`sharedStatesApi`, `sharedFunctionsApi`, `sharedSubscriptionsApi`).                                       |
+| Static/shared creation | Use `createSharedState`, `createSharedFunction`, `createSharedSubscription` to export reusable, type-safe shared resources that persist across `clearAll()` calls. |
+
+
+## Selecting State Slices (`useSharedStateSelector`)
+
+When a shared state holds an object, you might only need a small piece of it.
+Using `useSharedState` will cause your component to re-render whenever *any* part of the object changes.
+To optimize performance and avoid unnecessary re-renders, you can use the `useSharedStateSelector` hook.
+
+This hook allows you to subscribe to a specific, memoized slice of a shared state.
+Your component will only re-render if the selected value changes.
+It uses `react-fast-compare` for efficient deep equality checks.
+
+Signature:
+- `const selectedValue = useSharedStateSelector(key, selector, scopeName?)`
+- `const selectedValue = useSharedStateSelector(sharedStateCreated, selector)`
+
+The `selector` is a function that receives the full state and returns the desired slice.
+
+### Example: Subscribing to a slice of a user object
+
+Imagine a shared state for user settings:
+
+```tsx
+// settingsState.ts
+import { createSharedState } from 'react-shared-states';
+
+export const settingsState = createSharedState({
+  theme: 'dark',
+  notifications: {
+    email: true,
+    push: false,
+  },
+  language: 'en',
+});
+```
+
+A component that only cares about the theme can use `useSharedStateSelector` to avoid re-rendering when, for example, the notification settings change.
+
+```tsx
+import { useSharedState, useSharedStateSelector } from 'react-shared-states';
+import { settingsState } from './settingsState';
+
+function ThemeDisplay() {
+  const theme = useSharedStateSelector(settingsState, (settings) => settings.theme);
+  
+  console.log('ThemeDisplay renders'); // This will only log when the theme changes
+
+  return <div>Current theme: {theme}</div>;
+}
+
+function NotificationToggle() {
+  const [settings, setSettings] = useSharedState(settingsState);
+
+  const togglePush = () => {
+    setSettings(s => ({
+      ...s,
+      notifications: { ...s.notifications, push: !s.notifications.push }
+    }));
+  };
+
+  return <button onClick={togglePush}>Toggle Push Notifications</button>;
+}
+```
+
+In this example, clicking the `NotificationToggle` button will **not** cause `ThemeDisplay` to re-render.
+
+### A Note on Type Safety
+
+For the best developer experience and full type safety,
+it is **highly recommended** to use `useSharedStateSelector` with a statically created shared state object from `createSharedState`.
+
+When you use a string key directly, the hook cannot infer the type of the state object.
+You would have to provide the types explicitly as generic arguments, or they will default to `any`.
+
+```tsx
+// Less safe: using a string key
+// You have to specify the types manually.
+const theme = useSharedStateSelector<{ theme: string; /*...other props*/ }, 'settings', string>(
+  'settings', 
+  (settings) => settings.theme
+);
+
+// Recommended: using a created state object
+// Types are inferred automatically!
+const theme = useSharedStateSelector(settingsState, (settings) => settings.theme);
+```
+
+## Shared Async Functions (`useSharedFunction`)
 Signature:
 - `const { state, trigger, forceTrigger, clear } = useSharedFunction(key, asyncFn, scopeName?)`
 - `const { state, trigger, forceTrigger, clear } = useSharedFunction(sharedFunctionCreated)`
@@ -267,6 +305,7 @@ Semantics:
 * Multiple components with the same key+scope share one execution + result.
 * `clear()` deletes the cache (next trigger re-runs).
 * You decide when to invoke `trigger` (e.g. on mount, on button click, when dependencies change, etc.).
+* Functions created with `createSharedFunction` are **static** and persist across `clearAll()` calls.
 
 ### Pattern: lazy load on first render
 ```tsx
@@ -286,7 +325,7 @@ const refresh = () => forceTrigger();
 ```
 
 
-## 📡 Real-time Subscriptions (`useSharedSubscription`)
+## Real-time Subscriptions (`useSharedSubscription`)
 Perfect for Firebase listeners, WebSocket connections,
 Server-Sent Events, or any streaming data source that needs cleanup.
 
@@ -298,8 +337,8 @@ Signature:
 
 The `subscriber` function receives three callbacks:
 - `set(data)`: Update the shared data
-- `onError(error)`: Handle errors 
-- `onCompletion()`: Mark loading as complete
+- `error(error)`: Handle errors 
+- `complete()`: Mark loading as complete
 - Returns: Optional cleanup function (called on unsubscribe/unmount)
 
 ### Pattern: Firebase Firestore real-time listener
@@ -310,8 +349,23 @@ import { createSharedSubscription } from 'react-shared-states';
 import { db } from './firebase-config';
 
 export const userSubscription = createSharedSubscription(
-  async (set, onError, onCompletion) => {
-    // ...same as before
+  (set, error, complete) => {
+    const userDocRef = doc(db, 'users', 'some-user-id');
+    const unsubscribe = onSnapshot(userDocRef, 
+      (doc) => {
+        if (doc.exists()) {
+          set(doc.data());
+        } else {
+          error(new Error('User not found'));
+        }
+        complete();
+      }, 
+      (err) => {
+        error(err);
+        complete();
+      }
+    );
+    return unsubscribe;
   }
 );
 
@@ -344,15 +398,15 @@ import { useSharedSubscription } from 'react-shared-states';
 function ChatRoom({ roomId }: { roomId: string }) {
   const { state, trigger } = useSharedSubscription(
     `chat-${roomId}`,
-    (set, onError, onCompletion) => {
+    (set, error, complete) => {
       const ws = new WebSocket(`ws://chat-server/${roomId}`);
       
-      ws.onopen = () => onCompletion();
+      ws.onopen = () => complete();
       ws.onmessage = (event) => {
         const message = JSON.parse(event.data);
         set(prev => [...(prev || []), message]);
       };
-      ws.onerror = onError;
+      ws.onerror = error;
       
       return () => ws.close();
     }
@@ -384,14 +438,14 @@ import { useSharedSubscription } from 'react-shared-states';
 function LiveUpdates() {
   const { state, trigger } = useSharedSubscription(
     'live-updates',
-    (set, onError, onCompletion) => {
+    (set, error, complete) => {
       const eventSource = new EventSource('/api/live-updates');
       
-      eventSource.onopen = () => onCompletion();
+      eventSource.onopen = () => complete();
       eventSource.onmessage = (event) => {
         set(JSON.parse(event.data));
       };
-      eventSource.onerror = onError;
+      eventSource.onerror = error;
       
       return () => eventSource.close();
     }
@@ -413,10 +467,12 @@ Subscription semantics:
 * Components mounting later instantly get the latest `data` without re-subscribing.
 
 
-## 🛰️ Static APIs (outside React)
-## 🏛️ Static/Global Shared Resource Creation
+## Static APIs (outside React)
+## Static/Global Shared Resource Creation
 
-For large apps, you can create and export shared state, function, or subscription objects for type safety and to avoid key collisions. This pattern is similar to Zustand or Jotai stores:
+For large apps, you can create and export shared state, function,
+or subscription objects for type safety and to avoid key collisions.
+This pattern is similar to Zustand or Jotai stores:
 
 ```ts
 import { createSharedState, createSharedFunction, createSharedSubscription, useSharedState, useSharedFunction, useSharedSubscription } from 'react-shared-states';
@@ -424,7 +480,7 @@ import { createSharedState, createSharedFunction, createSharedSubscription, useS
 // Create and export shared resources
 export const counterState = createSharedState(0);
 export const fetchUserFunction = createSharedFunction(() => fetch('/api/me').then(r => r.json()));
-export const chatSubscription = createSharedSubscription((set, onError, onCompletion) => {/* ... */});
+export const chatSubscription = createSharedSubscription((set, error, complete) => {/* ... */});
 
 // Use anywhere in your app
 const [count, setCount] = useSharedState(counterState);
@@ -463,16 +519,16 @@ const subStateScoped = sharedSubscriptionsApi.get('live-chat', 'myScope');
 
 ## API summary:
 
-| API                      | Methods                                                                                                                                                   |
-|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `sharedStatesApi`        | `get(key, scopeName?)`, `set(key, val, scopeName?)`, `has(key, scopeName?)`, `clear(key, scopeName?)`, `clearAll()`, `clearScope(scopeName?)`, `getAll()` |
-| `sharedFunctionsApi`     | `get(key, scopeName?)`, `set(key, val, scopeName?)`, `has(key, scopeName?)`, `clear(key, scopeName?)`, `clearAll()`, `clearScope(scopeName?)`, `getAll()` |
-| `sharedSubscriptionsApi` | `get(key, scopeName?)`, `set(key, val, scopeName?)`, `has(key, scopeName?)`, `clear(key, scopeName?)`, `clearAll()`, `clearScope(scopeName?)`, `getAll()` |
+| API                      | Methods                                                                                                                                                                                 |
+|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `sharedStatesApi`        | `get(key, scopeName?)`, `set(key, val, scopeName?)`, `has(key, scopeName?)`, `clear(key, scopeName?)`, `clearAll(withoutListeners?, withStatic?)`, `clearScope(scopeName?)`, `getAll()` |
+| `sharedFunctionsApi`     | `get(key, scopeName?)`, `set(key, val, scopeName?)`, `has(key, scopeName?)`, `clear(key, scopeName?)`, `clearAll(withoutListeners?, withStatic?)`, `clearScope(scopeName?)`, `getAll()` |
+| `sharedSubscriptionsApi` | `get(key, scopeName?)`, `set(key, val, scopeName?)`, `has(key, scopeName?)`, `clear(key, scopeName?)`, `clearAll(withoutListeners?, withStatic?)`, `clearScope(scopeName?)`, `getAll()` |
 
 `scopeName` defaults to `"_global"`. Internally, keys are stored as `${scope}//${key}`. The `.getAll()` method returns a nested object: `{ [scope]: { [key]: value } }`.
 
 
-## 🧩 Scoping Rules Deep Dive
+## Scoping Rules Deep Dive
 Resolution order used inside hooks:
 1. Explicit 3rd parameter (`scopeName`)
 2. Nearest `SharedStatesProvider` above the component
@@ -483,7 +539,7 @@ Unnamed providers auto‑generate a random scope name: each mount = isolated isl
 Two providers sharing the same `scopeName` act as a single logical scope even if they are disjoint in the tree (great for portals / microfrontends).
 
 
-## 🆚 Comparison Snapshot
+## Comparison Snapshot
 | Criterion      | react-shared-states                      | Redux Toolkit        | Zustand                          |
 |----------------|------------------------------------------|----------------------|----------------------------------|
 | Setup          | Install & call hook                      | Slice + store config | Create store function            |
@@ -495,16 +551,16 @@ Two providers sharing the same `scopeName` act as a single logical scope even if
 | Learning curve | Minutes                                  | Higher               | Low                              |
 
 
-## 🧪 Testing Tips
+## Testing Tips
 * Use static APIs to assert state after component interactions.
-* `sharedStatesApi.clearAll()`, `sharedFunctionsApi.clearAll()`, `sharedSubscriptionsApi.clearAll()` in `afterEach` to isolate tests.
+* `sharedStatesApi.clearAll(false, true)`, `sharedFunctionsApi.clearAll(false, true)`, `sharedSubscriptionsApi.clearAll(false, true)` in `afterEach` to isolate tests and clear static states.
 * For async functions: trigger once, await UI stabilization, assert `results` present.
 * For subscriptions: mock the subscription source (Firebase, WebSocket, etc.) and verify data flow.
 
 
 ## ❓ FAQ
 **Q: How do I reset a single shared state?**  
-`sharedStatesApi.clear('key')` or inside component: call a setter with the initial value.
+`sharedStatesApi.clear('key')`. If the state was created with `createSharedState`, it will reset to its initial value. Otherwise, it will be removed.
 
 **Q: Can I pre-hydrate data on the server?**  
 Yes. Call `sharedStatesApi.set(...)` during bootstrap, then first client hook usage will pick it up.
@@ -522,13 +578,19 @@ Subscriptions auto-cleanup when no components are listening. You can also manual
 Currently no built-in Suspense wrappers; wrap `useSharedFunction` yourself if desired.
 
 
-## 📚 Full API Reference
+## Full API Reference
 ### `useSharedState(key, initialValue, scopeName?)`
 Returns `[value, setValue]`.
 
 ### `useSharedState(sharedStateCreated)`
 Returns `[value, setValue]`.
 
+### `useSharedStateSelector(key, selector, scopeName?)`
+Returns the selected value.
+
+### `useSharedStateSelector(sharedStateCreated, selector)`
+Returns the selected value.
+
 ### `useSharedFunction(key, fn, scopeName?)`
 Returns `{ state, trigger, forceTrigger, clear }`.
 
@@ -549,7 +611,7 @@ Wrap children; optional `scopeName` (string). If omitted a random unique one is
 
 
 
-## 🤝 Contributions
+## Contributions
 
 We welcome contributions!
 If you'd like to improve `react-shared-states`,
@@ -567,4 +629,6 @@ feel free to [open an issue](https://github.com/HichemTab-tech/react-shared-stat
 ## 🌟 Acknowledgements
 
 Inspired by React's built-in primitives and the ergonomics of modern lightweight state libraries.
-Thanks to early adopters for feedback.
+Thanks to early adopters for feedback.
+If you'd like to improve `react-shared-states`,
+feel free to [open an issue](https://github.com/HichemTab-tech/react-shared-states/issues) or [submit a pull request](https://github.com/HichemTab-tech/react-shared-states/pulls).

package/dist/{SharedData.d.ts → SharedValuesManager.d.ts}

@@ -1,37 +1,44 @@
-import { AFunction, DataMapValue, Prefix, SharedCreated } from './types';
-type SharedDataType<T> = DataMapValue & T;
-export declare abstract class SharedData<T> {
-    data: Map<string, SharedDataType<T>>;
-    defaultValue(): T;
+import { AFunction, Prefix, SharedCreated, SharedValue } from './types';
+export declare const staticStores: SharedCreated[];
+export declare abstract class SharedValuesManager<T extends SharedValue, V> {
+    data: Map<string, T>;
+    defaultValue(): V;
     addListener(key: string, prefix: Prefix, listener: AFunction): void;
     removeListener(key: string, prefix: Prefix, listener: AFunction): void;
     callListeners(key: string, prefix: Prefix): void;
-    init(key: string, prefix: Prefix, data: T): void;
-    clearAll(withoutListeners?: boolean): void;
-    clear(key: string, prefix: Prefix, withoutListeners?: boolean): void;
-    get(key: string, prefix: Prefix): SharedDataType<T> | undefined;
-    setValue(key: string, prefix: Prefix, data: T): void;
+    init(key: string, prefix: Prefix, data: V, isStatic?: boolean): void;
+    createStatic<X extends SharedCreated>(rest: Omit<X, 'key' | 'prefix'>, scopeName?: Prefix): {
+        key: string;
+        prefix: Prefix;
+    } & Omit<X, "key" | "prefix">;
+    initStatic(sharedCreated: SharedCreated): void;
+    clearAll(withoutListeners?: boolean, withStatic?: boolean): void;
+    clear(key: string, prefix: Prefix, withoutListeners?: boolean, withStatic?: boolean): void;
+    get(key: string, prefix: Prefix): T | undefined;
+    setValue(key: string, prefix: Prefix, data: V): void;
     has(key: string, prefix: Prefix): string | undefined;
     static prefix(key: string, prefix: Prefix): string;
     static extractPrefix(mapKey: string): string[];
     useEffect(key: string, prefix: Prefix, unsub?: (() => void) | null): void;
 }
-export declare class SharedApi<T> {
-    private sharedData;
-    constructor(sharedData: SharedData<T>);
+export declare class SharedValuesApi<T extends SharedValue, V, R = T> {
+    protected sharedData: SharedValuesManager<T, V>;
+    constructor(sharedData: SharedValuesManager<T, V>);
     /**
      * get a value from the shared data
      * @param key
      * @param scopeName
      */
-    get<S extends string = string>(key: S, scopeName: Prefix): T;
+    get<S extends string = string>(key: S, scopeName: Prefix): R;
+    get<S extends string = string>(sharedCreated: SharedCreated): R;
     /**
      * set a value in the shared data
      * @param key
      * @param value
      * @param scopeName
      */
-    set<S extends string = string>(key: S, value: T, scopeName: Prefix): void;
+    set<S extends string = string>(key: S, value: V, scopeName: Prefix): void;
+    set<S extends string = string>(sharedCreated: SharedCreated, value: V): void;
     /**
      * clear all values from the shared data
      */
@@ -45,7 +52,12 @@ export declare class SharedApi<T> {
      * resolve a shared created object to a value
      * @param sharedCreated
      */
-    resolve(sharedCreated: SharedCreated): T;
+    resolve(sharedCreated: SharedCreated): R;
+    /**
+     * clear a value from the shared data
+     * @param key
+     * @param scopeName
+     */
     clear(key: string, scopeName: Prefix): void;
     clear(sharedCreated: SharedCreated): void;
     /**
@@ -59,4 +71,3 @@ export declare class SharedApi<T> {
      */
     getAll(): Record<string, Record<string, any>>;
 }
-export {};

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
-export { useSharedState, sharedStatesApi, createSharedState, SharedStatesApi } from './use-shared-state';
-export type { SharedStateCreated } from './use-shared-state';
+export { useSharedState, sharedStatesApi, createSharedState, SharedStatesApi, useSharedStateSelector } from './use-shared-state';
+export type { SharedStateCreated, SharedStateSelector } from './use-shared-state';
 export { useSharedFunction, sharedFunctionsApi, createSharedFunction, SharedFunctionsApi } from './use-shared-function';
 export type { SharedFunctionStateReturn } from './use-shared-function';
 export { useSharedSubscription, sharedSubscriptionsApi, createSharedSubscription, SharedSubscriptionsApi } from './use-shared-subscription';

package/dist/hooks/use-shared-function.d.ts

@@ -1,15 +1,40 @@
-import { AFunction, Prefix, SharedCreated } from '../types';
-import { SharedApi } from '../SharedData';
-type SharedFunctionsState<T> = {
-    fnState: {
-        results?: T;
-        isLoading: boolean;
-        error?: unknown;
-    };
+import { AFunction, Prefix, SharedCreated, SharedValue } from '../types';
+import { SharedValuesApi, SharedValuesManager } from '../SharedValuesManager';
+type SharedFunctionValue<T> = {
+    results?: T;
+    isLoading: boolean;
+    error?: unknown;
 };
-export declare class SharedFunctionsApi extends SharedApi<SharedFunctionsState<unknown>> {
-    get<T, S extends string = string>(key: S, scopeName?: Prefix): T;
-    set<T, S extends string = string>(key: S, fnState: SharedFunctionsState<T>, scopeName?: Prefix): void;
+interface SharedFunction<T> extends SharedValue {
+    fnState: SharedFunctionValue<T>;
+}
+declare class SharedFunctionsManager extends SharedValuesManager<SharedFunction<unknown>, {
+    fnState: SharedFunctionValue<unknown>;
+}> {
+    defaultValue(): {
+        fnState: {
+            results: undefined;
+            isLoading: boolean;
+            error: undefined;
+        };
+    };
+    initValue(key: string, prefix: Prefix, isStatic?: boolean): void;
+    setValue<T>(key: string, prefix: Prefix, data: {
+        fnState: SharedFunctionValue<T>;
+    }): void;
+}
+export declare class SharedFunctionsApi extends SharedValuesApi<SharedFunction<unknown>, {
+    fnState: SharedFunctionValue<unknown>;
+}, SharedFunctionValue<unknown>> {
+    constructor(sharedFunctionManager: SharedFunctionsManager);
+    get<T, S extends string = string>(key: S, scopeName?: Prefix): SharedFunctionValue<T>;
+    get<T, Args extends unknown[]>(sharedFunctionCreated: SharedFunctionCreated<T, Args>): SharedFunctionValue<T>;
+    set<T, S extends string = string>(key: S, value: {
+        fnState: SharedFunctionValue<T>;
+    }, scopeName?: Prefix): void;
+    set<T, Args extends unknown[]>(sharedFunctionCreated: SharedFunctionCreated<T, Args>, value: {
+        fnState: SharedFunctionValue<T>;
+    }): void;
 }
 export declare const sharedFunctionsApi: SharedFunctionsApi;
 interface SharedFunctionCreated<T, Args extends unknown[]> extends SharedCreated {
@@ -17,7 +42,7 @@ interface SharedFunctionCreated<T, Args extends unknown[]> extends SharedCreated
 }
 export declare const createSharedFunction: <T, Args extends unknown[]>(fn: AFunction<T, Args>, scopeName?: Prefix) => SharedFunctionCreated<T, Args>;
 export type SharedFunctionStateReturn<T, Args extends unknown[]> = {
-    readonly state: NonNullable<SharedFunctionsState<T>['fnState']>;
+    readonly state: NonNullable<SharedFunctionValue<T>>;
     readonly trigger: (...args: Args) => void;
     readonly forceTrigger: (...args: Args) => void;
     readonly clear: () => void;

package/dist/hooks/use-shared-state.d.ts

@@ -1,10 +1,25 @@
-import { Prefix, SharedCreated } from '../types';
-import { SharedApi } from '../SharedData';
-export declare class SharedStatesApi extends SharedApi<{
+import { Prefix, SharedCreated, SharedValue } from '../types';
+import { SharedValuesApi, SharedValuesManager } from '../SharedValuesManager';
+interface SharedState<T> extends SharedValue {
+    value: T;
+}
+declare class SharedStatesManager extends SharedValuesManager<SharedState<unknown>, {
     value: unknown;
 }> {
+    defaultValue(): {
+        value: undefined;
+    };
+    initValue(key: string, prefix: Prefix, value: unknown, isStatic?: boolean): void;
+    initStatic(sharedStateCreated: SharedStateCreated<any>): void;
+}
+export declare class SharedStatesApi extends SharedValuesApi<SharedState<unknown>, {
+    value: unknown;
+}, unknown> {
+    constructor(sharedStateManager: SharedStatesManager);
     get<T, S extends string = string>(key: S, scopeName?: Prefix): T;
+    get<T>(sharedStateCreated: SharedStateCreated<T>): T;
     set<T, S extends string = string>(key: S, value: T, scopeName?: Prefix): void;
+    set<T>(sharedStateCreated: SharedStateCreated<T>, value: T): void;
 }
 export declare const sharedStatesApi: SharedStatesApi;
 export interface SharedStateCreated<T> extends SharedCreated {
@@ -13,3 +28,7 @@ export interface SharedStateCreated<T> extends SharedCreated {
 export declare const createSharedState: <T>(initialValue: T, scopeName?: Prefix) => SharedStateCreated<T>;
 export declare function useSharedState<T, S extends string>(key: S, initialValue: T, scopeName?: Prefix): readonly [T, (v: T | ((prev: T) => T)) => void];
 export declare function useSharedState<T>(sharedStateCreated: SharedStateCreated<T>): readonly [T, (v: T | ((prev: T) => T)) => void];
+export type SharedStateSelector<S, T = S> = (original: S) => T;
+export declare function useSharedStateSelector<T, S extends string, R>(key: S, selector: SharedStateSelector<T, R>, scopeName?: Prefix): Readonly<R>;
+export declare function useSharedStateSelector<T, R>(sharedStateCreated: SharedStateCreated<T>, selector: SharedStateSelector<T, R>): Readonly<R>;
+export {};