storybook-addon-playground/dist/hooks/usePersistence.js

A playground to enable consumers learn how to use the component library or to reproduce bugs

import { useRef, useEffect } from 'react';
import { useAddonState } from '@storybook/manager-api';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import 'lz-string';
import { saveCodeToStorage } from '../utils/persistence-utils.js';
import { PANEL_ID } from '../consts/addon-consts.js';
import { DEFAULT_ADDON_STATE } from '../consts/state-consts.js';
import '@codemirror/commands';

const SAVE_DEBOUNCE_MS = 1000;
const usePersistence = () => {
    const [state] = useAddonState(PANEL_ID, DEFAULT_ADDON_STATE);
    const { code, hasInitialCodeLoaded } = state;
    const saveTimeoutRef = useRef(null);
    useEffect(() => {
        if (!hasInitialCodeLoaded || !code) {
            return;
        }
        if (!code.jsx.trim() && !code.css.trim()) {
            return;
        }
        if (saveTimeoutRef.current) {
            clearTimeout(saveTimeoutRef.current);
        }
        saveTimeoutRef.current = setTimeout(() => {
            saveCodeToStorage(code);
        }, SAVE_DEBOUNCE_MS);
        return () => {
            if (saveTimeoutRef.current) {
                clearTimeout(saveTimeoutRef.current);
            }
        };
    }, [code, hasInitialCodeLoaded]);
};

export { usePersistence as default };
//# sourceMappingURL=usePersistence.js.map