state-management-utilities/dist/react/store.js

State management utilities

import { produce } from "immer";
import React from "react";
import { StateManagerStore } from "../store";
import { useDehydrate } from "./dehydrate";
import { ReactStateManager } from "./state-manager";
export class ReactStateManagerStore extends StateManagerStore {
    _initializeEntity(initialValue, config) {
        return new ReactStateManager(initialValue, config);
    }
    _hooks = Object.freeze({
        useState: () => {
            const uid = React.useId();
            const dehydrated = useDehydrate();
            const storeValues = React.useMemo(() => {
                const values = this.value;
                if (!dehydrated)
                    return values;
                for (const key in this.entities) {
                    const __uid = this.entities[key].uid;
                    const hydratedValue = dehydrated?.data?.[__uid]?.value;
                    if (hydratedValue === undefined)
                        continue;
                    values[key] = hydratedValue;
                }
                return values;
            }, [dehydrated]);
            const [state, setStateInternal] = React.useState(storeValues);
            React.useEffect(() => {
                for (const key in this.entities) {
                    if (!this.entities[key])
                        continue;
                    this.entities[key].register({
                        uid,
                        callback: (newValue) => {
                            setStateInternal((prev) => produce(prev, (draft) => {
                                draft[key] = newValue;
                                return draft;
                            }));
                        },
                    });
                }
                return () => {
                    for (const key in this.entities) {
                        if (!this.entities[key])
                            continue;
                        this.entities[key].unregister({ uid });
                    }
                };
            }, [uid]);
            const setState = React.useCallback((newValue) => {
                this.value = newValue;
            }, []);
            return [state, setState];
        },
    });
    get hooks() {
        return this._hooks;
    }
}
export function store(initialValues, uid, config) {
    return new ReactStateManagerStore(initialValues, uid, config);
}