import { useEffect, useState } from "react";
export class SharedState {
    _value;
    watchers = [];
    constructor(value) {
        this._value = value;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        if (value !== this._value) {
            this._value = value;
            for (const watcher of this.watchers) {
                watcher(value);
            }
        }
    }
    addWatcher(watcher) {
        this.watchers.push(watcher);
        return () => {
            this.watchers = this.watchers.filter(w => w !== watcher);
        };
    }
}
export function useWatchSharedState(state) {
    const [value, setValue] = useState(state.value);
    useEffect(() => {
        return state.addWatcher((value) => {
            if (typeof value === 'function') {
                setValue(() => value); // cannot directly store functions
            }
            else {
                setValue(value);
            }
        });
    }, [state]);
    return value;
}
// export function createSharedStateContext<T>(initialValue: T) {
//     const Context = React.createContext<SharedState<T>>(undefined as any);
//     function SharedStateProvider({ value = initialValue, children }: {
//         value?: T,
//         children: React.ReactNode
//     }) {
//         const state = useMemo(() => {
//             return new SharedState(value);
//         }, []);
//         return <Context.Provider value={state}>{children}</Context.Provider>
//     }
//     const useSharedState = () => {
//         return React.useContext(Context);
//     }
//     return {
//         Context,
//         Provider: SharedStateProvider,
//         useSharedState,
//         useWatchSharedState: () => {
//             const state = useSharedState();
//             return state ? useWatchSharedState(state) : undefined;
//         }
//     }
// }
//# sourceMappingURL=SharedState.js.map