react-tab-refresh 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,669 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
+
+const PruningContext = createContext(null);
+PruningContext.displayName = 'PruningContext';
+
+function parseTime(time) {
+    if (typeof time === 'number') {
+        return time;
+    }
+    const match = time.match(/^(\d+)(ms|s|m|h|d)$/);
+    if (!match) {
+        throw new Error(`Invalid time format: "${time}". Use format like "30m", "1h", "2d", or milliseconds.`);
+    }
+    const [, value, unit] = match;
+    const num = parseInt(value, 10);
+    const multipliers = {
+        ms: 1,
+        s: 1000,
+        m: 60 * 1000,
+        h: 60 * 60 * 1000,
+        d: 24 * 60 * 60 * 1000,
+    };
+    return num * multipliers[unit];
+}
+function isMemoryAPIAvailable() {
+    return (typeof performance !== 'undefined' &&
+        'memory' in performance &&
+        performance.memory !== null);
+}
+function getMemoryUsage() {
+    if (!isMemoryAPIAvailable()) {
+        return undefined;
+    }
+    const memory = performance.memory;
+    return Math.round(memory.usedJSHeapSize / 1024 / 1024);
+}
+function getDomNodeCount() {
+    return document.getElementsByTagName('*').length;
+}
+function createStorageKey(key) {
+    return `rtr_${key}`;
+}
+function createLogger(namespace, enabled = false) {
+    const isDev = process.env.NODE_ENV !== 'production';
+    const shouldLog = isDev && enabled;
+    return {
+        log: (...args) => {
+            if (shouldLog) {
+                console.log(`[react-tab-refresh:${namespace}]`, ...args);
+            }
+        },
+        warn: (...args) => {
+            if (shouldLog) {
+                console.warn(`[react-tab-refresh:${namespace}]`, ...args);
+            }
+        },
+        error: (...args) => {
+            if (shouldLog) {
+                console.error(`[react-tab-refresh:${namespace}]`, ...args);
+            }
+        },
+    };
+}
+function isSerializable(value) {
+    if (value === null || value === undefined) {
+        return true;
+    }
+    const type = typeof value;
+    if (type === 'boolean' || type === 'number' || type === 'string') {
+        return true;
+    }
+    if (type === 'function' || type === 'symbol') {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return value.every(isSerializable);
+    }
+    if (type === 'object') {
+        if (value.constructor !== Object && value.constructor !== Array) {
+            return false;
+        }
+        return Object.values(value).every(isSerializable);
+    }
+    return false;
+}
+function safeSerialize(value) {
+    try {
+        return JSON.stringify(value);
+    }
+    catch (error) {
+        console.error('[react-tab-refresh] Serialization failed:', error);
+        return null;
+    }
+}
+function safeDeserialize(json) {
+    try {
+        return JSON.parse(json);
+    }
+    catch (error) {
+        console.error('[react-tab-refresh] Deserialization failed:', error);
+        return null;
+    }
+}
+function debounce(fn, delay) {
+    let timeoutId = null;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            fn(...args);
+            timeoutId = null;
+        }, delay);
+    };
+}
+function isPageVisibilitySupported() {
+    return typeof document !== 'undefined' && 'hidden' in document;
+}
+function isPageVisible() {
+    if (!isPageVisibilitySupported()) {
+        return true;
+    }
+    return !document.hidden;
+}
+
+class InactivityMonitor {
+    constructor(config) {
+        this.listeners = new Map();
+        this.intervalId = null;
+        this.hiddenAt = null;
+        this.isRunning = false;
+        this.handleVisibilityChange = () => {
+            const isVisible = isPageVisible();
+            if (isVisible) {
+                this.logger.log('Tab became visible');
+                this.hiddenAt = null;
+            }
+            else {
+                this.logger.log('Tab became hidden');
+                this.hiddenAt = Date.now();
+            }
+        };
+        this.config = {
+            maxInactivityMs: config.maxInactivityMs ?? 30 * 60 * 1000,
+            maxMemoryMb: config.maxMemoryMb,
+            maxDomNodes: config.maxDomNodes,
+            enableMemoryMonitoring: config.enableMemoryMonitoring ?? false,
+            pollingInterval: config.pollingInterval ?? 30000,
+            debug: config.debug ?? false,
+        };
+        this.logger = createLogger('InactivityMonitor', this.config.debug);
+        if (!isPageVisibilitySupported()) {
+            this.logger.warn('Page Visibility API not supported. Inactivity monitoring disabled.');
+        }
+    }
+    start() {
+        if (this.isRunning) {
+            this.logger.warn('Monitor already running');
+            return;
+        }
+        if (!isPageVisibilitySupported()) {
+            this.logger.error('Cannot start monitor: Page Visibility API not supported');
+            return;
+        }
+        this.isRunning = true;
+        this.setupVisibilityListener();
+        this.startPolling();
+        this.logger.log('Monitor started', {
+            maxInactivityMs: this.config.maxInactivityMs,
+            maxMemoryMb: this.config.maxMemoryMb,
+            maxDomNodes: this.config.maxDomNodes,
+        });
+    }
+    stop() {
+        if (!this.isRunning) {
+            return;
+        }
+        this.isRunning = false;
+        this.removeVisibilityListener();
+        this.stopPolling();
+        this.logger.log('Monitor stopped');
+    }
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+    }
+    off(event, callback) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.delete(callback);
+        }
+    }
+    getCurrentMetrics() {
+        const inactiveMs = this.getInactiveTime();
+        const memoryMb = this.config.enableMemoryMonitoring
+            ? getMemoryUsage()
+            : undefined;
+        const domNodes = this.config.maxDomNodes ? getDomNodeCount() : undefined;
+        return {
+            inactiveMs,
+            memoryMb,
+            domNodes,
+        };
+    }
+    checkThresholds() {
+        const metrics = this.getCurrentMetrics();
+        let exceeded = false;
+        const reasons = [];
+        if (metrics.inactiveMs >= this.config.maxInactivityMs) {
+            exceeded = true;
+            reasons.push(`Inactivity: ${Math.round(metrics.inactiveMs / 1000)}s / ${Math.round(this.config.maxInactivityMs / 1000)}s`);
+        }
+        if (this.config.enableMemoryMonitoring &&
+            this.config.maxMemoryMb &&
+            metrics.memoryMb !== undefined &&
+            metrics.memoryMb >= this.config.maxMemoryMb) {
+            exceeded = true;
+            reasons.push(`Memory: ${metrics.memoryMb}MB / ${this.config.maxMemoryMb}MB`);
+        }
+        if (this.config.maxDomNodes &&
+            metrics.domNodes !== undefined &&
+            metrics.domNodes >= this.config.maxDomNodes) {
+            exceeded = true;
+            reasons.push(`DOM Nodes: ${metrics.domNodes} / ${this.config.maxDomNodes}`);
+        }
+        if (exceeded) {
+            this.logger.log('Threshold exceeded:', reasons.join(', '));
+            this.emit('threshold-exceeded', metrics);
+        }
+        this.emit('metrics-updated', metrics);
+    }
+    emit(event, metrics) {
+        const callbacks = this.listeners.get(event);
+        if (callbacks) {
+            callbacks.forEach((callback) => {
+                try {
+                    callback(metrics);
+                }
+                catch (error) {
+                    this.logger.error(`Error in ${event} callback:`, error);
+                }
+            });
+        }
+    }
+    setupVisibilityListener() {
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+    }
+    removeVisibilityListener() {
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+    }
+    getInactiveTime() {
+        if (!this.hiddenAt || isPageVisible()) {
+            return 0;
+        }
+        return Date.now() - this.hiddenAt;
+    }
+    startPolling() {
+        if (this.intervalId) {
+            return;
+        }
+        this.intervalId = setInterval(() => {
+            if (!isPageVisible()) {
+                this.checkThresholds();
+            }
+        }, this.config.pollingInterval);
+    }
+    stopPolling() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+        this.logger.log('Config updated', this.config);
+    }
+    reset() {
+        this.hiddenAt = null;
+        this.logger.log('Monitor reset');
+    }
+}
+
+function PruneProvider({ children, config = {}, placeholder, }) {
+    const { pruneAfter = '30m', maxMemoryMb, enableMemoryMonitoring = false, maxDomNodes, onPrune, onRehydrate, debug = false, } = config;
+    const logger = createLogger('PruneProvider', debug);
+    const [isPruned, setIsPruned] = useState(false);
+    const [isRehydrating, setIsRehydrating] = useState(false);
+    const [metrics, setMetrics] = useState({
+        inactiveMs: 0,
+    });
+    const monitorRef = useRef(null);
+    const cleanupHandlers = useRef(new Map());
+    useEffect(() => {
+        const maxInactivityMs = parseTime(pruneAfter);
+        const monitor = new InactivityMonitor({
+            maxInactivityMs,
+            maxMemoryMb,
+            enableMemoryMonitoring,
+            maxDomNodes,
+            debug,
+        });
+        monitorRef.current = monitor;
+        monitor.on('threshold-exceeded', handleThresholdExceeded);
+        monitor.on('metrics-updated', (newMetrics) => {
+            setMetrics(newMetrics);
+        });
+        monitor.start();
+        logger.log('Provider initialized', {
+            pruneAfter: maxInactivityMs,
+            maxMemoryMb,
+            maxDomNodes,
+        });
+        return () => {
+            monitor.stop();
+        };
+    }, [pruneAfter, maxMemoryMb, enableMemoryMonitoring, maxDomNodes, debug]);
+    useEffect(() => {
+        const handleVisibilityChange = async () => {
+            if (isPageVisible() && isPruned) {
+                logger.log('Tab became visible, triggering rehydration');
+                await handleRehydrate();
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [isPruned]);
+    const handleThresholdExceeded = useCallback(async (newMetrics) => {
+        if (isPruned) {
+            return;
+        }
+        logger.log('Threshold exceeded, starting prune process', newMetrics);
+        try {
+            if (onPrune) {
+                await onPrune();
+            }
+            for (const [key, cleanup] of cleanupHandlers.current.entries()) {
+                try {
+                    logger.log(`Running cleanup handler: ${key}`);
+                    await cleanup();
+                }
+                catch (error) {
+                    logger.error(`Cleanup handler "${key}" failed:`, error);
+                }
+            }
+            setIsPruned(true);
+            setMetrics((prev) => ({ ...prev, lastPruneAt: Date.now() }));
+            logger.log('Prune complete');
+        }
+        catch (error) {
+            logger.error('Error during prune:', error);
+        }
+    }, [isPruned, onPrune, logger]);
+    const handleRehydrate = useCallback(async () => {
+        if (!isPruned) {
+            return;
+        }
+        logger.log('Starting rehydration');
+        setIsRehydrating(true);
+        try {
+            if (placeholder) {
+                await new Promise((resolve) => setTimeout(resolve, 100));
+            }
+            setIsPruned(false);
+            if (onRehydrate) {
+                await onRehydrate();
+            }
+            setMetrics((prev) => ({ ...prev, lastRehydrateAt: Date.now() }));
+            logger.log('Rehydration complete');
+        }
+        catch (error) {
+            logger.error('Error during rehydration:', error);
+        }
+        finally {
+            setIsRehydrating(false);
+        }
+    }, [isPruned, onRehydrate, placeholder, logger]);
+    const forceRehydrate = useCallback(() => {
+        logger.log('Force rehydration requested');
+        handleRehydrate();
+    }, [handleRehydrate, logger]);
+    const registerCleanup = useCallback((key, cleanup) => {
+        logger.log(`Registered cleanup handler: ${key}`);
+        cleanupHandlers.current.set(key, cleanup);
+    }, [logger]);
+    const unregisterCleanup = useCallback((key) => {
+        logger.log(`Unregistered cleanup handler: ${key}`);
+        cleanupHandlers.current.delete(key);
+    }, [logger]);
+    const contextValue = {
+        isPruned,
+        isRehydrating,
+        metrics,
+        forceRehydrate,
+        registerCleanup,
+        unregisterCleanup,
+    };
+    if (isPruned) {
+        if (isRehydrating && placeholder) {
+            return jsx(Fragment, { children: placeholder });
+        }
+        return null;
+    }
+    return (jsx(PruningContext.Provider, { value: contextValue, children: children }));
+}
+
+class SessionStorageAdapter {
+    constructor() {
+        this.logger = createLogger('SessionStorage', false);
+    }
+    get(key) {
+        try {
+            const storageKey = createStorageKey(key);
+            const item = sessionStorage.getItem(storageKey);
+            if (!item) {
+                return null;
+            }
+            const metadata = safeDeserialize(item);
+            if (!metadata) {
+                this.logger.warn(`Failed to parse stored data for key: ${key}`);
+                return null;
+            }
+            return metadata.value;
+        }
+        catch (error) {
+            this.logger.error(`Failed to get item from storage:`, error);
+            return null;
+        }
+    }
+    set(key, value) {
+        try {
+            const storageKey = createStorageKey(key);
+            const metadata = {
+                value,
+                timestamp: Date.now(),
+                version: '1.0.0',
+            };
+            const serialized = safeSerialize(metadata);
+            if (!serialized) {
+                this.logger.error(`Cannot serialize value for key "${key}". Value contains non-serializable data.`);
+                return false;
+            }
+            sessionStorage.setItem(storageKey, serialized);
+            return true;
+        }
+        catch (error) {
+            if (error instanceof DOMException &&
+                (error.name === 'QuotaExceededError' ||
+                    error.name === 'NS_ERROR_DOM_QUOTA_REACHED')) {
+                this.logger.error(`SessionStorage quota exceeded. Consider reducing state size or implementing cleanup.`);
+            }
+            else {
+                this.logger.error(`Failed to set item in storage:`, error);
+            }
+            return false;
+        }
+    }
+    remove(key) {
+        try {
+            const storageKey = createStorageKey(key);
+            sessionStorage.removeItem(storageKey);
+        }
+        catch (error) {
+            this.logger.error(`Failed to remove item from storage:`, error);
+        }
+    }
+    clear() {
+        try {
+            const keys = Object.keys(sessionStorage);
+            const rtrKeys = keys.filter((key) => key.startsWith('rtr_'));
+            rtrKeys.forEach((key) => {
+                sessionStorage.removeItem(key);
+            });
+            this.logger.log(`Cleared ${rtrKeys.length} items from storage`);
+        }
+        catch (error) {
+            this.logger.error(`Failed to clear storage:`, error);
+        }
+    }
+    getUsage() {
+        try {
+            let used = 0;
+            const keys = Object.keys(sessionStorage);
+            keys.forEach((key) => {
+                const value = sessionStorage.getItem(key);
+                if (value) {
+                    used += key.length + value.length;
+                }
+            });
+            const available = 5 * 1024 * 1024;
+            const percentage = (used / available) * 100;
+            return {
+                used,
+                available,
+                percentage: Math.min(percentage, 100),
+            };
+        }
+        catch (error) {
+            this.logger.error(`Failed to get storage usage:`, error);
+            return {
+                used: 0,
+                available: 0,
+                percentage: 0,
+            };
+        }
+    }
+    getMetadata(key) {
+        try {
+            const storageKey = createStorageKey(key);
+            const item = sessionStorage.getItem(storageKey);
+            if (!item) {
+                return null;
+            }
+            return safeDeserialize(item);
+        }
+        catch (error) {
+            this.logger.error(`Failed to get metadata:`, error);
+            return null;
+        }
+    }
+    isExpired(key, ttl) {
+        const metadata = this.getMetadata(key);
+        if (!metadata) {
+            return true;
+        }
+        const age = Date.now() - metadata.timestamp;
+        return age > ttl;
+    }
+    cleanupExpired(ttl) {
+        try {
+            const keys = Object.keys(sessionStorage);
+            const rtrKeys = keys.filter((key) => key.startsWith('rtr_'));
+            let cleaned = 0;
+            rtrKeys.forEach((storageKey) => {
+                const key = storageKey.replace('rtr_', '');
+                if (this.isExpired(key, ttl)) {
+                    sessionStorage.removeItem(storageKey);
+                    cleaned++;
+                }
+            });
+            if (cleaned > 0) {
+                this.logger.log(`Cleaned up ${cleaned} expired items`);
+            }
+            return cleaned;
+        }
+        catch (error) {
+            this.logger.error(`Failed to cleanup expired items:`, error);
+            return 0;
+        }
+    }
+}
+function createStorageAdapter() {
+    return new SessionStorageAdapter();
+}
+
+function usePrunableState(key, initialValue, options = {}) {
+    const { validate, ttl, onExpired, debug = false, } = options;
+    const logger = createLogger(`usePrunableState:${key}`, debug);
+    const storage = useRef(createStorageAdapter()).current;
+    const isMounted = useRef(true);
+    const [state, setState] = useState(() => {
+        try {
+            const stored = storage.get(key);
+            if (stored === null) {
+                logger.log('No stored value found, using initial value');
+                return initialValue;
+            }
+            if (ttl) {
+                const metadata = storage.getMetadata(key);
+                if (metadata) {
+                    const age = Date.now() - metadata.timestamp;
+                    if (age > ttl) {
+                        logger.log(`Stored value expired (age: ${age}ms, ttl: ${ttl}ms)`);
+                        if (onExpired) {
+                            onExpired();
+                        }
+                        return initialValue;
+                    }
+                }
+            }
+            if (validate && !validate(stored)) {
+                logger.warn('Stored value failed validation, using initial value');
+                return initialValue;
+            }
+            logger.log('Restored value from storage');
+            return stored;
+        }
+        catch (error) {
+            logger.error('Failed to restore from storage:', error);
+            return initialValue;
+        }
+    });
+    const saveToStorage = useRef(debounce((value) => {
+        if (!isMounted.current) {
+            return;
+        }
+        try {
+            if (!isSerializable(value)) {
+                logger.error(`Cannot serialize value for key "${key}". Value contains non-serializable data (functions, classes, etc.).
+            
+Fix: Use the 'transform' option to convert to JSON-safe format.
+Docs: https://github.com/yourusername/react-tab-refresh#serialization`);
+                return;
+            }
+            const success = storage.set(key, value);
+            if (success) {
+                logger.log('Saved to storage');
+            }
+            else {
+                logger.error('Failed to save to storage (quota exceeded?)');
+            }
+        }
+        catch (error) {
+            logger.error('Error saving to storage:', error);
+        }
+    }, 100)).current;
+    useEffect(() => {
+        saveToStorage(state);
+    }, [state, saveToStorage]);
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateWrapper = useCallback((value) => {
+        setState((prev) => {
+            const newValue = typeof value === 'function' ? value(prev) : value;
+            return newValue;
+        });
+    }, []);
+    return [state, setStateWrapper];
+}
+function useClearPrunableState() {
+    const storage = useRef(createStorageAdapter()).current;
+    return useCallback((key) => {
+        storage.remove(key);
+    }, [storage]);
+}
+function useStorageUsage() {
+    const storage = useRef(createStorageAdapter()).current;
+    const [usage, setUsage] = useState(() => storage.getUsage());
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setUsage(storage.getUsage());
+        }, 5000);
+        return () => clearInterval(interval);
+    }, [storage]);
+    return usage;
+}
+
+function usePruningState() {
+    const context = useContext(PruningContext);
+    if (!context) {
+        throw new Error('usePruningState must be used within a PruneProvider.\n\n' +
+            'Wrap your app with <PruneProvider>:\n' +
+            '  <PruneProvider>\n' +
+            '    <App />\n' +
+            '  </PruneProvider>\n\n' +
+            'Docs: https://github.com/yourusername/react-tab-refresh#usage');
+    }
+    return context;
+}
+
+export { InactivityMonitor, PruneProvider, createStorageAdapter, useClearPrunableState, usePrunableState, usePruningState, useStorageUsage };
+//# sourceMappingURL=index.esm.js.map