Enhance shared subscription API with unsubscribe functionality and improve state management

HichemTab-tech · HichemTab-tech · commit 88502c1a6b2b · 2025-08-27T17:25:59.000+01:00
diff --git a/demo/FakeSharedEmitter.ts b/demo/FakeSharedEmitter.ts
@@ -1,5 +1,6 @@
 type Callback<T> = {
-    onSuccess: (data: T) => void
+    onNext: (data: T) => void
+    onCompletion?: () => void
     onError?: (error: unknown) => void
 }
 
@@ -17,7 +18,7 @@ export const FakeSharedEmitter = (() => {
         const interval = setInterval(() => {
             const data = `${key} - ${Math.floor(Math.random() * 1000)}`;
             console.log("pushing through subscriber...");
-            listeners.get(key)?.callbacks.forEach((cb) => cb.onSuccess(data));
+            listeners.get(key)?.callbacks.forEach((cb) => cb.onNext(data));
         }, intervalDuration ?? (1000 + Math.random() * 2000));
 
         listeners.set(key, {
@@ -26,13 +27,18 @@ export const FakeSharedEmitter = (() => {
         });
     }
 
-    function subscribe<T>(key: string, onSuccess: Callback<T>['onSuccess'], onError?: Callback<T>['onError']) {
+    async function subscribe<T>(key: string, onNext: Callback<T>['onNext'], onError?: Callback<T>['onError'], onCompletion?: Callback<T>['onCompletion']) {
         if (!listeners.has(key)) start(key);
 
         const callback = {
-            onSuccess,
+            onNext,
             onError,
+            onCompletion
         }
+
+        await fakeAwait(1000);
+        callback.onCompletion?.();
+
         const entry = listeners.get(key)!;
         entry.callbacks.push(callback);
 
@@ -47,7 +53,7 @@ export const FakeSharedEmitter = (() => {
 
     function forcePush(key: string, value: any) {
         if (listeners.has(key)) {
-            listeners.get(key)!.callbacks.forEach((cb) => cb.onSuccess(value));
+            listeners.get(key)!.callbacks.forEach((cb) => cb.onNext(value));
         }
     }
 
@@ -73,4 +79,6 @@ export const FakeSharedEmitter = (() => {
     };
 })();
 
+const fakeAwait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 window.FakeSharedEmitter = FakeSharedEmitter;
diff --git a/demo/app.tsx b/demo/app.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+    sharedFunctionsApi, sharedStatesApi,
     SharedStatesProvider,
     sharedSubscriptionsApi,
     useSharedFunction,
@@ -8,14 +9,17 @@ import {
 } from 'react-shared-states';
 import './FakeSharedEmitter';
 import {FakeSharedEmitter} from "./FakeSharedEmitter";
+import {useEffect, useState} from "react";
 
 FakeSharedEmitter.intervalDuration = 3000;
 window.sharedSubscriptionsApi = sharedSubscriptionsApi;
+window.sharedFunctionsApi = sharedFunctionsApi;
+window.sharedStatesApi = sharedStatesApi;
 
 const Comp1 = () => {
     const [x, setX] = useSharedState('x', 0);
-    const handle = () => {
-        setX(x+1)
+    const handle = (by = 1) => {
+        setX(x+by)
     }
 
     const {state, trigger, forceTrigger} = useSharedFunction("tt", (logMessage: string) => new Promise((resolve) => {
@@ -29,6 +33,7 @@ const Comp1 = () => {
     return (
         <div>
             <button onClick={() => handle()}>Increment x: {x}</button>
+            <button onClick={() => handle(-1)}>Decrement x: {x}</button>
             {state.isLoading && <p>Loading...</p>}
             <button onClick={() => trigger("Hello world")}>Hello</button>
             <button onClick={() => forceTrigger("Hello world")}>Force Hello</button>
@@ -38,44 +43,49 @@ const Comp1 = () => {
 }
 
 const Comp2 = () => {
-    const {trigger} = useSharedSubscription('test-sub', (set, onError) => {
+    const {state, trigger, unsubscribe} = useSharedSubscription<string>('test-sub', (set, onError, onCompletion) => {
         return FakeSharedEmitter.subscribe("x", (data: string) => {
             if (data === "do-error") {
                 onError(new Error("Error"));
                 return;
             }
             set(data);
             console.log("data loaded...", data);
-        }, onError)
+        }, onError, onCompletion)
     });
 
 
     return (
         <div>
             <h1 className="text-red-600">Comp2</h1>
             <button onClick={() => trigger()}>subscribe</button>
+            <button onClick={() => unsubscribe()}>unsubscribe</button>
+            results: {state.data}
             <br/>
         </div>
     )
 }
 
 const App = () => {
 
+    const [hide, setHide] = useState(false);
     const [x, setX] = useSharedState('x', 0);
-    const [x2, setX2] = useSharedState('x', 0);
+    //const [x, setX] = useState(0);
     const handle = () => {
         setX(x+1)
     }
-    const handle2 = () => {
-        setX2(x-1);
-    }
+
+    useEffect(() => {
+        window.hide = () => setHide(a => !a);
+    }, []);
+
+    if (hide) return null;
 
     return (
         <div>
             <h1 className="text-red-600">React shared states Demo</h1>
             <button onClick={() => handle()}>Increment x: {x}</button>
             <br/>
-            <button onClick={() => handle2()}>Increment x: {x2}</button>
             <Comp1/>
             <SharedStatesProvider>
                 <Comp1/>
@@ -86,6 +96,7 @@ const App = () => {
                 </SharedStatesProvider>
             </SharedStatesProvider>
             {x > 3 && <Comp2/>}
+            {x > 6 && <Comp2/>}
         </div>
     );
 };
diff --git a/demo/env.d.ts b/demo/env.d.ts
@@ -1,7 +1,14 @@
+// noinspection JSUnusedGlobalSymbols
+
 import {FakeSharedEmitter} from "./FakeSharedEmitter";
+import {sharedStatesApi, sharedSubscriptionsApi, sharedFunctionsApi} from "react-shared-states";
 
 declare global {
     interface Window {
         FakeSharedEmitter: typeof FakeSharedEmitter
+        sharedSubscriptionsApi: typeof sharedSubscriptionsApi
+        sharedStatesApi: typeof sharedStatesApi
+        sharedFunctionsApi: typeof sharedFunctionsApi
+        hide: () => void
     }
 }
diff --git a/src/SharedData.ts b/src/SharedData.ts
@@ -1,4 +1,6 @@
-import type {AFunction, DataMapValue, NonEmptyString, Prefix} from "./types";
+import type {AFunction, DataMapValue, Prefix} from "./types";
+import {useEffect} from "react";
+import {log} from "./lib/utils";
 
 
 type SharedDataType<T> = DataMapValue & T;
@@ -79,11 +81,23 @@ export abstract class SharedData<T> {
     static prefix(key: string, prefix: Prefix) {
         return `${prefix}_${key}`;
     }
+
+    useEffect(key: string, prefix: Prefix, unsub: (() => void)|null = null) {
+        useEffect(() => {
+            return () => {
+                unsub?.();
+                log(`[${SharedData.prefix(key, prefix)}]`, "unmount effect");
+                if (this.data.get(SharedData.prefix(key, prefix))!.listeners?.length === 0) {
+                    this.clear(key, prefix);
+                }
+            }
+        }, []);
+    }
 }
 
 export interface SharedApi<T> {
-    get: <S extends string = string>(key: NonEmptyString<S>, scopeName: Prefix) => T;
-    set: <S extends string = string>(key: NonEmptyString<S>, value: T, scopeName: Prefix) => void;
+    get: <S extends string = string>(key: S, scopeName: Prefix) => T;
+    set: <S extends string = string>(key: S, value: T, scopeName: Prefix) => void;
     clearAll: () => void;
     clear: (key: string, scopeName: Prefix) => void;
     has: (key: string, scopeName: Prefix) => boolean;
diff --git a/src/hooks/use-shared-function.ts b/src/hooks/use-shared-function.ts
@@ -1,7 +1,8 @@
-import type {AFunction, NonEmptyString, Prefix} from "../types";
-import {useSyncExternalStore} from "react";
+import type {AFunction, Prefix} from "../types";
+import {useMemo, useSyncExternalStore} from "react";
 import {type SharedApi, SharedData} from "../SharedData";
 import useShared from "./use-shared";
+import {ensureNonEmptyString} from "../lib/utils";
 
 type SharedFunctionsState<T> = {
     fnState: {
@@ -32,11 +33,13 @@ class SharedFunctionsData extends SharedData<SharedFunctionsState<unknown>> {
 }
 
 export class SharedFunctionsApi implements SharedApi<SharedFunctionsState<unknown>>{
-    get<T, S extends string = string>(key: NonEmptyString<S>, scopeName: Prefix = "_global") {
+    get<T, S extends string = string>(key: S, scopeName: Prefix = "_global") {
+        key = ensureNonEmptyString(key);
         const prefix: Prefix = scopeName || "_global";
         return sharedFunctionsData.get(key, prefix)?.fnState as T;
     }
-    set<T, S extends string = string>(key: NonEmptyString<S>, fnState: SharedFunctionsState<T>, scopeName: Prefix = "_global") {
+    set<T, S extends string = string>(key: S, fnState: SharedFunctionsState<T>, scopeName: Prefix = "_global") {
+        key = ensureNonEmptyString(key);
         const prefix: Prefix = scopeName || "_global";
         sharedFunctionsData.setValue(key, prefix, fnState);
     }
@@ -60,20 +63,34 @@ export const sharedFunctionsApi = new SharedFunctionsApi();
 
 const sharedFunctionsData = new SharedFunctionsData();
 
-export const useSharedFunction = <T, Args extends unknown[], S extends string = string>(key: NonEmptyString<S>, fn: AFunction<T, Args>, scopeName?: Prefix) => {
+export const useSharedFunction = <T, Args extends unknown[], S extends string = string>(key: S, fn: AFunction<T, Args>, scopeName?: Prefix) => {
 
+    key = ensureNonEmptyString(key);
     const {prefix} = useShared(scopeName);
 
     sharedFunctionsData.init(key, prefix);
 
-    const state = useSyncExternalStore<NonNullable<SharedFunctionsState<T>['fnState']>>((listener) => {
-        sharedFunctionsData.init(key, prefix);
-        sharedFunctionsData.addListener(key, prefix, listener);
+    const externalStoreSubscriber = useMemo<Parameters<typeof useSyncExternalStore<NonNullable<SharedFunctionsState<T>['fnState']>>>[0]>(
+        () =>
+            (listener) => {
+                sharedFunctionsData.init(key, prefix);
+                sharedFunctionsData.addListener(key, prefix, listener);
 
-        return () => {
-            sharedFunctionsData.removeListener(key, prefix, listener);
-        }
-    }, () => sharedFunctionsData.get(key, prefix)!.fnState as NonNullable<SharedFunctionsState<T>['fnState']>);
+                return () => {
+                    sharedFunctionsData.removeListener(key, prefix, listener);
+                }
+            },
+        []
+    );
+
+    const externalStoreSnapshotGetter = useMemo<Parameters<typeof useSyncExternalStore<NonNullable<SharedFunctionsState<T>['fnState']>>>[1]>(
+        () =>
+            () =>
+                sharedFunctionsData.get(key, prefix)!.fnState as NonNullable<SharedFunctionsState<T>['fnState']>,
+        []
+    );
+
+    const state = useSyncExternalStore<NonNullable<SharedFunctionsState<T>['fnState']>>(externalStoreSubscriber, externalStoreSnapshotGetter);
 
     const trigger = async (force: boolean, ...args: Args) => {
         const entry = sharedFunctionsData.get(key, prefix)!;
@@ -89,6 +106,8 @@ export const useSharedFunction = <T, Args extends unknown[], S extends string =
         entry.listeners.forEach(l => l());
     };
 
+    sharedFunctionsData.useEffect(key, prefix);
+
     // noinspection JSUnusedGlobalSymbols
     return {
         state,
diff --git a/src/hooks/use-shared-state.ts b/src/hooks/use-shared-state.ts
@@ -1,7 +1,8 @@
-import {useSyncExternalStore} from "react";
-import type {NonEmptyString, Prefix} from "../types";
+import {useMemo, useSyncExternalStore} from "react";
+import type {AFunction, Prefix} from "../types";
 import {type SharedApi, SharedData} from "../SharedData";
 import useShared from "./use-shared";
+import {ensureNonEmptyString} from "../lib/utils";
 
 class SharedStatesData extends SharedData<{
     value: unknown
@@ -17,16 +18,22 @@ class SharedStatesData extends SharedData<{
     setValue(key: string, prefix: Prefix, value: unknown) {
         super.setValue(key, prefix, {value});
     }
+
+    removeListener(key: string, prefix: Prefix, listener: AFunction) {
+        super.removeListener(key, prefix, listener);
+    }
 }
 
 class SharedStatesApi implements SharedApi<{
     value: unknown
 }>{
-    get<T, S extends string = string>(key: NonEmptyString<S>, scopeName: Prefix = "_global") {
+    get<T, S extends string = string>(key: S, scopeName: Prefix = "_global") {
+        key = ensureNonEmptyString(key);
         const prefix: Prefix = scopeName || "_global";
         return sharedStatesData.get(key, prefix)?.value as T;
     }
-    set<T, S extends string = string>(key: NonEmptyString<S>, value: T, scopeName: Prefix = "_global") {
+    set<T, S extends string = string>(key: S, value: T, scopeName: Prefix = "_global") {
+        key = ensureNonEmptyString(key);
         const prefix: Prefix = scopeName || "_global";
         sharedStatesData.setValue(key, prefix, {value});
     }
@@ -50,20 +57,27 @@ export const sharedStatesApi = new SharedStatesApi();
 
 const sharedStatesData = new SharedStatesData();
 
-export const useSharedState = <T, S extends string = string>(key: NonEmptyString<S>, value: T, scopeName?: Prefix) => {
 
+
+export const useSharedState = <T, S extends string = string>(key: S, value: T, scopeName?: Prefix) => {
+
+    key = ensureNonEmptyString(key);
     const {prefix} = useShared(scopeName);
 
     sharedStatesData.init(key, prefix, value);
 
-    const dataValue = useSyncExternalStore((listener) => {
+    const externalStoreSubscriber = useMemo<Parameters<typeof useSyncExternalStore>[0]>(() => (listener) => {
         sharedStatesData.init(key, prefix, value);
         sharedStatesData.addListener(key, prefix, listener);
 
         return () => {
             sharedStatesData.removeListener(key, prefix, listener);
         }
-    }, () => sharedStatesData.get(key, prefix)?.value as T);
+    }, []);
+
+    const externalStoreSnapshotGetter = useMemo(() => () => sharedStatesData.get(key, prefix)?.value as T, []);
+
+    const dataValue = useSyncExternalStore(externalStoreSubscriber, externalStoreSnapshotGetter);
 
     const setData = (newValueOrCallbackToNewValue: T|((prev: T) => T)) => {
         const newValue = (typeof newValueOrCallbackToNewValue === "function") ? (newValueOrCallbackToNewValue as (prev: T) => T)(sharedStatesData.get(key, prefix)?.value as T) : newValueOrCallbackToNewValue
@@ -73,6 +87,8 @@ export const useSharedState = <T, S extends string = string>(key: NonEmptyString
         }
     }
 
+    sharedStatesData.useEffect(key, prefix);
+
     return [
         dataValue,
         setData
diff --git a/src/hooks/use-shared-subscription.ts b/src/hooks/use-shared-subscription.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,14 @@`
	`1`	`+// noinspection JSUnusedGlobalSymbols`
	`2`	`+`
`1`	`3`	`import {FakeSharedEmitter} from "./FakeSharedEmitter";`
	`4`	`+import {sharedStatesApi, sharedSubscriptionsApi, sharedFunctionsApi} from "react-shared-states";`
`2`	`5`
`3`	`6`	`declare global {`
`4`	`7`	`interface Window {`
`5`	`8`	`FakeSharedEmitter: typeof FakeSharedEmitter`
	`9`	`+ sharedSubscriptionsApi: typeof sharedSubscriptionsApi`
	`10`	`+ sharedStatesApi: typeof sharedStatesApi`
	`11`	`+ sharedFunctionsApi: typeof sharedFunctionsApi`
	`12`	`+ hide: () => void`
`6`	`13`	`}`
`7`	`14`	`}`