aura-glass/dist/esm/utils/ssr.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

/**
 * SSR (Server-Side Rendering) Utilities
 *
 * Shared helpers for safe browser API access across all components.
 * Prevents hydration mismatches and runtime errors during SSR.
 */
// Re-export existing browser detection utilities
/**
 * Check if DOM is available (alias for isBrowser)
 * React convention name
 */
const canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
/**
 * Safely access window, returns undefined during SSR
 */
const safeWindow = canUseDOM ? window : undefined;
/**
 * Safely access document, returns undefined during SSR
 */
const safeDocument = canUseDOM ? document : undefined;
/**
 * Safely access navigator, returns undefined during SSR
 */
const safeNavigator = canUseDOM ? navigator : undefined;
/**
 * Safe wrapper for code that requires browser APIs
 * Returns undefined during SSR, executes callback in browser
 *
 * @example
 * const userAgent = safeBrowserExec(() => navigator.userAgent);
 */
function safeBrowserExec(callback) {
  if (!canUseDOM) return undefined;
  try {
    return callback();
  } catch (error) {
    console.warn("Browser API call failed:", error);
    return undefined;
  }
}
/**
 * Get a browser API value with a fallback for SSR
 *
 * @example
 * const width = getBrowserValue(() => window.innerWidth, 1024);
 */
function getBrowserValue(getter, fallback) {
  if (!canUseDOM) return fallback;
  try {
    return getter();
  } catch (error) {
    console.warn("Browser API call failed, using fallback:", error);
    return fallback;
  }
}
// Note: prefersReducedMotion is already exported from animations/accessible
// We don't re-export it here to avoid conflicts
/**
 * Get user agent string safely
 * Returns empty string during SSR
 */
function getUserAgent() {
  return getBrowserValue(() => navigator.userAgent, "");
}
/**
 * Check if touch is supported
 * Returns false during SSR
 */
function isTouchDevice() {
  return getBrowserValue(() => "ontouchstart" in window || navigator.maxTouchPoints > 0, false);
}
/**
 * Get viewport dimensions
 * Returns default dimensions during SSR
 */
function getViewportSize() {
  return getBrowserValue(() => ({
    width: window.innerWidth,
    height: window.innerHeight
  }), {
    width: 1024,
    height: 768
  });
}
/**
 * Get device pixel ratio
 * Returns 1 during SSR
 */
function getDevicePixelRatio() {
  return getBrowserValue(() => window.devicePixelRatio, 1);
}
/**
 * Check if WebGL is supported
 * Returns false during SSR
 */
function isWebGLSupported() {
  return getBrowserValue(() => {
    try {
      const canvas = document.createElement("canvas");
      return !!(canvas.getContext("webgl") || canvas.getContext("experimental-webgl"));
    } catch {
      return false;
    }
  }, false);
}
/**
 * Check if localStorage is available
 * Returns false during SSR and in privacy mode
 */
function isLocalStorageAvailable() {
  return getBrowserValue(() => {
    try {
      const test = "__storage_test__";
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch {
      return false;
    }
  }, false);
}
/**
 * SSR-safe event listener helper
 * No-op during SSR, works normally in browser
 */
function addBrowserEventListener(type, listener, options) {
  if (!canUseDOM) return () => {};
  window.addEventListener(type, listener, options);
  return () => window.removeEventListener(type, listener, options);
}
/**
 * SSR-safe requestAnimationFrame
 * Uses setTimeout fallback during SSR
 */
function safeRequestAnimationFrame(callback) {
  if (!canUseDOM) {
    return setTimeout(callback, 16);
  }
  return requestAnimationFrame(callback);
}
/**
 * SSR-safe cancelAnimationFrame
 */
function safeCancelAnimationFrame(handle) {
  if (!canUseDOM) {
    clearTimeout(handle);
    return;
  }
  cancelAnimationFrame(handle);
}
/**
 * Create an SSR-safe ref callback that only runs in browser
 */
function createBrowserRefCallback(callback) {
  if (!canUseDOM) {
    return () => {};
  }
  let cleanup;
  return element => {
    if (cleanup) {
      cleanup();
    }
    if (element) {
      cleanup = callback(element);
    }
  };
}
/**
 * Get connection information safely
 * Returns default values during SSR
 */
function getConnectionInfo() {
  return getBrowserValue(() => {
    const nav = navigator;
    const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
    if (!connection) {
      return {
        effectiveType: "4g",
        downlink: 10,
        rtt: 50,
        saveData: false
      };
    }
    return {
      effectiveType: connection.effectiveType || "4g",
      downlink: connection.downlink || 10,
      rtt: connection.rtt || 50,
      saveData: connection.saveData || false
    };
  }, {
    effectiveType: "4g",
    downlink: 10,
    rtt: 50,
    saveData: false
  });
}
/**
 * Check if running in development mode
 */
const isDevelopment = process.env.NODE_ENV === "development";
/**
 * Check if running in production mode
 */
const isProduction = process.env.NODE_ENV === "production";

export { addBrowserEventListener, canUseDOM, createBrowserRefCallback, getBrowserValue, getConnectionInfo, getDevicePixelRatio, getUserAgent, getViewportSize, isDevelopment, isLocalStorageAvailable, isProduction, isTouchDevice, isWebGLSupported, safeBrowserExec, safeCancelAnimationFrame, safeDocument, safeNavigator, safeRequestAnimationFrame, safeWindow };
//# sourceMappingURL=ssr.js.map