@etsoo/toolpad/build/cjs/persistence/useStorageState.js

Dashboard framework extention based on Toolpad Core

"use client";
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.useStorageStateServer = useStorageStateServer;
exports.useStorageState = useStorageState;
const React = __importStar(require("react"));
const codec_1 = require("./codec");
// storage events only work across tabs, we'll use an event emitter to announce within the current tab
const currentTabChangeListeners = new Map();
function onCurrentTabStorageChange(key, handler) {
    let listeners = currentTabChangeListeners.get(key);
    if (!listeners) {
        listeners = new Set();
        currentTabChangeListeners.set(key, listeners);
    }
    listeners.add(handler);
}
function offCurrentTabStorageChange(key, handler) {
    const listeners = currentTabChangeListeners.get(key);
    if (!listeners) {
        return;
    }
    listeners.delete(handler);
    if (listeners.size === 0) {
        currentTabChangeListeners.delete(key);
    }
}
function emitCurrentTabStorageChange(key) {
    const listeners = currentTabChangeListeners.get(key);
    if (listeners) {
        listeners.forEach((listener) => listener());
    }
}
if (typeof window !== "undefined") {
    const origSetItem = window.localStorage.setItem;
    window.localStorage.setItem = function setItem(key, value) {
        const result = origSetItem.call(this, key, value);
        emitCurrentTabStorageChange(key);
        return result;
    };
}
function subscribe(area, key, callback) {
    if (!key) {
        return () => { };
    }
    const storageHandler = (event) => {
        if (event.storageArea === area && event.key === key) {
            callback();
        }
    };
    window.addEventListener("storage", storageHandler);
    onCurrentTabStorageChange(key, callback);
    return () => {
        window.removeEventListener("storage", storageHandler);
        offCurrentTabStorageChange(key, callback);
    };
}
function getSnapshot(area, key) {
    if (!key) {
        return null;
    }
    try {
        return area.getItem(key);
    }
    catch {
        // ignore
        // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
        return null;
    }
}
function setValue(area, key, value) {
    if (!key) {
        return;
    }
    try {
        if (value === null) {
            area.removeItem(key);
        }
        else {
            area.setItem(key, String(value));
        }
    }
    catch {
        // ignore
        // See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
        return;
    }
    emitCurrentTabStorageChange(key);
}
const serverValue = [null, () => { }];
function useStorageStateServer() {
    return serverValue;
}
function encode(codec, value) {
    return value === null ? null : codec.stringify(value);
}
function decode(codec, value) {
    return value === null ? null : codec.parse(value);
}
// Start with null for the hydration, and then switch to the actual value.
const getKeyServerSnapshot = () => null;
function useStorageState(area, key, initializer = null, options) {
    const codec = (options?.codec ?? codec_1.CODEC_STRING);
    const [initialValue] = React.useState(initializer);
    const encodedInitialValue = React.useMemo(() => encode(codec, initialValue), [codec, initialValue]);
    const subscribeKey = React.useCallback((callback) => subscribe(area, key, callback), [area, key]);
    const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? encodedInitialValue, [area, encodedInitialValue, key]);
    const encodedStoredValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
    const storedValue = React.useMemo(() => decode(codec, encodedStoredValue), [codec, encodedStoredValue]);
    const setStoredValue = React.useCallback((value) => {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        const encodedValueToStore = encode(codec, valueToStore);
        setValue(area, key, encodedValueToStore);
    }, [area, codec, storedValue, key]);
    const [nonStoredValue, setNonStoredValue] = React.useState(initialValue);
    if (!key) {
        return [nonStoredValue, setNonStoredValue];
    }
    return [storedValue, setStoredValue];
}