aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
284 lines (278 loc) • 7.55 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
const createFallbackSheet = () => ({
collectStyles: children => jsxRuntime.jsx(jsxRuntime.Fragment, {
children: children
}),
getStyleElement: () => [],
getStyleTags: () => "",
seal: () => undefined,
instance: null
});
function createStyleSheet() {
return createFallbackSheet();
}
function collectStyles() {
return createFallbackSheet();
}
const AuraGlassSSRProvider = ({
children
}) => jsxRuntime.jsx(jsxRuntime.Fragment, {
children: children
});
function isStyledComponentsSSRReady() {
return true;
}
function getStyledComponentsVersion() {
return null;
}
/**
* Environment helpers to centralize SSR/browser detection and safe global access.
*
* CRITICAL: These must check dynamically, NOT cache at module load time,
* to handle polyfills and avoid locking in server environment values.
*/
/**
* Dynamic check - re-evaluates on every call to support polyfills
*/
const hasWindow = () => typeof window !== 'undefined';
const hasDocument = () => typeof document !== 'undefined';
/**
* Returns true when executed in a browser-like environment.
*/
const isBrowser = () => hasWindow() && hasDocument();
/**
* Convenience inverse helper.
*/
const isServer = () => !isBrowser();
/**
* 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";
exports.AuraGlassSSRProvider = AuraGlassSSRProvider;
exports.addBrowserEventListener = addBrowserEventListener;
exports.canUseDOM = canUseDOM;
exports.collectStyles = collectStyles;
exports.createBrowserRefCallback = createBrowserRefCallback;
exports.createStyleSheet = createStyleSheet;
exports.getBrowserValue = getBrowserValue;
exports.getConnectionInfo = getConnectionInfo;
exports.getDevicePixelRatio = getDevicePixelRatio;
exports.getStyledComponentsVersion = getStyledComponentsVersion;
exports.getUserAgent = getUserAgent;
exports.getViewportSize = getViewportSize;
exports.isBrowser = isBrowser;
exports.isDevelopment = isDevelopment;
exports.isLocalStorageAvailable = isLocalStorageAvailable;
exports.isProduction = isProduction;
exports.isServer = isServer;
exports.isStyledComponentsSSRReady = isStyledComponentsSSRReady;
exports.isTouchDevice = isTouchDevice;
exports.isWebGLSupported = isWebGLSupported;
exports.safeBrowserExec = safeBrowserExec;
exports.safeCancelAnimationFrame = safeCancelAnimationFrame;
exports.safeDocument = safeDocument;
exports.safeNavigator = safeNavigator;
exports.safeRequestAnimationFrame = safeRequestAnimationFrame;
exports.safeWindow = safeWindow;
//# sourceMappingURL=ssr.js.map