@rehooks/local-storage/lib/local-storage-events.js

React hook for local-storage

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.deleteFromStorage = exports.writeStorage = exports.isTypeOfLocalStorageChanged = exports.LOCAL_STORAGE_CHANGE_EVENT_NAME = void 0;
var storage_1 = require("./storage");
var is_browser_1 = require("./is-browser");
exports.LOCAL_STORAGE_CHANGE_EVENT_NAME = 'onLocalStorageChange';
/**
 * CustomEvent polyfill derived from: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 */
(function () {
    if (!is_browser_1.isBrowser()) {
        return;
    }
    if (typeof window.CustomEvent === 'function') {
        return;
    }
    function CustomEvent(typeArg, params) {
        var _a, _b;
        if (params === void 0) { params = { bubbles: false, cancelable: false }; }
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(typeArg, (_a = params === null || params === void 0 ? void 0 : params.bubbles) !== null && _a !== void 0 ? _a : false, (_b = params === null || params === void 0 ? void 0 : params.cancelable) !== null && _b !== void 0 ? _b : false, params === null || params === void 0 ? void 0 : params.detail);
        return evt;
    }
    window.CustomEvent = CustomEvent;
})();
/**
 * Checks if the event that is passed in is the same type as LocalStorageChanged.
 *
 * @export
 * @template TValue
 * @param {*} evt the object you wish to assert as a onLocalStorageChange event.
 * @returns {evt is LOCAL_STORAGE_CHANGE_EVENT_NAME} if true, evt is asserted to be onLocalStorageChange.
 */
function isTypeOfLocalStorageChanged(evt) {
    return !!evt && evt.type === exports.LOCAL_STORAGE_CHANGE_EVENT_NAME;
}
exports.isTypeOfLocalStorageChanged = isTypeOfLocalStorageChanged;
/**
 * Use this instead of directly using localStorage.setItem
 * in order to correctly send events within the same window.
 *
 * @example
 * ```js
 * writeStorage('hello', JSON.stringify({ name: 'world' }));
 * const { name } = JSON.parse(localStorage.getItem('hello'));
 * ```
 *
 * @export
 * @param {string} key The key to write to in the localStorage.
 * @param {string} value The value to write to in the localStorage.
 */
function writeStorage(key, value) {
    if (!is_browser_1.isBrowser()) {
        return;
    }
    try {
        storage_1.storage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : "" + value);
        window.dispatchEvent(new CustomEvent(exports.LOCAL_STORAGE_CHANGE_EVENT_NAME, {
            detail: { key: key, value: value },
        }));
    }
    catch (err) {
        if (err instanceof TypeError && err.message.includes('circular structure')) {
            throw new TypeError('The object that was given to the writeStorage function has circular references.\n' +
                'For more information, check here: ' +
                'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value');
        }
        throw err;
    }
}
exports.writeStorage = writeStorage;
/**
 * Use this function to delete a value from localStorage.
 *
 * After calling this function, the localStorage value will be null.
 *
 * @example
 * ```js
 * const user = { name: 'John', email: 'John@fakemail.com' };
 *
 * // Add a user to your localStorage
 * writeStorage('user', JSON.stringify(user));
 *
 * // This will also trigger an update to the state of your component
 * deleteFromStorage('user');
 *
 * localStorage.getItem('user') === null // ✔ This is now null
 * ```
 *
 * @export
 * @param {string} key The key of the item you wish to delete from localStorage.
 */
function deleteFromStorage(key) {
    if (!is_browser_1.isBrowser()) {
        return;
    }
    storage_1.storage.removeItem(key);
    window.dispatchEvent(new CustomEvent(exports.LOCAL_STORAGE_CHANGE_EVENT_NAME, {
        detail: { key: key, value: null },
    }));
}
exports.deleteFromStorage = deleteFromStorage;
//# sourceMappingURL=local-storage-events.js.map